AW_NECTEC_KidBright_Book_Primary_4

ศูนยเ์ ทคโนโลยีอิเลก็ ทรอนิกสแ์ ละคอมพิวเตอรแ์ ห่งชาติ
ส�ำนักงานพฒั นาวทิ ยาศาสตร์และเทคโนโลยแี ห่งชาติ
สถาบันส่งเสริมการสอนวิทยาศาสตร์และเทคโนโลยี

สงวนลิขสิทธิ์ ตาม พ.ร.บ. ลิขสิทธิ์ (ฉบับเพิ่มเติม) พ.ศ. 2558 ไม่อนุญาตให้คัดลอก ท�ำซ�้ำ และดัดแปลง ส่วนหนึ่งส่วนใด
ของหนงั สอื ฉบบั น้ี นอกจากจะได้รบั อนุญาตเป็นลายลักษณ์อักษรจากเจ้าของลขิ สทิ ธิ์เท่าน้ัน

แนวทางจัดการเรียนรู้ เทคโนโลยี (วิทยาการค�ำนวณ): Coding with KidBright ชั้นประถมศึกษาปีท่ี 4/ โดย
ศูนย์เทคโนโลยีอิเล็กทรอนิกส์และคอมพิวเตอรแ์ ห่งชาติ สำ� นกั งานพฒั นาวทิ ยาศาสตรแ์ ละเทคโนโลยแี หง่ ชาติ และ
สถาบันสง่ เสรมิ การสอนวทิ ยาศาสตรแ์ ละเทคโนโลย.ี พมิ พค์ รง้ั ท่ี 1. -- ปทุมธานี : ส�ำนกั งานพัฒนาวิทยาศาสตร์และ
เทคโนโลยีแหง่ ชาติ, 2562.
96 หนา้ : ภาพประกอบสี

1. คอมพวิ เตอร์ 2. การสอื่ สารด้วยระบบดจิ ิทลั 3. ระบบสื่อสารขอ้ มลู 4. การสื่อสารข้อมูล 5. การส่อื สารแบบสอื่
ประสม 6. โปรโตคอลเครอื ขา่ ยคอมพวิ เตอร์ 7. คอมพวิ เตอรอ์ ลั กอรทิ มึ I. สำ� นกั งานพฒั นาวทิ ยาศาสตรแ์ ละเทคโนโลยี
แห่งชาติ II. ศูนย์เทคโนโลยีอิเล็กทรอนิกส์และคอมพิวเตอร์แห่งชาติ III. ห้องปฏิบัติการวิจัยสมองกลฝังตัว IV.
หอ้ งปฏิบตั กิ ารวจิ ัยการประมวลผลสญั ญาณชีวการแพทย์ V. สถาบันสง่ เสรมิ การสอนวทิ ยาศาสตรแ์ ละเทคโนโลยี VI.
ชื่อเรือ่ ง
TK5105 004.6

จดั ท�ำโดย

ศนู ยเ์ ทคโนโลยีอเิ ลก็ ทรอนกิ สแ์ ละคอมพิวเตอร์แห่งชาติ ส�ำนักงานพัฒนาวิทยาศาสตร์และเทคโนโลยีแห่งชาติ
112 อุทยานวิทยาศาสตร์ประเทศไทย ถนนพหลโยธิน ตำ� บลคลองหนง่ึ อำ� เภอคลองหลวง จงั หวดั ปทมุ ธานี 12120
โทร 0-2564-6900 โทรสาร 0-2564-6901-3 อเี มล [email protected] เว็บไซต์ http://www.nectec.or.th
สถาบนั ส่งเสริมการสอนวทิ ยาศาสตรแ์ ละเทคโนโลยี เวบ็ ไซต์ http://www.ipst.ac.th

ค�ำนำ�

ปัจจุบันทั่วโลกให้ความส�ำคัญกับการเรียนเขียนโปรแกรมคอมพิวเตอร์ในโรงเรียน เน่ืองจากการเรียนดังกล่าวช่วยให้เกิด
การกระตุ้นกระบวนการคิด เช่น การคิดเชิงค�ำนวณ การคิดวิเคราะห์ แก้ปัญหาเป็นข้ันตอนและเป็นระบบ ซึ่งเป็นทักษะ
สำ� คญั ของเยาวชนในศตวรรษท่ี 21 อกี ทงั้ กระทรวงศกึ ษาธกิ ารได้ประกาศใช้หลักสตู รวิชาวิทยาการคำ� นวณ โดยจัดให้อยใู่ น
สาระเทคโนโลยี กลมุ่ สาระการเรยี นรวู้ ิทยาศาสตรแ์ ละเทคโนโลยี ตามหลกั สูตรแกนกลางการศกึ ษาขั้นพน้ื ฐานพทุ ธศักราช
2551 (ฉบบั ปรับปรงุ พ.ศ. 2560)
จากความส�ำคัญดังกล่าวข้างต้น ศูนย์เทคโนโลยีอิเล็กทรอนิกส์และคอมพิวเตอร์แห่งชาติ (เนคเทค) ส�ำนักงานพัฒนา
วิทยาศาสตร์และเทคโนโลยแี หง่ ชาติ (สวทช.) จึงได้พัฒนาบอร์ด KidBright ซงึ่ เป็นบอรด์ สมองกลฝังตวั ทต่ี ิดตงั้ จอแสดงผล
และเซนเซอร์แบบง่าย เพ่ือเป็นเครื่องมือในการเรียนเขียนโปรแกรมแบบบล็อกอย่างง่ายส�ำหรับนักเรียนระดับประถมและ
มัธยมศึกษา ทำ� ใหก้ ารเขยี นโปรแกรมมีความสนกุ สนานและกระตนุ้ การพฒั นากระบวนการคดิ
ส�ำหรับคมู่ อื แนวทางจัดการเรียนรู้ เทคโนโลยี (วิทยาการคำ� นวณ): Coding with KidBright เล่มน้ี ไดร้ บั ความร่วมมือจาก
ผู้ทรงคณุ วุฒิ สถาบนั สง่ เสรมิ การสอนวิทยาศาสตรแ์ ละเทคโนโลยี (สสวท.) กระทรวงศึกษาธกิ าร ร่วมจดั ท�ำคู่มอื การเขยี น
โปรแกรมแบบบลอ็ กด้วยบอร์ด KidBright เพ่อื ใช้เปน็ หนังสือประกอบการเรยี นรายวชิ าพื้นฐานวิทยาศาสตร์และเทคโนโลยี
(วทิ ยาการคำ� นวณ)
เนคเทค สวทช. หวงั เปน็ อยา่ งยง่ิ วา่ คมู่ อื เลม่ นจ้ี ะเปน็ ประโยชนต์ อ่ การจดั การเรยี นรู้ และเปน็ สว่ นสาํ คญั ในการพฒั นาคณุ ภาพ
และมาตรฐานการศึกษา กลุ่มสาระการเรียนรู้วิทยาศาสตร์และเทคโนโลยี ผู้ทรงคุณวุฒิ บุคลากรทางการศึกษาและ
หนว่ ยงานต่าง ๆ ทมี่ สี ่วนเก่ยี วขอ้ งในการจัดทาํ ไว้ ณ โอกาสน้ี

ดร.ชัย วฒุ ิวิวฒั น์ชยั

ผ้อู �ำนวยการ
ศูนย์เทคโนโลยอี เิ ล็กทรอนิกส์และคอมพวิ เตอรแ์ ห่งชาติ (เนคเทค)

ค�ำช้ีแจง

