Category: Android

สร้าง 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 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

June 14, 2019
ทำความรู้จัก 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 Native (Traditional) กับ Xamarin.Forms
ที่มารูป :
https://xamarinhelp.com/xamarin-forms-making-traditional-xamarin-obsolete/

Xamarin.Forms เหมาะกับ?
1. Developer ที่คุ้นเคยกับ .NET framework เนื่องจากจะคุ้นเคยกับ Tools ที่ใช้งานและทำให้เข้าใจ concept และสามารถพัฒนา app ได้รวดเร็วยิ่งขึ้น
2. พัฒนา Data Entry app เนื่องจาก Xamarin.Forms มี Simple UI control ให้พร้อมใช้งาน
3. ต้องการ app ที่คุ้มค่าแต่ใช้ budget น้อย เนื่องจาก Xamarin.Form เขียน code ครั้งเดียวสามารถ run ได้ทั้ง 3 platform ได้แก่ Android, IOS และ Windows ทำให้ประหยัดงบในการ implement แต่ละ platform
Xamarin.Forms ไม่เหมาะกับ?
1. ผู้ที่ไม่คุ้นเคยกับ .NET Framework และภาษา C# เนื่องจากจะต้องศึกษาทำความเข้าใจใหม่มากพอสมควร ซึ่งหากถนัด FrontEnd web หรือ java script อาจพิจารณาเลือกใช้ framework อื่น เช่น React Native, Ionic หรือ Fluter จะพัฒนา app เสร็จได้รวดเร็วกว่า
2. ไม่เหมาะกับ app ที่มี UI ซับซ้อนหรือ specific UI เฉพาะแต่ละ platform
วิธีติดตั้ง Xamarin.Forms บน Windows

System Requirement
1. Windows 10 ขึ้นไป
2. Microsoft Visual Studio โดยเวอร์ชันที่รองรับการใช้งาน Xamarin.Forms ต้องเป็น Microsoft Visual Studio 2017 version 15.8 ขึ้นไป
วิธีติดตั้ง
1. Download Visual Studio และ double click ไฟล์เพื่อ install แต่หากใครมี Visual Studio อยู่แล้ว ให้เปิด Visual Studio Installer ขึ้นมา แล้วเลือก Modify ดังรูป
2. ที่โมดูล Mobile & Gaming เลือก Mobile development with .NET ดังรูป
3. สังเกตที่ Installation Detail ฝั่งด้านขวา จะแสดงรายละเอียด package ที่ติดตั้ง ให้สังเกตุที่ Optional จะ default package มาให้ ซึ่งจะเห็นว่ากิน space มากพอสมควร ซึ่งตัวที่กินพื้นที่เยอะสุดคือตัว Google Android Emulator
  
  โดยหากใครจะประหยัดพื้นที่ แล้วเสียบสาย run ด้วย android device เลย ก็ให้ติ๊กถูกที่หน้า Google Android Emulator ออกได้เลย ซึ่งทำให้ space ลดลงไปเกือบครึ่งนึงเลยค่ะ
4. จากนั้นกดปุ่ม Install หรือ Modify (กรณีลง VS ไว้แล้ว)
5. จากนั้นก็ Take a coffee รอจนเสร็จค่า ^^
เป็นอันเสร็จสิ้นการติดตั้งเครื่องมือเตรียมพร้อมสำหรับการสร้าง Mobile application ด้วย Xamarin.Forms ซึ่งจะเห็นว่าขั้นตอนการติดตั้งง่ายไม่ซับซ้อนเลยถ้าเทียบกับ mobile framework อื่นๆ นะคะ บทความหน้าจะมาแนะนำเริ่มต้นการสร้าง app ด้วย Xamarin.Forms กันค่า
June 7, 2019
วิธีสร้างสมุดโทรศัพท์ของหน่วยงานด้วย 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

เปิด Gmail/Google Mail แล้วคลิกที่ App > Contacts

ใน Google Contact คลิกที่ More > Import

เลือกไฟล์

เสร็จแล้ว ก็จะได้ใน Google Contact มี Label ตามภาพ (1 contact มีหลาย ๆ label ได้)
ในภาพ จะเห็นว่า Contact ที่เพิ่งนำเข้าไป จะปรากฏใน Label cc2019, myContact และ Imported on 5/7 ซึ่งเป็น Default

วิธีการนี้ มีข้อดีคือ แม้จะมี contact ที่ซ้ำกัน ก็ไม่เป็นไร เราสามารถ Merge ทีหลังได้ หรือ เลือกลบที่เป็น Label ของปีก่อน ๆ ได้ ถ้าต้องการ

พร้อมใช้งานทันที

เมื่อ Import เสร็จแล้ว ในมือถือที่ Sync กับ Google Account ที่เราเอา Contact ใส่เข้าไปก็จะสามารถค้นหาได้ทันที

หาตามเบอร์โทรศัพท์ก็ได้

