PhoneGap & Cordova book in Thai http://aorjoa.blogspot.com

1. PhoneGap
Cordova&
หนังสือสอนพื้นฐาน
http://aorjoa.blogspot.com
Bhuridech Sudsee
License

2. สารบัญ
เรื่อง หนา
Introduction 1
­ Natiive application 1
­ Mobile web application 2
­ Hybridge application 2
Why we use PhoneGap? 4
How PhoneGap works? 5
Support APIs 6
Why HTML5? 7
Installation guide 8
­ Java Development Kit(JDK) 9
­ Software Development Kit(SDK) 15
­ Node.js 19
­ Cordova command­line interface 20
­ PhoneGap command­line interface 21
­ Ripple Emulator (PhoneGap Emulator) 22
­ PhoneGap Developer Application 24
Basic knowledge 26
Plug­in 31
Documentation 31
Adobe® PhoneGap™ Build 32
Workshop : Pao­Ying­Chup 41
Deploy to Store 44
บรรณานุกรม 56

3. นา 1
Introduction :
PhoneGap ถูก รางโดยบริ ัท Nitobi เมื่อป 2008 ภายในคาย iPhoneDevCamp โดย
Brock Whitten และ Rob Ellis เพื่อที่จะ รางโปรเจกการทำงานแบบ cross­platform mobile
developement แบบงายๆขึ้นมา[1]
(cross­platform คือการไมขึ้นอยูกับระบบ เชนเขาเ ็บ
Google ตอใ เปนระบบปฏิบัติการไ น Web browser ไ นก็มองเ ็นแบบเดีย กัน) ตอมาใน ันที่ 4
เดือนตุลาคมป 2011 Adobe ประกา ในงาน Adobe MAX 2011 าไดทำการเขาซื้อบริ ัท Nitobi
เจาของ PhoneGap เรียบรอยแล [2]
จากการ นับ นุนของ Adobe และ IBM ทาง Adobe จึงมอบ Source code ใ องคกร
Apache Software Foundation (ASF) ดูแลเพื่อเปดเปน Opensource ที่มีชื่อ า “PhoneGap”
แตเนื่องจากติดปญ าดานทรัพย ินทางปญญาและเครื่อง มายทางการคาจึงไดมีการเปลี่ยนชื่อเรียก
เปน “Apache Callback” แตไดมีการเปลี่ยนชื่อใน ันที่ 28 พฤ จิกายน 2011 ดังนั้นตั้งแต Version
1.4 ก็ไดเปลี่ยนมาใชชื่อ “Apache Cordova” ในปจจุบันแทน จะเ ็น าทั้ง PhoneGap, Apache
Callback และ Apache Cordova คือ ิ่งเดีย กันซึ่งเปน Open source framework ที่ใช ัญญา
อนุญาตแบบ Apache License v2.0 ในการพัฒนา Mobile application จะทำผานภา าและ
เครื่องมือที่เปนมาตรฐาน ำ รับเ ็บทั่ ไป โดยใช HyperText Markup Language (HTML),
Cascading Style Sheets (CSS) และ JavaScript (JS) กลา คือ าก ามารถ ราง นาเ ็บไดก็
ามารถ ราง Mobile application ได และในทางกลับกัน าก ราง Mobile application ไดก็ ราง
นาเ ็บไดเชนเดีย กันเพราะเทคโนโลยีที่ใชมีค ามใกลเคียงกันมาก โดยทั่ ไปการพัฒนา Mobile
application นั้นจะมีประเภทของการพัฒนาแบงเปน 3 แบบใ ญๆ คือ
1. Native application คือการพัฒนา Mobile application ด ยการใชภา าพื้นฐาน
ำ รับตั platform ที่รองรับ รือที่เรียก า device­specific languages เชน ใชภา า
Android/Java NDK (Syntax คลายกับ Java มาก) ในการพัฒนา application ำ รับอุปกรณที่
ทำงานบนระบบปฏิบัติการ Android แตฝงของ Apple ใชภา า Objective­C ในการพัฒนา
Application ำ รับระบบปฏิบัติการ iOS เปนตน จะเ ็นได า Native application คือการจำกัด
ระบบในการพัฒนา าตอง รางจาก Platform ที่กำ นดไ ใ เทานั้น ซึ่งขอดีของ application เ ลา
นี้คือ ามารถเขาถึง Application Programming Interface (API) ไดดีก า ปรับแตง Source code

4. นา 2
ไดมากก า ามารถทำงานไดแมไมไดตอกับอินเทอรเน็ต และการประม ลผลใชเ ลานอยก า ขอเ ีย
คือยากตอการเรียนรูภา าที่เปน Native ของแตละระบบ และการปรับแตงใ ยงามก็ทำไดไมคอย
ะด ก ากเทียบกับแบบอื่น[3]
2. Mobile web application คือการใชงานอุปกรณเคลื่อนที่
ในการเขาชมเ ็บไซตคลายการเขาเ ็บปกติ แตเ ็บไซตนั้นไดมี
การเขียนมาเปนพิเ เพื่อรองรับกับขนาด นาจอและฟงกชัน
การทำงานซึ่งเมื่อเราเปดเ ็บขึ้นมาจะมี นาตาคลายกับ
Application ที่ถูกติดตั้งในเครื่อง และมีปุมตางๆที่ ะด กตอ
การใชงานเ ็บไซต ขอดีของ Application ประเภทนี้คือไมไดติด
ตั้งบนเครื่องเราจริงๆ จึงไมเปลืองเนื้อที่ใน น ยค ามจำของ
เครื่อง ใชงานไดกับทุก Plaform โดยไมตองเปลี่ยน Source
code ใ ม และใชงานไดเ มือนเปน Application บนเครื่อง
จริง แตก็มีขอเ ียคือไม ามารถเขาถึง API ไดโดยตรงดังนั้นจึง
ตองขอ Permission ในการใชงานผานทาง HTML5 และจำเปน
ตองตออินเทอรเน็ตเมื่อตองการใชงาน และบาง API ก็ไม
ามารถรองขอไดใชงานได เชน การขอจัดการ SMS
3. Hybridge application ร มเอาขอดีของ Native และ Mobile web application เขา
ไ ด ยกันโดย Application ประเภทนี้จะถูกเขียนด ยภา าตั กลางคือภา า HTML ซึ่ง ามารถ

5. นา 3
ประกอบเขากับ JS เพื่อโปรแกรมการทำงาน Event ตางๆ และ CSS เพื่อปรับแตงใ ยงามไดงาย
อีกทั้งยัง ามารถใชโคดชุดเดีย กันในการแปลงเปน Application ใน ลาย Platform ซึ่งไดเปรียบ
Native application อยางมาก ลัก ณะการทำงานของ Application ประเภทนี้คลายกับการทำงาน
ของ Mobile web application แต ามารถทำงานโดยไมตองเชื่อมตอกับอินเทอรเน็ต ามารถติดตั้ง
ลงบนอุปกรณและ ามารถขายที่ Store ของแตละระบบไดนอกจากนี้ยัง ามารถเรียกใช API ในการ
เขาถึงอุปกรณเชนกลอง ไมโครโฟน และฟเจอรตางๆไดโดยขอ Permission แคขั้นตอนการติดตั้ง
Application แตก็มีขอเ ียคือโดยทั่ ไปแล ค ามเร็ จะนอยก า Native application แต ากจะ
เทียบกับค าม ะด กในการพัฒนาแล ก็ถือ าคุมคา ากจะแลกกับค ามเร็ ที่เ ียไป[4]
และถา าก
ไมใช Application เกม รือประม ลผลกราฟฟกที่ตองใชการประม ลผล ูงก็ไมเ ็นค ามแตกแตงกัน
มากนัก.

