Xamarin Essentials : Easy access Native feature Platforms

ในบางครั้งการเขียน app เพื่อ access location ปัจจุบันของผู้ใช้ หรือต้องการสั่งให้โทรศัพท์สั่นตาม activity ที่ตั้งไว้ หรือแม้แต่จะ access ข้อมูล device information ของอุปกรณ์ ไม่ใช่เรื่องง่ายเลยสำหรับเหล่า developer ที่เขียน mobile app ยิ่งมีหลาย platform ไม่ว่าจะเป็น android , iOS, Windows ก็มีวิธีการเขียน code การขอ Access permission คนละรูปแบบไปอีก ซึ่งบทความนี้ผู้เขียนจะมาแนะนำให้รู้จักกับ Xamarin Essentials ที่จะมาเป็นตัวช่วยให้ผู้พัฒนาเขียน code แก้ปัญหาเหล่านี้ได้ง่ายขึ้นนั่นเอง Xamarin.Essentials คืออะไร? คือ  official library ที่ทาง Microsoft ได้พัฒนาและรวบรวม library ที่เป็น cross-platform APIs สำหรับให้นักพัฒนา mobile app ที่พัฒนาด้วย Xamarin.Forms ได้ใช้งานในการเข้าถึง native features ของแต่ละ platforms ด้วยการเขียน code จากที่เดียว มีอะไรให้เรียกใช้บ้าง ปัจจุบันมีทั้งหมด 33 feature ให้เรียกใช้งาน อ้างอิงจาก Microsoft Doc ซึ่งมีดังนี้ Accelerometer – Retrieve acceleration data of the device in three dimensional space. App Information – Find out information about the application. Barometer – Monitor the barometer for pressure changes. Battery – Easily detect battery level, source, and state. Clipboard – Quickly and easily set or read text on the clipboard. Color Converters – Helper methods for System.Drawing.Color. Compass – Monitor compass for changes. Connectivity – Check connectivity state and detect changes. Detect Shake – Detect a shake movement of the device. Device Display Information – Get the device’s screen metrics and orientation. Device Information – Find out about the device with ease. Email – Easily send email messages. File System Helpers – Easily save files to app data. Flashlight – A simple way to turn the flashlight on/off. Geocoding – Geocode and reverse geocode addresses and coordinates. Geolocation – Retrieve the device’s GPS

Read More »

Xamarin.Forms : Binding ข้อมูลด้วย MVVM pattern

“MVVM is the best way to architecture mobile apps” Asfend Yar Hamid ซึ่งเป็น Microsoft MVP developer ท่านหนึ่งได้กล่าวไว้ เค้าคือใครน่ะเหรอ ผู้เขียนรู้จักเค้าผ่าน Udemy (คอร์สเรียนออนไลน์ที่เค้ากำลังฮอต ราคาถูก คุณภาพดี แอบรีวิว 555) ซึ่งวันนี้ผู้เขียนจะมาแนะนำการ Binding ข้อมูลของ Xamarin.Form app ด้วย MVVM pattern กันนะคะ MVVM pattern คืออะไร MVVM หรือ Model View ViewModel เป็น design pattern หรือรูปแบบในการวาง architecture ในการเขียน code นั่นเอง โดย Model คือ ส่วนที่เก็บข้อมูลของ Application เรา ตัวอย่างเช่น Entity Class หรือไฟล์ POCO Class ของ object ต่างๆ ที่เกี่ยวข้องกับข้อมูลจะอยู่ที่ส่วนนี้ View คือ ส่วนที่ติดต่อกับ user ซึ่งเป็นส่วนไว้แสดงหน้า app ของเรานั่นเอง ซึ่งView จะไม่รู้อะไรเลยนอกจากการแสดงผล ส่วน Logic อื่นๆจะอยู่ใน ViewModel ViewModel คือ ส่วนที่ทำหน้าที่เก็บข้อมูลทั้งหมดที่ View ต้องการ โดย View จะติดต่อ ViewModel ผ่าน Data-binding ซึ่งหาก View มีการเปลี่ยนแปลงก็จะส่งผลต่อ ViewModel ในทางกลับกันหาก ViewModel มีการเปลี่ยนแปลงก็จะส่งผลถึง View ด้วยเช่นกัน ทำไมต้องใช้ MVVM กับ mobile app ? MVVM ทำให้เราสามารถ separate หรือแยกส่วนการทำงานของ code ออกจากกันได้ชัดเจนตามหน้าที่ของมัน ซึ่งทำให้ง่ายต่อการจัดการ รองรับต่อการเปลี่ยนแปลง เหมาะสำหรับการพัฒนา Application ที่มีการเปลี่ยนแปลง UI บ่อยครั้ง เนื่องจากทุกการเปลี่ยนแปลงในส่วน view จะไม่กระทบต่อ ViewModel ที่เป็น business logic และยังมี Binder ซึ่งเป็นตัวช่วยจัดการการเปลี่ยนแปลงของข้อมูลใน View หรือใน ViewModel ทำให้ไม่จำเป็นต้องเขียน Code ในการควบคุม View เพื่อให้เปลี่ยนแปลงตาม เริ่มกันเลยดีกว่า เกริ่นไปเยอะแล้ว เรามาลองสร้าง app เพื่อ binding ข้อมูลในรูปแบบ MVVM ดูกันเลยค่ะStep 1 : สร้าง Xamarin.Forms project ขึ้นมาก่อน (วิธีสร้างและเลือก template สามารถอ่านได้จากบทความที่แล้ว => สร้าง Hello World app ง่ายๆด้วย Xamarin.Forms) ซึ่งจะได้ project structure ดังรูป ทีนี้เราจะไม่ไปยุ่งในส่วน specific platform project (Android และ iOS) เราจะมาสร้าง MVVM ที่ share project กัน Step 2 : สร้างโฟลเดอร์ Model, View และ View Model ขึ้นมา ดังรูป Step 3: สร้าง class ชื่อ Employee.cs ลงในโฟลเดอร์ Model โดย code ข้างในมีดังนี้

