MakeCode Editor for Micro:bit Using Blocks vs. Python / JavaScript
บทความนี้ แนะนำการใช้งาน Microsoft MakeCode Editor (2020 beta) ในเบื้องต้น สำหรับฝึกเขียนโค้ดแบบต่อบล็อก หรือใช้ภาษา Python หรือ JavaScript เพื่อทดลองการทำงานร่วมกับบอร์ด BBC Micro:bit
Microsoft MakeCode Editor
ในปัจจุบันมีตัวเลือกหลากหลายสำหรับการฝึกเขียนโค้ด หรือ โค้ดดิ้งสำหรับเยาวชน หรือผู้ที่สนใจ ถ้าเราได้เลือกบอร์ดไมโครบิต (BBC Micro:bit) เป็นอุปกรณ์สำหรับฝึกเขียนโค้ดและเชื่อมต่อกับอุปกรณ์หรือวงจรอิเล็กทรอนิกส์ต่าง ๆ ภายนอก โดยทั่วไปผู้เริ่มต้นก็คงเลือกใช้วิธีการต่อบล็อก ตามสไลต์ของ Google Blockly (Block-based Coding) โดยใช้ Microsoft MakeCode Editor เปิดใช้งานในเบราว์เซอร์ อย่างเช่น Google Chrome
ตัวอย่างของซอฟต์แวร์ MakeCode ที่สามารถใช้แบบ Offline ได้ เช่น บริษัท Kittenฺbot.cc ได้จัดทำไว้สำหรับเวอร์ชัน Windows และ Mac OS X (เวอร์ชันล่าสุดขณะที่เขียนบทความนี้คือ v3.6.3)
ผู้ใช้สามารถทดสอบการทำงานของโค้ด โดยใช้ตัวจำลองการทำงานเสมือนจริง (Simulator) และยังไม่จำเป็นต้องทดสอบกับฮาร์ดแวร์จริง แต่ถ้าจะนำไปทดลองกับฮาร์ดแวร์ ก็จะมีการแปลงบล็อกคำสั่งโดยอัตโนมัติ ให้กลายเป็นโค้ด Static TypeScript (STS) และสุดท้ายให้ได้เป็นไฟล์ .hex สำหรับไมโครคอนโทรลเลอร์ nRF51822 (ARM Cortex-M0 32-bit) ที่เป็นตัวประมวลผลหลักของบอร์ดไมโครบิต จากนั้นก็ดาวน์โหลดไฟล์ไปยังบอร์ดดังกล่าว
MakeCode Editor เป็น Open Source HTML5 Web Application และมีเวอร์ชันให้ใช้งานได้แบบ Offline (เช่น MakeCode Offline App สำหรับระบบปฏิบัติการ Windows) แต่การใช้งานแบบออนไลน์ ก็มีข้อดี ไม่ต้องติดตั้งโปรแกรมเพิ่ม แต่คอมพิวเตอร์ของผู้ใช้ จะต้องเชื่อมต่อกับอินเทอร์เน็ตขณะใช้งาน
ในปีค.ศ. 2020 ผู้พัฒนา MakeCode ได้เปิดให้ทดลองใช้งานเวอร์ชัน 2020 Beta Release (April 28th, 2020) มีการพัฒนาต่อเนื่องจากเวอร์ชันก่อน นับตั้งแต่ปีค.ศ. 2016 ที่เริ่มใช้งาน (เช่น v0, v1, v1.1, v2, v2.1, v2.2, v2.3, v3.0) แต่ที่น่าสนใจคือ ตั้งแต่เวอร์ชัน v2.2 เราก็สามารถใช้ภาษา Python เป็นอีกหนึ่งตัวเลือก นอกเหนือจากภาษา STS (JavaScript) หรืออีกกรณีหนึ่งคือ การสร้างฟังก์ชันที่มีอาร์กิวเมนต์รับค่าได้และให้ค่ากลับคืนได้
การเรียนโค้ดดิ้งโดยใช้บอร์ด BBC Micro:bit แม้ว่า จะเริ่มต้นด้วยการต่อบล็อก แต่ในระยะถัดไป ผู้เรียนควรจะได้ลองทำความเข้าใจ และเรียนรู้การเขียนโค้ด โดยใช้ภาษา Python หรือ JavaScript แบบ Text Mode ซึ่งถือว่าเป็นพื้นฐานสำหรับการเขียนโปรแกรมขั้นสูงต่อไป
เริ่มต้นใช้งาน MakeCode Editor
เปิดเว็บเบราว์เซอร์ไปยัง https://makecode.microbit.org/beta จากนั้นจะเข้าสู่หน้าหลัก (Home) ของ MakeCode Editor ในส่วนแรกเป็น My Projects เป็นรายการของโปรเจกต์ที่ได้เคยสร้างไว้ หรือถ้าจะสร้างใหม่ ก็ให้กดปุ่ม New Project
ในหน้าเว็บเริ่มต้นของ MakeCode ถ้าลองเลื่อนลงมา จะเห็นรายการของตัวอย่างโปรเจกต์สำหรับใช้เป็น Tutorials หรือแหล่งข้อมูลศึกษาเพิ่มเติม / สื่อสำหรับเรียนรู้
ในขั้นตอนการสร้างโปรเจกต์ใหม่ จะต้องตั้งชื่อให้โปรเจกต์ (Project Name) และสามารถเลือก Code Options ว่า จะเขียนโค้ดในโหมดใด โดยทั่วไปก็ให้เลือก “Blocks, JavaScript, and Pythons” เราสามารถเปลี่ยนหรือสลับมุมมองในการเขียนโค้ดทั้งแบบ Blocks และ Text
เมื่อสร้างโปรเจกต์ใหม่แล้ว (ในตัวอย่างนี้ ได้ใช้ชื่อว่า demo-1) ก็จะเข้าสู่การทำงานของ Editor ในโหมด Blocks
กลุ่มคำสั่งใน MakeCode
เริ่มต้นจากซ้ายไปขวา ส่วนแรกเป็นรูปกราฟิกของบอร์ดไมโครบิต และมีไว้สำหรับจำลองการทำงาน บริเวณถัดมาเป็นเมนูของบล็อกคำสั่ง เรียงจากบนลงล่าง และแบ่งตามกลุ่มคำสั่ง เช่น
- Basic เป็นกลุ่มคำสั่งพื้นฐานและใช้บ่อย เช่น การหน่วงเวลาหรือหยุดการทำงานชั่วคราวตามระยะเวลาที่กำหนด การแสดงข้อความหรือรูปกราฟิกบน 5x5 LED Matrix เป็นต้น
- Input เป็นกลุ่มคำสั่งสำหรับอินพุตของบอร์ดไมโครบิต เช่น ปุ่มกด (Buttons: A & B) ไอซีวัดความเร่งแบบสามแกน (Accelerometer) และไอซีที่ใช้เป็นเข็มทิศดิจิทัล (Digital Compass) เป็นต้น
- Music เป็นกลุ่มคำสั่งสร้างเสียงตามโน้ตดนตรี (Tones) เมื่อใช้ร่วมกับโมดูลเปียโซ-บัซเซอร์ (Piezo-Buzzer) เพื่อแปลงสัญญาณไฟฟ้าให้เป็นสัญญาณเสียง เป็นต้น
- Led เป็นกลุ่มคำสั่งสำหรับแสดงผลบนสกรีน 5x5 LED Matrix เช่น การกำหนดความสว่างของพิกเซลในตำแหน่ง (x,y) เป็นต้น
- Radio เป็นกลุ่มคำสั่งสำหรับการสื่อสารข้อมูลไร้สายด้วย Bluetooth (2.4 GHz) เช่น การสื่อสารกันระหว่างบอร์ดไมโครบิต เป็นต้น
- Loops เป็นกลุ่มคำสั่งสำหรับการทำงานซ้ำ หรือ การวนลูป เป็นต้น
- Logic เป็นกลุ่มคำสั่งเกี่ยวกับตัวดำเนินการหรือ โอเปอร์เรเตอร ์(Operators) แบบบูลีน (Boolean)
- Variables เป็นกลุ่มคำสั่งสำหรับประกาศใช้ตัวแปร กำหนดค่าให้ตัวแปร เป็นต้น
- Math เป็นกลุ่มคำสั่งสำหรับตัวดำเนินการทางคณิต เช่น การบวก ลบ คูณ หาร เป็นต้น
- Advanced ประกอบด้วยกลุ่มคำสั่งอื่น เช่น การสร้างและใช้งานฟังก์ชัน (Functions) การใช้คำสั่งสำหรับอาร์เรย์ (Arrays) การใช้คำสั่งสำหรับขา I/O (Pins) การเพิ่ม Extension สำหรับไลบรารีอื่น ๆ เป็นต้น
ถัดไปเป็นบริเวณสำหรับการต่อบล็อก โดยเริ่มต้น จะเห็นว่า มีบล็อกคำสั่ง “on start” และ “forever” ภายในบล็อกทั้งสอง เราสามารถเลือกบล็อกคำสั่งมาใส่หรือต่อเข้าด้วยกัน เป็นส่วนหนึ่งของโปรแกรมหรือโค้ดที่ต้องการ
ให้ลองเลือกดูไปทีละกลุ่มของบล็อกคำสั่ง เราจะเห็นบล็อกคำสั่งในแต่ละกลุ่ม เช่น Basic, Input, Pins, Led เป็นต้น
ตัวอย่างแรก: ต่อบล็อกให้แสดงรูปหัวใจกระพริบ
ลองมาสร้างโค้ดด้วยวิธีการต่อบล็อก ให้แสดงรูปกราฟิก หรือ ไอคอน (Icon) เป็นรูปสัญลักษณ์หัวใจ (Heart) แสดงผลบนสกรีน LED Matrix ขนาด 5x5 พิกเซล จากนั้นให้ลบออก (Clear Screen) เว้นช่วงเวลาประมาณ 500 มิลลิวินาที แล้วทำซ้ำในรอบใหม่ไปเรื่อย ๆ
ในตัวอย่างนี้จะเห็นได้ว่า บล็อกคำสั่ง “on start” ไม่บล็อกคำสั่งใด ๆ อยู่ภายใน (แต่ถ้ามี ก็จะเป็นการทำตามบล็อกคำสั่งไปตามลำดับ เมื่อโปรแกรมเริ่มทำงาน และทำเพียงรอบเดียว)
ถัดไปเป็นบล็อกคำสั่ง “forever ” สำหรับการทำบล็อกคำสั่งต่าง ๆ ที่อยู่ภายในไปตามลำดับ และทำซ้ำอีกไม่จบการทำงาน ภายในมีบล็อกคำสั่งดังนี้
- แสดงรูปไอคอน ให้เป็นรูปหัวใจ
- หยุดการทำงานชั่วคราว 500 มิลลิวินาที
- เคลียร์จอแสดงผลหรือสกรีน
- หยุดการทำงานชั่วคราว 500 มิลลิวินาที
ทั้ง 4 คำสั่งนี้ จะถูกทำไปตามลำดับ เมื่อครบแล้วให้เริ่มทำใหม่
ถ้าโค้ดของเราถูกต้อง MakeCode Editor จะเริ่มสาธิตการทำงานของโค้ดโดยการจำลองการทำงาน และให้สังเกตการเปลี่ยนแปลงที่รูปบอร์ดไมโครบิตในส่วนของ Simulator
การเปลี่ยนมุมมองจาก Blocks เป็น Python / JavaScript
คราวนี้ลองมาดูว่า MakeCode แปลงจากบล็อกคำสั่งเหล่านี้ ไปสู่โค้ดในภาษา JavaScript และ Python เป็นอย่างไร ลองเปรียบเทียบความเหมือนและความแตกต่างระหว่างสองภาษา และความเชื่อมโยงกับบล็อกคำสั่ง ในแต่ละคำสั่งของ MakeCode
การเพิ่มโค้ดคำสั่งใน Python แล้วแปลงเป็นบล็อก
ถัดไปลองมาดูว่า ถ้าเราลองเขียนเพิ่มประโยคคำสั่ง เช่น ในโหมดภาษา Python แล้ว MakeCode Editor จะแปลงให้เป็นโค้ดในโหมดบล็อกคำสั่งได้หรือไม่
ตัวอย่างนี้ ลองใส่คำสั่งเพิ่มแทรกไว้สองคำสั่งได้แก่
basic.show_icon(IconNames.HAPPY)basic.pause(500)
จากนั้นลองเปลี่ยนกลับเป็นโหมด Blocks แล้วจะเห็นว่า มีบล็อกคำสั่งเพิ่มเข้ามา และเป็นไปตามที่คาดหวังไว้
ในเบื้องต้น ก็พอจะกล่าวได้ว่า ถ้าเราเขียนโค้ดโหมดภาษา Python หรือ JavaScript เราสามารถใช้ MakeCode Editor แปลงให้เป็นบล็อกคำสั่ง หรือได้ทั้งสองทิศทาง
การดาวน์โหลดโค้ดไปยังบอร์ดไมโครบิต
เมื่อได้เขียนโค้ดหรือต่อบล็อกได้แล้ว และตรวจสอบการทำงานโค้ดใช้ Simulator ของ MakeCode Editor ได้แล้ว ถัดไป ก็เป็นขั้นตอนการดาวน์โหลด (Download) เพื่อนำไฟล์ที่ได้จากการแปลงโค้ด ไปทดสอบการทำงานกับบอร์ดไมโครบิต
ขั้นตอนนี้สามารถทำได้ง่าย เมื่อเราเสียบสาย USB เชื่อมต่อบอร์ดไมโครบิตเข้ากับเครื่องคอมพิวเตอร์ของผู้ใช้ เราสามารถทำการจับคู่กับอุปกรณ์ (Pair Device) และเชื่อมต่อ (Connect) ระหว่าง MakeCode Editor ในเว็บเบราว์เซอร์กับบอร์ดไมโครบิตได้ โดยใช้รูปแบบการสื่อสารที่เรียกว่า WebUSB
เมื่อทำขั้นตอนจับคู่อุปกรณ์ได้สำเร็จแล้ว ถัดไปเราก็สามารถดาวน์โหลดโปรแกรมไปยังบอร์ดไมโครบิตเป็นขั้นตอนสุดท้าย
การเพิ่ม Extension สำหรับ Neopixel
เราลองมาดูตัวอย่างการเพิ่ม Extension ใน MakeCode Editor โดยเลือกโมดูล Adafruit Neopixel มาเป็นตัวอย่าง ซึ่งจะทำให้เราสามารถใช้คำสั่งที่เกี่ยวข้องกับการควบคุมการทำงานของหลอดหรือแถบสี RGB LED (WS2812B) ได้
เมื่อกดเลือกเมนู Advanced > Extensions จะเข้าสู่หน้า MakeCode Extensions จากนั้นให้คลิกเลือก “neopixel” แล้วกลับเข้าสู่หน้าหลักของ MakeCode Editor เราจะเห็นมีกลุ่มคำสั่งชื่อ Neopixel ถูกใส่เพิ่มเข้ามาในรายการ
ลองมาดูตัวอย่างการใช้บล็อกคำสั่ง เช่น ทำให้ Neopixel ที่มี 8 ดวง แสดงสีแดง น้ำเงิน และเขียว (เหมือนกันทุกดวง) ไปตามลำดับ แล้ววนซ้ำไปเรื่อย ๆ
ข้อสังเกต: เราสามารถจำลองการทำงานของบอร์ดไมโครบิตร่วมกับโมดูล Neopixel ตามที่เราได้เขียนโค้ด
การเพิ่ม Extension สำหรับ R/C Servo
อีกตัวอย่างหนึ่งสำหรับการเพิ่ม Extension ใน MakeCode Editor เป็นการใช้งาน R/C Servo เช่น เซอร์โวมอเตอร์ขนาดเล็ก โดยใช้วิธีการสร้างสัญญาณแบบ PWM (Pulse Width Modulation) ความถี่ 50 Hz เป็นสัญญาณควบคุม
ตัวอย่างการต่อบล็อกเพื่อสาธิตการใช้คำสั่งสำหรับ Servo ต่อไปนี้ จะทำให้เซอร์โวมอเตอร์ หมุนจากมุม 0 องศา แล้วเพิ่มขึ้นไปจนถึง 180 องศา แล้วทำซ้ำ
โดยสรุป เราได้เห็นการใช้งาน Microsoft MakeCode Editor แบบออนไลน์สำหรับนำมาฝึกเขียนโค้ดร่วมกับบอร์ดไมโครบิต อาจเริ่มต้นด้วยการต่อบล็อก เรียนรู้คำสั่งต่าง ๆ จากนั้นอาจเปลี่ยนไปลองเขียนโค้ดโดยใช้ภาษา Python (หรืออาจจะเป็น JavaScript) ตามความเหมาะสม นอกจากนั้นเรายังได้เห็นความสามารถในการจำลองการทำงานของโค้ดใน MakeCode Editor โดยยังไม่ต้องใช้ฮาร์ดแวร์จริง