สถาบนั สง่ เสรมิ การสอนวทิ ยาศาสตรแ์ ละเทคโนโลยี (สสวท.) กระทรวงศกึ ษาธกิ าร ไดพ้ ฒั นาหลกั สูตรวชิ าคอมพวิ เตอร์ และ
มีการปรับปรุงหลักสูตรมาอย่างต่อเน่ือง จนกระท่ังมีการประกาศใช้หลักสูตรแกนกลางการศึกษาขั้นพื้นฐาน พุทธศักราช
2551 จึงได้เปลยี่ นชือ่ วชิ าเป็น เทคโนโลยีสารสนเทศและการสือ่ สาร โดยจัดใหอ้ ยูใ่ นกลุม่ สาระการเรยี นรกู้ ารงานอาชพี และ
เทคโนโลยี ตอ่ มาในปพี ทุ ธศักราช 2551 (ฉบบั ปรับปรงุ พ.ศ. 2560) ไดม้ ีการเปลีย่ นช่ือวิชาอีกครงั้ เปน็ วทิ ยาการค�ำนวณ อยู่
ในสาระเทคโนโลยี กลุ่มสาระการเรยี นรู้วทิ ยาศาสตร์และเทคโนโลยี โดยมเี ปา้ หมายหลักเพอื่ พัฒนาผู้เรยี นใหม้ คี วามรู้และมี
ทกั ษะตา่ ง ๆ ทคี่ รอบคลมุ การคิดเชิงคำ� นวณ การคิดวิเคราะห์ การแกป้ ญั หาเป็นข้ันตอนและเป็นระบบ รวมท้ังการประยุกต์
ใช้ความรู้ด้านวิทยาการคอมพิวเตอร์ เทคโนโลยีสารสนเทศและการส่ือสาร ในการแก้ปัญหาที่พบในชีวิตจริงได้อย่างมี
ประสทิ ธิภาพ
แนวทางการจดั การเรียนรู้ เทคโนโลยี (วิทยาการค�ำนวณ): Coding with KidBright ชน้ั ประถมศกึ ษาปที ่ี 4 เลม่ น้ี สามารถ
น�ำไปใช้ในการจัดการเรียนรู้เพื่อให้นักเรียนบรรลุตัวชี้วัดท่ีเก่ียวข้องกับการเขียนโปรแกรม ตามสาระการเรียนรู้ที่ 4.2
เทคโนโลยี (วทิ ยาการคำ� นวณ) กลมุ่ สาระการเรยี นรวู้ ทิ ยาศาสตรแ์ ละเทคโนโลยี โดยสถานศกึ ษาสามารถนำ� ไปประยกุ ตใ์ ชใ้ น
การจดั การเรยี นรไู้ ดต้ ามความเหมาะสม เนอ้ื หาในเลม่ นป้ี ระกอบดว้ ยจดุ ประสงคก์ ารเรยี นรู้ ตวั ชว้ี ดั สาระการเรยี นรู้ แนวคดิ
ตวั อยา่ งสอ่ื และอปุ กรณ์ ขน้ั ตอนด�ำเนนิ กิจกรรม การวดั และประเมนิ ผล สอื่ และแหลง่ เรยี นรู้ และข้อเสนอแนะ ซงึ่ ควรน�ำไป
จดั การเรยี นรรู้ ว่ มกบั คมู่ อื ครรู ายวชิ าพน้ื ฐานวทิ ยาศาสตร์ เทคโนโลยี (วทิ ยาการคำ� นวณ) ทพ่ี ฒั นาโดย สสวท. โดยปรบั เปลยี่ น
กิจกรรมการเรยี นรู้เกี่ยวกับการเขียนโปรแกรม ในคมู่ ือครขู องสสวท. เป็นการจัดกจิ กรรมการเรยี นรูต้ ามแนวทางการจัดการ
เรียนรู้การเขียนโปรแกรมแบบบล็อกด้วยโปรแกรม KidBright IDE ซึ่งจะท�ำให้สามารถจัดการเรียนรู้ได้อย่างสมบูรณ์และ
สอดคล้องตามทห่ี ลกั สตู รกำ� หนด
สสวท. และ สวทช. ขอขอบคณุ คณาจารย์ ผทู้ รงคุณวฒุ ิ นักวชิ าการ และครผู สู้ อน จากสถาบันตา่ ง ๆ ท่ีให้ความร่วมมือใน
การพัฒนาและหวังเป็นอย่างย่ิงว่า เอกสารเล่มนี้จะเป็นประโยชน์ต่อเยาวชนและผู้เก่ียวข้องกับการจัดการเรียนรู้รายวิชา
เทคโนโลยี (วทิ ยาการค�ำนวณ) ในการจดั การเรียนรูไ้ ด้อยา่ งสมบรู ณ์ตามเปา้ หมายของหลักสูตรต่อไป

สาขาเทคโนโลยี

สถาบนั ส่งเสรมิ การสอนวทิ ยาศาสตรแ์ ละเทคโนโลยี
กระทรวงศกึ ษาธิการ

คำ� แนะน�ำการใช้เอกสาร

เอกสารฉบับน้ีจัดท�ำข้ึนเพ่ือส่งเสริมการเรียนรู้ด้านการเขียนโปรแกรม โดยใช้บอร์ด KidBright เป็นเครื่องมือ สถานศึกษา
สามารถน�ำไปใช้ในการจัดการเรียนรู้เพ่ือให้นักเรียนบรรลุตัวช้ีวัดสาระเทคโนโลยี (วิทยาการค�ำนวณ) กลุ่มสาระการเรียนรู้
วทิ ยาศาสตรแ์ ละเทคโนโลยี หลกั สตู รแกนกลางการศกึ ษาขนั้ พนื้ ฐาน พทุ ธศกั ราช 2551 (ฉบบั ปรบั ปรงุ พ.ศ. 2560) ชน้ั ป.4
ขอ้ ท่ี 2 ออกแบบและเขยี นโปรแกรมอยา่ งงา่ ยโดยใชซ้ อฟตแ์ วรห์ รอื สอ่ื ตรวจหาขอ้ ผดิ พลาดและแกไ้ ข โดยใชเ้ วลารวมทงั้ หมด
8 ชว่ั โมงดังน้ี

กจิ กรรมทอี่ อกแบบไวน้ สี้ ามารถบรู ณาการกบั ตวั ชว้ี ดั อน่ื ทงั้ ในกลมุ่ สาระเดยี วกนั หรอื นอกกลมุ่ สาระ รวมทง้ั อาจตอ้ งจดั เตรยี ม
อนิ เทอรเ์ นต็ สำ� หรบั การเขา้ ถงึ แหลง่ เรยี นรทู้ ไี่ ดแ้ นะนำ� ไวใ้ นเอกสารเพอื่ สง่ เสรมิ และเพม่ิ ประสทิ ธภิ าพในการเรยี นรขู้ องนกั เรยี น
และเอกสารฉบบั นไ้ี ดใ้ ชเ้ มนแู ละบลอ็ กคำ� สงั่ ตา่ ง ๆ เปน็ ภาษาองั กฤษเพอ่ื สง่ เสรมิ ใหน้ กั เรยี นคนุ้ เคยกบั การใชภ้ าษาองั กฤษซง่ึ
จะเปน็ ประโยชนใ์ นการใชโ้ ปรแกรมหรอื แอปพลเิ คชนั อน่ื ๆ อกี ทง้ั ยงั เปน็ ทกั ษะทส่ี ำ� คญั ตอ่ การเรยี นรู้ ทง้ั นห้ี ากไมท่ ราบความ
หมายของคำ� ศพั ท์อาจคลิกเปลยี่ นภาษาเพอ่ื ดูความหมายได้





กจิ กรรมที่ 1
รู้จกั KidBright

จุดประสงคก์ ารเรยี นรู้

1. ใช้งานบอร์ด KidBright เบื้องต้น
2. รู้จักการสร้างชุดค�ำสั่งผ่านโปรแกรม KidBright IDE
3. เช่ือมต่อบอร์ด KidBright กับเครื่องคอมพิวเตอร์

ตัวชีว้ ดั

ว.4.2 ป.4/2 ออกแบบและเขียนโปรแกรมอย่างง่าย
โดยใช้ซอฟต์แวร์หรือส่ือ ตรวจหาข้อผิดพลาดและแก้ไข



กจิ กรรมท่ี 1

สาระการเรยี นรู้

1. สว่ นประกอบของบอร์ด KidBright
2. การเชอ่ื มตอ่ บอรด์ KidBright เข้ากบั ครื่องคอมพิวเตอร์
3. ส่วนประกอบของโปรแกรม KidBright IDE
4. การทดสอบการเขียนโปรแกรมบนหนา้ จอแสดงผล LED ของบอร์ด KidBright

แนวคดิ

KidBright เป็นบอร์ดสมองกลฝังตัว (Embeded board) สามารถใช้เป็นอุปกรณ์ควบคุมขนาดเล็กที่ประกอบด้วย ไมโคร
คอนโทรลเลอร์ (microcontroller) จอแสดงผล นาฬกิ า ลำ� โพง และเซนเซอร์ตา่ ง ๆ โดยบอร์ด KidBright จะทำ� งานตาม
คำ� ส่ังทผี่ ูใ้ ช้สร้างข้นึ ผา่ นโปรแกรมสร้างชุดคำ� สัง่ แบบบลอ็ ก (Block-based programming)

สื่อและอปุ กรณ์

ใบกิจกรรม

10

กิจกรรมที่ 1

แนวทางการจัดการเรยี นรู้

การจดั เตรยี ม

1. ใบกจิ กรรมตามจำ� นวนนกั เรียน
2. เครอ่ื งคอมพิวเตอร์ ทตี่ ดิ ต้งั โปรแกรม KidBright IDE
3. บอร์ด KidBright พรอ้ มสาย Micro USB

ขนั้ ตอนดำ� เนินการ

1. ครนู ำ� เข้าสู่บทเรยี นโดยตง้ั คำ� ถาม เชน่
• นกั เรียนรู้จักหรือเคยเหน็ หนุ่ ยนตห์ รือไม่
• เม่อื พดู ถงึ หุ่นยนต์นกั เรียนนกึ ถงึ อะไร
• นกั เรยี นคิดว่าหนุ่ ยนตท์ �ำอะได้บ้าง
• นกั เรยี นคิดว่าเหตใุ ดหนุ่ ยนตจ์ ึงสามารถท�ำงานตามค�ำส่งั ของมนษุ ย์ได้
• มนษุ ยม์ วี ธิ ีการอยา่ งไรในการควบคมุ ห่นุ ยนต์
• จากนัน้ ครสู รปุ คำ� ตอบของนกั เรยี น

