เอกสารประกอบการใชงาน

การพฒนาแอพพลเคชนบนอปกรณแอนดรอยด

สาหรบผเรมตน

จดทาโดย

ธวชชย สลาดเลา

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

แบบไมตองเชอมตอกบอนเตอรเนตไดแลว