codesanook.com - เริ่มต้นการใช้งาน PhoneGap iOS ด้วย Xcode 4

เริ่มต้นการใช้งาน PhoneGap iOS ด้วย Xcode 4

เมื่อ : 15-Dec-11 22:19 อ่าน : 654 ครั้ง
Tag : phonegap

ความต้องการ

เครื่อง Mac OS X Snow Leopard (10.6) ลงโปรแกรม Xcode และ iPhone SDK

อุปกรณ์ iOS ของแอปเปิ้ล เช่น iPhone, iPad, iPod Touch

ขั้นตอนที่ 1

ดาวน์โหลด PhoneGap เวอร์ชั่นล่าสุดได้จากที่นี่

ติดตั้งโปรแกรม PhoneGap ที่ได้ดาวน์โหลดมา (ต้องปิดโปรแกรม Xcode ก่อนติดตั้ง)

เปิดโปรแกรม Xcode 4 ไปที่เมนู File > New > New Project...

เลือก PhoneGap-based Application จากเทมเพลต ดังรูป

กรอก Product Name และ Company Identifier

เลือกแฟ้มเก็บ Project ของคุณ

จากนั้นกดปุ่ม Run จะขึ้นว่า Build Succeed และ Emulator จะเปิดขึ้นมา

ที่ Emulator จะมี Error ขึ้นมาว่า Error : Start Page at 'www/index.html' was not found

วิธีการแก้ไข Error นี้ ให้ Copy folder 'www' ที่อยู่ในแฟ้ม Project (ซึ่งถูกสร้างไว้แล้วตอนที่ท่านสร้าง Project ใหม่) เข้ามาวางไว้ใน Project Xcode หรือคลิกขวาที่ Navigation ของ Project ด้านซ้ายดังรูป แล้วเลือก Show in finder

ใน Finder จะเห็น folder 'www'

ขั้นตอนนี้เป็นขั้นตอนที่สำคัญ นั่นคือ ให้ลาก folder 'www' เข้ามาใส่ใน Xcode (ห้ามลาก folder 'www' ไปวางไว้ใน folder ของ Project แต่จะต้องลากมาใส่ใน Xcode เท่านั้น) ดังรูป

หลังจากลาก folder 'www' และจะมีหน้าต่างขึ้นมา ให้เอาเครื่องหมายถูกที่ Destination ออก และที่ Folders ให้เลือกข้อ 2 Create folder references for any added folders จากนั้นกดปุ่ม Finish.

สร้างเนื้อหาใน folder 'www' เช่น เขียนโค้ด HTML, CSS และ Javascript.

เปิดไฟล์ [AppName]-Info.plist ที่อยู่ใน "Supporting Files" directory เปลี่ยน "BundleIdentifier" เพื่อระบุตัวตนกับทาง Apple ถ้าคุณมี Developer License คุณสามารถเข้าถึงและรัน the Assistant ที่เว็บไซต์ http://developer.apple.com/iphone/manage/overview/index.action และทำการลงทะเบียนแอพพลิเคชั่นของคุณ แต่ถ้าหากคุณยังไม่มี Developer License และเพียงแค่ต้องการทดสอบ PhoneGap บน desktop simulator เท่านั้น สามารถข้ามขั้นตอนนี้ไปได้

สำคัญ!!: ตรวจสอบการเลือก Active SDK ที่เมนูที่อยู่มุมซ้ายบนว่าได้เลือกอุปกรณ์และเวอร์ชั่นที่ถูกต้อง

คลิกปุ่ม Run ที่อยู่มุมบนซ้าย

ขั้นตอนที่ 2

เปิดไฟล์ [AppName]-Info.plist
ซึ่งอยู่ใน "Supporting Files" directory และเปลี่ยน "BundleDisplayName" เพื่อเป็นการเปลี่ยนชื่อแอพพลิเคชั่นตามที่ท่านต้องการ

ใส่รูป icon.png สำหรับแอพพลิเคชั่นโดยอยู่ที่ folder Resources > icon

สามารถเปลี่ยนรูป SplahsScreen โดยอยู่ที่ folder Resources > splash โดยรูปมีชื่อว่า Default.png

ความเห็น

Friends