2. ครใู หน้ กั เรยี นดคู ลปิ วดิ โี อ Dancing toy robot song for children จากนนั้ ตง้ั คำ� ถามเพอ่ื ใหน้ กั เรยี นอภปิ รายรว่ มกนั เชน่
• ห่นุ ยนตใ์ นคลิปวิดโี อที่ได้ชมไป สามารถท�ำอะไรได้บา้ ง (พูด กะพริบตา เคล่ือนท่)ี
• ถา้ นกั เรียนสามารถสรา้ งหุ่นยนตไ์ ดเ้ อง นกั เรยี นจะให้หุ่นยนตท์ ำ� อะไรบ้าง

3. ครูน�ำภาพหุ่นยนต์ที่สร้างข้ึนจากบอร์ด KidBright มาให้นักเรียนดู และต้ังค�ำถามว่านักเรียนรู้จักหรือเคยเห็นหุ่นยนต์
แบบในภาพหรือไม่ และหนุ่ ยนตใ์ นภาพมีความสามารถอย่างไร (เคล่อื นที่ได้, ท�ำความสะอาดได้)

เคลอื่ นที่ได้ ทำ� ความสะอาดได้

ภาพจาก https://www.kid-bright.org/showcase/article/31 ภาพจาก https://www.kid-bright.org/showcase/article/43

1111

กิจกรรมที่ 1

4. ครูอธิบายเพ่ิมเติมว่าหุ่นยนต์นี้ท�ำงานได้โดยมีบอร์ด KidBright ซึ่งเป็นบอร์ดสมองกลฝังตัว เป็นส่วนประกอบที่ส�ำคัญ
นกั เรยี นกส็ ามารถสร้างหุ่นยนต์แบบเดยี วกนั น้ีโดยใช้บอรด์ KidBright ได้เชน่ กัน
5. ครูแจกบอร์ด KidBright พร้อมสาย Micro USB ให้นักเรียนคนละ 1 บอร์ด (ครูอาจแบ่งกลุ่มและแจกเป็นกลุ่มตาม
จำ� นวนบอรด์ ที่มี) จากน้นั ครูอธบิ ายวา่ เราจะเร่มิ เรียนร้กู ารสง่ั งานหุ่นยนต์โดยใช้บอรด์ KidBright และใหน้ กั เรยี นช่วย
กันต้ังชอ่ื ห่นุ ยนตข์ องตนเอง

6. ครูให้นกั เรียนดูคลิปวดิ ีโอ KidBright ตอนท่ี 1 แนะนำ� บอร์ด KidBright และโปรแกรม KidBright IDE จากนน้ั ตั้งคำ� ถาม
ให้นกั เรียนรว่ มกันอภปิ ราย เช่น
• เซนเซอรท์ ม่ี ีในบอรด์ KidBright มีอะไรบา้ ง (เซนเซอรต์ รวจวัดความสวา่ ง เซนเซอร์ตรวจวัดอุณหภูมิ)
• เซนเซอร์ท่ีสามารถเชื่อมต่อเพ่ิมเติมได้ มีอะไรบ้าง (เซนเซอร์วัดค่าความชื้น เซนเซอร์วัดค่าความหนาแน่นของฝุ่น
เซนเซอรว์ ัดคา่ ความสน่ั สะเทือน)
• เม่ือบอร์ดรับข้อมลู จากผู้ใชม้ าแล้วจะท�ำอะไรตอ่ ไป (ประมวลผล)
• วิธีการเขียนโปรแกรมสั่งให้บอร์ด KidBright ท�ำงาน มีข้ันตอนอะไรบ้าง (ดาวน์โหลดโปรแกรม KidBright IDE
เชอื่ มต่อบอรด์ เขา้ กับคอมพิวเตอร์ เขียนชดุ ค�ำสงั่ อัปโหลดชดุ คำ� ส่งั ลงบนบอรด์ KidBright)

12

กิจกรรมที่ 1

7. ครูทบทวนข้ันตอนการเขียนโปรแกรมเพื่อสั่งให้บอร์ด KidBright ท�ำงาน เร่ิมจากการดาวน์โหลดและติดตั้งโปรแกรม
KidBright IDE หรือสามารถใช้งานผ่านโปรแกรมจ�ำลอง (Simulator) บนเว็บไซต์ https://www.kid-bright.org/
simulator/home ได้

8. ครูอธิบายพร้อมให้นักเรียนศึกษาเน้ือหาในใบความรู้ที่ 1 รู้จัก KidBright แล้วสาธิตวิธีการเช่ือมต่อบอร์ดกับเคร่ือง
คอมพิวเตอร์ และวิธีการส่งชุดค�ำส่ังไปยังบอร์ด KidBright โดยให้นักเรียนทดลองปฏิบัติตาม จากนั้นครูตรวจสอบว่า
นักเรยี นสามารถปฏิบัตไิ ดถ้ กู ต้องหรอื ไม่ พร้อมใหค้ �ำแนะน�ำเพมิ่ เติม
9. ครูให้นักเรยี นท�ำใบกจิ กรรมที่ 1 ร้จู ัก KidBright โดยใหน้ ักเรยี นจับคกู่ ันตรวจผลการปฏิบตั ขิ องเพือ่ น จากน้นั ต้ังค�ำถาม
เพอื่ ร่วมกนั อภิปราย เชน่
• นักเรยี นสามารถปฏบิ ัตติ ามขน้ั ตอนตา่ ง ๆ ไดค้ รบทกุ ข้นั ตอนหรือไม่
• นักเรยี นพบปัญหาในการเชอ่ื มตอ่ หรือไม่ หากพบนักเรียนมวี ธิ ีการแก้ไขและตรวจสอบอย่างไร
• นกั เรียนไดเ้ รียนรคู้ �ำสง่ั ใดบา้ งจากการฝึกปฏบิ ัติการเขียนโปรแกรม และค�ำสั่งนน้ั ท�ำงานอย่างไร
10. ครูให้นักเรียนทดลองปรบั เปลย่ี นภาพการแสดงผลบนหน้าจอแสดงผล LED ตามความสนใจ
11. ครูนำ� อภิปรายสรุปความรู้ทีไ่ ด้รับจากการทำ� กจิ กรรม โดยตัง้ คำ� ถามใหน้ กั เรียนรว่ มกันอภิปราย เช่น
• ความร้ทู ไ่ี ด้รบั จากกิจกรรม
• นักเรียนคิดว่าจะเขยี นโปรแกรมให้หุ่นยนตข์ องนักเรยี นท�ำอะไรไดบ้ า้ ง

การวดั และประเมินผล

1. ตรวจคำ� ตอบในใบกิจกรรม
2. สังเกตการมีส่วนร่วมในชั้นเรียน

1313

กจิ กรรมที่ 1

ส่อื และแหลง่ เรียนรู้

1. ใบความรู้ท่ี 1 รูจ้ ัก KidBright
2. คลปิ วดิ โี อ Dancing toy robot song for children
โดย IlikerobotEU จาก https://www.youtube.com/watch?v=U9s_bJyEb4k
3. คู่มือ สนุก Kids สนกุ Code กับ KidBright โดย สวทช. ดาวน์โหลดได้ที่
4. คลปิ วดิ โี อ KidBright ตอนท่ี 1 แนะนำ� KidBright และ KidBright IDE โดย NECTEC
จาก https://www.youtube.com/watch?v=CfCGy4TIQAs

!

ขอ้ เสนอแนะ

1. ครอู าจอธิบายความหมายของเนอ้ื เพลงในคลิปวดิ ีโอ Dancing toy robot song for children ใหน้ ักเรียน
ฟังเพ่ิมเตมิ เนอื่ งจากเนื้อเพลงเปน็ ภาษาองั กฤษ
2. หากไมม่ ีบอรด์ KidBright ให้นักเรียนเขยี นโปรแกรมผ่านโปรแกรมจำ� ลองการทำ� งาน (Simulator) ของ
KidBright จากเว็บไซต์ https://www.kid-bright.org/simulator/home ได้
3. ควรตรวจสอบความพร้อมของโปรแกรม KidBright IDE ทต่ี ดิ ตงั้ บนเครอ่ื งคอมพวิ เตอร์ วา่ สามารถใช้งาน
ไดป้ กตแิ ละเชอื่ มต่อกับบอรด์ Kidbright ได้ ก่อนเริม่ ทำ� กิจกรรม
4. การจบั ถือบอร์ด สามารถจบั ถอื สว่ นใดของบอรด์ ก็ได้ ตามความถนดั ของนกั เรยี น แตใ่ นบางครงั้ ความชืน้
หรือเหงอื่ ทีม่ อื อาจมีผลใหก้ ารท�ำงานหรือการแสดงผลของบอร์ดผดิ ปกติได้ แตไ่ มไ่ ด้ส่งผลให้บอร์ดช�ำรุด
5. ครอู าจแนะนำ� ใหน้ กั เรียนศึกษาเพม่ิ เติมหรอื ทำ� กจิ กรรมเกี่ยวกบั การใช้งานบอร์ด KidBright จากหนังสือ
“สนกุ Kids สนกุ Code กับ KidBright” หน้า 34-37 และ 40-50

