ติดตั้ง Ionic สำหรับสร้าง cross platform mobile application

ความท้าทายอย่างนึงสำหรับนักพัฒนา mobile application คือ จำเป็นต้องสร้าง app เป็น version เฉพาะ สำหรับ iOS และ Android เนื่องจากทั้งสอง platform มีเทคโนโลยีที่ต่างกัน app ที่สร้างมาไม่สามารถนำมาใช้งานร่วมกันได้

โดยภาษาและเทคโนโลยีที่ใช้แต่ละ platform เป็นดังนี้

• iOS สร้าง app ด้วยภาษา Objective-C หรือ Swift และจำเป็นต้องมีเครื่อง Mac ในการพัฒนา
• Android สร้าง app ด้วยภาษา Java สามารถพัฒนา app ได้ทั้งบนเครื่อง Windows และ Mac

แน่นอนว่าการพัฒนา app แบบนี้ ซึ่งเรียกว่า native app มีข้อดีหลายอย่างเช่น

• ประสิทธิภาพที่ดี
• ได้ใช้ feature ใหม่ๆ เข้าถึง API ที่ platform มีมาให้ทั้งหมด
• มีตัวอย่างคำสั่งมากมาย ค้นหาได้ง่ายจาก internet
• มี third library ต่างๆ มากมาย สามารถเอามาใช้กับ project ได้ทันที
• เหมาะกับ app ที่มีความซับซ้อน optimize ได้เต็มที่
• มี tool เครื่องมือที่ดีในการพัฒนา หาข้อผิดพลาด (debug) และใช้งานได้ฟรี

แม้ว่าจะมีข้อดีมากมาย แต่ถ้าทีมพัฒนามีความจำกัดเรื่องทรัพยากรบุคคล เวลา เงินทุน native app อาจจะไม่ใช่คำตอบเสมอไป เพราะต้องพัฒนา app แยกกัน ไม่สามารถนำ code มา reuse ได้

ด้วยเหตุนี้ จึงมีนักพัฒนาสร้าง open source framework เพื่อให้เราสามารถพัฒนา app เพียงครั้งเดียว แต่สามารถใช้งานได้ทั้ง iOS และ Android ตัวอย่างของ framework เหล่านั้น เช่น PhoneGap, Cordova, Ionic, Xamarin

ข้อดีของการพัฒนา app แนวนี้ที่เป็น cross platform คือ

• พัฒนาครั้งเดียว ใช้ได้ทั้ง iOS , Android เวลาจะแก้ไข เพิ่มเติม ก็แก้ที่เดียว
• เหมาะกับ MVP (minimum viable product) เพื่อทดสอบ idea เริ่มต้นของธุรกิจ
• app ที่ไม่มีความซับซ้อน business app ที่ตรงไป ตรงมา
• สามารถใช้ความรู้เดิมของนักพัฒนาที่คุ้นเคยกับ web app อยู่แล้ว เพียงมีความรู้ HTML, CSS, JavaScript ก็สามารถสร้าง mobile application ด้วย PhoneGap , Cordova, Ionic ได้เลย

แต่ข้อเสียหลักๆ ของ Cross Platform ที่เป็น Hybrid เช่น PhoneGap, Cordova, Ionic คือ performance ที่ไม่ค่อยดีสำหรับมือถือ spec ต่ำๆ เพราะตัวเค้าเองคือ web app ที่อยู่ใน web view นั่นเอง

ดังนั้นในระยะยาว แม้ว่าจะเริ่มต้นด้วย Hybrid app แต่เมื่อธุรกิจเติมโต และไปได้แล้ว ก็น่าจะจบด้วย native app คือทำแยก version ไปเลยอยู่ดี

ในบทความนี้ ผมจึงขอแนะนำวิธีการติดตั้ง และใช้งาน ionic framework แบบง่ายๆ ข้อดีของตัวนี้คือ ถ้าใครที่เคยใช้ AngularJS อยู่แล้วจะสะดวกมากๆ เพราะ framework ออกแบบมาให้ใช้กับ AngularJS ได้ใช้ความสามารถของ AngularJS อย่างเต็มที่ มี UI component ต่างๆ พร้อมใช้ เรียนรู้ได้ง่าย และมี plugin สำหรับงานหลักๆ ให้นำมาใช้งานได้เลย

เรามาเริ่มติดตั้ง Ionic กันเลยครับ

ติดตั้ง nodejs

download และติดตั้ง nodejs จาก https://nodejs.org/en/

ติดตั้ง cordova ionic package

เปิด command line prompt แล้วใช้คำสั่ง npm install -g cordova ionic

npm install -g cordova ionic

สร้าง project ใหม่

ด้วยคำสั่ง ionic start myApp tabs

ionic start myApp tabs

myApp คือชื่อของ App ที่เราสร้างขึ้นมา tabs คือ UI template ที่จะสร้าง App ในลักษณะมี tabs เปลี่ยนหน้า

ทดลอง run application

เข้าไปใน myApp ด้วยคำสั่ง cd myApp run app ขึ้นมาด้วยคำสั่ง ionic serve --lab

ionic serve --lab

ถ้าเจอข้อความ Multiple addresses available ก็เลือกเป็น localhost ได้เลยครับ

web browser ก็จะถูกเปิดขึ้นมาโดยอัตโนมัติ และไปที่ URL http://localhost:8100/ionic-lab แสดง UI ของ App ทั้ง iOS และ Android ให้เราเลย

หน้าตาของ app ใน browser แยกเป็น version ของ iOS และ Android

จบแล้วครับ สำหรับบทความนี้ ก็เป็นตัวอย่างง่ายๆ ของการติดตั้ง Ionic บนเครื่องของเรา ในตัวอย่างหน้า ผมจะมาแนะนำการทดสอบ app ด้วย emulator และมือถือจริงๆ กันครับ