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 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

หนา 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

หนา 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 มีหนาท่ีแสดงผล

ขอมูลในลักษณะของเว็บ โดยเรียกใช 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 จะเก็บไฟลของเว็บท่ีถูกพัฒนาไวในหนวยความจำ

หนา 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 (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 ทำใหไมจำเปน

หนา 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

หนา 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

ไดผาน Command­line โดยใน 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

ไดผาน Command­line โดยในระบบปฏิบัติการ 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 เพื่อใหระบบเรียกใชไดใน Command­line โดยจะต้ังคาผานตัวแปร $PATH ดังน้ี

export PATH=/Users/dekcom/Downloads/ADT/sdk/tools:$PATH export PATH=/Users/dekcom/Downloads/ADT/sdk/platform­tools:$PATH

หนา 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

หนา 18

2) ไปท่ี Tab Advance > เลือก Environment Variables

3) ต้ังคา System Variables > เลือก Variable ชื่อ Path > กด Edit > เพิ่มคาตำแหนงของ SDK

เขาไปโดยใช ; ค่ัน (ในตัวอยางคือ C:\android\android­sdk­windows\platform­tools) > OK

หนา 19

3) Node.js

สามารถ Donwload ไดท่ีเว็บไซต http://www.nodejs.org แลวกดไปท่ีปุม Install

ระบบก็จะทำการเลือกไฟลติดต้ังท่ีเหมาะสมกับเคร่ืองของผูติดต้ัง และทำการ Donwload ให

หลังจากน้ันก็ทำการติดต้ัง Node.js ท่ีถูก Download มาแลวติดต้ังลงในเครื่อง

หนา 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 ท่ีจะทำการติดต้ัง

หนา 21

Restart Terminal/Command Prompt แลวลองใชงาน cordova

5) PhoneGap command­line 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 หรือติดต้ัง Plug­in

ของ Node.js ท่ีช่ือ ripple­emulator จึงจะใชงานได

ซ่ึงสามารถติดต้ังไดโดยไปท่ี

http://emulate.phonegap.com และทำตามข้ัน

ตอนดานขวามือน้ี

หนา 23

วิธีการใชก็ทำไดโดย การไปท่ีหนา Website ท่ีเรา

ตองการ > คล๊ิกเมาสดานขวา > Emulator >

Enable > เลือก Apache Cordova (2.0.0)

หนา 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 น้ีมาชวย โดยเราสามารถท่ีจะติดต้ังแค

หนา 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 ในโทรศัพทใหมอีกดวย

หนา 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 ในโปรเจก

หนา 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 ไหนท่ีใชไดบาง

หนา 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

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 ใชคำส่ังไมเหมือนกัน แมตองการผลลัพทแบบ

เดียวกัน โดยในเอกสารน้ีจะบอกวิธีการใชงาน และคำส่ังพื้นฐานไดเปนอยางดี

หนา 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

หนา 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 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 (เพื่อความสะดวกจะเขียนโคดท้ังหมดท่ีใชในไฟลน้ี)

หนา 42

ลอจิกของ Pao­Ying­Chup Game เอาคาท่ีเปนไปไดเก็บไวในตัวแปร result จากน้ันทำการสุมแลว

เอามาเทียบกับท่ีผูใชเลือก

สามารถดู SourceCode ไดท่ี https://github.com/Aorjoa/Pao­Ying­Chup

เปลี่ยน Logo :

ขนาดของภาพท่ีจะถูกใชในอุปกรณเคล่ือนท่ีมีหลายขนาด เพื่อความสะดวกเราจะทำแคขนาด

เดียวแลวใชเว็บ http://makeappicon.com ในการแปลงใหเปนหลายขนาดโดยเลือกไฟลตนฉบับลง

ไป จากน้ันรอใหระบบประมวลผล

หนา 43

ไปท่ี Tab Android จากน้ันก็ Download ไฟลภาพขนาดตางๆมา แลวแกไขไฟล ic_launcher.png

เปน icon.png แลวเอาไฟลไปเปล่ียนไดโดยไปท่ี Pao­Ying­Chup ▸ platforms ▸ android ▸ res

▸ ดูจากขนาดไฟลท่ี Download มาวาจะอยูในโฟลเดอรไหน (กรอบสีสม)

เปลี่ยนช่ือ Application :

สามารถทำการเปล่ียนช่ือ Application ไดโดยไปท่ี Pao­Ying­Chup ▸ www ▸ config.xml

จากน้ันเปล่ียนคาตามท่ีตองการ

หนา 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

หนา 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 แบบ hi­resolution ขนาด 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

หลังจากน้ันรอประมาณ 4­5 ช่ัวโมง 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 Pao­Ying­Chup 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 ตางๆเพิ่มเติมก็สามารถหาไดท่ัวไปตาม

อินเทอรเน็ต หากมีขอสงสัยหรือเสนอแนะก็สามารถพูดคุยกันไดทาง E­Mail :

Bhuridech@gmail.com ทาง Blog ท่ี http://aorjoa.blogspot.com หรือทางเว็บไซตท่ี

http://www.i­aor.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­เขา

­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