14

กิจกรรมที่ 1

ใบความร้ทู ่ี 1
รจู้ ัก KidBright

KidBright คอื อะไร

KidBright เป็นบอร์ดสมองกลฝังตัว (embedded board) ที่ประกอบด้วย ไมโครคอนโทรลเลอร์ (microcontroller)
จอแสดงผล (display) นาฬิกาเรียลไทม์ (real-time clock) ล�ำโพง (speaker) และเซนเซอร์แบบง่าย (simple sensors)
โดยบอรด์ KidBright จะทำ� งานตามคำ� สงั่ ทผี่ ใู้ ชส้ รา้ งขนึ้ ผา่ นการเขยี นโปรแกรมแบบบลอ็ ก (block-based programming) เพอื่
ควบคมุ การท�ำงานของเซนเซอรต์ า่ ง ๆ บนบอร์ด KidBright รวมทั้งอุปกรณ์ตอ่ พ่วงจากภายนอก

1515

กจิ กรรมที่ 1

สมองกลฝังตัว

สมองกลฝงั ตวั คอื คอมพวิ เตอรข์ นาดจวิ๋ ทน่ี ำ� ไปฝงั ไวใ้ นอปุ กรณต์ า่ ง ๆ เพอ่ื เพมิ่ ความสามารถของอปุ กรณน์ น้ั ๆ ผา่ นซอฟตแ์ วร์
ควบคุมการท�ำงานท่ีแตกต่างจากระบบประมวลผลในคอมพิวเตอร์ สมองกลฝังตัว ถูกใช้อย่างแพร่หลายในเคร่ืองใช้ไฟฟ้า
ยานพาหนะ และอุปกรณส์ อื่ สาร การท่สี ามารถนำ� ไปฝงั ไว้ในอุปกรณต์ า่ ง ๆ ท�ำให้มีช่ือเรยี กวา่ “สมองกลฝงั ตวั ”

16

กจิ กรรมท่ี 1

องคป์ ระกอบตา่ ง ๆ ของบอรด์
KidBright และ KidBright IDE

รปู ที่ 1 สว่ นประกอบตา่ ง ๆ บนบอรด์ KidBright
ที่มา : ข้อมูลและรปู ภาพจากหนงั สือ สนกุ Kids สนุก Code กบั KidBright โดย สวทช.

1717

กิจกรรมท่ี 1

โปรแกรมสรา้ งชุดค�ำสง่ั
ใน KidBright IDE

การเปิดโปรแกรมสร้างชุดค�ำส่ังใน KidBright IDE ส�ำหรับระบบปฏิบัติการ Windows ท�ำได้โดยการดับเบิล้ คลิกไอคอน
ของ KidBright IDE บนหน้าเดสก์ทอป (Desktop) จากน้ันจะปรากฏหน้าต่างของโปรแกรม KidBright IDE
ซง่ึ มสี ว่ นประกอบของโปรแกรม ดงั ภาพ

รูปที่ 2 หน้าต่างของโปรแกรม KidBright IDE

18

กจิ กรรมที่ 1

ค�ำสงั่ ควบคมุ การทำ� งานของ
บอรด์ KidBright ในรปู ของบลอ็ ก

ค�ำสั่งควบคมุ การท�ำงานของบอรด์ KidBright

รปู ท่ี 3 ชอ่ื เรยี กแท็บต่าง ๆ บนโปรแกรม KidBright IDE

1919

กจิ กรรมที่ 1
การเชอื่ มต่อบอร์ด KidBright เข้ากบั เคร่อื งคอมพิวเตอร์ และทดสอบการทำ� งาน

อปุ กรณท์ ใ่ี ช้
1. บอรด์ KidBright
2. สาย Micro USB
3. เคร่อื งคอมพวิ เตอร์ท่ีติดตั้งโปรแกรม KidBright IDE

ขนั้ ตอนการเชื่อมต่อ

1. เชือ่ มต่อสาย Micro USB เข้ากับบอรด์ KidBright
2. เชือ่ มต่อปลายสายอีกด้านเขา้ กับ USB Port
ของเครื่องคอมพวิ เตอร์

รูปที่ 4 การตอ่ สาย Micro USB เข้ากับบอร์ด KidBright

!
หมายเหตุ การจบั บอร์ด KidBright ควรจับทข่ี อบ
ของบอร์ด เพ่ือป้องกนั เหงื่อหรอื ฝุ่นจากมือทอ่ี าจ
มีผลกระทบตอ่ การทำ� งานของบอรด์

รปู ท่ี 5 การเชื่อมต่อปลายสายอีกดา้ นเขา้ กับ USB Port ของ
เครอื่ งคอมพิวเตอร์

20

กิจกรรมท่ี 1
การทดสอบการทำ� งาน

1. เปดิ โปรแกรม KidBright IDE บนเครือ่ งคอมพวิ เตอร์
2. คลิกท่กี ล่มุ บลอ็ ก แล้วคลกิ ลาก บล็อก LED 16x8 มาวางบนพ้นื ที่สรา้ งชดุ คำ� ส่งั

รปู ที่ 6 บลอ็ ก LED 16x8 ทีถ่ กู วางบนหนา้ ตา่ งโปรแกรม KidBright IDE
3. คลกิ ชอ่ งวา่ งจดุ ใดก็ได้ ในบลอ็ ก LED 16X8 ใหเ้ ป็นจุดสีแดง ตวั อย่างดังรปู ที่ 7

รปู ที่ 7 ตัวอย่างบลอ็ ก LED 16x8 ทถ่ี กู วางบนหนา้ ตา่ งโปรแกรม KidBright IDE

2121

กจิ กรรมท่ี 1

4. คลกิ ปมุ่ สรา้ งโปรแกรม (Simulating program on virtual KidBright board) เพอ่ื สง่ คำ� สง่ั ไปยงั บอรด์ KidBright
จากนน้ั จะพบหนา้ ตา่ งแจง้ สถานะการดำ� เนนิ การดงั รปู ท่ี 8 ใหค้ ลกิ ปมุ่ OK (ถา้ ไมป่ รากฏ ขอ้ ความดงั ภาพตวั อยา่ ง แสดงวา่
มขี อ้ ผิดพลาดเกดิ ข้นึ ท�ำให้ไมส่ ามารถส่งโปรแกรมไปยงั บอร์ด KidBright ได)้

รูปที่ 8 หนา้ ตา่ งแสดงผลลัพธก์ ารสรา้ งโปรแกรมและการสง่ ผ่านโปรแกรมท่สี ร้างได้ไปยงั บอรด์ KidBright
5. สังเกตผลลัพธท์ ี่ปรากฏบนบอรด์ KidBright

22

กิจกรรมท่ี 1

ใบกิจกรรมท่ี 1 ไดเ้ วลาสง่ั ให้
รูจ้ กั KidBright หุ่นยนต์ทำ� งานแล้ว
มาเริ่มกันเลย !!
ค�ำชีแ้ จง

ให้นกั เรยี นปฏบิ ตั ติ ามขัน้ ตอนให้ครบทง้ั 4 ขอ้ ตอ่ ไปน้ี จากนัน้ ให้
เพื่อนตรวจสอบการท�ำงาน โดยท�ำเครื่องหมาย √ ลงในช่องผล
การตรวจสอบ

ลงชอ่ื ………………………………………………………..ผตู้ รวจ

2323

กจิ กรรมที่ 2
หวั ใจคิดบอท

จดุ ประสงค์การเรยี นรู้

1. เขียนโปรแกรม KidBright IDE เพื่อแสดงผลบนจอ LED

ตัวชีว้ ดั

ว.4.2 ป.4/2 ออกแบบและเขียนโปรแกรมอย่างง่าย
โดยใช้ซอฟต์แวร์หรือสื่อ ตรวจหาข้อผิดพลาดและแก้ไข



กิจกรรมที่ 2

สาระการเรยี นรู้

1. ออกแบบและเขียนโปรแกรมอยา่ งง่าย
2. ตรวจสอบขอ้ ผดิ พลาดจากโปรแกรม

แนวคิด

บล็อกค�ำส่ัง LED 16x8 เป็นบล็อกที่ใช้แสดงผลบนจอ LED ของบอร์ด KidBright โดยแสดงผล เป็นลักษณะของจุดเรียง
ตัวกัน 16x8 จุด เราสามารถปิดหรือเปิดการแสดงผลในแต่ละจุด เพ่ือให้เกิดภาพกราฟิกบนบอร์ด KidBright ได้

สือ่ และอปุ กรณ์ เร�่อง เวลา (นาที)
หวั ใจคดิ บอท 30
ใบกิจกรรม
ใบกจิ กรรมท่ี
2

26

กิจกรรมท่ี 2

แนวทางการจัดการเรยี นรู้

การจดั เตรียม

1. ภาพแสดงจุดพกิ เซลประกอบ

