EP.5 กำเนิดโปรแกรมเมอร์: แปลงแผนงานสู่โค้ด Scratch

By Admin
436
26 ก.พ. 2569

EP.5 กำเนิดโปรแกรมเมอร์: แปลงแผนงานสู่โค้ด Scratch

ได้เวลาลงมือจริง! นำผังงานมาต่อบล็อกคำสั่งสร้างโปรแกรมใน Scratch Online และเรียนรู้วิธีนำโค้ด (Embed) มาส่งงานบนเว็บไซต์ SmartyQuizKids

💻 ขั้นตอนที่ 5: กำเนิดโปรแกรมเมอร์

(สรุปผลการแก้ปัญหาและลงมือเขียนโปรแกรม Scratch)

🎯 ภารกิจของเรา

เปลี่ยนจาก "นักออกแบบ" มาเป็น "โปรแกรมเมอร์" อย่างเต็มตัว! นำพิมพ์เขียวที่วาดไว้มาต่อบล็อกคำสั่ง ทดสอบจนสำเร็จ แล้วนำโค้ดมาส่งคุณครู

1. จากกระดาษ สู่หน้าจอ (From Blueprint to Code)

มาถึงขั้นตอนนี้ น้องๆ มีแผนที่นำทาง (ผังงาน/Flowchart) อยู่ในมือแล้ว สิ่งที่ต้องทำต่อไปคือการเข้าไปที่เว็บไซต์ Scratch Online แล้วแปลงสัญลักษณ์ในผังงาน ให้กลายเป็นบล็อกคำสั่งครับ

💡 เคล็ดลับ: วางผังงานไว้ข้างๆ หน้าจอคอมพิวเตอร์ แล้วค่อยๆ ต่อบล็อกไล่ไปทีละสัญลักษณ์ จะช่วยให้ไม่หลงลืมคำสั่งสำคัญครับ!

2. เคล็ดลับโปรแกรมเมอร์ระดับเซียน (Best Practice)

ในขั้นตอนการ แสดงผลลัพธ์ (Output / รหัสสีเขียว 🟢) ถ้าเราสั่งให้ตัวละครพูดแค่ตัวเลขโดดๆ (เช่น พูดว่า "5000") คนที่ใช้งานโปรแกรมของเราจะงงว่า 5000 คืออะไร? น้ำหนัก? ส่วนสูง? หรือระยะทาง?

🌟 การแสดงผลแบบสมบูรณ์แบบ (ได้คะแนนเต็ม 100%)

เราต้องใช้บล็อกตัวดำเนินการ (สีเขียว) ที่ชื่อว่า "ต่อข้อความ..." (Join) มาช่วยเชื่อมตัวเลขเข้ากับคำอธิบายและหน่วยวัดครับ ตัวละครของเราถึงจะพูดออกมาได้อย่างฉลาดและน่าฟัง!

ลากบล็อกสีเขียวมาซ้อนกันในบล็อกพูด (Say) แบบนี้ครับ:

พูด ต่อข้อความ ต่อข้อความ [ระยะทาง ] และ (ตัวแปร) และ [ เมตร] เป็นเวลา 2 วินาที

💬 ผลลัพธ์หน้าจอ: "ระยะทาง 5000 เมตร"

3. วิธีก๊อปปี้โค้ดมาส่งงาน (How to Embed)

เมื่อทดสอบโปรแกรมจนทำงานได้สมบูรณ์แบบแล้ว เราจะมาส่งผลงานกันครับ แต่ช้าก่อน! เราไม่ได้ส่งแค่ลิงก์ URL ธรรมดานะครับ แต่เราจะฝัง "โค้ด Iframe" เพื่อให้คุณครูตรวจผลงานและกดเล่นเกมของเราได้บนเว็บไซต์นี้เลย! ทำตามขั้นตอนนี้ได้เลย:

ตรวจสอบให้แน่ใจว่าน้องๆ กดปุ่ม "Share" (แชร์) โปรเจกต์ใน Scratch แล้ว (ปุ่มสีส้มด้านบนตรงกลาง)
คลิกที่ปุ่ม "Copy Link" (คัดลอกลิงก์) ที่อยู่ด้านล่างขวาของหน้าจอโปรเจกต์
มองหาหัวข้อที่เขียนว่า "Copy embed" (คัดลอกรหัสฝัง) แล้วกดปุ่มคัดลอก
กลับมาที่เว็บไซต์ SmartyQuizKids วางโค้ดที่คัดลอกมาลงในช่องส่งงาน แล้วกด "บันทึก" เป็นอันเสร็จสิ้น!

                ตัวอย่างหน้าตาโค้ดที่ถูกต้อง:

                [iframe src="https://scratch.mit.edu/projects/12345/embed" allowtransparency="true" width="485" height="402" frameborder="0" scrolling="no" allowfullscreen=""][/iframe]

✍️ มินิควิซ ทบทวนความรู้ (ขั้นตอนที่ 5)

เช็คความพร้อม ก่อนไปลุยเขียนโค้ดของจริง! (คลิกที่ตัวเลือกเพื่อดูเฉลย)

ระดับ: ความเข้าใจ

ข้อที่ 1: ก่อนที่จะเริ่มลากบล็อกคำสั่งในโปรแกรม Scratch สิ่งที่นักเรียนควรนำมากางไว้ข้างหน้าจอเพื่อใช้เป็น "แผนที่นำทาง" คืออะไร?

ก. คู่มือการเลือกสีและออกแบบตัวละคร