6. นา 4
Why we use PhoneGap? :
­ PhoneGap ามารถ ราง Mobile application โดยการใชงาน HTML/JS/CSS
พื้นฐานการใชงานที่มาจาก HTML , JavaScript และ CSS นั้นเรียนรูไดงายและแมแต
ในประเท ไทย ลายๆโรงเรียนมี ลัก ูตรการ อน รางเ ็บด ย HTML/JS/CSS ทำใ งายในการเรียน
รูตอยอด แ ลงขอมูลก็ ามารถ าไดงายในอินเทอรเน็ต การจัด Layout และตกแตงด ย CSS ก็ไม
ยากจนเกินไป และการเขียนโปรแกรมที่ลดการตั้งคาระบบของอุปกรณโดยตรงลง ทำใ จำกัดตั แปรที่
อาจจะกอใ เกิดค ามผิดพลาดไดดีขึ้น
­ PhoneGap ามารถ Deploy ไดบน ลาย Platform
เนื่องจากเขียนผานตั กลางคือ PhoneGap framework ทำใ ามารถแปลงเปน
Application ไดใน ลาย Platform โดยเราตองมี SDK ของ Native นั้นๆ กอนเชนตองลง SDK ของ
Android กอน PhoneGap จึงจะ ั่งใ Build application เพื่อไปทำงานในอุปกรณที่ทำงานบน
ระบบปฏิบัติการ Android ได (แคลงไ ก็พอเนื่องจากการ Compile บางไฟลยังจำเปนตองใชอยู) แต
เพื่อแกปญ านี้ ากเราไม ามารถลง SDK ลายๆตั ไดก็มีบริการ Build ผานระบบ Cloud เชน
Adobe® PhoneGap™ Build
­ PhoneGap ทำใ ไมจำเปนตองเรียนรูภา า Native ทุกภา า
คงจะ ุน ายไมนอย ากเราตองเรียนรูทุกภา าเพื่อจะเขียน Application ที่ทำงาน
แบบเดีย กันแถมยัง นาตาเ มือนกัน เพียงเพื่อใ ใชไดบน ลายอุปกรณเทานั้น มันจะดีก าไ มถา
เรา ามารถเขียนครั้งเดีย เพื่อทำงานบน ลายๆอุปกรณได
­ PhoneGap ามารถใชงานไดกับ Framework HTML/CSS/JavaScript ไ นก็ได
ปกติเรามักจะเขียน Application โดยใช Framework เพื่อช ยใ ะด กขึ้น
PhoneGap ก็เชนกันมัน ามารถใชกับ Framework เดิมเชน BootStrap,jQuery รือ AnularJS ได

7. นา 5
How PhoneGap works? :
การทำงานของ PhoneGap เปนการนำเอาไฟล HTML , JS และ CSS ที่เราไดมาจากการ
เขียน Web application มา อ ุมด ย Web View ซึ่งเปนกลไกการทำงานของ Native
application (จึงเปนเ ตุผลที่ าทำไมตองติดตั้ง SDK ลงไปด ย) ซึ่ง Web View มี นาที่แ ดงผล
ขอมูลในลัก ณะของเ ็บ โดยเรียกใช Build­in web browser ที่ติดมากับระบบปฏิบัติการของ
อุปกรณเคลื่อนที่ ากอธิบายงายๆ Hybridge application ก็
คือ Native application ที่มีแค Web View นั่นเอง แตก็จะ
ามารถเขาถึง API เพื่อเรียกใชงานอุปกรณตางๆ ของเครื่องได
ผานทาง PhoneGap API ดังนั้นจึงจะเ ็น าเรายังจำเปนตัองใช
SDK ของแต Platform รือแตละระบบปฏิบัติการเพราะยัง
ตองการการ Compile บางอยางใน นที่เปน Native
application แตบางระบบปฏิบัติการเชน Bada, Symbian และ
WebOS ที่มี Native application เปน Web application อยู
แล จึงไมตองใชการ Compile เพื่อจะใ อ ุมด ย Native
application
Hybridge application จะคลายกับ Mobile web
application ใน ิธีการพัฒนาในรูปแบบของเ ็บแต Hybridge
application จะเก็บไฟลของเ ็บที่ถูกพัฒนาไ ใน น ยค ามจำ

8. นา 6
ภายในเครื่อง ดังนั้นจึงไมตองการการเชื่อมตออินเทอรเน็ตกอนเขา
ใชงาน Application ทำใ ะด กมากขึ้น และขั้นตอนการพัฒนาที่
ามารถใช Web browser ในเครื่องคอมพิ เตอรของผูพัฒนาเพื่อ
ทด อบบางอยางไดกอนก็ทำใ ามารถลดเ ลาพัฒนาลงได
การเรียกใชโมดูลของอุปกรณใน PhoneGap นั้นเกิดจากขั้น
ตอนแรกเมื่อเกิด Event ใน JavaScript ที่เราเขียนโปรแกรมไ ก็จะ
มีการเรียกใช PhoneGap API ซึ่งเปน Interface กลางติดตอ
ระ าง JavaScsript ที่เราเขียนกับ Native API ของภา าที่เปน
ภา า Native ของอุปกรณ จากนั้น Native API จะไปเรียกใช
Device OS ซึ่งเปนตั จัดการอุปกรณของระบบปฏิบัติการ และเมื่อ
Decvice OS รับคำ ั่งแล จึงจะทำการเรียกใชงานโมดูลอุปกรณที่
เปนทางกายภาพจริงทำงาน เชน ากเปนการเรียกใชโมดูลกลองในอุปกรณ ก็จะมีลำดับการเรียกดังนี้
JS ­> PhoneGap API ­> Native API ­> Device OS ­> [Camera module] การทำใ ระบบตอง
เรียกใชงาน ลายขั้นตอนนี้ก็เพื่อ ะด กในการพัฒนา และช ยลดโอกา ที่จะเกิดค ามผิดพลาดราย
แรงในการเรียกใชงานอุปกรณจึงไมใ เรียกใชโดยตรง แตจะใ เรียกผาน API ที่ถูกจำกัดปจจัยเ ี่ยง
ออกไปในระดับ นึ่งแล
Support APIs :
PhoneGap นับ นุน API พื้นฐานดังนี้
­ Accelerometer เซนเซอร ัดค ามเรง
­ Camera โมดูลกลอง
­ Capture เก็บภาพ นาจอของอุปกรณเคลื่อนที่
­ Compass เข็มทิ
­ Connection การเชื่อมตอ
­ Contacts รายชื่อผูติดตอ
­ File การจัดการไฟล
­ Geolocation ตำแ นงทางภูมิ า ตร