รูปที่ 1 ตัวอยา่ งภาพแสดงจุดพิกเซลทสี่ รา้ งขน้ึ
ทม่ี าภาพ : https://www.kisspng.com/png-pixel-art-pizza-2222169/
https://www.dreamstime.com/smiley-pixel-art-style-white-background-vector-
illustration-smiley-pixel-art-style-white-background-vector-illustration-web-
image131795868
2. ตัวอย่างภาพผ้าปกั ครอสติช

รูปท่ี 2 ตวั อยา่ งภาพผา้ ปกั ครอสตชิ
ท่มี าภาพ : http://www.craftsonsales.com
3. ใบกจิ กรรมตามจ�ำนวนนกั เรยี น
4. เครอ่ื งคอมพวิ เตอร์ ที่ติดตั้งโปรแกรม KidBright IDE
5. บอรด์ KidBright พร้อมสาย Micro USB

27

กิจกรรมท่ี 2
ข้นั ตอนดำ�เนินการ

1. ครูน�ำอภิปรายทบทวนความรู้ที่ได้เรียนไปแล้ว จากนั้นครูน�ำภาพกราฟิกหรือภาพจากการปักครอสติชมาแสดงให้
นกั เรยี นดู (อาจจะแสดงภาพบนจอคอมพวิ เตอรห์ รอื ภาพบนกระดาษ) พรอ้ มตงั้ คำ� ถามใหอ้ ภปิ รายรว่ มกนั ทง้ั ชน้ั เรยี น เชน่
• ภาพทเ่ี หน็ น้ีประกอบด้วยจดุ กจี่ ุด (อาจจะตอบโดยประมาณ)
• แต่ละตำ� แหน่งเปน็ สอี ะไรบ้าง
• จดุ ต่าง ๆ บนภาพประกอบกันเปน็ รปู อะไร
2. ครูให้ความรู้เพ่ิมเติมว่าภาพในลักษณะนี้ คล้ายกับการแสดงผลบนหน้าจอคอมพิวเตอร์ท่ีน�ำจุดเล็ก ๆ หลายจุดมา
ประกอบกนั เปน็ ภาพ

3. ครูแสดงภาพตัวอย่างผา้ ปกั ครอสตชิ ให้นกั เรยี นดู และตง้ั ค�ำถามอภปิ รายร่วมกัน เชน่
• แตล่ ะจุดของภาพประกอบดว้ ยสอี ะไรบ้าง
• แตล่ ะจดุ ประกอบกนั เป็นรปู อะไร
• จากหลกั การในการประกอบจดุ เป็นภาพ สามารถน�ำไปใชใ้ นกิจกรรมหรือชน้ิ งานใดอีกบา้ ง
(การแปลอกั ษรบนอฒั จรรยเ์ ชยี รห์ รือในสนาม ป้ายแสดงขอ้ ความของร้านค้า)
4. ครนู ำ� บอรด์ KidBright มาใหน้ กั เรยี นพจิ ารณา และแนะนำ� วา่ บนบอรด์ KidBright มหี นา้ จอแสดงผล LED สำ� หรบั แสดงผล
ซึ่งนักเรียนสามารถก�ำหนดการแสดงผลในแต่ละจุดเพ่ือให้เห็นเป็นภาพหรือข้อความต่าง ๆ ได้ จากนั้นครูตั้งค�ำถามว่า
หน้าจอแสดงผล LED มีขนาดเท่าใด (แตล่ ะด้านประกอบด้วยจดุ ก่จี ดุ ) (ด้านยาวมี 16 จุด ดา้ นกว้างมี 8 จดุ )

บอรด KidBright

28

กิจกรรมที่ 2

5. ครูอธิบายรายละเอียดของกิจกรรม ให้นักเรียนสร้างหัวใจให้หุ่นยนต์ของนักเรียน โดยสร้างเป็นภาพที่แสดงผลบน
หน้าจอ LED บนบอรด์ KidBright จากนั้นตง้ั คำ� ถามใหน้ ักเรยี นอภปิ รายร่วมกนั วา่ หวั ใจของหุ่นยนต์จะมรี ปู รา่ งอยา่ งไร
(ครแู นะนำ� ใหน้ ักเรยี นลองนึกเป็นภาพงา่ ย ๆ เช่น วงกลม วงรี สเี่ หล่ยี ม หรอื รปู ทรงอน่ื ๆ ตามจนิ ตนาการของนักเรยี น)

ลองจนิ ตนาการดนู ะ หวั ใจของฉัน
จะเปน แบบไหนกันแน?

6. ครูสาธิตและให้นักเรียนทบทวนการใช้งานเบ้ืองต้นและฝึกปฏิบัติตามใบความรู้ที่ 2.1 การสร้างภาพกราฟิกด้วยบล็อก
LED16x8 และ ใบความรทู้ ่ี 2.2 การบนั ทึกและเปิดไฟลข์ องโปรแกรม KidBright
7. ครูสุ่มนักเรียนออกมาน�ำเสนอวิธีการสร้างภาพกราฟิกและบันทึกไฟล์หน้าชั้นเรียน นักเรียนคนอื่นตรวจสอบค�ำตอบ
ของเพื่อนและอภิปรายร่วมกนั ประเดน็ ในการอภิปราย เชน่
• วธิ ีการในการเขียนโปรแกรมสร้างภาพกราฟิกบนบอร์ด KidBright ของเพ่อื นถกู ต้องหรือไม่ อย่างไร หากไม่ถูกต้อง
และจะแก้ไขได้อย่างไร
• วิธกี ารในการบนั ทึกไฟล์ของเพ่อื นถูกตอ้ งหรือไม่ อย่างไร หากไมถ่ กู ต้องจะแก้ไขอยา่ งไร
8. ครูให้นักเรียนท�ำใบกิจกรรมที่ 2 หัวใจคิดบอท จากน้ันสุ่มนักเรียนมาน�ำเสนอผลงานหน้าชั้นเรียน และต้ังค�ำถามให้
ร่วมกนั อภิปราย เชน่
• ภาพบนหน้าจอบอร์ด Kidฺ Bright ของเพอื่ น เหมือนกบั ภาพทร่ี ่างไว้หรือไม่ หากไม่เหมือนจะแก้ไขอย่างไร
• นกั เรยี นพบปญั หาอะไรบ้างระหวา่ งการปฏบิ ัติ และมีวธิ แี ก้ปัญหาน้ันอย่างไร
9. ครูน�ำอภปิ รายสรปุ ความรหู้ ลังจากการทำ� กจิ กรรม โดยตั้งคำ� ถามใหน้ กั เรยี นรว่ มกันอภปิ ราย เช่น
• ความรู้ที่ได้รับจากการท�ำกิจกรรมมีอะไรบ้าง (การเขียนโปรแกรมเพื่อแสดงผลบนบอร์ด การแก้ปัญหาจาก
ข้อผิดพลาดของโปรแกรม)
• นกั เรยี นเคยพบการแสดงผลลักษณะเดียวกันนี้ในงานใดบา้ ง
• สามารถนำ� รปู แบบของการแสดงภาพบนหน้าจอบอรด์ KidBright ไปใชใ้ นการสร้างช้ินงานใดได้อกี บา้ ง

การวัดและประเมนิ ผล

1. ตรวจชนิ้ งานด้วยแบบประเมินชิน้ งานกจิ กรรมท่ี 2
2. สงั เกตการมีส่วนรว่ มในชัน้ เรยี น

29

กจิ กรรมท่ี 2

สือ่ และแหล่งเรยี นรู้

1. ใบความรู้ที่ 2.1 การสรา้ งภาพกราฟิกด้วยบล็อก LED 16x8
2. ใบความรู้ท่ี 2.2 การบนั ทึกและเปิดไฟล์ของโปรแกรม KidBright IDE
3. ค่มู อื สนกุ Kids สนุก Code กบั KidBright โดย สวทช. ดาวน์โหลดได้ที่

https://www.kid-bright.org/file/download/[NECTEC]KidBright-Booklet-181022.pdf

!

ข้อเสนอแนะ

1. ครูอาจนำ�ผา้ ปกั ครอสตชิ ของจริงมาใหน้ ักเรยี นพิจารณา หรอื ภาพอื่น ๆ ทมี่ องเห็นแตล่ ะจุด ซึ่งประกอบกัน
เปน็ ภาพใหญ่อยา่ งชดั เจน
2. ครกู ระตุ้นให้นักเรยี นออกแบบภาพหวั ใจของหนุ่ ยนตต์ ามจินตนาการของนกั เรียน โดยครูอาจใหน้ ักเรยี นบอก
เหตผุ ลในการออกแบบภาพ
3. ครอู าจมอบหมายใหท้ �ำ งานเปน็ รายบคุ คล จบั คู่ หรอื รายกลมุ่ ตามความเหมาะสมของจ�ำ นวนนกั เรยี นในชน้ั เรยี น
4. ครอู าจใหน้ ักเรียนศกึ ษาความร้เู พิม่ เตมิ เกี่ยวกบั การสรา้ งภาพกราฟิกบนบอรด์ KidBright จากหนงั สือ
“สนกุ Kids สนกุ Code กับ Kidbright” หน้า 57-58

