ติดตั้ง 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 และมือถือจริงๆ กันครับ
Be the first comment