9. นา 7
­ Media จัดการมัลติมีเดีย
­ Notification การแจงเตือน
­ Strorage จัดการเนื้อที่บน น ยค ามจำ
การ นับ นุนที่กลา ไปดานบนอาจจะไมถูกรองรับเ มือนกันในทุกอุปกรณ (เชนอุปกรณบางรุนไมมี
GPS ก็เรียกใชไมได) รือในทุกระบบปฏิบัติการดังนั้น ามารถ าขอมูลเพิ่มเติมไดที่
http://phonegap.com/about/feature/ และ าขอมูลโมดูลที่รองรับการใชงานในอุปกรณนั้นๆ
Why HTML5? :
แตเดิมในยุค Web 1.0 เปนยุคที่เ ็บเปน Statics web ขอมูลเปนการ ื่อ ารทางเดีย จากผูใ
บริการเ ็บไซตและในตอน ลังไดมีการพัฒนาเ ็บไซตใ เขามา ูยุค Web 2.0 คือมีการโตตอบกัน
ระ างผูใชด ยกันและกับผูดูแลเ ็บเชนมี Webboard นทนา มี Social network และมีการนำ
Desktop application รือ application ที่ทำงานบนเครื่องปกติที่ตองติดตั้งกอนใชงานมาใ บริการ
ผานเ ็บไซตซึ่งไมตองติดตั้งโปรแกรม เชน email แตเดิมใชโปรแกรมรับ ง แตปจจุบันก็ไดเพิ่มการใ
บริการผานเ ็บโดยไมตองติดตั้งโปรแกรมกอน ขอมูลทั้งในยุคของ Web 1.0 และ Web 2.0 นั้นถูก
เก็บอยูใน Server ที่ใ บริการ โดยเมื่อผูใชงานเ ็บเรียกใชเ ็บไซตขอมูลก็จะถูกตีค ามแล จึง งกลับ
มาเพื่อแ ดงผล
ในยุค Web 1.0 นั้น HTML เพียงพอที่จะใชในการนำเ นอขอมูลที่เปน Static web content
เนื่องจากเปนการ ื่อ ารทางเดีย จากผูใ บริการเ ็บไซต และแมในยุค Web 2.0 เริ่มแรกนั้นเราก็ยัง
ามารถใชงานภา าฝง Server (Server­side language) เชน PHP, ASP ร มด ยด ยเนื่องจาก
ขอมูลไม ามารถเก็บในฝง Client เพราะค าม ามารถของภา าฝง Client (Client­side language)
เชน HTML, JavaScript ทำใ มีค ามตองการเชื่อมตอกับอินเทอรเน็ต เพื่อเรียกใช Server อยูตลอด
เ ลาทำใ Server และเครือขายของผูใ บริการที่มีทรัพยากรไ บริการจำกัดเกิดเ ตุการณ Server
ลมได จึงไดมีการพัฒนากระบ นการเก็บขอมูลไ ในฝง Client เพื่อใ ลดการเชื่อมตอกับ Server และ
ทำใ ามารถใชงานโดยไมตองเชื่อมตอกับอินเทอรเน็ตได จึงไดมีการพัฒนา Google Gears ขึ้นมาซึ่ง
ภายใน Google Gears มี Client­side SQL database โดยใชฐานขอมูลที่มีชื่อ า SQLite ำ รับ
เก็บขอมูลตางๆ ไ ที่เครื่องเรา และมี JavaScript API ใ เรียกใชงานผาน JavaScript ทำใ ไมจำเปน

10. นา 8
ตองตออินเทอรเน็ตตลอดเ ลา และยังเขาถึงขอมูลไดเร็ ก าเพราะฐานขอมูลอยูในเครื่องของเราเอง
และใน ันที่ 19 กุมภาพันธ 2010 Google ก็ประกา เลิก นับ นุน Google Gears[5]
และถูกถอด
ออกจาก Google Chrome ตั้งแตรุน 12.0.742.91 Stable[6]
แตก็มีการเพิ่มคุณ มบัติของ HTML5
เพื่อใ รองรับ Client­side database เพื่อเก็บขอมูล และจากค ามจำเปนดังกลา HTML5 จึงได
เพิ่มค าม ามารถขึ้นมาดังนี้
­ ใชการกำ นด Doctype ที่ ั้นลงเพียงกำ นด <!DOCTYPE html>
บน ั ไฟลเอก ารที่มีนาม กุล .html
­ ามารถใชงาน CSS3 ไดอยางเต็มรูปแบบ
­ มี Elements ใ มเพิ่มขึ้นมา เชน <canvas>, <audio>, <video>,
<header>,<footer>,<article>
­ นับ นุนการใชงานภาพเคลื่อนไ และเ ียงโดยตรง (จากเดิมที่ใช
งานผาน Flash)
­ มี Local storage และ Local SQL database
­ รองรับการใชงาน HTML5 เพื่อ ราง Web application
­ รองรับการแ ดงผล 2D/3D ในรูปแบบ 2D Canvas, WebGL, SVG และ 3D CSS
แม าในปจจุบัน HTML5 ยังอยูในขั้นตอนการราง (มีแผนในการเปดใ ใชงานจริงในป 2014) และใน
บางฟเจอรยังไมเ ถียรแตก็มีการใชงานที่แพร ลายในปจจุบันเนื่องจากคุณ มบัติที่กลา ไปขางตน แต
ถึงอยางไรก็ตามบางฟเจอรอาจโดนตัดออกไดตลอดเ ลา
Installation guide :
กอนที่เราจะเริ่มใชงาน PhoneGap
เราตองทำการติดตั้งเครื่องมือที่ใชในการ
พัฒนาไ กอนและเนื่องจากการพัฒนาใน
ระบบปฏิบัติการ Mac OS X รือ Linux กับ
ระบบปฏิบัติการ Windows นั้นมีค ามแตก
ตางกันเล็กนอยใน นที่เปน Version ของเครื่องมือ และการตั้งคา Developement Environment

11. นา 9
ของแตละระบบปฏิบัติการ ดังนั้งจึงจะแยกอธิบายการตั้งคาในบาง นที่จำเปน ซึ่งเครื่องมือที่ใชก็มี
ดังนี้
1) Java Development Kit(JDK)
การเขียน Application บนระบบปฏิบัติการ Android นั้นจำเปนตองมีเครื่องมือที่
เรียก า Java Developement Kit(JDK) ซึ่งเปนเครื่องมือที่ร มเอา Compiler และ Interpreter
ภา า Java ไ ซึ่งมันจะตางกับ Java Runtime Environment(JRE) ปกติที่มีแค Interpleter ที่ใช
Run จาก Byte code ภา า Java ใ ทำงานไดเทานั้น
Mac OS X
การติดตั้ง JDK ใน Mac OS X เราตองทำการ Download ตั JDK จากเ ็บไซตของ
Oracle http://www.oracle.com แล ไปที่เมนู Download > ใน ั ขอ Popular Download
เลือก Java for Developer > ใน ั ขอ Java SE Downloads เลือก Java Platform(JDK) แล กด
Download > เลือก Accept License Agreement > จากนั้นเลือกรุนที่เ มาะกับเครื่องเราแล กดที่
Link ดาน ลังเพื่อ Download

12. นา 10
ลังจากที่ได Download มาเรียบรอยแล ก็ทำการติดตั้ง JDK ลงไป
ลังจากทำการติดตั้งแล ก็จะทำการตั้งคา Evironment เพื่อใ ระบบปฏิบัติการ ามารถเรียกใช JDK
ไดผาน Command­line โดยใน Mac OS X เรากำ นดคาของ $JAVA_HOME ตามขั้นตอนนี้

