SlideShare a Scribd company logo
1 of 100
Download to read offline
เอกสารประกอบการใช้งาน
การพัฒนาแอพพลิเคชั่นบนอุปกรณ์แอนดรอยด์
สําหรับผู้เริ่มต้น
จัดทําโดย
ธวัชชัย สีลาดเลา
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 อุปกรณ์แอนดรอยด์ที่ได้เชื่อมต่ออยู่นั้น จะถูกยกเลิกการเชื่อมต่อ
กับหุ่นยนต์ทันที
คู่มือ Handbook app inventor
คู่มือ Handbook app inventor
คู่มือ Handbook app inventor
คู่มือ Handbook app inventor
คู่มือ Handbook app inventor
คู่มือ Handbook app inventor
คู่มือ Handbook app inventor
คู่มือ Handbook app inventor
คู่มือ Handbook app inventor
คู่มือ Handbook app inventor
คู่มือ Handbook app inventor
คู่มือ Handbook app inventor
คู่มือ Handbook app inventor
คู่มือ Handbook app inventor
คู่มือ Handbook app inventor
คู่มือ Handbook app inventor
คู่มือ Handbook app inventor
คู่มือ Handbook app inventor
คู่มือ Handbook app inventor
คู่มือ Handbook app inventor
คู่มือ Handbook app inventor
คู่มือ Handbook app inventor
คู่มือ Handbook app inventor
คู่มือ Handbook app inventor
คู่มือ Handbook app inventor
คู่มือ Handbook app inventor
คู่มือ Handbook app inventor
คู่มือ Handbook app inventor

More Related Content

What's hot

ใบความรู้ที่ 8 application paint pot2
ใบความรู้ที่ 8 application paint pot2ใบความรู้ที่ 8 application paint pot2
ใบความรู้ที่ 8 application paint pot2Nattapon
 
ใบความรู้ที่ 10 application calculator
ใบความรู้ที่ 10 application calculatorใบความรู้ที่ 10 application calculator
ใบความรู้ที่ 10 application calculatorNattapon
 
ชั้นประถมศึกษาปีที่ 5
ชั้นประถมศึกษาปีที่ 5ชั้นประถมศึกษาปีที่ 5
ชั้นประถมศึกษาปีที่ 5krunuy5
 
โครงงานประเภท “การพัฒนาโปรแกรมประยุกต์”
โครงงานประเภท “การพัฒนาโปรแกรมประยุกต์”โครงงานประเภท “การพัฒนาโปรแกรมประยุกต์”
โครงงานประเภท “การพัฒนาโปรแกรมประยุกต์”Royphim Namsongwong
 
โครงงานประเภทการประยุกต์ใช้งาน
โครงงานประเภทการประยุกต์ใช้งานโครงงานประเภทการประยุกต์ใช้งาน
โครงงานประเภทการประยุกต์ใช้งานNuchy Geez
 
โครงงานคอมพิวเตอร์
โครงงานคอมพิวเตอร์โครงงานคอมพิวเตอร์
โครงงานคอมพิวเตอร์Sarocha Makranit
 
คู่มือ Thunkable
คู่มือ Thunkableคู่มือ Thunkable
คู่มือ ThunkableKhunakon Thanatee
 
แผนการจัดการเรียนรู้ ส่วนประกอบคอมพิวเตอร์ ม.2
แผนการจัดการเรียนรู้ ส่วนประกอบคอมพิวเตอร์ ม.2แผนการจัดการเรียนรู้ ส่วนประกอบคอมพิวเตอร์ ม.2
แผนการจัดการเรียนรู้ ส่วนประกอบคอมพิวเตอร์ ม.2พงศธร ภักดี
 
ใบงานที่ 1 เรื่อง โครงงานคอมพิวเตอร์
ใบงานที่ 1 เรื่อง โครงงานคอมพิวเตอร์ใบงานที่ 1 เรื่อง โครงงานคอมพิวเตอร์
ใบงานที่ 1 เรื่อง โครงงานคอมพิวเตอร์Fon Edu Com-sci
 
โครงงานคอมพิวเตอร์
โครงงานคอมพิวเตอร์โครงงานคอมพิวเตอร์
โครงงานคอมพิวเตอร์Wannwipha Kanjan
 
