Robo circle3s appinventor

www.microbotshop.com หนา 1

พฒนาโปรแกรมบนมอถอแอนดรอยดวย AppInventor ควบคมหนยนต Robo Circle3s

เปดโปรแกรมเวบบราวเซอรและเขาไปทเวบไซด http://www.appinventor.mit.edu/

คลกเลอก Invent Create Mobile Apps เพอเขาใชงาน AppInventor

จะปรากฏหนาตางการเขาใชงานระบบ สาหรบผทสมครใชงาน Google Account เรยบรอยแลวใหทาการ

กรอกชอทอยอเมลลและรหสผานไดเลย แตถายงไมไดสมครกเขาไปสมครเพอใชงาน Google Account

เสยกอน

http://www.microbotshop.com/


หนาตางการสมครเพอใชงาน Google Account ซงจาเปนตองใชในการ Login เพอเขาสระบบ กอนการใช

งาน AppInventor โดยจะมชองสาหรบกรอกชอทอยอเมลล รหสผาน เราสามารถใชทอยอเมลลใดๆกไดท

เรามอยแลวในการสมครแตจาเปนตองใชอเมลลทมอยจรงเพราะจะตองมการยนยนทอยอเมลลอกครงหนง

หลงจากทเราไดสมครใชงาน Google Accounts เรยบรอยแลว ใหเราทากรอกรายละเอยดทอยอเมลลและ

รหสผานใหถกตองเพอเขาใชงาน AppInventor

เมอเขาสระบบเรยบรอย ในครงแรกจะปรากฏหนาตางดงภาพ หนาตางเกยวกบการจดการโปรเจคงาน

ตางๆ ซงประกอบดวย การสรางโปรเจคใหม การลบโปรเจค การดาวนโหลดโปรเจคงานทงหมด ดาวน

โหลดและอพโหลดไฟลโปรเจค รายชอโปรเจค และวนเดอนปทถกสรางขน แตในทนเรายงไมไดสรางโปร

เจคขนมาใหม



กอนทจะทาการแกไขปรบแตงแอพพลเคชนไดนนเราจาเปนตองสรางไฟลโปรเจคขนมาใหมเสยกอน โดยม

ขนตอนและวธการดงนคอ

สรางโปรเจคงานใหมาใหม โดยมขนตอนดงนคอ

1 คลกทปม New จากนนจะปรากฏหนาตางสาหรบตงชอไฟลงานขนมา

2. ทาการตงชอไฟลงานตามตองการ ในตวอยางตงชอเปน Robot

3. คลกทปม OK เพอยนยนการสรางโปรเจคใหม หลงจากนนโปรแกรมจะเขาสหนาตางของการออกแบบ



เมอตงชอไฟลงานเรยบรอยจะปรากฏหนาตางดงภาพ ซงตอไปเราจะเรยกหนาตางนวาหนาตางการ

ออกแบบ Design ใชสาหรบออกแบบหนาตาโปรแกรม การดาวนโหลดโปรแกรมลงบนมอถอ และการตงคา

การใชงานตางๆ

กอนอนใหเราทาการออกแบบหนาตาโปรแกรมทตองการโดยมสวนประกอบหลกๆดงน

• มปมกด connect เราจะใชสาหรบเชอมตอบลทธระหวางโทรศพทมอถอกบตวหนยนต

• มปมกด disconnect ใชสาหรบยกเลกการเชอมตอบลทธระหวางโทรศพทมอถอกบตวหนยนต



• มปมควบคมการทางานของหนยนตทงหมด 5 ปม ซงจะประกอบไปดวย ปมสาหรบสงหนยนตให

เดนหนา ถอยหลง เลยวซาย เลยวขวาและปมหยด ซงในแตละปมกดจะถกแทนทดวยรปภาพ

ตางๆดงภาพ

หลงจากทเราไดทาการออกแบบหนาตาโปรแกรมเสรจเรยบรอยแลวตอไปกจะกลาวถงขนตอนการลงมอ

