คู่มือ Handbook app inventor
- 1. เอกสารประกอบการใช้งาน การพัฒนาแอพพลิเคชั่นบนอุปกรณ์แอนดรอยด์ สําหรับผู้เริ่มต้น จัดทําโดย ธวัชชัย สีลาดเลา AppInventorthai สารบัญ “ เนื้อหาหรือข้อมูลต่างๆที่ปรากฏในคู่มือเล่มนี้เป็นเพียงการนําเนื้อหา ข้อมูล ข่าวสาร และความรู้ของผู้เขียนที่มีอยู่อย่างจํากัด ซึ่งอาจจะมีความผิดพลาดในเนื้อหาและความแตกต่างกันบ้าง ในการนําไปใช้งาน ซึ่งผู้เขียนมิได้มีเจตนาให้เกิดขึ้น ความเสียหายต่างๆ ที่เกิดขึ้นจากการนําบทความนี้ไปใช้งาน ผู้เขียนมิได้มีหน้าที่รับผิดชอบโดยตรง แต่จะพยายามแก้ไขปรับปรุงเนื้อหาให้รัดกุมมากขึ้น คู่มือเล่มนี้ไม่ได้สงวนสิทธิ์ในการคัดลอก ดัดแปลง ทําซํ้าแต่ประการใด ”
- 2. สารบัญ แนะนํา 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)
- 3. แอนดรอยด์ ( 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/ เพื่อที่จะนําแอพพลิเคชั่นที่สร้างขึ้นมา แก้ไข และพัฒนาต่อได้ ถือเป็นอีกหนึ่งแนวทางในการพัฒนาแอพพลิเคชั่นบนมือถือรูปแบบใหม่ ที่ น่าสนใจ และสามารถใช้เป็นพื้นฐานในการเรียนรู้และพัฒนาแอพพลิเคชั่นขั้นสูงต่อไป
- 5. Block Diagram แสดงส่วนประกอบของแอพพลิเคชั่น กระบวนการในการพัฒนาแอพพลิเคชั่นด้วย AppInventor 1. ติดตั้ง JAVA JRE 2. ติดตั้งโปรแกรม App Inventor 3. ออกแบบและเขียนคําสั่งด้วย AppInventor 4. ติดตั้งแอพพลิเคชั่นลงบนอุปกรณ์แอนดรอยด์
- 6. ติดตั้ง 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 ลงในเครื่องคอมพิวเตอร์
- 7. จากนั้นคลิกเพื่อยอมรับข้อตกลงในการดาวน์โหลด รอสักครู่ ระบบจะทําการติดตั้งโปรแกรมบนระบบปฏิบัติที่เราใช้โดยอัตโนมัติ เมื่อโปรแกรมถูกติดตั้งเรียบร้อยแล้ว ก็คลิกที่ปุ่ม Close เพื่อปิดหน้าต่างนี้ได้เลย
- 8. 2) ติดตั้งแบบออฟไลน์ (offline install ) ก็คือการดาวน์โหลดไฟล์ติดตั้งมาเก็บไว้ในเครื่อง คอมพิวเตอร์ก่อน และทําการติดตั้งภายหลัง สามารถดาวน์โหลดไฟล์จาวาสําหรับใช้ในการติดตั้งได้ที่ http://java.com/en/download/manual.jsp หลังจากทําการดาวน์โหลดไฟล์ติดตั้งของจาวาเสร็จเรียบร้อยแล้ว จะได้ไฟล์สําหรับติดตั้งดังภาพ • ไฟล์ jre-7u21-windows-i586 ใช้สําหรับใช้ติดตั้งบนระบบปฏิบัติการวินโดวส์ 32 bit • ไฟล์ jre-7u21-windows-x64 ใช้สําหรับใช้ติดตั้งบนระบบปฏิบัติการวินโดวส์ 64 bit ก่อนทําการติดตั้งโปรแกรมให้เลือกไฟล์ติดตั้งให้ตรงกับความต้องการของระบบปฏิบัติการคอมพิวเตอร์ ที่ใช้ จากนั้นดับเบิ้ลคลิกไฟล์ที่ต้องการ และคลิกไปที่ Install
- 9. จากนั้นจะเข้าสู่กระบวนการติดตั้งโปรแกรม อาจต้องใช้เวลาสักครู่ ขึ้นอยู่กับความเร็วของเครื่อง คอมพิวเตอร์ด้วย โปรแกรม Java Jre ถูกติดตั้งบนคอมพิวเตอร์เรียบร้อยแล้ว
- 10. การติดตั้งโปรแกรม AppInventor เริ่มต้นเข้าไปที่ http://www.appinventor.mit.edu/ เป็นเว็บไซด์หลักในการเข้าใช้งาน โปรแกรม และดาวน์โหลดโปรแกรมสําหรับติดตั้งลงบนคอมพิวเตอร์ เราสามารถเข้าไปดาวน์โหลดไฟล์โปรแกรมได้ฟรี โดยคลิกไปที่ Explore หรือคลิกที่ Welcome to MIT App Inventor http://appinventor.mit.edu/explore/
- 11. หลังจากนั้นคลิกเลือกที่หัวข้อ 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 หรือ สูงกว่า *** แนะนําให้ใช้โปรแกรมบราวเซอร์เวอร์ชั่นล่าสุดในปัจจุบัน
- 12. ขั้นตอนต่อไปเป็นขั้นตอนการติดตั้งโปรแกรม AppInventor ที่ตําแหน่งด้านล่างของเว็บเพจ http://explore.appinventor.mit.edu/content/setup จะบอกถึงขั้นตอน การติดตั้งโปรแกรม AppInventor ที่สามารถทํางานได้บนระบบปฏิบัติการต่างๆ ไมว่าจะเป็น Mac OS, Linux และ Windows โดยในที่นี้ผมจะขออธิบายเฉพาะการติดตั้งโปรแกรมบนระบบปฏิบัติการ Windows เท่านั้น โดยคลิก เลือกไปที่ Instructions for Windows
- 13. คลิกเพื่อดาวน์โหลดโปรแกรมเพื่อใช้ในการติดตั้ง หลังจากดาวน์โหลดเสร็จเรียบร้อย จะได้ไฟล์ชื่อว่า AppInventor_Setup_Installer_v_1_2.exe ไฟล์โปรแกรมติดตั้งของ AppInventor ที่ได้จากการดาวน์โหลด หลังจากนั้นดับเบิ้ลคลิกเพื่อทําการ ติดตั้งโปรแกรม คลิก Next เพื่อเข้าสู่ขั้นตอนถัดไป คลิก I Agree เพื่อยอมรับข้อตกลงในการเข้าใช้งานโปรแกรม AppInventor
- 14. เลือกตําแหน่งสําหรับติดตั้งโปรแกรม แนะนําให้ใช้ค่าปกติที่โปรแกรมตั้งไว้ให้ คลิกที่ปุ่ม Install เพื่อทําการติดตั้งโปรแกรม
- 15. การติดตั้งโปแกรม 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
- 16. หลังจากที่เราได้ทําการติดตั้งโปรแกรม และตั้งค่าการใช้งานร่วมกันระหว่างโทรศัพท์มือถือแอน ดรอยด์ร่วมกับคอมพิวเตอร์เรียบร้อยแล้ว ขั้นตอนต่อไปเป็นขั้นตอนในการพัฒนาแอพพลิเคชั่น ก่อนอื่นเปิดโปรแกรมเว็บบราวเซอร์และไปที่เว็บไซด์ http://www.appinventor.mit.edu/ คลิกเลือก Invent Create Mobile Apps ที่อยู่บริเวณด้านบนขวามือ จะปรากฏหน้าต่าง LOGIN เพื่อเข้าสู่ระบบ โดยก่อนที่เราจะทําการ Login เพื่อเข้าไปใช้งานได้นั้นเราจําเป็นต้องมี Google Account เพื่อใช้ในการ Login เข้าสู่ระบบเสียก่อน ถ้ายังไม่มีให้เข้าไปลงทะเบียน Google Account เสียก่อน
- 17. การสมัคร Google Account เพื่อลงชื่อเข้าใช้งาน AppInventor ในการเข้าใช้งาน App Inventor นั้น มีความจําเป็นต้องลงชื่อในการเข้าใช้งานก่อน จึงจะ สามารถใช้งานได้ โดยในที่นี้เราสามารถใช้ชื่อบัญชีจากทาง Google ซึ่งก็คือ Google Account นั่นเอง และนอกจากนี้ยังสามารถใช้ Gmail Accounts ในการเข้าใช้งานได้ ซึ่งถ้าผู้ใช้มีบัญชีของ Google อยู่ แล้ว หรือว่ามี Gmail อยู่แล้ว ก็สามารถลงชื่อเข้าใช้งาน AppInventor ได้เลย โดยไม่จําเป็นต้องสมัคร บัญชีผู้ใช้ใหม่ แต่สําหรับผู้ที่ยังไม่มีบัญชีผู้ใช้งานของ Google ก็สามารถสมัครใหม่ได้ตามขั้นตอน ต่อไปนี้ ขั้นตอนการสมัครเพื่อขอใช้ Google Account เริ่มต้นไปที่ URL https://accounts.google.com/ จะปรากฏหน้าจอดังภาพ คลิกที่สมัครใช้งาน
- 18. สําหรับผู้สร้างบัญชี Google ใหม่ ให้กรอกรายละเอียดและข้อมูลที่จําเป็น ให้ถูกต้องและครบถ้วน หลังจากสร้างบัญชีผู้ใช้งานเสร็จเรียบร้อยแล้ว ก็จะได้บัญชีที่สามารถนําไปใช้ในการ Login เพื่อเข้าใช้ งานโปรแกรม AppInventor ได้แล้ว
- 19. ทดสอบการเข้าใช้งาน AppInventor โดยพิมพ์ URL ไปที่ http://appinventor.mit.edu จากนั้นจะ ปรากฏหน้าหลักของ App Inventor ดังภาพ คลิกเลือกที่หัวข้อ Invent เพื่อเข้าใช้งาน AppInventor จากนั้นทําการลงชื่อเพื่อเข้าใช้งาน AppInventor หลังจากลงชื่อเข้าใช้งานเสร็จเรียบร้อยแล้วจะปรากฏหน้าต่างดังภาพ แสดงว่าเราสามารถเข้าใช้งาน โปรแกรม AppInventor ได้แล้ว
- 20. การสร้างโปรเจ็คใหม่ ขั้นตอนการสร้างโปรเจ็คใหม่สามารถได้ง่ายๆ เพียงคลิกที่ My Projects จากนั้นคลิกที่ New ตั้งชื่อไฟล์ตามต้องการ แต่จะต้องไม่มีสัญลักษณ์และอักขระพิเศษ จากนั้นคลิกที่ OK แค่นี้เราก็จะได้ โปรเจ็คใหม่ขึ้นมาแล้ว หลักจากสร้างโปรเจ็คใหม่เรียบร้อย โปรแกรม AppInventor จะเข้าสู่หน้าต่างการออกแบบโดยอัตโนมัติ
- 21. การดาวน์โหลดซอร์สโค๊ด ไฟล์โปรเจ็คที่ถูกสร้างขึ้นและพัฒนาอยู่นั้น เราสามารถทําการดาวน์โหลดเพื่อเก็บไฟล์นั้นไว้ใช้ ในการพัฒนาต่อไปได้ อีกทั้งยังสามารถนําไฟล์ที่ได้ไปใช้กับคอมพิวเตอร์เครื่องอื่นได้ด้วย ขั้นตอนดาวน์ โหลดทําได้ง่ายๆดังนี้คือ คลิกเลือกที่ My Project จากนั้นทําเครื่องหมายถูกหน้าโปรเจ็คที่ต้องการ เสร็จแล้วคลิกที่หัวข้อ More Actions จากนั้นเลือก Download Source เพื่อเริ่มการดาวน์โหลด หลังจากดาวน์โหลดไฟล์โปรเจ็คที่ต้องการเป็นที่เรียบร้อยแล้ว ไฟล์ที่ได้จะเป็นไฟล์ที่ถูกบีบอัด(ZIP) เอาไว้ ซึ่งสามารถนําไปใช้งานต่อได้ โดยขั้นตอนของการอัพโหลด การอัพโหลดซอร์สโค๊ด การอัพโหลดซอร์สโค๊ดนั้น จะเป็นการนําไฟล์โปรเจ็คที่เราได้จัดเก็บเอาไว้ มาใช้งาน เพื่อแก้ไข หรือพัฒนาต่อ โดยไฟล์ที่จะทําการอัพโหลดได้นั้นจะเป็นไฟล์ที่ถูกบีบอัด (ZIP) โดยมีขั้นตอนดังนี้คือ เริ่มต้นไปที่ My Projects จากนั้นที่หัวข้อ More Actions คลิกเลือกไปที่ Upload Source เพื่อทําการอัพ โหลด
- 22. จะปรากฏหน้าต่างสําหรับเลือกไฟล์ที่ต้องการจะอัพโหลด คลิกที่ Choose File จากนั้นเลือกไฟล์ที่ ต้องการจะอัพโหลด เสร็จแล้วคลิก OPEN และ OK ตามลําดับ หลังจากที่ได้ทําการอัพโหลดไฟล์เสร็จสิ้นแล้ว จากนั้นก็จะเข้าสู่หน้าต่างของการพัฒนาต่อไป
- 23. เริ่มต้นเขียนโปรแกรมกับ Hello World หลังจากที่ทําความรู้จักกับ AppInventor มาพอสมควรแล้ว แต่ไปเราจะสร้างโปรแกรมตัวแรก กัน กับโปรแกรม Hello World สร้างโปรเจ็คขึ้นมาใหม่ แล้วตั้งชื่อตามต้องการ ในที่นี้ตั้งชื่อเป็น Hello World นําเครื่องมือที่ต้องการใช้งาน ซึ่งประกอบด้วย Label และ Button ลากแล้ววางบนพื้นที่ว่างบริเวณ หน้าจอออกแบบ
- 24. คลิกที่ Open Blocks Editor เพื่อเปิดโปรแกรม blocks editor ขึ้นมา เพื่อใช้สําหรับเขียนคําสั่งการ ทํางานให้กับโปรแกรม จะปรากฏชื่อไฟล์ AppInventorForAndroid.jnlp ให้คลิกที่ปุ่ม Keep เพื่อดาวน์โหลดและจัดเก็บไฟล์ที่ ได้ลงบนคอมพิวเตอร์ ในกรณีนี้เป็นการใช้งานบราวเซอร์ Google Chrome จากนั้นคลิกที่ชื่อไฟล์ที่ดาวน์โหลดเสร็จแล้ว เพื่อเรียกใช้งานโปรแกรม blocks editor ขึ้นมา ไฟล์ที่ได้จากการดาวน์โหลด **** ในกรณีที่บราวเซอร์เป็น Internet Explorer จะปรากฏหน้าต่างดังภาพ ซึ่งเราสามารถคลิกที่ปุ่ม Save เพื่อจัดเก็บไฟล์เอาไว้ก่อน หรือจะคลิกที่ปุ่ม Open เพื่อเปิดไฟล์ ก็ได้เช่นกัน **** ในกรณีที่บราวเซอร์เป็น Firefox จะปรากฏหน้าต่างดังภาพ ให้คลิกไปที่ปุ่มตกลง จะเป็นการดาวน์ โหลดไฟล์และเรียกโปรแกรม Block Editor ขึ้นมา
- 25. เลือกบล็อกที่ต้องการ ในที่นี้คือ Button. Click จากนั้นลากไปวาง ที่อยู่ในเครื่องมือ Button มาวาง บริเวณพื้นที่ว่าง หลังจากลากมาวางเรียบร้อยแล้วจะปรากฏดังภาพ คลิกลากเครื่องมือ Label1.Text ไปไว้ในบล็อก Button1.Click
- 26. การลากบล็อกไปวางต่อกันนั้นจะต้องวางให้ได้ลงตัวพอดีกับบล็อกอื่น มิเช่นนั้นโปรแกรมจะไม่สามารถ ทํางานได้ ดังภาพ คลิกเลือกเครื่องมือ Text วางต่อท้าย Label1.Text เพื่อใช้ในการแสดงข้อความ จากภาพสามารถอธิบายการทํางานได้ดังนี้คือ เมื่อคลิกที่ปุ่ม Button 1 แล้ว ข้อความ text จะแสดงขึ้น แทนที่ตําแหน่งของ Label1
- 27. เราสามารถแก้ไขข้อความที่เครื่องมือ text ได้ตามต้องการ ในที่นี้ให้ตั้งชื่อว่า Hello World
- 28. จําลองการทํางานของโปรแกรมด้วย Emulator หลังจากเขียนคําสั่งให้กับโปรแกรมเสร็จเรียบร้อยแล้ว ขั้นตอนต่อไปจะเป็นการทดสอบการ ทํางานของโปรแกรม โดยจะใช้วิธีการจําลองการทํางานของโปรแกรม ซึ่งสามารถทําโดยการคลิกเลือก ไปที่ New emulator รอสักครู่ จะปรากฏหน้าต่าง emulator ขึ้นมา เพื่อจําลองการทํางานของโปรแกรมที่เราได้สร้างขึ้น
- 29. ย้อนกลับไปที่ Block Editor ให้ทําการคลิกไปที่ emulator เพื่อเชื่อมต่อโปรแกรมให้ไปแสดงผลการ ทํางานที่หน้าต่าง emulator เมื่อโปรแกรมทําการเชื่อมต่อกับ emulator เป็นที่เรียบร้อยแล้ว ก็จะแสดงหน้าตาโปรแกรมที่เราได้ทํา การออกแบบไว้ จากนั้นเริ่มต้นทดสอบการทํางานของโปรแกรม โดยการคลิกที่ปุ่ม Button1 ก็จะมีข้อความ Hello World ปรากฏขึ้น แทนที่ของ
- 30. การอัพโหลดไฟล์มัลติมีเดีย การพัฒนาแอพพลิเคชั่นนั้นสิ่งที่สําคัญและขาดไม่ได้เลยอย่างหนึ่งก็คือ การใช้งานไฟล์ประเภท มัลติมีเดีย ซึ่งประกอบด้วยภาพ และเสียง เพราะฉะนั้น เราจึงจําเป็นต้องเรียนรู้หลักการทํางานใน เบื้องต้นว่าโปรแกรม 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
- 31. 3. เลือกไฟล์ตามที่ต้องการ จากนั้นคลิก Open 4. จากนั้นคลิกที่ OK เพื่อทําการอัพโหลดไฟล์ไปยังโปรเจ็คของเรา การอัพโหลดเสร็จเรียบร้อย ระยะเวลาในการอัพโหลดนั้นขึ้นอยู่กับความเร็วของอินเตอร์เน็ตและขนาด ของไฟล์ ไฟล์ที่เราไม่ต้องการใช้ในโปรเจ็ค สามารถทําการลบทิ้งได้ โดยการคลิกเลือกไฟล์ที่ต้องการจะลบทิ้ง จากนั้นคลิกที่ Delete
- 32. ถ้าต้องการดาวน์โหลดไฟล์ที่มีอยู่ในโปรเจ็คเอามาเก็บไว้ในคอมพิวเตอร์ สามารถทําได้โดยการคลิกที่ ไฟล์ที่ต้องการดาวน์โหลด จากนั้น คลิกที่ Download to my computer เพื่อจัดเก็บไฟล์ที่ได้ลงบน คอมพิวเตอร์ ตัวอย่างการนําไฟล์ภาพไปใช้งาน 1. นําเครื่องมือ Button มาวางบนหน้าจอการออกแบบ 2. อัพโหลดไฟล์ภาพที่ต้องการใช้ในโปรเจ็คนี้ ตัวอย่างจะเป็นภาพแมว
- 33. 3. อัพโหลดไฟล์เสียงที่ต้องการ ตัวอย่างจะเป็นเสียงร้องของแมว 4. จะได้ไฟล์ภาพและเสียงเรียบร้อยแล้ว 5. คลิกที่ Button1 จากนั้นไปที่ Properties Image เลือกไฟล์ที่ได้อัพโหลดไว้แล้ว ชื่อว่า cat.jpg จากนั้นคลิกที่ OK
- 34. หน้าตาโปรแกรมเราจะได้ดังนี้ 6. เลือกเครื่องมือที่ชื่อว่า Sound ในหมวดหมู่เครื่องมือ Media จะปรากฏเครื่องมือให้เห็นดังภาพ 7. คลิกที่เครื่องมือ Sound1 จากนั้นปรับค่า Properties Source เลือกไฟล์ที่ต้องการ ที่ได้อัพโหลด ไว้แล้ว ชื่อว่า cat.wav จากนั้นคลิกที่ OK
- 35. 8. เปิดโปรแกรม Block Editor ขึ้นมา เพื่อเขียนโค๊ดคําสั่งของโปรแกรม 9. ทดสอบการทํางานของโปรแกรม ผลลัพธ์ที่เกิดขึ้นคือทุกครั้งที่มีการกดปุ่ม ซึ่งใช้ภาพแมวแทน ปุ่มกด ก็จะเกิดมีเสียงร้องของแมวเกิดขึ้น
- 36. การสร้างไฟล์สําหรับติดตั้ง 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 โดยอาจจะต้องใช้ระยะสักครู่ ทั้งนี้ขึ้นอยู่กับขนาดของไฟล์โปรแกรม
- 37. หลังจากที่โปรแกรม app inventor สร้างไฟล์ APK เรียบร้อยแล้ว จะปรากฏหน้าต่างแสดงภาพบาร์โค๊ด ขึ้นมา จากนั้นให้เราเปิดโปรแกรม Barcode Scanner แล้วทําการอ่านรหัสจากภาพบาร์โค๊ดนั้น เมื่อทําการอ่านบาร์โค๊ดเสร็จเรียบร้อยแล้ว จะปรากฏหน้าต่างดังภาพ ซึ่งจะเป็นลิงค์ที่ใช้ในการเข้าไป ดาวน์โหลดไฟล์ APK นั้นเอง
- 38. ไฟล์ APK เป็นไฟล์ที่ Widows ไม่ได้รองรับเรื่องของความปลอดภัย เพราะฉะนั้นจะมีข้อความขึ้นมาเพื่อ แจ้งเตือนเกี่ยวกับไฟล์ APK นั้น ให้เราคลิกที่ตกลงเพื่อยอมรับ และทําการดาวน์โหลด ไฟล์ที่ได้จากการดาวน์โหลดนั้นจะถูกจัดเก็บไว้ในโฟลเดอร์ดาวน์โหลดบนอุปกรณ์แอนดรอยด์ แค่ทั้งนี้ ขึ้นอยู่กับอุปกรณ์แอนดรอยด์แต่ละรุ่น
- 39. เราสามารถติดตั้งโปรแกรมได้โดยการคลิกเลือกที่โปรแกรม จากนั้นจะปรากฏหน้าต่างสําหรับติดตั้ง โปรแกรม จากนั้นเลือกที่ติดตั้ง โปรแกรมที่เราพัฒนาขึ้นมาด้วยโปรแกรม AppInventor ถูกติดตั้งลงบนอุปกรณ์แอนดรอยด์ของเราเป็น ที่เรียบร้อย
- 40. 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 บนอุปกรณ์แอนดรอยด์โดยตรงเพื่อให้สามารถ นําไปใช้งานได้เลย โดยไม่จําเป็นต้องมาติดตั้งภายหลัง
- 41. โปรแกรม AppInventor จําเป็นต้องเรียกใช้งาน Block Editor เพื่อให้ทําการเชื่อมต่อกับอุปกรณ์แอน ดรอยด์ก่อนที่จะดาวน์โหลดและติดตั้งโปรแกรม อุปกรณ์แอนดรอยด์ไม่ถูกเชื่อมต่อ เปิดโปรแกรม Block Editor ขึ้นมาแล้วทําการเชื่อมต่ออุปกร์แอนดรอยด์ไปยังคอมพิวเตอร์ จากนั้นที่เมนู Connect to Device ให้คลิกเลือกไปยังอุปกรณ์แอนดรอยด์ที่เราเชื่อมต่อเอาไว้ โดยสังเกตที่หมายเลข ประจําตัวของเครื่อง 16 หลัก ที่แสดงขึ้นมา
- 42. รอจนกว่าการเชื่อมต่อคอมพิวเตอร์กับอุปกรณ์แอนดรอยด์จะสําเร็จดังภาพ กลับไปที่หน้าจอการออกแบบแล้วคลิกเลือกที่ Download to Connected Phone โปรแกรมจะทําการสร้างไฟล์ APK จากนั้นจะดาวน์โหลดและติดตั้งไฟล์ APK ลงบนอุปกรณ์แอนดรอยด์ โดยอาจจะต้องใช้ระยะสักครู่ ทั้งนี้ขึ้นอยู่กับขนาดของไฟล์โปรแกรม หลังจากที่ดาวน์โหลดและติดตั้งไฟล์ APK ลงบนอุปกรณ์แอนดรอยด์เรียบร้อยแล้ว จะปรากฏหน้าต่างดัง ภาพ จากนั้นคลิกที่ OK และ Dismiss การทํางานของโปรแกรมเสร็จเรียบร้อยแล้ว
- 43. Screen Arrangement Components เครื่องมือที่ช่วยในการจัดวางตําแหน่ง ซึ่งจะใช้ในการออกแบบหน้าตาโปรแกรม แบ่งได้เป็น 3 รูปแบบ ดังนี้ 1. Horizontal Arrangement การจัดวางเครื่องมือต่างในรูปแบบแนวนอน 2. Table Arrangement การจัดวางเครื่องมือต่างๆในรูปแบบตาราง 3. Vertical Arrangement การจัดวางเครื่องมือต่างๆในรูปแบบแนวตั้ง 1) Horizontal Arrangement การจัดวางรูปแบบของเครื่องมือในแนวนอน เครื่องมือต่างๆที่อยู่ภายใน Horizontal Arrangement จะถูกวางเรียงต่อๆกันในแนวนอน
- 44. วางเครื่องมือ 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 เพื่อปรับขนาดให้เต็มความกว้างของหน้าจอ หรือจะเลือกกําหนดขนาดเอง โดยการกําหนดค่าเป็นจํานวนพิกเซลก็ได้
- 45. Height ปรับขนาดความสูงของเครื่องมือ ค่าปกติจะตั้งอยู่ที่ Automatic แต่สามารถเลือกให้เป็น Fill parent เพื่อปรับขนาดให้เต็มความสูงของหน้าจอ หรือจะเลือกกําหนดขนาดเอง โดยการ กําหนดค่าเป็นจํานวนพิกเซลก็ได้ 2) Table Arrangement การจัดวางรูปแบบของเครื่องมือในลักษณะของตาราง เครื่องมือต่างๆที่อยู่ภายใน Table Arrangement จะถูกวางเรียงในรูปแบบของตารางคือมีทั้ง แนวตั้งและแนวนอน ซึ่งเครื่องมือต่างๆที่วางได้นั้น จะวางตามจํานวนที่กําหนดไว้ใน Properties Column และ Rows วางเครื่องมือ Button ไปไว้ใน Table Arrangement ซึ่งจะเห็นได้ว่าเครื่องมือที่อยู่ใน Table Arrangement นั้นจะถูกจัดวางตําแหน่งในรูปแบบของตาราง
- 46. Properties การปรับแต่งคุณสมบัติต่างๆ ก็สามารถทําได้ Columns กําหนดขนาดจํานวนของคอลัมน์ Rows กําหนดขนาดจํานวนของแถว Visible การตั้งค่าการแสดงผลการทํางานของเครื่องมือ สามารถเลือกได้คือ showing แสดงผล hidden ซ่อนไว้ไม่แสดงผล ซึ่งในการเขียนโปรแกรมนั้นจะใช้คําสั่ง Visible true เพื่อให้แสดง และ Visible False เพื่อไม่ให้แสดงผล Width ปรับขนาดความกว้างของเครื่องมือ ค่าปกติจะตั้งอยู่ที่ Automatic แต่สามารถเลือกให้ เป็น Fill parent เพื่อปรับขนาดให้เต็มความกว้างของหน้าจอ หรือจะเลือกกําหนดขนาดเอง โดยการกําหนดค่าเป็นจํานวนพิกเซลก็ได้ Height ปรับขนาดความสูงของเครื่องมือ ค่าปกติจะตั้งอยู่ที่ Automatic แต่สามารถเลือกให้เป็น Fill parent เพื่อปรับขนาดให้เต็มความสูงของหน้าจอ หรือจะเลือกกําหนดขนาดเอง โดยการ กําหนดค่าเป็นจํานวนพิกเซลก็ได้ 3) Vertical Arrangement การจัดวางรูปแบบของเครื่องมือในแนวตั้ง เครื่องมือต่างๆที่อยู่ภายใน Vertical Arrangement จะถูกวางเรียงต่อๆกันในแนวตั้ง
- 47. วางเครื่องมือ 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 เพื่อไม่ให้แสดงผล
- 48. Width ปรับขนาดความกว้างของเครื่องมือ ค่าปกติจะตั้งอยู่ที่ Automatic แต่สามารถเลือกให้ เป็น Fill parent เพื่อปรับขนาดให้เต็มความกว้างของหน้าจอ หรือจะเลือกกําหนดขนาดเอง โดยการกําหนดค่าเป็นจํานวนพิกเซลก็ได้ Height ปรับขนาดความสูงของเครื่องมือ ค่าปกติจะตั้งอยู่ที่ Automatic แต่สามารถเลือกให้เป็น Fill parent เพื่อปรับขนาดให้เต็มความสูงของหน้าจอ หรือจะเลือกกําหนดขนาดเอง โดยการ กําหนดค่าเป็นจํานวนพิกเซลก็ได้ การติดตั้งแอพพลิเคชั่นบนอุปกรณ์แอนดรอยด์ การติดตั้งแอพพลิเคชั่นบนอุปกรณ์แอนดรอยด์นั้นสามารถทําได้หลายวิธี ซึงโดยปกติก็คือ จะใช้ วิธีการดาวน์โหลดไฟล์ติดตั้งโดยตรงจาก Google Play ซึ่งจะทําให้เราไม่สามารถมองเห็นตัวไฟล์นั้นได้ จริงๆ เพราะระบบจะดาวน์โหลดและติดตั้งให้เองอัตโนมัติ และข้อจํากัดอีกอย่างคือต้องเป็น แอพพลิเคชั่นที่ได้บรรจุไว้ใน Google Play เท่านั้น ไม่สามารถติดตั้งจากที่อื่นได้ เพราะฉะนั้นจึงต้องมี ขั้นตอนและการตั้งค่าเพื่อให้สามารถติดตั้งแอพพลิเคชั่นที่มาจากที่อื่นได้ วิธีการคือจะทําการติดตั้งโดย การใช้ไฟล์นามสกุล apk นั่นเอง ซึ่งการติดตั้งไฟล์ apk บนอุปกรณ์แอนดรอยด์นั้น จะต้องมีการตั้งค่า ของอุปกรณ์แอนดรอยด์เสียก่อน มิเช่นนั้นจะไม่สามารถติดตั้งโปรแกรมได้ ขั้นตอนการตั้งค่ามีดังต่อไปนี้ เริ่มต้นเข้าไปที่เมนู การตั้งค่า (Setting) จากนั้นเลือกไปที่เมนูระบบป้องกัน (Security) ทํา เครื่องหมายถูกที่เมนู แหล่งที่ไม่รู้จัก (Unknown Sources) เพื่ออนุญาตให้ติดตั้งแอพพลิเคชั่นจาก แหล่งที่มาอื่นๆ ที่ไม่ได้มาจาก Play Store
- 49. **** ไฟล์ .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 ของคอมพิวเตอร์ นั่นเอง
- 50. เมื่อเข้าไปยังพื้นจัดเก็บข้อมูลดังกล่าวแล้วให้นําไฟล์นามสกุล .apk ซึ่งเป็นไฟล์สําหรับติดตั้ง แอพพลิเคชั่นนั้น คัดลอกไปเก็บไว้ยังพื้นที่ว่าง ในตําแหน่งใดก็ได้ จากนั้นเปิดโปรแกรมประเภท File manager , apk Installer ซึ่งเป็นโปรแกรมใช้งานที่ถูกติดตั้ง ไว้แล้วบนอุปกรณ์แอนดรอยด์ เพื่อทําการติดตั้งโปรแกรมที่เราได้คัดลอกไปไว้ยังพื้นที่จัดเก็บ ซึ่งถ้าไม่มี โปรแกรมประเภทนี้ก็สามารถดาวน์โหลดได้จาก Google Play ในตัวอย่างเป็นการใช้งานโปรแกรมประเภท File manager เพื่อเข้าไปยังพื้นที่ที่ได้จัดเก็บไฟล์ apk เอาไว้ จากนั้นเข้าไปยังพื้นที่ที่เราได้จัดเก็บไฟล์ติดตั้งเอาไว้
- 51. เราสามารถคลิกเลือกไฟล์ที่ต้องการจะติดตั้งได้เลย ดังตัวอย่างเป็นการติดตั้งไฟล์ที่ชื่อว่า MyTest_2 ซึ่ง มีนามสกุล .apk แสดงหน้าต่างการติดตั้งโปรแกรม ให้เลือกไปที่ติดตั้ง หลังจากการติดตั้งโปรแกรมเรียบร้อยแล้ว ก็สามารถเปิดเพื่อใช้งานได้เลย
- 52. 2. ติดตั้งผ่าน ADB (Android Debug Bridge) เป็นรูปแบบการสื่อสารระหว่างคอมพิวเตอร์กับ อุปกรณ์แอนดรอยด์รูปแบบหนึ่ง ที่จําเป็นมากในการพัฒนาแอพพลิเคชั่นบนแอนดรอยด์ เพราะมีความ สะดวกและรวดเร็วอีกทั้งยังสามารถจําลองการทํางานของแอพพลิเคชั่นที่กําลังพัฒนาอยู่ได้โดยไม่ จําเป็นต้องติดตั้งโปรแกรมก่อน ผ่านคุณสมบัติการทํางาน ที่เรียกว่า usb debugging ก่อนอื่นเข้าไปที่เมนูการตั้งค่า (Setting) โดยสัญลักษณ์และรูปแบบของการตั้งค่าอาจแตกต่าง กันไปตามระบบปฏิบัติการแอนดรอยด์ที่ใช้อยู่ จากนั้นเลือกเมนู ทางเลือกสําหรับผู้พัฒนา (Developer Options) ที่บริเวณขวามือจะขึ้นมือ จะมี หน้าต่างแสดงทางเลือกสําหรับผู้พัฒนาขึ้น ให้ทําเครื่องหมายถูกที่การแก้ไขจุดบกพร่อง USB (USB debugging)
- 53. จากนั้นที่คอมพิวเตอร์จะปรากฏหน้าต่าง เพื่อแสดงการค้นหาไดรเวอร์สําหรับอุปกรณ์แอนดรอยด์นั้นขึ้น ถ้า คอมพิวเตอร์ที่ใช้ถูกติดตั้งไดรเวอร์ของอุปกรณ์แอนดรอยด์ไปแล้วจะปรากฏหน้าต่างดังภาพ แต่ถ้าไม่ขึ้นหน้าต่างดังภาพ แสดงว่าคอมพิวเตอร์ยังไม่ได้ติดตั้งไดรเวอร์ ให้เราตรวจสอบอุปกรณ์แอน ดรอยด์ว่าได้ติดตั้งไดรเวอร์ ADB เรียบร้อยหรือไม่ โดยการคลิกขวาที่ My Computer จากนั้นเลือก Properties
- 54. คลิกเลือกที่ Device Manager จะแสดงรายชื่อของอุปกรณ์ฮาร์ดแวร์ต่างๆ ที่ถูกติดตั้งอยู่บนคอมพิวเตอร์ รวมถึงอุปกรณ์แอนดรอยด์ที่ เราได้ทําการเชื่อมต่อไว้ด้วย ให้สังเกตที่อุปกรณ์แอนดรอยด์ว่ามีเครื่องหมายคําถาม หรือเครื่องหมาย ตกใจเกิดขึ้นหรือไม่ ถ้าใช่แสดงว่า อุปกรณ์แอนดรอยด์ที่เราใช้งานอยู่นั้น ไม่สามารถเชื่อมต่อกับ คอมพิวเตอร์ได้ ถ้าเป็นเช่นนั้นให้เราติดตั้งไดรเวอร์ของอุปกรณ์แอนดรอยด์ตัวนั้นลงไป ตามรุ่นและ ยี่ห้อของอุปกรณ์แอนดรอยด์นั้นๆ ซึ่งเราสามารถใช้แผ่นไดรเวอร์ที่แถมมาให้ตอนซื้อ หรือ จะดาวน์ โหลดจากเว็บไซด์ของผู้ผลิตก็ได้ http://developer.android.com/tools/extras/oem-usb.html
- 55. การติดตั้งไดรเวอร์นั้นทําได้เช่นเดียวกันกับการติดตั้งโปรแกรมทั่วไป โดยก่อนทําการติดตั้งไดรเวอร์นั้น ให้ถอดสายสัญญาณที่เชื่อมต่อกับคอมพิวเตอร์ออกก่อน หลังจากติดตั้งไดรเวอร์เสร็จเรียบร้อยแล้วจะ แสดงดังภาพ 3) ติดตั้งผ่าน Wi-Fi หลายๆคนมีปัญหาเรื่องของการติดตั้งไดรเวอร์ ของ อุปกรณ์แอนดรอยด์เข้า กับคอมพิวเตอร์เพื่อใช้งาน ADB (Android Debug Bridge) ปัจจุบัน AppInventor มีการพัฒนาให้ สามารถเชื่อมต่ออุปกรณ์แอนดรอยด์เข้ากับคอมพิวเตอร์ที่ใช้เขียนโปรแกรม AppInventor ได้โดยจะมี การทํางานผ่านทางสัญญาณ WiFi นั่นหมายถึงว่าอุปกรณ์แอนดรอยด์และคอมพิวเตอร์ก็ต้องรองรับการ ทํางานของ WiFi ด้วยเช่นกัน ขั้นตอนเริ่มต้นโดยการดาวน์โหลดแอพพลิเคชั่นมา 1 ตัวชื่อว่า MIT AICompani ซึ่งสามารถทํา การดาวน์โหลดได้จาก Google Play หรือจะดาวน์โหลดโดยตรงจากเว็บของ AppInventor.mit.edu ก็ได้ หลังจากดาวน์โหลดและติดตั้งโปรแกรมเรียบร้อยแล้ว ให้เปิดแอพพลิเคชั่นขึ้นมาเพื่อที่จะทําการเชื่อมต่อ อุปกรณ์แอนดรอยด์ของเราเข้ากับคอมพิวเตอร์ของเราผ่านสัญญาณ WiFi
- 56. จากนั้นเปิดโปรแกรม Block Editor ขึ้นมา ที่ตัวเลือก Connect to Device ให้คลิกเลือกที่ WiFi เพื่อทํา การเชื่อมต่อผ่านสัญญาณ WiFi การใช้งานเพียงแค่ผู้ใช้ กรอกรหัสที่ได้จาก Block Editor ซึ่งจะมีการ แสดงรหัสที่จะใช้ในการจับคู่ รหัสที่ใช้ในการจับคู่กับอุปกรณ์แอนดรอยด์กับคอมพิวเตอร์ ผ่านสัญญาณ WiFi
- 57. ใส่รหัสลงไปในช่องว่างของโปรแกรม MIT AICompani ที่เราได้เปิดเอาไว้แล้ว ให้ถูกต้องตรงกันกับ ตัวเลขที่แสดงใน Block Editor จากนั้นคลิกที่ Connect to App Inventor หรือจะใช้วิธีการแสกนโดยผ่านโปรแกรม QR Code แทนการกรอกรหัสก็ได้ เพราะผลลัพธ์ที่ได้จะ เหมือนกัน ขั้นตอนการติดตั้งโปรแกรมผ่าน Wi-Fi นั้นสามารถทําได้เช่นเดียวกันกับการติดตั้งโปรแกรม ผ่าน ADB (Android Debug Bridge) คือ หลังจากที่เราได้เชื่อมต่อ Wi-Fi เป็นที่เรียบร้อยแล้ว ที่มุมมอง การออกแบบ ให้คลิกเลือกที่ Download to Connect Phone จากนั้นรอสักครู่ จนกว่าจะมีข้อความแจ้งเตือน ว่าการติดตั้งแอพพลิเคชั่นเสร็จเรียบร้อยแล้ว
- 58. สําหรับระบบปฏิบัติการแอนดรอยด์เวอร์ชั่น 4.1.2 จะมีการแจ้งเตือนการติดตั้งแอพพลิเคชั่นขึ้นมา ให้ เราคลิกที่ติดตั้ง เพื่อทําการติดตั้งโปรแกรมลงบนอุปกรณ์แอนดรอยด์ของเรา ถือว่าเสร็จสิ้น กระบวนการพัฒนาโปรแกรม ข้อดีของการเชื่อมต่อผ่านไวไฟก็คือไม่จําเป็นต้องติดตั้งไดรเวอร์ของอุปกรณ์แอนดรอยด์ลงบน คอมพิวเตอร์ และทํางานแบบไร้สายจึงสะดวกในการใช้งาน แต่ข้อเสียคือการเชื่อมต่อผ่านไวไฟนั้น โปรแกรมที่มีขนาดใหญ่ อาจจะทําให้การเชื่อมต่อมีปัญหา ไวไฟอาจจะหลุดได้ง่าย และต้องทําการ เชื่อมต่ออยู่บ่อยๆ
- 59. AppInventor กับการสื่อสารแบบไร้สาย Bluetooth AppInventor มีชุดคําสั่งพิเศษที่สามารถใช้งาน Bluetooth ในการติดต่อสื่อสารกับอุปกรณ์บลูทูธ อื่นๆได้ โดยในตัวอย่างจะขอแบ่งออกเป็น 2 เรื่องด้วยกัน ดังนี้ 1. เขียนโปรแกรมติดต่อกับคอมพิวเตอร์ 2. เขียนโปรแกรมเพื่อควบคุมการทํางานของหุ่นยนต์ 1) เริ่มต้นเขียนโปรแกรมติดต่อกับคอมพิวเตอร์ คอมพิวเตอร์ที่ใช้ในการทดสอบนี้เป็นคอมพิวเตอร์โน้ตบุ๊ก ที่มีโมดูลสื่อสารไร้สายบลูทูธติดตั้งไว้ แล้วภายในตัวเครื่อง และอุปกรณ์แอนดรอยด์นั้นโดยปกติก็จะมีโมดูลสื่อสารไร้สายบลูทูธ ถูกติดตั้งอยู่ใน ภายในตัวเครื่องเช่นกัน เพราะฉะนั้นเราสามารถนํามาใช้งานได้เลยโดยไม่จําเป็นต้องติดตั้งเพิ่มเติม แต่ การที่จะติดต่อสื่อสารกันได้นั้นจําเป็นจะต้องมีขั้นตอน เรียกว่าการจับคู่อุปกรณ์ ซึ่งจะทําให้อุปกรณ์ทั้ง สองรู้จักกันนั้นเอง มีขั้นตอนการดังนี้คือ เริ่มต้นให้เปิดการทํางานของบลูทูธที่อุปกรณ์ทั้งสองก่อน โดยที่อุปกรณ์แอนดรอยด์ทําได้ง่ายๆ เข้าไปที่ การตั้งค่า (Setting) ที่เมนูการเชื่อมต่อไร้สายและเครือข่าย (Wireless and network) ที่หัวข้อบลูทูธให้ กดเลือกเพื่อเปิดการทํางานของบลูทูธ หลังจากเปิดการทํางานของอุปกรณ์แอนดรอยด์เรียบร้อยแล้ว จากนั้นเข้าไปเปิดการทํางานบลูทูธของ คอมพิวเตอร์ โดยให้สังเกตที่บริเวณทากบาร์ของคอมพิวเตอร์จะมีสัญลักษณ์รูปบลูทูธเกิดขึ้น
- 60. จากนั้นให้คลิกขวาที่รูปสัญลักษณ์บลูทูธ แล้วคลิกเลือกที่ไป Open Settings จะปรากฏหน้าต่างดังภาพ ให้คลิกทําเครื่องหมายถูกที่ Allow Bluetooth devices to find this computer เพื่อกําหนดให้อุปกรณ์บลูทูธอื่นๆ สามารถมองเห็นคอมพิวเตอร์เครื่องนี้ได้ หลังจากนั้นคลิกไปที่แถบ COM Ports เพื่อตรวจสอบช่องทางการสื่อสารของบลูทูธ ที่จะใช้ในการสื่อสาร กับอุปกรณ์อื่นๆ
- 62. ที่อุปกรณ์แอนดรอยด์บริเวณด้านบนขวามือจะมีรูปสัญลักษณ์ของการค้นหาอุปกรณ์บลูทูธอยู่ ให้เราคลิก เลือกและสังเกตที่บริเวณด้านล่าง จะแสดงรายชื่อของบลูทูธที่สามารถค้นหาได้ คลิกเลือกไปที่อุปกรณ์บลูทูธที่ต้องการเชื่อมต่อ จากนั้นรอสักครู่จะขึ้นข้อความแสดงบนคอมพิวเตอร์ จะมีหน้าต่างแสดงข้อความการขออนุญาตในการจับคู่ สังเกตจากข้อความตัวเลขที่แสดงทางด้านของ คอมพิวเตอร์ และอุปกรณ์แอนดรอยด์จะมีตัวเลขเหมือนกัน
- 63. ที่อุปกรณ์แอนดรอยด์ให้คลิกที่ตกลง เพื่อยอมรับการจับคู่กับคอมพิวเตอร์ คลิก Next ที่คอมพิวเตอร์เพื่อทําขั้นตอนถัดไป
- 64. ถ้าหากการจับคู่บลูทูธไม่มีปัญหาเกิดขึ้น ก็จะแสดงข้อความดังภาพ เป็นอันเสร็จสิ้นขั้นตอนการจับคู่ สังเกตที่อุปกรณ์จะขึ้นข้อความว่าจับคู่แล้ว แสดงว่าการจับคู่บลูทูธของอุปกรณ์ทั้งสองเป็นอันเสร็จสิ้น ในเมนูเครื่องมือหัวข้อ Device and Printers จะแสดงให้เห็นอุปกรณ์บลูทูธที่ได้ทําการจับคู่ไว้แล้ เขียนโปรแกรมแอนดรอยด์เพื่อติดต่อกับคอมพิวเตอร์ เริ่มต้นเราจะพัฒนาโปรแกรมโดยใช้ AppInventor ขึ้นมาหนึ่งตัวเพื่อนําไปใช้งานกับอุปกรณ์ แอนดรอยด์ของเรา จากนั้นจะทําการทดสอบการทํางานของคําสั่งบลูทูธ ที่ถูกเขียนด้วย AppInventor และส่งข้อมูลผ่านไปยังคอมพิวเตอร์โดยการสื่อสารผ่านบลูทูธ โดยในคอมพิวเตอร์นั้นจะถูกติดตั้ง โปรแกรม สําหรับรับส่งข้อมูลแบบอนุกรม โดยโปรแกรมมีชื่อว่า Parallax-Serial-Terminal ซึ่งจะทํา หน้าที่แสดงผลข้อมูลที่ถูกส่งมายังคอมพิวเตอร์ สามารถดาวน์โหลดโปรแกรมใช้งานฟรีได้ที่ http://www.parallax.com/Portals/0/Downloads/sw/propeller/Parallax-Serial-Terminal.zip
- 65. ขั้นตอนการเขียนโปรแกรมสําหรับอุปกรณ์แอนดรอยด์มีดังนี้ 1. เข้าไปที่ appinventor.mit.edu จากนั้นเริ่มต้นเข้าสู่ระบบ และสร้างโปรเจ็คใหม่ คลิกที่ New จากนั้นทําการตั้งชื่อตามต้องการ 2. ทําการออกแบบหน้าตาโปรแกรม พร้อมทั้งนําเครื่องมือที่จําเป็นใส่เข้าไปในโปรแกรม โดยจะ ประกอบไปด้วย ปุ่มกด 2 ปุ่ม ที่ถูกสร้างด้วยเครื่องมือ Button และ Lispicker โดยจะใช้ Lispicker เป็นปุ่มสําหรับกดเพื่อเชื่อมต่ออุปกรณ์บลูทูธ และปุ่ม Button จะเป็นปุ่มที่เอาไว้ยกเลิกการเชื่อมต่อ และ เครื่องมือที่สําคัญอีกอย่างหนึ่งคือ BluetoothClient จากนั้นปรับแต่งหน้าตาโปรแกรมให้สวยงามตาม ต้องการดังตัวอย่าง
- 66. 3. หลังจากได้ตัวเชื่อมต่อเรียบร้อยแล้ว จากนั้นทําการเพิ่มปุ่มกดเพื่อที่จะใช้ในการส่งข้อมูลไปยัง คอมพิวเตอร์ 4. ทําการแก้ไขปรับแต่งเครื่องมือต่างตามต้องการเช่น Properties Text , Font Size ในตัวอย่าง ปรับค่าเพื่อให้ตัวอักษรมีขนาดใหญ่ขึ้น มองเห็นได้ชัดเจนขึ้น ทั้งนี้ผู้ใช้สามารถปรับแต่งเพิ่มเติมในส่วน Properties อื่นๆได้ตามต้องการ 5. หน้าตาโปรแกรม ที่ออกแบบเสร็จเรียบร้อยประกอบด้วยปุ่มต่างๆ คือ 1 ปุ่มสําหรับทําหน้าที่ใน การเชื่อมต่อบลูทูธกับอุปกรณ์ภายนอก 2 ปุ่มสําหรับทําหน้าที่ยกเลิกการเชื่อมต่อ ปุ่มที่ 3-6 เป็นปุ่ม สําหรับส่งข้อมูลโดยข้อมูลที่ถูกส่งออกไปจะมีค่าเป็น A-D
- 67. 6. เปิด Blocks Editor ขึ้นมาเพื่อทําการเขียนโค๊ดคําสั่งการทํางานให้กับโปรแกรมดังภาพ 7. เมื่อเสร็จสิ้นการเขียนคําสั่งเรียบร้อยแล้วให้ทําการติดตั้งโปรแกรมที่พัฒนาขึ้นมานี้ไปยังอุปกรณ์ แอนดรอยด์ที่เราต้องการทดสอบ และทางฝั่งของคอมพิวเตอร์ ให้เปิดโปรแกรม Parallax Serial Terminal เพื่อจะใช้ในการแสดงผลข้อมูลที่จะถูกส่งมาจากอุปกรณ์แอนดรอยด์ด้วยโปรแกรมที่พัฒนา เสร็จเรียบร้อยแล้วในข้างต้น
- 68. 8. หน้าตาของโปรแกรม Parallax Serial Terminal โดยจําเป็นจะต้องมีการตั้งค่านิดหน่อยคือ ตั้ง ค่า Port จะที่ใช้ในการติดต่อสื่อสารกับอุปกรณ์แอนดรอยด์โดยสามารถดูได้จากการตั้งค่าบลูทูธของ คอมพิวเตอร์ดังที่กล่าวมาแล้วในข้างต้น และที่ตําแหน่งด้านล่างขวามือให้ทําการคลิกที่ปุ่ม Enable เพื่อ เปิดใช้งาน Com Port จากนั้นเปิดโปรแกรมที่ได้พัฒนาเสร็จเรียบร้อยแล้วขึ้นมา จะแสดงหน้าตาดังรูป กดที่ปุ่มเชื่อมต่อเพื่อทํา การเชื่อมต่อกับคอมพิวเตอร์ แล้วทําการทดสอบการทํางานด้วยการกดปุ่มต่างๆ บนมือถือแอนดรอยด์ โดยแต่ละปุ่มจะให้ค่าเป็น ABCD และส่งข้อความเหล่านี้ไปยังคอมพิวเตอร์ ที่หน้าต่างโปรแกรม Parallax Serial Terminal ที่ติดตั้งอยู่บนคอมพิวเตอร์จะปรากฏข้อมูลที่ได้รับจาก อุปกรณ์แอนดรอยด์แสดงให้เห็น
- 69. โปรแกรมแอนดรอยด์ควบคุมการทํางานของหุ่นยนต์ แบบไร้สายบลูทูธ โปรแกรมควบคุมการทํางานของหุ่นยนต์แบบไร้สายผ่านบลูทูธนี้ เป็นอีกกิจกรรมหนึ่งที่น่าสนใจ เพราะนอกจากจะได้พัฒนาแอพพลิเคชั่นบนอุปกรณ์แอนดรอยด์เพื่อควบคุมหุ่นยนต์แล้วนั้น เรายัง สามารถศึกษาหลักการเขียนโปรแกรมสําหรับหุ่นยนต์ได้อีกด้วย ซึ่งจริงๆแล้วเราควรจะมีพื้นฐานด้าน การเขียนโปแกรมของทั้งสองด้านด้วย ทั้งบนอุปกรณ์แอนดรอยด์เองและตัวหุ่นยนต์ด้วย โดยอุปกรณ์ที่ จะนํามาใช้นี้สามารถใช้ได้ทั้งสมาร์ตโฟนและแท็บเล็ต ซึ่งมีบูลทูธติดตั้งอยู่ภายในตัวเครื่องด้วย ส่วน ทางด้านหุ่นยนต์ที่จะใช้ในการทดสอบนั้นเราจะใช้หุ่นยนต์ที่ชื่อว่า RoboCircle3S เป็นหุ่นยนต์ที่พัฒนา โปรแกรมด้วยภาษาโลโก้ ซึ่งพัฒนาและจัดจําหน่ายโดยบริษัทอินโนเวตีฟเอ็กเพอริเมนต์ จํากัด ตัว หุ่นยนต์มีช่องสําหรับเสียบกับโมดูลบลูทูธ ซึ่งทําให้ง่ายต่อการนําไปใช้งานมาก ส่วนขั้นตอนการพัฒนา โปรแกรม และการใช้งาน RoboCircle3s สามารถศึกษารายละเอียดเพิ่มเติมได้โดยดูจากคู่มือการใช้ งานหุ่นยนต์ RoboCircle3s หรือสอบถามข้อมูลได้จากบริษัทผู้ผลิต ซึ่งจะไม่ขออธิบายไว้ในคู่มือเล่มนี้ หุ่นยนต์ RoboCircle 3S
- 70. ในขั้นตอนการออกแบบโปรแกรมนั้นจะใช้ชุดคําสั่งมาตรฐานในการเชื่อมต่อบลูทูธของโปรแกรม AppInventor ในการติดต่อกับชุดคําสั่งของหุ่นยนต์ RoboCircle3s เพื่อให้สามารถทํางานรับและส่ง ข้อมูลร่วมกันได้จึงจําเป็นต้องกําหนดค่าในการรับส่งข้อมูลให้ตรงกันดังนี้คือ หุ่นยนต์ RoboCircle 3s ที่ทําการติดตั้งโมดูลบลูทูธ (Blue Stick) ก่อนที่จะเริ่มต้นเขียนโปรแกรม ให้ทําการจับคู่อุปกรณ์บลูทูธระหว่างอุปกรณ์แอนดรอยด์กับ หุ่นยนต์ RoboCircle กันก่อน การจับคู่อุปกรณ์แอนดรอยด์กับหุ่นยนต์ มีขั้นตอนดังนี้คือ 1. เปิดการทํางานของบลูทูธในอุปกรณ์แอนดรอยด์ และ เปิดการทํางานของหุ่นยนต์โดยสังเกต ไฟแสดงสถานะที่โมดูล blue stickที่ติดตั้งกับตัวหุ่นยนต์ จะต้องติดกระพริบ ถ้าไม่ติดแสดงว่าโมดูล อาจจะเสียหรือหุ่นยนต์มีปัญหา ให้แก้ไขตรวจสอบให้เรียบร้อย
- 71. 2. เข้าไปที่การตั้งค่าของระบบปฏิบัติการแอนดรอยด์ จากนั้นไปที่บลูทูธ กดปุ่มค้นหา อุปกรณ์บลูทูธ ที่อยู่ใกล้เคียง จะปรากฏรายชื่อของโมดูล blue Stick ทั้งนี้ชื่อและรหัสผ่านที่ใช้ในการ จับคู่ของอุปกรณ์นั้นจะขึ้นอยู่กับบริษัทผู้ผลิต ซึ่งสามารถดูได้จากเอกสารการใช้งานของอุปกรณ์นั้นๆ 3. จะปรากฏรายชื่อของอุปกรณ์บลูทูธใกล้เคียง จากนั้นให้คลิกไปยังรายชื่อของบลูทูธที่ ต้องการ ในตัวอย่างนี้จะปรากฏรายชื่ออุปกรณ์บลูทูธที่ได้ทําการติดตั้งอยู่กับตัวหุ่นยนต์มีชื่อว่า RoboCircle
- 72. 4. จะปรากฏหน้าต่างสําหรับให้ใส่รหัสผ่าน ในที่นี้รหัสผ่านคือ 1234 จากนั้นตอบตกลง แต่ทั้งนี้ให้ดูจากเอกสารคู่มือของผู้ผลิตที่มาพร้อมกับตัวโมดูลเป็นหลัก 5. เมื่อรหัสผ่านถูกต้อง เราก็สามารถจับคู่กับหุ่นยนต์ได้เรียบร้อยแล้ว หลังจากที่จับคู่อุปกรณ์บลูทูธของอุปกรณ์แอนดรอยด์กับตัวหุ่นยนต์เป็นที่เรียบร้อยแล้ว ขั้นตอนต่อไปจะ เป็นการออกแบบโปรแกรม AppInventor เพื่อควบคุมการทํางานของหุ่นยนต์ได้ดังนี้ • เมื่อมีการกดปุ่ม Connect อุปกรณ์แอนดรอยด์จะทําการเชื่อมต่อกับหุ่นยนต์ ไฟสถานะที่ โมดูลบลูทูธของหุ่นยนต์จะแสดงสถานะไฟติดค้างเพื่อบอกว่าสามารถเชื่อมต่อกันได้แล้ว • เมื่อมีการกดปุ่ม Disconnect อุปกรณ์แอนดรอยด์ที่ได้เชื่อมต่ออยู่นั้น จะถูกยกเลิกการเชื่อมต่อ กับหุ่นยนต์ทันที
- 73. • เมื่อมีการกดปุ่มเดินหน้า อุปกรณ์แอนดรอยด์จะส่งข้อมูล หนึ่งไบต์ ค่า 8 ออกไป ฝั่งหุ่นยนต์ก็จะ เขียนโปรแกรมเพื่อรับค่า 8 ด้วยเช่นกัน เพื่อให้หุ่นยนต์เคลื่อนที่ไปข้างหน้า • เมื่อมีการกดปุ่มเดินถอยหลัง อุปกรณ์แอนดรอยด์จะส่งข้อมูล หนึ่งไบต์ ค่า 2 ออกไป ฝั่ง หุ่นยนต์ก็จะเขียนโปรแกรมเพื่อรับค่า 2 ด้วยเช่นกัน เพื่อให้หุ่นยนต์เคลื่อนที่ถอยหลัง • เมื่อมีการกดปุ่มเดินเลี้ยวขวา อุปกรณ์แอนดรอยด์จะส่งข้อมูล หนึ่งไบต์ ค่า 6 ออกไป ฝั่ง หุ่นยนต์ก็จะเขียนโปรแกรมเพื่อรับค่า 6 ด้วยเช่นกันเพื่อให้หุ่นยนต์เดินเลี้ยวขวา • เมื่อมีการกดปุ่มดินเลี้ยวซ้าย อุปกรณ์แอนดรอยด์จะส่งข้อมูล หนึ่งไบต์ ค่า 4 ออกไป ฝั่งหุ่นยนต์ ก็จะเขียนโปรแกรมเพื่อรับค่า 4 ด้วยเช่นกัน เพื่อให้หุ่นยนต์เดินเลี้ยวซ้าย • ถ้าไม่มีการสัมผัสหรือกดที่ปุ่มใดๆ โปรแกรมจะส่งข้อมูลหนึ่งไบต์มีค่าเป็น 5 ไปยังหุ่นยนต์ เมื่อ ตรวจสอบเงื่อนไข เสร็จหุ่นยนต์ก็จะหยุดการทํางานทันที ตามเงื่อนไขที่ได้ออกแบบไว้ เริ่มต้นพัฒนาโปรแกรมเพื่อควบคุมหุ่นยนต์ด้วย AppInventor เข้าสู่โปรแกรม AppInventor โดยการเข้าไปที่เว็บไซด์ appinventor.mit.edu จากนั้นก็ทําการลง ชื่อเข้าใช้งาน จะปรากฏหน้าต่างของโปรแกรม AppInventor ขึ้นมาจากนั้นคลิกที่ New เพื่อสร้างโปรเจ็ค ขึ้นมาใหม่ ดังภาพ ในที่นี้ตั้งชื่อโปรแกรมว่า RoboCircle นําเครื่องมือ Horizontal Arrangement ไปวางที่หน้าจอ
- 74. จากนั้น นําเครื่องมือที่จําเป็นใส่เข้าไปในโปรแกรม โดยจะใช้ ปุ่มกด 2 ปุ่ม ที่ถูกสร้างด้วยเครื่องมือ Button และ List Picker โดยจะใช้ List Picker เป็นปุ่มสําหรับกดเพื่อเชื่อมต่ออุปกรณ์บลูทูธ และปุ่ม Button จะเป็นปุ่มที่เอาไว้ยกเลิกการเชื่อมต่อ และเครื่องมือที่สําคัญอีกอย่างหนึ่งคือ Bluetooth Client จากนั้นปรับแต่งหน้าตาโปรแกรมให้สวยงามด้วยการอัพโหลดรูปภาพและนํามาแทนที่หน้าตาของปุ่มกด เดิม ตามตัวอย่าง เครื่องมือที่สําคัญที่สุดในโปรแกรมนี้คือ Bluetooth Client จะทําหน้าที่ติดต่อสื่อสารบลูทูธ พร้อม ชุดคําสั่งที่ใช้สําหรับการเชื่อมต่อบลูทูธ
- 75. ต่อไปจะสร้างปุ่มสําหรับใช้ในการส่งข้อมูลออกไป ซึ่งในตัวอย่างจะใช้ Table Arrangement เป็น เครื่องมือสําหรับจัดรูปแบบการวางของปุ่มกดต่างๆ ทําการตั้งค่า Properties ของ Table Arrangement ให้เป็น Columns : 3 , Row : 3 เพื่อใช้สําหรับ จัดรูปแบบของการวางปุ่มกดต่างๆ ให้สวยงาม
- 76. นําเครื่องมือ Canvas ไปไว้ในตารางตามภาพ เพื่อใช้เป็นปุ่มแทนการใช้งาน Button ทําการอัพโหลดรูปภาพด้วยปุ่มกดแบบต่างๆ
- 77. ซึ่งประกอบด้วย ปุ่มกดลงล่าง ปุ่มกดขึ้นบน ปุ่มกดด้านซ้าย ปุ่มกดด้านขวา จากนั้นปรับค่า Properties Background Image ของ Canvas แต่ละตัว ให้แทนที่ด้วยภาพปุ่มกดแบบ ต่างๆที่ได้อัพโหลดไว้แล้ว
- 79. ทําการเปลี่ยนชื่อให้กับเครื่องมือทั้งหมด หลักจากที่ได้ออกแบบหน้าตาโปรแกรมเป็นที่เรียบร้อยแล้ว ขั้นตอนต่อไปคือการเขียนคําสั่งโปรแกรม เพื่อให้สามารถติดต่อสื่อสารกับหุ่นยนต์ได้คลิกที่ Open the Blocks Editor เพื่อเรียกใช้งาน Blocks Editor ในการเขียนโปรแกรมคําสั่ง คลิกที่ Keep สําหรับผู้ใช้งานเว็บบราวเซอร์เป็น Google chrome คลิกที่ Save สําหรับผู้ใช้งาน Internet Explorer
- 80. คลิกที่ ตกลง เพื่อยอมรับการดาวน์โหลดและเปิดโปรแกรมด้วย Java Web Start Launcher หลังจากทําการดาวน์โหลดและจัดเก็บไฟล์เสร็จเรียบร้อยแล้วจะได้ไฟล์ที่ชื่อว่า AppInventorForAndroid ให้คลิกไปที่ตัวไฟล์ได้เลย วินโดวส์จะเรียกเปิดหน้าต่างโปแกรม Block Editor ขึ้นมา หน้าต่าง Block Editor สําหรับเขียนโปรแกรมคําสั่ง เริ่มต้นเขียนโปรแกรม คลิกที่แท็บ My Blocks เพื่อเลือกเครื่องมือที่เราได้ออกแบบไว้ จากนั้นเลือกไปที่ เครื่องมือที่ชื่อว่า Connect เป็นเครื่องมือชนิด Lispicker ทําหน้าที่แสดงรายชื่อของอุปกรณ์บลูทูธต่างๆที่ เคยได้จับคู่ไว้แล้ว โดยเลือกที่ชุดคําสั่ง Connect.BeforePicking
- 81. เลือกคําสั่ง Connect. Elements ลากเครื่องมือ Elements ไปวางไว้ในบล็อกคําสั่ง Connect.BeforePicking ดังภาพ จากนั้นเรียกใช้คําสั่งของ Bluetooth โดยชุดคําสั่งนี้จะเป็นการแสดงรายชื่อของอุปกรณ์บลูทูธทั้งหมดที่ เคยจับคู่ไว้แล้ว
- 82. ชุดคําสั่งชุดนี้ทําหน้าที่เพื่อแสดงรายชื่อของอุปกรณ์บลูทูธอื่นๆ ที่เคยทําการจับคู่เอาไว้แล้ว รวมถึง หุ่นยนต์ที่เราจะควบคุมด้วย ซึ่งถ้าหุ่นยนต์ที่จะใช้ ยังไม่ได้จับคู่อุปกรณ์บลูทูธให้ทําการจับคู่เสียก่อน ชุดคําสั่ง Connect.AfterPicking ทําหน้าที่ในการให้อุปกรณ์แอนดรอยด์ของเราทําการเชื่อมต่อบลูทูธ กับอุปกรณ์ที่เลือกซึ่งในที่นี้ก็คือหุ่นยนต์ของเรานั้นเอง disconnect. Click ทําหน้าที่ยกเลิกการเชื่อมต่อหลังจากที่ปุ่มนี้ถูกกด ชุดคําสั่งทั้งหมดที่ใช้ในการเชื่อมต่อและยกเลิกการเชื่อมต่อบลูทูธ
- 83. ชุดคําสั่งต่อไป คือการส่งข้อมูลไปยังหุ่นยนต์ให้หุ่นยนต์เคลื่อนที่ได้ตามที่เราต้องการ ซึ่งในโปรแกรม AppInventor นั้น เราจะอาศัยชุดคําสั่งของเครื่องมือที่ชื่อว่า Canvas ในการตรวจสอบเหตุการณ์ที่จะ เกิดขึ้น 2 เหตุการณ์ด้วยกันคือ 1) เมื่อไรที่ตําแหน่งพื้นที่ของ Canvas ถูกแตะสัมผัสค้างไว้เรียกว่า Touch Down 2) เมื่อไรที่เลิกสัมผัสพื้นที่ของ Canvas แล้ว เรียกว่า Touch Up หรือจะพูดง่ายๆคือ การกดและปล่อยนั่นเอง ชุดคําสั่งแรกเป็นการสั่งให้หุ่นยนต์เดินไปข้างหน้า โดยการเขียนโปรแกรมคําสั่งดังภาพ ในชุดคําสั่งของ forward. Touchdown นั้น จะกระทําก็ต่อเมื่อเงื่อนไขเป็นจริง คือเมื่อใดมีการ แตะหรือสัมผัสไปที่ปุ่มนี้ ชุดคําสั่งนี้ก็จะทํางาน โดยจะไปเรียกใช้คําสั่ง Bluetooth.Send1ByteNumber ซึ่งเป็นคําสั่งส่งข้อมูลจํานวน 1 Byte ผ่านสัญญาณบลูทูธ โดยมีค่าเป็นเลข 8 ไปยังตัวหุ่นยนต์ ซึ่งตัว หุ่นยนต์นั้นจะรอรับข้อมูลที่จะถูกส่งเข้ามา หุ่นยนต์ก็จะทําการอ่านค่าข้อมูลที่ได้รับว่ามีค่าเป็นอะไร จากนั้นจะนําไปตรวจสอบตามเงื่อนไขที่เราได้เขียนไว้ให้กับตัวหุ่นยนต์ เมื่อตรวจสอบเงื่อนไขเป็นจริง หุ่นยนต์นั้นก็จะทํางานตามเงื่อนไขที่เราได้เขียนเอาไว้ ก็จะทําให้หุ่นยนต์เดินเคลื่อนที่ไปข้างหน้าได้ นั่นเอง
- 84. ในชุดคําสั่งของ forward. Touchup นั้น จะกระทําหลังจากที่เงื่อนไข forward. Touchdown หยุด ทํางาน นั่นหมายถึง เมื่อไม่มีการสัมผัสหรือแตะที่ปุ่มนี้แล้ว คําสั่ง Bluetooth.Send1ByteNumber จะ ทํางานและส่งข้อมูล 1 Byte คือเลข 5 ออกไปยังตัวหุ่นยนต์ ก็จะทําให้หุ่นยนต์เคลื่อนที่ตามเงื่อนไขที่ได้ เขียนไว้นั่นเอง คําสั่งให้หุ่นยนต์เดินไปข้างหน้าและคําสั่งให้หุ่นยนต์หยุดทํางาน
- 85. มาดูโปรแกรมทางด้านของหุ่นยนต์กันบ้าง เริ่มต้นให้ทําการเชื่อมต่อสายสัญญาณ ucon200 กับตัวหุ่นยนต์ RoboCircle3s เสียก่อน จากนั้นเปิด โปรแกรม i-BOX III Logo Blocks 1.20 ขึ้นมา และทําการตั้งค่าการเชื่อมต่อ Serial Port ก่อน หลังจากที่ตั้งค่าใช้งานเรียบร้อยแล้ว ขั้นตอนต่อไปคือการเขียนคําสั่งให้กับหุ่นยนต์ ซึ่งในภาพนั้นเป็น คําสั่งให้หุ่นยนต์วนรับข้อมูลที่จะถูกส่งเข้ามาจากอุปกรณ์แอนดรอยด์ หลังจากที่หุ่นยนต์ได้รับข้อมูลที่ถูกส่งมาจากอุปกรณ์แอนดรอยด์ หุ่นยนต์จะทําการเปรียบเทียบเงื่อนไข จากข้อมูลที่ถูกส่งเข้ามาว่าเป็นจริงหรือไม่ ถ้าข้อมูลที่ถูกส่งเข้ามานั้นตรงตามเงื่อนไขที่ได้ตั้งเอาไว้ แสดงว่าเงื่อนไขนั้นเป็นจริง หุ่นยนต์ก็จะทํางาน และจะเคลื่อนที่ตามคําสั่งที่ได้ออกแบบไว้ แต่ถ้าข้อมูล ที่ถูกส่งเข้ามานั้นไม่เป็นจริงตามเงื่อนไขก็จะสั่งให้หุ่นยนต์หยุดทํางาน
- 86. ถ้าข้อมูลที่ถูกส่งเข้ามาเป็น 8 หุ่นยนต์จะเคลื่อนไปข้างหน้า แต่ถ้าไม่ใช่หุ่นยนต์จะหยุดทํางาน ถ้าข้อมูลที่ถูกส่งเข้ามาเป็น 8 หุ่นยนต์จะเคลื่อนไปข้างหน้า ถ้าข้อมูลเป็น 6 จะเลี้ยวขวา แต่ถ้าไม่ใช่ หุ่นยนต์จะหยุดทํางาน ถ้าข้อมูลที่ถูกส่งเข้ามาเป็น 8 หุ่นยนต์จะเคลื่อนไปข้างหน้า ถ้าข้อมูลเป็น 6 จะเลี้ยวขวา ถ้าข้อมูลเป็น 4 จะเลี้ยวซ้าย แต่ถ้าไม่ใช่หุ่นยนต์จะหยุดทํางาน
- 87. ชุดคําสั่งของหุ่นยนต์ RoboCircle3s ถ้าข้อมูลที่ถูกส่งเข้ามาเป็น 8 หุ่นยนต์จะเคลื่อนไปข้างหน้า ถ้าข้อมูลเป็น 6 จะเลี้ยวขวา ถ้าข้อมูลเป็น 4 จะเลี้ยวซ้าย ถ้าข้อมูลเป็น 2 จะถอยหลัง แต่ถ้าไม่ใช่หุ่นยนต์จะหยุดทํางาน ชุดคําสั่งที่เขียนด้วยโปรแกรม app inventor ทําให้หุ่นยนต์เคลื่อนที่ไปข้างหน้า เลี้ยวซ้าย เลี้ยวขวา ถอยหลัง และ หยุด
- 88. ชุดคําสั่งสมบูรณ์ของโปรแกรมควบคุมการทํางานของหุ่นยนต์ RoboCircle ชุดคําสั่งสมบูรณ์ของหุ่นยนต์ RoboCircle 3s ที่พัฒนาด้วยโปรแกรม Logo Blocks ปรับแต่งแก้ไขโปรแกรมเพิ่มเติม คําสั่งเพิ่มเติมสําหรับตรวจสอบการเชื่อมต่อของบลูทูธก่อนที่จะมีการส่งข้อมูลออกไป เพราะการ ส่งข้อมูลผ่านบลูทูธเลย โดยไม่มีการเชื่อมต่อกับอุปกรณ์บลูทูธอื่นๆก่อน จะทําให้เครื่องมีปัญหา และค้าง ได้ จึงจําเป็นต้องตรวจสอบการเชื่อมต่อก่อนว่าเป็นจริงหรือไม่ ถ้าใช่ค่อยส่งข้อมูลออกไป
- 89. คําสั่งส่งข้อมูลผ่านบลูทูธ โดยไม่มีการตรวจสอบการเชื่อมต่อก่อน อาจเกิดความผิดพลาดในการทํางาน คําสั่งตรวจสอบการเชื่อมต่อบลูทูธก่อนที่จะมีส่งข้อมูล เพื่อป้องกันความผิดพลาดในการทํางาน ชุดคําสั่งควบคุมการทํางานของหุ่นยนต์ ที่พัฒนาด้วยโปรแกรม app inventor
- 90. ปรับแต่งคุณสมบัติ (Properties) Visible ของปุ่ม disconnect ให้มีค่าเป็น hidden เพื่อซ่อน การทํางานของปุ่ม disconnect เอาไว้ เนื่องจากไม่จําเป็นต้องใช้ตอนโปรแกรมเริ่มทํางาน โดยจะเรียกใช้ อีกครั้งเมื่อมีการเชื่อมต่อบลูทูธสําเร็จแล้ว ปุ่ม Connect ที่ใช้ทําหน้าที่ในการเชื่อมต่อกับบลูทูธ จะหายไปหลังจากที่ได้เชื่อมต่อบลูทูธกับ หุ่นยนต์เป็นที่เรียบร้อยแล้ว และปุ่ม disconnect จะปรากฏขึ้นแทน จากนั้นเมื่อกดยกเลิกการเชื่อมต่อ disconnect ปุ่ม connect จะแสดงขึ้นมาแทน และปุ่ม disconnect ก็จะหายไป
- 91. ใส่ 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 และเป็นตัวกลางเชื่อมต่อสื่อสารกับเซิฟเวอร์
- 92. การติดตั้ง JAVA JDK ก่อนอื่นให้ทําการดาวน์โหลดไฟล์ติดตั้ง JAVA JDK เสียก่อน โดยเข้าไปที่เว็บไซด์ http://www.oracle.com/technetwork/java/javase/downloads/index.html จากนั้น คลิกเลือกไปที่ Java DOWNLOAD Java Platform (JDK) 7u21 ซึ่งเป็นเวอร์ชั่นล่าสุดในขณะที่กําลังทําคู่มือเล่มนี้ คลิก Accept Lincense Agreement เพื่อยอมรับข้อตกลง จากนั้นเลือกไฟล์ที่ต้องการดาวน์โหลด ขึ้นอยู่กับระบบปฏิบัติที่เราใช้
- 93. ไฟล์ที่ได้จากการดาวน์โหลด • 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 ลงไปพร้อมกันด้วย
- 94. การติดตั้งอาจจะต้องใช้เวลาสักครู่ หลังจากติดตั้งโปรแกรม เสร็จเรียบร้อยแล้วคลิกที่ Close เพื่อปิดหน้าต่าง
- 95. การตั้งค่า JAVA HOME การตั้งค่าตรงนี้ถือว่าสําคัญมากเพราะมีหน้าที่ในการสร้างไฟล์แพ็คเกจ นามสกุล apk เพื่อ สามารถนําไปติดตั้งบนระบบปฏิบัติการแอนดรอยด์ได้ ขั้นตอนมีดังนี้คือ 1. คลิกขวาที่ My Computer 2. คลิกเลือกไปที่ Advanced system settings
- 96. 3. คลิกไปที่แท็บ Advanced จากนั้นคลิกที่ Environment Variables 4. คลิกที่ New
- 97. 5. ในช่อง Variable name ให้ใส่ข้อความว่า JAVA_HOME ส่วนหัวข้อ Variable value ให้ ใส่ตําแหน่งของ java ที่ถูกติดตั้งไว้ภายในเครื่องคอมพิวเตอร์ ตัวอย่าง C:Program FilesJavajdk1.7.0_21เสร็จสิ้นขั้นตอนการตั้งค่า เครื่องมือในการจําลองการทํางานของเว็บเซิฟเวอร์ ดาวน์โหลดเครื่องมือได้ที่ http://sourceforge.net/projects/ai4a-configs/files/?source=navbar ในขณะทําคู่มือฉบับนี้เป็นเวอร์ชั่น 1.4.7 ไฟล์ที่ได้จากการดาวน์โหลดนั้นจะเป็นไฟล์ที่ถูกบีบอัดเอาไว้ ซึ่งไม่สามารถนําไปใช้งานได้ทันที ให้เราทําการแตกไฟล์ที่ถูกบีบอัดไว้เสียก่อน โดยหลังจากที่เราทําการแตกไฟล์เป็นที่เรียบร้อยแล้ว เราก็ จะได้ไฟล์ app inventor ที่สามารถทํางานแบบออฟไลน์ได้แล้ว ดังภาพ ขั้นตอนการใช้งาน App Inventor แบบออฟไลน์ทําได้ดังนี้คือ 1. เริ่มต้น เราจะทําการจําลองการทํางานของเซิฟเวอร์บนเครื่องคอมพิวเตอร์เสียก่อน โดยให้คลิก เข้าไปในโฟลเดอร์ BuildServer
- 98. 2. เปิดไฟล์ที่ต้องการ โดยจะขึ้นอยู่กับระบบปฏิบัติการของคอมพิวเตอร์ที่เราใช้งาน แล้วดับเบิ้ลคลิกที่ ไฟล์ • Launch-build server ทํางานบนระบบปฏิบัติการวินโดวส์ 64 บิต • Launch-buildserver32 ทํางานบนระบบปฏิบัติการวินโดวส์ 32 บิต หลังจากเปิดไฟล์เรียบร้อยแล้วจะปรากฏหน้าต่างคอมมานแสดงการทํางานโปรแกรมจําลองเซิฟเวอร์ขึ้น ดังภาพ ที่บรรทัดสุดท้าย จะขึ้นข้อความว่า Server running แสดงว่าขณะนี้เซิฟเวอร์ได้ทํางานแล้ว *** ห้ามปิดหน้าต่างนี้เด็ดขาดจนกว่าจะเลิกใช้งาน app inventor
- 99. 3. เข้าไปในโฟลเดอร์ AppEngine แล้วมองหาไฟล์ที่ชื่อว่า startAI 4. ดับเบิ้ลคลิกที่ไฟล์ startAI จากนั้นจะปรากฏหน้าต่างคอมมาน แสดงการทํางานของโปรแกรมขึ้นมา สังเกตุในบรรทัดสุดท้าย ให้รอ จนกว่าจะปรากฏข้อความ Dev App Server is now running *** ห้ามปิดหน้าต่างนี้เด็ดขาดจนกว่าจะเลิกใช้งาน app inventor
- 100. 5. เปิดโปรแกรมเว็บบราวเซอร์ขึ้นมา สามารถใช้โปรแกรม Google chrome , Internet Explorer หรือ Mozilla Firefox จากนั้นที่ตําแหน่ง URL ให้พิมพ์ว่า localhost:8888 ซึ่งต่อไปจะใช้เป็น ช่องทางในการเข้าใช้งานโปรแกรม AppInventor โดยไม่จําเป็นต้องเชื่อมต่อกับอินเตอร์เน็ต 6. จะปรากฏหน้าต่างสําหรับการ Log in เพื่อเข้าใช้งานโปรแกรม AppInventor โดยให้คลิกไปที่ปุ่ม Log in เพื่อเข้าใช้งานโปรแกรม 7. จะแสดงหน้าต่างต้อนรับของโปรแกรม AppInventor เท่านี้เราก็สามารถใช้งาน app inventor แบบไม่ต้องเชื่อมต่อกับอินเตอร์เน็ตได้แล้ว