โครงงานคอมพิวเตอร์เรื่อง การออกแบบอาคาร บ้าน เรือน ด้วยโปรแกรม 3 มิติ
โครงงานคอมพิวเตอร์เรื่อง การออกแบบอาคาร บ้าน เรือน ด้วยโปรแกรม 3 มิติโครงงานคอมพิวเตอร์เรื่อง การออกแบบอาคาร บ้าน เรือน ด้วยโปรแกรม 3 มิติ
โครงงานคอมพิวเตอร์เรื่อง การออกแบบอาคาร บ้าน เรือน ด้วยโปรแกรม 3 มิติพัน พัน
 
โครงงานคอมพิวเตอร์เพื่อการศึกษา เรื่อง ประเภทของคอมพิวเตอร์
โครงงานคอมพิวเตอร์เพื่อการศึกษา เรื่อง ประเภทของคอมพิวเตอร์โครงงานคอมพิวเตอร์เพื่อการศึกษา เรื่อง ประเภทของคอมพิวเตอร์
โครงงานคอมพิวเตอร์เพื่อการศึกษา เรื่อง ประเภทของคอมพิวเตอร์paveenada
 
สื่อการสอน คอมพิวเตอร์เบื้องต้น
สื่อการสอน คอมพิวเตอร์เบื้องต้นสื่อการสอน คอมพิวเตอร์เบื้องต้น
สื่อการสอน คอมพิวเตอร์เบื้องต้นNoppakhun Suebloei
 
บทที่ 2 เอกสารที่เกี่ยวข้อง
บทที่ 2 เอกสารที่เกี่ยวข้องบทที่ 2 เอกสารที่เกี่ยวข้อง
บทที่ 2 เอกสารที่เกี่ยวข้องTheeraWat JanWan
 
04 บทที่ 4-ผลการดำเนินโครงงาน
04 บทที่ 4-ผลการดำเนินโครงงาน04 บทที่ 4-ผลการดำเนินโครงงาน
04 บทที่ 4-ผลการดำเนินโครงงานChamp Wachwittayakhang
 
ทฤษฎีการออกแบบเว็บไซต์
ทฤษฎีการออกแบบเว็บไซต์ทฤษฎีการออกแบบเว็บไซต์
ทฤษฎีการออกแบบเว็บไซต์Bank Sangsudta
 

What's hot (20)

ใบความรู้ที่ 8 application paint pot2
ใบความรู้ที่ 8 application paint pot2ใบความรู้ที่ 8 application paint pot2
ใบความรู้ที่ 8 application paint pot2
 
ใบความรู้ที่ 10 application calculator
ใบความรู้ที่ 10 application calculatorใบความรู้ที่ 10 application calculator
ใบความรู้ที่ 10 application calculator
 
ชั้นประถมศึกษาปีที่ 5
ชั้นประถมศึกษาปีที่ 5ชั้นประถมศึกษาปีที่ 5
ชั้นประถมศึกษาปีที่ 5
 
โครงงานประเภท “การพัฒนาโปรแกรมประยุกต์”
โครงงานประเภท “การพัฒนาโปรแกรมประยุกต์”โครงงานประเภท “การพัฒนาโปรแกรมประยุกต์”
โครงงานประเภท “การพัฒนาโปรแกรมประยุกต์”
 
โครงงานประเภทการประยุกต์ใช้งาน
โครงงานประเภทการประยุกต์ใช้งานโครงงานประเภทการประยุกต์ใช้งาน
โครงงานประเภทการประยุกต์ใช้งาน
 
โครงงานคอมพิวเตอร์
โครงงานคอมพิวเตอร์โครงงานคอมพิวเตอร์
โครงงานคอมพิวเตอร์
 
รายงานโครงงานคอมพิวเตอร์
รายงานโครงงานคอมพิวเตอร์รายงานโครงงานคอมพิวเตอร์
รายงานโครงงานคอมพิวเตอร์
 
คู่มือ Thunkable
คู่มือ Thunkableคู่มือ Thunkable
คู่มือ Thunkable
 
แผนการจัดการเรียนรู้ ส่วนประกอบคอมพิวเตอร์ ม.2
แผนการจัดการเรียนรู้ ส่วนประกอบคอมพิวเตอร์ ม.2แผนการจัดการเรียนรู้ ส่วนประกอบคอมพิวเตอร์ ม.2
แผนการจัดการเรียนรู้ ส่วนประกอบคอมพิวเตอร์ ม.2
 