13. นา 11
1) า า JDK ที่ติดตั้งไปเปน Version อะไร โดยจะ าโดยใชคำ ั่ง
ls ­la /Library/Java/JavaVirtualMachines/
ซึ่งกรณีนี้จะใช jdk1.8.0_05.jdk
2) เปด Terminal ขึ้นมา จากนั้นใช
คำ ั่ง nano ~/.bash_profile
3) ทำการเพิ่มคา export
JAVA_HOME="/Library/Java/JavaVirtualMachines/jdk1.8.0_05.jdk/Contents/Home"
เ ร็จแล บันทึก และออกจากโปรแกรม Nano ที่ใชแกไขไฟล
4) Restart terminal แล ทด อบการใชงานและ Version ของ JDK โดยใชคำ ั่ง java ­version

14. นา 12
Windows
Download ตั JDK จากเ ็บไซตของ Oracle http://www.oracle.com แล ไปที่เมนู
Download > ใน ั ขอ Popular Download เลือก Java for Developer > ใน ั ขอ Java SE
Downloads เลือก Java Platform(JDK) แล กด Download > เลือก Accept License
Agreement > จากนั้นเลือกรุนที่เ มาะกับเครื่องเราแล กดที่ Link ดาน ลังเพื่อ Download

15. นา 13
ลังจากที่ได Download มาเรียบรอยแล ก็ทำการติดตั้ง JDK ลงไป
ลังจากทำการติดตั้งแล ก็จะทำการตั้งคา Evironment เพื่อใ ระบบปฏิบัติการ ามารถเรียกใช JDK
ไดผาน Command­line โดยในระบบปฏิบัติการ Windows ตองทำงานตั้งคาตั แปร PATH
1) Start menu > คน าคำ า “environment” > เลือก Edit the system evironment
variables

16. นา 14
2) ไปที่ Tab Advance > เลือก Environment
Variables
3) ตั้งคา System Variables > เลือก Variable ช่ือ Path > กด Edit > เพิ่มคาตำแ นงของ JDK
เขาไปโดยใช ; คั่น (ในตั อยางคือ C:Program FilesJavajdk.1.8.0_05bin) > กดปุม OK

17. นา 15
4) ทดลองใชไปที่ Start menu > cmd > javac ­version
2) Software Development Kit(SDK)
ในการพัฒนา Application ของเอก ารนี้เกือบทั้ง มดจะเปนการใชงานอุปกรณที่
ทำงานบนระบบปฏิบัติการ Android เพราะ ะด กตอการพัฒนา Application ำ รับผูเริ่มตน
เนื่องจากการติดตั้ง Application ลงไปในอุปกรณจริงนั้น ามารถทำไดโดยไมตองขออนุญาตกอนเชน
ใน iPhone รืออุปกรณที่ทำงานบน iOS ของ Apple ที่ตองมีบัญชีผูใชชนิดพิเ ที่เปน iOS
developer certificate ซึ่งมีคาใชจายในการดำเนินการ
การท่ีเราจะ ามารถ ราง Application โดยการ Build จากเครื่องเราเองไดเลยนั้น
ตองอา ัย Software Development Kit(SDK) ในภา าที่เปน Native Language นั้นๆ เชนกรณีนี้
เราจึงตองการ Android SDK ซึ่ง ามารถ Donwload ไดจาก
http://developer.android.com/sdk/index.html แล Click ปุม Download the SDK จากนั้น
กดยอมรับกฏการใชงาน และกด Download

18. นา 16
Mac OS X
โดยในตั ไฟลที่ Donwload มาจะมี Android SDK
และ Eclipse IDE ซึ่งถูกดัดแปลงมาใ มีเครื่องมือพื้น
ฐานในการพัฒนา Application บนระบบปฏิบัติการ
Android เชน Android Developer Tools(ADT),
Android Emulator มาใ แล ลังจากที่
Download มาก็ตองทำการ Unzip รือแตกไฟลใ
เรียบรอย และก็ตองทำการตั้งคา Evironment เพื่อใ
ระบบเรียกใชไดใน Command­line โดยจะตั้งคาผาน
ตั แปร $PATH ดังนี้
export PATH=/Users/dekcom/Downloads/ADT/sdk/tools:$PATH
export PATH=/Users/dekcom/Downloads/ADT/sdk/platform­tools:$PATH

19. นา 17
Windows
Download ตั Zip Android SDK ไดจาก http://developer.android.com/sdk/index.html
เมื่อ Download เรียบรอยแล ใ Unzip
ออกมาไ แล นำเอาตำแ นงเก็บ
platform­tools ไปเพิ่มในตั แปร Path โดย
มีขั้นตอนดังนี้
1) Start menu > คน าคำ า “environment” >
เลือก Edit the system evironment variables

20. นา 18
2) ไปที่ Tab Advance > เลือก Environment Variables
3) ตั้งคา System Variables > เลือก Variable ช่ือ Path > กด Edit > เพิ่มคาตำแ นงของ SDK
เขาไปโดยใช ; คั่น (ในตั อยางคือ C:androidandroid­sdk­windowsplatform­tools) > OK

21. นา 19
3) Node.js
ามารถ Donwload ไดที่เ ็บไซต http://www.nodejs.org แล กดไปที่ปุม Install
ระบบก็จะทำการเลือกไฟลติดตั้งที่เ มาะ มกับเคร่ืองของผูติดตั้ง และทำการ Donwload ใ
ลังจากนั้นก็ทำการติดตั้ง Node.js ที่ถูก Download มาแล ติดตั้งลงในเครื่อง

22. นา 20
4) Cordova command­line interface
ขั้นตอนนี้เปนการติดตั้งคำ ั่ง Cordova ซึ่งเปนคำ ั่งในการจัดการระบบของ
PhoneGap เชนการ ั่ง Run Application การติดตั้ง Plug­in ทำใ ามารถถูกเรียกใชไดใน
Command­line ตอไป และดังที่อธิบายไปตั้งแตตอนตน าคำ ั่ง phonegap กับ cordova เปนคำ ั่ง
ที่คลายกัน ามารถใชเทียบเคียงกันไดแตไมทั้ง มด (ที่ตองแยกกันเพราะเรื่องทรัพย ินทางปญญา)
โดยใชคำ ั่งติดตั้งคือ sudo npm install ­g cordova
sudo เปนการทำงานโดยใช ิทธิ์ Super User ของระบบปฏิบัติการ Mac OS X (Windows ไมมี)
npm คือ NodeJS package manager เปนตั ติดตั้งโดยอา ัยการทำงานของ Node.js
install เปนคำ ั่งที่ใชในการติดตั้ง Package ใดๆก็ตาม
­g เปน Parameter ที่บอก าคำ ั่งที่ทำนั้นจะมีผลกับระบบ ลัก เชนกรณีนี้เปนการติดตั้ง codova ไ
ในระบบ npm ลัก (โดยปกติจะติดตั้งไ เฉพาะแตละ Project ของ Node.js ากโปรเจกอื่นตองการ
ใชอาจจะตองติดตั้งอีกครั้ง)
cordova เปนชื่อ Package ที่จะทำการติดตั้ง

