ลิขสิทธิ์ของ iCourse และ khaooat.com ใช้เพื่อประกอบการอบรม ห้ามท้าซ้้า ดัดแปลง เผยแพร่ หรือใช้เชิงพานิชย์ ติดต่อวิทยากรได้ที่ khaooat.com หรือโทร. 095-116-6995
AndroidApp
μμÔ´μÒÁ¢ŒÍÁÙÅ¢‹ÒÇÊÒÃ
http://khaooat.com/
http://programsdd.com/
https://www.facebook.com/ProgramsDD
http://khaooat.com/icourse/
AndroidApp
ÊÊÒúÑÞ
รูจัก PhoneGap 1
การตรวจสอบ System Type ของ Windows 3
การติดตั้ง Java 3
การติดตั้ง Eclipse 6
เริ่มตนการสราง Android Application 10
การติดตั้งและใชงาน PhoneGap 17
การสราง Icon Application 29
ลิขสิทธิ์ของ iCourse และ khaooat.com ใช้เพื่อประกอบการอบรม ห้ามท้าซ้้า ดัดแปลง เผยแพร่ หรือใช้เชิงพานิชย์ ติดต่อวิทยากรได้ที่ khaooat.com หรือโทร. 095-116-6995
AndroidApp
กฤษณพงศ เลิศบํารุงชัย ผูบรรยาย
1
AndroidApp
ÃÃÙŒ¨Ñ¡ PPhoneGap
PPhoneGap ¤×ÍÍÐäÃ
PhoneGap คือ เครื่องมือสําหรับพัฒนา Mobile Application ที่ชวยใหพัฒนา Application
บนสมารทโฟนไดงายโดยใช HTML5, Javascript หรือ CSS เพียงเราสามารถสรางเว็บไซตไดก็สามารถ
สรางแอพพลิเคชั่นได และยังสามารถทํางานขาม Platform ได เชน iOS, Android, Windows
Phone, BlackBerry, Symbian, webOS, และ bada
¡Ò÷íÒ§Ò¹¢Í§ PhoneGap
PhoneGap จะหอหุม (Wrap) สิ่งที่เราสรางขึ้นจาก HTML5, Javascript หรือ CSS ใหเปน
Application ที่สามารถทํางานไดในระบบปฏิบัติการตางๆ ของสมารทโฟน โดยPhoneGap มีรูปแบบ
การทํางาน 2 ลักษณะ ไดแก
PhoneGap Build เปนการสราง Application บนเว็บ build.phonegap.com เพียงสมัคร
AdobeID ก็สามารถหอหุม HTML5, Javascript หรือ CSS เปน .zip แลวอัพโหลดเพื่อ
Build เปน Application บน Platform ตางๆ ไดทันที แตจะมีขอจํากัดดานขนาดและ
จํานวนของ Application หากตองการขนาดและจํานวนเพิ่มตองเสียเงิน
ลิขสิทธิ์ของ iCourse และ khaooat.com ใช้เพื่อประกอบการอบรม ห้ามท้าซ้้า ดัดแปลง เผยแพร่ หรือใช้เชิงพานิชย์ ติดต่อวิทยากรได้ที่ khaooat.com หรือโทร. 095-116-6995
สราง Android Application จาก HTML5 ดวย PhoneGap
2
AndroidApp
PhoneGap Developer เปนการสราง Application โดยใชโปรแกรม Eclipse สามารถทํา
ไดโดยเขาไปดาวนโหลดเครื่องมือไดที่ phonegap.com แตจะมีความยุงยากกวา
PhoneGap Build เนื่องจากจะตองติดตั้งโปรแกรมหลายชนิด และมีการเขียนโคด ซึ่งขอดีก็
คือฟรี และสามารถสราง Application ไดไมจํากัดขนาดและจํานวน
กฤษณพงศ เลิศบํารุงชัย ผูบรรยาย
3
AndroidApp
¡¡ÒÃμÃǨÊͺ SSystem Type ¢¢Í§ WWindows
กอนที่จะติดตั้งเครื่องมือใดๆ ลงในคอมพิวเตอร จะตองตรวจสอบ System Type ของ
Windows กอนวาเปน 32 หรือ 64 บิต โดยคลิกที่ This PC Properties
จากรูปเปน Windows 8.1 Pro ที่มี System Type เปน 64 บิต ดังนั้นการติดตั้งเครื่องมือที่
มีใหเลือกระหวาง 32 กับ 64 บิต ก็ใหเลือกใหตรงกับ System Type
¡¡ÒÃμÔ´μÑé§ JJava
การสรางพัฒนา Application สําหรับแอนดรอยดจะพัฒนาภายใตการทํางานของ JAVA โดย
โปรแกรมที่ใชในการพัฒนา Application ก็คือ Eclipse ซึ่งกอนที่จะติดตั้ง Eclipse จะตองทําการ
ติดตั้ง JAVA กอน โดยมีขั้นตอนดังนี้
ลิขสิทธิ์ของ iCourse และ khaooat.com ใช้เพื่อประกอบการอบรม ห้ามท้าซ้้า ดัดแปลง เผยแพร่ หรือใช้เชิงพานิชย์ ติดต่อวิทยากรได้ที่ khaooat.com หรือโทร. 095-116-6995
สราง Android Application จาก HTML5 ดวย PhoneGap
4
AndroidApp
1. คลิกขวาที่ JDK 8 Update 40 แลวเลือก Extract Here
2. เขาไปที่โฟลเดอร JDK 8 Update 40 แลวดับเบิลคลิก JDK 8 Update 40 ตาม System
Type
3. คลิก Next
4. คลิก Next
กฤษณพงศ เลิศบํารุงชัย ผูบรรยาย
5
AndroidApp
5. รอสักครู
6. คลิก Next
7. รอสักครูขณะที่โปรแกรมกําลังติดตั้ง
8. คลิก Close
ลิขสิทธิ์ของ iCourse และ khaooat.com ใช้เพื่อประกอบการอบรม ห้ามท้าซ้้า ดัดแปลง เผยแพร่ หรือใช้เชิงพานิชย์ ติดต่อวิทยากรได้ที่ khaooat.com หรือโทร. 095-116-6995
สราง Android Application จาก HTML5 ดวย PhoneGap
6
AndroidApp
¡¡ÒÃμÔ´μÑé§ EEclipse
Eclipse เปนโปรแกรมสําหรับสราง Application สําหรับแอนดรอยด ซึ่งสามารถใชไดกับ
Windows 7 / 8 / 8.1 มีใหเลือกทั้ง 32 และ 64 บิต ดังนั้นตองเลือกใชใหตรงกับ System Type ดวย
โดยขั้นตอนการติดตั้งมีดังนี้
1. คลิกขวาที่ ADT Bundle Windows แลวเลือกคําสั่ง Extract Here
2. เขาไปที่โฟลเดอร ADT Bundle Windows x64 eclipse
3. ดับเบิลคลิก eclipse เพื่อเขาสูโปรแกรม
4. รอสักครูจะปรากฏหนาตาง Workspace Launcher ใหคลิก Browse เพื่อเลือกที่เก็บไฟล
5. คลิก OK
กฤษณพงศ เลิศบํารุงชัย ผูบรรยาย
7
AndroidApp
6. จะปรากฏหนาตาง Java - Eclipse
7. ไปที่ Windows Android SDK Manager
ลิขสิทธิ์ของ iCourse และ khaooat.com ใช้เพื่อประกอบการอบรม ห้ามท้าซ้้า ดัดแปลง เผยแพร่ หรือใช้เชิงพานิชย์ ติดต่อวิทยากรได้ที่ khaooat.com หรือโทร. 095-116-6995
สราง Android Application จาก HTML5 ดวย PhoneGap
8
AndroidApp
8. จะปรากฏหนาตาง Android SDK Manager ใหทําการเลือก Tools และ Android Version
ที่ตองการ โดยปกติโปรแกรมจะเลือกใหอัตโนมัติ (หากไมเลือกอัตโนมัติใหเลือก Android
Version 5.1 และ 4.4)
9. คลิก Install Packages
10. คลิก Accept License สังเกตวา
ดานซายมือจะตองขึ้นเครื่องหมาย
ถูกทั้งหมด
11. คลิก Install
กฤษณพงศ เลิศบํารุงชัย ผูบรรยาย
9
AndroidApp
12. Android SDK Manager กําลังดาวนโหลดเครื่องมือและ Android Version ที่เลือก ใน
ขั้นตอนนี้จะใชเวลา 2 – 3 ชั่วโมง แนะนําใหเชื่อมตออินเทอรเน็ตความเร็วสูง
13. คลิก OK
14. คลิก Close
15. ปดโปรแกรม Java – Eclipse แลวเปดขึ้นมาใหม
ลิขสิทธิ์ของ iCourse และ khaooat.com ใช้เพื่อประกอบการอบรม ห้ามท้าซ้้า ดัดแปลง เผยแพร่ หรือใช้เชิงพานิชย์ ติดต่อวิทยากรได้ที่ khaooat.com หรือโทร. 095-116-6995
สราง Android Application จาก HTML5 ดวย PhoneGap
10
AndroidApp
ààÃÔèÁμŒ¹¡¡ÒÃÊÌҧ AAndroid AApplication
1. เปดโปรแกรม Java – Eclipse
2. ไปที่ New Android Application Project
3. กําหนดรายละเอียดดังนี้
Application Name กําหนดชื่อ
แอพพลิเคชั่น
Project Name กําหนดชื่อโปรเจค
เหมือนกับชื่อแอพพลิเคชั่น
Package Name กําหนดแบบ
Reverse Domain Name เชน
com.khaooat.helloprogramsdd
กฤษณพงศ เลิศบํารุงชัย ผูบรรยาย
11
AndroidApp
4. คลิก Next
5. คลิก Next
6. คลิกเครื่องหมายถูกที่ Create Activity
7. คลิก Blank Activity
8. คลิก Next
9. คลิก Finish
ลิขสิทธิ์ของ iCourse และ khaooat.com ใช้เพื่อประกอบการอบรม ห้ามท้าซ้้า ดัดแปลง เผยแพร่ หรือใช้เชิงพานิชย์ ติดต่อวิทยากรได้ที่ khaooat.com หรือโทร. 095-116-6995
สราง Android Application จาก HTML5 ดวย PhoneGap
12
AndroidApp
10. จะปรากฏหนาตางสําหรับสราง Application
11. ไปที่ Windows Android Virtual Device Manager
กฤษณพงศ เลิศบํารุงชัย ผูบรรยาย
13
AndroidApp
12. จะปรากฏหนาตาง Android
Virtual Device (AVD)
Manager ใหคลิก Create
13. จะปรากฏหนาตาง Create new
Android Virtual Device (AVD)
ใหกําหนดคาดังนี้
AVD Name ตั้งชื่ออุปกรณ
Device เลือกอุปกรณหรือ
ขนาดหนาจอที่ตองการ
Target กําหนด Android Version ที่ตองการ แนะนํา Android 4.4.2
CPU/ABI กําหนดเปน ARM (armeabi-v7a)
Skin กําหนดเปน Skin with dynamic hardware controls
14. คลิก OK
ลิขสิทธิ์ของ iCourse และ khaooat.com ใช้เพื่อประกอบการอบรม ห้ามท้าซ้้า ดัดแปลง เผยแพร่ หรือใช้เชิงพานิชย์ ติดต่อวิทยากรได้ที่ khaooat.com หรือโทร. 095-116-6995
สราง Android Application จาก HTML5 ดวย PhoneGap
14
AndroidApp
15. จะปรากฏ Device ที่สรางขึ้น ใหคลิกที่ Device
16. คลิก Start
17. คลิก Launch
18. รอ 3 – 5 นาที
ปรากฏหนา
Lock Screen
19. แตะที่รูปกุญแจ
เพื่อทําการปลด
ล็อคหนาจอ
กฤษณพงศ เลิศบํารุงชัย ผูบรรยาย
15
AndroidApp
20. จะเขาสูหนา
Home ใหคลิก
เขาสูหนา Menu
21. ปดหนาตาง
Emulator
22. ปดหนาตาง
Android
Virtual Device
23. คลิกขวาที่โปรเจค เลือกคําสั่ง Run As Android Application
ลิขสิทธิ์ของ iCourse และ khaooat.com ใช้เพื่อประกอบการอบรม ห้ามท้าซ้้า ดัดแปลง เผยแพร่ หรือใช้เชิงพานิชย์ ติดต่อวิทยากรได้ที่ khaooat.com หรือโทร. 095-116-6995
สราง Android Application จาก HTML5 ดวย PhoneGap
16
AndroidApp
24. หลังจากเขาสูหนา Menu ใหคลิกที่ชื่อ Application ที่สรางขึ้น
25. จะปรากฏ Application โดยแสดงชื่อและขอความ Hello world! ใหทําการปดหนาตาง
Emulator
Note
หากไมสามารถเปดโปรแกรม Java – Eclipse ได ใหทําการติดตั้ง JDK กอน
หากไมสามารถ Create Android Virtual Device (AVD) ได ใหเขาไปติดตั้งเครื่องมือ และ
Android Version เพิ่มเติมที่ Android SDK Manager โดยติดตั้งเวอรชั่นลาสุดและเวอรชั่นที่
ตองการใชงาน
กฤษณพงศ เลิศบํารุงชัย ผูบรรยาย
17
AndroidApp
¡¡ÒÃμÔ´μÑé§áÅÐ㪌§Ò¹ PPhoneGap
1. แตกไฟล PhoneGap โดยคลิกขวาที่ PhoneGap 2.2 แลวคลิก Extract Here
2. เขาไปที่โฟลเดอร
Phonegap 2.2 lib
android จะพบโฟลเดอร
xml
3. ทําการคัดลอกโฟลเดอร
xml โดยการคลิกขวาแลว
เลือกคําสั่ง Copy
ลิขสิทธิ์ของ iCourse และ khaooat.com ใช้เพื่อประกอบการอบรม ห้ามท้าซ้้า ดัดแปลง เผยแพร่ หรือใช้เชิงพานิชย์ ติดต่อวิทยากรได้ที่ khaooat.com หรือโทร. 095-116-6995
สราง Android Application จาก HTML5 ดวย PhoneGap
18
AndroidApp
4. กลับไปที่โปรแกรม Eclipse ใหไปที่โฟลเดอร res แลวคลิกขวาเลือกคําสั่ง Paste
5. คัดลอก cordova-2.2.0.jar โดยการคลิกขวาแลวเลือกคําสั่ง Copy
กฤษณพงศ เลิศบํารุงชัย ผูบรรยาย
19
AndroidApp
6. กลับไปที่โปรแกรม Eclipse ใหไปที่โฟลเดอร libs แลวคลิกขวาเลือกคําสั่ง Paste
7. คัดลอก cordova-2.2.0.js โดยการคลิกขวาแลวเลือกคําสั่ง Copy
ลิขสิทธิ์ของ iCourse และ khaooat.com ใช้เพื่อประกอบการอบรม ห้ามท้าซ้้า ดัดแปลง เผยแพร่ หรือใช้เชิงพานิชย์ ติดต่อวิทยากรได้ที่ khaooat.com หรือโทร. 095-116-6995
สราง Android Application จาก HTML5 ดวย PhoneGap
20
AndroidApp
8. กลับไปที่โปรแกรม Eclipse ใหไปที่โฟลเดอร assets แลวคลิกขวาเลือกคําสั่ง New Folder
9. ในชอง Folder name ใหกําหนดชื่อ
โฟลเดอรเปน www
10. คลิก Finish
กฤษณพงศ เลิศบํารุงชัย ผูบรรยาย
21
AndroidApp
11. ไปที่โฟลเดอร www แลวคลิกขวาเลือกคําสั่ง Paste
12. ไปที่โฟลเดอร src com.example.example แลวดับเบิลคลิกที่ไฟล MainActivity.java
ลิขสิทธิ์ของ iCourse และ khaooat.com ใช้เพื่อประกอบการอบรม ห้ามท้าซ้้า ดัดแปลง เผยแพร่ หรือใช้เชิงพานิชย์ ติดต่อวิทยากรได้ที่ khaooat.com หรือโทร. 095-116-6995
สราง Android Application จาก HTML5 ดวย PhoneGap
22
AndroidApp
13. ไปที่บรรทัด public class MainActivity extends ใหทําการลบ ActionBarActivity ออก
14. พิมพ droi
กฤษณพงศ เลิศบํารุงชัย ผูบรรยาย
23
AndroidApp
15. กด Ctrl + Spacebar ที่คียบอรด จะปรากฏ DroidGap โดยอัตโนมัติ
16. ไปที่บรรทัด import org.apache.cordova.DroidGap ใหลบคําวา DroidGap ออก
ลิขสิทธิ์ของ iCourse และ khaooat.com ใช้เพื่อประกอบการอบรม ห้ามท้าซ้้า ดัดแปลง เผยแพร่ หรือใช้เชิงพานิชย์ ติดต่อวิทยากรได้ที่ khaooat.com หรือโทร. 095-116-6995
สราง Android Application จาก HTML5 ดวย PhoneGap
24
AndroidApp
17. แกเปน * (ดอกจัน) จะได import org.apache.cordova. *;
18. ลบ protected ออก
กฤษณพงศ เลิศบํารุงชัย ผูบรรยาย
25
AndroidApp
19. เปลี่ยนจาก protected เปน public
20. ลบบรรทัด setContentView (R.layout.activity_main); ออก
ลิขสิทธิ์ของ iCourse และ khaooat.com ใช้เพื่อประกอบการอบรม ห้ามท้าซ้้า ดัดแปลง เผยแพร่ หรือใช้เชิงพานิชย์ ติดต่อวิทยากรได้ที่ khaooat.com หรือโทร. 095-116-6995
สราง Android Application จาก HTML5 ดวย PhoneGap
26
AndroidApp
21. พิมพ Code เพื่อเรียก HTML โดยตัวอักษรเล็กใหญตองตรงตามนี้
Super.loadUrl(“file:///android_asset/www/index.html);
22. ไปที่ File Save เพื่อบันทึกไฟล MainActivity
กฤษณพงศ เลิศบํารุงชัย ผูบรรยาย
27
AndroidApp
23. ไปคัดลอกไฟลที่ Publish เปน HTML5 จากโปรแกรม Adobe Captivate โดยคัดลอกไฟล
และโฟลเดอรทั้งหมดที่ Publish
24. กลับไปที่โปรแกรม Eclipse ใหไปที่โฟลเดอร assets www
25. คลิกขวาที่โฟลเดอร www แลวเลือกคําสั่ง Paste
ลิขสิทธิ์ของ iCourse และ khaooat.com ใช้เพื่อประกอบการอบรม ห้ามท้าซ้้า ดัดแปลง เผยแพร่ หรือใช้เชิงพานิชย์ ติดต่อวิทยากรได้ที่ khaooat.com หรือโทร. 095-116-6995
สราง Android Application จาก HTML5 ดวย PhoneGap
28
AndroidApp
26. คลิกขวาที่โปรเจค Run As Android Application
27. จะปรากฏหนาตาง Emulation ใหรอประมาณ 4 – 5 นาที จะปรากฏหนา Lock Screen
28. ทําการปลดล็อคหนาจอ จะปรากฏหนา Home ใหคลิกขาสูหนา Application
กฤษณพงศ เลิศบํารุงชัย ผูบรรยาย
29
AndroidApp
29. จะปรากฏ Application ตามชื่อที่เรากําหนดไวตอนเริ่มตนสรางโปรเจค
30. คลิกที่ Application ที่เราสรางขึ้น จะปรากฏ Application
¡¡ÒÃÊÊÌҧ IIcon Apppllication
1. ออกแบบไอคอนตามตองการ โดย
ใชโปรแกรม Adobe Photoshop
โดยเปดไฟลที่ขนาด 512 x 512
Pixels และ Resolution 72
ลิขสิทธิ์ของ iCourse และ khaooat.com ใช้เพื่อประกอบการอบรม ห้ามท้าซ้้า ดัดแปลง เผยแพร่ หรือใช้เชิงพานิชย์ ติดต่อวิทยากรได้ที่ khaooat.com หรือโทร. 095-116-6995
สราง Android Application จาก HTML5 ดวย PhoneGap
30
AndroidApp
2. บันทึกรูปภาพเปนขนาดตางๆ เปน 512 x 512, 144 x 144, 96 x 96, 72 x 72, 48 x 48
และตั้งชื่อไฟลตามลําดับ ดังนี้
ic_launcher-web
ic_launcher-144
ic_launcher-96
ic_launcher-72
ic_launcher-48
3. คัดลอกไฟล ic_launcher-web โดยการคลิกขวาแลวเลือกคําสั่ง Copy
กฤษณพงศ เลิศบํารุงชัย ผูบรรยาย
31
AndroidApp
4. กลับไปที่โปรแกรม Eclipse แลวคลิกขวาที่โปรเจคแลวเลือกคําสั่ง Paste
5. คลิก Yes To All
6. คัดลอกไฟล ic_launcher-144 โดยการคลิกขวาแลวเลือกคําสั่ง Copy
ลิขสิทธิ์ของ iCourse และ khaooat.com ใช้เพื่อประกอบการอบรม ห้ามท้าซ้้า ดัดแปลง เผยแพร่ หรือใช้เชิงพานิชย์ ติดต่อวิทยากรได้ที่ khaooat.com หรือโทร. 095-116-6995
สราง Android Application จาก HTML5 ดวย PhoneGap
32
AndroidApp
7. กลับไปที่โปรแกรม Eclipse แลวเขาไปที่โฟลเดอร res drawable-xxhdpi
8. คลิกขวาที่โฟลเดอร drawable-xxhdpi แลวเลือกคําสั่ง Paste
9. คลิกขวาที่ ic_launcher ซึ่งเดิมมีอยูแลว แลวคลิก Delete
10. คลิก OK
กฤษณพงศ เลิศบํารุงชัย ผูบรรยาย
33
AndroidApp
11. คลิกขวาที่ไฟล ic_launcher-144 แลวเลือกคําสั่ง Refactor Rename
12. ในชอง New name ใหกําหนดชื่อเปน ic_launcher.png
13. คลิก OK
14. คลิก Continue
ลิขสิทธิ์ของ iCourse และ khaooat.com ใช้เพื่อประกอบการอบรม ห้ามท้าซ้้า ดัดแปลง เผยแพร่ หรือใช้เชิงพานิชย์ ติดต่อวิทยากรได้ที่ khaooat.com หรือโทร. 095-116-6995
สราง Android Application จาก HTML5 ดวย PhoneGap
34
AndroidApp
15. สําหรับ ic_launcher ที่เหลือใหนําไปไวที่โฟลเดอรตางๆ ดังนี้
ic_launcher-96 ไวในโฟลเดอร drawable-xhdpi
ic_launcher-72 ไวในโฟลเดอร drawable-hdpi
ic_launcher-48 ไวในโฟลเดอร drawable-mhdpi
16. ลบ ic_launcher เดิมมีอยูแลวใน
โฟลเดอร drawable-xhdpi,
drawable-hdpi และ drawable-
mhdpi
17. ทําการ Rename ในสวนของไฟล
ic_launcher-96, ic_launcher-
72 และ ic_launcher-48 ที่อยูใน
โฟลเดอรตางๆ เปน ic_launcher
18. คลิกขวาที่โปรเจค Run As Android Application
กฤษณพงศ เลิศบํารุงชัย ผูบรรยาย
35
AndroidApp
19. จะปรากฏหนาตาง Emulation ใหรอประมาณ 4 – 5 นาที จะปรากฏหนา Lock Screen
20. ทําการปลดล็อคหนาจอ จะปรากฏหนา Home ใหคลิกขาสูหนา Application
21. จะปรากฏไอคอน Application และชื่อที่เรากําหนดไวตอนเริ่มตนสรางโปรเจค
22. คลิกที่ Application ที่เราสรางขึ้น จะปรากฏ Application
ลิขสิทธิ์ของ iCourse และ khaooat.com ใช้เพื่อประกอบการอบรม ห้ามท้าซ้้า ดัดแปลง เผยแพร่ หรือใช้เชิงพานิชย์ ติดต่อวิทยากรได้ที่ khaooat.com หรือโทร. 095-116-6995
สราง Android Application จาก HTML5 ดวย PhoneGap
36
AndroidApp
NNOTE
__________________________________________________________________________
__________________________________________________________________________
__________________________________________________________________________
__________________________________________________________________________
__________________________________________________________________________
__________________________________________________________________________
__________________________________________________________________________
__________________________________________________________________________
__________________________________________________________________________
__________________________________________________________________________
__________________________________________________________________________
__________________________________________________________________________
__________________________________________________________________________
__________________________________________________________________________
กฤษณพงศ เลิศบํารุงชัย ผูบรรยาย
37
AndroidApp
__________________________________________________________________________
__________________________________________________________________________
__________________________________________________________________________
__________________________________________________________________________
__________________________________________________________________________
__________________________________________________________________________
__________________________________________________________________________
__________________________________________________________________________
__________________________________________________________________________
__________________________________________________________________________
__________________________________________________________________________
__________________________________________________________________________
__________________________________________________________________________
__________________________________________________________________________
__________________________________________________________________________
__________________________________________________________________________
ลิขสิทธิ์ของ iCourse และ khaooat.com ใช้เพื่อประกอบการอบรม ห้ามท้าซ้้า ดัดแปลง เผยแพร่ หรือใช้เชิงพานิชย์ ติดต่อวิทยากรได้ที่ khaooat.com หรือโทร. 095-116-6995
สราง Android Application จาก HTML5 ดวย PhoneGap
38
AndroidApp
__________________________________________________________________________
__________________________________________________________________________
__________________________________________________________________________
__________________________________________________________________________
__________________________________________________________________________
__________________________________________________________________________
__________________________________________________________________________
__________________________________________________________________________
__________________________________________________________________________
__________________________________________________________________________
__________________________________________________________________________
__________________________________________________________________________
__________________________________________________________________________
__________________________________________________________________________
__________________________________________________________________________
__________________________________________________________________________
กฤษณพงศ เลิศบํารุงชัย ผูบรรยาย
39
AndroidApp
μμÔ´μÒÁ¢ŒÍÁÙÅ¢‹ÒÇÊÒÃ
http://khaooat.com/
http://programsdd.com/
https://www.facebook.com/ProgramsDD
http://khaooat.com/icourse/
ลิขสิทธิ์ของ iCourse และ khaooat.com ใช้เพื่อประกอบการอบรม ห้ามท้าซ้้า ดัดแปลง เผยแพร่ หรือใช้เชิงพานิชย์ ติดต่อวิทยากรได้ที่ khaooat.com หรือโทร. 095-116-6995
ลิขสิทธิ์ของ iCourse และ khaooat.com ใช้เพื่อประกอบการอบรม ห้ามท้าซ้้า ดัดแปลง เผยแพร่ หรือใช้เชิงพานิชย์ ติดต่อวิทยากรได้ที่ khaooat.com หรือโทร. 095-116-6995

การสร้าง Android Application จาก HTML5 ด้วย PhoneGap

  • 1.
    ลิขสิทธิ์ของ iCourse และkhaooat.com ใช้เพื่อประกอบการอบรม ห้ามท้าซ้้า ดัดแปลง เผยแพร่ หรือใช้เชิงพานิชย์ ติดต่อวิทยากรได้ที่ khaooat.com หรือโทร. 095-116-6995
  • 2.
    AndroidApp μμÔ´μÒÁ¢ŒÍÁÙÅ¢‹ÒÇÊÒà http://khaooat.com/ http://programsdd.com/ https://www.facebook.com/ProgramsDD http://khaooat.com/icourse/ AndroidApp ÊÊÒúÑÞ รูจัก PhoneGap 1 การตรวจสอบSystem Type ของ Windows 3 การติดตั้ง Java 3 การติดตั้ง Eclipse 6 เริ่มตนการสราง Android Application 10 การติดตั้งและใชงาน PhoneGap 17 การสราง Icon Application 29 ลิขสิทธิ์ของ iCourse และ khaooat.com ใช้เพื่อประกอบการอบรม ห้ามท้าซ้้า ดัดแปลง เผยแพร่ หรือใช้เชิงพานิชย์ ติดต่อวิทยากรได้ที่ khaooat.com หรือโทร. 095-116-6995
  • 3.
    AndroidApp กฤษณพงศ เลิศบํารุงชัย ผูบรรยาย 1 AndroidApp ÃÃÙŒ¨Ñ¡PPhoneGap PPhoneGap ¤×ÍÍÐäà PhoneGap คือ เครื่องมือสําหรับพัฒนา Mobile Application ที่ชวยใหพัฒนา Application บนสมารทโฟนไดงายโดยใช HTML5, Javascript หรือ CSS เพียงเราสามารถสรางเว็บไซตไดก็สามารถ สรางแอพพลิเคชั่นได และยังสามารถทํางานขาม Platform ได เชน iOS, Android, Windows Phone, BlackBerry, Symbian, webOS, และ bada ¡Ò÷íÒ§Ò¹¢Í§ PhoneGap PhoneGap จะหอหุม (Wrap) สิ่งที่เราสรางขึ้นจาก HTML5, Javascript หรือ CSS ใหเปน Application ที่สามารถทํางานไดในระบบปฏิบัติการตางๆ ของสมารทโฟน โดยPhoneGap มีรูปแบบ การทํางาน 2 ลักษณะ ไดแก PhoneGap Build เปนการสราง Application บนเว็บ build.phonegap.com เพียงสมัคร AdobeID ก็สามารถหอหุม HTML5, Javascript หรือ CSS เปน .zip แลวอัพโหลดเพื่อ Build เปน Application บน Platform ตางๆ ไดทันที แตจะมีขอจํากัดดานขนาดและ จํานวนของ Application หากตองการขนาดและจํานวนเพิ่มตองเสียเงิน ลิขสิทธิ์ของ iCourse และ khaooat.com ใช้เพื่อประกอบการอบรม ห้ามท้าซ้้า ดัดแปลง เผยแพร่ หรือใช้เชิงพานิชย์ ติดต่อวิทยากรได้ที่ khaooat.com หรือโทร. 095-116-6995
  • 4.
    สราง Android Applicationจาก HTML5 ดวย PhoneGap 2 AndroidApp PhoneGap Developer เปนการสราง Application โดยใชโปรแกรม Eclipse สามารถทํา ไดโดยเขาไปดาวนโหลดเครื่องมือไดที่ phonegap.com แตจะมีความยุงยากกวา PhoneGap Build เนื่องจากจะตองติดตั้งโปรแกรมหลายชนิด และมีการเขียนโคด ซึ่งขอดีก็ คือฟรี และสามารถสราง Application ไดไมจํากัดขนาดและจํานวน กฤษณพงศ เลิศบํารุงชัย ผูบรรยาย 3 AndroidApp ¡¡ÒÃμÃǨÊͺ SSystem Type ¢¢Í§ WWindows กอนที่จะติดตั้งเครื่องมือใดๆ ลงในคอมพิวเตอร จะตองตรวจสอบ System Type ของ Windows กอนวาเปน 32 หรือ 64 บิต โดยคลิกที่ This PC Properties จากรูปเปน Windows 8.1 Pro ที่มี System Type เปน 64 บิต ดังนั้นการติดตั้งเครื่องมือที่ มีใหเลือกระหวาง 32 กับ 64 บิต ก็ใหเลือกใหตรงกับ System Type ¡¡ÒÃμÔ´μÑé§ JJava การสรางพัฒนา Application สําหรับแอนดรอยดจะพัฒนาภายใตการทํางานของ JAVA โดย โปรแกรมที่ใชในการพัฒนา Application ก็คือ Eclipse ซึ่งกอนที่จะติดตั้ง Eclipse จะตองทําการ ติดตั้ง JAVA กอน โดยมีขั้นตอนดังนี้ ลิขสิทธิ์ของ iCourse และ khaooat.com ใช้เพื่อประกอบการอบรม ห้ามท้าซ้้า ดัดแปลง เผยแพร่ หรือใช้เชิงพานิชย์ ติดต่อวิทยากรได้ที่ khaooat.com หรือโทร. 095-116-6995
  • 5.
    สราง Android Applicationจาก HTML5 ดวย PhoneGap 4 AndroidApp 1. คลิกขวาที่ JDK 8 Update 40 แลวเลือก Extract Here 2. เขาไปที่โฟลเดอร JDK 8 Update 40 แลวดับเบิลคลิก JDK 8 Update 40 ตาม System Type 3. คลิก Next 4. คลิก Next กฤษณพงศ เลิศบํารุงชัย ผูบรรยาย 5 AndroidApp 5. รอสักครู 6. คลิก Next 7. รอสักครูขณะที่โปรแกรมกําลังติดตั้ง 8. คลิก Close ลิขสิทธิ์ของ iCourse และ khaooat.com ใช้เพื่อประกอบการอบรม ห้ามท้าซ้้า ดัดแปลง เผยแพร่ หรือใช้เชิงพานิชย์ ติดต่อวิทยากรได้ที่ khaooat.com หรือโทร. 095-116-6995
  • 6.
    สราง Android Applicationจาก HTML5 ดวย PhoneGap 6 AndroidApp ¡¡ÒÃμÔ´μÑé§ EEclipse Eclipse เปนโปรแกรมสําหรับสราง Application สําหรับแอนดรอยด ซึ่งสามารถใชไดกับ Windows 7 / 8 / 8.1 มีใหเลือกทั้ง 32 และ 64 บิต ดังนั้นตองเลือกใชใหตรงกับ System Type ดวย โดยขั้นตอนการติดตั้งมีดังนี้ 1. คลิกขวาที่ ADT Bundle Windows แลวเลือกคําสั่ง Extract Here 2. เขาไปที่โฟลเดอร ADT Bundle Windows x64 eclipse 3. ดับเบิลคลิก eclipse เพื่อเขาสูโปรแกรม 4. รอสักครูจะปรากฏหนาตาง Workspace Launcher ใหคลิก Browse เพื่อเลือกที่เก็บไฟล 5. คลิก OK กฤษณพงศ เลิศบํารุงชัย ผูบรรยาย 7 AndroidApp 6. จะปรากฏหนาตาง Java - Eclipse 7. ไปที่ Windows Android SDK Manager ลิขสิทธิ์ของ iCourse และ khaooat.com ใช้เพื่อประกอบการอบรม ห้ามท้าซ้้า ดัดแปลง เผยแพร่ หรือใช้เชิงพานิชย์ ติดต่อวิทยากรได้ที่ khaooat.com หรือโทร. 095-116-6995
  • 7.
    สราง Android Applicationจาก HTML5 ดวย PhoneGap 8 AndroidApp 8. จะปรากฏหนาตาง Android SDK Manager ใหทําการเลือก Tools และ Android Version ที่ตองการ โดยปกติโปรแกรมจะเลือกใหอัตโนมัติ (หากไมเลือกอัตโนมัติใหเลือก Android Version 5.1 และ 4.4) 9. คลิก Install Packages 10. คลิก Accept License สังเกตวา ดานซายมือจะตองขึ้นเครื่องหมาย ถูกทั้งหมด 11. คลิก Install กฤษณพงศ เลิศบํารุงชัย ผูบรรยาย 9 AndroidApp 12. Android SDK Manager กําลังดาวนโหลดเครื่องมือและ Android Version ที่เลือก ใน ขั้นตอนนี้จะใชเวลา 2 – 3 ชั่วโมง แนะนําใหเชื่อมตออินเทอรเน็ตความเร็วสูง 13. คลิก OK 14. คลิก Close 15. ปดโปรแกรม Java – Eclipse แลวเปดขึ้นมาใหม ลิขสิทธิ์ของ iCourse และ khaooat.com ใช้เพื่อประกอบการอบรม ห้ามท้าซ้้า ดัดแปลง เผยแพร่ หรือใช้เชิงพานิชย์ ติดต่อวิทยากรได้ที่ khaooat.com หรือโทร. 095-116-6995
  • 8.
    สราง Android Applicationจาก HTML5 ดวย PhoneGap 10 AndroidApp ààÃÔèÁμŒ¹¡¡ÒÃÊÌҧ AAndroid AApplication 1. เปดโปรแกรม Java – Eclipse 2. ไปที่ New Android Application Project 3. กําหนดรายละเอียดดังนี้ Application Name กําหนดชื่อ แอพพลิเคชั่น Project Name กําหนดชื่อโปรเจค เหมือนกับชื่อแอพพลิเคชั่น Package Name กําหนดแบบ Reverse Domain Name เชน com.khaooat.helloprogramsdd กฤษณพงศ เลิศบํารุงชัย ผูบรรยาย 11 AndroidApp 4. คลิก Next 5. คลิก Next 6. คลิกเครื่องหมายถูกที่ Create Activity 7. คลิก Blank Activity 8. คลิก Next 9. คลิก Finish ลิขสิทธิ์ของ iCourse และ khaooat.com ใช้เพื่อประกอบการอบรม ห้ามท้าซ้้า ดัดแปลง เผยแพร่ หรือใช้เชิงพานิชย์ ติดต่อวิทยากรได้ที่ khaooat.com หรือโทร. 095-116-6995
  • 9.
    สราง Android Applicationจาก HTML5 ดวย PhoneGap 12 AndroidApp 10. จะปรากฏหนาตางสําหรับสราง Application 11. ไปที่ Windows Android Virtual Device Manager กฤษณพงศ เลิศบํารุงชัย ผูบรรยาย 13 AndroidApp 12. จะปรากฏหนาตาง Android Virtual Device (AVD) Manager ใหคลิก Create 13. จะปรากฏหนาตาง Create new Android Virtual Device (AVD) ใหกําหนดคาดังนี้ AVD Name ตั้งชื่ออุปกรณ Device เลือกอุปกรณหรือ ขนาดหนาจอที่ตองการ Target กําหนด Android Version ที่ตองการ แนะนํา Android 4.4.2 CPU/ABI กําหนดเปน ARM (armeabi-v7a) Skin กําหนดเปน Skin with dynamic hardware controls 14. คลิก OK ลิขสิทธิ์ของ iCourse และ khaooat.com ใช้เพื่อประกอบการอบรม ห้ามท้าซ้้า ดัดแปลง เผยแพร่ หรือใช้เชิงพานิชย์ ติดต่อวิทยากรได้ที่ khaooat.com หรือโทร. 095-116-6995
  • 10.
    สราง Android Applicationจาก HTML5 ดวย PhoneGap 14 AndroidApp 15. จะปรากฏ Device ที่สรางขึ้น ใหคลิกที่ Device 16. คลิก Start 17. คลิก Launch 18. รอ 3 – 5 นาที ปรากฏหนา Lock Screen 19. แตะที่รูปกุญแจ เพื่อทําการปลด ล็อคหนาจอ กฤษณพงศ เลิศบํารุงชัย ผูบรรยาย 15 AndroidApp 20. จะเขาสูหนา Home ใหคลิก เขาสูหนา Menu 21. ปดหนาตาง Emulator 22. ปดหนาตาง Android Virtual Device 23. คลิกขวาที่โปรเจค เลือกคําสั่ง Run As Android Application ลิขสิทธิ์ของ iCourse และ khaooat.com ใช้เพื่อประกอบการอบรม ห้ามท้าซ้้า ดัดแปลง เผยแพร่ หรือใช้เชิงพานิชย์ ติดต่อวิทยากรได้ที่ khaooat.com หรือโทร. 095-116-6995
  • 11.
    สราง Android Applicationจาก HTML5 ดวย PhoneGap 16 AndroidApp 24. หลังจากเขาสูหนา Menu ใหคลิกที่ชื่อ Application ที่สรางขึ้น 25. จะปรากฏ Application โดยแสดงชื่อและขอความ Hello world! ใหทําการปดหนาตาง Emulator Note หากไมสามารถเปดโปรแกรม Java – Eclipse ได ใหทําการติดตั้ง JDK กอน หากไมสามารถ Create Android Virtual Device (AVD) ได ใหเขาไปติดตั้งเครื่องมือ และ Android Version เพิ่มเติมที่ Android SDK Manager โดยติดตั้งเวอรชั่นลาสุดและเวอรชั่นที่ ตองการใชงาน กฤษณพงศ เลิศบํารุงชัย ผูบรรยาย 17 AndroidApp ¡¡ÒÃμÔ´μÑé§áÅÐ㪌§Ò¹ PPhoneGap 1. แตกไฟล PhoneGap โดยคลิกขวาที่ PhoneGap 2.2 แลวคลิก Extract Here 2. เขาไปที่โฟลเดอร Phonegap 2.2 lib android จะพบโฟลเดอร xml 3. ทําการคัดลอกโฟลเดอร xml โดยการคลิกขวาแลว เลือกคําสั่ง Copy ลิขสิทธิ์ของ iCourse และ khaooat.com ใช้เพื่อประกอบการอบรม ห้ามท้าซ้้า ดัดแปลง เผยแพร่ หรือใช้เชิงพานิชย์ ติดต่อวิทยากรได้ที่ khaooat.com หรือโทร. 095-116-6995
  • 12.
    สราง Android Applicationจาก HTML5 ดวย PhoneGap 18 AndroidApp 4. กลับไปที่โปรแกรม Eclipse ใหไปที่โฟลเดอร res แลวคลิกขวาเลือกคําสั่ง Paste 5. คัดลอก cordova-2.2.0.jar โดยการคลิกขวาแลวเลือกคําสั่ง Copy กฤษณพงศ เลิศบํารุงชัย ผูบรรยาย 19 AndroidApp 6. กลับไปที่โปรแกรม Eclipse ใหไปที่โฟลเดอร libs แลวคลิกขวาเลือกคําสั่ง Paste 7. คัดลอก cordova-2.2.0.js โดยการคลิกขวาแลวเลือกคําสั่ง Copy ลิขสิทธิ์ของ iCourse และ khaooat.com ใช้เพื่อประกอบการอบรม ห้ามท้าซ้้า ดัดแปลง เผยแพร่ หรือใช้เชิงพานิชย์ ติดต่อวิทยากรได้ที่ khaooat.com หรือโทร. 095-116-6995
  • 13.
    สราง Android Applicationจาก HTML5 ดวย PhoneGap 20 AndroidApp 8. กลับไปที่โปรแกรม Eclipse ใหไปที่โฟลเดอร assets แลวคลิกขวาเลือกคําสั่ง New Folder 9. ในชอง Folder name ใหกําหนดชื่อ โฟลเดอรเปน www 10. คลิก Finish กฤษณพงศ เลิศบํารุงชัย ผูบรรยาย 21 AndroidApp 11. ไปที่โฟลเดอร www แลวคลิกขวาเลือกคําสั่ง Paste 12. ไปที่โฟลเดอร src com.example.example แลวดับเบิลคลิกที่ไฟล MainActivity.java ลิขสิทธิ์ของ iCourse และ khaooat.com ใช้เพื่อประกอบการอบรม ห้ามท้าซ้้า ดัดแปลง เผยแพร่ หรือใช้เชิงพานิชย์ ติดต่อวิทยากรได้ที่ khaooat.com หรือโทร. 095-116-6995
  • 14.
    สราง Android Applicationจาก HTML5 ดวย PhoneGap 22 AndroidApp 13. ไปที่บรรทัด public class MainActivity extends ใหทําการลบ ActionBarActivity ออก 14. พิมพ droi กฤษณพงศ เลิศบํารุงชัย ผูบรรยาย 23 AndroidApp 15. กด Ctrl + Spacebar ที่คียบอรด จะปรากฏ DroidGap โดยอัตโนมัติ 16. ไปที่บรรทัด import org.apache.cordova.DroidGap ใหลบคําวา DroidGap ออก ลิขสิทธิ์ของ iCourse และ khaooat.com ใช้เพื่อประกอบการอบรม ห้ามท้าซ้้า ดัดแปลง เผยแพร่ หรือใช้เชิงพานิชย์ ติดต่อวิทยากรได้ที่ khaooat.com หรือโทร. 095-116-6995
  • 15.
    สราง Android Applicationจาก HTML5 ดวย PhoneGap 24 AndroidApp 17. แกเปน * (ดอกจัน) จะได import org.apache.cordova. *; 18. ลบ protected ออก กฤษณพงศ เลิศบํารุงชัย ผูบรรยาย 25 AndroidApp 19. เปลี่ยนจาก protected เปน public 20. ลบบรรทัด setContentView (R.layout.activity_main); ออก ลิขสิทธิ์ของ iCourse และ khaooat.com ใช้เพื่อประกอบการอบรม ห้ามท้าซ้้า ดัดแปลง เผยแพร่ หรือใช้เชิงพานิชย์ ติดต่อวิทยากรได้ที่ khaooat.com หรือโทร. 095-116-6995
  • 16.
    สราง Android Applicationจาก HTML5 ดวย PhoneGap 26 AndroidApp 21. พิมพ Code เพื่อเรียก HTML โดยตัวอักษรเล็กใหญตองตรงตามนี้ Super.loadUrl(“file:///android_asset/www/index.html); 22. ไปที่ File Save เพื่อบันทึกไฟล MainActivity กฤษณพงศ เลิศบํารุงชัย ผูบรรยาย 27 AndroidApp 23. ไปคัดลอกไฟลที่ Publish เปน HTML5 จากโปรแกรม Adobe Captivate โดยคัดลอกไฟล และโฟลเดอรทั้งหมดที่ Publish 24. กลับไปที่โปรแกรม Eclipse ใหไปที่โฟลเดอร assets www 25. คลิกขวาที่โฟลเดอร www แลวเลือกคําสั่ง Paste ลิขสิทธิ์ของ iCourse และ khaooat.com ใช้เพื่อประกอบการอบรม ห้ามท้าซ้้า ดัดแปลง เผยแพร่ หรือใช้เชิงพานิชย์ ติดต่อวิทยากรได้ที่ khaooat.com หรือโทร. 095-116-6995
  • 17.
    สราง Android Applicationจาก HTML5 ดวย PhoneGap 28 AndroidApp 26. คลิกขวาที่โปรเจค Run As Android Application 27. จะปรากฏหนาตาง Emulation ใหรอประมาณ 4 – 5 นาที จะปรากฏหนา Lock Screen 28. ทําการปลดล็อคหนาจอ จะปรากฏหนา Home ใหคลิกขาสูหนา Application กฤษณพงศ เลิศบํารุงชัย ผูบรรยาย 29 AndroidApp 29. จะปรากฏ Application ตามชื่อที่เรากําหนดไวตอนเริ่มตนสรางโปรเจค 30. คลิกที่ Application ที่เราสรางขึ้น จะปรากฏ Application ¡¡ÒÃÊÊÌҧ IIcon Apppllication 1. ออกแบบไอคอนตามตองการ โดย ใชโปรแกรม Adobe Photoshop โดยเปดไฟลที่ขนาด 512 x 512 Pixels และ Resolution 72 ลิขสิทธิ์ของ iCourse และ khaooat.com ใช้เพื่อประกอบการอบรม ห้ามท้าซ้้า ดัดแปลง เผยแพร่ หรือใช้เชิงพานิชย์ ติดต่อวิทยากรได้ที่ khaooat.com หรือโทร. 095-116-6995
  • 18.
    สราง Android Applicationจาก HTML5 ดวย PhoneGap 30 AndroidApp 2. บันทึกรูปภาพเปนขนาดตางๆ เปน 512 x 512, 144 x 144, 96 x 96, 72 x 72, 48 x 48 และตั้งชื่อไฟลตามลําดับ ดังนี้ ic_launcher-web ic_launcher-144 ic_launcher-96 ic_launcher-72 ic_launcher-48 3. คัดลอกไฟล ic_launcher-web โดยการคลิกขวาแลวเลือกคําสั่ง Copy กฤษณพงศ เลิศบํารุงชัย ผูบรรยาย 31 AndroidApp 4. กลับไปที่โปรแกรม Eclipse แลวคลิกขวาที่โปรเจคแลวเลือกคําสั่ง Paste 5. คลิก Yes To All 6. คัดลอกไฟล ic_launcher-144 โดยการคลิกขวาแลวเลือกคําสั่ง Copy ลิขสิทธิ์ของ iCourse และ khaooat.com ใช้เพื่อประกอบการอบรม ห้ามท้าซ้้า ดัดแปลง เผยแพร่ หรือใช้เชิงพานิชย์ ติดต่อวิทยากรได้ที่ khaooat.com หรือโทร. 095-116-6995
  • 19.
    สราง Android Applicationจาก HTML5 ดวย PhoneGap 32 AndroidApp 7. กลับไปที่โปรแกรม Eclipse แลวเขาไปที่โฟลเดอร res drawable-xxhdpi 8. คลิกขวาที่โฟลเดอร drawable-xxhdpi แลวเลือกคําสั่ง Paste 9. คลิกขวาที่ ic_launcher ซึ่งเดิมมีอยูแลว แลวคลิก Delete 10. คลิก OK กฤษณพงศ เลิศบํารุงชัย ผูบรรยาย 33 AndroidApp 11. คลิกขวาที่ไฟล ic_launcher-144 แลวเลือกคําสั่ง Refactor Rename 12. ในชอง New name ใหกําหนดชื่อเปน ic_launcher.png 13. คลิก OK 14. คลิก Continue ลิขสิทธิ์ของ iCourse และ khaooat.com ใช้เพื่อประกอบการอบรม ห้ามท้าซ้้า ดัดแปลง เผยแพร่ หรือใช้เชิงพานิชย์ ติดต่อวิทยากรได้ที่ khaooat.com หรือโทร. 095-116-6995
  • 20.
    สราง Android Applicationจาก HTML5 ดวย PhoneGap 34 AndroidApp 15. สําหรับ ic_launcher ที่เหลือใหนําไปไวที่โฟลเดอรตางๆ ดังนี้ ic_launcher-96 ไวในโฟลเดอร drawable-xhdpi ic_launcher-72 ไวในโฟลเดอร drawable-hdpi ic_launcher-48 ไวในโฟลเดอร drawable-mhdpi 16. ลบ ic_launcher เดิมมีอยูแลวใน โฟลเดอร drawable-xhdpi, drawable-hdpi และ drawable- mhdpi 17. ทําการ Rename ในสวนของไฟล ic_launcher-96, ic_launcher- 72 และ ic_launcher-48 ที่อยูใน โฟลเดอรตางๆ เปน ic_launcher 18. คลิกขวาที่โปรเจค Run As Android Application กฤษณพงศ เลิศบํารุงชัย ผูบรรยาย 35 AndroidApp 19. จะปรากฏหนาตาง Emulation ใหรอประมาณ 4 – 5 นาที จะปรากฏหนา Lock Screen 20. ทําการปลดล็อคหนาจอ จะปรากฏหนา Home ใหคลิกขาสูหนา Application 21. จะปรากฏไอคอน Application และชื่อที่เรากําหนดไวตอนเริ่มตนสรางโปรเจค 22. คลิกที่ Application ที่เราสรางขึ้น จะปรากฏ Application ลิขสิทธิ์ของ iCourse และ khaooat.com ใช้เพื่อประกอบการอบรม ห้ามท้าซ้้า ดัดแปลง เผยแพร่ หรือใช้เชิงพานิชย์ ติดต่อวิทยากรได้ที่ khaooat.com หรือโทร. 095-116-6995
  • 21.
    สราง Android Applicationจาก HTML5 ดวย PhoneGap 36 AndroidApp NNOTE __________________________________________________________________________ __________________________________________________________________________ __________________________________________________________________________ __________________________________________________________________________ __________________________________________________________________________ __________________________________________________________________________ __________________________________________________________________________ __________________________________________________________________________ __________________________________________________________________________ __________________________________________________________________________ __________________________________________________________________________ __________________________________________________________________________ __________________________________________________________________________ __________________________________________________________________________ กฤษณพงศ เลิศบํารุงชัย ผูบรรยาย 37 AndroidApp __________________________________________________________________________ __________________________________________________________________________ __________________________________________________________________________ __________________________________________________________________________ __________________________________________________________________________ __________________________________________________________________________ __________________________________________________________________________ __________________________________________________________________________ __________________________________________________________________________ __________________________________________________________________________ __________________________________________________________________________ __________________________________________________________________________ __________________________________________________________________________ __________________________________________________________________________ __________________________________________________________________________ __________________________________________________________________________ ลิขสิทธิ์ของ iCourse และ khaooat.com ใช้เพื่อประกอบการอบรม ห้ามท้าซ้้า ดัดแปลง เผยแพร่ หรือใช้เชิงพานิชย์ ติดต่อวิทยากรได้ที่ khaooat.com หรือโทร. 095-116-6995
  • 22.
    สราง Android Applicationจาก HTML5 ดวย PhoneGap 38 AndroidApp __________________________________________________________________________ __________________________________________________________________________ __________________________________________________________________________ __________________________________________________________________________ __________________________________________________________________________ __________________________________________________________________________ __________________________________________________________________________ __________________________________________________________________________ __________________________________________________________________________ __________________________________________________________________________ __________________________________________________________________________ __________________________________________________________________________ __________________________________________________________________________ __________________________________________________________________________ __________________________________________________________________________ __________________________________________________________________________ กฤษณพงศ เลิศบํารุงชัย ผูบรรยาย 39 AndroidApp μμÔ´μÒÁ¢ŒÍÁÙÅ¢‹ÒÇÊÒà http://khaooat.com/ http://programsdd.com/ https://www.facebook.com/ProgramsDD http://khaooat.com/icourse/ ลิขสิทธิ์ของ iCourse และ khaooat.com ใช้เพื่อประกอบการอบรม ห้ามท้าซ้้า ดัดแปลง เผยแพร่ หรือใช้เชิงพานิชย์ ติดต่อวิทยากรได้ที่ khaooat.com หรือโทร. 095-116-6995
  • 23.
    ลิขสิทธิ์ของ iCourse และkhaooat.com ใช้เพื่อประกอบการอบรม ห้ามท้าซ้้า ดัดแปลง เผยแพร่ หรือใช้เชิงพานิชย์ ติดต่อวิทยากรได้ที่ khaooat.com หรือโทร. 095-116-6995