ปฏบต แตกอนอนใหเราทาการอพโหลดไฟลรปภาพทเกยวของ ทไดเตรยมไวแลว ขนไปเกบไวทไฟลงาน

ของเรา ทอยบนเซรฟเวอรกอน

ขนตอนการอพโหลดไฟลภาพขนไปไวในไฟลงานของเรา

คลกเลอกทปม Add ทอยบรเวณดานลางขวามอของโปรแกรม เพอทจะทาการอพโหลดไฟลไปยงเวบ

เซรฟเวอร

หลงจากนนจะปรากฏหนาตางสาหรบ Upload File… ใหคลกทปม เรยกด เพอเลอกไฟลทตองการอพ

โหลด

เลอกไฟลทเราตองการจะอพโหลด หลงจากนนคลกทปม Open



เลอกไปเรยบรอยแลว ใหคลกทปม OK เพอทาการอพโหลดไฟล

***** การอพโหลดจาเปนตองใชเวลาระยะหนง ทงนขนอยกบขนาดของไฟลและความเรวของอนเตอรเนต

ดวย

ไฟลรปตางๆ ทจะทาการอพโหลด มจานวนทงหมด 6 ภาพ ใหทาการอพโหลดไฟลทเหลอใหครบทกไฟล

เมออพโหลดไฟลเสรจเรยบรอยแลว ทเมน Media จะแสดงรายชอของไฟลทเราไดทาการอพโหลดไว

ทงหมดปรากฏอย



หลงจากทเราไดทาการอพโหลดไฟลทจาเปนในการใชงานเรยบรอยแลว ขนตอนตอไปกคอการลงมอทา

ออกแบบหนาตาของโปรแกรม ไดดงน

ขนตอนแรกใหเราเลอกเครองมอทชอวา ListPicker ทอยในหมวดหมของเครองมอพนฐาน(Basic) แลวลาก

ไปวางไวยงหนาตางการออกแบบ(Viewer) แสดงดงภาพ

โครงสรางหนาตาโปรแกรม ซงจะประกอบไปดวยปมกด และเครองมอตางๆดงน



รายชอเครองมอตางๆทใชงาน ประกอบดวย

ออกแบบโครงสรางหนาตาโปรแกรม ดงน

หลงจากออกแบบโครงสราง หนาตาโปรแกรมเรยบรอยแลวตอไปจะเปนการนาเครองมอทเราไดทาการ

ออกแบบไวแลว เลอกเครองมอทตองการแลวลากมาวางทหนาตาง Screen1

Horizontal Arrangment

Vertical Arrangment

label

Button

ListPicker



ใหเราทาการตงคาคณสมบตตางๆใหกบเครองมอในแตละตวดงตอไปน

1. แกไขขอความทตาแหนง Properties Text ของปมกด(Button) แตละตวโดยใหลบขอความทงหมด

ออก ใหเวนวางเอาไว

หลงจากทเอาขอความจากปมกดแตละตวออกแลวจะปรากฏหนาตาโปรแกรมดงแสดงในภาพ



2. แกไขขอความ ทตาแหนง Properties Text ของ Label1 และ Label 2 แลวทาการแกไขขอความ

โดยตงชอวา Connect และ Disconnect ดงภาพ

3. แกไขสพนหลงใหกบปมกดแตละตว โดยไปท Properties Background Color แลวเลอกปมกด

Button โดยใหแตละปมเลอกไปท None ใหทาเชนนใหครบทกปม

หลงจากแกไขสพนหลงของปมกดทกตวเรยบรอยแลว สพนหลงของปมจะเปลยนไป แสดงดงภาพ



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



จะไดปมกดทมพนหลงแสดงเปนรปภาพ Bluetooth_icon แทนปมกด

6. ใหเราทาการแกไข ปรบแตงคณสมบต Image ของเครองมอแตละตว โดยการแทรกรปภาพใหกบ