23. นา 21
Restart Terminal/Command Prompt แล ลองใชงาน cordova
5) PhoneGap command­line interface
คำ ั่ง phonegap และคำ ั่ง cordova นั้นแมมีค ามใกลเคียงกันมากในรูปแบบการ
ใช แตในบางคำ ั่งค าม ะด กของการใชงานแตกตางกันไป เชนคำ ั่ง phonegap serve นั้นมีระบบ
autoreload เพื่อตร จ อบการเปลี่ยนแปลงของไฟลแล ทำการเรียกซ้ำคำ ั่ง phonegap serve ใ
ใ มโดยที่เราไมตองทำเอง เพราะในคำ ั่ง cordova serve นั้นไม ามารถทำได ซึ่ง ิธีการติดตั้งก็
คลายกัน และแนะนำใ ลงทั้ง องคำ ั่งค บคูกัน

24. นา 22
6) Ripple Emulator (PhoneGap Emulator)
Emulator รือตั จำลองอุปกรณถูกใชในการพัฒนา Mobile Application อยาง
แพร ลาย เนื่องจาก ากเราตองการทดลองกับอุปกรณเคลื่อนที่ก็ ามารถ รางจำลองโดยไมตองซื้อ
อุปกรณจริง รือ ากไมตองการเชื่อมตอกับอุปกรณจริงก็ ามารถเลือกใชการจำลองอุปกรณเพื่อ
ทด อบไดโดย ราง Emulator ของแตละอุปกรณที่ตองการเชน iPhone, Nexus โดยอุปกรณจำลองที่
รางมานั้นจะมีคุณ มบัติคลายกับอุปกรณจริงแตถูกจำลองขึ้นโดย Software ทำใ ลดงบประมาณลง
ไป ร มทั้งการพัฒนา Application ใน Emulator ยังไมจำเปนตองขออนุญาตเพื่อติดตั้ง
Application ลงในอุปกรณซึ่งก็ทำใ ะด กมากขึ้นไปอีก
ตั Emulator เองก็มีใ เลือกได ลาก ลายคาย ขึ้นอยูกับค ามถนัดและเ มาะ มกับ
งาน ซึ่งในเอก ารนี้เลือกใชงาน Ripple Emulator ซึ่งเปน Emulator ที่ถูกพัฒนามาจาก
TinyHippos ที่ตอนนี้เปน น นึ่งของ BlackBerry WebWorks SDK โดยมีผู นับ นุนการทำงานคือ
BlackBerry’s Ripple Emulator[7]
ตั Emulator นี้
ใชและ ามารถจำลองขอมูลเชน จำลองตำแ นง GPS
ได, จำลอง Accelerometer ได และการทำงานของ
Ripple Emulator เปน Extension ของ Google
Chrome ซึ่งติดตั้งไดงาย แตตองการติดตั้ง Google
Chrome และ Ripple Extension รือติดตั้ง Plug­in
ของ Node.js ที่ชื่อ ripple­emulator จึงจะใชงานได
ซึ่ง ามารถติดตั้งไดโดยไปที่
http://emulate.phonegap.com และทำตามขั้น
ตอนดานข ามือนี้

25. นา 23
ิธีการใชก็ทำไดโดย การไปที่ นา Website ที่เรา
ตองการ > คลิ๊กเมา ดานข า > Emulator >
Enable > เลือก Apache Cordova (2.0.0)

26. นา 24
แตเพื่อค าม ะด กในการเรียกใชงานไดจาก Command­line ไดเลย ตองทำการติดตั้ง Node.js
Package ที่ชื่อ า Ripple­emulator โดยใชคำ ั่ง sudo npm install ­g ripple­emulator
จากนั้นทด อบโดยเขาไปในโฟลเดอรที่มีโปรเจกของ Cordova อยูจากนั้นใชคำ ั่ง ripple emulate
(ตองมีโปรเจก และมี platform อยูกอนแล จึงจะลองได)
7) PhoneGap Developer Application
เปน Application ที่ รางขึ้นมาเพื่อลดอาการป ด ั เมื่อทดลองใชงาน Ripple Emulator
(PhoneGap Emulator) และ Remote Debugging ในอุปกรณที่ทำงานบนระบบปฏิบัติการ iOS,
Android และ Windows Phone แล ปรากฏ าตองขออนุญาตในการติดตั้ง Application กอนซึ่ง
เราก็มักจะไมมี Certificate ของ iOS รือไม ะด กที่จะติดตั้ง Application บนอุปกรณจริงบอยๆ
ดังนั้นทีมงานของ PhoneGap จึงออก Application นี้มาช ย โดยเรา ามารถที่จะติดตั้งแค

27. นา 25
Application กลางตั เดีย กันแล เปลี่ยนแคใ ในเปน Application ตั อื่นที่เรากำลังพัฒนาอยู (ตั
โคดเขียนด ย HTML+JS+CSS อยูแล ) การทำงานก็จะคลายกับ Ripple Emulator แตเปนการ
ทำงานบนอุปกรณจริง และมีขอเ ียก็คือในปจจุบันนี้ (PhoneGap 3.5.0­0.20.4 | Cordova
3.5.0­0.2.4) ระบบ Autoreload (ระบบที่ทำใ เราแกไขไฟลแล ตั Application ถูกแกไขตามไป
ด ยอัตโนมัติ) มีแคในโปรเจก PhoneGap นในโปรเจก Cordova ยังตองรันคำ ั่งใ มทุกครั้ง จึงไม
คอยเ มาะกับโปรเจก Cordova ดังนั้นขอแนะนำใ รางโปรเจก PhoneGap เพราะ ามารถใชงาน
ไดทั้ง PhoneGap CLI และ Cordova CLI (CLI ­> Command­Line interface)
ิธีการใชงานใ ั่ง phonegap serve ในโฟลเดอรของโปรเจก PhoneGap จากนั้น Download
application ตามระบบที่จะใชทด อบซึ่ง ามารถดูไดที่ http://app.phonegap.com แล ทำการ
ติดตั้ง และเรียกใชงาน โดยใ URL ที่ไดจากการใชงานคำ ั่ง phonegap serve ลงไป จากนั้นก็
ทำการกดปุม Connect ระบบจะเชื่อมตอมาที่ IP
Address ของเครื่องที่เราใชรันคำ ั่ง phonegap serve
จากนั้นก็จะเรียกใชขอมูลที่อยูใน Application ที่เรา
เขียน ซึ่ง ากเราใชคำ ั่ง phonegap serve ากเรา
แกไขไฟลเชน index.html แล เรา Save ระบบ
autoreload จะเปลี่ยนแปลงในโทร ัพทของเราใ
อัตโนมัติ แต ากใช cordova serve ตองกด ctrl + c
เพื่อปด Process ของ cordova แล ใชคำ ั่ง cordova
serve อีกครั้ง แล ยังตอง refresh ตั application ในโทร ัพทใ มอีกด ย

