กิจกรรมไมโครบิตที่ 2

กิจกรรมที่ 2 30 นาที แนะน�ำเครอ่ื งมือ จดุ ประสงคก์ ารเรียนร้:ู เพอื่ ทำ� ความคนุ้ เคยกับเครอ่ื งมือในการเขียนโปรแกรมที่ชื่อว่า MakeCode การเขียนโปรแกรมจ�ำเป็นต้องใช้เคร่ืองมือที่ช่วยให้เราท�ำงานต่าง ๆ เกี่ยวกับการเขียนโปรแกรม ได้ง่ายขน้ึ โปรแกรมที่รวบรวมเครื่องมือต่าง ๆ ท่ีช่วยให้เราเขียนโปรแกรมได้สะดวกข้ึน เรียกว่า IDE (Integrated Development Environment) โดยกจิ กรรมนเี้ รามาทำ� ความรจู้ กั กบั เครอื่ งมอื ท ี่ จะชว่ ยให้เราพฒั นาโปรแกรมทใ่ี ช้สำ� หรบั ไมโครบติ กนั เราเรียกเครอ่ื งมือนวี้ า่ เมกโค้ด (MakeCode) กจิ กรรมท่ี 2.1 เตรยี มคอมพิวเตอร์ เตรยี มคอมพวิ เตอร์และต่ออนิ เทอรเ์ น็ตให้เรยี บรอ้ ย แล้วมาเริ่มกนั เลย 1 ใชเ้ ว็บเบราว์เซอรท์ ถี่ นัด เข้าเวบ็ ไซต์ https://microbit.org 2 คลิกท่ปี ่มุ ทเี่ มนูด้านบน หนา้ นจี้ ะแนะน�ำเครื่องมือตา่ ง ๆ ในการเขียนโปรแกรมส�ำหรบั ไมโครบิต จะเหน็ ว่ามีเครื่องมอื สำ� หรับช่วยเราเขียนโปรแกรมได้ 2 โปรแกรม คือ MakeCode Editor และ Python Editor microbit: in Action -11-

MakeCode สามารถช่วยเราเขียนโปรแกรมได้ทั้งจากแบบ Visual Programming และแบบ Text Programming โดยใช้ภาษา JavaScript ส่วน Python Editor เป็น Text Programming อยา่ งเดยี ว โดยใชภ้ าษา Python ในกจิ กรรมนี้ เราจะเรียนร้กู ารใชง้ าน MakeCode อยา่ งเดยี วก่อน 3. คลิกท่ปี มุ่ ในสว่ นของ MakeCode Editor เราสามารถกด bookmark URL https://makecode.microbit.org/ หนา้ นเี้ อาไว้ เพอื่ ทก่ี ารใชง้ านครง้ั ถดั ๆ ไป จะสามารถเข้าถงึ โปรแกรมไดอ้ ยา่ ง รวดเรว็ และถา้ หากอนิ เทอรเ์ นต็ ใช้งาน ไม่ได้ เรากจ็ ะยงั สามารถใชง้ าน MakeCode ในคอมพิวเตอร์ของเรา ต่อไปได้อกี ด้วย microbit: in Action -12-

กจิ กรรมท่ี 2.2 MakeCode ถึงแม้รูปในหนา้ จอ MakeCode จะเปล่ียนแปลงไป แต่สว่ นหลกั ๆ จะยงั คงอยู่ เรามาทำ� ความร้จู ัก ส่วนประกอบหลกั ของหน้าจอนี้กนั ดกี วา่ 1 ปมุ่ ส�ำหรบั สร้างโปรเจ็กตใ์ หม่ ในกรณที ี่ใชง้ านครง้ั แรก My Projects จะยงั ไมแ่ สดงโปรแกรมใด ๆ ทางดา้ น ขวามอื แตเ่ มอื่ เราใชง้ านไปเร่ือย ๆ โปรเจก็ ตท์ เี่ ราสรา้ ง หรือตวั อยา่ งทเี่ รา เรียกดู จะถกู บนั ทกึ เกบ็ ไว้ในเคร่ืองของ เราอตั โนมตั ิ โปรเจก็ ตต์ า่ ง ๆ จะถกู เกบ็ ไว้ใน เบราวเ์ ซอร์ แคช หรือ Temporary Files ซงึ่ จะหายไปถา้ เรา ทำ� การลบ Temporary Files ตา่ ง ๆ microbit: in Action -13-