เครองมอ ตางๆ ตามทเราไดทาการออกแบบไวแลวดงภาพ



เครองมอทสาคญมากทใชในการเชอมตอไรสายบลทธทขาดไมไดเลย นนคอชดคาสง BluetoothClient

เพราะจะทาหนาทเปนตวเชอมตออปกรณบลทธใหสามารถใชงานรวมกบบลทธภายนอกได ใหทาการลาก

แลวนาไปวางทหนาตางของการออกแบบ

ตอมานาเครองมอทชอ Notifier ลากแลวนาไปวางทหนาตางของการออกแบบ

สงเกตทบรเวณดานลางของหนาจอการออกแบบจะพบสญลษณเปนไอคอน Bluetooh Client1 และ

Notifier1 ปรากฏอย กถอวาการออกแบบหนาตาของโปรแกรมไดเสรจเรยบรอยตามทออกแบบไว

ตอไปจะเปนการตงชอใหกบปมกดและเครองมอตางๆในโปรแกรม เพอจะชวยในการเขยนโปรแกรมให

สามารถทาไดงายและรวดเรวมากขน ดงน



แสดงชอของปมกดและสวนประกอบตางๆ ขณะทยงไมไดแกไข

ทาการแกไขชอใหกบปมกดและสวนประกอบของโปรแกรมตางๆดงน

ตงชอคณสมบตของเครองมอตางๆดงน



ชอเครองมอ แถบเครองมอ แกไขชอ คาอธบาย

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 กาลงทางาน



สาหรบผใชโปรแกรม Google Chrome เปนเวบบราวเซอรจะปรากฏหนาตางใหเราทาการดาวนโหลดไฟล

ลงในเครองคอมพวเตอร โดยจะมขอความเตอนวาตองการเกบไฟล

AppInventorForAndroidCodeBlocks.jnlp ไวในคอมพวเตอรหรอไม ซงในทนใหเราเลอกทจะเกบไฟลไว

ใสคอมพวเตอร แสดงดงภาพ

เสรจแลวคลกไฟลทช อ AppInventorForAndroidCodeblocks ขนมา

จะมการเรยกจาวาขนมาเพอรนไฟล AppInventorForAndroidCodeblocks

จะปรากฏหนาตาง แจงเตอนเกยวกบความเสยงในการทางานของไฟลนน



ซงในขนตอนนใหคลกเลอกไปท 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 ขนมาทางาน



**** จากการทดสอบการทางานรวมกบเวบบราวเซอรตาง ไมวาจะเปน Google Chrome , Internet

explorer และ Mozilla Firefox ปรากฏวา Google Chrome สามารถทางานรวมกบ AppInventor ไดดทสด

*******

หนาตางโปรแกรม Android Blocks Editor เพอใชในการเขยนโปรแกรม

ทมมมองดานซายมอ จะพบเครองมอทจาเปนจะตองใชในการเขยนโปรแกรม จะประกอบดวยหมวดหม

ใหญๆ 3 หมวด คอ Built-ln , My Blocks และ Advanced รายละเอยดในการใชงานดไดจากเนอหาของ

การใชงานโปรแกรม

คลกเลอกทแถบเครองมอ My Blocks เพอเตรยมตวในการเขยนโปรแกรม



ออกแบบการทางานของโปรแกรม

ในสวนของการเขยนโปรแกรมควบคมทไดออกแบบไว จะประกอบดวย 3 สวนหลกๆ คอ

1. โปรแกรมทางานในขณะทยงไมเชอมตอกบอปกรณบลทธ

2. โปรแกรมทางานในขณะททาการเชอมตอกบอปกรณบลทธ

3. โปรแกรมทางานในขณะทยกเลกการเชอมตอกบอปกรณบลทธ

เรมตนการเขยนโปรแกรมตามทไดออกแบบไว โดยจะเรมทโปรแกรมทางานในขณะทยงไมไดทา

