สร้าง Hybrid Mobile App ด้วย PhoneGap

จากที่เราได้เริ่มพัฒนา Mobile App ด้วย jQuery Mobile กันมานิดหน่อยในตอนก่อนๆ เพื่อให้เห็นภาพ และเตรียมสภาพแวดล้อมกันไว้ก่อน ผมจึงขอพูดถึงวิธีติดตั้งและใช้งาน PhoneGap เพื่อแปลงให้ HTML5 ของเราให้กลายเป็น Native App (iOS, Android, Windows Mobile)

** หมายเหตุ : ภาพที่นำมาประกอบบางภาพมาจาก internet วัตถุประสงค์เพียงเพื่อให้ผู้อ่านเห็นภาพได้ง่ายขึ้นเท่านั้น ไม่มีวัตถุประสงค์ทางการค้าใดๆ  ทั้งสิ้น**

Hybrid Application คือ?

การพัฒนา Mobile Application แต่เดิมนั้นถ้าจะเริ่มก็คงตั้งแต่ยุค J2ME (ถ้าใครทันนะ) จนมาถึงยุคสมัยของ iOS และ Android รวมไปถึงน้องสุดท้องอย่าง Windows Phone ซึ่งแต่ก่อนก็มีพัฒนาจาก WindowCE มาก่อน จนผู้้ใช้ของแต่ละฝั่ง (Platform) เริ่มมีความสำคัญใกล้เคึยงกัน ดังนั้น การพัฒนา App เฉพาะของ iOS หรือ Android เพียงอย่างเดียวถือเป็นการเสียโอกาสทางธุรกิจเป็นอย่างมาก จนมีคนเริ่มคิดหาวิธีทำให้ชีวิตง่ายขึ้นโดยการเขียน HTML5 + CSS3 + JavaScript แล้วใช้วิธีทำงานผ่าน Web View Component  (เหมือนหน้าเบราเซอร์ในแอพอีกที) ของแต่ละ Platform จนกลายมาเป็นโครงการ Cordova และได้มีการพัฒนาส่วนขยาย (Plug-in) เพิ่มเรื่อยๆ ทำให้ปัจจุบันเราสามารถเข้าถึง Hardware หรือ Sensor ซึ่งโดยปกติ HTML5 ธรรมดาไม่สามารถเข้าถึงได้ มาดูข้อดีข้อเสียกัน

 

pg_002
สำหรับ App ที่เน้นในเรื่องของการนำเสนอเนื้อหา เช่นหนังสือ นิทาน ข่าว เพลง วิดีโอ หรือแม้แต่เกมปริศนา หรือแอพที่ใช้บันทึกข้อมูล จัดเก็บข้อมูลส่งขึ้น Server … เอาง่ายๆ ที่ไม่ใช่แนวเกมส์ 3 มิติ หรือพวก แอพแนว Productivity ที่ซับซ้อนมากๆ เราสามารถพัฒนาด้วยวิธี Hybrid ได้ทั้งหมด

การพัฒนา Hybrid Mobile App ด้วย PhoneGap

อย่างที่กล่าวในตอนต้นว่าการพัฒนา Hybrid Mobile App เราสามารถใช้แค่ HTML5 + CSS3 + Java Script แค่นั้นโดยอาจพัฒนาด้วย NetBean IDE และทดสอบบน Chrome Browser ให้เรียบร้อยก่อน เสร็จแล้วค่อย copy ทั้งหมดมาไว้ใน Project ที่สร้างมาจาก PhoneGap

pg_003

สังเกตว่าเราสามารถใช้ JS Library (Java Script Framework) อื่นๆร่วมด้วยได้เช่น jQuery Mobile เป็นต้น แล้วใช้เครื่องมือพัฒนาใดๆในการสร้าง HTML5 + CSS3 + Java Script และอาจมีการเรียกใช้ Plug-in ของ Phone Gap เพื่อเข้าถึงอุปกรณ์เสริมต่างๆ เช่น กล้อง ไมค์ ระบบไฟล์ GPS Accelerometer เป็นต้น โดยทาง Phone Gap ได้เตรียม Native API ไว้ให้เราอยู่แล้ว เราเพียงแค่ติดตั้ง Plug-in แล้วเรียกใช้ผ่าน Java Script ที่เค้าเตรียมไว้ให้

pg_004