ใบงานที่ 1 เรื่อง โครงงานคอมพิวเตอร์
ใบงานที่ 1 เรื่อง โครงงานคอมพิวเตอร์ใบงานที่ 1 เรื่อง โครงงานคอมพิวเตอร์
ใบงานที่ 1 เรื่อง โครงงานคอมพิวเตอร์
 
โครงงานคอมพิวเตอร์
โครงงานคอมพิวเตอร์โครงงานคอมพิวเตอร์
โครงงานคอมพิวเตอร์
 
ตัวอย่างโครงงาน
ตัวอย่างโครงงานตัวอย่างโครงงาน
ตัวอย่างโครงงาน
 
โครงงานคอมพิวเตอร์เรื่อง การออกแบบอาคาร บ้าน เรือน ด้วยโปรแกรม 3 มิติ
โครงงานคอมพิวเตอร์เรื่อง การออกแบบอาคาร บ้าน เรือน ด้วยโปรแกรม 3 มิติโครงงานคอมพิวเตอร์เรื่อง การออกแบบอาคาร บ้าน เรือน ด้วยโปรแกรม 3 มิติ
โครงงานคอมพิวเตอร์เรื่อง การออกแบบอาคาร บ้าน เรือน ด้วยโปรแกรม 3 มิติ
 
แบบฝึกหัดที่ 3 Microsoft PowerPoint
แบบฝึกหัดที่ 3 Microsoft PowerPointแบบฝึกหัดที่ 3 Microsoft PowerPoint
แบบฝึกหัดที่ 3 Microsoft PowerPoint
 
โครงงานคอมพิวเตอร์เพื่อการศึกษา เรื่อง ประเภทของคอมพิวเตอร์
โครงงานคอมพิวเตอร์เพื่อการศึกษา เรื่อง ประเภทของคอมพิวเตอร์โครงงานคอมพิวเตอร์เพื่อการศึกษา เรื่อง ประเภทของคอมพิวเตอร์
โครงงานคอมพิวเตอร์เพื่อการศึกษา เรื่อง ประเภทของคอมพิวเตอร์
 
สื่อการสอน คอมพิวเตอร์เบื้องต้น
สื่อการสอน คอมพิวเตอร์เบื้องต้นสื่อการสอน คอมพิวเตอร์เบื้องต้น
สื่อการสอน คอมพิวเตอร์เบื้องต้น
 
02 บทที่ 2-เอกสารที่เกี่ยวข้อง
02 บทที่ 2-เอกสารที่เกี่ยวข้อง02 บทที่ 2-เอกสารที่เกี่ยวข้อง
02 บทที่ 2-เอกสารที่เกี่ยวข้อง
 
บทที่ 2 เอกสารที่เกี่ยวข้อง
บทที่ 2 เอกสารที่เกี่ยวข้องบทที่ 2 เอกสารที่เกี่ยวข้อง
บทที่ 2 เอกสารที่เกี่ยวข้อง
 
04 บทที่ 4-ผลการดำเนินโครงงาน
04 บทที่ 4-ผลการดำเนินโครงงาน04 บทที่ 4-ผลการดำเนินโครงงาน
04 บทที่ 4-ผลการดำเนินโครงงาน
 
ทฤษฎีการออกแบบเว็บไซต์
ทฤษฎีการออกแบบเว็บไซต์ทฤษฎีการออกแบบเว็บไซต์
ทฤษฎีการออกแบบเว็บไซต์
 

Similar to คู่มือ Handbook app inventor

Joomla-installation
Joomla-installationJoomla-installation
Joomla-installationSo Pias
 
โปรแกรมประยุกต์บนเว็บ
โปรแกรมประยุกต์บนเว็บโปรแกรมประยุกต์บนเว็บ
โปรแกรมประยุกต์บนเว็บanuchit025
 
บทที่5
บทที่5บทที่5
บทที่5noonnn
 
01 บทที่ 1-บทนำ
01 บทที่ 1-บทนำ01 บทที่ 1-บทนำ
01 บทที่ 1-บทนำChi Cha Pui Fai
 
Software
SoftwareSoftware
Softwaresa
 
