- - - - - - - - - - - - - - ผู้ให้การสนับสนุน- - - - - - - - - - - - - -

บทความนี้เป็น เป็นเนื้อหาที่จะกล่าวถึงโปรแกรมที่เป็นชุดเครื่องมือ ในการพัฒนาโปรแกมบนมือถือได้หลายระบบปฏิบัติการ หรือที่เรียกเท่ห์ๆว่า เป็นพวก Cross Platform เช่นพัฒนาเสร็จจะได้ทั้งโปรแกรมบน iOS และ Android หรือแม้กระทั่งบน WindowsPhone และนั่นคือจุดเด่นของโปรแกรมนี้ที่ชื่อ PhoneGap

PhoneGap คืออะไร ? เราสามารถเรียกPhoneGap ได้ว่าเป็น Mobile application development framework หรือจะทำความเข้าใจให้ง่ายได้ว่า เป็นชุดของเครื่องมือในการพัฒนาโปรแกรมสำหรับมือถือ ซึ่งแน่นอนว่าบนมือถือนั้นมีระบบปฏิบัติการ ที่หลายหลายมากมายระบบปฏิบัติการ (OS: Operating System)

PhoneGap ใช้พัฒนาโปรแกรมสำหรับระบบปฏิบัติการอะไรได้บ้าง ? ตามที่เว็บของ PhoneGap แสดงข้อมูลอยู่นี้ จะรองรับได้ทั้งหมด 7 OS ด้วยกัน ได้แก่

1. iOS
2. Android
3. WindowsPhone
4. Blackberry
5. Symbian
6. Bada
7. webOS

อยากเขียน PhoneGap ต้องมีความรู้พื้นฐานอะไร ? ความรู้ที่จำเป็นในการพัฒนาโปรแกรมด้วย PhoneGap ที่ต้องรู้และใช้งานได้ คือ HTML5, CSS และ JavaScript เท่านั้น (ก็เยอะอยู่นะ) กล่าวได้ว่าเหมาะสำหรับนักพัฒนาเว็บทั่วๆไป ที่อยากพัฒนาโปรแกรม ก็ว่าได้

เมื่อพร้อมแล้วเริ่มกันเลยดีกว่าครับ

• PhoneGap API รองรับอะไรบ้าง
• ติดตั้งและใช้งาน PhoneGap
• ก่อนจบบท
• ทิ้งท้าย

PhoneGap API รองรับอะไรบ้าง

เรื่องของ API เป็นเรื่องที่ต้องศึกษาก่อนเป็นลำดับแรก ก่อนที่เราจะลงมือลงแรงไปกับงานชิ้นนั้นๆ นักพัฒนาก็ต้องศึกษาก่อนว่าชุดโปรแกรมที่เราจะใช้งานนั้น มันรองรับงานที่เรากำลังจะพัฒนาหรือไม่ เช่นในกรณี PhoneGap เองก็มีชุดของ API ซึ่งจะรองรับและไม่รองรับ บนแต่ละระบบปฏิบัติการไม่เหมือนกัน ดังนั้นจะต้องศึกษาจุดนี้ก่อน ดังรูปด้านล่าง ที่จะแสดงรายการของ API และระบบปฏิบัติการ

ตัวอย่างเช่น คุณไม่สามารถพัฒนาโปรแกรมเพื่อติดต่อกับระบบไฟล์ บนระบบปฏิบัติการ Symbian ได้เป็นต้น

รูปที่1

ติดตั้งและใช้งาน PhoneGap

เริ่มต้นจากเข้าไปที่เว็บของ PhoneGap ที่ www.phonegap.com จากนั้นก็คลิกที่ปุ่ม "Download PhoneGap" สำหรับในบทความนี้ผมใช้เครื่อง Mac ในการนำเสนอบทความ ซึ่งก็ไม่แตกต่างกันหากคุณจะทดลองทำแบบเดียวกันนี้บนเครื่อง Windows ดังรูปจะเป็นเว็บ PhoneGap.com

รูปที่2

ไฟล์ที่ผมกำลังจะดาว์นโหลดจะมีขนาด 29.6MB ซึ่งเป็นไฟล์ของ PhoneGap รุ่น 2.8.0 ดังรูป

รูปที่3

เมื่อคลิกดาว์นโหลดแล้ว ก็ต้องรอสักระยะตามความเร็วของอินเตอร์เน็ตที่ใช้อยู่ ซึ่งจากขั้นตอนนี้จะได้ไฟล์ phonegap-2.8.0.zip ดังรูป

รูปที่4

สำหรับในบทความนี้ ผมจะทำการทดสอบพัฒนาโปรแกรมสำหรับ iOS จึงจำเป็นจะต้องติดตั้ง Xcode เพื่อใช้งาน โดยสามารถค้นหาโปรแกรม Xcode ได้จาก App Store บนเครื่อง Mac เมื่อติดตั้งเสร็จก็ให้เปิดโปรแกรม Xcode ขึ้นมา