28. นา 26
Basic knowledge :
ถึงแม าการตั้งคา Environment ในการพัฒนาบางอยางจะแตกตางกันไปในแตละระบบ
ปฏิบัติการ แตในการพัฒนา Application นั้น ามารถทำไดโดย Source code ชุดเดีย กันเพราะ
ภา า HTML, CSS และ JavaScript นั้นเปนภา าที่ไมขึ้นอยูกับ Platform ของผูพัฒนาจึงทำใ
ะด กตอการพัฒนา Application
< Basic command >
NodeJS package manager
npm install <PackageName> ใชติดตั้ง Package
npm uninstall <PackageName> ใชลบ Package
Cordova CLI (Command­Line interface)
cordova help ใชเปดคำแนะนำการใชคำ ั่ง cordova
cordova ­­version ใชตร จ อบ Verison ของ cordova
cordova create <App_name> ใชในการ รางโปรเจก Mobile Application
cordova info ใช รางไฟล info.txt ที่ร มขอมูลของโปรเจก
cordova platforms ใชแ ดง Platform ทุกตั ที่ติดตั้งมาในโปรเจก
cordova platform add <PlatformName> ใชเพิ่ม Platform ในโปรเจก
cordova platform remove <PlatformName> ใชลบ Platform ในโปรเจก
cordova plugin ใชแ ดง Plug­in ทั้ง มดในโปรเจก
cordova plugin add <Repository> ใชเพิ่ม Plug­in ในโปรเจก

29. นา 27
cordova plugin remove <PluginPackageName> ใชลบ Plug­in ในโปรเจก
cordova prepare ใช Copy ไฟลขอมูลใ พรอมในการ Compile แตละ Platform
cordova compile ใช Compile ขอมูลใ เปน Mobile Application
cordova build ใชเปนคำ ั่งลัดในการ prepare และ compile
cordova run <PlatformName> ใชรัน Mobile Application
cordova emulate ใชในการเรียกใช Emulator พ ก Android Virtual Device
cordova serve <Port> ใชเปด Web Server ใน Localhost ของโปรเจก
Ripple Emulator
ripple emulate ใชเปดตั Emulator ของโปรเจก
< Hello, PhoneGap >
ถึงตอนนี้เราก็มีเครื่องมือเพียงพอที่จะ รางโปรเจก Cordova แล และในขั้นตอนนี้
เราก็จะลอง รางโปรเจกงายๆ ที่ชื่อ า hello ขึ้นมาซึ่งภายในโปรเจกนี้จะมีแคไฟล ลักที่คำ ั่ง
cordova รางมาใ เพื่อทด อบการใชงานคำ ั่งและการตั้งคาโปรเจกแบบงายๆ
ขั้นตอนแรก ทำการ รางโปรเจกชื่อ hello โดยใชคำ ั่ง cordova create hello
ขั้นตอนที่ 2 เชาไปในโฟลเดอร hello โดยใชคำ ั่ง cd hello จากนั้นตร จ อบ ามี Platform ถูกติด
ตั้ง รือยัง และมี Platform ไ นที่ใชไดบาง

30. นา 28
กรณีไมมีคาอยูใน Installed platforms แบบในตั อยางนี้เราตองทำการ
เพิ่ม Platform เขาไปโดยเราตองทำตร จ อบกอน าในโฟลเดอร
platforms ที่อยูใน ADT ­> sdk ­> platforms มีโฟลเดอรยอยของ
Platform อยูจริงๆ จึงจะ ามารถเพิ่มเขาไปได โดยการเพิ่ม Platform
เขาไปก็ ามารถทำไดโดยใชคำ ั่ง cordova platform add android
ขั้นตอนที่ 3 ทด อบการใชงาน ซึ่ง ามารถทด อบได ลายรูปแบบ คือ
1) เปด Web server แล เขาผาน http://localhost:8000 ผานคำ ั่ง cordova serve

31. นา 29
2) ใช Ripple Emulator ผานคำ ั่ง ripple emulate

32. นา 30
3) ใชกับอุปกรณจริง ผานคำ ั่ง cordova run android
< Config.xml >
ไฟล Config.xml เปนไฟล ลักที่ใชในการตั้งคา โดยตั มันจะถูกตั้งคา ลักๆใ กับระบบของ
Application ในแตละ platform เอาไ เชนตั้งคา Application ใ ทำงานแบบแน นอนเทานั้น (
บรรทัดที่ 13)

33. นา 31
Plug­in :
Cordova นั้นมี นที่แยกออกจากกันเปน นเ ริมเล็กๆที่เรียก า Plug­in เพื่อค าม ะด ก
ในการเพิ่ม รือลดค าม ามารถของแตละ Application ดังนั้นการเรียกใชงานโมดูลของอุปกรณ
เคลื่อนที่ก็ ามารถทำไดผานทาง Plug­in เชนเดีย กัน โดย ามารถ าดู Plug­in ที่ ามารถใชชื่อ
Package ในการติดตั้งไดเลย เนื่องจาก Plug­in ลงทะเบียนไ แล ไดจากเ ็บไซต
http://plugins.cordova.io
< Install Plug­in >
การติดตั้ง Plug­in ทำไดโดยใชคำ ั่ง cordova plugin add <PluginPackageName รือ
Repository> เชน cordova plugin add org.apache.cordova.battery­status
< Uninstall Plug­in >
ิธีถอนการติดตั้ง Plug­in ทำไดโดยใชคำ ั่ง cordova plugin remove <PluginPackageName>
เชน cordova plugin remove org.apache.cordova.battery­status
Documentation :
นักพัฒนา ามารถเขาไปดูเอก ารการพัฒนาไดที่เ ็บไซต
http://cordova.apache.org/docs/en/ จากนั้นเลือก Version ของ Cordova ที่ใช โดยจะดูจาก
Version ลักในการพัฒนา เนื่องจากบาง Version ใชคำ ั่งไมเ มือนกัน แมตองการผลลัพทแบบ
เดีย กัน โดยในเอก ารนี้จะบอก ิธีการใชงาน และคำ ั่งพื้นฐานไดเปนอยางดี

34. นา 32
Adobe® PhoneGap™ Build :
ลังจากที่ทดลอง ราง Application แล ก็ถึงขั้นตอนที่จะ
ทดลองใชงาน Adobe® PhoneGap™ Build ซึ่งเปนเครื่องมือที่ช ย
Build Mobile Application แบบ cross­platform ที่ทำงานบน
ระบบที่เรียก า Cloud­computing โดยเราจะ Upload ไฟล Zip
ของโปรเจกขึ้นไป รือใช Git ซึ่งเปน Version Control เพื่อ Push ไปที่ Repository ของ
Github.com แล ใ PhoneGap™ Build ไปเรียกใชไฟล ซึ่งตั PhoneGap™ Build ามารถ Build
ใน platform iOS, Android™, Windows® Phone, Blackberry® 5/6/7 และ webOS ไดโดยใช
Source Code ชุดเดีย กัน
เรา ามารถ Build Application จาก PhoneGap™ Build ไดโดยมีเงื่อนไขคือ Application
ที่ รางมานั้น ากเปน Public Application รือ Open Source ที่ถูกเก็บไ ใน Repository ของ
Github นั้นจะไมจำกัดจำน นของ Application ที่จะ Build แต ากเปน Private Application และ
ใชงาน Free plan จะ Build ได 1 Application แตถาเปน Private Application และใช Paid Plan
รือเปน มาชิกของ Adobe Creative Cloud จะ ามารถ Build ไดถึง 25 Applications (มีคาใช
จายเดือนละ $9.99) โดยทุกรายการจะไมจำกัด Collabolator ที่จะใ ทดลองใช รือพัฒนาร มกัน
ผานทางเ ็บไซต https://build.phonegap.com