เย ๆ
May 7, 2019
วิธีทำ Screen Mirror จาก Android ขึ้นมาแสดงบน PC (Ubuntu)
เนื่องจากเครื่อง Notebook ที่ใช้ ลง Ubuntu 17.04 Desktop จึงนำเสนอวิธีนี้ก่อน
1. ใน Android ต้องเปิด Developer Options
2. เปิด USB Debuging
3. เสียบ Android กับ USB
4. ที่เครื่อง Ubuntu Desktop ติดตั้งดังนี้
  sudo apt install adb android-tools-adb ffmpeg
5. ใช้คำสั่งต่อไปนี้ เพื่อดูว่า มี Android มาต่อทาง USB หรือไม่
  lsusb
  ผลที่ได้
6. ต่อไป ใช้คำสั่งต่อไปนี้ เพื่อดูว่า ADB เห็น Android หรือไม่
  adb shell screenrecord –output-format=h264 – | ffplay
7. ผลที่ได้คือ หน้าจอ Android จะปรากฏบน PC (Ubuntu)
Reference:
1. https://askubuntu.com/questions/213874/how-to-configure-adb-access-for-android-devices
August 11, 2017
การสร้าง Hybrid App ด้วย Ionic Framework
ในบทความนี้จะนำขั้นตอนการพัฒนา Hybrid App อย่างง่ายด้วย Ionic Framework เพื่อเป็นแนวทางการพัฒนาแก่ผู้ที่สนใจ โดยเครื่องที่ใช้ในการทดลองเป็นปฏิบัติการ Windows 10 มีขั้นตอนการติดตั้งเครื่องมือต่าง ๆ เพื่อให้สามารถใช้ Ionic ได้ดังนี้
1. ติดตั้ง js โดยดาวน์โหลดไฟล์ node-v4.4.7-x64.msi ได้จาก http://nodejs.org วิธีการติดตั้งก็ไม่ยุ่งยากครับ ใช้ Next Technology ได้เลย จะมีหน้าจอขั้นตอนต่าง ๆ ดังรูป
1. ติดตั้ง Cordova และ Ionic command line tool โดยการเปิด command prompt ของ windows ขึ้นมา แล้วรันคำสั่ง
  $ npm install -g ionic
เริ่มต้นสร้าง App อย่างง่าย

หลังจากที่เตรียมความพร้อมของเครื่องที่พัฒนาเรียบร้อยแล้ว ขั้นตอนต่อไปก็จะเป็นการสร้าง App ขึ้นมา ซึ่ง Ionic ได้เตรียม template ตั้งต้นไว้ให้เราแล้ว ได้แก่ side menu, maps, salesforce, complex-list, blank เราก็ดูว่า App ของเราสามารถใช้ template ตัวไหนได้บ้าง ก็เลือกมาใช้ได้เลย

รูปที่ 1 Ionic Template [ที่มา : http://ionicframework.com]

ขั้นตอนการสร้าง App โดยใช้ command line tools
1. เปิด command line ขึ้นมา แล้วกำหนด working directory เป็นที่ที่สำหรับใช้เก็บ project (ในที่นี้จะกำหนดเป็น “C:\ionic” )
1. สร้าง project กำหนดชื่อ myApp และใช้ tabs เป็น template ตั้งต้นโดยใช้คำสั่ง
  $ ionic start myApp tabs
  ผลลัพธ์ที่ได้จากคำสั่งนี้ จะทำให้ได้ไฟล์ต่าง ๆ ดังรูป
  จะพบว่ามีโฟลเดอร์ชื่อ www สำหรับเก็บโค้ด HTML, CSS, Java Script เหมือนกับการพัฒนาเว็บไซต์ ให้เราใช้ความรู้ด้านการเขียนเว็บไซต์สร้างไฟล์ต่าง ๆ เก็บไว้ในโฟลเดอร์นี้ได้เลย
1. หลังจากสร้างไฟล์ App ขึ้นมาแล้ว ก็จะเข้าสู่ขั้นตอนการ Build ให้ App สามารถรันบน Platform ต่าง ๆ ได้ สำหรับในบทความนี้จะแสดงเฉพาะการ Build สำหรับ Android เพื่อให้เห็นเป็นแนวทางการพัฒนา เนื่องจากเครื่องที่ใช้ทดสอบเป็น Windows 10 หากจะ Build ให้รันบน iOS ได้ ก็ต้อง Build บนเครื่องที่ใช้ระบบปฏิบัติการ iOS ในส่วนของการเตรียมความพร้อมสำหรับการ Build ให้รันบน Android ได้ เครื่องที่ใช้ในการพัฒนาจะต้องติดตั้ง Java Development Kit (JDK) 7 และAndroid Stand-alone SDK Tools หรือ Android Studio ก่อน ซึ่งขั้นตอนการติดตั้งก็ไม่ยากครับ ใช้ Next Technology เช่นเคย
1. Build และ Run บน Android โดยใช้คำสั่งต่อไปนี้
  $ ionic platform add android
  $ ionic build android
  $ ionic emulate androidจะทำให้ได้ผลลัพธ์ดังรูป
  
  จากรูปเป็นผลลัพธ์ที่ได้จากการใช้ Tab template ซึ่งผู้พัฒนาจะต้องแก้ไขโค้ดให้เป็นไปตามที่ได้ออกแบบไว้ ก็จะได้ Android App ตามต้องการ
July 14, 2016