การเชอมตอกบอปกรณบลทธ

โปรแกรมในสวนแรกจะทางานในขณะทยงไมเชอมตอกบอปกรณบลทธ

คลกเลอกทชอ ConnecLisPicker แลวเลอกไปท BeforePicking ลากแลววางไวยงบรเณพนทวางดาน

ขวามอ ซงเปนพนททใชสาหรบเขยนโปรแกรม



จะไดหนาตางดงภาพ

connecListPicker.BeforPicking เปนการตงคาการทางานกอนทจะเรมทาการเชอมตอกบบลทธของหนยนต

เลอกบลอก ConnecLispicker.Elements ไปวางไวยงบรเวณภายในของ ConectLispicker.BeforPicking ดง

แสดงดงภาพ

คลกเลอกท BluetoothClient1.AddressAndName ไปวางตอทาย ConnectLispicker.Elements ซงคาสง

การทางานในสวนนคอ การแสดงรายชอของอปกรณบลทธตางๆทเราจะทาการเชอมตอกบเขากบมอถอ



โปรแกรมในสวนทสองจะทางานในขณะทเชอมตอกบอปกรณบลทธของหนยนตเรยบรอยแลว

เรมตนดวยการคลกเลอก ConnectLispicker.AfterPicking แลวลากไปวางบรเวณพนทวาง

เสรจแลวลากบลอก ifelse ทอยในสวนของเครองมอ Control ไปวางไวขางใน

เขยนคาสงภายในบลอก ConnectLisPicker.AfterPicking ซงจะทาหนาทหลงจากทไดเชอมตออปกรณบล

ทธทงสองเรยบรอยแลว



โปรแกรมในสวนทสามจะทางานในขณะทยกเลกการเชอมตอกบอปกรณบลทธของหนยนต

เรยบรอยแลว

เขยนคาสงภายในบลอกทชอ btndisconnect.Click โดยคาสงจะสงงานใหมอถอยกเลกการเชอมตอบลทธ

หลกจากเขยนคาสงเพอควบคมการทางานตามทไดออกแบบไว ทเหลอคอการเขยนโคดคาสงใหกบปมกด

ตางๆ ซงจะมหนาทส งใหหนยนตเดนหนา ถอยหลง เลยวซาย เลยวขวา และหยด



หลงจากทเขยนโปรแกรมเสรจเรยบรอยแลว จะแสดงดงภาพ

ทดสอบการทางานกบโปรแกรมจาลองการทางาน Emulator ของ app inventor โดยคลกเลอกไปท New

emulator

อาจจะตองใชเวลาระยะ 2-3 นาทในการโหลด emulator ขนมา คลกท OK เพอดาเนนการตอ



ทบรเวณดานบนของโปรแกรม ในหวขอ Connect to Device คลกเลอก emulator 5554 เพอใหโปรแกรมท

เราพฒนาขนนนไปแสดงทหนาตางของตว Emulator

หนาตาแอพพลเคชนทเราไดพฒนาเสรจเรยบรอยแลว

หลงจากทเราไดทาการทดสอบการทางานของโปรแกรมกบโปรแกรมจาลองการทางาน emulator เรยบรอย

แลว ขนตอนตอไปคอการดาวนโหลดโปรแกรมไปยงโทรศพทมอถอ โดยกอนทจะทาการดาวนโหลด

โปรแกรมลงบนมอถอเราจาเปนตองเชอมตอมอถอเขากบคอมพวเตอรใหเรยบรอย เสรจแลวใหเลอกหวขอ

Connect to Device เปน รหสประจาตวเครองของโทรศพทมอถอแทน ดงภาพ



หลงจากนนไปทหนาตางการออกแบบ คลกทเมน Package for Phone เลอกไปท Download to

Connected Phone เพอทาการดาวนโหลดลงบนอปกรณมอถอทไดเชอมตอไว หลงจากนนโปรแกรม app

