ควบคุม POP-X2 Rover แบบไร้สายด้วย BlueStick
และการสร้างแอปบนสมาร์ตโฟนแอนดรอยด์ด้วย App Inventor
เริ่มต้นใช้งาน App Inventor 2
MIT App Inventor เป็นบริการคลาวด์บนอินเตอร์เน็ต สำหรับสร้างแอปบนสมาร์ตโฟนแอนดรอยด์ด้วยตัวเอง โดยใช้การเขียนโค้ดเป็นแบบบล็อก ทำงานทั้งหมดได้ผ่านบราวเซอร์ ซึ่งมีขั้นตอนการใช้งานดังนี้
1. เข้าไปที่ https://appinventor.mit.edu/ จากนั้นคลิกที่ Create Apps! เพื่อเริ่มขั้นตอนการสร้างแอป
2. ลงชื่อเข้าใช้ด้วยบัญชี Google ถ้าไม่มีก็ต้องสร้าง แน่นอนว่าคนใช้แอนดรอยด์ ต้องมีบัญชี Google อยู่แล้ว ป้อนอีเมล์ลงไปได้เลย จากนั้นกดที่ปุ่ม Create Apps! อีกครั้ง
3. ใช้งานครั้งแรกก็ต้องกดยอมรับเงื่อนไขของ MIT App Inventor ด้วย
4. จะมีหน้าต่างต้อนรับและแนะนำให้เราเชื่อมต่อกับแอนดรอยด์ ซึ่งจะเก็บไว้ทำตอนหลัง ตอนนี้ให้กด Continue เพื่อไปต่อ
5. จะมีหน้าต่างแนะนำการใช้งานเบื้องต้น กด CLOSE เพื่อปิดหน้าต่าง
6. เริ่มต้นสร้างชิ้นงานใหม่ โดยกดที่ Start new project จากนั้นตั้งชื่อแล้วกดปุ่ม OK (ชื่อต้องเป็นตัวอักษรหรือตัวเลขเท่านั้น เว้นวรรคหรือเป็นอักขระพิเศษไม่ได้)
7. หน้าต่างจะมี 2 ส่วน คือ
หน้าต่าง Designer สำหรับวางปุ่ม วางข้อความ สำหรับติดต่อผู้ใช้
หน้าต่าง Block สำหรับเขียนโค้ด
การเชื่อมต่อ App Inventor กับสมาร์ตโฟนแอนดรอยด์เพื่อจำลองการทำงาน
มี 3 แบบประกอบด้วย
เชื่อมต่อผ่าน WiFi (เราจะใช้วิธีนี้)
ใช้ซอฟต์แวร์อีมูลเลเตอร์เพื่อจำลองการทำงาน
เชื่อมต่อผ่านสาย USB
ขั้นตอนการเชื่อมต่อผ่าน WiFi
งานนี้จะต้องให้สมาร์ตโฟนและเครื่องคอมพิวเตอร์ใช้ WiFi ชุดเดียวกัน ถึงจะเชื่อมโยงกันได้
1. ที่สมาร์ตโฟน เข้าไปที่ Play Store ค้นหาแอปชื่อ MIT AI2 Companion และทำการติดตั้ง
2. หน้าจอของโปรแกรม MIT AI2 Companion จะรอให้ป้อนคีย์ 6 หลักหรือสแกน QR Code เพื่อเชื่อมต่อกับโปรแกรม App Inventor
3. ที่โปรแกรม App Inventor เมนู Connect เลือก AI Companion
4. App Inventor จะแสดงหน้าต่าง Code ให้นำโค้ดนี้ป้อนให้กับแอป MIT AI2 Companion หรือจะใช้วิธีสแกน QR Code ด้วยกล้องก็ได้
5. หน้าจอของแอป MIT AI2 Companion จะเป็นแบบเดียวกับหน้าจอของ App Inventor
การเขียนโปรแกรมเพื่อติดต่อกับโมดูลบลูทูธ
การออกแบบส่วนติดต่อผู้ใช้
1. ลาก Listpicker มาวางที่จอ
2. เปลี่ยนชื่อของปุ่มให้กลายเป็น Connect
3. ลากปุ่ม Button มาวางอีกสองปุ่ม เปลี่ยนชื่อเป็น ON และ OFF
4. ไปที่หัวข้อ Connectivity ลากบล็อก BluetoothClient มาวางที่จอ
การลากบล็อกเขียนโค้ด
1. เปลี่ยนหน้าต่างไปที่หน้า Blocks
when ListPicker.BeforePicking do
เหตุการณ์ที่จะเริ่มเมื่อมีการคลิก ListPicker โดยจะเกิดขึ้นก่อนที่ตัวเลือกจะปรากฏขึ้น และสามารถใช้เพื่อเตรียมตัวเลือกก่อนที่จะแสดงออกมา
2. เพื่อแสดงรายการ (List) ของอุปกรณ์บลูทูธมาแสดง ให้ลากบล็อกมาวางดังรูป
3. หลังจากเลือกรายการบลูทูธ ให้เชื่อมต่อกับรายการที่เลือก จะต้องลากบล็อกมาวางดังรูป
when ListPicker.AfterPicking do
เหตุการณ์ที่จะเกิดขึ้นหลังจากเลือกรายการจาก ListPicker แล้ว ผลลัพธ์ต่างๆ จะถูกเก็บค่าเอาไว้
4. เขียนโค้ดสำหรับปุ่ม ON (Button1) และ OFF (Button2) โดยให้ส่งค่าตัวเลขขนาด 1 ไบต์ออกไปเป็นเลข 1 และเลข 0
เขียนโค้ดฝั่ง POP-X2 Rover
1. เชื่อมต่อสาย BlueStick เข้ากับบอร์ด POP-X2 ให้เรียบร้อย (จากบทที่ 8)
2. ที่สมาร์ตโฟน จับคู่กับ BlueStick ให้เรียบร้อยแบบเดียวกับบทที่ 8
3. กดปุ่ม Connect เพื่อเชื่อมต่อกับ BlueStick เมื่อเชื่อมต่อเรียบร้อย BlueStick จะกะพริบช้าลง
4. ทดสอบกดปุ่ม ON และ OFF สังเกตผลที่หน้าจอ GLCD
การสร้างไฟล์ APK สำหรับติดตั้งกับแอนดรอยด์
1. ที่เมนู Build เลือก Android App (.apk) เพื่อทำการคอมไพล์และสร้างไฟล์ APK ขึ้นมา
2. จะมีหน้าต่างแจ้งการคอมไพล์โค้ดที่เราเขียนขึ้น
3. เมื่อเสร็จเรียบร้อย จะมีหน้าต่างให้ดาวน์โหลดเก็บไว้ที่คอมพิวเตอร์ หรือใช้สมาร์ตโฟนอ่าน QR Code เพื่อดาวน์โหลดไปยังสมาร์ตโฟนโดยตรงก็ได้
4. อาจจะมีข้อความแจ้งเตือนอันตรายจากการดาวน์โหลดไฟล์จากแหล่งที่ไม่ทราบที่มาให้กด ตกลง
5. ไฟล์ APK เมื่อดาวน์โหลดเสร็จแล้ว สามารถติดตั้งได้ โดยจะต้องเปิดอนุญาตติดตั้งแอปที่ไม่รู้จักเสียก่อน จะมีการแจ้งเตือนอีกครั้ง ให้กดติดตั้งต่อไป
6. เมื่อติดตั้งเสร็จ แอปจะทำงานเหมือนตอนทดลองผ่าน MIT AI2 Companion
สร้างปุ่มควบคุมแบบเดียวกับแอป BlueStick Control
ในบทที่ 8 เรามีแอปที่ชื่อ bluestick control สำหรับการควบคุมการเคลื่อนที่พร้อมทั้งหนีบจับแบบไร้สาย งานนี้เราจะสร้างแอปที่ทำงานแบบเดียวกัน ใช้โค้ดเดียวกันได้เลย สำหรับ POP-X2 Rover ก็โหลดโค้ดเดิมจากตัวอย่างที่ 35 ในบทที่ 8 เตรียมไว้ได้เลย
การออกแบบหน้าตาปุ่มกดบน App Inventor
จากรูปเป็นหน้าตาปุ่มกดที่ออกแบบขึ้น ตามรูปมีขึ้นตอนการออกแบบดังนี้
1. วางทิศทางจอภาพเป็นแนวนอน
กำหนดค่า ScreenOrientation เป็น Landscape
2. วางตารางเพื่อกำหนดตำแหน่งการวางปุ่มได้ง่ายขึ้น
ปกติถ้าเราวาง Button จะถูกเรียงในแนวตั้งไม่สามารถวางตามพื้นที่ที่ต้องการได้ จึงต้องลาก TableArrangement ในหัวข้อ Layout มาวางและกำหนดค่าคุณสมบัติให้ตารางมีขนาด 4×4 ช่องที่มีความกว้างของตารางเต็มหน้าจอพอดี
3. ลากอุปกรณ์ต่างๆ มาวาง
ในช่องตารางตามตำแหน่งในรูป ทั้ง Listpicker ,Button และ Label ในหัวข้อ User Interface พร้อมทั้งลาก BluetoothClient ในหัวข้อ Connectivity มาวางด้วย
4. เปลี่ยนชื่อปุ่มและข้อความทั้งหมด
เพื่อสื่อถึงหน้าที่การทำงานของแต่ละปุ่ม โดยปรับที่หัวข้อ Text ใน Properties
หน้าจอที่ App Inventor
หน้าจอที่แอป MIT AI2 Companion
5. ปรับขนาดของปุ่ม
เพื่อให้สามารถใช้กับจอภาพได้หลายขนาด จะใช้วิธีการป้อนค่าเป็นเปอร์เซ็นต์ สำหรับความกว้างของปุ่ม มี 4 คอลัมน์กำหนดให้กว้างคอลัมน์ละ 25% จะเต็มหน้าจอพอดี ส่วนความสูง แถวบนสุดใช้ไม่บ่อย กำหนดเป็น 15% อีก 3 แถวกำหนดเป็น 25% ได้เลย แต่ Layout ในโปรแกรม App Inventor อาจจะไม่เท่ากับค่าจริง ให้ดูผลลัพธ์ที่แอป MIT AI2 Companion แทน
6. ขยายขนาดฟอนต์
เพื่อให้มองง่ายสะดวก อันนี้ปรับค่าตามความต้องการได้เลย
7. Rename ชื่ออุปกรณ์ที่เรียกใช้
เพื่อให้ง่ายต่อการเขียนโค้ดให้เปลี่ยนชื่อ ให้ตรงกับข้อความที่แสดงที่ปุ่ม
การเขียนโค้ด
เมื่อฝั่งการออกแบบหน้าตาได้รูปแบบเป็นที่พอใจแล้วก็ไปเขียนโค้ด โดยคลิกที่หัวข้อ Blocks ที่มุมบนด้านซ้าย
1. โค้ดชุดแรกเป็นเรื่องการเชื่อมต่อทำงานเหมือนกับตัวอย่างก่อนหน้านี้ มีเพิ่มเติมคือปุ่ม disconnect ที่เมื่อกดก็ให้ยกเลิกการเชื่อมต่อ Bluetooth และแสดงข้อความ Disconnected ออกมา
2. สำหรับการกดปุ่มเพื่อขับเคลื่อน จะใช้บล็อกเหตุการณ์ TouchDown ที่จะทำงานเมื่อกด และ TouchUp ที่จะทำงานเมื่อปล่อย เช่น สั่งให้เคลื่อนที่ไปหน้าเมื่อกดปุ่ม UP แต่เมื่อปล่อยจะต้องส่งค่า 0 คือสั่งให้หยุดออกมาด้วย
3. ค่าตัวเลขที่ส่งออก มาจากแนวคิดที่จะใช้ปุ่มลูกศรบนคีย์บอร์ด ซึ่งตรงกับตำแหน่งตัวเลขตามรูป ใน Arduino จะเขียนโดยใช้เลขฐาน 16 เพื่อให้เข้าใจรูปแบบตัวเลขง่าย สำหรับ App Inventor จะใช้เป็นตัวเลขฐานสิบ ดังนั้นให้ใช้ตารางเพื่อเทียบเคียงความเข้าใจ จนเขียนโค้ดสำหรับเคลื่อนที่ 4 ทิศทางได้ดังรูป
4. สำหรับ keep และ place จะใช้การกดปุ่มแบบปกติ ได้โค้ดเป็น
สรุปโค้ดทั้งหมดก็จะเป็นดังนี้
สำหรับคนที่ต้องการตรวจสอบเปรียบเทียบโค้ด ผมได้ Public to Gallery สามารถเข้าไปเปิดและดูเปรียบเทียบได้ตามลิงก์ MIT App Inventor Gallery นี้ได้เลยครับ
ตอนนี้ยาวมาก แต่ก็หวังว่าจะช่วยเพิ่มแนวคิดการใช้ POP-X2 Rover ไปกับกิจกรรมต่างๆ ได้มากขึ้น