Read More »

สร้าง Hello World app ง่ายๆด้วย Xamarin.Forms

สวัสดีค่ะ จาก 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

Read More »

ทำความรู้จัก Xamarin.Forms + วิธีติดตั้งบน Windows

การพัฒนา Mobile Application ปัจจุบันมีหลากหลาย solution ให้เลือกใช้ ไม่ว่าจะเป็นการพัฒนาแบบ native แยกตามแต่ละแพลตฟอร์ม , พัฒนาแบบ hybrid และแบบ cross platform นอกจากจะมีรูปแบบการพัฒนาให้พิจารณาเลือกแล้ว ยังมี Mobile framework ที่หลากหลายที่เรานำมาใช้ในการพัฒนา app ไม่ว่าจะเป็น React Native, Ionic, Fluter,Android Studio, Xcode, Xamarin เป็นต้น โดยบทความนี้ผู้เขียนจะมาแนะนำ Xamarin.Forms ซึ่งเป็น framework หนึ่งที่นิยมใช้ในการพัฒนา mobile app กัน พร้อมทั้งแนะนำวิธีติดตั้งเครื่องมือเพื่อใช้งาน Xamarin คืออะไร? Xamarin คือ framework หนึ่งในการพัฒนา mobile app แบบ cross platform ของค่าย Microsoft ที่สามารถเขียน code ด้วยภาษา C# แล้วคอมไพล์เป็น native app ให้สามารถรันบน ios , android และ windows platforms ได้ ซึ่งปัจจุบันตัว Xamarin เองก็มีรูปแบบการพัฒนาออกเป็น 2 แนวทาง คือ Xamarin Native และ Xamarin.Forms แล้ว Xamarin.Forms กับ Xamarin Native ต่างกันยังไง? Xamarin Native หรือที่ฝรั่งเรียก Traditional Xamarin Approach เนี่ยเป็นรูปแบบที่ทาง Xamarin ได้พัฒนาออกมาใช้เป็นรูปแบบแรก (ปัจจุบันก็ยังมีให้ใช้อยู่) ซึ่งเป็น shared code platform concept โดยเราสามารถใช้ code ฝั่ง business logic ร่วมกันได้ แต่ code ฝั่ง UI เราก็ต้องเขียน code แยกตาม sdk ของแต่ละ platforms ซึ่งผู้พัฒนาต้องรู้จักการใช้ control ต่างๆ การวาง layout ของแต่ละ platform มาพอสมควร Xamarin.Forms เป็น concept และ tools รูปแบบใหม่ของ Xamarin ที่สามารถแชร์ code ระหว่าง platform ได้ 100% คือสามารถเขียน code เพียงครั้งเดียวทั้งฝั่ง business logic และ UI แล้วคอมไพล์เป็น native app ให้รันได้ทุก platforms (ios, android และ windows) ในส่วนของ UI จะเขียนด้วย XAML เช่นเดียวกับ WPF แต่ต่างกันที่การจัด layout และ control UI ที่มีแตกต่างกัน ซึ่งหากนักพัฒนาคนไหนเคยเขียน WPF มาแล้วก็สามารถเขียน mobile app ด้วย Xamarin.Forms ได้ง่ายขึ้น Xamarin.Forms เหมาะกับ? Developer ที่คุ้นเคยกับ .NET framework เนื่องจากจะคุ้นเคยกับ Tools ที่ใช้งานและทำให้เข้าใจ concept และสามารถพัฒนา app ได้รวดเร็วยิ่งขึ้น พัฒนา Data Entry app เนื่องจาก Xamarin.Forms มี Simple UI control ให้พร้อมใช้งาน ต้องการ app ที่คุ้มค่าแต่ใช้ budget น้อย