35. นา 33
< Signing keys >
ระบบ Signing key เปนการรัก าค ามปลอดภัยใ กับ Application แบบ นึ่ง โดยระบบนี้ใช
ตร จ อบ าผูพัฒนามี ิทธิ์การพัฒนา รือไม และ Application ที่พัฒนามานั้นเปนมาจากตั นัก
พัฒนาจริงๆ ไมไดถูกผูไม ังดีแอบเปลี่ยนแปลง Application ทำใ มีค ามไมปลอดภัย จึงตองมีการ
Signed เพื่อรับรอง Application โดย ิธีการ Signing key คือ ากมี Account ของ AdobeID รือ
Github อยูแล ก็ ามารถลงชื่อเขาใช PhoneGap™ Build ไดเลย แต ากไมมีก็ทำการ มัคร มาชิก
AdobeID กอนจึงลงชื่อเขาใช
ลังจากลงชื่อเขาใชแล ใ คลิ๊กที่รูปคน
จากนั้นไปที่ Edit account

36. นา 34
­ iOS
iOS appliction ตองการใช Developer certificate เพื่อยืนยันตั ตนของ Developer
ตั้งแตในขั้นตอนการ Build โดยที่ตองการเปนนักพัฒนา Application ใน iOS ตอง มัคร มาชิกแบบ
iOS Developer ไ กับ Apple แล ทาง Apple จะออกใบอนุญาตใ โดยใบอนุญาตนี้มีคาธรรมเนียม
ในการ มัคร มาชิกปละ $99
การเพิ่ม key นั้นตองนำใบอนุญาตออกมาจากบัญชีผูใชของ Apple iOS Developer โดยใชไฟลที่
เรียก า certificate (.p12), profile (.mobileprovision) และร ั ผานที่เขาร ั certificate ไ
โดยไปที่ iOS > add a key > เลือกไฟล cerificate และ profile > กดที่รูปกุญแจ > ใ ร ั ผาน

37. นา 35
­ Android
การ Build Android Application นั้นไมไดบังคับการ Signing key แตอาจจะเกิด
ปญ าในกรณีที่ตองการจะทำ Application ใน ลาย Version ซึ่งจำเปนตองใช Signing key เพื่อ
ยืนยัน า Application ที่ถูกแกไขเกิดขึ้นจากตั ผูพัฒนา Application จริงๆ และไมไดถูกดักแกไข
โดยผูไม ังดี และการนำ Application ขึ้นไปบน Google Play Store มีคาธรรมเนียม ำ รับนัก
พัฒนาอยูที่ $25 ชำระเพียงครั้งเดีย โดยมี ิธีการทำใบรับรองดังนี้

38. นา 36
< How to Build >
Source Code ที่จะใชในการ Build ากเปน Public Application ตองเปนโปรเจกที่อยูใน
Repository ของ Github เทานั้น แต ากในกรณีที่เปน Private Application ามารถเลือกได าจะ
Upload ผาน Zip ไฟล รือผาน Repository ของ Github (แตแบบ Private มีขอจำกัดเรื่องจำน น
Application)

39. นา 37
ากตองการใชขอมูลจาก Repository ใน
Github ก็ ามารถกดปุมรูปตั v เพื่อ า
Repository ที่อยูใน Account ที่ลงชื่อเขา
ใช รือใ URL ของ Repository ไดเลย
แต ากตองการใช Zip ไฟลก็ใ ไปที่ไฟลเด
อรโปรเจกของ Cordova จากนั้นก็เลือก
ไฟลทั้ง มดแล ทำการ Zip
ทดลองโดยกด Enable debugging และ Enable Hydration จากนั้นกดปุม Ready to build

40. นา 38
iOS ากไมมี Key จะไม ามารถ Build ได ดังนั้นจึงตองเลือก Key ใ กับ iOS Compiler แตตั อื่น
นั้นจะยังคงทำงานไดแมไมมีการ Signing key ลังจากเลือกเ ร็จแล ก็กด Rebuild

41. นา 39
< Remote Debugging >
ค ามเจงอีกอยางของ PhoneGap™
Build คือ ามารถทำ Remote Debugging ซึ่งก็
คือการ Debug โดยไมตองเ ียบอุปกรณเขากับ
เครื่องนักพัฒนา แตเพียงแคติดตั้ง Debug
Application ลงไปแล เชื่อมตอเขากับระบบ
อินเทอรเน็ต ก็ ามารถ Debug ไดแล โดยผาน
ทาง Web Application ที่เรียก า Weinre โดย
การใช Application อานคา QR code จากนั้นติดตั้ง Application ลงไปบนอุปกรณเคลื่อนที่ แล
เขาใชการ debug จากเ ็บไซต https://build.phonegap.com

42. นา 40
ทดลองใชคำ ั่ง Alert ขอค ามขึ้นมาแ ดง

43. นา 41
Workshop :
< เกมเปา ยิง ฉุบ >
เกมเปลา ยิง ฉุบมีกติกางายๆคือ กระดา ชนะ คอน, คอน ชนะ กรรไกร, กรรไกร ชนะ กระดา เรา
จะมาลองเขียนเกมนี้ขึ้นมา
1. ั่ง phonegap create Pao­Ying­Chup เพื่อ รางโปรเจกของ PhoneGap ขึ้นมา
2. ั่ง cd Pao­Ying­Chup เพื่อเขาไปในโฟลเดอรของโปรเจก
3. ั่ง cordova platform add android เพื่อเพิ่ม Platform android เขาไปในโปรเจก
4. ั่ง ripple emulate เพื่อจะลองอุปกรณ จากนั้นระบบจะเดง Web
browser ของอุปกรณเ มือนใ เอง
5. ในโฟลเดอร www เราจะทำการพัฒนา Application ที่นี่
6. ในโฟลเดอรยอยของ www เตรียมไฟลภาพไปไ ในโฟลเดอร img
7. เราจะแกไขไฟล index.html (เพื่อค าม ะด กจะเขียนโคดทั้ง มดที่ใชในไฟลนี้)

44. นา 42
ลอจิกของ Pao­Ying­Chup Game เอาคาที่เปนไปไดเก็บไ ในตั แปร result จากนั้นทำการ ุมแล
เอามาเทียบกับที่ผูใชเลือก
ามารถดู SourceCode ไดที่ https://github.com/Aorjoa/Pao­Ying­Chup
เปลี่ยน Logo :
ขนาดของภาพที่จะถูกใชในอุปกรณเคลื่อนที่มี ลายขนาด เพื่อค าม ะด กเราจะทำแคขนาด
เดีย แล ใชเ ็บ http://makeappicon.com ในการแปลงใ เปน ลายขนาดโดยเลือกไฟลตนฉบับลง
ไป จากนั้นรอใ ระบบประม ลผล

45. นา 43
ไปที่ Tab Android จากนั้นก็ Download ไฟลภาพขนาดตางๆมา แล แกไขไฟล ic_launcher.png
เปน icon.png แล เอาไฟลไปเปลี่ยนไดโดยไปที่ Pao­Ying­Chup ▸ platforms ▸ android ▸ res
▸ ดูจากขนาดไฟลที่ Download มา าจะอยูในโฟลเดอรไ น (กรอบ ี ม)
เปลี่ยนชื่อ Application :
ามารถทำการเปลี่ยนชื่อ Application ไดโดยไปที่ Pao­Ying­Chup ▸ www ▸ config.xml
จากนั้นเปลี่ยนคาตามที่ตองการ

