Category: Mobile Device

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

  • วิธีสร้างสมุดโทรศัพท์ของหน่วยงานด้วย 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 ใส่เข้าไปก็จะสามารถค้นหาได้ทันที

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

    เย ๆ

  • วิธีทำ 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

  • App Analytics: เครื่องมือจัดเก็บวิเคราะห์สถิติและเฝ้าระวัง แอพลิเคชั่นบน iOS

    นักพัฒนาหลายท่านโดยเฉพาะ นักพัฒนาเว็บ น่าจะคุ้นเคยกับบริการเก็บข้อมูลและวิเคราะห์ สกิติเว็บไซด์อย่างเช่น Google Analytic เป็นอย่างดี ซึ่งในปัจจุบันถือว่ามีความจำเป็นมากที่นักพัฒนาต้องบอกได้ว่า ผู้ใช้ของเรามีจำนวนเท่าไหร่ เกิดข้อผิดพลาดมากน้อยเพียงใด และช่วงเวลาใดที่มีการใช้งานเยอะ เพื่อเตรียมทรัพยากรให้เพียงพอต่อการให้บริการ รวมถึงการกำหนดเวลาปิดระบบเพื่อบำรุงรักษา ได้อย่างมีประสิทธิภาพ

    ในส่วนของ แอพลิเคชั่นบนระบบปฏิบัติการ iOS เองก็มีเครื่องมือที่ชื่อว่า App Analytics ให้ใช้งาน โดยที่นักพัฒนาไม่ต้องทำอะไรเพิ่มเติม เพียงแค่แอพพลิเคชั่นของท่านอยู่ในสถานะ พร้อมให้ใช้งาน (Ready For Sale) ก็สามารถเข้าใช้งาน App Analytics ได้ทันที โดยมีขั้นตอน และการแปลผลดังนี้

    1. เข้าไปยัง https://itunesconnect.apple.com ทำการ Login ด้วย Apple Developer Account
    2. เลือกเมนู App Analytics
    3. เมื่อเข้าไปยังหน้าแรกจะมีรายการแอพพลิเคชั่นของเราแสดงอยู่ พร้อมข้อมูลเบื้องต้น ในระยะเวลา 1 เดือนล่าสุด (สามารถเปลี่ยนช่วงเวลาได้) โดยข้อมูลที่แสดงอยู่ประกอบไปด้วย
      1. Impressions : จำนวนครั้งที่แอพพลิเคชั่นของเราปรากฏให้ผู้ใช้เห็นเช่น อยู่ในผลการค้นหา, แอพแนะนำ, Top Chart หรือเมื่อผู้ใช้เปิดดูหน้าข้อมูลแอพพลิเคชั่นของเรา เพื่อใช้ดูว่าจำนวนการดาวส์โหลด เมื่อเทียบกับจำนวน Impressions แล้ว ความสนใจในแอพของเรามีมากน้อยเพียงใด
      2. App Units: จำนวนเครื่องที่ติดตั้งแอพพลิเคชั่นของเราอยู่
      3. Sales: จำนวนเงินรวม ที่ขายได้
      4. Sessions: จำนวนการเปิดใช้งาน
      5. Crashes: จำนวนข้อผิดพลาดที่เกิดขึ้นขณะใช้งาน
    4. เมื่อคลิกเลือกที่รายการ แอพลิเคชั่น จะแสดงข้อมูล Impressions, Product Page Views, App Units, In-App Purchases, Sales, Sessions, Active Devices, Crashes ในรูปแบบกราฟ อยู่ส่วนบนสุด
    5. ถัดมาจะเป็น Info graphic แยกตามประเทศ โดยสามารถเลือกได้ว่าเป็นข้อมูล App Units, Sessions, Active Devices เป็นต้น
    6. ล่างสุดจะเป็นกราฟวงกลม แยกตามอุปกรณ์ โดยสามารถเลือกได้ว่าเป็นข้อมูล App Units, Sessions, Active Devices ได้เช่นกัน
    7. หากต้องการดูข้อมูลในมุมมองอื่นๆ หรือกำหนดเงื่อนไขเพิ่มเติมเพื่อดูในรูปแบบกราฟเส้น สามารถเลือกเมนู Metrics และกำหนดค่าต่างๆได้ตามต้องการ
    8. จากหน้าจอกราฟแบบ Metrics สามารถ Export ออกเป็น Excel ได้โดยกดปุ่ม

  • Test Flight: อัพโหลดแอพลิเคชั่นขึ้นทดสอบบน App Store โดยผู้ใช้จริง

    ไม่ว่าจะพัฒนาแอพลิเคชั่นด้วยวิธีการใดก็ตาม เมื่อพัฒนาเสร็จเรียบร้อย และผ่านการทดสอบจากผู้พัฒนาเองโดยการใช้ Simulator หรืออุปกรณ์ที่ลงทะเบียนไว้ เรียบร้อยแล้ว สำหรับแอพพลิชั่น ที่มีผู้ใช้จำนวนมาก และต้องรองรับกับความหลากหลายของอุปกรณ์ทั้งรุ่นของระบบปฏิบัติการ ขนาดหน้าจอ และฮาร์ดแวร์ จำเป็นต้องมีการทดสอบ โดยผู้ใช้จริงจำนวนหนึ่งเพื่อวัตถุประสงค์ในการลดข้อผิดพลาด เมื่อเปิดให้ใช้งานจริง โดยมีขั้นตอนดังต่อไปนี้

    1. เข้าไปยัง https://itunesconnect.apple.com ทำการ Login ด้วย Apple Developer Account
    2. เลือกเมนู My Apps
    3. จะเข้าสู่หน้าจอจัดการ หากยังไม่มี Application Record ต้องทำการสร้างก่อน โดยคลิกที่ปุ่ม จากนั้นจะได้หน้าจอสำหรับป้อนข้อมูลแอพพลิเคชั่นของเรา กรอกข้อมูลให้ครบถ้วน
    4. จากนั้นกรอกข้อมูลอื่นๆ อัพโหลดภาพตัวอย่างตามข้อกำหนดของ Apple ให้ครบถ้วน (รายละเอียดในส่วนนี้สามารถอ่านเพิ่มเติมจาก https://developer.apple.com/app-store/review)
    5. เมื่อสร้าง Application Record เรียบร้อย เลือกที่ไอคอนแอพลิเคชั่นของเรา จะได้หน้าจอดังรูป
    6. เลือกเมนู TestFlight จะแสดงหน้าจอรายการ Build (ไฟล์ ipa ของแอพลิเคชั่น) ที่เราได้อัพโหลดไว้กรณีไม่ปรากฏดังตัวอย่าง แสดงว่าไม่มี Build ที่อยู่ในสถานะที่จะใช้งาน TestFlight ได้ให้ทำการอัพโหลดใหม่
    7. เมื่ออัพโหลดไฟล์ IPA เรียบร้อยแล้ว จะปรากฏ Build ที่สามารถเปิดให้ทดสอบได้ ดังรูป
    8. จัดการข้อมูลผู้ทดสอบโดยเลือกเมนู All Testers ด้านซ้ายมือ ในส่วนนี้สามารถทำการลบรายการผู้ทดสอบได้ โดยการกดปุ่ม Edit เลือกรายการที่ต้องการลบ จะปรากฏเมนูปุ่ม Remove ให้สามารถลบได้
    9. หากต้องการเพิ่มผู้ทดสอบจะต้องเลือกเมนู iTunes Connect Users (อีเมลที่ได้รับการเพิ่มเป็นสมาชิกของทีมใน Apple Developer Account) หรือ External Testers (อีเมลอื่นๆ) โดยสามารถกดปุ่ม จากนั้นสามารถเลือกได้ว่าจะเพิ่มรายบุคคล หรือโหลดจากไฟล์ CSV
    10. เมื่อมีรายการผู้ทดสอบครบถ้วนแล้วให้กลับไปที่เมนู Build คลิกเลือก จะปรากฏหน้าจอสำหรับเลือกผู้ทดสอบที่ต้องการให้ทดสอบ Build นี้ โดยสามารถเพิ่มจากชื่อกลุ่ม หรือ รายบุคคลก็ได้
    11. จากนั้นกรอกข้อมูลสำหรับทำ External Testing โดยคลิกที่เมนู Test Information กรอกข้อมูลให้ครบถ้วน
    12. เมื่อเสร็จกระบวนการข้างต้น ผู้ทดสอบที่เป็นสมาชิกภายใน (อีเมลที่ลงทะเบียนเป็น Member ของ Apple Developer Account) จะได้รับอีเมล Invite สามารถทดสอบได้ทันที ส่วนผู้ทดสอบภายนอกจะต้องรอให้ผ่านกระบวนการรีวิวจากทาง Apple 
    13. จากนั้นแจ้งให้ผู้ใช้ดาวส์โหลด TestFlight App เพียงเท่านี้ก็สามารถโหลดแอพของเรา และทดสอบการใช้งานแอพบนเครื่องที่ใช้งานจริงได้แล้วครับ

     

     

  • TeamViewer QuickSupport

    สำหรับการเขียน blog ในรอบนี้ คิดอยู่นานว่าจะเขียนอะไรดี แต่เนื่องด้วยภาระหน้าที่ในงานส่วนใหญ่ที่ทำ

    คือการ support ให้กับลูกค้า และ ณ ปัจจุบันนี้ กลุ่มของลูกค้าที่ทางผู้เขียนต้องติดต่อประสานงานด้วยนั้น

    ก็หลากหลายมากกกกก (กอ ไก่ หมื่นตัว – -“) และปัญหาหลักๆ ที่เกิดขึ้นก็คือ การอธิบายปัญหาระหว่างลูกค้า

    และตัวเรานั้น “เข้าใจไม่ตรงกัน”

     

    ดังนั้นวันนี้ทางผู้เขียนจึงอยากจะแนะนำ Application ที่จะช่วยให้การติดต่อ ระหว่างเครื่อง Notebook ของเรา

    กับเจ้า Tablet หรือ Smartphone ของลูกค้า ง่ายขึ้นไปอี๊กกกก ^__^

     

    TeamViewer QuickSupport เป็น Application ที่มีให้ดาวน์โหลดทั้งบน iOS และ Android ละนะ

    สำหรับตัวอย่างหน้าตา App ก็คล้ายๆ ตัว TeamViewer ที่เราใช้บน PC หรือ Notebook นี่แหละ

     

    ** แต่ต้องขอบอกก่อนว่า feature ที่ได้เนี่ยอาจจะไม่เหมือนกันนะ สำหรับ samsung ก็จะมี quicksupport for samsung เลย สำหรับรุ่นอื่นๆ ก็อาจจะต้องมีการลง add-on เพิ่มเติม เพื่อที่จะสามารถใช้งาน feature remote control

    ได้ และสำหรับเจ้า add-on เนี่ย ก็ไม่ได้มีทุกค่ายนะ ยังไงก็สามารถทดลองเล่นๆ กันดูได้

    • เริ่มแรกก็สามารถเข้าไปดาวน์โหลดได้ที่ Play Store ค้นหา App teamviewer quicksupport จากนั้นคลิก Install กันได้เลย เมื่อติดตั้งเรียบร้อยแล้วก็ Open โปรแกรมขึ้นมา *** สำหรับเครื่องไหนที่จะต้องดาวน์โหลด add-on เพิ่มเติม มันก็จะมี pop up แจ้งบอกเรานะ สำหรับ add-on ก็มีจะเยอะแยะหลายรุ่น ลองเลือกๆ กันดูได้เลย
    • เปิด TeamViewer บน PC หรือ Notebook ขึ้นมา เพื่อเริ่มต้นการ Remote หน้าจอของผู้ใช้ นำ Your ID ของลูกค้ามากรอกในช่อง Partner ID จากนั้น คลิก connect to partner *** แต่ถ้าคอมพิวเตอร์เราไม่มีโปรแกมดังกล่าว ก็สามารถเข้าผ่าน https://start.teamviewer.com ได้เหมือนกันนะ

    • เมื่อเริ่มต้น connect บนฝั่งของทาง smartphone ของลูกค้าก็จะมีการให้ยืนยันการเชื่อมต่อ ว่าจะ อนุญาต หรือปฏิเสธ ให้เลือกอนุญาต จากนั้นการเชื่อมต่อก็จะพร้อมใช้งานได้ทันที 🙂
    • เมื่อเชื่อมต่อเรียบร้อยแล้ว เราก็จะเห็นหน้าจอของลูกค้า ผ่านทางเครื่องคอมพิวเตอร์ของเรา และสามารถควบคุมอุปกรณ์ได้จากระยะไกล หรือสามารถตรวจสอบสถานะอุปกรณ์ ติดตั้ง App หรือจะตั้งค่าข้อมูลต่างๆ บน Smartphone หรือ Tablet ของลูกค้าได้อย่างง่ายดาย

    จากนี้ต่อไป ไม่ว่าลูกค้าของเราจะอยู่ส่วนไหนของมุมโลก เพียงแค่มี Internet และ App เทพตัวนี้ Teamviewer quicksupport เราก็จะสามารถ Remote เพื่อเข้าไปดูหน้าจอจริงๆ ไปดูปัญหาที่ลูกค้าเจอจริงๆ ได้อย่างง่ายดาย

    และรวดเร็ว

    สรุปประโยชน์ของ App ตัวนี้

    1. สามารถเชื่อมต่อ ระหว่าง เครื่องคอมพิวเตอร์ กับ อุปกรณ์เคลื่อนที่ เพื่อทำการช่วยเหลือ ในกรณีที่เกิดปัญหาต่างๆ ได้ทันที แม้จะอยู่กันคนละซีกโลก !
    2. สามารถถ่ายโอนไฟล์ระหว่างกันได้ เช่น รูปภาพ PDF หรืออื่นๆ
    3. สามารถ แชท (ส่งข้อความ) ระหว่างกันได้ทันที โดยไม่จำเป็นต้องโทรติดต่อกันให้ยุ่งยาก
    4. สามารถตรวจสอบ ข้อมูลอุปกรณ์ รายละเอียดของอุปกรณ์ (Smartphone หรือ tablet) ไม่ว่าจะเป็น CPU RAM หรือแม้แต่สถานะของ Battery ได้ด้วย
    5. สุดท้าย ท้ายสุด คือ App ตัวนี้ ฟรี !!!

    อย่างไรแล้วหากท่านไหนยังไม่เคยลองใช้งาน ก็ลองโหลดมาเล่นกันดูได้นะ ขนาดเล็ก ติดตั้ง และใช้งานง่ายเพียงแค่ปลายนิ้วสัมผัสจริงๆ แฮ่ 🙂

     

    อ้างอิง :

    https://www.teamviewer.com/th/download/mobile-apps/

  • Adaptive Layout สำหรับแอปพลิเคชันบนระบบปฏิบัติการ iOS

    สำหรับหัวข้อนี้สามารถนำไปใช้ได้ทั้งกับนักพัฒนาที่ใช้ Xcode และ Xamarin.iOS นะครับ แต่ภาพตัวอย่างที่ใช้ประกอบในบทความจะมาจาก Xamarin.iOS บน Visual Studio ครับ

    อุปกรณ์ที่ใช้งานระบบปฏิบัติการ iOS ในปัจจุบัน มีอะไรบ้าง และขนาดหน้าจอ ความละเอียดเท่าไหร่  คงเป็นคำถามแรกๆสำหรับนักพัฒนาแอปพลิเคชันสำหรับใช้งานบนระบบปฏิบัติการ iOS ก่อนที่จะเริ่มออกแบบหน้าจอ

    ข้อมูลจาก http://iosres.com/

    นี้คือคำตอบนั้นครับ ความหลากหลายของขนาดหน้าจอ  จะเห็นได้ว่าเยอะไม่แพ้ Android เลยทีเดียวสำหรับปัจจุบัน

    เมื่อแอปพลิเคชันของเราจำเป็นต้องทำงานได้บนทุกอุปกรณ์  ต้องทำอย่างไร บทความนี้จะสรุปสิ่งที่ต้องรู้และศึกษาเพิ่มเติม เกี่ยวกับการทำ Adaptive Layout หรือ รูปแบบการแสดงผลที่ปรับเปลี่ยนไปตามขนาดหน้าจอได้เอง

     

    Unified Storyboard

    เล่าวิวัฒนาการของวิธีการออกแบบ UI ของ iOS แอปพลิเคชันซักหน่อยนะครับ โดยแต่เริ่มนั้นเนื่องจากมีเพียงแค่ iPhone ที่ใช้ระบบปฏิบัติการ iOS เครื่องมือของทาง Apple สำหรับใช้ออกแบบหน้าจอเรียกว่า Interface Builder ซึ่งปัจจุบันถูกผนวกรวมมากับ Xcode เรียบร้อยแล้ว ใช้ไฟล์ .xib ในการออกแบบ ลักษณะจะเป็น 1 หน้าจอ 1 ไฟล์  ใช้ไฟล์เพียงชุดเดียว แต่เมื่อมี iPad ซึ่งมีขนาดหน้าจอที่แตกต่างออกไป นักพัฒนาก็ต้องสร้างไฟล์สำหรับ iPad อีกชุด

    ต่อมาไฟล์สำหรับออกแบบ UI ที่ชื่อว่า Storyboard  ก็ถูกนำมาใช้งาน เป็นการออกแบบในลักษณะที่ สามารถวางหน้าจอ หลายๆ หน้าจอ และกำหนดความเชื่อมโยง โดยใช้ segue เป็นตัวเชื่อมการแสดงผล แต่ก็ยังต้องมี ไฟล์ Storyboard สำหรับ iPhone และ iPad แยกกันอยู่ดี

    เมื่อมาถึง iOS 8.0 ความหลากหลายของขนาดหน้าจอมีมากขึ้นแม้แต่ iPhone เอง ก็มีหลายขนาด ตัว Unified Storyboard จึงถูกนำมาใช้เพื่อแก้ปัญหานี้ ทำให้ออกแบบ Storyboard เพียงไฟล์เดียวสามารถใช้งานได้กับอุปกรณ์ทุกขนาดหน้าจอ โดยใช้ร่วมกับเทคโนโลยีอีก 2 อย่างคือ Auto Layout และ Size Class

    วิธีการใช้งาน

    1. เมื่อสร้างโปรเจ็คจะมีไฟล์ .storyboard เปิดไฟล์ จากนั้นในหน้าต่าง Property เลือกใช้งาน Use Auto Layout, Use Size Classes

    2. ด้านบนของ Interface Builder จะปรากฏเมนูที่เกี่ยวกับการทำ Unified Storyboard ดังรูป

    3. ทำการกำหนดค่าใน info.plist เพื่อใช้ไฟล์ Storybord ดังกล่าวเป็น Main interface ของทั้ง iPhone และ iPad

    4. ตอนนี้ไฟล์ Storyboard ของเราก็พร้อมใช้งาน รองรับการออกแบบโดยมีความสามารถ Auto Layout และ Size Class ให้ใช้งานแล้วครับ

     

    Auto Layout

    แนวคิดหลักของ Auto Layout คือการตั้งเงื่อนไขเพื่อกำหนดตำแหน่งและขนาดของ Control ที่อยู่บนหน้าจอ เพื่อให้สามารถปรับตำแหน่งให้เหมาะสมกับขนาดหน้าจอที่เปลี่ยนไปได้ ซึ่งเรียกว่า Constraint มีหลายชนิดด้วยกันดังนี้

    1. Size Constraints คือการกำหนดขนาด โดยระบุ ความกว้าง ความสูง โดยส่วนตัวผมคิดว่าแบบนี้ค่อนข้างได้ใช้น้อยครับ เพราะเหมือนกับเรากำหนด Property ความกว้าง ความสูง ปกติ เหมาะใช้กำหนดแค่ความกว้าง หรือ ความสูงอย่างใดอย่างหนึ่งผสมกับ Constraints แบบอื่นๆ
    2. Center Constraints คือการกำหนดให้อยู่ในจุดกึ่งกลาง โดยอ้างอิงจากขนาดของ View ที่เปลี่ยนไป จะทำให้อยู่ในตำแหน่งกลางเสมอ อันนี้ก็ได้ใช้งานบ่อยครับ
    3. Combinational Constraints คือการอ้างอิงตำแหน่งของ Control จาก เส้นขอบทั้ง 4 ด้าน และ Control อื่นๆ ที่อยู่ใน View หรือแม้กระทั่ง Toolbar, Tab bar, Header, Footer ของ View อันนี้ผมใช้เยอะสุดครับ

    วิธีการใช้งาน

    1. เมื่อได้เปิดใช้งาน Auto Layout ในขั้นตอนการสร้าง Unified Storyboard แล้วนั้น จะปรากฏ Toolbar เมื่อต้องการใช้งาน ให้คลิกเลือกที่ Control ที่ต้องการ จากนั้นคลิกที่ไอคอน เพิ่ม ลบ หรืออัพเดทเฟรม ตามลำดับ โดยที่การเพิ่ม Constraint โดยวิธีการนี้จะเพิ่ม 2 ตำแหน่ง คือ top/bottom + left/right หาก Control นั้นไม่ได้มี intrinsic size (Control ที่จำกัดขนาดกับ View ที่แสดงผล นักพัฒนาไม่สามารถแก้ไขได้) ก็จะเพิ่ม Constraint ระบุ width + height ให้ด้วย

    2. จะเห็นได้ว่าการเพิ่ม Constraint โดยใช้ Toolbar นั้น ไม่สามารถตอบสนองการใช้งานได้ครบถ้วน เราสามารถเพิ่ม Constraint ทีละตำแหน่งได้เอง โดยดับเบิ้ลคลิกที่ Control ให้มีลักษณะ ดังรูป

    3. จากนั้นสามารถคลิกแล้วลาก ไปยังตำแหน่งอ้างอิง ซึ่งจะเปลี่ยนไปตามแต่ละด้านของ Control

    4. เมื่อเพิ่มสำเร็จสามารถตรวจสอบดูได้ที่ Property > Layout

    5. ในขณะที่เราเพิ่ม Constraint นั้น อาจจะสังเกตุได้ว่า กรอบของ Control เป็นสีส้ม ซึ่งหมายถึง Constraint ที่เรากำหนดไปนั้นยังไม่สมบูรณ์ หรือมีความขัดแย้งกัน ทำให้ไม่สามารถแสดงผลได้ถูกต้อง เรียกว่า Error นั้นเอง แนะนำว่าให้เพิ่มจนครบทุกด้าน และให้มี Constraint  เพียงชนิดเดียวในแต่ละด้านครับ ถ้ายัง Error อยู่ ให้ลองเช็คจุดอ้างอิง ถ้าเป็น Control ด้วยกัน Control ที่ใช้อ้างอิงจะต้องไม่ Error ครับ ไม่เช่นนั้นจะพากัน Error ทั้งหมด

    6. หากเพิ่ม Constraint สมบูรณ์กรอบจะเป็นสีน้ำเงิน แบบนี้ครับ และจะมีเส้นไกด์สีน้ำเงินเล็กๆ บอกตำแหน่งอ้างอิงอยู่ด้วย

    7. ทำการทดสอบแอปพลิเคชัน ด้วย Simulator ที่ขนาดหน้าจอต่างๆ ว่าแสดงผลถูกต้องหรือไม่

     

    Size Class

    เพื่อให้การออกแบบโดยใช้เพียงไฟล์ Storyboard เดียวใช้งานได้กับหน้าจอทุกขนาด ยังมีปัญหาในเรื่องของ การแสดงผลในแนวตั้ง และแนวนอน ที่การกำหนด Constraint ตอนทำ Auto Layout ไม่สามารถทำให้แสดงผลได้ถูกต้องซะทีเดียว จำเป็นต้องมีการแบ่งประเภทหน้าจอแสดงผล โดยใช้ Grid ขนาด 3×3 ซึ่งจะจำแนกได้เป็น 9 แบบ ดังรูป

    โดยจะมีคำเรียกขนาด 3 ชนิด คือ Compact, Any, Regular จากเล็กไปใหญ่ตามลำดับ  เมื่อนำเอา ความกว้าง และ ความสูง ทั้ง 3 แบบมาใช้ร่วมกันก็จะเป็นตัวแทนของ หน้าจอแบบต่างๆของทุกอุปกรณ์ที่ใช้ระบบปฏิบัติการ iOS ดังนี้ครับ

    ภาพประกอบจาก https://developer.apple.com/reference/uikit/uitraitcollection

    สังเกตุว่าจะมี แค่ 6 ขนาดที่เทียบกับอุปกรณ์จริงๆได้ ส่วนอีก 3 ขนาด ที่มีความกว้าง ความสูง แบบ Any ผสมอยู่ก็เพื่อใช้กับการออกแบบที่ไม่จำเป็นต้องระบุ Size Class เพราะสามารถใช้ Constraint ร่วมกันได้นั้นเองครับ

    วิธีการใช้งาน

    1. เมื่อต้องการติดตั้ง Size Class ใดๆเพิ่มเติม ให้เลือก Control ที่ต้องการจากนั้นในหน้าต่าง Property เลื่อนลงไปที่ Stretching คลิกที่รูปไขควง

    2. จะมีตัวเลือก Compact, Any, Regular ให้เลือก 2 ลำดับ โดยตัวเลือกลำดับแรกคือชนิดความกว้าง ลำดับที่ 2 คือชนิดความสูง

    3. เลือก Size Class ที่ต้องการออกแบบ จาก Toolbar

     

    ในบทความนี้เป็นเพียงแนวทาง และหยิบประเด็นใหญ่ๆที่ควรทราบในเรื่องของการทำ Adaptive Layout มาเท่านั้น เมื่อท่านใช้งานจริงจะยังมีประเด็นต่างๆที่ต้องศึกษาเพิ่มเติมอีกมากมาย หวังว่าสิ่งที่ผมรวบรวมมาจะเป็นประโยชน์ไม่มากก็น้อยครับ

    แหล่งอ้างอิง

    https://developer.xamarin.com/guides/ios/platform_features/introduction_to_Unified_Storyboards/

    https://developer.xamarin.com/guides/ios/user_interface/designer/designer_auto_layout/

  • Xamarin.iOS : ติดตั้งซอฟแวร์ และสร้างโปรเจ็ค

    การพัฒนาแอปพลิเคชันสำหรับระบบปฏิบัติการ iOS นั้นมีหลายช่องทางในปัจจุบัน โดยไม่นานมานี้ ทางไมโครซอฟ ได้เข้าซื้อ Xamarin ซึ่งเป็นซอฟแวร์ สร้างแอปพลิเคชันสำหรับ Android, iOS, Windows Phone โดยใช้ภาษา C# โดยมีแนวคิดแชร์โค้ดในส่วน Logic ระหว่างแพลตฟอร์มได้ (แต่ส่วน User Interface และ Controller ต้องเขียนแยกกัน) ซึ่งเดิมทีซอฟแวร์ตัวนี้มีค่าใช้จ่ายในการนำมาใช้งานพอสมควร แต่ปัจจุบัน สามารถใช้ร่วมกับ Visual Studio ได้ตั้งแต่รุ่น Community ซึ่งฟรี ทำให้มีความน่าสนใจในการนำมาใช้งานสำหรับ ทีมพัฒนาระบบ ที่ใช้ Visual Studio ร่วมกับ ภาษา C# อยู่แล้วเป็นอย่างมาก

    สิ่งที่ต้องมี สำหรับการใช้ Xamarin พัฒนา iOS แอปพลิเคชัน
    1.เครื่องคอมพิวเตอร์ที่ติดตั้ง macOS ได้ เช่น MacBook , MAC Pro, iMAC เป็นต้น หรือหากท่านใดสามารถสร้าง Virtual Machine ด้วย VirtualBox หรือ VMware แล้วติดตั้ง macOS ได้ ก้สามารถใช้งานได้เช่นกัน
    2.Apple ID ที่ลงทะเบียน Apple Developer Account ไว้เรียบร้อยแล้ว (มีค่าใช้จ่ายรายปีประมาณ 3000 บาท)
    3.หากต้องการใช้ Visual Studio เวอร์ชันสำหรับ Windows ในการพัฒนาก็ต้องมี เครื่องคอมพิวเตอร์อีกเครื่องที่ติดตั้งระบบปฏิบัติการ Windows (สำหรับท่านที่ต้องการใช้เครื่องเดียว สามารถใช้ Xamarin Studio หรือ Visual Studio For Mac ได้ เท่าที่ผมทดลองใช้งานก็มีความพร้อมระดับใช้งานได้ แม้จะเป็นเวอร์ชั่น Preview ในขณะที่ทดลองก็ตาม)

    ติดตั้ง Xamarin และ ตั้งค่าบน macOS
    1.ติดตั้ง Xcode จาก App Store ให้เรียบร้อย เนื่องจากตัว Xamarin จำเป็นต้องใช้งานทั้ง iOS SDK และ Simulator ที่ติดตั้งมาพร้อมกับ Xcode ในการ Build และ Run เพื่อทดสอบแอปพลิเคชันของเรา
    2.ใช้ Apple Developer Account สร้าง Provisional Profile ได้ที่ https://developer.apple.com/account/ios/certificate จากนั้นทำการดาวน์โหลดและติดตั้งให้เรียบร้อย
    3.ดาวน์โหลดตัวติดตั้ง ที่ https://www.xamarin.com/download ใส่ข้อมูล ชื่อ, อีเมล, หน่วยงาน แล้วเลือกว่ามีการติดตั้ง Visual Studio ไว้แล้วหรือไม่ เลือกยอมรับข้อตกลง เลือก Download Xamarin Studio for OS X
    4.เมื่อเริ่มติดตั้งจะมีหน้าจอให้ยอมรับข้อตกลง และแสดงความคืบหน้าในการติดตั้ง รอจนแจ้งผลติดตั้งเสร็จสิ้น
    5.ตั้งค่าเปิดใช้งาน Remote Login สำหรับการเชื่อมต่อจากเครื่องพัฒนาอื่นไปที่ System Preferences > Sharing
    6.เสร็จเรียบร้อยในฝั่ง macOS

    ติดตั้ง Xamarin บน Windows เพื่อใช้งานร่วมกับ Visual Studio
    1.ดาวน์โหลดตัวติดตั้ง Visual Studio เวอร์ชั่นที่ต้องการใช้งาน สามารถใช้ได้ทั้ง Community, Professional, Enterprise (ในขณะที่เขียนผมใช้เวอร์ชั่น Enterprise 2015 with update 3)
    2.เลือกติดตั้งแบบ Custom

    3.ติดตั้ง Cross Platform Mobile Development Plugin ที่ตัวเลือกจะมีวงเล็บไว้ให้แล้วว่าเป็น Xamarin เลือกให้เรียบร้อยกด Next
    4.รอจนกระบวนการติดตั้งสำเร็จ จะมีหน้าจอแสดงผลการติดตั้งเป็นอันเสร็จเรียบร้อย
    5.การใช้งาน Xamarin จำเป็นต้องอัพเดทให้ทันสมัยอยู่เสมอ เนื่องจากตัวซอฟแวร์จะมีการปรับรุ่นให้รองรับ iOS ที่ออกมาใหม่ๆ อยู่เสมอรวมทั้งการแก้ปัญหาบัคต่างๆ ด้วย โดยไปที่ Tools > Options > Xamarin แล้วกด Check Now จะทำการดาวน์โหลดและติดตั้งให้อัตโนมัติ

    6.หากมี Visual Studio ติดตั้งอยู่แล้ว ก็ยังสามารถใช้วิธีนี้ได้ครับ เพียงเปิด Installer ขึ้นมาใหม่ แล้วเลือก Modify

    สร้างโปรเจ็ค และการใช้งานด้านต่างๆ
    1.เปิด Visual Studio เลือก New Project > Visual C# > iOS จากตรงนี้ เราจะต้องเลือกว่า แอปพลิเคชันที่เรากำลังจะทำรองรับอุปกรณ์กลุ่มไหนระหว่าง iPhone, iPad, Universal (ใช้งานได้ทั้ง iPhone และ iPad) จากนั้นก็เลือก Template ให้เหมาะสมกับแอปพลิเคชันของเรา

    2.ในส่วนของผมเองเลือกเป็น Universal ครับ ซึ่งหากเลือกแบบนี้เราต้องออกแบบหน้าจอให้รองรับการใช้งานทั้งบน iPhone และ iPad ในขนาดหน้าจอ และความละเอียดต่างๆ ซึ่งวิธีการนั้นก็เฉพาะกับรุ่นของ iOS SDK ครับ

    3.ในกรณีใช้อีกเครื่องที่เป็น Windows ในการพัฒนา ก็ต้องทำการเชื่อมต่อกับเครื่อง macOS ที่ได้ติดตั้ง Xamarin Studio ไว้ โดยคลิกที่ไอคอน  แล้วทำการ Connect ให้เรียบร้อย
    4.โครงสร้างของโปรเจ็คก็จะมีหน้าตาประมาณนี้ครับ สามารถใช้งานความสามารถต่างๆ ของ .Net Framework ได้ครบถ้วน ด้านซ้ายมือมี Toolbox ให้เราสามารถลากวาง Control ที่เหมือนกับพัฒนาโดย Xcode ทุกประการ

    5.การเพิ่ม Component ต่างๆ สามารถทำได้ผ่าน NuGet Package Manager

    6.การเชื่อมต่อ Web Services ก็ทำได้อย่างง่ายดาย รวมถึงการเปลี่ยน URL ในการเชื่อมต่อขณะ Runtime ก็สามารถทำได้โดยกำหนด Property ชื่อ URL Behavior เป็น Dynamic ซะก่อน

    7.เมื่อทำการ Build และ Run ทดสอบ จะปรากฏ Simulator บนเครื่อง macOS นะครับ

     

    บทความนี้ขอจบไว้เพียงเท่านี้ครับ แต่สำหรับเรื่อง Xamarin และ หัวข้อต่างๆ ในการพัฒนาแอปพลิเคชันสำหรับ iOS จะมีตามมาจนครบถึงกระบวนการอัพโหลดขึ้น App Store ได้สำเร็จอย่างแน่นอนครับ

  • แนวทางการพัฒนา App บนสมาร์ทโฟน

    ถ้าใครเคยพัฒนา app เพื่อให้รองรับหลาย ๆ Platform ทั้ง iOS, Android หรือ Window Phone  ก็คงจะทราบถึงความยากลำบากในการพัฒนา เนื่องจากแต่ละ platform ก็มีวิธีการพัฒนาที่แตกต่างกัน เช่น app ที่รันบน iOS พัฒนาโดยใช้ภาษา Object C, ภาษา Swift ในขณะที่ app ที่รันบน Android พัฒนาขึ้นโดยใช้ภาษา Java และ app ที่รันบน Windows phone ก็พัฒนาขึ้นด้วย .Net Framework จะเห็นว่าแต่ละ Platform ใช้เทคโนโลยีที่ต่างกันอย่างสิ้นเชิง ทำให้การพัฒนา app 1 ตัว ให้รองรับทั้ง 3 platform ดังกล่าวข้างต้น ต้องใช้ต้นทุนค่อนข้างสูง ใช้เวลาในการพัฒนาเยอะ และยุ่งยากในการบำรุงรักษา

    App บนสมาร์ทโฟน สามารถแบ่งออกเป็น 3 ประเภท ดังนี้

    • Native App คือ app ที่เกิดจากการพัฒนาโดยการใช้ SDK (Software Development Kit) ของ OS แต่ละค่าย ทำให้ app ที่พัฒนาขึ้นมีประสิทธิภาพสูง สามารถเรียกใช้งานฟังก์ชันต่าง ๆ เพื่อเข้าถึงหรือควบคุมอุปกรณ์ได้ เช่น ตัวรับสัญญาณ GPS กล้องถ่ายรูป อุปกรณ์สแกนลายนิ้วมือ ที่ติดตั้งมากับสมาร์ทโฟนได้โดยตรง แต่ข้อเสียคือจะสามารถทำงานได้กับ OS เฉพาะค่ายนั้นเท่านั้น
    • Web App เป็น app ที่เข้าถึงได้ด้วยโปรแกรมประเภท Browser ต่าง ๆ ผ่านเครือข่ายคอมพิวเตอร์ เป็นที่นิยม เนื่องจากผู้พัฒนาสามารถอัพเดท หรือบำรุงรักษาได้โดยที่ไม่ต้องติดตั้งบนเครื่องผู้ใช้ ข้อเสียของ app ประเภทนี้คือ ไม่สามารถเขียนโปรแกรมเพื่อเรียกใช้งานฟังก์ชันต่าง ๆ เพื่อเข้าถึงหรือควบคุมอุปกรณ์ต่าง ๆ ของสมาร์ทโฟนได้
    • Hybrid App เป็น app ที่พัฒนาขึ้นโดยนำข้อดีของ app ทั้ง 2 ประเภทข้างต้นมารวมกัน โดยอาจจะมองว่า มันเป็น Web App ที่สามารถเขียนโปรแกรมให้เรียกใช้งานฟังก์ชันเพื่อเข้าถึงหรือควบคุมอุปกรณ์ต่าง ๆ ของสมารทโฟนได้ มีหน้าตาการใช้งานหมือนกับการ Native App แต่พัฒนาโดยใช้ภาษาต่าง ๆ เช่น HTML, CSS, Java Script เป็นต้น เปิดใช้งานด้วย Web viewer ของ OS แต่ละตัวเลย ข้อดีที่เด่นชัดคือ นักพัฒนาสามารถพัฒนา app ขึ้นมาเพียงชุดเดียว แล้ว build ให้มันสามารถรันบน platform ต่าง ๆ ได้ตามต้องการ

    compare app

    รูปที่ 1เปรียบเทียบประสิทธิภาพ ความสามารถในการเขียน App แต่ละแบบ [ที่มา :http://androiddevelopersthai.blogspot.com/]

    การเลือกว่าจะพัฒนา app เป็นแบบไหน ก็ขึ้นอยู่กับความต้องการของผู้ใช้งานเป็นหลัก และเพื่อแก้ปัญหาที่ได้กล่าวไว้ตอนต้น พบว่า Hybrid App สามารถตอบโจทย์ได้เป็นอย่างดี โดยเครื่องมือที่นำมาใช้ในการพัฒนาที่มีประสิทธิภาพมากที่จะแนะนำในบทความนี้คือ Ionic Framework

    Ionic Framework

    Ionic Framework เป็นตัวช่วยในการใช้พัฒนา Hybrid App ที่ทำให้พัฒนา App แค่ครั้งเดียวก็สามารถ Build ให้รันได้ในหลาย Platform ซึ่งเทคโนโลยีที่ใช้ในการพัฒนาเป็นเทคโนโลยีเดียวกันกับที่ใช้ในการพัฒนาเว็บได้แก่ HTML, CSS และ Java Script ทำให้นักพัฒนาเว็บสามารถเรียนรู้วิธีการพัฒนาได้อย่างรวดเร็ว

    ionic_frameworkรูปที่ 2  Ionic Framework [ที่มา : http://blog.prscreative.com]

     

    Ionic Framework เป็น Open Source ที่นักพัฒนาสามารถใช้ในการสร้าง App ของตัวเอง หรือ App เชิงพาณิชย์ก็ได้ มีเว็บไซต์อย่างเป็นทางการคือ http://ionicframework.com

    ตัวอย่าง App ดังๆ ที่ใช้ Ionic ได้แก่ UNIQLO ดังรูป

    uniqlo
    รูปที่ 3 ตัวอย่างหน้าจอ App ของ UNIQLO ที่พัฒนาขึ้นด้วย Ionic [ที่มา :https://itunes.apple.com/th/app/uniqlo-th/id867497451?l=th&mt=8 ]

    สามารถดูตัวอย่าง App ที่พัฒนาด้วย Ionic เพิ่มเติมได้จาก http://showcase.ionicframework.com