PhoneGap/Cordova

วิธีติดตั้ง PhoneGap/Cordova 3 บนเครื่อง Mac OS X สำหรับการพัฒนา iOS Application ด้วย HTML5

เรื่องที่เกี่ยวข้อง - , , , , ,

สวัสดีครับโค้ชพลคนเดิมครับ เพจนี้เป็นขั้นตอนการติดตั้งโปรแกรม PhoneGap/Cordova 3 ให้กับเครื่อง Mac OS X และทดสอบกับอุปกรณ์ iOS ครับ ส่วนข้อมูลอื่นๆ สำหรับ Android และ Windows ดูได้ที่นี่

*** จะทดสอบกับอุปกรณ์จริงได้ ต้องมีการสมัคร iOS Developer Program ที่ต้องเสียเงิน $99 ต่อปีให้เรียบร้อยก่อน และใช้เวลาในการสมัครนานพอสมควร (โดยเฉพาะแบบบริษัทควรสมัครให้เรียบร้อย ก่อนมาฝึกอบรม

อบรมสร้างแอพ iOS และ Android ด้วย HTML5 และ PhoneGap 3

รู้ลึกและทำจริงในการใช้ HTML5, JQuery Mobile, และ PhoneGap 3 ในการสร้างแอพจริง ทดสอบจริง

1. ติดตั้ง PhoneGap SDK และ Cordova SDK

 ขั้นตอนและ link ที่เกี่ยวข้องใน video

  1. Download NodeJS มาติดตั้งจาก http://nodejs.org/download/
  2. เปิด Terminal ขึ้นมา เช็คให้แน่ใจว่าเชื่อมต่อ Internet อยู่
  3. ติดตั้ง PhoneGap CLI โดยใช้คำสั่ง npm install -g phonegap
  4. ทดสอบการติดตั้งโดยพิมพ์คำสั่ง phonegap  ใน Terminal แล้วกด Enter (ปุ่ม Return)
  5. ติดตั้ง Cordova CLI โดยใช้คำสั่ง npm install -g cordova
  6. ทดสอบการติดตั้งโดยพิมพ์คำสั่ง cordova  ใน Terminal แล้วกด Enter (ปุ่ม Return)

2. ติดตั้ง XCode และ iOS SDK

ขั้นตอนและ Link ที่เกี่ยวข้องใน Video

    1. Download โปรแกรม XCode มาติดตั้งจาก Mac App Store โดยค้นหา “XCode” หรือคลิกที่ลิ้งค์นี้ และกดปุ่ม “View on Mac App Store”
    2. ติดตั้ง XCode Command Line Tool
      • สำหรับคนที่ใช้ XCode เวอร์ชั่น 5.0 ขึ้นไป (ซึ่งผมคิดว่าคงอัพกันหมดแล้วนะ) ต้อง Download จาก https://developer.apple.com/downloads โดยค้นหาคำว่า “command line” แล้ว Download มาติดตั้ง
      • สำหรับคนที่ใช้ XCode ตำ่กว่าเวอร์ชั่น 5.0 ลงมาให้ไปที่ Menu XCode > Preferences และดูแท็บที่ชื่อ Download จะมีปุ่มให้กดติดตั้ง Command Line Tools กด แล้วปล่อยให้มัน download มาติดตั้งครับ
Download XCode Command Line Tools for PhoneGap XCode 5

ค้นหาคำว่า Command Line แล้ว download เวอร์ชั่นที่ตรงกับเครื่องเรามาติดตั้ง

3. เสร็จสมบูรณ์

สนใจเรื่อง Web Design, Adobe for Web, และ PhoneGap ฝาก Email รับบทความใหม่ๆ จากผมได้ที่นี่ครับ

ดูเนื้อหารวมเรื่อง PhoneGap ได้ที่ nextflow.in.th/phonegap

Photo by Blakespot

Loading Facebook Comments ...
Menu