จากรูป สิ่งที่นักพัฒนา Hybrid Mobile App ต้องทำคือในช่อง Web App คือมี HTML, CSS, Javascript และไฟล์ภาพ เสียงต่างๆ (Resource) แล้วทำงานผ่าน Web View ที่ PhoneGap จัดเตรียมให้ หากต้องการเข้าถึงส่วนอื่นๆก็เรียกใช้ Plug-in หรือจะพัฒนา Custom Plug-in ขึ้นมาใช้เองได้

 

ขั้นตอนการติดตั้ง PhoneGap

ในเวอร์ชันปัจจุบันของ PhoneGap จะใช้วิธ๊การติดตั้งผ่านเครื่องมือ npm ของ Node.js  (แต่ก่อนใช้วิธีการดาวน์โหลด zip ไฟล์มาก็ใช้ได้เลย) โดยมีขั้นตอนต่อไปนี้

** หมายเหตุ: กรณีบน Mac OSX ให้เปิด Terminal และบางคำสั่งอาจต้องใช้คำสั่ง “sudo” เพื่อทำงานผ่านสิทธิของ Administrator **

  1. ดาวน์โหลด Node.js [ Link ] แล้วติดตั้ง จะสามารถใช้คำสั่ง npm ได้ ให้ลองพิมพ์ > npm –version  เพื่อทดสอบ
  2. ดาวน์โหลด Git-SCM [ Link ] แล้วติดตั้ง (ตัวนี้ใช้ในการติดตั้งพวก Plug-in)
  3. ใช้คำสั่ง  >  npm  install -g  phonegap         ในการติดตั้ง PhoneGap ใน global mode
  4. ใช้คำสั่ง  >  npm  install -g  cordova             ในการติดตั้ง Cordova
  5. ทดสอบคำสั่ง phonegap โดยใช้  >  phonegap –version    (ปัจจุบันอยู่ที่ 5.3)
  6. ทดสอบคำสั่ง cordova โดยใช้     >  cordova –version
  7. ติดตั้งโปรแกรมอื่นๆที่เกี่ยวข้อง
    • กรณี Android
      • ติดตั้ง Java SDK 7.0 ขึ้นไป [ Link ]
      • ติดตั้ง Android Studio + Android SDK [ Link ]
    • กรณี iOS
      • ต้องใช้ Mac OSX [ Link ]
      • ติดตั้ง XCode (ดาวน์โหลดจาก App Store)

 

การสร้าง Base Project ด้วย PhoneGap

ตอนนี้สมมติว่าบริษัทของเราคือ  abc.com  โดยพัฒนา App ชื่อ  HelloApp เราสามารถใช้คำสั่งผ่าน Command line ดังนี้

สำหรับ Android:

c:/> mkdir pg                    //สร้างโฟล์เดอร์เก็บงานก่อน
c:/> cd pg
c:/pg> phonegap create helloapp com.abc.helloapp "HelloApp"
c:/pg> cd helloapp
c:/pg/helloapp> phonegap platform add android
c:/pg/helloapp> phonegap build android
c:/pg/helloapp> phonegap run android

สำหรับ iOS:

$ mkdir pg                    //สร้างโฟล์เดอร์เก็บงานก่อน
$ cd pg
pg$ phonegap create helloapp com.abc.helloapp "HelloApp"
pg$ cd helloapp
pg/helloapp$ phonegap platform add ios
pg/helloapp$ phonegap build ios
pg/helloapp$ phonegap run ios

 

pg_007

โครงสร้างของ โฟล์เดอร์ที่ PhoneGap สร้างขึ้นมา เราสามาร copy งานจากโฟล์เดอร์ “public_html” ของ Netbean IDE ไปวางในโฟล์เดอร์ ../platforms/android/asset/www เพื่อให้การแสดงผลเป็นของ แอพของเรา

สรุปคำสั่ง:

phonegap  create                     ใช้สร้าง Base Project
phonegap  platform add        ใช้เพิ่ม Platform ที่ต้องการ
phonegap  build                       ใช้ Build และ Compile Project จะได้เป็น .ipa หรือ .apk
phonegap  run                          ใช้ในการ Run แอพเราผ่านตัว Emulator หรือตัวมือถือโดยตรง

AjBee.Me : ตอนนี้เอาถึงตรงนี้ก่อนนะครับของตอนต่อไป เราจะมาดูวิธีการนำ Project เข้าไปใน Android Studio แล้วลองรันบน Emulator ของ Genymotion กัน ถ้าเป็นไปได้ให้ ดาวน์โหลดมาลงรอไว้เลยนะครับ ^_^

ติดตามข้อมูลผ่าน FanPage เข้าไปกด Like ที่: https://www.facebook.com/AjBeeMePage