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

By Admin
367
26 ก.พ. 2569

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

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

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

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

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

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

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

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

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

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

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

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


                กลับมาที่เว็บไซต์ SmartyQuizKids วางโค้ดที่คัดลอกมาลงในช่องส่งงาน แล้วกด "บันทึก" เป็นอันเสร็จสิ้น!


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

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



    
        
            ✍️ มินิควิซ ทบทวนความรู้ (ขั้นตอนที่ 5)
            เช็คความพร้อม ก่อนไปลุยเขียนโค้ดของจริง!
        
        
        
            
            
                ข้อที่ 1: ก่อนที่จะเริ่มเขียนโปรแกรมต่อบล็อกคำสั่งใน Scratch สิ่งที่น้องๆ ควรทำคือข้อใด?
                
                    
                    
                    
                
                
            

            
                ข้อที่ 2: ก่อนที่น้องๆ จะสามารถคัดลอกโค้ดลิงก์มาส่งงานได้ ต้องทำสิ่งใดเป็นอันดับแรกในเว็บ Scratch?
                
                    
                    
                    
                
                
            

            
                ข้อที่ 3: โค้ดที่ถูกต้องสำหรับการนำมาวางส่งงานในหน้าเว็บนี้ ควรมีหน้าตาเริ่มต้นคล้ายกับข้อใด?

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

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

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

แชร์ :