ทำความรู้จัก 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 »

วิธีทำ Screen Mirror จาก Android ขึ้นมาแสดงบน PC (Ubuntu)

เนื่องจากเครื่อง Notebook ที่ใช้ ลง Ubuntu 17.04 Desktop จึงนำเสนอวิธีนี้ก่อน ใน Android ต้องเปิด Developer Options เปิด USB Debuging เสียบ Android กับ USB ที่เครื่อง Ubuntu Desktop ติดตั้งดังนี้ sudo apt install adb android-tools-adb ffmpeg ใช้คำสั่งต่อไปนี้ เพื่อดูว่า มี Android มาต่อทาง USB หรือไม่ lsusb ผลที่ได้ ต่อไป ใช้คำสั่งต่อไปนี้ เพื่อดูว่า ADB เห็น Android หรือไม่ adb shell screenrecord –output-format=h264 – | ffplay ผลที่ได้คือ หน้าจอ Android จะปรากฏบน PC (Ubuntu) Reference: https://askubuntu.com/questions/213874/how-to-configure-adb-access-for-android-devices

Read More »

การสร้าง Hybrid App ด้วย Ionic Framework

ในบทความนี้จะนำขั้นตอนการพัฒนา Hybrid App อย่างง่ายด้วย Ionic Framework เพื่อเป็นแนวทางการพัฒนาแก่ผู้ที่สนใจ โดยเครื่องที่ใช้ในการทดลองเป็นปฏิบัติการ Windows 10 มีขั้นตอนการติดตั้งเครื่องมือต่าง ๆ เพื่อให้สามารถใช้ Ionic ได้ดังนี้ ติดตั้ง js โดยดาวน์โหลดไฟล์ node-v4.4.7-x64.msi ได้จาก http://nodejs.org วิธีการติดตั้งก็ไม่ยุ่งยากครับ ใช้ Next Technology ได้เลย จะมีหน้าจอขั้นตอนต่าง ๆ ดังรูป ติดตั้ง 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 เปิด command line ขึ้นมา แล้วกำหนด working directory เป็นที่ที่สำหรับใช้เก็บ project (ในที่นี้จะกำหนดเป็น “C:\ionic” ) สร้าง project กำหนดชื่อ myApp และใช้ tabs เป็น template ตั้งต้นโดยใช้คำสั่ง $ ionic start myApp tabs ผลลัพธ์ที่ได้จากคำสั่งนี้ จะทำให้ได้ไฟล์ต่าง ๆ ดังรูป จะพบว่ามีโฟลเดอร์ชื่อ www สำหรับเก็บโค้ด HTML, CSS, Java Script เหมือนกับการพัฒนาเว็บไซต์ ให้เราใช้ความรู้ด้านการเขียนเว็บไซต์สร้างไฟล์ต่าง ๆ เก็บไว้ในโฟลเดอร์นี้ได้เลย หลังจากสร้างไฟล์ 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 เช่นเคย Build และ Run บน Android โดยใช้คำสั่งต่อไปนี้ $ ionic platform add android $ ionic build android $ ionic emulate androidจะทำให้ได้ผลลัพธ์ดังรูป จากรูปเป็นผลลัพธ์ที่ได้จากการใช้ Tab template ซึ่งผู้พัฒนาจะต้องแก้ไขโค้ดให้เป็นไปตามที่ได้ออกแบบไว้

Read More »