View
1.736
Download
16
Category
Preview:
Citation preview
เอกสารประกอบการใชงาน
การพฒนาแอพพลเคชนบนอปกรณแอนดรอยด
สาหรบผเรมตน
จดทาโดย
ธวชชย สลาดเลา
AppInventorthai
สารบญ “ เนอหาหรอขอมลตางๆทปรากฏในคมอเลมนเปนเพยงการนาเนอหา ขอมล ขาวสาร และความรของผ เขยนทมอยอยางจากด
ซงอาจจะมความผดพลาดในเนอหาและความแตกตางกนบาง ในการนาไปใชงาน ซงผ เขยนมไดมเจตนาใหเกดขน ความเสยหายตางๆ
ทเกดขนจากการนาบทความนไปใชงาน ผ เขยนมไดมหนาทรบผดชอบโดยตรง แตจะพยายามแกไขปรบปรงเนอหาใหรดกมมากขน
คมอเลมนไมไดสงวนสทธในการคดลอก ดดแปลง ทาซาแตประการใด ”
สารบญ
แนะนา App Inventor
การตดตง JAVA
การตดตงโปรแกรม AppInventor
การสมคร Google Account
การสรางโปรเจค ดาวนโหลด อพโหลด
Screen Arrangement Components
การสรางไฟลสาหรบตดตง Android Application Package file (APK)
การตดตงแอพพลเคชนบนอปกรณแอนดรอยด
ตดตงโปรแกรมผาน USB Storage Device
ตดตงโปรแกรมผาน ADB (Android Debug Bridge)
ตดตงโปรแกรมผาน Wi-Fi
เรมตนกบ Hello World
AppInventor กบการสอสารแบบไรสาย Bluetooth
เขยนโปรแกรมตดตอกบคอมพวเตอร
เขยนโปรแกรมเพอควบคมการทางานของหนยนต
App Inventor กบการทางานแบบออฟไลน (OFFLINE)
แอนดรอยด ( android) เปนระบบปฏบตการสาหรบอปกรณพกพา เชน โทรศพทมอถอ
สมารตโฟน แทบเลตคอมพวเตอร เนตบก ทางานบนลนกซ เคอรเนล เรมพฒนาโดยบรษทแอนดรอยด
(องกฤษ: Android Inc.) จากนนบรษทแอนดรอยดถกซอโดยบรษทกเกล และนาแอนดรอยดไปพฒนา
ตอ ภายหลงถกพฒนาในนามของ Open Handset Alliance ทางกเกลไดเปดใหนกพฒนาสามารถแกไข
โคดตางๆ ดวยภาษาจาวา และควบคมอปกรณผานทางชด Java libraries ทกเกลพฒนาขน
แอนดรอยดไดเปนทรจกตอสาธารณชนเมอวนท 5 พฤศจกายน พ.ศ. 2550 โดยทางกเกลได
ประกาศกอตง Open Handset Alliance กลมบรษทฮารดแวร, ซอฟตแวร และการสอสาร 48 แหง ท
รวมมอกนเพอพฒนา มาตรฐานเปด สาหรบอปกรณมอถอ ลขสทธของโคดแอนดรอยดนจะใชในลกษณะ
ของซอฟตแวรเสร
โทรศพทเครองแรกทสามารถใชงานระบบปฏบตการแอนดรอยดไดคอ HTC Dream
ออกจาหนายเมอ 22 ตลาคม 2551
เวอรชนลาสดของแอนดรอยดคอ 4.2 (Jellybean) ความสามารถใหมของ แอนดรอยด 4.2 ท
เพมขนมาคอ Photo Sphere ทสามารถถายรปได 360 องศา และ Keyboard Gestures ทสามารถลาก
นวแทนการสมผสตวอกษรได
เรมตนพฒนาแอพพลเคชนบนระบบปฏบตการแอนดรอยด ดวย AppInventor
ในปจจบนโทรศพทเคลอนทและแทบเลตทใชระบบปฏบตการแอนดรอยดนนมจานวนมากมาย
หลายรน หลายยหอ ใหเลอกใชงาน และคาดวาในอนาคตจะมการใชงานเพมมากขนเรอยๆ ซงเปนผลให
นกพฒนาแอพพลเคชนจาเปนตองพฒนาแอพพลเคชนเพอใหสามารถตอบสนองความตองการของผ
ใชไดอยางเพยงพอ แตเนองจากแอพพลเคชนบนระบบปฏบตการแอนดรอยดนนถกพฒนาขนดวย
โปรแกรมภาษาจาวา ซงเปนเรองยากสาหรบนกพฒนาแอพพลเคชนมอใหม ทอยากจะเรยนรเกยวกบ
เรองของการเขยนโปรแกรม ดงนน ทางบรษทกเกลจงไดพฒนาโปรแกรมทชอวา App Inventor เพอใช
เปนเครองมอในการพฒนาแอพพลเคชนบนมอถอระบบปฏบตการแอนดรอยด แตในปจจบนทางกเกล
ไดสงมอบ AppInventor ใหอยในการควบคมดแลของสถาบน MIT (Massachusetts Institute of
Technology) จนถงปจจบน AppInventor ภายใตการควบคมดแลของ MIT ไดมการพฒนาเครองมอของ
AppInventor ขนมาอยางตอเนอง โดย AppInventor นนถกออกแบบมาเพอใหงายตอการใชงาน โดย
อาศยหลกการทางานผานระบบเครอขายอนเตอรเนตเปนหลก ซงใชเวบบราวเซอรในการทางานรวมกบ
เวบเซฟเวอร แอพพลเคชนทถกพฒนาจะถกจดเกบไวในเครองคอมพวเตอรเซฟเวอร ซงเวลาทเรา
เรยกใชงาน จะตองเขาไปทเวบไซด appinventor.mit.edu/ เพอทจะนาแอพพลเคชนทสรางขนมา
แกไข และพฒนาตอได ถอเปนอกหนงแนวทางในการพฒนาแอพพลเคชนบนมอถอรปแบบใหม ท
นาสนใจ และสามารถใชเปนพนฐานในการเรยนรและพฒนาแอพพลเคชนขนสงตอไป
ไดอะแกรมแสดงการทางานของ AppInventor
AppInventor สามารถตดตอกบอปกรณภายในและอปกรณภายนอก
Block Diagram แสดงสวนประกอบของแอพพลเคชน
กระบวนการในการพฒนาแอพพลเคชนดวย AppInventor
1. ตดตง JAVA JRE
2. ตดตงโปรแกรม App Inventor
3. ออกแบบและเขยนคาสงดวย AppInventor
4. ตดตงแอพพลเคชนลงบนอปกรณแอนดรอยด
ตดตง JAVA JRE
เครองมอตวแรกทจาเปนตองตดตงลงบนคอมพวเตอร คอ Java jre ซงจะทาหนาทในการเปด
ไฟลทไดจากการดาวนโหลดจากเวบไซด appInventor.mit.edu ซงสามารถตดตงและใชงานไดตงแต
เวอรชน 6 ขนไป แตแนะนาใหใชงาน เวอรชนลาสดซงสามารถดาวนโหลดไดจากเวบไซด
www.java.com ในคมอจะอางอง Java เวอรชน 7u21
การตดตงโปรแกรมจาวาสามารถทาได 2 วธดวยกนคอ
1. ตดตงผานเวบไซด (web installer)
2. ตดตงแบบออฟไลน (offline install )
1) ตดตงผานเวบไซด (web installer) จาเปนตองมการเชอมตอกบเครอขายอนเตอรเนตอย
ตลอดจนกวาการตดตงจะสาเรจ โดยมขนตอนการดาวนโหลดและตดตงดงน
หลงจากทเขาสเวบไซดจะปรากฏหนาตางหลกของเวบไซดดงภาพ ใหเราคลกเลอกท Free
Java Download เพอทาการดาวนโหลดและตดตง Java ลงในเครองคอมพวเตอร
จากนนคลกเพอยอมรบขอตกลงในการดาวนโหลด
รอสกคร ระบบจะทาการตดตงโปรแกรมบนระบบปฏบตทเราใชโดยอตโนมต
เมอโปรแกรมถกตดตงเรยบรอยแลว กคลกทปม Close เพอปดหนาตางนไดเลย
2) ตดตงแบบออฟไลน (offline install ) กคอการดาวนโหลดไฟลตดตงมาเกบไวในเครอง
คอมพวเตอรกอน และทาการตดตงภายหลง สามารถดาวนโหลดไฟลจาวาสาหรบใชในการตดตงไดท
http://java.com/en/download/manual.jsp
หลงจากทาการดาวนโหลดไฟลตดตงของจาวาเสรจเรยบรอยแลว จะไดไฟลสาหรบตดตงดงภาพ
• ไฟล jre-7u21-windows-i586 ใชสาหรบใชตดตงบนระบบปฏบตการวนโดวส 32 bit
• ไฟล jre-7u21-windows-x64 ใชสาหรบใชตดตงบนระบบปฏบตการวนโดวส 64 bit
กอนทาการตดตงโปรแกรมใหเลอกไฟลตดตงใหตรงกบความตองการของระบบปฏบตการคอมพวเตอร
ทใช จากนนดบเบลคลกไฟลทตองการ และคลกไปท Install
จากนนจะเขาสกระบวนการตดตงโปรแกรม อาจตองใชเวลาสกคร ขนอยกบความเรวของเครอง
คอมพวเตอรดวย
โปรแกรม Java Jre ถกตดตงบนคอมพวเตอรเรยบรอยแลว
การตดตงโปรแกรม AppInventor
เรมตนเขาไปท http://www.appinventor.mit.edu/ เปนเวบไซดหลกในการเขาใชงาน
โปรแกรม และดาวนโหลดโปรแกรมสาหรบตดตงลงบนคอมพวเตอร
เราสามารถเขาไปดาวนโหลดไฟลโปรแกรมไดฟร โดยคลกไปท Explore หรอคลกท Welcome to MIT
App Inventor http://appinventor.mit.edu/explore/
หลงจากนนคลกเลอกทหวขอ Setup
คอมพวเตอรและระบบปฏบตการทใช
Macintosh (with Intel processor): Mac OS X 10.5, 10.6
Windows: Windows XP, Windows Vista, Windows 7
GNU/Linux: Ubuntu 8+, Debian 5+
โปรแกรมเวบบราวเซอรตางๆ ทจาเปนตองใช
Mozilla Firefox 3.6 หรอ สงกวา ***
Apple Safari 5.0 หรอ สงกวา ***
Google Chrome 4.0 หรอ สงกวา ***
Microsoft Internet Explorer 7 หรอ สงกวา
*** แนะนาใหใชโปรแกรมบราวเซอรเวอรชนลาสดในปจจบน
ขนตอนตอไปเปนขนตอนการตดตงโปรแกรม AppInventor
ทตาแหนงดานลางของเวบเพจ http://explore.appinventor.mit.edu/content/setup จะบอกถงขนตอน
การตดตงโปรแกรม AppInventor ทสามารถทางานไดบนระบบปฏบตการตางๆ ไมวาจะเปน Mac OS,
Linux และ Windows
โดยในทนผมจะขออธบายเฉพาะการตดตงโปรแกรมบนระบบปฏบตการ Windows เทานน โดยคลก
เลอกไปท Instructions for Windows
คลกเพอดาวนโหลดโปรแกรมเพอใชในการตดตง หลงจากดาวนโหลดเสรจเรยบรอย จะไดไฟลชอวา
AppInventor_Setup_Installer_v_1_2.exe
ไฟลโปรแกรมตดตงของ AppInventor ทไดจากการดาวนโหลด หลงจากนนดบเบลคลกเพอทาการ
ตดตงโปรแกรม
คลก Next เพอเขาสข นตอนถดไป
คลก I Agree เพอยอมรบขอตกลงในการเขาใชงานโปรแกรม AppInventor
เลอกตาแหนงสาหรบตดตงโปรแกรม แนะนาใหใชคาปกตทโปรแกรมตงไวให
คลกทปม Install เพอทาการตดตงโปรแกรม
การตดตงโปแกรม AppInventor อาจจะตองใชเวลาระยะหนง ขนอยกบความแรงของเครองคอมพวเตอร
หลงจากโปรแกรมทาการตดตงเสรจเรยบรอยแลวจะปรากฏหนาตางดงภาพ ใหคลกท Finish เพอเสรจ
สนกระบวนการตดตงโปรแกรม
การตดตงโปรแกรม AppInventor นนหลงจากตดตงเสรจ จะมไดรเวอรของโทรศพทมอถอบางรนตดตง
มาใหพรอมบนคอมพวเตอร เชน
• T-Mobile G1* / ADP1
• T-Mobile myTouch 3G* / Google Ion / ADP2
• Verizon Droid (not Droid X)
• Nexus One
• Nexus S
สาหรบผทใชอปกรณแอนดรอยด สามารถดาวนโหลดไดรเวอรแบบ OEM ไดฟรท
http://developer.android.com/sdk/oem-usb.html
หลงจากทเราไดทาการตดตงโปรแกรม และตงคาการใชงานรวมกนระหวางโทรศพทมอถอแอน
ดรอยดรวมกบคอมพวเตอรเรยบรอยแลว ขนตอนตอไปเปนขนตอนในการพฒนาแอพพลเคชน
กอนอนเปดโปรแกรมเวบบราวเซอรและไปทเวบไซด http://www.appinventor.mit.edu/
คลกเลอก Invent Create Mobile Apps ทอยบรเวณดานบนขวามอ
จะปรากฏหนาตาง LOGIN เพอเขาสระบบ
โดยกอนทเราจะทาการ Login เพอเขาไปใชงานไดนนเราจาเปนตองม Google Account เพอใชในการ
Login เขาสระบบเสยกอน ถายงไมมใหเขาไปลงทะเบยน Google Account เสยกอน
การสมคร Google Account เพอลงชอเขาใชงาน AppInventor
ในการเขาใชงาน App Inventor นน มความจาเปนตองลงชอในการเขาใชงานกอน จงจะ
สามารถใชงานได โดยในทนเราสามารถใชชอบญชจากทาง Google ซงกคอ Google Account นนเอง
และนอกจากนยงสามารถใช Gmail Accounts ในการเขาใชงานได ซงถาผใชมบญชของ Google อย
แลว หรอวาม Gmail อยแลว กสามารถลงชอเขาใชงาน AppInventor ไดเลย โดยไมจาเปนตองสมคร
บญชผใชใหม แตสาหรบผทยงไมมบญชผใชงานของ Google กสามารถสมครใหมไดตามขนตอน
ตอไปน
ขนตอนการสมครเพอขอใช Google Account
เรมตนไปท URL https://accounts.google.com/ จะปรากฏหนาจอดงภาพ
คลกทสมครใชงาน
สาหรบผสรางบญช Google ใหม ใหกรอกรายละเอยดและขอมลทจาเปน ใหถกตองและครบถวน
หลงจากสรางบญชผใชงานเสรจเรยบรอยแลว กจะไดบญชทสามารถนาไปใชในการ Login เพอเขาใช
งานโปรแกรม AppInventor ไดแลว
ทดสอบการเขาใชงาน AppInventor โดยพมพ URL ไปท http://appinventor.mit.edu จากนนจะ
ปรากฏหนาหลกของ App Inventor ดงภาพ คลกเลอกทหวขอ Invent เพอเขาใชงาน AppInventor
จากนนทาการลงชอเพอเขาใชงาน AppInventor
หลงจากลงชอเขาใชงานเสรจเรยบรอยแลวจะปรากฏหนาตางดงภาพ แสดงวาเราสามารถเขาใชงาน
โปรแกรม AppInventor ไดแลว
การสรางโปรเจคใหม
ขนตอนการสรางโปรเจคใหมสามารถไดงายๆ เพยงคลกท My Projects จากนนคลกท New
ตงชอไฟลตามตองการ แตจะตองไมมสญลกษณและอกขระพเศษ จากนนคลกท OK แคนเรากจะได
โปรเจคใหมขนมาแลว
หลกจากสรางโปรเจคใหมเรยบรอย โปรแกรม AppInventor จะเขาสหนาตางการออกแบบโดยอตโนมต
การดาวนโหลดซอรสโคด
ไฟลโปรเจคทถกสรางขนและพฒนาอยนน เราสามารถทาการดาวนโหลดเพอเกบไฟลนนไวใช
ในการพฒนาตอไปได อกทงยงสามารถนาไฟลทไดไปใชกบคอมพวเตอรเครองอนไดดวย ขนตอนดาวน
โหลดทาไดงายๆดงนคอ คลกเลอกท My Project จากนนทาเครองหมายถกหนาโปรเจคทตองการ
เสรจแลวคลกทหวขอ More Actions จากนนเลอก Download Source เพอเรมการดาวนโหลด
หลงจากดาวนโหลดไฟลโปรเจคทตองการเปนทเรยบรอยแลว ไฟลทไดจะเปนไฟลทถกบบอด(ZIP)
เอาไว ซงสามารถนาไปใชงานตอได โดยขนตอนของการอพโหลด
การอพโหลดซอรสโคด
การอพโหลดซอรสโคดนน จะเปนการนาไฟลโปรเจคทเราไดจดเกบเอาไว มาใชงาน เพอแกไข
หรอพฒนาตอ โดยไฟลทจะทาการอพโหลดไดนนจะเปนไฟลทถกบบอด (ZIP) โดยมขนตอนดงนคอ
เรมตนไปท My Projects จากนนทหวขอ More Actions คลกเลอกไปท Upload Source เพอทาการอพ
โหลด
จะปรากฏหนาตางสาหรบเลอกไฟลทตองการจะอพโหลด คลกท Choose File จากนนเลอกไฟลท
ตองการจะอพโหลด เสรจแลวคลก OPEN และ OK ตามลาดบ
หลงจากทไดทาการอพโหลดไฟลเสรจสนแลว จากนนกจะเขาสหนาตางของการพฒนาตอไป
เรมตนเขยนโปรแกรมกบ Hello World
หลงจากททาความรจกกบ AppInventor มาพอสมควรแลว แตไปเราจะสรางโปรแกรมตวแรก
กน กบโปรแกรม Hello World
สรางโปรเจคขนมาใหม แลวตงชอตามตองการ ในทนตงชอเปน Hello World
นาเครองมอทตองการใชงาน ซงประกอบดวย Label และ Button ลากแลววางบนพนทวางบรเวณ
หนาจอออกแบบ
คลกท Open Blocks Editor เพอเปดโปรแกรม blocks editor ขนมา เพอใชสาหรบเขยนคาสงการ
ทางานใหกบโปรแกรม
จะปรากฏชอไฟล AppInventorForAndroid.jnlp ใหคลกทปม Keep เพอดาวนโหลดและจดเกบไฟลท
ไดลงบนคอมพวเตอร ในกรณนเปนการใชงานบราวเซอร Google Chrome
จากนนคลกทชอไฟลทดาวนโหลดเสรจแลว เพอเรยกใชงานโปรแกรม blocks editor ขนมา
ไฟลทไดจากการดาวนโหลด
**** ในกรณทบราวเซอรเปน Internet Explorer จะปรากฏหนาตางดงภาพ ซงเราสามารถคลกทปม
Save เพอจดเกบไฟลเอาไวกอน หรอจะคลกทปม Open เพอเปดไฟล กไดเชนกน
**** ในกรณทบราวเซอรเปน Firefox จะปรากฏหนาตางดงภาพ ใหคลกไปทปมตกลง จะเปนการดาวน
โหลดไฟลและเรยกโปรแกรม Block Editor ขนมา
เลอกบลอกทตองการ ในทนคอ Button. Click จากนนลากไปวาง ทอยในเครองมอ Button มาวาง
บรเวณพนทวาง
หลงจากลากมาวางเรยบรอยแลวจะปรากฏดงภาพ
คลกลากเครองมอ Label1.Text ไปไวในบลอก Button1.Click
การลากบลอกไปวางตอกนนนจะตองวางใหไดลงตวพอดกบบลอกอน มเชนนนโปรแกรมจะไมสามารถ
ทางานได ดงภาพ
คลกเลอกเครองมอ Text วางตอทาย Label1.Text เพอใชในการแสดงขอความ
จากภาพสามารถอธบายการทางานไดดงนคอ เมอคลกทปม Button 1 แลว ขอความ text จะแสดงขน
แทนทตาแหนงของ Label1
เราสามารถแกไขขอความทเครองมอ text ไดตามตองการ ในทนใหตงชอวา Hello World
จาลองการทางานของโปรแกรมดวย Emulator
หลงจากเขยนคาสงใหกบโปรแกรมเสรจเรยบรอยแลว ขนตอนตอไปจะเปนการทดสอบการ
ทางานของโปรแกรม โดยจะใชวธการจาลองการทางานของโปรแกรม ซงสามารถทาโดยการคลกเลอก
ไปท New emulator
รอสกคร จะปรากฏหนาตาง emulator ขนมา เพอจาลองการทางานของโปรแกรมทเราไดสรางขน
ยอนกลบไปท Block Editor ใหทาการคลกไปท emulator เพอเชอมตอโปรแกรมใหไปแสดงผลการ
ทางานทหนาตาง emulator
เมอโปรแกรมทาการเชอมตอกบ emulator เปนทเรยบรอยแลว กจะแสดงหนาตาโปรแกรมทเราไดทา
การออกแบบไว
จากนนเรมตนทดสอบการทางานของโปรแกรม โดยการคลกทปม Button1 กจะมขอความ Hello World
ปรากฏขน แทนทของ
การอพโหลดไฟลมลตมเดย
การพฒนาแอพพลเคชนนนสงทสาคญและขาดไมไดเลยอยางหนงกคอ การใชงานไฟลประเภท
มลตมเดย ซงประกอบดวยภาพ และเสยง เพราะฉะนน เราจงจาเปนตองเรยนรหลกการทางานใน
เบองตนวาโปรแกรม AppInventor นนสามารถรองรบการทางานของภาพและเสยงประเภทใดไดบาง
และมขนตอนการอพโหลดไฟลเหลานนไปยงโปรเจคงานของเราไดอยางไร อธบายไดดงนคอ
• ไฟลภาพทโปรแกรม Appinventor รองรบ *.JPG , *.GIF, *.PNG, *.BMP
• ไฟลเสยงรปแบบตางๆ ท AppInventor รองรบ *.3GP, *.MP4, *.M4A , *.MP3, *.MID,
*.XMF, *.MXMF, *.RTT., *.RTX, *.OTA, *.IMY , *.OGG, *.WAV
ขนตอนการอพโหลดไฟลทงภาพและเสยงเพอนามาใชงานในโปรแกรมนนมข นตอนการทางานท
เหมอนกน ดงนคอ
1. ทเมน Media จะเปนทอยของไฟลตางๆ ทงภาพและเสยงทเราไดทาการอพโหลดไวในโปรเจค
ซงสามารถอพโหลดใหมไดโดยคลกท Upload new….
2. จากนนจะปรากฏหนาตางสาหรบเลอกไฟลทตองการจะอพโหลด ใหคลกท Choose File
3. เลอกไฟลตามทตองการ จากนนคลก Open
4. จากนนคลกท OK เพอทาการอพโหลดไฟลไปยงโปรเจคของเรา
การอพโหลดเสรจเรยบรอย ระยะเวลาในการอพโหลดนนขนอยกบความเรวของอนเตอรเนตและขนาด
ของไฟล
ไฟลทเราไมตองการใชในโปรเจค สามารถทาการลบทงได โดยการคลกเลอกไฟลทตองการจะลบทง
จากนนคลกท Delete
ถาตองการดาวนโหลดไฟลทมอยในโปรเจคเอามาเกบไวในคอมพวเตอร สามารถทาไดโดยการคลกท
ไฟลทตองการดาวนโหลด จากนน คลกท Download to my computer เพอจดเกบไฟลทไดลงบน
คอมพวเตอร
ตวอยางการนาไฟลภาพไปใชงาน
1. นาเครองมอ Button มาวางบนหนาจอการออกแบบ
2. อพโหลดไฟลภาพทตองการใชในโปรเจคน ตวอยางจะเปนภาพแมว
3. อพโหลดไฟลเสยงทตองการ ตวอยางจะเปนเสยงรองของแมว
4. จะไดไฟลภาพและเสยงเรยบรอยแลว
5. คลกท Button1 จากนนไปท Properties Image เลอกไฟลทไดอพโหลดไวแลว ชอวา cat.jpg
จากนนคลกท OK
หนาตาโปรแกรมเราจะไดดงน
6. เลอกเครองมอทชอวา Sound ในหมวดหมเครองมอ Media จะปรากฏเครองมอใหเหนดงภาพ
7. คลกทเครองมอ Sound1 จากนนปรบคา Properties Source เลอกไฟลทตองการ ทไดอพโหลด
ไวแลว ชอวา cat.wav จากนนคลกท OK
8. เปดโปรแกรม Block Editor ขนมา เพอเขยนโคดคาสงของโปรแกรม
9. ทดสอบการทางานของโปรแกรม ผลลพธทเกดขนคอทกครงทมการกดปม ซงใชภาพแมวแทน
ปมกด กจะเกดมเสยงรองของแมวเกดขน
การสรางไฟลสาหรบตดตง Android Application Package file (APK)
ไฟล .apk คอตวแพคเกจทรวบรวมไฟลในการตดตงโปรเเกรมตางๆบนระบบปฏบตการ Android
เมอเปรยบเทยบกบ Windows เเลวมนกคอไฟล .exe ทเอาไวตดตงโปรเเกรมตางๆ นนเอง
การสรางไฟล APK ดวยโปรแกรม AppInventor นนสามารถทาได 3 วธดวยกนคอ
1. Show Barcode
2. Download to this Computer
3. Download to Connected Phone
1. Show Barcode โปรแกรม AppInventor จะสรางลงคสาหรบดาวนโหลดไฟล apk ขนมาแตจะ
เปนรปแบบของการแสดงเปนบารโคด ซงการทเราจะอานบารโคดไดนนเราจาเปนตองใชโปรแกรม ***
Barcode Scanner ทาการอานรหสบารโคดทโปรแกรม AppInventor เสยกอน
***โปรแกรม Barcode Scanner สามารถดาวนโหลดโปรแกรม ไดจาก Google Play
ทเมน Package for Phone เลอกท Show Barcode
โปรแกรมจะทาการสรางไฟล APK โดยอาจจะตองใชระยะสกคร ทงนขนอยกบขนาดของไฟลโปรแกรม
หลงจากทโปรแกรม app inventor สรางไฟล APK เรยบรอยแลว จะปรากฏหนาตางแสดงภาพบารโคด
ขนมา จากนนใหเราเปดโปรแกรม Barcode Scanner แลวทาการอานรหสจากภาพบารโคดนน
เมอทาการอานบารโคดเสรจเรยบรอยแลว จะปรากฏหนาตางดงภาพ ซงจะเปนลงคทใชในการเขาไป
ดาวนโหลดไฟล APK นนเอง
ไฟล APK เปนไฟลท Widows ไมไดรองรบเรองของความปลอดภย เพราะฉะนนจะมขอความขนมาเพอ
แจงเตอนเกยวกบไฟล APK นน ใหเราคลกทตกลงเพอยอมรบ และทาการดาวนโหลด
ไฟลทไดจากการดาวนโหลดนนจะถกจดเกบไวในโฟลเดอรดาวนโหลดบนอปกรณแอนดรอยด แคทงน
ขนอยกบอปกรณแอนดรอยดแตละรน
เราสามารถตดตงโปรแกรมไดโดยการคลกเลอกทโปรแกรม จากนนจะปรากฏหนาตางสาหรบตดตง
โปรแกรม จากนนเลอกทตดตง
โปรแกรมทเราพฒนาขนมาดวยโปรแกรม AppInventor ถกตดตงลงบนอปกรณแอนดรอยดของเราเปน
ทเรยบรอย
2. Download to this Computer วธนเปนวธการดาวนโหลดไฟล APK มาเกบไวทคอมพวเตอร
เหมาะสาหรบการนาไฟลไปตดตง เพอใชงานในภายหลง
ทเมน Package for Phone คลกเลอกท Download to this Computer
โปรแกรมจะทาการสรางไฟล APK โดยอาจจะตองใชระยะสกคร ทงนขนอยกบขนาดของไฟลโปรแกรม
ไฟล APK ถกดาวนโหลดและจบเกบลงบนคอมพวเตอรเปนทเรยบรอยแลว
3. Download to Connect Phone วธนเปนวธทนยมทสด เพราะการใชงายคอนขางงาย และ
สะดวก แตกอนจะใชงานไดนนจาเปนตองตดตงไดรเวอรใหกบอปกรณแอนดรอยดเสยกอน เพอให
คอมพวเตอรนนสามารถสอสารกบอปกรณแอนดรอยดไดโดยตรงผานทาง ADB (Android Debug
Bridge) ซงจะทาหนาทดาวนโหลดและตดตงไฟล APK บนอปกรณแอนดรอยดโดยตรงเพอใหสามารถ
นาไปใชงานไดเลย โดยไมจาเปนตองมาตดตงภายหลง
โปรแกรม AppInventor จาเปนตองเรยกใชงาน Block Editor เพอใหทาการเชอมตอกบอปกรณแอน
ดรอยดกอนทจะดาวนโหลดและตดตงโปรแกรม
อปกรณแอนดรอยดไมถกเชอมตอ
เปดโปรแกรม Block Editor ขนมาแลวทาการเชอมตออปกรแอนดรอยดไปยงคอมพวเตอร จากนนทเมน
Connect to Device ใหคลกเลอกไปยงอปกรณแอนดรอยดทเราเชอมตอเอาไว โดยสงเกตทหมายเลข
ประจาตวของเครอง 16 หลก ทแสดงขนมา
รอจนกวาการเชอมตอคอมพวเตอรกบอปกรณแอนดรอยดจะสาเรจดงภาพ
กลบไปทหนาจอการออกแบบแลวคลกเลอกท Download to Connected Phone
โปรแกรมจะทาการสรางไฟล APK จากนนจะดาวนโหลดและตดตงไฟล APK ลงบนอปกรณแอนดรอยด
โดยอาจจะตองใชระยะสกคร ทงนขนอยกบขนาดของไฟลโปรแกรม
หลงจากทดาวนโหลดและตดตงไฟล APK ลงบนอปกรณแอนดรอยดเรยบรอยแลว จะปรากฏหนาตางดง
ภาพ จากนนคลกท OK และ Dismiss การทางานของโปรแกรมเสรจเรยบรอยแลว
Screen Arrangement Components
เครองมอทชวยในการจดวางตาแหนง ซงจะใชในการออกแบบหนาตาโปรแกรม
แบงไดเปน 3 รปแบบ ดงน
1. Horizontal Arrangement การจดวางเครองมอตางในรปแบบแนวนอน
2. Table Arrangement การจดวางเครองมอตางๆในรปแบบตาราง
3. Vertical Arrangement การจดวางเครองมอตางๆในรปแบบแนวตง
1) Horizontal Arrangement การจดวางรปแบบของเครองมอในแนวนอน
เครองมอตางๆทอยภายใน Horizontal Arrangement จะถกวางเรยงตอๆกนในแนวนอน
วางเครองมอ Button ไปไวใน Horizontal Arrangement ซงจะเหนไดวาเครองมอทอยใน Horizontal
Arrangement นนจะถกจดวางตาแหนงในรปแบบของแนวนอน
Properties การปรบแตงคณสมบตตางๆ กสามารถทาได
Align Horizontal และ Align Vertical เปนการจดรปแบบเครองมอตางๆทอยใน Horizontal
Arrangement ใหมตาแหนงตามตองการ คาปกตของ Align Horizontal จะเปน Left ชดซาย
ซงสามารถปรบให Center กงกลาง หรอวา Right ชดขวา ได แตกอนทจะปรบตาแหนงให
กงกลางหรอชดขวาไดนน เราจาเปนตองปรบความกวาง Width ใหมขนาด Pixel ตามทตองการ
หรอเปน Fill parent กอน
Visible การตงคาการแสดงผลการทางานของเครองมอ สามารถเลอกไดคอ showing แสดงผล
hidden ซอนไวไมแสดงผล ซงในการเขยนโปรแกรมนนจะใชคาสง Visible true เพอใหแสดง
และ Visible False เพอไมใหแสดงผล
Width ปรบขนาดความกวางของเครองมอ คาปกตจะตงอยท Automatic แตสามารถเลอกให
เปน Fill parent เพอปรบขนาดใหเตมความกวางของหนาจอ หรอจะเลอกกาหนดขนาดเอง
โดยการกาหนดคาเปนจานวนพกเซลกได
Height ปรบขนาดความสงของเครองมอ คาปกตจะตงอยท Automatic แตสามารถเลอกใหเปน
Fill parent เพอปรบขนาดใหเตมความสงของหนาจอ หรอจะเลอกกาหนดขนาดเอง โดยการ
กาหนดคาเปนจานวนพกเซลกได
2) Table Arrangement การจดวางรปแบบของเครองมอในลกษณะของตาราง
เครองมอตางๆทอยภายใน Table Arrangement จะถกวางเรยงในรปแบบของตารางคอมทง
แนวตงและแนวนอน ซงเครองมอตางๆทวางไดนน จะวางตามจานวนทกาหนดไวใน Properties
Column และ Rows
วางเครองมอ Button ไปไวใน Table Arrangement ซงจะเหนไดวาเครองมอทอยใน Table
Arrangement นนจะถกจดวางตาแหนงในรปแบบของตาราง
Properties การปรบแตงคณสมบตตางๆ กสามารถทาได
Columns กาหนดขนาดจานวนของคอลมน
Rows กาหนดขนาดจานวนของแถว
Visible การตงคาการแสดงผลการทางานของเครองมอ สามารถเลอกไดคอ showing แสดงผล
hidden ซอนไวไมแสดงผล ซงในการเขยนโปรแกรมนนจะใชคาสง Visible true เพอใหแสดง
และ Visible False เพอไมใหแสดงผล
Width ปรบขนาดความกวางของเครองมอ คาปกตจะตงอยท Automatic แตสามารถเลอกให
เปน Fill parent เพอปรบขนาดใหเตมความกวางของหนาจอ หรอจะเลอกกาหนดขนาดเอง
โดยการกาหนดคาเปนจานวนพกเซลกได
Height ปรบขนาดความสงของเครองมอ คาปกตจะตงอยท Automatic แตสามารถเลอกใหเปน
Fill parent เพอปรบขนาดใหเตมความสงของหนาจอ หรอจะเลอกกาหนดขนาดเอง โดยการ
กาหนดคาเปนจานวนพกเซลกได
3) Vertical Arrangement การจดวางรปแบบของเครองมอในแนวตง
เครองมอตางๆทอยภายใน Vertical Arrangement จะถกวางเรยงตอๆกนในแนวตง
วางเครองมอ Button ไปไวใน Vertical Arrangement ซงจะเหนไดวาเครองมอทอยใน Vertical
Arrangement นนจะถกจดวางเรยงตอๆกน ในรปแบบของแนวตง
Properties การปรบแตงคณสมบตตางๆ กสามารถทาได
Align Horizontal และ Align Vertical เปนการจดรปแบบเครองมอตางๆทอยใน Vertical
Arrangement ใหมตาแหนงตามตองการ ซงคาปกตของ Align Horizontal จะเปน Left ชด
ซาย ซงสามารถปรบให Center กงกลาง หรอวา Right ชดขวา ได แตกอนทจะปรบตาแหนง
ใหกงกลางหรอชดขวาไดนน เราจาเปนตองปรบความกวาง Width ใหมขนาด Pixel ตามท
ตองการ หรอเปน Fill parent กอน
Visible การตงคาการแสดงผลการทางานของเครองมอ สามารถเลอกไดคอ showing สงให
แสดงผล hidden ซอนไวไมแสดงผล ซงในการเขยนโปรแกรมนนจะใชคาสง Visible true
เพอใหแสดง และ Visible False เพอไมใหแสดงผล
Width ปรบขนาดความกวางของเครองมอ คาปกตจะตงอยท Automatic แตสามารถเลอกให
เปน Fill parent เพอปรบขนาดใหเตมความกวางของหนาจอ หรอจะเลอกกาหนดขนาดเอง
โดยการกาหนดคาเปนจานวนพกเซลกได
Height ปรบขนาดความสงของเครองมอ คาปกตจะตงอยท Automatic แตสามารถเลอกใหเปน
Fill parent เพอปรบขนาดใหเตมความสงของหนาจอ หรอจะเลอกกาหนดขนาดเอง โดยการ
กาหนดคาเปนจานวนพกเซลกได
การตดตงแอพพลเคชนบนอปกรณแอนดรอยด
การตดตงแอพพลเคชนบนอปกรณแอนดรอยดนนสามารถทาไดหลายวธ ซงโดยปกตกคอ จะใช
วธการดาวนโหลดไฟลตดตงโดยตรงจาก Google Play ซงจะทาใหเราไมสามารถมองเหนตวไฟลนนได
จรงๆ เพราะระบบจะดาวนโหลดและตดตงใหเองอตโนมต และขอจากดอกอยางคอตองเปน
แอพพลเคชนทไดบรรจไวใน Google Play เทานน ไมสามารถตดตงจากทอนได เพราะฉะนนจงตองม
ขนตอนและการตงคาเพอใหสามารถตดตงแอพพลเคชนทมาจากทอนได วธการคอจะทาการตดตงโดย
การใชไฟลนามสกล apk นนเอง ซงการตดตงไฟล apk บนอปกรณแอนดรอยดนน จะตองมการตงคา
ของอปกรณแอนดรอยดเสยกอน มเชนนนจะไมสามารถตดตงโปรแกรมได ขนตอนการตงคามดงตอไปน
เรมตนเขาไปทเมน การตงคา (Setting) จากนนเลอกไปทเมนระบบปองกน (Security) ทา
เครองหมายถกทเมน แหลงทไมรจก (Unknown Sources) เพออนญาตใหตดตงแอพพลเคชนจาก
แหลงทมาอนๆ ทไมไดมาจาก Play Store
**** ไฟล .apk คอตวเเพคเกจทใชในการตดตงแอพพลเคชนตางๆบนระบบปฏบตการแอนดรอยด เมอ
นาไปเปรยบเทยบกบ Windows เเลวมนกคอไฟลนามสกล .exe ทเอาไวตดตงโปรเเกรมนนเอง
วธการตดตงแอพพลเคชนลงบนอปกรณแอนดรอยด
สามารถทาไดหลายวธดวยกน ดงน
1. ตดตงผาน USB Storage Device
2. ตดตงผาน ADB (Android Debug Bridge)
3. ตดตงผาน Wi-Fi
สามารถทาไดโดยมขนตอนดงน
1. ตดตงผาน USB Storage Device เปนการใชงานเชนเดยวกนกบอปกรณจบเกบขอมลทวไป
หลงจากทไดตดตงไดรเวอรใหกบอปกรณแอนดรอยดเปนทเรยบรอยแลว สามารถเขาใชงานผานทาง
short cut ทแสดงอยภายใน my computer ไดเลย
อปกรณจดเกบขอมลทแสดงในภาพ เปนอปกรณจดเกบขอมลทตดตงอยภายในของอปกรณ
แอนดรอยด Tablet คอชอพนททใชจดเกบขอมลภายในของระบบปฏบตการแอนดรอยดซงสามารถใช
เปนพนทในการจดเกบขอมลทวไปได เปรยบเสมอนกบไดรฟ C ของคอมพวเตอร และ Card คอชอ
พนทจบเกบขอมลทถกเพมเขาไปในอปกรณแอนดรอยดกเปรยบเสมอนกบไดรฟ D ของคอมพวเตอร
นนเอง
เมอเขาไปยงพนจดเกบขอมลดงกลาวแลวใหนาไฟลนามสกล .apk ซงเปนไฟลสาหรบตดตง
แอพพลเคชนนน คดลอกไปเกบไวยงพนทวาง ในตาแหนงใดกได
จากนนเปดโปรแกรมประเภท File manager , apk Installer ซงเปนโปรแกรมใชงานทถกตดตง
ไวแลวบนอปกรณแอนดรอยด เพอทาการตดตงโปรแกรมทเราไดคดลอกไปไวยงพนทจดเกบ ซงถาไมม
โปรแกรมประเภทนกสามารถดาวนโหลดไดจาก Google Play
ในตวอยางเปนการใชงานโปรแกรมประเภท File manager เพอเขาไปยงพนททไดจดเกบไฟล
apk เอาไว
จากนนเขาไปยงพนททเราไดจดเกบไฟลตดตงเอาไว
เราสามารถคลกเลอกไฟลทตองการจะตดตงไดเลย ดงตวอยางเปนการตดตงไฟลทช อวา MyTest_2 ซง
มนามสกล .apk
แสดงหนาตางการตดตงโปรแกรม ใหเลอกไปทตดตง
หลงจากการตดตงโปรแกรมเรยบรอยแลว กสามารถเปดเพอใชงานไดเลย
2. ตดตงผาน ADB (Android Debug Bridge) เปนรปแบบการสอสารระหวางคอมพวเตอรกบ
อปกรณแอนดรอยดรปแบบหนง ทจาเปนมากในการพฒนาแอพพลเคชนบนแอนดรอยด เพราะมความ
สะดวกและรวดเรวอกทงยงสามารถจาลองการทางานของแอพพลเคชนทกาลงพฒนาอยไดโดยไม
จาเปนตองตดตงโปรแกรมกอน ผานคณสมบตการทางาน ทเรยกวา usb debugging
กอนอนเขาไปทเมนการตงคา (Setting) โดยสญลกษณและรปแบบของการตงคาอาจแตกตาง
กนไปตามระบบปฏบตการแอนดรอยดทใชอย
จากนนเลอกเมน ทางเลอกสาหรบผพฒนา (Developer Options) ทบรเวณขวามอจะขนมอ จะม
หนาตางแสดงทางเลอกสาหรบผพฒนาขน ใหทาเครองหมายถกทการแกไขจดบกพรอง USB
(USB debugging)
จากนนทคอมพวเตอรจะปรากฏหนาตาง เพอแสดงการคนหาไดรเวอรสาหรบอปกรณแอนดรอยดนนขน ถา
คอมพวเตอรทใชถกตดตงไดรเวอรของอปกรณแอนดรอยดไปแลวจะปรากฏหนาตางดงภาพ
แตถาไมขนหนาตางดงภาพ แสดงวาคอมพวเตอรยงไมไดตดตงไดรเวอร ใหเราตรวจสอบอปกรณแอน
ดรอยดวาไดตดตงไดรเวอร ADB เรยบรอยหรอไม โดยการคลกขวาท My Computer จากนนเลอก
Properties
คลกเลอกท Device Manager
จะแสดงรายชอของอปกรณฮารดแวรตางๆ ทถกตดตงอยบนคอมพวเตอร รวมถงอปกรณแอนดรอยดท
เราไดทาการเชอมตอไวดวย ใหสงเกตทอปกรณแอนดรอยดวามเครองหมายคาถาม หรอเครองหมาย
ตกใจเกดขนหรอไม ถาใชแสดงวา อปกรณแอนดรอยดทเราใชงานอยนน ไมสามารถเชอมตอกบ
คอมพวเตอรได ถาเปนเชนนนใหเราตดตงไดรเวอรของอปกรณแอนดรอยดตวนนลงไป ตามรนและ
ยหอของอปกรณแอนดรอยดนนๆ ซงเราสามารถใชแผนไดรเวอรทแถมมาใหตอนซอ หรอ จะดาวน
โหลดจากเวบไซดของผผลตกได http://developer.android.com/tools/extras/oem-usb.html
การตดตงไดรเวอรนนทาไดเชนเดยวกนกบการตดตงโปรแกรมทวไป โดยกอนทาการตดตงไดรเวอรนน
ใหถอดสายสญญาณทเชอมตอกบคอมพวเตอรออกกอน หลงจากตดตงไดรเวอรเสรจเรยบรอยแลวจะ
แสดงดงภาพ
3) ตดตงผาน Wi-Fi หลายๆคนมปญหาเรองของการตดตงไดรเวอร ของ อปกรณแอนดรอยดเขา
กบคอมพวเตอรเพอใชงาน ADB (Android Debug Bridge) ปจจบน AppInventor มการพฒนาให
สามารถเชอมตออปกรณแอนดรอยดเขากบคอมพวเตอรทใชเขยนโปรแกรม AppInventor ไดโดยจะม
การทางานผานทางสญญาณ WiFi นนหมายถงวาอปกรณแอนดรอยดและคอมพวเตอรกตองรองรบการ
ทางานของ WiFi ดวยเชนกน
ขนตอนเรมตนโดยการดาวนโหลดแอพพลเคชนมา 1 ตวชอวา MIT AICompani ซงสามารถทา
การดาวนโหลดไดจาก Google Play หรอจะดาวนโหลดโดยตรงจากเวบของ AppInventor.mit.edu กได
หลงจากดาวนโหลดและตดตงโปรแกรมเรยบรอยแลว ใหเปดแอพพลเคชนขนมาเพอทจะทาการเชอมตอ
อปกรณแอนดรอยดของเราเขากบคอมพวเตอรของเราผานสญญาณ WiFi
จากนนเปดโปรแกรม Block Editor ขนมา ทตวเลอก Connect to Device ใหคลกเลอกท WiFi เพอทา
การเชอมตอผานสญญาณ WiFi การใชงานเพยงแคผใช กรอกรหสทไดจาก Block Editor ซงจะมการ
แสดงรหสทจะใชในการจบค
รหสทใชในการจบคกบอปกรณแอนดรอยดกบคอมพวเตอร ผานสญญาณ WiFi
ใสรหสลงไปในชองวางของโปรแกรม MIT AICompani ทเราไดเปดเอาไวแลว ใหถกตองตรงกนกบ
ตวเลขทแสดงใน Block Editor จากนนคลกท Connect to App Inventor
หรอจะใชวธการแสกนโดยผานโปรแกรม QR Code แทนการกรอกรหสกได เพราะผลลพธทไดจะ
เหมอนกน
ขนตอนการตดตงโปรแกรมผาน Wi-Fi นนสามารถทาไดเชนเดยวกนกบการตดตงโปรแกรม
ผาน ADB (Android Debug Bridge) คอ หลงจากทเราไดเชอมตอ Wi-Fi เปนทเรยบรอยแลว ทมมมอง
การออกแบบ ใหคลกเลอกท Download to Connect Phone
จากนนรอสกคร จนกวาจะมขอความแจงเตอน วาการตดตงแอพพลเคชนเสรจเรยบรอยแลว
สาหรบระบบปฏบตการแอนดรอยดเวอรชน 4.1.2 จะมการแจงเตอนการตดตงแอพพลเคชนขนมา ให
เราคลกทตดตง เพอทาการตดตงโปรแกรมลงบนอปกรณแอนดรอยดของเรา ถอวาเสรจสน
กระบวนการพฒนาโปรแกรม
ขอดของการเชอมตอผานไวไฟกคอไมจาเปนตองตดตงไดรเวอรของอปกรณแอนดรอยดลงบน
คอมพวเตอร และทางานแบบไรสายจงสะดวกในการใชงาน แตขอเสยคอการเชอมตอผานไวไฟนน
โปรแกรมทมขนาดใหญ อาจจะทาใหการเชอมตอมปญหา ไวไฟอาจจะหลดไดงาย และตองทาการ
เชอมตออยบอยๆ
AppInventor กบการสอสารแบบไรสาย Bluetooth
AppInventor มชดคาสงพเศษทสามารถใชงาน Bluetooth ในการตดตอสอสารกบอปกรณบลทธ
อนๆได โดยในตวอยางจะขอแบงออกเปน 2 เรองดวยกน ดงน
1. เขยนโปรแกรมตดตอกบคอมพวเตอร
2. เขยนโปรแกรมเพอควบคมการทางานของหนยนต
1) เรมตนเขยนโปรแกรมตดตอกบคอมพวเตอร
คอมพวเตอรทใชในการทดสอบนเปนคอมพวเตอรโนตบก ทมโมดลสอสารไรสายบลทธตดตงไว
แลวภายในตวเครอง และอปกรณแอนดรอยดนนโดยปกตกจะมโมดลสอสารไรสายบลทธ ถกตดตงอยใน
ภายในตวเครองเชนกน เพราะฉะนนเราสามารถนามาใชงานไดเลยโดยไมจาเปนตองตดตงเพมเตม แต
การทจะตดตอสอสารกนไดนนจาเปนจะตองมข นตอน เรยกวาการจบคอปกรณ ซงจะทาใหอปกรณทง
สองรจกกนนนเอง มข นตอนการดงนคอ
เรมตนใหเปดการทางานของบลทธทอปกรณทงสองกอน โดยทอปกรณแอนดรอยดทาไดงายๆ เขาไปท
การตงคา (Setting) ทเมนการเชอมตอไรสายและเครอขาย (Wireless and network) ทหวขอบลทธให
กดเลอกเพอเปดการทางานของบลทธ
หลงจากเปดการทางานของอปกรณแอนดรอยดเรยบรอยแลว จากนนเขาไปเปดการทางานบลทธของ
คอมพวเตอร โดยใหสงเกตทบรเวณทากบารของคอมพวเตอรจะมสญลกษณรปบลทธเกดขน
จากนนใหคลกขวาทรปสญลกษณบลทธ แลวคลกเลอกทไป Open Settings
จะปรากฏหนาตางดงภาพ ใหคลกทาเครองหมายถกท Allow Bluetooth devices to find this
computer เพอกาหนดใหอปกรณบลทธอนๆ สามารถมองเหนคอมพวเตอรเครองนได
หลงจากนนคลกไปทแถบ COM Ports เพอตรวจสอบชองทางการสอสารของบลทธ ทจะใชในการสอสาร
กบอปกรณอนๆ
แสดงตาแหนงพอรตสอสารทใชสาหรบเชอมตอและสอสารกบอปกรณบลทธอนๆ
ทอปกรณแอนดรอยดบรเวณดานบนขวามอจะมรปสญลกษณของการคนหาอปกรณบลทธอย ใหเราคลก
เลอกและสงเกตทบรเวณดานลาง จะแสดงรายชอของบลทธทสามารถคนหาได
คลกเลอกไปทอปกรณบลทธทตองการเชอมตอ จากนนรอสกครจะขนขอความแสดงบนคอมพวเตอร
จะมหนาตางแสดงขอความการขออนญาตในการจบค สงเกตจากขอความตวเลขทแสดงทางดานของ
คอมพวเตอร และอปกรณแอนดรอยดจะมตวเลขเหมอนกน
ทอปกรณแอนดรอยดใหคลกทตกลง เพอยอมรบการจบคกบคอมพวเตอร
คลก Next ทคอมพวเตอรเพอทาขนตอนถดไป
ถาหากการจบคบลทธไมมปญหาเกดขน กจะแสดงขอความดงภาพ เปนอนเสรจสนขนตอนการจบค
สงเกตทอปกรณจะขนขอความวาจบคแลว แสดงวาการจบคบลทธของอปกรณทงสองเปนอนเสรจสน
ในเมนเครองมอหวขอ Device and Printers จะแสดงใหเหนอปกรณบลทธทไดทาการจบคไวแล
เขยนโปรแกรมแอนดรอยดเพอตดตอกบคอมพวเตอร
เรมตนเราจะพฒนาโปรแกรมโดยใช AppInventor ขนมาหนงตวเพอนาไปใชงานกบอปกรณ
แอนดรอยดของเรา จากนนจะทาการทดสอบการทางานของคาสงบลทธ ทถกเขยนดวย AppInventor
และสงขอมลผานไปยงคอมพวเตอรโดยการสอสารผานบลทธ โดยในคอมพวเตอรนนจะถกตดตง
โปรแกรม สาหรบรบสงขอมลแบบอนกรม โดยโปรแกรมมชอวา Parallax-Serial-Terminal ซงจะทา
หนาทแสดงผลขอมลทถกสงมายงคอมพวเตอร สามารถดาวนโหลดโปรแกรมใชงานฟรไดท
http://www.parallax.com/Portals/0/Downloads/sw/propeller/Parallax-Serial-Terminal.zip
ขนตอนการเขยนโปรแกรมสาหรบอปกรณแอนดรอยดมดงน
1. เขาไปท appinventor.mit.edu จากนนเรมตนเขาสระบบ และสรางโปรเจคใหม คลกท New
จากนนทาการตงชอตามตองการ
2. ทาการออกแบบหนาตาโปรแกรม พรอมทงนาเครองมอทจาเปนใสเขาไปในโปรแกรม โดยจะ
ประกอบไปดวย ปมกด 2 ปม ทถกสรางดวยเครองมอ Button และ Lispicker โดยจะใช Lispicker
เปนปมสาหรบกดเพอเชอมตออปกรณบลทธ และปม Button จะเปนปมทเอาไวยกเลกการเชอมตอ และ
เครองมอทสาคญอกอยางหนงคอ BluetoothClient จากนนปรบแตงหนาตาโปรแกรมใหสวยงามตาม
ตองการดงตวอยาง
3. หลงจากไดตวเชอมตอเรยบรอยแลว จากนนทาการเพมปมกดเพอทจะใชในการสงขอมลไปยง
คอมพวเตอร
4. ทาการแกไขปรบแตงเครองมอตางตามตองการเชน Properties Text , Font Size ในตวอยาง
ปรบคาเพอใหตวอกษรมขนาดใหญขน มองเหนไดชดเจนขน ทงนผใชสามารถปรบแตงเพมเตมในสวน
Properties อนๆไดตามตองการ
5. หนาตาโปรแกรม ทออกแบบเสรจเรยบรอยประกอบดวยปมตางๆ คอ 1 ปมสาหรบทาหนาทใน
การเชอมตอบลทธกบอปกรณภายนอก 2 ปมสาหรบทาหนาทยกเลกการเชอมตอ ปมท 3-6 เปนปม
สาหรบสงขอมลโดยขอมลทถกสงออกไปจะมคาเปน A-D
6. เปด Blocks Editor ขนมาเพอทาการเขยนโคดคาสงการทางานใหกบโปรแกรมดงภาพ
7. เมอเสรจสนการเขยนคาสงเรยบรอยแลวใหทาการตดตงโปรแกรมทพฒนาขนมานไปยงอปกรณ
แอนดรอยดทเราตองการทดสอบ และทางฝ งของคอมพวเตอร ใหเปดโปรแกรม Parallax Serial
Terminal เพอจะใชในการแสดงผลขอมลทจะถกสงมาจากอปกรณแอนดรอยดดวยโปรแกรมทพฒนา
เสรจเรยบรอยแลวในขางตน
8. หนาตาของโปรแกรม Parallax Serial Terminal โดยจาเปนจะตองมการตงคานดหนอยคอ ตง
คา Port จะทใชในการตดตอสอสารกบอปกรณแอนดรอยดโดยสามารถดไดจากการตงคาบลทธของ
คอมพวเตอรดงทกลาวมาแลวในขางตน และทตาแหนงดานลางขวามอใหทาการคลกทปม Enable เพอ
เปดใชงาน Com Port
จากนนเปดโปรแกรมทไดพฒนาเสรจเรยบรอยแลวขนมา จะแสดงหนาตาดงรป กดทปมเชอมตอเพอทา
การเชอมตอกบคอมพวเตอร แลวทาการทดสอบการทางานดวยการกดปมตางๆ บนมอถอแอนดรอยด
โดยแตละปมจะใหคาเปน ABCD และสงขอความเหลานไปยงคอมพวเตอร
ทหนาตางโปรแกรม Parallax Serial Terminal ทตดตงอยบนคอมพวเตอรจะปรากฏขอมลทไดรบจาก
อปกรณแอนดรอยดแสดงใหเหน
โปรแกรมแอนดรอยดควบคมการทางานของหนยนต แบบไรสายบลทธ
โปรแกรมควบคมการทางานของหนยนตแบบไรสายผานบลทธน เปนอกกจกรรมหนงทนาสนใจ
เพราะนอกจากจะไดพฒนาแอพพลเคชนบนอปกรณแอนดรอยดเพอควบคมหนยนตแลวนน เรายง
สามารถศกษาหลกการเขยนโปรแกรมสาหรบหนยนตไดอกดวย ซงจรงๆแลวเราควรจะมพนฐานดาน
การเขยนโปแกรมของทงสองดานดวย ทงบนอปกรณแอนดรอยดเองและตวหนยนตดวย โดยอปกรณท
จะนามาใชนสามารถใชไดทงสมารตโฟนและแทบเลต ซงมบลทธตดตงอยภายในตวเครองดวย สวน
ทางดานหนยนตทจะใชในการทดสอบนนเราจะใชหนยนตทช อวา RoboCircle3S เปนหนยนตทพฒนา
โปรแกรมดวยภาษาโลโก ซงพฒนาและจดจาหนายโดยบรษทอนโนเวตฟเอกเพอรเมนต จากด ตว
หนยนตมชองสาหรบเสยบกบโมดลบลทธ ซงทาใหงายตอการนาไปใชงานมาก สวนขนตอนการพฒนา
โปรแกรม และการใชงาน RoboCircle3s สามารถศกษารายละเอยดเพมเตมไดโดยดจากคมอการใช
งานหนยนต RoboCircle3s หรอสอบถามขอมลไดจากบรษทผผลต ซงจะไมขออธบายไวในคมอเลมน
หนยนต RoboCircle 3S
ในขนตอนการออกแบบโปรแกรมนนจะใชชดคาสงมาตรฐานในการเชอมตอบลทธของโปรแกรม
AppInventor ในการตดตอกบชดคาสงของหนยนต RoboCircle3s เพอใหสามารถทางานรบและสง
ขอมลรวมกนไดจงจาเปนตองกาหนดคาในการรบสงขอมลใหตรงกนดงนคอ
หนยนต RoboCircle 3s ททาการตดตงโมดลบลทธ (Blue Stick)
กอนทจะเรมตนเขยนโปรแกรม ใหทาการจบคอปกรณบลทธระหวางอปกรณแอนดรอยดกบ
หนยนต RoboCircle กนกอน
การจบคอปกรณแอนดรอยดกบหนยนต มขนตอนดงนคอ
1. เปดการทางานของบลทธในอปกรณแอนดรอยด และ เปดการทางานของหนยนตโดยสงเกต
ไฟแสดงสถานะทโมดล blue stickทตดตงกบตวหนยนต จะตองตดกระพรบ ถาไมตดแสดงวาโมดล
อาจจะเสยหรอหนยนตมปญหา ใหแกไขตรวจสอบใหเรยบรอย
2. เขาไปทการตงคาของระบบปฏบตการแอนดรอยด จากนนไปทบลทธ กดปมคนหา
อปกรณบลทธ ทอยใกลเคยง จะปรากฏรายชอของโมดล blue Stick ทงนชอและรหสผานทใชในการ
จบคของอปกรณนนจะขนอยกบบรษทผผลต ซงสามารถดไดจากเอกสารการใชงานของอปกรณนนๆ
3. จะปรากฏรายชอของอปกรณบลทธใกลเคยง จากนนใหคลกไปยงรายชอของบลทธท
ตองการ ในตวอยางนจะปรากฏรายชออปกรณบลทธทไดทาการตดตงอยกบตวหนยนตมชอวา
RoboCircle
4. จะปรากฏหนาตางสาหรบใหใสรหสผาน ในทนรหสผานคอ 1234 จากนนตอบตกลง
แตทงนใหดจากเอกสารคมอของผผลตทมาพรอมกบตวโมดลเปนหลก
5. เมอรหสผานถกตอง เรากสามารถจบคกบหนยนตไดเรยบรอยแลว
หลงจากทจบคอปกรณบลทธของอปกรณแอนดรอยดกบตวหนยนตเปนทเรยบรอยแลว ขนตอนตอไปจะ
เปนการออกแบบโปรแกรม AppInventor เพอควบคมการทางานของหนยนตไดดงน
• เมอมการกดปม Connect อปกรณแอนดรอยดจะทาการเชอมตอกบหนยนต ไฟสถานะท
โมดลบลทธของหนยนตจะแสดงสถานะไฟตดคางเพอบอกวาสามารถเชอมตอกนไดแลว
• เมอมการกดปม Disconnect อปกรณแอนดรอยดทไดเชอมตออยนน จะถกยกเลกการเชอมตอ
กบหนยนตทนท
• เมอมการกดปมเดนหนา อปกรณแอนดรอยดจะสงขอมล หนงไบต คา 8 ออกไป ฝ งหนยนตกจะ
เขยนโปรแกรมเพอรบคา 8 ดวยเชนกน เพอใหหนยนตเคลอนทไปขางหนา
• เมอมการกดปมเดนถอยหลง อปกรณแอนดรอยดจะสงขอมล หนงไบต คา 2 ออกไป ฝ ง
หนยนตกจะเขยนโปรแกรมเพอรบคา 2 ดวยเชนกน เพอใหหนยนตเคลอนทถอยหลง
• เมอมการกดปมเดนเลยวขวา อปกรณแอนดรอยดจะสงขอมล หนงไบต คา 6 ออกไป ฝ ง
หนยนตกจะเขยนโปรแกรมเพอรบคา 6 ดวยเชนกนเพอใหหนยนตเดนเลยวขวา
• เมอมการกดปมดนเลยวซาย อปกรณแอนดรอยดจะสงขอมล หนงไบต คา 4 ออกไป ฝ งหนยนต
กจะเขยนโปรแกรมเพอรบคา 4 ดวยเชนกน เพอใหหนยนตเดนเลยวซาย
• ถาไมมการสมผสหรอกดทปมใดๆ โปรแกรมจะสงขอมลหนงไบตมคาเปน 5 ไปยงหนยนต เมอ
ตรวจสอบเงอนไข เสรจหนยนตกจะหยดการทางานทนท ตามเงอนไขทไดออกแบบไว
เรมตนพฒนาโปรแกรมเพอควบคมหนยนตดวย AppInventor
เขาสโปรแกรม AppInventor โดยการเขาไปทเวบไซด appinventor.mit.edu จากนนกทาการลง
ชอเขาใชงาน จะปรากฏหนาตางของโปรแกรม AppInventor ขนมาจากนนคลกท New เพอสรางโปรเจค
ขนมาใหม ดงภาพ ในทนตงชอโปรแกรมวา RoboCircle
นาเครองมอ Horizontal Arrangement ไปวางทหนาจอ
จากนน นาเครองมอทจาเปนใสเขาไปในโปรแกรม โดยจะใช ปมกด 2 ปม ทถกสรางดวยเครองมอ
Button และ List Picker โดยจะใช List Picker เปนปมสาหรบกดเพอเชอมตออปกรณบลทธ และปม
Button จะเปนปมทเอาไวยกเลกการเชอมตอ และเครองมอทสาคญอกอยางหนงคอ Bluetooth Client
จากนนปรบแตงหนาตาโปรแกรมใหสวยงามดวยการอพโหลดรปภาพและนามาแทนทหนาตาของปมกด
เดม ตามตวอยาง
เครองมอทสาคญทสดในโปรแกรมนคอ Bluetooth Client จะทาหนาทตดตอสอสารบลทธ พรอม
ชดคาสงทใชสาหรบการเชอมตอบลทธ
ตอไปจะสรางปมสาหรบใชในการสงขอมลออกไป ซงในตวอยางจะใช Table Arrangement เปน
เครองมอสาหรบจดรปแบบการวางของปมกดตางๆ
ทาการตงคา Properties ของ Table Arrangement ใหเปน Columns : 3 , Row : 3 เพอใชสาหรบ
จดรปแบบของการวางปมกดตางๆ ใหสวยงาม
นาเครองมอ Canvas ไปไวในตารางตามภาพ เพอใชเปนปมแทนการใชงาน Button
ทาการอพโหลดรปภาพดวยปมกดแบบตางๆ
ซงประกอบดวย ปมกดลงลาง ปมกดขนบน ปมกดดานซาย ปมกดดานขวา
จากนนปรบคา Properties Background Image ของ Canvas แตละตว ใหแทนทดวยภาพปมกดแบบ
ตางๆทไดอพโหลดไวแลว
เมอแทนทดวยภาพทงหมดแลว จะไดหนาตาโปรแกรมดงภาพถอเปนอนเสรจสนขนตอนการออกแบบ
หนาตาโปรแกรม
เปลยนชอของคอมโพแนนทแตละตวใหสนและสอดคลองกบหนาทการทางานของเครองมอแตละตว เพอ
ชวยใหการเขยนโปรแกรมสามารถทาไดงายขน
ทาการเปลยนชอใหกบเครองมอทงหมด
หลกจากทไดออกแบบหนาตาโปรแกรมเปนทเรยบรอยแลว ขนตอนตอไปคอการเขยนคาสงโปรแกรม
เพอใหสามารถตดตอสอสารกบหนยนตไดคลกท Open the Blocks Editor เพอเรยกใชงาน Blocks
Editor ในการเขยนโปรแกรมคาสง
คลกท Keep สาหรบผใชงานเวบบราวเซอรเปน Google chrome
คลกท Save สาหรบผใชงาน Internet Explorer
คลกท ตกลง เพอยอมรบการดาวนโหลดและเปดโปรแกรมดวย Java Web Start Launcher
หลงจากทาการดาวนโหลดและจดเกบไฟลเสรจเรยบรอยแลวจะไดไฟลทช อวา AppInventorForAndroid
ใหคลกไปทตวไฟลไดเลย วนโดวสจะเรยกเปดหนาตางโปแกรม Block Editor ขนมา
หนาตาง Block Editor สาหรบเขยนโปรแกรมคาสง
เรมตนเขยนโปรแกรม คลกทแทบ My Blocks เพอเลอกเครองมอทเราไดออกแบบไว จากนนเลอกไปท
เครองมอทชอวา Connect เปนเครองมอชนด Lispicker ทาหนาทแสดงรายชอของอปกรณบลทธตางๆท
เคยไดจบคไวแลว โดยเลอกทชดคาสง Connect.BeforePicking
เลอกคาสง Connect. Elements
ลากเครองมอ Elements ไปวางไวในบลอกคาสง Connect.BeforePicking ดงภาพ
จากนนเรยกใชคาสงของ Bluetooth โดยชดคาสงนจะเปนการแสดงรายชอของอปกรณบลทธทงหมดท
เคยจบคไวแลว
ชดคาสงชดนทาหนาทเพอแสดงรายชอของอปกรณบลทธอนๆ ทเคยทาการจบคเอาไวแลว รวมถง
หนยนตทเราจะควบคมดวย ซงถาหนยนตทจะใช ยงไมไดจบคอปกรณบลทธใหทาการจบคเสยกอน
ชดคาสง Connect.AfterPicking ทาหนาทในการใหอปกรณแอนดรอยดของเราทาการเชอมตอบลทธ
กบอปกรณทเลอกซงในทนกคอหนยนตของเรานนเอง
disconnect. Click ทาหนาทยกเลกการเชอมตอหลงจากทปมนถกกด
ชดคาสงทงหมดทใชในการเชอมตอและยกเลกการเชอมตอบลทธ
ชดคาสงตอไป คอการสงขอมลไปยงหนยนตใหหนยนตเคลอนทไดตามทเราตองการ ซงในโปรแกรม
AppInventor นน เราจะอาศยชดคาสงของเครองมอทชอวา Canvas ในการตรวจสอบเหตการณทจะ
เกดขน 2 เหตการณดวยกนคอ 1) เมอไรทตาแหนงพนทของ Canvas ถกแตะสมผสคางไวเรยกวา
Touch Down 2) เมอไรทเลกสมผสพนทของ Canvas แลว เรยกวา Touch Up หรอจะพดงายๆคอ
การกดและปลอยนนเอง
ชดคาสงแรกเปนการสงใหหนยนตเดนไปขางหนา โดยการเขยนโปรแกรมคาสงดงภาพ
ในชดคาสงของ forward. Touchdown นน จะกระทากตอเมอเงอนไขเปนจรง คอเมอใดมการ
แตะหรอสมผสไปทปมน ชดคาสงนกจะทางาน โดยจะไปเรยกใชคาสง Bluetooth.Send1ByteNumber
ซงเปนคาสงสงขอมลจานวน 1 Byte ผานสญญาณบลทธ โดยมคาเปนเลข 8 ไปยงตวหนยนต ซงตว
หนยนตนนจะรอรบขอมลทจะถกสงเขามา หนยนตกจะทาการอานคาขอมลทไดรบวามคาเปนอะไร
จากนนจะนาไปตรวจสอบตามเงอนไขทเราไดเขยนไวใหกบตวหนยนต เมอตรวจสอบเงอนไขเปนจรง
หนยนตนนกจะทางานตามเงอนไขทเราไดเขยนเอาไว กจะทาใหหนยนตเดนเคลอนทไปขางหนาได
นนเอง
ในชดคาสงของ forward. Touchup นน จะกระทาหลงจากทเง อนไข forward. Touchdown หยด
ทางาน นนหมายถง เมอไมมการสมผสหรอแตะทปมนแลว คาสง Bluetooth.Send1ByteNumber จะ
ทางานและสงขอมล 1 Byte คอเลข 5 ออกไปยงตวหนยนต กจะทาใหหนยนตเคลอนทตามเงอนไขทได
เขยนไวนนเอง
คาสงใหหนยนตเดนไปขางหนาและคาสงใหหนยนตหยดทางาน
มาดโปรแกรมทางดานของหนยนตกนบาง
เรมตนใหทาการเชอมตอสายสญญาณ ucon200 กบตวหนยนต RoboCircle3s เสยกอน จากนนเปด
โปรแกรม i-BOX III Logo Blocks 1.20 ขนมา และทาการตงคาการเชอมตอ Serial Port กอน
หลงจากทต งคาใชงานเรยบรอยแลว ขนตอนตอไปคอการเขยนคาสงใหกบหนยนต ซงในภาพนนเปน
คาสงใหหนยนตวนรบขอมลทจะถกสงเขามาจากอปกรณแอนดรอยด
หลงจากทหนยนตไดรบขอมลทถกสงมาจากอปกรณแอนดรอยด หนยนตจะทาการเปรยบเทยบเงอนไข
จากขอมลทถกสงเขามาวาเปนจรงหรอไม ถาขอมลทถกสงเขามานนตรงตามเงอนไขทไดตงเอาไว
แสดงวาเงอนไขนนเปนจรง หนยนตกจะทางาน และจะเคลอนทตามคาสงทไดออกแบบไว แตถาขอมล
ทถกสงเขามานนไมเปนจรงตามเงอนไขกจะสงใหหนยนตหยดทางาน
ถาขอมลทถกสงเขามาเปน 8 หนยนตจะเคลอนไปขางหนา แตถาไมใชหนยนตจะหยดทางาน
ถาขอมลทถกสงเขามาเปน 8 หนยนตจะเคลอนไปขางหนา ถาขอมลเปน 6 จะเลยวขวา แตถาไมใช
หนยนตจะหยดทางาน
ถาขอมลทถกสงเขามาเปน 8 หนยนตจะเคลอนไปขางหนา ถาขอมลเปน 6 จะเลยวขวา ถาขอมลเปน 4
จะเลยวซาย แตถาไมใชหนยนตจะหยดทางาน
ชดคาสงของหนยนต RoboCircle3s
ถาขอมลทถกสงเขามาเปน 8 หนยนตจะเคลอนไปขางหนา ถาขอมลเปน 6 จะเลยวขวา ถาขอมลเปน 4
จะเลยวซาย ถาขอมลเปน 2 จะถอยหลง แตถาไมใชหนยนตจะหยดทางาน
ชดคาสงทเขยนดวยโปรแกรม app inventor ทาใหหนยนตเคลอนทไปขางหนา เลยวซาย เลยวขวา
ถอยหลง และ หยด
ชดคาสงสมบรณของโปรแกรมควบคมการทางานของหนยนต RoboCircle
ชดคาสงสมบรณของหนยนต RoboCircle 3s ทพฒนาดวยโปรแกรม Logo Blocks
ปรบแตงแกไขโปรแกรมเพมเตม
คาสงเพมเตมสาหรบตรวจสอบการเชอมตอของบลทธกอนทจะมการสงขอมลออกไป เพราะการ
สงขอมลผานบลทธเลย โดยไมมการเชอมตอกบอปกรณบลทธอนๆกอน จะทาใหเครองมปญหา และคาง
ได จงจาเปนตองตรวจสอบการเชอมตอกอนวาเปนจรงหรอไม ถาใชคอยสงขอมลออกไป
คาสงสงขอมลผานบลทธ โดยไมมการตรวจสอบการเชอมตอกอน อาจเกดความผดพลาดในการทางาน
คาสงตรวจสอบการเชอมตอบลทธกอนทจะมสงขอมล เพอปองกนความผดพลาดในการทางาน
ชดคาสงควบคมการทางานของหนยนต ทพฒนาดวยโปรแกรม app inventor
ปรบแตงคณสมบต (Properties) Visible ของปม disconnect ใหมคาเปน hidden เพอซอน
การทางานของปม disconnect เอาไว เนองจากไมจาเปนตองใชตอนโปรแกรมเรมทางาน โดยจะเรยกใช
อกครงเมอมการเชอมตอบลทธสาเรจแลว
ปม Connect ทใชทาหนาทในการเชอมตอกบบลทธ จะหายไปหลงจากทไดเชอมตอบลทธกบ
หนยนตเปนทเรยบรอยแลว และปม disconnect จะปรากฏขนแทน จากนนเมอกดยกเลกการเชอมตอ
disconnect ปม connect จะแสดงขนมาแทน และปม disconnect กจะหายไป
ใส icon ใหกบโปรแกรมเพอเพมความสวยงาม โดยกอนอนทาการอพโหลดภาพทตองการ
จากนนทตาแหนง Properties Icon ของ Screen1 ใหทาการเลอกภาพทไดทาการอพโหลดไวแลว
หลงจากทเขยนโปรแกรมบนอปกรณแอนดรอยดและเขยนโปรแกรมบนหนยนตเรยบรอยแลว
ขนตอนตอไปกคอการตดตงโปรแกรมลงบนอปกรณแอนดรอยด เพอนาไปใชงานจรง ซงขนตอนการ
ตดตงโปรแกรมลงบนอปกรณแอนดรอยดนนไดอธบายไวในคมอเลมน
การใชงาน App Inventor โดยไมเชอมตอกบอนเตอรเนต
โปรแกรม App Inventor ถกออกแบบและพฒนามาใหใชในการพฒนาแอพพลเคชนบนอปกรณ
แอนดรอยด แตในการใชงานโปรแกรม AppInventor นน ผใชจาเปนตองทาการเชอมตอกบอนเตอรเนต
อยตลอดเวลา ซงบางครงอาจทาใหเกดความไมสะดวกและยงยาก ในการใชงาน ดงนนจงมนกพฒนา
โปรแกรม ชอวา Gary Frederick พฒนาเครองมอททาให app inventor ไมตองเชอมตอกบอนเตอรเนต
เกดเปนโครงการ ชอวา ai4a ขนมา ซงเครองมอตวนจะทางานรวมกบ java jdk ในการสราง
แอพพลเคชนใหสามารถตดตงลงบนอปกรณแอนดรอยดได
สรปขนตอนการใชงานดงน
1. ตดตงโปรแกรม Java jdk
2. ตดตงโปรแกรม AppInventor
3. รนไฟล buildserver จาลองการทางานของคอมพวเตอรใหเปนกลายเปนเวบเซฟเวอร
4. รนไฟล startAI เพอใชเรยกใชงาน appengine และเปนตวกลางเชอมตอสอสารกบเซฟเวอร
การตดตง JAVA JDK กอนอนใหทาการดาวนโหลดไฟลตดตง JAVA JDK เสยกอน โดยเขาไปทเวบไซด
http://www.oracle.com/technetwork/java/javase/downloads/index.html จากนน คลกเลอกไปท
Java DOWNLOAD Java Platform (JDK) 7u21 ซงเปนเวอรชนลาสดในขณะทกาลงทาคมอเลมน
คลก Accept Lincense Agreement เพอยอมรบขอตกลง จากนนเลอกไฟลทตองการดาวนโหลด
ขนอยกบระบบปฏบตทเราใช
ไฟลทไดจากการดาวนโหลด
• Windows x86 สาหรบผใชงานระบบปฏบตการวนโดวส 32 bit ไฟลชอ jdk-7u21-windows-i586
• Windows x64 สาหรบผใชงานระบบปฏบตการวนโดวส 64 bit ไฟลชอ jdk-7u21-windows-64
เลอกไฟลทตองการตดตง ในตวอยางเปนการตดตงบนระบบปฏบตการวนโดวส 64 bit คลก Next >
จากนนจะแสดงตาแหนงสาหรบตดตงไฟลโปรแกรม ซง Java JDK จะมาพรอมกบ ไฟลสาหรบตดตง
Java JRE
ซงในกรณทเครองคอมพวเตอรของเรายงไมไดตดตงโปรแกรม JAVA JRE นนจะมหนาตางนแสดง
ขนมาเพอทใหเราตดตง JAVA JRE ลงไปพรอมกนดวย
การตดตงอาจจะตองใชเวลาสกคร
หลงจากตดตงโปรแกรม เสรจเรยบรอยแลวคลกท Close เพอปดหนาตาง
การตงคา JAVA HOME
การตงคาตรงนถอวาสาคญมากเพราะมหนาทในการสรางไฟลแพคเกจ นามสกล apk เพอ
สามารถนาไปตดตงบนระบบปฏบตการแอนดรอยดได ขนตอนมดงนคอ
1. คลกขวาท My Computer
2. คลกเลอกไปท Advanced system settings
3. คลกไปทแทบ Advanced จากนนคลกท Environment Variables
4. คลกท New
5. ในชอง Variable name ใหใสขอความวา JAVA_HOME สวนหวขอ Variable value ให
ใสตาแหนงของ java ทถกตดตงไวภายในเครองคอมพวเตอร
ตวอยาง C:\Program Files\Java\jdk1.7.0_21เสรจสนขนตอนการตงคา
เครองมอในการจาลองการทางานของเวบเซฟเวอร
ดาวนโหลดเครองมอไดท http://sourceforge.net/projects/ai4a-configs/files/?source=navbar
ในขณะทาคมอฉบบนเปนเวอรชน 1.4.7
ไฟลทไดจากการดาวนโหลดนนจะเปนไฟลทถกบบอดเอาไว ซงไมสามารถนาไปใชงานไดทนท
ใหเราทาการแตกไฟลทถกบบอดไวเสยกอน โดยหลงจากทเราทาการแตกไฟลเปนทเรยบรอยแลว เราก
จะไดไฟล app inventor ทสามารถทางานแบบออฟไลนไดแลว ดงภาพ
ขนตอนการใชงาน App Inventor แบบออฟไลนทาไดดงนคอ
1. เรมตน เราจะทาการจาลองการทางานของเซฟเวอรบนเครองคอมพวเตอรเสยกอน โดยใหคลก
เขาไปในโฟลเดอร BuildServer
2. เปดไฟลทตองการ โดยจะขนอยกบระบบปฏบตการของคอมพวเตอรทเราใชงาน แลวดบเบลคลกท
ไฟล
• Launch-build server ทางานบนระบบปฏบตการวนโดวส 64 บต • Launch-buildserver32 ทางานบนระบบปฏบตการวนโดวส 32 บต
หลงจากเปดไฟลเรยบรอยแลวจะปรากฏหนาตางคอมมานแสดงการทางานโปรแกรมจาลองเซฟเวอรขน
ดงภาพ ทบรรทดสดทาย จะขนขอความวา Server running แสดงวาขณะนเซฟเวอรไดทางานแลว
*** หามปดหนาตางนเดดขาดจนกวาจะเลกใชงาน app inventor
3. เขาไปในโฟลเดอร AppEngine แลวมองหาไฟลทชอวา startAI
4. ดบเบลคลกทไฟล startAI
จากนนจะปรากฏหนาตางคอมมาน แสดงการทางานของโปรแกรมขนมา สงเกตในบรรทดสดทาย ใหรอ
จนกวาจะปรากฏขอความ Dev App Server is now running
*** หามปดหนาตางนเดดขาดจนกวาจะเลกใชงาน app inventor
5. เปดโปรแกรมเวบบราวเซอรขนมา สามารถใชโปรแกรม Google chrome , Internet Explorer
หรอ Mozilla Firefox จากนนทตาแหนง URL ใหพมพวา localhost:8888 ซงตอไปจะใชเปน
ชองทางในการเขาใชงานโปรแกรม AppInventor โดยไมจาเปนตองเชอมตอกบอนเตอรเนต
6. จะปรากฏหนาตางสาหรบการ Log in เพอเขาใชงานโปรแกรม AppInventor โดยใหคลกไปทปม
Log in เพอเขาใชงานโปรแกรม
7. จะแสดงหนาตางตอนรบของโปรแกรม AppInventor เทานเรากสามารถใชงาน app inventor
แบบไมตองเชอมตอกบอนเตอรเนตไดแลว
Recommended