Categories
Android iOS Mobile

สรุปการใช้งาน Cordova (PhoneGap)

Cordova จะทำงานร่วมกับ SDK ของ Mobile แต่ละ Platform ดังนั้นก่อนติดตั้ง Cordova ต้องติดตั้ง SDK ของแต่ละ Platform ก่อน

 

การติดตั้งบน Windows

  1. Java JDK  เวอร์ชั่น 6 ขึ้นไป ทดลองคำสั่ง java -version
  2. Android Studio http://developer.android.com/sdk
  3. ติดตั้ง Node.Js ดาวน์โหลดได้จาก http://nodejs.org
    • เมื่อติดตั้งเสร็จแล้วทดลองด้วยคำสั่ง npm -v ถ้าใช้ไม่ได้ลองรีบูทเครื่อง
  4. ติดตั้ง Git ดาวน์โหลดจาก http://git-scm.com เสร็จแล้วกำหนด PATH ไปที่ไดเรกทอรี่ bin ของ Git ด้วย แล้วทดลองคำสั่ง git –version
  5. ติดตั้ง Apache Ant ดาวน์โหลด zip ได้ที่ http://ant.apache.org/
    • แล้วคลาย zip ไปที่โฟลเดอร์ใดก็ได้
    • เพิ่ม ANT_HOME ให้ชี้ไปที่พาทของ Ant เช่น C:\ant\Apache-ant-x.x.x
    • เพิ่มโฟลเดอร์ bin ของ Ant ไปที่ PATH
    • ทดลองคำสั่ง ant -version
  6. ติดตั้ง Cordova โดยพิมพ์คำสั่ง npm install -g cordova
    • แล้วลองคำสั่ง cordova -v

 

ติดตั้งบน Mac

  1. Java JDK  เวอร์ชั่น 6 ขึ้นไป ทดลองคำสั่ง java -version
  2. Android Studio http://developer.android.com/sdk
  3. ติดตั้ง Node.Js ดาวน์โหลดได้จาก http://nodejs.org
    • เมื่อติดตั้งเสร็จแล้วทดลองด้วยคำสั่ง npm -v
  4. ติดตั้ง Git ดาวน์โหลดจาก http://git-scm.com แล้วทดลองคำสั่ง git –version
  5. ติดตั้ง Apache Ant
    • ใช้คำสั่ง brew install ant ถ้าหากไม่มีคำสั่ง brew ให้ติดตั้ง Homebrew ด้วยคำสั่ง
    • ruby -e “$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)”ทดลองคำสั่ง ant -version
  6. ติดตั้ง Cordova โดยพิมพ์คำสั่ง npm install -g cordova
    • แล้วลองคำสั่ง cordova -v
  7. ติดตั้ง Xcode
  8. ติดตั้ง ios-sim ด้วยคำสั่ง sudo npm install ios-sim -g
  9. ติดตั้ง ios-deploy ด้วยคำสั่ง sudo npm install -g ios-deploy
    • ทดลองรัน iOS Simulator โดยเรียก
      • ios-sim –version
      • ios-sim start
      • ios-sim start –retina –tall

 

การสร้าง App เบื้องต้น

  1. สร้างโปรเจคใหม่
    cordova -d create ชื่อโฟลเดอร์แอพ ชื่อแพคเกจ ชื่อแอพ
  2. เพิ่ม platform
    cordova platform add ios
    cordova platform add android
    หรือ
    cordova platform add ios android

    • ถ้าต้องการดู platform ที่เพิ่มเข้ามาแล้ว
      cordova platform ls
    • ถ้าต้องการลบ platform
      cordova platform remove android
  3. การสั่ง Build
    cordova build
    หรือ
    cordova build android
    cordova build ios
  4. การสั่ง Run บน Simulator
    cordova emulate android
    หรือ
    cordova emulate ios
  5. การสั่ง Run บนมือถือจริง (ถ้า Windows ต้องติดตั้ง driver ก่อน, แต่ Mac OS X สามารถเสียบอุปกรณ์ได้เลย)
    cordova run android
    หรือ
    cordova run ios