www.microbotshop.com หนา 1
พฒนาโปรแกรมบนมอถอแอนดรอยดวย AppInventor ควบคมหนยนต Robo Circle3s
เปดโปรแกรมเวบบราวเซอรและเขาไปทเวบไซด http://www.appinventor.mit.edu/
คลกเลอก Invent Create Mobile Apps เพอเขาใชงาน AppInventor
จะปรากฏหนาตางการเขาใชงานระบบ สาหรบผทสมครใชงาน Google Account เรยบรอยแลวใหทาการ
กรอกชอทอยอเมลลและรหสผานไดเลย แตถายงไมไดสมครกเขาไปสมครเพอใชงาน Google Account
เสยกอน
www.microbotshop.com หนา 2
หนาตางการสมครเพอใชงาน Google Account ซงจาเปนตองใชในการ Login เพอเขาสระบบ กอนการใช
งาน AppInventor โดยจะมชองสาหรบกรอกชอทอยอเมลล รหสผาน เราสามารถใชทอยอเมลลใดๆกไดท
เรามอยแลวในการสมครแตจาเปนตองใชอเมลลทมอยจรงเพราะจะตองมการยนยนทอยอเมลลอกครงหนง
หลงจากทเราไดสมครใชงาน Google Accounts เรยบรอยแลว ใหเราทากรอกรายละเอยดทอยอเมลลและ
รหสผานใหถกตองเพอเขาใชงาน AppInventor
เมอเขาสระบบเรยบรอย ในครงแรกจะปรากฏหนาตางดงภาพ หนาตางเกยวกบการจดการโปรเจคงาน
ตางๆ ซงประกอบดวย การสรางโปรเจคใหม การลบโปรเจค การดาวนโหลดโปรเจคงานทงหมด ดาวน
โหลดและอพโหลดไฟลโปรเจค รายชอโปรเจค และวนเดอนปทถกสรางขน แตในทนเรายงไมไดสรางโปร
เจคขนมาใหม
www.microbotshop.com หนา 3
กอนทจะทาการแกไขปรบแตงแอพพลเคชนไดนนเราจาเปนตองสรางไฟลโปรเจคขนมาใหมเสยกอน โดยม
ขนตอนและวธการดงนคอ
สรางโปรเจคงานใหมาใหม โดยมขนตอนดงนคอ
1 คลกทปม New จากนนจะปรากฏหนาตางสาหรบตงชอไฟลงานขนมา
2. ทาการตงชอไฟลงานตามตองการ ในตวอยางตงชอเปน Robot
3. คลกทปม OK เพอยนยนการสรางโปรเจคใหม หลงจากนนโปรแกรมจะเขาสหนาตางของการออกแบบ
www.microbotshop.com หนา 4
เมอตงชอไฟลงานเรยบรอยจะปรากฏหนาตางดงภาพ ซงตอไปเราจะเรยกหนาตางนวาหนาตางการ
ออกแบบ Design ใชสาหรบออกแบบหนาตาโปรแกรม การดาวนโหลดโปรแกรมลงบนมอถอ และการตงคา
การใชงานตางๆ
กอนอนใหเราทาการออกแบบหนาตาโปรแกรมทตองการโดยมสวนประกอบหลกๆดงน
• มปมกด connect เราจะใชสาหรบเชอมตอบลทธระหวางโทรศพทมอถอกบตวหนยนต
• มปมกด disconnect ใชสาหรบยกเลกการเชอมตอบลทธระหวางโทรศพทมอถอกบตวหนยนต
www.microbotshop.com หนา 5
• มปมควบคมการทางานของหนยนตทงหมด 5 ปม ซงจะประกอบไปดวย ปมสาหรบสงหนยนตให
เดนหนา ถอยหลง เลยวซาย เลยวขวาและปมหยด ซงในแตละปมกดจะถกแทนทดวยรปภาพ
ตางๆดงภาพ
หลงจากทเราไดทาการออกแบบหนาตาโปรแกรมเสรจเรยบรอยแลวตอไปกจะกลาวถงขนตอนการลงมอ
ปฏบต แตกอนอนใหเราทาการอพโหลดไฟลรปภาพทเกยวของ ทไดเตรยมไวแลว ขนไปเกบไวทไฟลงาน
ของเรา ทอยบนเซรฟเวอรกอน
ขนตอนการอพโหลดไฟลภาพขนไปไวในไฟลงานของเรา
คลกเลอกทปม Add ทอยบรเวณดานลางขวามอของโปรแกรม เพอทจะทาการอพโหลดไฟลไปยงเวบ
เซรฟเวอร
หลงจากนนจะปรากฏหนาตางสาหรบ Upload File… ใหคลกทปม เรยกด เพอเลอกไฟลทตองการอพ
โหลด
เลอกไฟลทเราตองการจะอพโหลด หลงจากนนคลกทปม Open
www.microbotshop.com หนา 6
เลอกไปเรยบรอยแลว ใหคลกทปม OK เพอทาการอพโหลดไฟล
***** การอพโหลดจาเปนตองใชเวลาระยะหนง ทงนขนอยกบขนาดของไฟลและความเรวของอนเตอรเนต
ดวย
ไฟลรปตางๆ ทจะทาการอพโหลด มจานวนทงหมด 6 ภาพ ใหทาการอพโหลดไฟลทเหลอใหครบทกไฟล
เมออพโหลดไฟลเสรจเรยบรอยแลว ทเมน Media จะแสดงรายชอของไฟลทเราไดทาการอพโหลดไว
ทงหมดปรากฏอย
www.microbotshop.com หนา 7
หลงจากทเราไดทาการอพโหลดไฟลทจาเปนในการใชงานเรยบรอยแลว ขนตอนตอไปกคอการลงมอทา
ออกแบบหนาตาของโปรแกรม ไดดงน
ขนตอนแรกใหเราเลอกเครองมอทชอวา ListPicker ทอยในหมวดหมของเครองมอพนฐาน(Basic) แลวลาก
ไปวางไวยงหนาตางการออกแบบ(Viewer) แสดงดงภาพ
โครงสรางหนาตาโปรแกรม ซงจะประกอบไปดวยปมกด และเครองมอตางๆดงน
www.microbotshop.com หนา 8
รายชอเครองมอตางๆทใชงาน ประกอบดวย
ออกแบบโครงสรางหนาตาโปรแกรม ดงน
หลงจากออกแบบโครงสราง หนาตาโปรแกรมเรยบรอยแลวตอไปจะเปนการนาเครองมอทเราไดทาการ
ออกแบบไวแลว เลอกเครองมอทตองการแลวลากมาวางทหนาตาง Screen1
Horizontal Arrangment
Vertical Arrangment
label
Button
ListPicker
www.microbotshop.com หนา 9
ใหเราทาการตงคาคณสมบตตางๆใหกบเครองมอในแตละตวดงตอไปน
1. แกไขขอความทตาแหนง Properties Text ของปมกด(Button) แตละตวโดยใหลบขอความทงหมด
ออก ใหเวนวางเอาไว
หลงจากทเอาขอความจากปมกดแตละตวออกแลวจะปรากฏหนาตาโปรแกรมดงแสดงในภาพ
www.microbotshop.com หนา 10
2. แกไขขอความ ทตาแหนง Properties Text ของ Label1 และ Label 2 แลวทาการแกไขขอความ
โดยตงชอวา Connect และ Disconnect ดงภาพ
3. แกไขสพนหลงใหกบปมกดแตละตว โดยไปท Properties Background Color แลวเลอกปมกด
Button โดยใหแตละปมเลอกไปท None ใหทาเชนนใหครบทกปม
หลงจากแกไขสพนหลงของปมกดทกตวเรยบรอยแลว สพนหลงของปมจะเปลยนไป แสดงดงภาพ
www.microbotshop.com หนา 11
4. ทาการแกไขการตงคา Properties Width ซงเปนความกวาง และ Heigh ซงเปนความสง ของ
เครองมอทชอ Vertical Arrangment1 , HorizontalArrangement2 , HorizontalArrangement3 ,
HorizontalArrangement4 , Button 3,4,5,6,7,8,9,10,11 ใหเปลยนคาเปน Fill parent เพอให
การแสดงผลสามารถแสดงไดเตมความกวางและความสง แกไขคาความกวางและสงแสดงดงภาพ
หลงจากทไดแกไขคณสมบตของเครองมอตางๆเสรจเรยบรอยทกตวแลว จะปรากฏหนาตาของโปรแกรมดง
ภาพ
5. ใหเราทาการแทรกรปภาพใหกบปม Button 1 โดยไปทคณสมบต Properties Image จะเหน
รายชอของไฟลรปภาพทงหมด ทเราไดทาการอพโหลดไวในขนตอนทแลว โดยใหเราเลอกไปทภาพ
ทชอ Bluetooth_icon หลงจากนนคลกทปม OK
www.microbotshop.com หนา 12
จะไดปมกดทมพนหลงแสดงเปนรปภาพ Bluetooth_icon แทนปมกด
6. ใหเราทาการแกไข ปรบแตงคณสมบต Image ของเครองมอแตละตว โดยการแทรกรปภาพใหกบ
เครองมอ ตางๆ ตามทเราไดทาการออกแบบไวแลวดงภาพ
www.microbotshop.com หนา 13
เครองมอทสาคญมากทใชในการเชอมตอไรสายบลทธทขาดไมไดเลย นนคอชดคาสง BluetoothClient
เพราะจะทาหนาทเปนตวเชอมตออปกรณบลทธใหสามารถใชงานรวมกบบลทธภายนอกได ใหทาการลาก
แลวนาไปวางทหนาตางของการออกแบบ
ตอมานาเครองมอทชอ Notifier ลากแลวนาไปวางทหนาตางของการออกแบบ
สงเกตทบรเวณดานลางของหนาจอการออกแบบจะพบสญลษณเปนไอคอน Bluetooh Client1 และ
Notifier1 ปรากฏอย กถอวาการออกแบบหนาตาของโปรแกรมไดเสรจเรยบรอยตามทออกแบบไว
ตอไปจะเปนการตงชอใหกบปมกดและเครองมอตางๆในโปรแกรม เพอจะชวยในการเขยนโปรแกรมให
สามารถทาไดงายและรวดเรวมากขน ดงน
www.microbotshop.com หนา 14
แสดงชอของปมกดและสวนประกอบตางๆ ขณะทยงไมไดแกไข
ทาการแกไขชอใหกบปมกดและสวนประกอบของโปรแกรมตางๆดงน
ตงชอคณสมบตของเครองมอตางๆดงน
www.microbotshop.com หนา 15
ชอเครองมอ แถบเครองมอ แกไขชอ คาอธบาย
LisPicker Basic ConnectLisPicker เชอมตออปกรณบลทธ
Button Basic btnforward เดนไปขางหนา
Button Basic btnleft เลยวซาย
Button Basic btnright เลยวขวา
Button Basic btnback เดนถอยหลง
Button Basic btnstop หยดการเคลอนท
Button Basic btndisconnect ยกเลกการเชอมตอบลทธ
HorizontalArrangement
1,2,3,4,5
Screen Arrangement Hor1,Hor2,Hor3,Hor4,Hor5 การจดรปแบบหนาจอใน
แนวนอน
Vertical Arrangement Screen Arrangement Vertical Arrangment1 การจดรปแบบหนาจอ
แนวตง
Bluetooth Client Other stuff Bluetooth Client1 เครองมอสาหรบ
เชอมตอบลทธ
Notifier Other stuff Notifier1 แสดงขอความแจงเตอน
เวลาทางานผดพลาด
Label1,Label2 Basic lblconnect , lbldisconnect แสดงขอความทตองการ
ขนตอนตอไปเปนขนตอนของการเขยนโปรแกรม
ขนตอนการเขยนโปรแกรมนนจาเปนตองเรยกเครองมอทใชในการเขยนทเรยกวา Blocks Editor มาใชงาน
โดยใหคลกเลอกท Open the Blocks Editor บรเวณมมบนดานขวาของโปแกรม เพอเปดโปรแกรม Block
Editor
หลงจากคลกแลวจะแสดงขอความดงภาพ แสดงวาโปรแกรม Blocks Editor กาลงทางาน
www.microbotshop.com หนา 16
สาหรบผใชโปรแกรม Google Chrome เปนเวบบราวเซอรจะปรากฏหนาตางใหเราทาการดาวนโหลดไฟล
ลงในเครองคอมพวเตอร โดยจะมขอความเตอนวาตองการเกบไฟล
AppInventorForAndroidCodeBlocks.jnlp ไวในคอมพวเตอรหรอไม ซงในทนใหเราเลอกทจะเกบไฟลไว
ใสคอมพวเตอร แสดงดงภาพ
เสรจแลวคลกไฟลทช อ AppInventorForAndroidCodeblocks ขนมา
จะมการเรยกจาวาขนมาเพอรนไฟล AppInventorForAndroidCodeblocks
จะปรากฏหนาตาง แจงเตอนเกยวกบความเสยงในการทางานของไฟลนน
www.microbotshop.com หนา 17
ซงในขนตอนนใหคลกเลอกไปท I accept the risk and want to run this application เพอยอมรบขอตกลง
และทาการเปดโปรแกรม Android Blocks Editor ขนมา
สาหรบผใชงานโปรแกรม Internet Explorer เปนเวบบาวเซอร จะปรากฏหนาตางแสดงขอความดงภาพโดย
สามารถกดทปม Save เพอบนทกไฟล AppInventorForAndroidCodeBlocks.jnlp ลงในคอมพวเตอร หรอ
จะคลกเลอกท Open เพอเปดไฟลขนมาใชงานเลยกได
ถาเลอก Save ไฟล โปรแกรมจะถามหาตาแหนงของไฟลทเราจะเกบไวบนคอมพวเตอร เมอไดตาแหนงท
เราตองการแลว ใหคลกท Save เพอทาการบนทกไฟลลงบนตาแหนงทตองการ เมอดาวนโหลดไฟลเสรจ
เรยบรอยจะไดไฟลชอวา AppInventorForAndroidCodeblocks สามารถคลกปม Open เพอเรยกโปรแกรม
Android blocks editor ขนมาทางาน
www.microbotshop.com หนา 18
**** จากการทดสอบการทางานรวมกบเวบบราวเซอรตาง ไมวาจะเปน Google Chrome , Internet
explorer และ Mozilla Firefox ปรากฏวา Google Chrome สามารถทางานรวมกบ AppInventor ไดดทสด
*******
หนาตางโปรแกรม Android Blocks Editor เพอใชในการเขยนโปรแกรม
ทมมมองดานซายมอ จะพบเครองมอทจาเปนจะตองใชในการเขยนโปรแกรม จะประกอบดวยหมวดหม
ใหญๆ 3 หมวด คอ Built-ln , My Blocks และ Advanced รายละเอยดในการใชงานดไดจากเนอหาของ
การใชงานโปรแกรม
คลกเลอกทแถบเครองมอ My Blocks เพอเตรยมตวในการเขยนโปรแกรม
www.microbotshop.com หนา 19
ออกแบบการทางานของโปรแกรม
ในสวนของการเขยนโปรแกรมควบคมทไดออกแบบไว จะประกอบดวย 3 สวนหลกๆ คอ
1. โปรแกรมทางานในขณะทยงไมเชอมตอกบอปกรณบลทธ
2. โปรแกรมทางานในขณะททาการเชอมตอกบอปกรณบลทธ
3. โปรแกรมทางานในขณะทยกเลกการเชอมตอกบอปกรณบลทธ
เรมตนการเขยนโปรแกรมตามทไดออกแบบไว โดยจะเรมทโปรแกรมทางานในขณะทยงไมไดทา
การเชอมตอกบอปกรณบลทธ
โปรแกรมในสวนแรกจะทางานในขณะทยงไมเชอมตอกบอปกรณบลทธ
คลกเลอกทชอ ConnecLisPicker แลวเลอกไปท BeforePicking ลากแลววางไวยงบรเณพนทวางดาน
ขวามอ ซงเปนพนททใชสาหรบเขยนโปรแกรม
www.microbotshop.com หนา 20
จะไดหนาตางดงภาพ
connecListPicker.BeforPicking เปนการตงคาการทางานกอนทจะเรมทาการเชอมตอกบบลทธของหนยนต
เลอกบลอก ConnecLispicker.Elements ไปวางไวยงบรเวณภายในของ ConectLispicker.BeforPicking ดง
แสดงดงภาพ
คลกเลอกท BluetoothClient1.AddressAndName ไปวางตอทาย ConnectLispicker.Elements ซงคาสง
การทางานในสวนนคอ การแสดงรายชอของอปกรณบลทธตางๆทเราจะทาการเชอมตอกบเขากบมอถอ
www.microbotshop.com หนา 21
โปรแกรมในสวนทสองจะทางานในขณะทเชอมตอกบอปกรณบลทธของหนยนตเรยบรอยแลว
เรมตนดวยการคลกเลอก ConnectLispicker.AfterPicking แลวลากไปวางบรเวณพนทวาง
เสรจแลวลากบลอก ifelse ทอยในสวนของเครองมอ Control ไปวางไวขางใน
เขยนคาสงภายในบลอก ConnectLisPicker.AfterPicking ซงจะทาหนาทหลงจากทไดเชอมตออปกรณบล
ทธทงสองเรยบรอยแลว
www.microbotshop.com หนา 22
โปรแกรมในสวนทสามจะทางานในขณะทยกเลกการเชอมตอกบอปกรณบลทธของหนยนต
เรยบรอยแลว
เขยนคาสงภายในบลอกทชอ btndisconnect.Click โดยคาสงจะสงงานใหมอถอยกเลกการเชอมตอบลทธ
หลกจากเขยนคาสงเพอควบคมการทางานตามทไดออกแบบไว ทเหลอคอการเขยนโคดคาสงใหกบปมกด
ตางๆ ซงจะมหนาทส งใหหนยนตเดนหนา ถอยหลง เลยวซาย เลยวขวา และหยด
www.microbotshop.com หนา 23
หลงจากทเขยนโปรแกรมเสรจเรยบรอยแลว จะแสดงดงภาพ
ทดสอบการทางานกบโปรแกรมจาลองการทางาน Emulator ของ app inventor โดยคลกเลอกไปท New
emulator
อาจจะตองใชเวลาระยะ 2-3 นาทในการโหลด emulator ขนมา คลกท OK เพอดาเนนการตอ
www.microbotshop.com หนา 24
ทบรเวณดานบนของโปรแกรม ในหวขอ Connect to Device คลกเลอก emulator 5554 เพอใหโปรแกรมท
เราพฒนาขนนนไปแสดงทหนาตางของตว Emulator
หนาตาแอพพลเคชนทเราไดพฒนาเสรจเรยบรอยแลว
หลงจากทเราไดทาการทดสอบการทางานของโปรแกรมกบโปรแกรมจาลองการทางาน emulator เรยบรอย
แลว ขนตอนตอไปคอการดาวนโหลดโปรแกรมไปยงโทรศพทมอถอ โดยกอนทจะทาการดาวนโหลด
โปรแกรมลงบนมอถอเราจาเปนตองเชอมตอมอถอเขากบคอมพวเตอรใหเรยบรอย เสรจแลวใหเลอกหวขอ
Connect to Device เปน รหสประจาตวเครองของโทรศพทมอถอแทน ดงภาพ
www.microbotshop.com หนา 25
หลงจากนนไปทหนาตางการออกแบบ คลกทเมน Package for Phone เลอกไปท Download to
Connected Phone เพอทาการดาวนโหลดลงบนอปกรณมอถอทไดเชอมตอไว หลงจากนนโปรแกรม app
inventor จะทาการดาวนโหลดพรอมกบตดตงแอพพลเคชนทเราไดสรางขนลงบนโทรศพทมอถอหรอแทบ
เลตทเราไดทาการเชอมตอไว
เมอโปรแกรมทาการดาวนโหลดและตดตงแอพพลเคชนลงบนอปกรณแอนดรอยเรยบรอยแลวจะมหนาตาง
แสดงขอความเดงขนมาดงภาพ ใหคลกท OK การพฒนาแอพพลเคชนของเรากเสรจสนเรยบรอย
หลงจากดาวนโหลดและตดตงโปรแกรมเสรจเรยบรอยแลว ตอไปลองมาทาการทดสอบโดยการเปด
แอพพลเคชนทช อ robot บนโทรศพทมอถอแอนดรอยของเรา ซงจะแสดงหนาตาโปรแกรมดงภาพ
www.microbotshop.com หนา 26
การใชงานโปรแกรม
คลกทปมสญลกษณบลทธดานบนเพอทาการเชอมตอบลทธกบหนยนต Robo Circle
จะปรากฏรายชออปกรณบลทธทมอถอคนพบ ใหเลอกรายชอบลทธทไดตดตงไวบนตวหนยนต Robo
Circle ในทนมชอวา BlueStick0004
หลงจากเชอมตอบลทธเสรจเรยบรอยแลวจะแสดงหนาตาโปรแกรมดงภาพ ซงเราสามารถใชงานโปรแกรม
เพอควบคมหนยนตใหเดนหนา ถอยหลง เลยวซาย เลยวขวา และหยดได
เมอตองการยกเลกการเชอมตอบลทธใหคลกเลอกทปม disconnect
www.microbotshop.com หนา 27
เขยนโปรแกรมบน Robo Circle3S
เราจาเปนตองเขยนโปรแกรมบนตวหนยนต RoboCircle เพอรอรบคาสงจากโปรแกรม robot บนโทรศพทมอถอ
ทเราไดพฒนาเสรจเรยบรอยแลว ในสวนของการเขยนโปรแกรมภาษาโลโกนน เครองมอทจาเปนในการรบ
ขอมลอนกรมนน คอ (newir ?) บลอกตรวจสอบการรบขอมล และ (ir) บลอกการรบขอมลอนกรม
คาอธบายโปรแกรม ตวอยางนจะวนตรวจสอบวามขอมลใหมถกสงเขามาหรอไม และจะวนตรวจสอบ
จนกวาจะมขอมลถกสงเขามาถงจะทางานในบลอกตอไป
หลงจากทรบขอมลเขามาแลวจะทาการตรวจสอบขอมลทไดวาตรงกบเงอนไขใด ทเราไดตงเอาไว
และเมอเงอนไขใดเปนจรงกจะทางานในชดคาสงของเงอนไขนนๆ เทานเรากสามารถควบคมหนยนตดวย
โทรศพทมอถอผานบลทธไดเรยบรอยแลว
โคดทเขยนบนตวหนยนต RoboCircle ทเขยนดวยโปรแกรม Logo Blocks
www.microbotshop.com หนา 28
เมอขอมลทถกสงเขามาเปนอกขระ ‘F’ หนยนตจะเดนไปหนา
เมอขอมลทถกสงเขามาเปนอกขระ ‘B’ หนยนตจะเดนถอยหลง
เมอขอมลทถกสงเขามาเปนอกขระ ‘L’ หนยนตจะเดนเลยวซาย
เมอขอมลทถกสงเขามาเปนอกขระ ‘R’ หนยนตจะเดนเลยวขวา
เมอขอมลทถกสงเขามาไมตรงตามเงอนไขใดๆเลย หนยนตกจะหยดวง
*****การเขยนโปรแกรมบน Robo Circle สามารถศกษาไดจากคมอการเขยนโปรแกรมควบคม
อยางงายดวย Logo Blocks และ คมอสรางหนยนตอตโนมตควบคมดวยโปรแกรมภาษาโลโก****