2 ตัวอยา่ งโปรเจ็กต์ทม่ี มี ากมาย 3 ปุ่มสำ� หรับสร้างโปรเจ็กต์จากโคด้ ท่นี ำ� มาจากแหล่งอื่น ๆ ส�ำหรบั โรงเรียนที่ไม่สามารถ ต่ออนิ เทอร์เนต็ ไดอ้ ย่างสะดวก 4 กดท่ีปุ่ม New Project เพอ่ื เรมิ่ ตน้ สร้างโปรแกรมของเรา สามารถใชโ้ ปรแกรมแบบ Offline ได้ นกั เรียนควรปรกึ ษาคณุ ครถู า้ ตอ้ งการ ใช้โปรแกรม โดยหน้าตาของสว่ นการพฒั นาโปรแกรมประกอบไปดว้ ยส่วนหลกั ๆ ดังน้ี B A C A สว่ นที่เปน็ พน้ื ทใ่ี หญท่ ีส่ ุดทางด้านขวามอื ใช้สำ� หรับการวางคำ� สั่งตา่ ง ๆ ท่เี ราต้องการ ส่วนนีเ้ รยี กวา่ พ้ืนทที่ ำ� งาน (workspace) B สว่ นตรงกลางคอื กลอ่ งเครอื่ งมอื ใชส้ ำ� หรบั เกบ็ คำ� สง่ั ทเ่ี ราสามารถนำ� มาใชง้ านในการเขยี นโปรแกรมได้ คำ� สั่งถูกจดั เกบ็ ลงในกล่องเครื่องมอื แตล่ ะหมวด อยา่ งมรี ะเบียบ และเราสามารถแยกแยะหมวดหมู่ ของคำ� สง่ั ตา่ ง ๆ ได้จากสีของคำ� สั่ง microbit: in Action -14-

C รูปไมโครบิตจำ� ลองทางดา้ นซา้ ย สามารถทำ� งานเลียนแบบการทำ� งาน จริง ๆ ของไมโครบติ ได้ เราสามารถทดลองเขียนโปรแกรมแล้วดูจาก ไมโครบิตจำ� ลองนกี้ ่อนว่าทำ� งานได้ตรงตามสง่ิ ท่เี ราตง้ั ใจเขยี นหรอื ไม่ โดยเราจะเรียกไมโครบติ จ�ำลองน้ีวา่ ตัวอมี ูเลเตอร์ (Emulator) หรือ อาจจะเรียกวา่ ตัวซมิ เู ลเตอร์ (Simulator) กไ็ ด้ เราจะเรียนรแู้ ค่ 3 สว่ น หลกั ๆ เท่านกี้ อ่ น สว่ นอน่ื ๆ เราจะมี โอกาสไดเ้ รียนรู้ในกจิ กรรม ถัด ๆ ไป กจิ กรรมท่ี 2.3 การเขยี นโปรแกรม การเขยี นโปรแกรมคือการสั่งคำ� สงั่ ใหไ้ มโครบติ ทำ� งานตามส่งิ ท่ีเราออกแบบเอาไว้ เราสามารถ ส่ังให้ไมโครบิตทำ� งานได้อยา่ งงา่ ยดาย เพยี งแค่ลากคำ� ส่งั มาวางตอ่ ๆ กนั ในพ้ืนทีท่ �ำงาน (workspace) 1 ใชเ้ มาสค์ ลิกทีก่ ล่องเครื่องมอื 2 ลองเลอื กคำ� ส่ังที่เราตอ้ งการใชง้ าน ลากออก เราจะเหน็ คำ� ส่ังตา่ ง ๆ ที่อย่ใู นหมวดหมนู่ ้ี มาวางในพ้ืนทีท่ ำ� งาน แสดงออกมา เราจะสังเกตว่ามีกล่องค�ำสั่งที่มีก่อนหน้านี้ อย่แู ลว้ 2 กล่อง สว่ นคำ� สงั่ ทเ่ี ราลากออกมา วางนัน้ มสี ีสนั ไม่สะดุดตาเทา่ ไรนกั การทีค่ �ำสั่งทเี่ ราลากออกมาวาง มีสีลกั ษณะน้ี เพราะโปรแกรม MakeCode กำ� ลงั จะบอกเราวา่ คำ� สงั่ ทเ่ี ราวางตรงน้ีไมเ่ หมาะสม ซง่ึ ไมโครบติ จะไมท่ ำ� งานตามคำ� สงั่ microbit: in Action -15-