inventor จะทาการดาวนโหลดพรอมกบตดตงแอพพลเคชนทเราไดสรางขนลงบนโทรศพทมอถอหรอแทบ

เลตทเราไดทาการเชอมตอไว

เมอโปรแกรมทาการดาวนโหลดและตดตงแอพพลเคชนลงบนอปกรณแอนดรอยเรยบรอยแลวจะมหนาตาง

แสดงขอความเดงขนมาดงภาพ ใหคลกท OK การพฒนาแอพพลเคชนของเรากเสรจสนเรยบรอย

หลงจากดาวนโหลดและตดตงโปรแกรมเสรจเรยบรอยแลว ตอไปลองมาทาการทดสอบโดยการเปด

แอพพลเคชนทช อ robot บนโทรศพทมอถอแอนดรอยของเรา ซงจะแสดงหนาตาโปรแกรมดงภาพ



การใชงานโปรแกรม

คลกทปมสญลกษณบลทธดานบนเพอทาการเชอมตอบลทธกบหนยนต Robo Circle

จะปรากฏรายชออปกรณบลทธทมอถอคนพบ ใหเลอกรายชอบลทธทไดตดตงไวบนตวหนยนต Robo

Circle ในทนมชอวา BlueStick0004

หลงจากเชอมตอบลทธเสรจเรยบรอยแลวจะแสดงหนาตาโปรแกรมดงภาพ ซงเราสามารถใชงานโปรแกรม

เพอควบคมหนยนตใหเดนหนา ถอยหลง เลยวซาย เลยวขวา และหยดได

เมอตองการยกเลกการเชอมตอบลทธใหคลกเลอกทปม disconnect



เขยนโปรแกรมบน Robo Circle3S

เราจาเปนตองเขยนโปรแกรมบนตวหนยนต RoboCircle เพอรอรบคาสงจากโปรแกรม robot บนโทรศพทมอถอ

ทเราไดพฒนาเสรจเรยบรอยแลว ในสวนของการเขยนโปรแกรมภาษาโลโกนน เครองมอทจาเปนในการรบ

ขอมลอนกรมนน คอ (newir ?) บลอกตรวจสอบการรบขอมล และ (ir) บลอกการรบขอมลอนกรม

คาอธบายโปรแกรม ตวอยางนจะวนตรวจสอบวามขอมลใหมถกสงเขามาหรอไม และจะวนตรวจสอบ

จนกวาจะมขอมลถกสงเขามาถงจะทางานในบลอกตอไป

หลงจากทรบขอมลเขามาแลวจะทาการตรวจสอบขอมลทไดวาตรงกบเงอนไขใด ทเราไดตงเอาไว

และเมอเงอนไขใดเปนจรงกจะทางานในชดคาสงของเงอนไขนนๆ เทานเรากสามารถควบคมหนยนตดวย

โทรศพทมอถอผานบลทธไดเรยบรอยแลว

โคดทเขยนบนตวหนยนต RoboCircle ทเขยนดวยโปรแกรม Logo Blocks



เมอขอมลทถกสงเขามาเปนอกขระ ‘F’ หนยนตจะเดนไปหนา

เมอขอมลทถกสงเขามาเปนอกขระ ‘B’ หนยนตจะเดนถอยหลง

เมอขอมลทถกสงเขามาเปนอกขระ ‘L’ หนยนตจะเดนเลยวซาย

เมอขอมลทถกสงเขามาเปนอกขระ ‘R’ หนยนตจะเดนเลยวขวา

เมอขอมลทถกสงเขามาไมตรงตามเงอนไขใดๆเลย หนยนตกจะหยดวง

*****การเขยนโปรแกรมบน Robo Circle สามารถศกษาไดจากคมอการเขยนโปรแกรมควบคม

อยางงายดวย Logo Blocks และ คมอสรางหนยนตอตโนมตควบคมดวยโปรแกรมภาษาโลโก****


Education

Robo circle3s appinventor