โครงงานคอมพิวเตอร์ เผยแพร่ความรู้ออนไลน์
โครงงานคอมพิวเตอร์ เผยแพร่ความรู้ออนไลน์ โครงงานคอมพิวเตอร์ เผยแพร่ความรู้ออนไลน์
โครงงานคอมพิวเตอร์ เผยแพร่ความรู้ออนไลน์ Peem Jirayut
 
โครงงานใบงานที่ 7
โครงงานใบงานที่ 7โครงงานใบงานที่ 7
โครงงานใบงานที่ 7Anny Na Sonsawan
 
ใบงานที่ 8 การพัฒนาโปรแกรมประยุกต์
ใบงานที่ 8 การพัฒนาโปรแกรมประยุกต์ใบงานที่ 8 การพัฒนาโปรแกรมประยุกต์
ใบงานที่ 8 การพัฒนาโปรแกรมประยุกต์kwangslideshare
 
open source
open sourceopen source
open sourceNong ton
 
Introduction Software Factory v1.1
Introduction Software Factory v1.1Introduction Software Factory v1.1
Introduction Software Factory v1.1Lek Pongpatimet
 
คู่มือการใช้งานโปรแกรมพัฒนา Application สำหรับระบบปฏิบัติการ i os
คู่มือการใช้งานโปรแกรมพัฒนา Application สำหรับระบบปฏิบัติการ i osคู่มือการใช้งานโปรแกรมพัฒนา Application สำหรับระบบปฏิบัติการ i os
คู่มือการใช้งานโปรแกรมพัฒนา Application สำหรับระบบปฏิบัติการ i osNisachol Poljorhor
 
แนะนำโปรแกรม Macromedia authorware 7.0
แนะนำโปรแกรม Macromedia authorware 7.0 แนะนำโปรแกรม Macromedia authorware 7.0
แนะนำโปรแกรม Macromedia authorware 7.0 pom_2555
 
โปรแกรม Macromedia authorware 7.0 พิมผกา ลลิตา
โปรแกรม Macromedia authorware 7.0 พิมผกา ลลิตาโปรแกรม Macromedia authorware 7.0 พิมผกา ลลิตา
โปรแกรม Macromedia authorware 7.0 พิมผกา ลลิตาpom_2555
 
โครงงาน
โครงงานโครงงาน
โครงงานNamfon12
 

Similar to คู่มือ Handbook app inventor (20)

Joomla-installation
Joomla-installationJoomla-installation
Joomla-installation
 
Blog : Wordpress
Blog : WordpressBlog : Wordpress
Blog : Wordpress
 
โปรแกรมประยุกต์บนเว็บ
โปรแกรมประยุกต์บนเว็บโปรแกรมประยุกต์บนเว็บ
โปรแกรมประยุกต์บนเว็บ
 
K5
K5K5
K5
 
บทที่5
บทที่5บทที่5
บทที่5
 
01 บทที่ 1-บทนำ
01 บทที่ 1-บทนำ01 บทที่ 1-บทนำ
01 บทที่ 1-บทนำ
 
Software
SoftwareSoftware
Software
 
โครงงานคอมพิวเตอร์ เผยแพร่ความรู้ออนไลน์
โครงงานคอมพิวเตอร์ เผยแพร่ความรู้ออนไลน์ โครงงานคอมพิวเตอร์ เผยแพร่ความรู้ออนไลน์
โครงงานคอมพิวเตอร์ เผยแพร่ความรู้ออนไลน์
 
Wordpress 3.5 -install-appserv
Wordpress 3.5 -install-appservWordpress 3.5 -install-appserv
Wordpress 3.5 -install-appserv
 
โครงงานใบงานที่ 7
โครงงานใบงานที่ 7โครงงานใบงานที่ 7
โครงงานใบงานที่ 7
 
ใบงานที่ 8 การพัฒนาโปรแกรมประยุกต์
ใบงานที่ 8 การพัฒนาโปรแกรมประยุกต์ใบงานที่ 8 การพัฒนาโปรแกรมประยุกต์
ใบงานที่ 8 การพัฒนาโปรแกรมประยุกต์
 
open source
open sourceopen source
open source
 
OpenSource Software
OpenSource SoftwareOpenSource Software
OpenSource Software
 
Introduction Software Factory v1.1
Introduction Software Factory v1.1Introduction Software Factory v1.1
Introduction Software Factory v1.1
 
