ณ
ณ
ณ ศูนยเ์ ทคโนโลยอี ิเล็กทรอนิกสแ์ ละคอมพวิ เตอร์แห่งชาติ สา� นักงานพัฒนาวทิ ยาศาสตร์และเทคโนโลยแี ห่งชาติ สถาบนั ส่งเสรมิ การสอนวทิ ยาศาสตร์และเทคโนโลยี สงวนลิขสิทธ์ิ ตาม พ.ร.บ. ลิขสิทธิ์ (ฉบับเพ่ิมเติม) พ.ศ. 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 เบ้ืองต้น 2. รู้จักการสร้างชุดค�าสั่งผ่านโปรแกรม KidBright IDE 3. เช่ือมต่อบอร์ด KidBright กับเครื่องคอมพิวเตอร์ ว.4.2 ป.4/2 ออกแบบและเขียนโปรแกรมอย่างง่าย โดยใช้ซอฟต์แวร์หรือสื่อ ตรวจหาข้อผิดพลาดและแก้ไข
1. สว่ นประกอบของบอรด์ KidBright 2. การเชอ่ื มตอ่ บอร์ด KidBright เข้ากบั คร่ืองคอมพวิ เตอร์ 3. ส่วนประกอบของโปรแกรม KidBright IDE 4. การทดสอบการเขยี นโปรแกรมบนหนา้ จอแสดงผล LED ของบอรด์ KidBright KidBright เป็นบอร์ดสมองกลฝังตัว (Embeded board) สามารถใช้เป็นอุปกรณ์ควบคุมขนาดเล็กท่ีประกอบด้วย ไมโคร คอนโทรลเลอร์ (microcontroller) จอแสดงผล นาฬกิ า ลา� โพง และเซนเซอร์ตา่ ง ๆ โดยบอร์ด KidBright จะทา� งานตาม คา� สั่งทผ่ี ใู้ ชส้ รา้ งขน้ึ ผ่านโปรแกรมสร้างชุดคา� สง่ั แบบบล็อก (Block-based programming) ณ ใบกจิ กรรม 10
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
4. ครูอธิบายเพ่ิมเติมว่าหุ่นยนต์น้ีท�างานได้โดยมีบอร์ด KidBright ซ่ึงเป็นบอร์ดสมองกลฝังตัว เป็นส่วนประกอบท่ีส�าคัญ นกั เรียนก็สามารถสรา้ งหุ่นยนต์แบบเดียวกันนโ้ี ดยใช้บอรด์ KidBright ไดเ้ ช่นกนั 5. ครูแจกบอร์ด KidBright พร้อมสาย Micro USB ให้นักเรียนคนละ 1 บอร์ด (ครูอาจแบ่งกลุ่มและแจกเป็นกลุ่มตาม จา� นวนบอร์ดท่มี )ี จากนน้ั ครูอธิบายวา่ เราจะเร่มิ เรยี นรกู้ ารสงั่ งานหนุ่ ยนต์โดยใช้บอรด์ KidBright และให้นกั เรยี นชว่ ย กนั ตง้ั ชื่อหนุ่ ยนตข์ องตนเอง 6. ครูใหน้ กั เรยี นดคู ลิปวิดีโอ KidBright ตอนที่ 1 แนะนา� บอรด์ KidBright และโปรแกรม KidBright IDE จากนน้ั ต้งั ค�าถาม ใหน้ ักเรียนร่วมกันอภิปราย เช่น • เซนเซอร์ท่มี ใี นบอร์ด KidBright มีอะไรบา้ ง (เซนเซอร์ตรวจวดั ความสวา่ ง เซนเซอรต์ รวจวัดอุณหภมู )ิ • เซนเซอร์ที่สามารถเชื่อมต่อเพ่ิมเติมได้ มีอะไรบ้าง (เซนเซอร์วัดค่าความช้ืน เซนเซอร์วัดค่าความหนาแน่นของฝุ่น เซนเซอร์วดั คา่ ความสนั่ สะเทือน) • เมอื่ บอร์ดรับข้อมลู จากผใู้ ชม้ าแลว้ จะท�าอะไรต่อไป (ประมวลผล) • วิธีการเขียนโปรแกรมส่ังให้บอร์ด KidBright ท�างาน มีขั้นตอนอะไรบ้าง (ดาวน์โหลดโปรแกรม KidBright IDE เชื่อมตอ่ บอร์ดเขา้ กับคอมพวิ เตอร์ เขยี นชุดคา� สัง่ อัปโหลดชดุ ค�าสงั่ ลงบนบอรด์ KidBright) 12
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 ร้จู ัก 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
KidBright เป็นบอร์ดสมองกลฝังตัว (embedded board) ท่ีประกอบด้วย ไมโครคอนโทรลเลอร์ (microcontroller) จอแสดงผล (display) นาฬกิ าเรยี ลไทม์ (real-time clock) ลา� โพง (speaker) และเซนเซอร์แบบง่าย (simple sensors) โดยบอรด์ KidBright จะทา� งานตามคา� สงั่ ทผ่ี ใู้ ชส้ รา้ งขน้ึ ผา่ นการเขยี นโปรแกรมแบบบลอ็ ก (block-based programming) เพอ่ื ควบคมุ การท�างานของเซนเซอร์ต่าง ๆ บนบอร์ด KidBright รวมท้ังอุปกรณ์ตอ่ พ่วงจากภายนอก 1515
สมองกลฝงั ตวั คอื คอมพวิ เตอรข์ นาดจวิ๋ ทนี่ า� ไปฝงั ไวใ้ นอปุ กรณต์ า่ ง ๆ เพอื่ เพมิ่ ความสามารถของอปุ กรณน์ น้ั ๆ ผา่ นซอฟตแ์ วร์ ควบคุมการท�างานที่แตกต่างจากระบบประมวลผลในคอมพิวเตอร์ สมองกลฝังตัว ถูกใช้อย่างแพร่หลายในเครื่องใช้ไฟฟ้า ยานพาหนะ และอุปกรณส์ อ่ื สาร การทีส่ ามารถนา� ไปฝังไว้ในอปุ กรณต์ ่าง ๆ ทา� ให้มชี ือ่ เรยี กว่า “สมองกลฝังตวั ” 16
รูปท่ี 1 สว่ นประกอบตา่ ง ๆ บนบอรด์ KidBright ท่ีมา : ขอ้ มูลและรูปภาพจากหนงั สือ สนุก Kids สนกุ Code กับ KidBright โดย สวทช. 1717
การเปิดโปรแกรมสร้างชุดค�าสั่งใน KidBright IDE ส�าหรับระบบปฏิบัติการ Windows ท�าได้โดยการดับเบิ้ลคลิกไอคอน ของ KidBright IDE บนหน้าเดสก์ทอป (Desktop) จากนั้นจะปรากฏหน้าต่างของโปรแกรม KidBright IDE ซง่ึ มสี ว่ นประกอบของโปรแกรม ดงั ภาพ รูปท่ี 2 หน้าต่างของโปรแกรม KidBright IDE 18
รปู ที่ 3 ชอื่ เรยี กแทบ็ ตา่ ง ๆ บนโปรแกรม KidBright IDE 1919
อุปกรณ์ที่ใช้ 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. เปดิ โปรแกรม KidBright IDE บนเครอื่ งคอมพิวเตอร์ 2. คลิกท่กี ลมุ่ บลอ็ ก แล้วคลิกลาก บลอ็ ก LED 16x8 มาวางบนพ้นื ท่สี ร้างชดุ คา� ส่งั รปู ที่ 6 บล็อก LED 16x8 ทถ่ี กู วางบนหน้าต่างโปรแกรม KidBright IDE 3. คลิกช่องวา่ งจุดใดก็ได้ ในบล็อก LED 16X8 ใหเ้ ปน็ จดุ สแี ดง ตัวอยา่ งดังรปู ที่ 7 รปู ที่ 7 ตวั อย่างบลอ็ ก LED 16x8 ทถี่ ูกวางบนหน้าต่างโปรแกรม KidBright IDE 2121
4. คลกิ ปมุ่ สรา้ งโปรแกรม (Simulating program on virtual KidBright board) เพอื่ สง่ คา� สง่ั ไปยงั บอรด์ KidBright จากนนั้ จะพบหนา้ ตา่ งแจง้ สถานะการดา� เนนิ การดงั รปู ท่ี 8 ใหค้ ลกิ ปมุ่ OK (ถา้ ไมป่ รากฏ ขอ้ ความดงั ภาพตวั อยา่ ง แสดงวา่ มีขอ้ ผิดพลาดเกิดข้ึน ทา� ใหไ้ มส่ ามารถส่งโปรแกรมไปยงั บอรด์ KidBright ได)้ รปู ท่ี 8 หนา้ ตา่ งแสดงผลลัพธก์ ารสรา้ งโปรแกรมและการสง่ ผ่านโปรแกรมทส่ี ร้างได้ไปยงั บอรด์ KidBright 5. สังเกตผลลัพธ์ทีป่ รากฏบนบอร์ด KidBright 22
ให้นักเรยี นปฏบิ ัติตามขนั้ ตอนใหค้ รบทงั้ 4 ขอ้ ตอ่ ไปน้ี จากนั้นให้ ได้เวลาสัง่ ให้ เพื่อนตรวจสอบการท�างาน โดยท�าเคร่ืองหมาย √ ลงในช่องผล หนุ่ ยนตท์ า� งานแลว้ การตรวจสอบ มาเริ่มกันเลย !! ลงช่ือ………………………………………………………..ผตู้ รวจ 2323
กิจกรรมท่ี 2 หัวใจคดิ บอท จดุ ประสงค์การเรียนรู้ 1. เขียนโปรแกรม KidBright IDE เพื่อแสดงผลบนจอ LED ตวั ชีว้ ดั ว.4.2 ป.4/2 ออกแบบและเขียนโปรแกรมอย่างง่าย โดยใช้ซอฟต์แวร์หรือสื่อ ตรวจหาข้อผิดพลาดและแก้ไข
กิจกรรมท่ี 2 สาระการเรยี นรู้ 1. ออกแบบและเขยี นโปรแกรมอยา่ งง่าย 2. ตรวจสอบข้อผิดพลาดจากโปรแกรม แนวคดิ บล็อกค�าสั่ง LED 16x8 เป็นบล็อกท่ีใช้แสดงผลบนจอ LED ของบอร์ด KidBright โดยแสดงผล เป็นลักษณะของจุดเรียง ตัวกัน 16x8 จุด เราสามารถปิดหรือเปิดการแสดงผลในแต่ละจุด เพื่อให้เกิดภาพกราฟิกบนบอร์ด KidBright ได้ สือ่ และอุปกรณ์ ใบกจิ กรรม 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 จุด) 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 โดย สวทช. ดาวนโ์ หลดได้ที่ ! ขอ้ เสนอแนะ 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 รูปท่ี 2 บลอ็ ก LED 16x8 31
กิจกรรมท่ี 2 การใช้งานบล็อก LED 16x8 1. คลกิ ลากบลอ็ ก LED 16x8 จากกลมุ่ บล็อก วางบนพื้นที่สร้างชุดค�าส่ัง และคลิกจุดให้เป็นสีแดงตาม ตา� แหน่งภาพท่ตี ้องการ ดังรปู ท ี่ 3 รปู ท ี่ 3 ตวั อย่างการคลกิ จุดสแี ดงภายในบลอ็ ก LED 16x8 32
กจิ กรรมที่ 2 2. เมื่อคลิกจดุ เลอื กต�าแหนง่ เขียนภาพตามที่ต้องการเสรจ็ แลว้ ให้คลิกปุ่ม สรา้ งโปรแกรม จะปรากฏขอ้ ความแสดง กระบวนการสรา้ งโปรแกรมดังรปู ท ี่ 4 จากน้นั คลกิ ปุม่ OK เพ่อื ปดิ กล่องข้อความ รูปท ่ี 4 หนา้ ตา่ งแสดงผลลพั ธก์ ารสร้างโปรแกรมและการสง่ ผ่านโปรแกรมที่สรา้ งได้ไปยังบอร์ด KidBright 3. เม่ือแปลงชุดค�าส่ังเป็นภาษาเครื่องเรียบร้อยแล้ว รหัสภาษาเคร่ืองดังกล่าวจะถูกส่งผ่านสาย Micro USB ไปยังบอร์ด KidBright และแสดงผลทีห่ น้าจอของบอรด์ KidBright ดังรปู ที่ 5 รูปที่ 5 ผลลัพธท์ ่ีได้หลังจากการสรา้ งและโหลดโปรแกรมลงบนบอร์ด KidBright 33
กจิ กรรมที่ 2 ใบความรู้ท่ี 2.2 การบันทกึ และเปิดไฟล์ ของโปรแกรม KidBright การบนั ทกึ ไฟล์ 1. คลิกท่ีปมุ่ บนั ทกึ 2. จะปรากฏหน้าตา่ งบันทกึ ให้เลอื กโฟลเดอร์ทีต่ อ้ งการจะเกบ็ ไฟล ์ จากนั้นพมิ พช์ อ่ื ไฟล์ ในช่อง File name แลว้ คลิกป่มุ Save ดงั รปู ที่ 1 รูปท ่ี 1 หนา้ ตา่ งการบันทึกไฟล์ 34
กจิ กรรมท่ี 2 การเปิดไฟล์ 1. คลกิ ท่ปี มุ่ เปิดไฟล์ 2. คลิกที่คา� วา่ Choose File ดงั รูปท ่ี 2 รูปท ี่ 2 หน้าต่างการเปดิ ไฟล์ 3. จะปรากฏหน้าต่าง Open file ให้คลิกเลือกไฟลท์ ่ตี อ้ งการ ดงั รปู ท ่ี 3 จากน้นั คลกิ ปุ่ม Open รูปท ี่ 3 หน้าตา่ งการเปิดไฟลเ์ พือ่ เลอื กไฟลท์ ต่ี อ้ งการเปดิ 35
กจิ กรรมที่ 2 ใบกจิ กรรมท่ี 2 หวั ใจคิดบอท คาำ ชแ้ี จง 1. ให้นักเรยี นออกแบบหวั ใจของหนุ่ ยนต์ตามจินตนาการของนักเรียน โดยระบายสลี งในช่องวา่ งต่อไปน้ี 2. เขียนโปรแกรมให้หน้าจอแสดงผล LED บนบอร์ด KidBright แสดงภาพหัวใจตามภาพท่ีร่างไว้ สังเกตภาพท่ีแสดงบน หนา้ จอแสดงผล LED กบั ภาพท่ีรา่ งไว้วา่ เหมือนหรอื แตกตา่ งกนั หรือไม ่ หากแตกตา่ งกนั ให้แก้ไขเปน็ ไปตามแบบร่าง 36
กิจกรรมท่ี 2 แบบประเมนิ ชนิ้ งาน กจิ กรรมท่ี 2 เกณฑ์การประเมิน 37
กิจกรรมท่ี 3 Heart’s bot beat จุดประสงคก์ ารเรียนรู้ เขียนโปรแกรมแสดงภาพกราฟิกเคลื่อนไหวบนหน้าจอ แสดงผล LED ตวั ช้วี ดั ว.4.2 ป.4/2 ออกแบบและเขียนโปรแกรมอย่างง่าย โดยใช้ซอฟต์แวร์หรือสื่อ ตรวจหาข้อผิดพลาดและแก้ไข
กจิ กรรมท่ี 3 สาระการเรยี นรู้ 1. ออกแบบและเขยี นโปรแกรมสรา้ งภาพเคล่ือนไหว 2. ตรวจสอบข้อผิดพลาดจากโปรแกรม แนวคดิ ในการสรา้ งภาพเคลอื่ นไหวนน้ั สามารถใชบ้ ลอ็ กคา� สง่ั ตา่ ง ๆ รว่ มกนั เชน่ บลอ็ กคา� สง่ั LED 16x8 บลอ็ ก Delay (หนว่ งเวลา) บล็อก Forever (วนซ้�าไม่ส้ินสุด) โดยเม่ือน�าบล็อก Forever ซึ่งอยู่ในกลุ่มบล็อก Basic (พ้ืนฐาน) มาครอบค�าสั่งเพ่ือให้ แสดงผลซา�้ ไม่สน้ิ สุด สือ่ และอปุ กรณ์ ใบกจิ กรรม 40
กิจกรรมที่ 3 แนวทางการจดั การเรยี นรู้ การจัดเตรยี ม 1. ใบกจิ กรรมตามจา� นวนนกั เรยี น 2. เครอ่ื งคอมพิวเตอร ์ ทตี่ ดิ ตงั้ โปรแกรม KidBright IDE 3. บอรด์ KidBright พรอ้ มสาย Micro USB ข้นั ตอนดาำ เนนิ การ 1. ครูทบทวนความรู้ท่ีได้เรียนในชั่วโมงท่ีแล้ว เก่ียวกับการสร้างหัวใจให้หุ่นยนต์ โดยต้ังค�าถามว่าใช้บล็อกค�าสั่งอะไรบ้าง (บลอ็ กค�ำสัง่ LED 16x8) 2. ครูเปิดคลิปวิดีโอการสร้างภาพเคล่ือนไหว (animation) อย่างง่าย จากการใช้กระดาษโน้ต โดยครูอธิบายเพ่ิมเติม เน่ืองจากเสียงบรรยายในคลิปวิดีโอเปน็ ภาษาองั กฤษ จากน้นั ตัง้ คา� ถามให้นักเรยี นอภิปรายร่วมกนั เช่น • คลปิ วิดโี อทีน่ ักเรียนไดช้ มมีเน้อื หาเกีย่ วกบั อะไร (กำรสร้ำงภำพเคลือ่ นไหวจำกกระดำษโน้ต) • วิธกี ารในการสรา้ งภาพเคลื่อนไหวจากคลปิ วิดโี อเปน็ อย่างไร (วำดภำพลงในกระดำษแต่ละแผ่นไม่เหมือนกันแต่เปน็ ภำพที่มีควำมต่อเน่ืองกัน จำกนั้นเปิดกระดำษให้แสดงทีละแผ่นอย่ำงรวดเร็ว ภำพที่เห็นจะมองเหมือน ภำพเคลอ่ื นไหว) 3. ครูอธิบายเพ่ิมเติมว่าเม่ือเรามองภาพท่ีอยู่บนกระดาษแต่ละแผ่นซึ่งเป็นภาพท่ีมีความต่อเนื่องกัน เราจะเห็นเหมือนกับ ว่าภาพน้ันมีการเคล่ือนไหว ซึ่งเกิดจากความแตกต่างหรือความต่อเน่ืองกันของภาพแต่ละภาพ เช่น ขยับต�าแหน่ง เปล่ียนรูปร่าง เปลี่ยนขนาด ครูต้ังค�าถามให้นักเรียนร่วมกันอภิปรายว่า นักเรียนคิดว่าเราสามารถสร้างภาพลักษณะนี้ โดยใชบ้ อรด์ KidBright ได้หรือไม ่ และมีวิธกี ารอย่างไร 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 โดย สวทช. ดาวน์โหลดได้ที่ ! ข้อเสนอแนะ 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 ทา� งานวนซา้� ไปเร่ือย ๆ ไมม่ ที ่ีสิ้นสุด หรอื สน้ิ สุดเม่อื ตรงตามเงอ่ื นไขทกี่ า� หนดไว้ ตวั อยา่ ง รปู ท่ี 2 การใชง้ านบลอ็ กคาำ สัง่ Forever จากชุดคา� ส่งั ดงั รูปท่ี 2 (ก) เม่ือคลิกปุ่ม สร้างโปรแกรม หน้าจอแสดงผล LED ของบอร์ด KidBright จะแสดงผล เป็นตัวอักษร C O และ M ตามล�าดับแล้วจบการท�างาน แต่เม่ือน�าบล็อกค�าส่ัง Forever มาครอบชุดค�าส่ังท้ังหมดไว้ ดังรปู ท ่ี 2 (ข) แลว้ ส่งั แสดงผล จะปรากฏตัวอักษร C O และ M ตามลา� ดบั วนแสดงผลซ�้าไปเรอ่ื ย ๆ ไม่สิน้ สุด 46
กิจกรรมที่ 3 บล็อก Delay บล็อกค�าส่ัง Delay (หน่วงเวลา) อยู่ในกลุ่มบล็อก Basic (พื้นฐาน) เป็นบล็อกค�าสั่งท่ีถูกใช้เพื่อหน่วงเวลาการท�างาน สามารถก�าหนดเวลาได้โดยมีหน่วยเป็นวินาที ตวั อยา่ ง รูปท่ี 3 การใช้งานบล็อกคำาสงั่ Forever จากชุดค�าส่ังรูปท่ี 3 (ก) จอแสดงผลของบอรด์ KidBright จะแสดงผลเปน็ ตวั อักษร C O และ M ตามลา� ดับซา�้ ไปเรื่อย ๆ แต่ เม่ือเพ่มิ บลอ็ กค�าสงั่ Delay ระหวา่ งบล็อกคา� สง่ั LED 16x8 ดงั รปู ที ่ 3 (ข) แลว้ จะมกี ารหน่วงเวลาในการแสดงผลตามเวลา ที่กา� หนดคือ 0.5 วนิ าท ี เมอ่ื ครบก�าหนดแลว้ ก็จะทา� บล็อกคา� สั่งถัดไป จึงทา� ใหจ้ อแสดงผลของบอร์ด KidBright แสดงผลตัว อกั ษรแตล่ ะตัวนานขึ้นกวา่ เดิม 47
กจิ กรรมที่ 3 บล็อก Clear LED 16x8 ใชใ้ นการลา้ งภาพทั้งหมดบนหนา้ จอ LED ตัวอยา่ งการสร้างภาพเคลื่อนไหว ตวั อย่างที่ 1 1. เขียนโปรแกรมโดยใช้บล็อก Forever บล็อก LED 16x8 และบล็อก Delay ดังรูปท ี่ 4 2. ทดลองเปลย่ี นคา่ ในบลอ็ ก Delay แลว้ สังเกตผลทไ่ี ด้ รปู ที่ 4 ตัวอยา่ งการเขยี นโปรแกรมโดยใชบ้ ลอ็ ก Forever บลอ็ ก LED 16x8 และบล็อก Delay ตัวอย่างที่ 2 1. เขียนโปรแกรมโดยใช้บล็อก Forever บล็อก LED 16x8 และบล็อก Delay จากน้ันคลิกขวาที่บล็อก LED 16x8 แล้วคลิกเลือก Duplicate (คัดลอก) เพอื่ คัดลอกบล็อก ดงั ตัวอยา่ ง รปู ท่ี 5 การใชง้ านคำาสง่ั Duplicate (คัดลอก) เพือ่ คัดลอกบล็อก 48
Search