❌ ยังไม่ใช่นะครับ: การตกแต่งความสวยงามเอาไว้ทีหลังสุดครับ เราต้องสร้างระบบการทำงานให้เสร็จก่อน

ข. ผังงาน (Flowchart) ที่เราได้ออกแบบไว้ในขั้นตอนที่ 4

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

ค. โค้ดโปรแกรมของเพื่อนที่ทำเสร็จแล้ว

❌ ยังไม่ใช่นะครับ: การดูโค้ดเพื่อนจะทำให้เราไม่ได้ฝึกกระบวนการคิดเชิงคำนวณด้วยตัวเองนะครับ

ง. เครื่องคิดเลข

❌ ยังไม่ใช่นะครับ: คอมพิวเตอร์มีหน้าที่คิดเลขแทนเราครับ เราแค่ต้องบอกวิธีคิดให้มันผ่านบล็อกคำสั่งเท่านั้นเอง

ระดับ: การนำไปใช้

ข้อที่ 2: หากต้องการให้โปรแกรม Scratch พูดคำตอบว่า "ระยะทาง 5000 เมตร" นักเรียนต้องใช้บล็อกคำสั่งใดมาช่วย?

ก. บล็อก "พูด (ระยะทาง)" + บล็อก "พูด (5000)" ต่อกัน 2 บล็อก

❌ ยังไม่ใช่นะครับ: ถ้าทำแบบนี้ ตัวละครจะพูดทีละคำแล้วหายไปครับ ไม่ได้โชว์เป็นประโยคเดียวกันยาวๆ

ข. บล็อก "ถาม (ระยะทาง 5000 เมตร) และรอ"

❌ ยังไม่ใช่นะครับ: บล็อก "ถาม...และรอ" เอาไว้ใช้สำหรับ รับค่า (Input) ครับ ไม่ใช่เอาไว้แสดงผลลัพธ์

ค. บล็อกตัวดำเนินการสีเขียว "ต่อข้อความ (apple) และ (banana)"

✅ ถูกต้องครับ! สุดยอดนักพัฒนา! เราต้องใช้บล็อก "ต่อข้อความ" เพื่อเชื่อมคำศัพท์ภาษาไทยเข้ากับกล่องตัวแปรครับ ผลลัพธ์ถึงจะออกมาสมบูรณ์แบบ

ง. พิมพ์คำว่า "ระยะทาง 5000 เมตร" ลงในกล่องตัวแปร

❌ ยังไม่ใช่นะครับ: กล่องตัวแปรจะเก็บได้แค่ตัวเลขจากการคำนวณครับ เราพิมพ์ข้อความผสมลงไปตรงๆ ไม่ได้

ระดับ: ความจำ

ข้อที่ 3: โค้ดที่ถูกต้องสำหรับการนำมา "ฝัง" (Embed) เพื่อให้เพื่อนสามารถเล่นเกม Scratch บนเว็บนี้ได้เลย ต้องขึ้นต้นด้วยคำสั่งใด?

ก. [https://scratch.mit.edu/...]

❌ ยังไม่ใช่นะครับ: นี่คือลิงก์ URL ธรรมดา ถ้านำมาวาง ระบบจะไม่แสดงหน้าจอเกมครับ

ข. [iframe src="..."]

✅ ถูกต้องครับ! เป๊ะมาก! คำสั่ง iframe คือคำสั่งสากลที่อนุญาตให้นำหน้าเว็บอื่นมาแสดงผลฝังไว้ในเว็บของเราได้ครับ

ค. [scratch game="..."]

❌ ยังไม่ใช่นะครับ: ในภาษาคอมพิวเตอร์ไม่มีคำสั่งชื่อนี้นะครับ

ง. ลืมกดปุ่ม Share เลยไม่ได้ก๊อปปี้มา

❌ อ้าว! ไม่ได้นะครับ: ถ้านักเรียนไม่กดปุ่ม Share (แชร์) ในหน้า Scratch ก่อน จะไม่มีปุ่มให้คัดลอกโค้ด Embed นะครับ!

💡 พบข้อผิดพลาดหรือมีข้อเสนอแนะ?

หากนักเรียนหรือคุณครูพบจุดที่ควรแก้ไขในบทเรียน/แบบทดสอบนี้ หรือมีข้อเสนอแนะเพิ่มเติม สามารถแจ้งครูพิสิฐเพื่อนำไปปรับปรุงเนื้อหาให้สมบูรณ์ยิ่งขึ้นได้เลยครับ
(ขอบคุณที่ร่วมเป็นส่วนหนึ่งในการพัฒนาการเรียนรู้ไปด้วยกันครับ)

✉️ ส่งอีเมลแจ้งครูพิสิฐ

แชร์ :

เริ่มต้น / สิ้นสุด 💊 แคปซูล	➡️	บล็อกเหตุการณ์ / ควบคุม เมื่อคลิก ⛳
รับข้อมูล / แสดงผล ▱ สี่เหลี่ยมด้านขนาน	➡️	บล็อกตรวจจับ / รูปลักษณ์ ถาม ... แล้วรอ
ประมวลผล / คำนวณ ▭ สี่เหลี่ยมผืนผ้า	➡️	บล็อกตัวแปร / คำนวณ ตั้งค่า [ตัวแปร] เป็น ...
ตัดสินใจ / เงื่อนไข ⬦ สี่เหลี่ยมข้าวหลามตัด	➡️	บล็อกเงื่อนไข (If-Else) ถ้า ... แล้ว