30

กิจกรรมท่ี 2

ใบความร้ทู ่ี 2.1
การสร้างภาพกราฟิกด้วย
บลอ็ ก LED16x8

ภาพดิจิทลั

ภาพในระบบดิจิทลั เกดิ จากการนำ� จดุ ภาพมาเรยี งต่อกัน การท�ำใหเ้ ห็นเปน็ ภาพต่าง ๆ คอื การก�ำหนดใหจ้ ดุ ภาพเล็ก ๆ มสี ี
แตกต่างจากจุดภาพอืน่ ๆ เชน่ จอแสดงผลขนาด 8x8 ท่ีมกี ารแสดงผลเปน็ สีแดง จดุ ภาพที่ต้องการให้เหน็ จะถูกก�ำหนดเปน็
สแี ดง (หมายถึง ให้ไฟสวา่ ง) ในขณะท่ีจุดภาพอนื่ ๆ จะถกู ก�ำหนดใหไ้ ม่มีสี (หมายถงึ ให้ไฟไม่สวา่ ง)

รูปที่ 1 ตัวอยา่ งการก�ำ หนดจดุ ภาพ

การแสดงภาพน่งิ

การแสดงภาพนิ่งเป็นการแสดงภาพข้ันพื้นฐาน โดยการน�ำภาพหน่ึงภาพมาแสดงค้างไว้ที่จอแสดงผล บล็อกที่ใช้คือ
บลอ็ ก LED 16x8

บล็อก LED 16x8

จุดภายในบล็อก LED 16x8 เปน็ ตัวแทนของจดุ ท่ีแสดงผลบนหนา้ จอแสดงผล LED ของบอรด์ KidBright

LED 16x8

รปู ท่ี 2 บลอ็ ก LED 16x8

31

กิจกรรมท่ี 2

การใช้งานบล็อก LED 16x8

1. คลิกลากบลอ็ ก LED 16x8 จากกลุ่มบลอ็ ก Basic วางบนพ้ืนที่สร้างชุดค�ำสั่ง และคลิกจุดให้เป็นสีแดงตาม
ต�ำแหนง่ ภาพท่ตี ้องการ ดังรปู ที่ 3

Basic LED 16x8
Math
Logic
Loop
Wait
Music
Senser
Clock
I/O
Advance
IOT

รปู ท่ี 3 ตวั อยา่ งการคลกิ จดุ สแี ดงภายในบล็อก LED 16x8

32

กจิ กรรมท่ี 2

2. เม่อื คลกิ จุดเลอื กตำ� แหน่งเขียนภาพตามที่ตอ้ งการเสรจ็ แล้ว ใหค้ ลิกปุม่ สรา้ งโปรแกรม จะปรากฏข้อความแสดง
กระบวนการสร้างโปรแกรมดงั รูปที่ 4 จากนัน้ คลกิ ปมุ่ OK เพอ่ื ปดิ กล่องขอ้ ความ

Basic
Math

Logic Program Build

Loop
Wait

Music • Port Checking... Passed (COM25)
Senser • Board Checking... Passed (b4:e6:2d:90:b8:e5)
Clock • Program Build... Passed
I/O • Board Flashing... Passed

Advance

IOT OK

รปู ท่ี 4 หน้าต่างแสดงผลลัพธ์การสรา้ งโปรแกรมและการสง่ ผ่านโปรแกรมที่สร้างได้ไปยังบอร์ด KidBright
3. เมื่อแปลงชุดค�ำสั่งเป็นภาษาเคร่ืองเรียบร้อยแล้ว รหัสภาษาเคร่ืองดังกล่าวจะถูกส่งผ่านสาย Micro USB ไปยังบอร์ด
KidBright และแสดงผลทห่ี น้าจอของบอร์ด KidBright ดังรูปท่ี 5

รปู ท่ี 5 ผลลัพธ์ที่ได้หลังจากการสร้างและโหลดโปรแกรมลงบนบอร์ด KidBright

33

กิจกรรมที่ 2

ใบความรทู้ ่ี 2.2
การบันทึกและเปดิ ไฟล์
ของโปรแกรม KidBright

การบนั ทกึ ไฟล์

1. คลกิ ท่ีปมุ่ บันทกึ
2. จะปรากฏหนา้ ต่างบนั ทึกใหเ้ ลอื กโฟลเดอรท์ ีต่ อ้ งการจะเก็บไฟล์ จากน้ันพมิ พช์ อื่ ไฟล์ ในช่อง File name แลว้ คลกิ ป่มุ
Save ดังรปู ที่ 1

Basic Save File
Math Project l
Logic
Loop Cancel Save
Wait
Music
Senser
Clock
I/O
Advance
IOT

รปู ที่ 1 หน้าตา่ งการบนั ทกึ ไฟล์

34

กิจกรรมท่ี 2

การเปดิ ไฟล์ Insert Mode

1. คลกิ ทปี่ ่มุ เปิดไฟล์ Cancel OK
2. คลกิ ทค่ี �ำวา่ Choose File ดงั รูปท่ี 2

Basic
Math
Logic

Loop Open File

Wait
Music

Senser Choose file No file chosen

Clock
I/O
Advance
IOT

รปู ท่ี 2 หนา้ ต่างการเปดิ ไฟล์
3. จะปรากฏหน้าตา่ ง Open file ให้คลิกเลือกไฟล์ท่ตี ้องการ ดงั รูปท่ี 3 จากนน้ั คลิกปุ่ม Open

Basic Open File
Math Project
Logic
Loop Cancel Open
Wait
Music
Senser
Clock
I/O
Advance
IOT

รูปท่ี 3 หน้าต่างการเปิดไฟลเ์ พื่อเลอื กไฟล์ทตี่ อ้ งการเปดิ

35

กิจกรรมที่ 2

ใบกจิ กรรมท่ี 2
หวั ใจคดิ บอท

ค�ำช้ีแจง

1. ให้นกั เรยี นออกแบบหัวใจของหนุ่ ยนต์ตามจนิ ตนาการของนกั เรียน โดยระบายสีลงในชอ่ งว่างต่อไปน้ี

2. เขียนโปรแกรมให้หน้าจอแสดงผล LED บนบอร์ด KidBright แสดงภาพหัวใจตามภาพท่ีร่างไว้ สังเกตภาพที่แสดงบน
หนา้ จอแสดงผล LED กบั ภาพที่ร่างไว้วา่ เหมือนหรอื แตกต่างกนั หรอื ไม่ หากแตกต่างกนั ใหแ้ กไ้ ขเป็นไปตามแบบรา่ ง

LED 16x8 หัวใจของฉันจะเปน
แบบไหนกนั นะ ?

36

กจิ กรรมที่ 2

แบบประเมนิ ช้นิ งาน กิจกรรมท่ี 2 รายการประเมิน คะแนนรวม
ความคิดสรา งสรรค การเขย� นโปรแกรม
ที่ ชอื่ -สกุล

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.

เกณฑก์ ารประเมนิ

รายการประเมิน (3 คดะแี นน) (2พคอะแใชน น) ค(ว1รคปะรแบั นปนร)ุง
1. ความคิดสรา งสรรค
2. การเขยี นโปรแกรม ออกแบบภาพแตกตางจากตัวอยา ง ออกแบบภาพเหมือนกับตัวอยาง มกี ารแกไ ขภาพใหต า งจากตวั อยา ง
ของครู และแตกตา งกับของเพอื่ น ของครู หรอื เหมือนกบั ของเพ่ือน เลก็ นอ ย
เขียนโปรแกรมดว ยตนเอง แตไมไ ด
เขียนโปรแกรมดวยตนเองและได เขยี นโปรแกรมดวยตนเองและได ผลลพั ธตามท่โี จทยก ำหนด หรอื ไม
ผลลัพธตามทีโ่ จทยก ำหนด ผลลพั ธตามท่ีโจทยกำหนด โดยได สามารถเขียนโปรแกรมเองได ตอง
รับคำแนะนำเพียงเล็กนอ ย ใหครชู วยแนะนำ

37

กิจกรรมท่ี 3
Heart’s bot beat

จุดประสงคก์ ารเรียนรู้

เขียนโปรแกรมแสดงภาพกราฟิกเคลื่อนไหวบนหน้าจอ
แสดงผล LED

ตวั ช้วี ดั

ว.4.2 ป.4/2 ออกแบบและเขียนโปรแกรมอย่างง่าย
โดยใช้ซอฟต์แวร์หรือสื่อ ตรวจหาข้อผิดพลาดและแก้ไข



กิจกรรมที่ 3

สาระการเรียนรู้

1. ออกแบบและเขยี นโปรแกรมสรา้ งภาพเคลื่อนไหว
2. ตรวจสอบขอ้ ผดิ พลาดจากโปรแกรม

แนวคิด