3 ทดลองลากคำ� สั่งทเี่ ราเพ่ิงนำ� มาวางในพื้นท่ี 5 หากต้องการเพิ่มเลข 8 มาตอ่ ท้ายอีก ทำ� งานเมอ่ื สกั คร่นู ้ี ไปวางไว้ในกลอ่ งแรกท่มี ี จะต้องท�ำอย่างไร ช่อื ว่า on start กอ่ นวางเราจะสังเกตเหน็ วา่ มี เสน้ สีเหลืองแสดงถึงสว่ นท่สี ามารถนำ� มาต่อ กันได้เพือ่ ใหเ้ ราเข้าใจวา่ สามารถวางตรงนี้ได้ แล้วเรากส็ ามารถปล่อยเมาสไ์ ดเ้ ลย บันทึกการท�ำงานของอีมูเลเตอร์หลังจาก เพิ่มเลข 8 สังเกตว่าคำ� ส่งั เปล่ยี นเป็นสีสันสดใสทันที หากมองไม่ทนั เราสามารถกดปุ่ม reset และอีมเู ลเตอร์ (รูปไมโครบิตด้านซา้ ยมอื ) เพ่อื ให้อมี ูเลเตอรเ์ ร่ิมต้นการทำ� งานใหม่ได้ จะแสดงเลข 0 ออกมา ยินดีดว้ ย ตอนนเ้ี ราสามารถเขยี น 6 หากเราไม่ต้องการใชค้ ำ� ส่ังใดแล้ว สามารถ โปรแกรมเองได้แล้ว ลากกลับไปคืนได้ เราเปน็ โปรแกรมเมอรม์ อื ใหมแ่ ลว้ นะ 4 ลองลากคำ� สง่ั มาอกี หนง่ึ อนั โดยคราวนเ้ี รา ไมอ่ ยากแสดงเลข 0 แลว้ แตอ่ ยากใหแ้ สดง เลข 5 แทน เราลองเอาคำ� สงั่ จากกลอ่ งเครอื่ งมอื อนั ใหมม่ าเพมิ่ อกี หนงึ่ อนั แลว้ แกต้ วั เลขเปน็ เลข 5 แลว้ นำ� เอามาตอ่ ทา้ ยคำ� สงั่ เมอื่ สกั ครนู่ ด้ี ู ลองสังเกตการทำ� งานของอมี เู ลเตอร์และ MakeCode จะรบั รวู้ า่ เราไมต่ อ้ งการคำ� สง่ั นแ้ี ลว้ บนั ทกึ ตวั เลขทแ่ี สดงผล โดยการแสดงรปู ถงั ขยะมารองรบั เพอ่ื บอกใหร้ วู้ า่ คำ� สง่ั นก้ี ำ� ลงั จะถกู ทง้ิ ทดลองเอาเลข 8 ทง้ิ แลว้ ทดลองนำ� กลบั เขา้ มาใหมอ่ กี ทเี พอื่ ฝกึ ฝมี อื microbit: in Action -16-

7 ท ดลองยา้ ยบลอ็ กคำ� สงั่ ทั้งหมดจาก on start 8 ทดลองยา้ ยคำ� สง่ั show number 5 ออกจาก ไปที่ forever โดยการทดลองใชเ้ มาสล์ ากที่ forever แลว้ นำ� ไปวางไว้ on start show number 0 หรอื ลากท่ี show number 5 หรอื ลากท่ี show number 8 นักเรียนจะตอ้ งทำ� อยา่ งไรบา้ ง บล็อกค�ำสัง่ ท่อี ยู่ตดิ กนั การลากบลอ็ ก เพราะเหตุใดจงึ เป็นเชน่ นน้ั ค�ำสั่งอันแรกจะทำ� ให้บลอ็ กทัง้ หมดท่ีอยู่ ตดิ ตามไปดว้ ย บันทกึ ความแตกตา่ งจากการลากบล็อกคำ� ส่งั จากต�ำแหน่งท่ีแตกต่างกนั บนั ทึกการแสดงผลจากอีมเู ลเตอร์ เมอื่ ยา้ ยคำ� สง่ั ทงั้ หมดไปไวท้ ี่ forever แลว้ ให้ สรุปส่ิงที่ได้เรยี นรู้ เราสงั เกตสงิ่ ทเ่ี กดิ ขน้ึ กบั อมี เู ลเตอร์ วา่ แตกตา่ ง จากขอ้ 5 หรอื ไม่ อยา่ งไร microbit: in Action -17-