รูปที่5

ทำการเลือกที่เมนู Xcode > Preferences...

รูปที่6

จากนั้นก็ทำการเลือกที่แท็บ Downloads และเลือก Install ทั้ง "Command Line Tools" และ iOS 5.x Simulator ที่ต้องการใช้งาน ในตัวอย่างผมก็ทำการติดตั้ง ดังรูป

รูปที่7

เมื่อดาว์นโหลดไฟล์ PhoneGap มาเสร็จแล้วก็ทำการคลี่ไฟล์ zip ออกมา

รูปที่8

ผมทำการสร้างโฟล์เดอร์ชื่อ phonegap_ios เอาไว้เอาไว้เก็บคำสั่งและการทำงานที่เกี่ยวกับ iOS ไว้เท่านั้น

รูปที่9

ทำการคัดลอกไฟล์ที่อยู่ในไฟล์ zip ที่คลี่ออกมา จาก phonegap-2.8.0libios ดังรูป

รูปที่10

วางไฟล์ ไว้ในโฟล์เดอร์ phonegap_iso ที่สร้างขึ้น ดังรูป

รูปที่11

ต่อมาก็ทำการเปิดโปรแกรม Terminal แล้วทำการพิมพ์คำสั่ง cd phonegap_ios เพื่อเข้าสู่โฟล์เดอร์ที่เราได้คัดลอกไฟล์มาวางไว้ จากนั้นก็ใช้คำสั่ง cd bin แล้วตามด้วยคำสั่งเพื่อสร้างโปรเจคที่ชื่อ HelloWorld ด้วยคำสั่งด้วยรูปแบบ ./create [พาร์ทของโฟลเดอร์ที่ต้องการเก็บโปรเจค] [ชื่อแพคเกจ] [ชื่อโปรเจค] โดยในตัวอย่างนี้จะเป็นคำสั่ง ./create /Users/suppakit/HelloWorld com.sourcecode.in.thHelloWorld HelloWorld ดังรูป

รูปที่12

และแล้วเราจะได้ โปรเจคของ Xcode ขึ้นมา ชื่อโปรเจคว่า HelloWorld ดังรูป

รูปที่13

เมื่อทำการดับเบิ้ลคลิกที่ HelloWorld.xcodeproj ก็จะปรากฏหน้าต่างของ Xcode เพื่อใช้ในการแก้ไขและพัฒนาโปรแกรม ดังรูปจะเป็นหน้าต่างแสดงรายละเอียดขององค์ประกอบของโปรเจค ซึ่งมีอยู่หลายโฟล์เดอร์ด้วยกัน แต่ที่ใช้ในการแก้ไขและพัฒนาโค้ด html,css และ js จะอยู่ในโฟล์เดอร์ www

รูปที่14

ต่อมาเราก็จะมาทดสอบสั่ง Run โปรแกรม โดยทำการคลิกที่ปุ่ม Run ดังรูปจะเป็นการสั่ง Run โปรเจคที่ชื่อ HelloWorld โดยให้แสดงผลการทำงานบน โปรแกรม iPhone 6.0 Simulator ซึ่งจะจำลองการทำงานของโปรแกรมบนเครื่องไอโฟน

รูปที่15

ดังรูปจะเห็นได้ว่าจากโค้ด index.html เมื่อ Run แล้วสามารถแสดงผลเป็นโปรแกรม ใช้งานได้บนโปรแกรม Simulator ได้อย่างน่าทึ่ง

รูปที่16

ก่อนจบบท

ขั้นตอนต่อไปก็คือการเริ่มต้นพัฒนาโปรแกรมด้วยวิธีการเช่นเดียวกับการพัฒนาเว็บ แต่อาจจะมีส่วนต่างกันอยู่บ้างตรงที่มีการเรียกใช้งาน API ที่นักพัฒนาต้องศึกษาเพิ่มเติม จากในเว็บของ PhoneGap.com

ทิ้งท้าย

สำหรับข้อมูลในบทความนี้ ผมก็หวังว่าคงเป็นประโยชน์ไม่มากก็น้อย สำหรับเพื่อนๆทุกท่าน และหากมีความสนใจเรื่อง PhoneGap นี้เพิ่มเติม ก็สามารถทิ้งข้อความไว้ด้านล่างนี้ได้ครับ หากมีเสียงเรียกร้องเข้ามามากๆผมจะได้จัดบทความต่อไปในหัวข้อ PhoneGap นี้ได้เพิ่มเติมครับ แล้วพบกันใหม่กับ 9'M

- - - - - - - - - - - - - - ผู้ให้การสนับสนุน- - - - - - - - - - - - - -