46. นา 44
Deploy to Store :
< Google Play Store >
กอนจะนำ Application ขึ้น Store เราตอง Signing key กอน ซึ่ง ิธีแบบเดิม ก็ไมเ มาะ
เพราะตองใชงาน Command­Line ที่ซับซอน เราจึงจะเปลี่ยนมาใช Eclipse IDE รุนดัดแปลงมาใช
งาน Android รือ Android Developer Tool(ADT) มาใชงานเพื่อค าม ะด ก และลดโอกา เกิด
ขอผิดพลาด (นั่นเปน าเ ตุที่ในตอนแรกเราจึงไมโ ลดเฉพาะตั SDK ของ Android มา)
จากนั้นกด Finish เพื่อ import โปรเจกเขามา
แล คลิ๊กข าที่โปรเจก
แล ทำการ Signing key APK โดย รางร ั ในการเปดใช Signing Key

47. นา 45
จากนั้นตั้ง Allais และร ั ผานของ Signing key (ตองจำร ั ผานที่ใชไ ด ย)
ลังจากที่กด Finish จะไดไฟลใน Target ที่เราตั้งไ คือไฟล Signing key เพื่อยืนยันตั ตน และไฟล
APK เพื่อใช Upload ไปที่ Store

48. นา 46
จากนั้นไปที่ https://play.google.com/apps/publish แล ลงชื่อเขาใชงาน Play Store ในระบบ
ของผูพัฒนา (ตองเปนบัญชีผูใชที่ มัครเปนผูพัฒนาและมีการจายคาธรรมเนียมเพื่อยืนยัน ิทธิ์แล )
เพิ่ม Application ลงใน Play Store
1) กดปุม + Add new application
2) เลือกภา า และเพิ่มชื่อที่จะใชเรียก Application แล กด Upload APK
3) ใน Tab APK และ Tab ยอย Production ใ เลือก Upload your first APK to production

49. นา 47
4) เลือกไฟล APK
5) ใน Tab Store Listing ใ กำ นดคำบรรยายของ Application

50. นา 48
เพิ่มรูป Screen Shot (ใน นของ Phone ตองมีอยางนอย 2 รูป)
รูป icon แบบ hi­resolution ขนาด 512 x 512

51. นา 49
กำ นด Category าเปน Application แบบไ น และ Rating บอก าผูใชงานค รเปนใคร
ขอมูลนักพัฒนา
นโยบายการใชงาน (ถายังไมมีก็เลือก Not submitting a privacy)
เมื่อมีการเปลี่ยนแปลงขอมูลใ กด Save
6) ใน Tab Pricing & Distribution กำ นดการกระจาย Application และราคา

52. นา 50
เลือก ามารถโ ลดไดทุกประเท
อานขอตกลงและยินยอม
7) ตร จ อบค ามเรียบรอยของ Application เมื่อมีการเปลี่ยนแปลงตองกดปุม Save ทุกครั้งเพราะ
ระบบจะตร จ อบขอมูลที่ยังไมเ ร็จ มบูรณใ เราไดด ย
ากปุมที่มุมบนซายเปน Draft ใ คลิ๊กปุม Draft จากนั้นเลือก Why can’t I publish? ระบบจะบอก
าเรายังขาดขอมูลอะไรที่จำเปนไปบาง
และ ากมุมบนข าขึ้นเปน Ready to publish ใ กด Publish this app
ลังจากนั้นรอประมาณ 4­5 ชั่ โมง Application ที่ งขึ้นไปก็จะปรากฏ
ถานะ Published และพรอมโ ลดใน Play Store
https://play.google.com/store/apps/details?id=com.iaor.app.paoyingchup

53. นา 51
Update Application ใน Play Store
การเปลี่ยนแปลง Application นั้นเราจำเปนตองมี Signing key เพื่อยืนยัน ิทธิ์เรา ซึ่งไดมาจากขั้น
ตอนการ ราง Signing key ซึ่งเราตองเก็บไ ใ ดี และตองจำร ั ผานที่ใชไ ด ย
1) แกไขไฟล Application
2) ในโฟลเดอร platforms ­> android แกไขไฟล AndroidManifest.xml แล เปลี่ยนรุนของโคด
และรุนของ Application

54. นา 52
3) เปด Eclipse IDE ขึ้นมา ากยังไมมีโปรเจกอยูก็ใ Import มาใช
จากนั้นกด Finish เพื่อ import โปรเจกเขามา
แล คลิ๊กข าที่โปรเจก แล ทำการ Signing key APK

55. นา 53
ใชร ั ผาน Signing Key ที่ รางจากรุนแรก
จากนั้นก็เลือกที่ างของไฟล APK ตั ใ ม

56. นา 54
4) จากนั้นไปที่เ ็บไซต https://play.google.com/apps/publish
คลิ๊กที่ตั Application Pao­Ying­Chup 1.0.0 แล ไปที่ Tab APK
ระบบจะแ ดงขอมูลบอก ารุนของโคดคือ Version 10000 นรุนของ Application คือ Version
1.0.0 จากนั้นเราจะทำการแกไขโดยมีขั้นตอนคือ
­ กดปุม Upload new APK

57. นา 55
กด Publish now to Production
ังเกตุ า Version ของ Application ไดเปลี่ยนไปแล
Summary :
ขอแ ดงค ามยินดีด ย ากคุณอานตั้งแตตนมาถึงตอนนี้คุณจะ ามารถ ราง Application
จาก PhoneGap รือ Cordova ไดแล ที่เ ลือก็เปนขั้นตอนการประยุกตใชงาน ิ่งที่ค รอานเพิ่ม
เติมคือ HTML, JavaScript และ CSS ร มถึงการ Config ตางๆเพิ่มเติมก็ ามารถ าไดทั่ ไปตาม
อินเทอรเน็ต ากมีขอ ง ัย รือเ นอแนะก็ ามารถพูดคุยกันไดทาง E­Mail :
Bhuridech@gmail.com ทาง Blog ที่ http://aorjoa.blogspot.com รือทางเ ็บไซตที่
http://www.i­aor.com
Wish you have a good practics :)

58. นา 56
บรรณานุกรม
1) PhoneGap,http://en.wikipedia.org/wiki/PhoneGap
2) Adobe เขาซื้อ Nitobi, บริจาค PhoneGap เขา Apache Foundation, https://www.
blognone.com/news/26793/adobe­เขาซื้อ­nitobi­บริจาค­phonegap­เขา
­apache­foundation
3) PhoneGap: Building & Testing Mobile Apps with Web
Standards,https://www.youtube.com/watch?v=u6YBDqIFlvg
4) Mobile: Native Apps, Web Apps, and Hybrid Apps,
http://www.nngroup.com/articles/mobile­native­apps
5) Google Gears (software),http://en.wikipedia.org/wiki/Gears_(software)
6) ั ดี Google Chrome 12.0 ลากอน Google Gears,
http://www.oknation.net/blog/itpro/2011/06/08/entry­1
7) Introducing PhoneGap Emulation,
http://phonegap.com/blog/2012/08/10/introducing­phonegap­emulation
8) ขอ ิธีอัพแอพขึ้น google play store ด ยครับ,
http://www.thaiandroidphone.com/thread­35254­1­1.html
9) John M. Wargo,PhoneGap Essentials,ISBN 978­0­321­81429­6