ในบทความนี้จะนำขั้นตอนการพัฒนา 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 ซึ่งผู้พัฒนาจะต้องแก้ไขโค้ดให้เป็นไปตามที่ได้ออกแบบไว้ ก็จะได้ Android App ตามต้องการ