คู่มือการใช้งานโปรแกรมพัฒนา Application สำหรับระบบปฏิบัติการ i os
คู่มือการใช้งานโปรแกรมพัฒนา Application สำหรับระบบปฏิบัติการ i osคู่มือการใช้งานโปรแกรมพัฒนา Application สำหรับระบบปฏิบัติการ i os
คู่มือการใช้งานโปรแกรมพัฒนา Application สำหรับระบบปฏิบัติการ i os
 
K8
K8K8
K8
 
แนะนำโปรแกรม Macromedia authorware 7.0
แนะนำโปรแกรม Macromedia authorware 7.0 แนะนำโปรแกรม Macromedia authorware 7.0
แนะนำโปรแกรม Macromedia authorware 7.0
 
โปรแกรม Macromedia authorware 7.0 พิมผกา ลลิตา
โปรแกรม Macromedia authorware 7.0 พิมผกา ลลิตาโปรแกรม Macromedia authorware 7.0 พิมผกา ลลิตา
โปรแกรม Macromedia authorware 7.0 พิมผกา ลลิตา
 
โครงงาน
โครงงานโครงงาน
โครงงาน
 
joomla-2-5-install-appserv
joomla-2-5-install-appservjoomla-2-5-install-appserv
joomla-2-5-install-appserv
 

คู่มือ 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 ลงในเครื่องคอมพิวเตอร์
  • 8. 2) ติดตั้งแบบออฟไลน์ (offline install ) ก็คือการดาวน์โหลดไฟล์ติดตั้งมาเก็บไว้ในเครื่อง คอมพิวเตอร์ก่อน และทําการติดตั้งภายหลัง สามารถดาวน์โหลดไฟล์จาวาสําหรับใช้ในการติดตั้งได้ที่ http://java.com/en/download/manual.jsp หลังจากทําการดาวน์โหลดไฟล์ติดตั้งของจาวาเสร็จเรียบร้อยแล้ว จะได้ไฟล์สําหรับติดตั้งดังภาพ • ไฟล์ jre-7u21-windows-i586 ใช้สําหรับใช้ติดตั้งบนระบบปฏิบัติการวินโดวส์ 32 bit • ไฟล์ jre-7u21-windows-x64 ใช้สําหรับใช้ติดตั้งบนระบบปฏิบัติการวินโดวส์ 64 bit ก่อนทําการติดตั้งโปรแกรมให้เลือกไฟล์ติดตั้งให้ตรงกับความต้องการของระบบปฏิบัติการคอมพิวเตอร์ ที่ใช้ จากนั้นดับเบิ้ลคลิกไฟล์ที่ต้องการ และคลิกไปที่ Install
  • 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
  • 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
  • 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 นั้น ให้เราคลิกที่ตกลงเพื่อยอมรับ และทําการดาวน์โหลด ไฟล์ที่ได้จากการดาวน์โหลดนั้นจะถูกจัดเก็บไว้ในโฟลเดอร์ดาวน์โหลดบนอุปกรณ์แอนดรอยด์ แค่ทั้งนี้ ขึ้นอยู่กับอุปกรณ์แอนดรอยด์แต่ละรุ่น
  • 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. ที่อุปกรณ์แอนดรอยด์บริเวณด้านบนขวามือจะมีรูปสัญลักษณ์ของการค้นหาอุปกรณ์บลูทูธอยู่ ให้เราคลิก เลือกและสังเกตที่บริเวณด้านล่าง จะแสดงรายชื่อของบลูทูธที่สามารถค้นหาได้ คลิกเลือกไปที่อุปกรณ์บลูทูธที่ต้องการเชื่อมต่อ จากนั้นรอสักครู่จะขึ้นข้อความแสดงบนคอมพิวเตอร์ จะมีหน้าต่างแสดงข้อความการขออนุญาตในการจับคู่ สังเกตจากข้อความตัวเลขที่แสดงทางด้านของ คอมพิวเตอร์ และอุปกรณ์แอนดรอยด์จะมีตัวเลขเหมือนกัน
  • 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 อุปกรณ์แอนดรอยด์ที่ได้เชื่อมต่ออยู่นั้น จะถูกยกเลิกการเชื่อมต่อ กับหุ่นยนต์ทันที