สวัสดีค่ะ จาก post ที่แล้วได้แนะนำ วิธีติดตั้งเครื่องมือที่ใช้พัฒนา app ด้วย Xamarin.Forms ไปแล้ว บทความนี้เราจะมาเริ่มสร้าง app ง่ายๆ นั่นก็คือ Hello World app หรือ แอพสวัสดีชาวโลก นั่นเองค่ะ เพื่อเรียนรู้การทำงานและทำความเข้าใจ solution/project structure ของ Xamarin
มาเริ่มกันเลยค่า…
1. ก่อนอื่นเราต้องสร้าง project ขึ้นมาก่อน เปิด Visual Studio แล้วเลือก Create New Project ดังรูป
2. เลือก Cross Platform และเลือก Mobile App (Xamarin.Forms) template หลังจากนั้น ตั้งชื่อ Project และระบุ path ของ project ตามต้องการแล้วกด OK ดังรูป
3. หน้า Select template จะมี template ให้เลือก 3 แบบ คือ Blank, Master-Detail และ Tabbed
– Blank คือ project เปล่าๆ ว่างๆ ไม่มี page ใดๆ generate มาให้
– Master-Detail คือ project ที่ generate page ในลักษณะ Mater Detail เป็นตัวอย่างมาให้พร้อม
– Tabbed คือ project ที่ generate page ในลักษณะ Tab menu มาให้
เลือกได้ตามสะดวก ขึ้นอยุ่กับ app ว่าเป็นแบบไหน ผู้เขียนเลือก Blank template ไปก่อน อยากเพิ่มอะไรค่อยเพิ่มทีหลังได้ค่ะ ส่วนของ Platform ก็เลือกเลยว่าอยากให้คอมไพล์เป็น app ของ platform ไหนบ้าง และในส่วนของ Code Sharing Strategy จะมีให้เลือก 2 รูปแบบ คือ .NET Standard กับ Share Project ให้กดเลือก .NET Standard ซึ่งเป็นCode Sharing รูปแบบใหม่ที่ทาง Microsoft แนะนำ แล้วกด OK ดังรูป
4. เสร็จแล้วจะได้หน้าตา project ที่มีโครงสร้างแบบนี้ พร้อมให้เราเขียน code พัฒนา app แล้วค่ะ
ก่อนที่เราจะทดลอง run ดูผลลัพธ์ เรามาดู Solution/Project structure กันคร่าวๆ ก่อนว่าประกอบด้วยอะไรบ้าง เราต้องเขียน code ลงตรงไหน ยังไงบ้าง
Solution/Project Structure
ใน solution ที่เราสร้างขึ้นมาจะประกอบไปด้วย share project และ project ตาม platform ที่เราได้เลือกไว้ที่หน้า template จากตัวอย่างข้างบนจะประกอบด้วย 
1. HelloWord คือ share project ที่เราสามารถเขียน code ทั้งหมดภายใต้ project นี้ ทั้งส่วน UI ที่เขียนด้วย XAML และส่วน business logic ต่างๆ ที่เขียนด้วย C#
2. HelloWorld.Android คือ android platform project ที่มีการ add reference และ initial ภายใน project ให้สามารถรองรับการคอมไพล์ code ที่มาจาก share project ได้ โดยภายในโครงสร้าง project จะมี MainActivity.cs ที่ภายในมีการ initial Xamarin.form เอาไว้ และมีไฟล์ AndroidManifest.XML,Assets, Resource file ต่างๆ ที่คล้ายกับโครงสร้าง android project ทั่วไป ซึ่งหากเราต้อง specific code เฉพาะ platform เราก็สามารถมาเขียน code เพิ่มเติมที่ project นี้ได้ค่ะ
3. HelloWorld.iOS คือ iOS platform project ที่มีการ add reference และ initial ภายใน project ให้สามารถรองรับการคอมไพล์ code ที่มาจาก share project ได้ เช่นเดียวกันกับ android ซึ่งภายในโครงสร้าง iOS project จะมีไฟล์หลักๆ AppDelegate.cs, Assets,Resource, Info.plist เช่นเดียวกับโครงสร้าง iOS project ที่เขียน native app ด้วย XCode ซึ่งหากเราต้อง specific code เฉพาะ platform เราก็สามารถมาเขียน code เพิ่มเติมที่ project นี้ได้เช่นเดียวกัน
เมื่อเราได้ทราบ solution structure คร่าวๆ แล้ว เราจะมาทดลองเขียน code และ run แอปกันดูนะคะ หลักๆ เลย เราจะเขียน UI ด้วย XAML ไฟล์ และ code behind เป็น .cs จากรูปด้านล่าง ที่ solution explorer สังเกตจะมีไฟล์ App.xam.cs ซึ่งจะเป็นไฟล์หลักในการ start แอปขึ้นมา
ซึ่งในไฟล์ ส่วนหลักที่เรียก load หน้าแรกของ app ขึ้นมา คือ การ set หน้า page แรกให้กับ MainPage properties โดย default จะ set ไปที่ MainPage ซึ่งเป็น Page ที่เราสร้างขึ้น และมี override method หลัก 3 method คือ OnStart(), OnSleep() และ OnResume() แต่ละ method การทำงานก็ตามชื่อเลย หากเราต้อง handle code อะไรที่จะให้แอปทำงานเพิ่มเติมก็ใส่ code เพิ่มเติมได้เลย ดังรูป
ทีนี้เราลองมาแก้ code ที่หน้า MainPage.xaml กันดูบ้าง ทดลองเปลี่ยนข้อความและขยาย Font ดังรูป
เสร็จแล้วก็ได้เวลา run app ขึ้นมาซะที หากใครติดตั้งตัว Emulator มาด้วยแล้ว ตรง tab bar ที่รัน ก็จะ default Emulator ตัวนั้นขึ้นมาให้ทันที ซึ่งผู้เขียนไม่ได้ติดตั้งไว้ เนื่องจากกินพื้นที่เยอะและเวลา run เนี่ยกินแรมเยอะมากกกก โดยผู้เขียนจะใช้วิธีเสียบสาย usb ต่อเข้ากับมือถือ android เพื่อที่จะได้ run บน device จริงๆเลย (ปล. มือถือต้องเปิด Developer mode และ USB Debugging mode ก่อนนะคะ ซึ่งวิธีเปิดลองหาดูตาม google ค่ะ เพราะแต่ยี่ห้อ แต่ละรุ่นมีวิธีกดเปิดไม่เหมือนกัน) ถ้าหา device เจอแล้ว ตรง tab bar ที่รัน จะขึ้นรุ่นมือถือมาให้เห็นดังรูป
กดปุ่ม run เลยค่ะ ผลลัพธ์ที่ได้บนหน้าจอมือถือของเราก็จะประมาณนี้ โดย app จะถูก build และติดตั้งบนเครื่องให้เรียบร้อยค่ะ หลังจากนั้นเราสามารถเรียกดู app ได้โดยไม่ต้องเสียบสายจากการแตะ icon บนหน้าจอเหมือนแอพทั่วไปบนเครื่องได้เลยค่ะ
เป็นอันเสร็จเรียบร้อยค่ะ ^^ ฝากบทความถัดไปของซีรีย์นี้ด้วยนะคะ => Xamarin.Form Binding ข้อมูลด้วย MVVM pattern