Read More »

วิธีสร้างสมุดโทรศัพท์ของหน่วยงานด้วย Google Contact

เคยเป็นไม๊ จะโทรศัพท์หาเพื่อนร่วมงาน แต่ไม่รู้ว่า เบอร์มือถือ เบอร์ที่โต๊ะ หรือ Email อะไร วิธีการที่บางหน่วยงานทำ คือ ทำแผ่นพับเป็นสมุดโทรศัพท์เก็บใส่กระเป๋าตังค์บ้าง เป็นกระดาษแปะบ้าง บางทีก็หาย บางทีก็ไม่ได้พกบ้าง หรือ บางทีทำเป็นเว็บให้ค้นหาบ้าง … บางแห่งถึงกับต้องลงแรงเรียน Mobile App ก็มี (อิอิ) จะดีกว่าไม๊ ถ้าแค่ฝ่ายบุคคล แค่รวบรวม ชื่อ นามสกุล ชื่อเล่น เบอร์มือถือ เบอร์โต๊ะ และ Email ใส่ Excel แล้วจากนั้น ใครใคร่จะ Import ใส่ Google Contact ของตนเองได้เลย แล้วหลังจากนั้น จะโทร จะค้นหา ก็สามารถทำในมือถือของตนเองได้เลย !!! ไม่ต้องพก ไม่ต้องติดตั้ง App เพิ่ม ใช้ได้ทั้ง iOS, Android และบน Computer ก็ยังได้ มาดูกัน สร้าง Excel เก็บข้อมูล การนำเข้า (Import) ข้อมูลเข้า Google Contact มีทริคนิดเดียว คือ บรรทัดแรกของไฟล์ จะต้องเป็น Header ที่กำหนดชื่อตามรูปแบบมาตราฐาน กล่าวคือ ตั้งหัวข้อว่า “ชื่อ”, “นามสกุล”, “ชื่อเล่น”, “มือถือ”, “เบอร์โต๊ะ” อะไรอย่างนี้ +++ไม่ได้+++ ต้องตั้งเป็น “Given Name”,”Family Name”, “Name Suffix”,”Phone 1 – Type”,”Phone 1 – Value”,”Phone 2 – Type”,”Phone 2 – Value”,”Group Membership” Given Name = ชื่อFamilay Name = นามสกุลName Suffix = ใช้เป็นชื่อเล่นก็ได้Phone 1 – Type = ประเภทโทรศัพท์อันที่ 1 (เช่น Mobile)Phone 1 – Value = หมายเลขโทรศัพท์อันที่ 1 (เช่น เบอร์มือถือ) Phone 2 – Type = ประเภทโทรศัพท์อันที่ 2 (เช่น Work)Phone 2 – Value = หมายเลขโทรศัพท์อันที่ 2 (เช่น เบอร์โต๊ะ) Group Membership = จะให้ Label ว่าอย่างไร ดังตัวอย่างนี้ จากนั้น Save เป็นแบบ CSV File สมมุติชื่อว่า contact.csv นำเข้า Google Contact เสร็จแล้ว ก็จะได้ใน Google Contact มี Label ตามภาพ (1 contact มีหลาย ๆ label ได้)ในภาพ จะเห็นว่า Contact ที่เพิ่งนำเข้าไป จะปรากฏใน Label cc2019, myContact และ Imported on 5/7 ซึ่งเป็น Default วิธีการนี้ มีข้อดีคือ แม้จะมี contact ที่ซ้ำกัน ก็ไม่เป็นไร เราสามารถ Merge ทีหลังได้ หรือ เลือกลบที่เป็น Label ของปีก่อน ๆ ได้

Read More »