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

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

  1. ติดตั้ง js โดยดาวน์โหลดไฟล์ node-v4.4.7-x64.msi ได้จาก http://nodejs.org วิธีการติดตั้งก็ไม่ยุ่งยากครับ ใช้ Next Technology ได้เลย จะมีหน้าจอขั้นตอนต่าง ๆ ดังรูป
    node_js_setup
  1. ติดตั้ง Cordova และ Ionic command line tool โดยการเปิด command prompt ของ windows ขึ้นมา แล้วรันคำสั่ง
    $ npm install -g ionic
    install_ionic

เริ่มต้นสร้าง App อย่างง่าย

หลังจากที่เตรียมความพร้อมของเครื่องที่พัฒนาเรียบร้อยแล้ว ขั้นตอนต่อไปก็จะเป็นการสร้าง App ขึ้นมา ซึ่ง Ionic ได้เตรียม template ตั้งต้นไว้ให้เราแล้ว ได้แก่ side menu, maps, salesforce, complex-list, blank เราก็ดูว่า App ของเราสามารถใช้ template ตัวไหนได้บ้าง ก็เลือกมาใช้ได้เลย
ionic_template
รูปที่ 1 Ionic Template [ที่มา : http://ionicframework.com]

ขั้นตอนการสร้าง App โดยใช้ command line tools

  1. เปิด command line ขึ้นมา แล้วกำหนด working directory เป็นที่ที่สำหรับใช้เก็บ project (ในที่นี้จะกำหนดเป็น “C:\ionic” )
    cmd
  1. สร้าง project กำหนดชื่อ myApp และใช้ tabs เป็น template ตั้งต้นโดยใช้คำสั่ง
    $ ionic start myApp tabs
    ผลลัพธ์ที่ได้จากคำสั่งนี้ จะทำให้ได้ไฟล์ต่าง ๆ ดังรูป
    file_structureจะพบว่ามีโฟลเดอร์ชื่อ www สำหรับเก็บโค้ด HTML, CSS, Java Script เหมือนกับการพัฒนาเว็บไซต์ ให้เราใช้ความรู้ด้านการเขียนเว็บไซต์สร้างไฟล์ต่าง ๆ เก็บไว้ในโฟลเดอร์นี้ได้เลย
  1. หลังจากสร้างไฟล์ 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 เช่นเคย
  1. Build และ Run บน Android โดยใช้คำสั่งต่อไปนี้
    $ ionic platform add android
    $ ionic build android
    $ ionic emulate androidจะทำให้ได้ผลลัพธ์ดังรูป
    android_app
    จากรูปเป็นผลลัพธ์ที่ได้จากการใช้ Tab template ซึ่งผู้พัฒนาจะต้องแก้ไขโค้ดให้เป็นไปตามที่ได้ออกแบบไว้ ก็จะได้ Android App ตามต้องการ

 

 

 

Leave a Reply