ในการสรา้ งภาพเคลอื่ นไหวนนั้ สามารถใชบ้ ลอ็ กคำ� สง่ั ตา่ ง ๆ รว่ มกนั เชน่ บลอ็ กคำ� สง่ั LED 16x8 บลอ็ ก Delay (หนว่ งเวลา)
บล็อก Forever (วนซ�้ำไม่ส้ินสุด) โดยเม่ือน�ำบล็อก Forever ซ่ึงอยู่ในกลุ่มบล็อก Basic (พื้นฐาน) มาครอบค�ำสั่งเพื่อให้
แสดงผลซำ�้ ไม่สิ้นสุด

ส่ือและอุปกรณ์ เร�อ่ ง เวลา (นาท)ี
Heart’s bot beat 40
ใบกจิ กรรม
ใบกิจกรรมที่
3

40

กจิ กรรมท่ี 3

แนวทางการจดั การเรียนรู้

การจัดเตรียม

1. ใบกจิ กรรมตามจำ� นวนนกั เรียน
2. เครอ่ื งคอมพวิ เตอร์ ทตี่ ดิ ตง้ั โปรแกรม KidBright IDE
3. บอรด์ KidBright พร้อมสาย Micro USB

ขัน้ ตอนด�ำ เนินการ

1. ครูทบทวนความรู้ท่ีได้เรียนในช่ัวโมงท่ีแล้ว เกี่ยวกับการสร้างหัวใจให้หุ่นยนต์ โดยต้ังค�ำถามว่าใช้บล็อกค�ำสั่งอะไรบ้าง
(บล็อกคำ� สัง่ LED 16x8)
2. ครูเปิดคลิปวิดีโอการสร้างภาพเคล่ือนไหว (animation) อย่างง่าย จากการใช้กระดาษโน้ต โดยครูอธิบายเพ่ิมเติม
เน่อื งจากเสียงบรรยายในคลปิ วิดโี อเปน็ ภาษาอังกฤษ จากนน้ั ตั้งคำ� ถามใหน้ กั เรียนอภปิ รายรว่ มกัน เชน่
• คลปิ วดิ ีโอที่นักเรียนได้ชมมเี นือ้ หาเก่ียวกบั อะไร (การสร้างภาพเคล่อื นไหวจากกระดาษโนต้ )
• วิธกี ารในการสรา้ งภาพเคลื่อนไหวจากคลปิ วิดีโอเปน็ อยา่ งไร (วาดภาพลงในกระดาษแตล่ ะแผน่ ไมเ่ หมือนกันแต่เปน็
ภาพที่มีความต่อเนื่องกัน จากนั้นเปิดกระดาษให้แสดงทีละแผ่นอย่างรวดเร็ว ภาพที่เห็นจะมองเหมือน
ภาพเคล่ือนไหว)
3. ครูอธิบายเพ่ิมเติมว่าเมื่อเรามองภาพท่ีอยู่บนกระดาษแต่ละแผ่นซึ่งเป็นภาพที่มีความต่อเน่ืองกัน เราจะเห็นเหมือนกับ
ว่าภาพน้ันมีการเคลื่อนไหว ซึ่งเกิดจากความแตกต่างหรือความต่อเน่ืองกันของภาพแต่ละภาพ เช่น ขยับต�ำแหน่ง
เปลี่ยนรูปร่าง เปล่ียนขนาด ครูต้ังค�ำถามให้นักเรียนร่วมกันอภิปรายว่า นักเรียนคิดว่าเราสามารถสร้างภาพลักษณะน้ี
โดยใชบ้ อร์ด KidBright ไดห้ รอื ไม่ และมวี ิธีการอย่างไร

123456

41

กจิ กรรมที่ 3

4. ครใู หน้ กั เรยี นศกึ ษาและปฏบิ ตั ติ ามใบความรทู้ ่ี 3 สรา้ งภาพเคลอื่ นไหว จนถงึ หวั ขอ้ การสรา้ งภาพเคลอ่ื นไหวตวั อยา่ งท่ี 1
จากนั้นครตู ้งั ค�ำถามให้นกั เรยี นร่วมกันอภปิ ราย เชน่
• บล็อกคำ� สั่งในการสรา้ งภาพเคลอ่ื นไหว มีบล็อกค�ำส่งั อะไรบ้าง (LED 16x8, Forever และ Delay)
• บลอ็ กคำ� สงั่ ในการสรา้ งภาพเคลอ่ื นไหว ทเ่ี พม่ิ ขน้ึ จากการสรา้ งภาพนงิ่ มบี ลอ็ กคำ� สง่ั อะไรบา้ ง (Forever และ Delay)
• ภาพนงิ่ กบั ภาพเคล่ือนไหวใหค้ วามรสู้ กึ แตกตา่ งกันอย่างไร
• นกั เรียนได้ทดลองปรับแก้โปรแกรมอย่างไรบ้าง และสงิ่ ทีป่ รับแกท้ �ำให้โปรแกรมเปล่ยี นแปลงอยา่ งไร
• เมอ่ื เปลี่ยนค่าในบลอ็ ก Delay เปน็ 0.2 ผลท่ีไดเ้ ปลย่ี นแปลงไปอยา่ งไร (ภาพกะพรบิ เร็วขึ้น)
5. ครูอธิบายเพิ่มเติมเก่ียวกับค่าที่แสดงในบล็อก Delay ว่าเป็นเวลาที่ส่ังให้โปรแกรมหยุดรอก่อนจะท�ำค�ำสั่งถัดไป
มีหน่วยเป็นวินาที และให้นักเรียนช่วยกันตอบค�ำถามว่าการก�ำหนดค่าในบล็อก Delay มากหรือน้อยจะให้ผลการ
ท�ำงานแตกต่างกันอย่างไร (ถ้ามีค่ามากก็จะหน่วงเวลาในการแสดงผลนาน และถ้ามีค่าน้อยก็จะหน่วงเวลาน้อยลงและ
ทำ� คำ� ส่งั ถดั ไปเรว็ ข้นึ )
6. ครูให้นักเรียนท�ำใบกิจกรรมที่ 3 Heart’s bot beat โดยอธิบายเพ่ิมเติมว่าให้นักเรียนออกแบบและสร้างการ
เคลอ่ื นไหวใหห้ วั ใจของหนุ่ ยนต์ โดยออกแบบลกั ษณะการเคลอ่ื นไหวเปน็ ภาพตำ� แหนง่ ตา่ ง ๆ ลงในใบกจิ กรรมที่ 3 จากนน้ั
ใหล้ งมอื เขยี นโปรแกรมตามแบบทร่ี า่ งไว้ แลว้ สงั เกตผลลพั ธท์ ไี่ ดบ้ นบอรด์ KidBright หากพบขอ้ ผดิ พลาดใหแ้ กไ้ ขปรบั ปรงุ
7. ครสู มุ่ นกั เรยี นออกมานำ� เสนอผลงาน โดยใหเ้ พอ่ื นคนอนื่ ชว่ ยกนั เปรยี บเทยี บระหวา่ งภาพรา่ งกบั ภาพทป่ี รากฏบนหนา้ จอ
วา่ เหมือนหรือแตกต่างกนั อย่างไร หากไม่เหมอื นกบั ภาพรา่ งจะปรบั ปรงุ อยา่ งไร
8. ครูนำ� อภปิ รายสรุปความรู้ทีไ่ ด้รบั จากการท�ำกจิ กรรม โดยต้ังค�ำถามใหน้ กั เรียนร่วมกันอภปิ ราย เชน่
• ข้ันตอนในการสรา้ งภาพเคล่อื นไหวบนบอร์ด KidBright ประกอบดว้ ยอะไรบ้าง (ออกแบบว่าตอ้ งการใหบ้ ลอ็ ก LED
แสดงภาพอะไรบา้ ง เขยี นโปรแกรมตามภาพรา่ ง ตรวจสอบโปรแกรม และแก้ไขโปรแกรมหากพบข้อผดิ พลาด)
• บล็อกคำ� ส่ังที่ใช้ในการสรา้ งภาพเคล่อื นไหวมอี ะไรบ้าง (Forever, LED 16x8, Delay)
• นกั เรยี นพบปัญหาใดในการสรา้ งช้นิ งานบา้ ง และแก้ไขปญั หานน้ั ได้อยา่ งไร
• สามารถนำ� ความรจู้ ากการสรา้ งภาพเคลอ่ื นไหว ไปใชใ้ นการสรา้ งชน้ิ งานใดอกี บา้ ง (การต์ นู แอนเิ มชนั ปา้ ยชอ่ื รา้ นคา้ )

การวัดและประเมนิ ผล

1. ตรวจชน้ิ งานดว้ ยแบบประเมนิ ช้นิ งานที่ 3
2. สงั เกตการมสี ว่ นรว่ มในช้ันเรยี น

42

กิจกรรมท่ี 3

สื่อและแหล่งเรียนรู้

1. ใบความรู้ที่ 3 สรา้ งภาพเคล่อื นไหว
2. คลิปวิดโี อการสรา้ งภาพเคลอื่ นไหว (Animation) อย่างงา่ ย How to make a flip book animation - SO FUN and
SIMPLE! โดย Amy Pearce จาก https://www.youtube.com/watch?v=3LG4OSk1gE0
3. คูม่ อื สนุก Kids สนุก Code กับ KidBright โดย สวทช. ดาวนโ์ หลดได้ท่ี

