สุรีย์พร อังสุภานิช

Xamarin Essentials : Easy access Native feature Platforms

July 15, 2019 22:36

ในบางครั้งการเขียน 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

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

July 15, 2019 00:43

“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 ข้างในมีดังนี้

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

June 14, 2019 14:14

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

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

June 7, 2019 16:21

การพัฒนา 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 น้อย

การติดตั้ง Laravel 5 + WAMP

June 28, 2017 23:51

Laravel คืออะไร?? Laravel คือ PHP framework ที่นิยมตัวหนึ่ง ซึ่งมาในรูปแบบของ MVC pattern เช่นเดียวกับ Codeigniter โดยข้อดีของ Laravel คือ โปรแกรมเมอร์ไม่ต้องพยายามเขียนโค้ดเองทั้งหมด Laravel ช่วยลดงานในการพัฒนาโดยสร้างระบบสำเร็จรูปมาให้อย่างพวก authentication, routing, sessionsและ caching. ด้วยความที่เป็น framework ที่นิยม ทำให้มี document และ code ตัวอย่างที่หาอ่านได้ง่าย WAMP คืออะไร? WAMP ย่อมาจาก Windows Apache MySQL PHP ซึ่งก็คือ Apache server หรือตัวจำลอง server ที่ไว้ run จาก localhost นั่นเอง ข้อดีของ WAMP คือ สามารถสลับ PHP version ที่ใช้การ run แต่ละครั้งโดยสลับจากหน้าเมนู interface ของโปรแกรมได้เลย โดยไม่ต้อง stop/start ใหม่ การติดตั้ง 1.download WAMP และทำการติดตั้งให้เรียบร้อย 2.Configure SSL ตั้งค่าเปิดการใช้งาน SSL เพื่อให้ Composer สามารถ run ได้ โดยเข้าไปตั้งค่าที่ไฟล์ php.ini ที่เก็บอยู่ใน path C:\wamp\bin\php\php5.4.16\php.ini (path ที่ install WAMP) แล้วกด Ctrl+F ค้นหา “extension=php_openssl.dll” เมื่อเจอแล้ว ให้เอาเครื่องหมาย ; ที่อยู่ข้างหน้าออกแล้วกด save 3.ติดตั้ง Composer Composer คือ เครื่องมือในการจัดการ library และ package ต่างๆ ของ PHP Framework Download Composer for Window และทำการติดตั้ง **หมายเหตุ ต้องติดตั้ง WAMP ก่อน Composer เนื่องจากตัว Composer จะ run ด้วย php ซึ่งติดมากับ WAMP 4.ติดตั้ง Laravel Framework ตรวจสอบว่า Composer ได้ถูกติดตั้งและพร้อมใช้งานแล้ว โดยเปิด command prompt ขึ้นมาและพิมพ์คำสั่ง composer หากทำการติดตั้งและพร้อมใช้งานแล้วจะได้ผลลัพธ์ดังรูป ต่อมา ติดตั้ง Laravel โดยเข้าไปที่ path C:\wamp64\www ซึ่งเป็นที่เก็บตัว project web ของ WAMP Serverหลังจากนั้นให้พิมพ์คำสั่งตามด้านล่าง โดยให้ระบุชื่อ project หลัง /laravel เช่นในตัวอย่างคำสั่ง ชื่อ project ของเราคือ test composer create-project –prefer-dist laravel/laravel test หลังจากนั้น Composer จะไป download Laravel Framework และ Library ที่เกี่ยวข้องมาให้ ดังรูป เมื่อติดตั้งเสร็จเรียบร้อยแล้วจะได้ Application key ของ project ที่เราสร้างขึ้น ดังรูป เข้าไป Directory ที่เราได้สร้าง project ไว้ จะพบโครงสร้าง project ดังรูป 5. ทดสอบ run project (อย่าลืม start WAMP ก่อน run ทุกครั้งนะคะ) โดยเปิด browser ขึ้นมา และพิมพ์ localhost/test/public/ จะได้ผลลัพธ์ดังรูป เป็นอันเสร็จสิ้นกระบวนการติดตั้ง