phonegap book
DESCRIPTION
PhoneGap & Cordova book in Thai http://aorjoa.blogspot.comTRANSCRIPT
PhoneGapCordova&
หนังสือสอนพื้นฐาน
http://aorjoa.blogspot.com
Bhuridech Sudsee
License
สารบัญ
เรื่อง หนา 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 commandline interface 20
PhoneGap commandline interface 21
Ripple Emulator (PhoneGap Emulator) 22
PhoneGap Developer Application 24
Basic knowledge 26
Plugin 31
Documentation 31
Adobe® PhoneGap™ Build 32
Workshop : PaoYingChup 41
Deploy to Store 44
บรรณานุกรม 56
หนา 1
Introduction :
PhoneGap ถูกสรางโดยบริษัท Nitobi เมื่อป 2008 ภายในคาย iPhoneDevCamp โดย
Brock Whitten และ Rob Ellis เพื่อท่ีจะสรางโปรเจกการทำงานแบบ crossplatform mobile
developement แบบงายๆข้ึนมา [1] (crossplatform คือการไมข้ึนอยูกับระบบ เชนเขาเว็บ
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 ท่ีรองรับหรือท่ีเรียกวา devicespecific languages เชน ใชภาษา
Android/Java NDK (Syntax คลายกับ Java มาก) ในการพัฒนา application สำหรับอุปกรณท่ี
ทำงานบนระบบปฏิบัติการ Android แตฝงของ Apple ใชภาษา ObjectiveC ในการพัฒนา
Application สำหรับระบบปฏิบัติการ iOS เปนตน จะเห็นไดวา Native application คือการจำกัด
ระบบในการพัฒนาวาตองสรางจาก Platform ท่ีกำหนดไวใหเทาน้ัน ซ่ึงขอดีของ application เหลา
น้ีคือสามารถเขาถึง Application Programming Interface (API) ไดดีกวา ปรับแตง Source code
หนา 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 ซ่ึงสามารถ
หนา 3
ประกอบเขากับ JS เพื่อโปรแกรมการทำงาน Event ตางๆ และ CSS เพื่อปรับแตงใหสวยงามไดงาย
อีกท้ังยังสามารถใชโคดชุดเดียวกันในการแปลงเปน Application ในหลาย Platform ซ่ึงไดเปรียบ
Native application อยางมาก ลักษณะการทำงานของ Application ประเภทน้ีคลายกับการทำงาน
ของ Mobile web application แตสามารถทำงานโดยไมตองเช่ือมตอกับอินเทอรเน็ต สามารถติดต้ัง
ลงบนอุปกรณและสามารถขายท่ี Store ของแตละระบบไดนอกจากน้ียังสามารถเรียกใช API ในการ
เขาถึงอุปกรณเชนกลอง ไมโครโฟน และฟเจอรตางๆไดโดยขอ Permission แคข้ันตอนการติดต้ัง
Application แตก็มีขอเสียคือโดยท่ัวไปแลวความเร็วจะนอยกวา Native application แตหากจะ
เทียบกับความสะดวกในการพัฒนาแลวก็ถือวาคุมคาหากจะแลกกับความเร็วท่ีเสียไป[4] และถาหาก
ไมใช Application เกมหรือประมวลผลกราฟฟกท่ีตองใชการประมวลผลสูงก็ไมเห็นความแตกแตงกัน
มากนัก.
หนา 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 ได
หนา 5
How PhoneGap works? :
การทำงานของ PhoneGap เปนการนำเอาไฟล HTML , JS และ CSS ท่ีเราไดมาจากการ
เขียน Web application มาหอหุมดวย Web View ซ่ึงเปนกลไกการทำงานของ Native
application (จึงเปนเหตุผลท่ีวาทำไมตองติดต้ัง SDK ลงไปดวย) ซ่ึง Web View มีหนาท่ีแสดงผล
ขอมูลในลักษณะของเว็บ โดยเรียกใช Buildin 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 จะเก็บไฟลของเว็บท่ีถูกพัฒนาไวในหนวยความจำ
หนา 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 ตำแหนงทางภูมิศาสตร
หนา 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 (Serverside language) เชน PHP, ASP รวมดวยดวยเน่ืองจาก
ขอมูลไมสามารถเก็บในฝง Client เพราะความสามารถของภาษาฝง Client (Clientside language)
เชน HTML, JavaScript ทำใหมีความตองการเช่ือมตอกับอินเทอรเน็ต เพื่อเรียกใช Server อยูตลอด
เวลาทำให Server และเครือขายของผูใหบริการท่ีมีทรัพยากรไวบริการจำกัดเกิดเหตุการณ Server
ลมได จึงไดมีการพัฒนากระบวนการเก็บขอมูลไวในฝง Client เพื่อใหลดการเช่ือมตอกับ Server และ
ทำใหสามารถใชงานโดยไมตองเช่ือมตอกับอินเทอรเน็ตได จึงไดมีการพัฒนา Google Gears ข้ึนมาซ่ึง
ภายใน Google Gears มี Clientside SQL database โดยใชฐานขอมูลท่ีมีช่ือวา SQLite สำหรับ
เก็บขอมูลตางๆ ไวท่ีเครื่องเรา และมี JavaScript API ใหเรียกใชงานผาน JavaScript ทำใหไมจำเปน
หนา 8
ตองตออินเทอรเน็ตตลอดเวลา และยังเขาถึงขอมูลไดเร็วกวาเพราะฐานขอมูลอยูในเครื่องของเราเอง
และในวันท่ี 19 กุมภาพันธ 2010 Google ก็ประกาศเลิกสนับสนุน Google Gears[5] และถูกถอด
ออกจาก Google Chrome ต้ังแตรุน 12.0.742.91 Stable[6] แตก็มีการเพิ่มคุณสมบัติของ HTML5
เพื่อใหรองรับ Clientside 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
หนา 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
หนา 10
หลังจากท่ีได Download มาเรียบรอยแลวก็ทำการติดต้ัง JDK ลงไป
หลังจากทำการติดต้ังแลวก็จะทำการต้ังคา Evironment เพื่อใหระบบปฏิบัติการสามารถเรียกใช JDK
ไดผาน Commandline โดยใน Mac OS X เรากำหนดคาของ $JAVA_HOME ตามข้ันตอนน้ี
หนา 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
หนา 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
หนา 13
หลังจากท่ีได Download มาเรียบรอยแลวก็ทำการติดต้ัง JDK ลงไป
หลังจากทำการติดต้ังแลวก็จะทำการต้ังคา Evironment เพื่อใหระบบปฏิบัติการสามารถเรียกใช JDK
ไดผาน Commandline โดยในระบบปฏิบัติการ Windows ตองทำงานต้ังคาตัวแปร PATH
1) Start menu > คนหาคำวา “environment” > เลือก Edit the system evironment
variables
หนา 14
2) ไปท่ี Tab Advance > เลือก Environment
Variables
3) ต้ังคา System Variables > เลือก Variable ชื่อ Path > กด Edit > เพิ่มคาตำแหนงของ JDK
เขาไปโดยใช ; ค่ัน (ในตัวอยางคือ C:\Program Files\Java\jdk.1.8.0_05\bin) > กดปุม OK
หนา 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
หนา 16
Mac OS X โดยในตัวไฟลท่ี Donwload มาจะมี Android SDK และ Eclipse IDE ซ่ึงถูกดัดแปลงมาใหมีเครื่องมือพื้นฐานในการพัฒนา Application บนระบบปฏิบัติการ Android เชน Android Developer Tools(ADT), Android Emulator มาใหแลว หลังจากท่ี Download มาก็ตองทำการ Unzip หรือแตกไฟลใหเรียบรอย และก็ตองทำการต้ังคา Evironment เพื่อใหระบบเรียกใชไดใน Commandline โดยจะต้ังคาผานตัวแปร $PATH ดังน้ี
export PATH=/Users/dekcom/Downloads/ADT/sdk/tools:$PATH export PATH=/Users/dekcom/Downloads/ADT/sdk/platformtools:$PATH
หนา 17
Windows
Download ตัว Zip Android SDK ไดจาก http://developer.android.com/sdk/index.html
เมื่อ Download เรียบรอยแลวให Unzip
ออกมาไวแลวนำเอาตำแหนงเก็บ
platformtools ไปเพิ่มในตัวแปร Path โดย
มีข้ันตอนดังน้ี
1) Start menu > คนหาคำวา “environment” >
เลือก Edit the system evironment variables
หนา 18
2) ไปท่ี Tab Advance > เลือก Environment Variables
3) ต้ังคา System Variables > เลือก Variable ชื่อ Path > กด Edit > เพิ่มคาตำแหนงของ SDK
เขาไปโดยใช ; ค่ัน (ในตัวอยางคือ C:\android\androidsdkwindows\platformtools) > OK
หนา 19
3) Node.js
สามารถ Donwload ไดท่ีเว็บไซต http://www.nodejs.org แลวกดไปท่ีปุม Install
ระบบก็จะทำการเลือกไฟลติดต้ังท่ีเหมาะสมกับเคร่ืองของผูติดต้ัง และทำการ Donwload ให
หลังจากน้ันก็ทำการติดต้ัง Node.js ท่ีถูก Download มาแลวติดต้ังลงในเครื่อง
หนา 20
4) Cordova commandline interface
ข้ันตอนน้ีเปนการติดต้ังคำส่ัง Cordova ซ่ึงเปนคำส่ังในการจัดการระบบของ
PhoneGap เชนการส่ัง Run Application การติดต้ัง Plugin ทำใหสามารถถูกเรียกใชไดใน
Commandline ตอไป และดังท่ีอธิบายไปต้ังแตตอนตนวาคำส่ัง 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 ท่ีจะทำการติดต้ัง
หนา 21
Restart Terminal/Command Prompt แลวลองใชงาน cordova
5) PhoneGap commandline interface
คำส่ัง phonegap และคำส่ัง cordova น้ันแมมีความใกลเคียงกันมากในรูปแบบการ
ใช แตในบางคำส่ังความสะดวกของการใชงานแตกตางกันไป เชนคำส่ัง phonegap serve น้ันมีระบบ
autoreload เพื่อตรวจสอบการเปล่ียนแปลงของไฟลแลวทำการเรียกซ้ำคำส่ัง phonegap serve ให
ใหมโดยท่ีเราไมตองทำเอง เพราะในคำส่ัง cordova serve น้ันไมสามารถทำได ซ่ึงวิธีการติดต้ังก็
คลายกัน และแนะนำใหลงท้ังสองคำส่ังควบคูกัน
หนา 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 หรือติดต้ัง Plugin
ของ Node.js ท่ีช่ือ rippleemulator จึงจะใชงานได
ซ่ึงสามารถติดต้ังไดโดยไปท่ี
http://emulate.phonegap.com และทำตามข้ัน
ตอนดานขวามือน้ี
หนา 23
วิธีการใชก็ทำไดโดย การไปท่ีหนา Website ท่ีเรา
ตองการ > คล๊ิกเมาสดานขวา > Emulator >
Enable > เลือก Apache Cordova (2.0.0)
หนา 24
แตเพื่อความสะดวกในการเรียกใชงานไดจาก Commandline ไดเลย ตองทำการติดต้ัง Node.js
Package ท่ีช่ือวา Rippleemulator โดยใชคำส่ัง sudo npm install g rippleemulator
จากน้ันทดสอบโดยเขาไปในโฟลเดอรท่ีมีโปรเจกของ 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 น้ีมาชวย โดยเราสามารถท่ีจะติดต้ังแค
หนา 25
Application กลางตัวเดียวกันแลวเปล่ียนแคใสในเปน Application ตัวอ่ืนท่ีเรากำลังพัฒนาอยู (ตัว
โคดเขียนดวย HTML+JS+CSS อยูแลว) การทำงานก็จะคลายกับ Ripple Emulator แตเปนการ
ทำงานบนอุปกรณจริง และมีขอเสียก็คือในปจจุบันน้ี (PhoneGap 3.5.00.20.4 | Cordova
3.5.00.2.4) ระบบ Autoreload (ระบบท่ีทำใหเราแกไขไฟลแลวตัว Application ถูกแกไขตามไป
ดวยอัตโนมัติ) มีแคในโปรเจก PhoneGap สวนในโปรเจก Cordova ยังตองรันคำส่ังใหมทุกครั้ง จึงไม
คอยเหมาะกับโปรเจก Cordova ดังน้ันขอแนะนำใหสรางโปรเจก PhoneGap เพราะสามารถใชงาน
ไดท้ัง PhoneGap CLI และ Cordova CLI (CLI > CommandLine 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 ในโทรศัพทใหมอีกดวย
หนา 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 (CommandLine 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 ใชแสดง Plugin ท้ังหมดในโปรเจก
cordova plugin add <Repository> ใชเพิ่ม Plugin ในโปรเจก
หนา 27
cordova plugin remove <PluginPackageName> ใชลบ Plugin ในโปรเจก
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 ไหนท่ีใชไดบาง
หนา 28
กรณีไมมีคาอยูใน Installed platforms แบบในตัวอยางน้ีเราตองทำการ
เพิ่ม Platform เขาไปโดยเราตองทำตรวจสอบกอนวาในโฟลเดอร
platforms ท่ีอยูใน ADT > sdk > platforms มีโฟลเดอรยอยของ
Platform อยูจริงๆ จึงจะสามารถเพิ่มเขาไปได โดยการเพิ่ม Platform
เขาไปก็สามารถทำไดโดยใชคำส่ัง cordova platform add android
ข้ันตอนท่ี 3 ทดสอบการใชงาน ซ่ึงสามารถทดสอบไดหลายรูปแบบ คือ
1) เปด Web server แลวเขาผาน http://localhost:8000 ผานคำส่ัง cordova serve
หนา 29
2) ใช Ripple Emulator ผานคำส่ัง ripple emulate
หนา 30
3) ใชกับอุปกรณจริง ผานคำส่ัง cordova run android
< Config.xml >
ไฟล Config.xml เปนไฟลหลักท่ีใชในการต้ังคา โดยตัวมันจะถูกต้ังคาหลักๆใหกับระบบของ
Application ในแตละ platform เอาไวเชนต้ังคา Application ใหทำงานแบบแนวนอนเทาน้ัน (
บรรทัดท่ี 13)
หนา 31
Plugin :
Cordova น้ันมีสวนท่ีแยกออกจากกันเปนสวนเสริมเล็กๆท่ีเรียกวา Plugin เพื่อความสะดวก
ในการเพิ่มหรือลดความสามารถของแตละ Application ดังน้ันการเรียกใชงานโมดูลของอุปกรณ
เคล่ือนท่ีก็สามารถทำไดผานทาง Plugin เชนเดียวกัน โดยสามารถหาดู Plugin ท่ีสามารถใชช่ือ
Package ในการติดต้ังไดเลย เน่ืองจาก Plugin ลงทะเบียนไวแลวไดจากเว็บไซต
http://plugins.cordova.io
< Install Plugin >
การติดต้ัง Plugin ทำไดโดยใชคำส่ัง cordova plugin add <PluginPackageName หรือ
Repository> เชน cordova plugin add org.apache.cordova.batterystatus
< Uninstall Plugin >
วิธีถอนการติดต้ัง Plugin ทำไดโดยใชคำส่ัง cordova plugin remove <PluginPackageName>
เชน cordova plugin remove org.apache.cordova.batterystatus
Documentation :
นักพัฒนาสามารถเขาไปดูเอกสารการพัฒนาไดท่ีเว็บไซต
http://cordova.apache.org/docs/en/ จากน้ันเลือก Version ของ Cordova ท่ีใช โดยจะดูจาก
Version หลักในการพัฒนา เน่ืองจากบาง Version ใชคำส่ังไมเหมือนกัน แมตองการผลลัพทแบบ
เดียวกัน โดยในเอกสารน้ีจะบอกวิธีการใชงาน และคำส่ังพื้นฐานไดเปนอยางดี
หนา 32
Adobe® PhoneGap™ Build :
หลังจากท่ีทดลองสราง Application แลว ก็ถึงข้ันตอนท่ีจะ
ทดลองใชงาน Adobe® PhoneGap™ Build ซ่ึงเปนเครื่องมือท่ีชวย
Build Mobile Application แบบ crossplatform ท่ีทำงานบน
ระบบท่ีเรียกวา Cloudcomputing โดยเราจะ 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
หนา 33
< Signing keys >
ระบบ Signing key เปนการรักษาความปลอดภัยใหกับ Application แบบหน่ึง โดยระบบน้ีใช
ตรวจสอบวาผูพัฒนามีสิทธ์ิการพัฒนาหรือไม และ Application ท่ีพัฒนามาน้ันเปนมาจากตัวนัก
พัฒนาจริงๆ ไมไดถูกผูไมหวังดีแอบเปล่ียนแปลง Application ทำใหมีความไมปลอดภัย จึงตองมีการ
Signed เพื่อรับรอง Application โดยวิธีการ Signing key คือหากมี Account ของ AdobeID หรือ
Github อยูแลวก็สามารถลงช่ือเขาใช PhoneGap™ Build ไดเลย แตหากไมมีก็ทำการสมัครสมาชิก
AdobeID กอนจึงลงช่ือเขาใช
หลังจากลงช่ือเขาใชแลว ใหคล๊ิกท่ีรูปคน
จากน้ันไปท่ี Edit account
หนา 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 > กดท่ีรูปกุญแจ > ใสรหัสผาน
หนา 35
Android
การ Build Android Application น้ันไมไดบังคับการ Signing key แตอาจจะเกิด
ปญหาในกรณีท่ีตองการจะทำ Application ในหลาย Version ซ่ึงจำเปนตองใช Signing key เพื่อ
ยืนยันวา Application ท่ีถูกแกไขเกิดข้ึนจากตัวผูพัฒนา Application จริงๆ และไมไดถูกดักแกไข
โดยผูไมหวังดี และการนำ Application ข้ึนไปบน Google Play Store มีคาธรรมเนียมสำหรับนัก
พัฒนาอยูท่ี $25 ชำระเพียงครั้งเดียว โดยมีวิธีการทำใบรับรองดังน้ี
หนา 36
< How to Build >
Source Code ท่ีจะใชในการ Build หากเปน Public Application ตองเปนโปรเจกท่ีอยูใน
Repository ของ Github เทาน้ัน แตหากในกรณีท่ีเปน Private Application สามารถเลือกไดวาจะ
Upload ผาน Zip ไฟลหรือผาน Repository ของ Github (แตแบบ Private มีขอจำกัดเรื่องจำนวน
Application)
หนา 37
หากตองการใชขอมูลจาก Repository ใน
Github ก็สามารถกดปุมรูปตัว v เพื่อหา
Repository ท่ีอยูใน Account ท่ีลงช่ือเขา
ใช หรือใส URL ของ Repository ไดเลย
แตหากตองการใช Zip ไฟลก็ใหไปท่ีไฟลเด
อรโปรเจกของ Cordova จากน้ันก็เลือก
ไฟลท้ังหมดแลวทำการ Zip
ทดลองโดยกด Enable debugging และ Enable Hydration จากน้ันกดปุม Ready to build
หนา 38
iOS หากไมมี Key จะไมสามารถ Build ได ดังน้ันจึงตองเลือก Key ใหกับ iOS Compiler แตตัวอ่ืน
น้ันจะยังคงทำงานไดแมไมมีการ Signing key หลังจากเลือกเสร็จแลวก็กด Rebuild
หนา 39
< Remote Debugging >
ความเจงอีกอยางของ PhoneGap™
Build คือสามารถทำ Remote Debugging ซ่ึงก็
คือการ Debug โดยไมตองเสียบอุปกรณเขากับ
เครื่องนักพัฒนา แตเพียงแคติดต้ัง Debug
Application ลงไปแลวเช่ือมตอเขากับระบบ
อินเทอรเน็ต ก็สามารถ Debug ไดแลวโดยผาน
ทาง Web Application ท่ีเรียกวา Weinre โดย
การใช Application อานคา QR code จากน้ันติดต้ัง Application ลงไปบนอุปกรณเคล่ือนท่ี แลว
เขาใชการ debug จากเว็บไซต https://build.phonegap.com
หนา 40
ทดลองใชคำส่ัง Alert ขอความข้ึนมาแสดง
หนา 41
Workshop :
< เกมเปา ยิง ฉุบ >
เกมเปลา ยิง ฉุบมีกติกางายๆคือ กระดาษ ชนะ คอน, คอน ชนะ กรรไกร, กรรไกร ชนะ กระดาษ เรา
จะมาลองเขียนเกมน้ีข้ึนมา
1. ส่ัง phonegap create PaoYingChup เพื่อสรางโปรเจกของ PhoneGap ข้ึนมา
2. ส่ัง cd PaoYingChup เพื่อเขาไปในโฟลเดอรของโปรเจก
3. ส่ัง cordova platform add android เพื่อเพิ่ม Platform android เขาไปในโปรเจก
4. ส่ัง ripple emulate เพื่อจะลองอุปกรณ จากน้ันระบบจะเดง Web
browser ของอุปกรณเสมือนใหเอง
5. ในโฟลเดอร www เราจะทำการพัฒนา Application ท่ีน่ี
6. ในโฟลเดอรยอยของ www เตรียมไฟลภาพไปไวในโฟลเดอร img
7. เราจะแกไขไฟล index.html (เพื่อความสะดวกจะเขียนโคดท้ังหมดท่ีใชในไฟลน้ี)
หนา 42
ลอจิกของ PaoYingChup Game เอาคาท่ีเปนไปไดเก็บไวในตัวแปร result จากน้ันทำการสุมแลว
เอามาเทียบกับท่ีผูใชเลือก
สามารถดู SourceCode ไดท่ี https://github.com/Aorjoa/PaoYingChup
เปลี่ยน Logo :
ขนาดของภาพท่ีจะถูกใชในอุปกรณเคล่ือนท่ีมีหลายขนาด เพื่อความสะดวกเราจะทำแคขนาด
เดียวแลวใชเว็บ http://makeappicon.com ในการแปลงใหเปนหลายขนาดโดยเลือกไฟลตนฉบับลง
ไป จากน้ันรอใหระบบประมวลผล
หนา 43
ไปท่ี Tab Android จากน้ันก็ Download ไฟลภาพขนาดตางๆมา แลวแกไขไฟล ic_launcher.png
เปน icon.png แลวเอาไฟลไปเปล่ียนไดโดยไปท่ี PaoYingChup ▸ platforms ▸ android ▸ res
▸ ดูจากขนาดไฟลท่ี Download มาวาจะอยูในโฟลเดอรไหน (กรอบสีสม)
เปลี่ยนช่ือ Application :
สามารถทำการเปล่ียนช่ือ Application ไดโดยไปท่ี PaoYingChup ▸ www ▸ config.xml
จากน้ันเปล่ียนคาตามท่ีตองการ
หนา 44
Deploy to Store :
< Google Play Store >
กอนจะนำ Application ข้ึน Store เราตอง Signing key กอน ซ่ึงวิธีแบบเดิม ก็ไมเหมาะ
เพราะตองใชงาน CommandLine ท่ีซับซอน เราจึงจะเปล่ียนมาใช Eclipse IDE รุนดัดแปลงมาใช
งาน Android หรือ Android Developer Tool(ADT) มาใชงานเพื่อความสะดวก และลดโอกาสเกิด
ขอผิดพลาด (น่ันเปนสาเหตุท่ีในตอนแรกเราจึงไมโหลดเฉพาะตัว SDK ของ Android มา)
จากน้ันกด Finish เพื่อ import โปรเจกเขามา
แลวคล๊ิกขวาท่ีโปรเจก
แลวทำการ Signing key APK โดยสรางรหัสในการเปดใช Signing Key
หนา 45
จากน้ันต้ัง Allais และรหัสผานของ Signing key (ตองจำรหัสผานท่ีใชไวดวย)
หลังจากท่ีกด Finish จะไดไฟลใน Target ท่ีเราต้ังไวคือไฟล Signing key เพื่อยืนยันตัวตน และไฟล
APK เพื่อใช Upload ไปท่ี Store
หนา 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
หนา 47
4) เลือกไฟล APK
5) ใน Tab Store Listing ใหกำหนดคำบรรยายของ Application
หนา 48
เพิ่มรูป Screen Shot (ในสวนของ Phone ตองมีอยางนอย 2 รูป)
รูป icon แบบ hiresolution ขนาด 512 x 512
หนา 49
กำหนด Category วาเปน Application แบบไหน และ Rating บอกวาผูใชงานควรเปนใคร
ขอมูลนักพัฒนา
นโยบายการใชงาน (ถายังไมมีก็เลือก Not submitting a privacy)
เมื่อมีการเปล่ียนแปลงขอมูลใหกด Save
6) ใน Tab Pricing & Distribution กำหนดการกระจาย Application และราคา
หนา 50
เลือกสามารถโหลดไดทุกประเทศ
อานขอตกลงและยินยอม
7) ตรวจสอบความเรียบรอยของ Application เมื่อมีการเปล่ียนแปลงตองกดปุม Save ทุกครั้งเพราะ
ระบบจะตรวจสอบขอมูลท่ียังไมเสร็จสมบูรณใหเราไดดวย
หากปุมท่ีมุมบนซายเปน Draft ใหคล๊ิกปุม Draft จากน้ันเลือก Why can’t I publish? ระบบจะบอก
วาเรายังขาดขอมูลอะไรท่ีจำเปนไปบาง
และหากมุมบนขวาข้ึนเปน Ready to publish ใหกด Publish this app
หลังจากน้ันรอประมาณ 45 ช่ัวโมง Application ท่ีสงข้ึนไปก็จะปรากฏ
สถานะ Published และพรอมโหลดใน Play Store https://play.google.com/store/apps/details?id=com.iaor.app.paoyingchup
หนา 51
Update Application ใน Play Store
การเปล่ียนแปลง Application น้ันเราจำเปนตองมี Signing key เพื่อยืนยันสิทธ์ิเรา ซ่ึงไดมาจากข้ัน
ตอนการสราง Signing key ซ่ึงเราตองเก็บไวใหดี และตองจำรหัสผานท่ีใชไวดวย
1) แกไขไฟล Application
2) ในโฟลเดอร platforms > android แกไขไฟล AndroidManifest.xml แลวเปล่ียนรุนของโคด
และรุนของ Application
หนา 52
3) เปด Eclipse IDE ข้ึนมา หากยังไมมีโปรเจกอยูก็ให Import มาใช
จากน้ันกด Finish เพื่อ import โปรเจกเขามา
แลวคล๊ิกขวาท่ีโปรเจก แลวทำการ Signing key APK
หนา 53
ใชรหัสผาน Signing Key ท่ีสรางจากรุนแรก
จากน้ันก็เลือกท่ีวางของไฟล APK ตัวใหม
หนา 54
4) จากน้ันไปท่ีเว็บไซต https://play.google.com/apps/publish
คล๊ิกท่ีตัว Application PaoYingChup 1.0.0 แลวไปท่ี Tab APK
ระบบจะแสดงขอมูลบอกวารุนของโคดคือ Version 10000 สวนรุนของ Application คือ Version
1.0.0 จากน้ันเราจะทำการแกไขโดยมีข้ันตอนคือ
กดปุม Upload new APK
หนา 55
กด Publish now to Production
สังเกตุวา Version ของ Application ไดเปล่ียนไปแลว
Summary :
ขอแสดงความยินดีดวย หากคุณอานต้ังแตตนมาถึงตอนน้ีคุณจะสามารถสราง Application
จาก PhoneGap หรือ Cordova ไดแลว ท่ีเหลือก็เปนข้ันตอนการประยุกตใชงาน ส่ิงท่ีควรอานเพิ่ม
เติมคือ HTML, JavaScript และ CSS รวมถึงการ Config ตางๆเพิ่มเติมก็สามารถหาไดท่ัวไปตาม
อินเทอรเน็ต หากมีขอสงสัยหรือเสนอแนะก็สามารถพูดคุยกันไดทาง EMail :
[email protected] ทาง Blog ท่ี http://aorjoa.blogspot.com หรือทางเว็บไซตท่ี
http://www.iaor.com
Wish you have a good practics :)
หนา 56
บรรณานุกรม
1) PhoneGap,http://en.wikipedia.org/wiki/PhoneGap
2) Adobe เขาซ้ือ Nitobi, บริจาค PhoneGap เขา Apache Foundation, https://www.
blognone.com/news/26793/adobeเขาซ้ือnitobiบริจาคphonegapเขา
apachefoundation
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/mobilenativeapps
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/entry1
7) Introducing PhoneGap Emulation,
http://phonegap.com/blog/2012/08/10/introducingphonegapemulation
8) ขอวิธีอัพแอพข้ึน google play store ดวยครับ,
http://www.thaiandroidphone.com/thread3525411.html
9) John M. Wargo,PhoneGap Essentials,ISBN 9780321814296