https://www.kid-bright.org/file/download/[NECTEC]KidBright-Booklet-181022.pdf

!

ขอ้ เสนอแนะ

1. เม่อื ผลการท�ำ งานของโปรแกรมไมเ่ ปน็ ไปตามตอ้ งการ ครูอาจใหค้ วามรเู้ กี่ยวกบั การตรวจหาข้อผิดพลาด
ของโปรแกรมโดยให้นักเรยี นตรวจสอบในประเด็นต่อไปน้ี
• เชอื่ มตอ่ อปุ กรณส์ มบูรณแ์ ลว้ ใช่หรอื ไม่
• ตรวจสอบโปรแกรมทีละคำ�ส่ังว่าถูกต้องแลว้ หรอื ไม่
• บล็อกค�ำ สงั่ ครบหรอื ไม่
• บลอ็ กคำ�สงั่ สลบั ที่หรอื ไม่
2. ครูอาจแนะน�ำ ให้เพื่อนท่ที �ำ เสร็จแล้วชว่ ยเหลอื เพอื่ นคนอื่น ๆ ท่ตี ้องการค�ำ แนะนำ�
3. ครูสามารถแนะน�ำ ใหน้ ักเรียนศกึ ษาและทำ�กจิ กรรมเพ่ิมเติมเกี่ยวกบั การสรา้ งภาพ
เคลอื่ นไหว จากหนังสอื “สนกุ Kids สนุก Code กับ KidBright” หนา้ 74-78

43

กิจกรรมที่ 3

ใบความร้ทู ่ี 3
สรา้ งภาพเคล่อื นไหว

ภาพเคลือ่ นไหว

ภาพเคล่ือนไหว เกิดจากการน�ำภาพดิจิทัลมากกว่าหน่ึงภาพมาแสดงต่อกัน โดยแต่ละภาพจะถูกแสดง เป็นระยะเวลาช่วง
หนึ่งก่อนท่ีจะเปล่ียนภาพไป เช่น แสดงภาพแรกเป็นเวลา 0.5 วินาที ต่อจากนั้นจะแสดง ภาพที่สองเป็นเวลา 0.5 วินาที
เพื่อใหต้ ามนษุ ย์สามารถรับรไู้ ด้ ถ้าแสดงผลรวดเรว็ เกนิ ไปตาของมนุษย์ จะไมส่ ามารถรบั ภาพไดท้ ัน

แสดงภาพแรก
ค้างไว้ 0.5 วนิ าที

แสดงภาพท่สี อง
ค้างไว้ 0.5 วนิ าที

44

กจิ กรรมที่ 3
บล็อก LED 16x8

บลอ็ ก LED 16x8 ถกู ใชใ้ นการสรา้ งภาพเคลือ่ นไหว โดยท่ดี า้ นบนขวาของบล็อกจะมลี ูกศรก�ำหนดทศิ ทาง การแสดงของจุด
ภาพบนหน้าจอ ประกอบดว้ ยปุ่ม ขึน้ ลง ซา้ ย และขวา ปุ่มเหล่านีจ้ ะท�ำการขยบั จดุ ภาพสวา่ งไปในทิศทางทตี่ ้องการ โดยไม่
จำ� เป็นตอ้ งวาดใหม่

เลื่อนจ�ดทกุ จ�ดบนบลอ็ กแอลอดี ีไปดา นซายหน่ึงตำแหนง
เลอ่ื นจด� ทกุ จด� บนบลอ็ กแอลอีดีไปดานขวาหนึง่ ตำแหนง
เลื่อนจ�ดทุกจด� บนบลอ็ กแอลอดี ขี ้น� ไปหน่งึ ตำแหนง
เล่ือนจด� ทุกจ�ดบนบล็อกแอลอดี ลี งมาหนึ่งตำแหนง
รปู ท่ี 1 บลอ็ ก LED 16x8

45

กิจกรรมที่ 3

บล็อกคำ�สง่ั Forever (วนซ�ำ ้ไม่ส้นิ สดุ )

บลอ็ กค�ำสงั่ Forever (วนซำ�้ ไมส่ ิ้นสุด) อย่ใู นกล่มุ บลอ็ ก Basic (พนื้ ฐาน) เป็นบลอ็ กคำ� สั่งที่ก�ำหนดใหค้ ำ� สัง่ หรอื ชุดค�ำสง่ั ท่ี
ถูกครอบอยูภ่ ายในบลอ็ กค�ำสง่ั Forever ทำ� งานวนซ้ำ� ไปเรอ่ื ย ๆ ไมม่ ีทสี่ ้นิ สดุ หรอื สิ้นสุดเมอื่ ตรงตามเง่อื นไขท่ีกำ� หนดไว้

Forever

ตวั อย่าง Forever
LED 16x8
LED 16x8

LED 16x8 LED 16x8

LED 16x8 LED 16x8

(ก) (ข)
รูปที่ 2 การใชง้ านบลอ็ กค�ำ สงั่ Forever
จากชุดค�ำสัง่ ดงั รปู ท่ี 2 (ก) เมื่อคลกิ ปุ่ม สร้างโปรแกรม หน้าจอแสดงผล LED ของบอร์ด KidBright จะแสดงผล
เป็นตัวอักษร C O และ M ตามล�ำดับแล้วจบการท�ำงาน แต่เม่ือน�ำบล็อกค�ำส่ัง Forever มาครอบชุดค�ำส่ังท้ังหมดไว้
ดังรูปท่ี 2 (ข) แล้วส่งั แสดงผล จะปรากฏตัวอักษร C O และ M ตามล�ำดับ วนแสดงผลซ้ำ� ไปเรอ่ื ย ๆ ไมส่ ้ินสุด

46

กิจกรรมที่ 3

บล็อก Delay

บล็อกค�ำสั่ง Delay (หน่วงเวลา) อยู่ในกลุ่มบล็อก Basic (พ้ืนฐาน) เป็นบล็อกค�ำส่ังที่ถูกใช้เพ่ือหน่วงเวลาการท�ำงาน
สามารถกำ� หนดเวลาไดโ้ ดยมีหน่วยเป็นวนิ าที

Delay 0.5

ตัวอย่าง Forever
LED 16x8
Forever
LED 16x8

LED 16x8 Delay 0.5
LED 16x8 LED 16x8

Delay 0.5
LED 16x8

(ก) Delay 0.5 (ข)

รปู ท่ี 3 การใช้งานบล็อกค�ำ สั่ง Forever
จากชุดค�ำสัง่ รูปท่ี 3 (ก) จอแสดงผลของบอร์ด KidBright จะแสดงผลเปน็ ตวั อักษร C O และ M ตามล�ำดบั ซ้�ำไปเรอื่ ย ๆ แต่
เมื่อเพ่มิ บลอ็ กคำ� สง่ั Delay ระหว่างบลอ็ กคำ� สง่ั LED 16x8 ดังรปู ท่ี 3 (ข) แลว้ จะมกี ารหน่วงเวลาในการแสดงผลตามเวลา
ทีก่ ำ� หนดคือ 0.5 วินาที เมอื่ ครบกำ� หนดแล้วกจ็ ะทำ� บลอ็ กคำ� สัง่ ถดั ไป จึงทำ� ให้จอแสดงผลของบอร์ด KidBright แสดงผลตัว
อกั ษรแต่ละตวั นานขึน้ กวา่ เดิม

47

กิจกรรมท่ี 3 Clear LED 16x8
บลอ็ ก Clear LED 16x8
Forever
ใชใ้ นการล้างภาพทง้ั หมดบนหนา้ จอ LED LED 16x8

ตัวอย่างการสรา้ งภาพเคลื่อนไหว Delay 0.5
ตวั อยา่ งท่ี 1 LED 16x8
1. เขียนโปรแกรมโดยใช้บล็อก Forever
บล็อก LED 16x8 และบล็อก Delay
ดงั รูปที่ 4
2. ทดลองเปลยี่ นค่าในบล็อก Delay แลว้
สังเกตผลท่ไี ด้

Delay 0.5

รูปท่ี 4 ตวั อย่างการเขียนโปรแกรมโดยใช้บลอ็ ก Forever บลอ็ ก LED 16x8
และบลอ็ ก Delay

ตัวอยา่ งท่ี 2 Forever Duplicate
1. เขียนโปรแกรมโดยใช้บล็อก Forever LED 16x8 Add Comment
บล็อก LED 16x8 และบล็อก Delay Inline Inputs
จากนั้นคลิกขวาที่บล็อก LED 16x8 Delay 0.5 Collapse Block
แล้วคลิกเลือก Duplicate (คัดลอก) Disable Block
เพ่อื คัดลอกบล็อก ดังตวั อย่าง Delete Block
Help

รูปที่ 5 การใช้งานคำ�สัง่ Duplicate (คดั ลอก) เพอื่ คัดลอกบล็อก

48