Block-based Visual Programming

สวัสดีค่าทุกค๊นนนน วันนี้ Futurequest มีคอนเท้นท์ดีๆมานำเสนออีกเเล้วค่า ในหัวข้อ Introduction to Block-based Visual Programming 😋

ซึ่งคอนเท้นท์ในวันนี้นะคะ ได้รับเนื้อหาต้นทางจากทางแอดมินโจ๋ เทพเเห่ง coding 🧑🏻‍💻 ของพวกเราชาว Futurequest ส่วนแตงโมเป็นผู้เรียบเรียงเนื้อหาให้อ่านกันแบบง่ายๆสนุกๆ และเอามาแชร์ให้ทุกคนได้อ่านกัน (หรืออ่านเเล้วจะยากกว่าเดิมน๊าาา 😂) เอาล่ะเอาล่ะะะะะ ถ้าเพื่อนๆพร้อมแล้ว ไปลุยกันเล้ยยยยค่าาาา ฮู่เร่เย้เย้ 🥳

เนื้อหาสำหรับ blog นี้

Block Programming คืออะไร?

ถ้าหากเราพูดถึงคำว่า “การเขียนโปรเเกรม” สำหรับเพื่อนๆมือใหม่คงจะฟังดูยุ่งยากใช่มั้ยคะ
แต่จริงๆแล้วเนี้ย มีวิธีที่ง่ายและสนุกกว่ามากในการเริ่มต้นเรียนรู้การฝึกเขียนโปรแกรม เจ้าสิ่งนั้นก็คือ Block-based visual Programming หรือเรียกสั้นๆว่า Block Programming ก็ได้ค่า ซึ่งมันก็คือการเขียนโปรแกรมแบบ ลากวาง (drag-and-drop) นั่นเอง

ซึ่งเจ้าตัว Block Programming ก็คือวิธีการเขียนโปรแกรมที่ใช้การลากบล็อค ซ้อนๆกันเหมือนต่อจิ๊กซอว์ แทนการเขียนคำสั่งเเบบยากๆที่เราเคยเห็นโปรเเกรมเมอร์เค้าทำกัน 🧩🧩

เพื่อนๆลองจินตนาการดูนะคะ สมมุติว่าเรากำลังเล่นบล็อกตัวต่ออยู่ แต่ละบล็อกจะเปรียบ
เสมือนเเต่ละคำสั่ง การลากและต่อบล็อก ก็คือการต่อคำสั่งทางโปรเเกรมมิ่งเข้าด้วยกันทีละอันๆ พอเห็นภาพกันมั้ยคะ ง่ายนิ๊ดเดียววววเอ๊งงงง 😁

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

ทำไม Block Programming ถึงเหมาะกับมือใหม่?

การฝึกเขียน Block Programming เนี้ย มีประโยชน์มากๆเลย เนื่องจากว่า

• ✅เห็นผลทันที: เช่น เราสามารถเห็นตัวการ์ตูน (ตัวละคร) ของเราเคลื่อนที่หรือมีเสียงประกอบได้ทันทีที่เรากดรันโปรแกรม
• ✅ง่ายต่อการเรียนรู้: เพียงแค่ลากและต่อบล็อกก็สามารถสร้างโปรแกรมได้เลย ไม่ต้องหัด coding ถือเป็นจุดเริ่มต้นในการเรียนรู้ที่ดีเลย
• ✅หมดปัญหาเรื่องไวยากรณ์ (syntax): ไม่จำเป็นต้องจำหรือพิมพ์คำสั่งที่ซับซ้อนเหมือนการเขียนโค้ดโดยทั่วไป

ทั้งหมดเนี้ยจึงเป็นเหตุผลว่าทำไม Block Programming จึงเป็นเครื่องมือเริ่มต้นที่ดีสำหรับผู้ที่อยากเริ่มต้นเรียนรู้การเขียนโปรแกรม

เอาล่ะค่าาา เราไปกันต่อเล้ยย สำหรับเครื่องมือการเขียน Block Programming ยอดนิยม

รู้จักกับ Scratch แพลตฟอร์มยอดนิยมสำหรับ Block Programming

Scratch เป็นแพลตฟอร์ม Block Programming ที่พัฒนาโดย MIT (ว๊าวววววว) ซึ่งได้รับความนิยมอย่างสูงทั่วโลกเลยค่ะ เพราะว่าเหมาะสำหรับผู้ที่เริ่มต้นเขียนโปรแกรมครั้งแรก เนื่องจากว่ามีหน้าตาใช้งานง่าย มีตัวละคร (Sprite) และเสียงให้เลือกใช้หลากหลาย นอกจากนี้ยังมี online community ที่ช่วยแบ่งปันและสนับสนุนการเรียนรู้ของเราให้สนุกมากยิ่งขึ้นนั่นเอ๊งง เยี่ยมมากเลยค่าาา เย้เย้ 😃

ทีนี้ เพื่อนๆพร้อมจะเริ่มสร้างโปรเจคด้วยการเขียน Block Programming หรือยังคะ เรามา
ลุยกันเล้ยยย

เริ่มต้นสร้างโปรเจคแรกกับ Scratch

1. สร้าง account สำหรับบันทึกโปรเจค

• ไปที่ https://scratch.mit.edu/projects/editorClick Join Scratch

• ใส่ username และ password

• Click Next และกรอกข้อมูลอื่นๆ ตามขั้นตอนที่ทาง Scratch แนะนำ
• ขั้นตอนสุดท้ายเพื่อนๆก็แค่กรอก email และเลือก Create Your Account

• หลังจากนั้นเมื่อเรา login จะได้หน้าตาโปรแกรมแบบนี้เลยค่า ซึ่งเราสามารถตั้งชื่อ
  โปรเจคเเรกได้ตามใจ ตรงแถบด้านบนตรงกลางของหน้าต่างค่ะ

2. เลือกตัวการ์ตูนที่ชอบ (Sprite)

เลือก Sprite ที่เพื่อนๆชอบจากตัวเลือกใน Scratch ได้เลยจากสัญลักษณ์น้องแมวกลมๆสีม่วงที่มุมจอขวาล่าง พอเลือกแล้วจะมีตัว Sprite ขึ้นมาเพียบเลย น่ารักม๊ากกก ❤️

3. สร้างคำสั่งให้ Sprite เคลื่อนไหวและทักทาย

ต่อมาเรามาสร้างให้ตัวการ์ตูนของเราเคลื่อนไหวได้กันดีกว่าค่า

ในชุดคำสั่งต่างๆ ซึ่งแทนด้วยบล็อก จะมีด้วยกันหลายหมวดหมู่ทางหน้าจอด้านซ้ายมือ เช่นหมวด Event (สีเหลือง 🟡 yellowwwww แฮร่ 😂) ยกตัวอย่างเช่นบล็อกในรูปนี้นะคะ คือบล็อก when green flag clicked ซึ่งหมายความว่าจะเป็นการเริ่มทำอะไรสักอย่างเมื่อเรา คลิกไอคอนธงสีเขียว ซึ่งก็คือปุ่ม run นั่นเอง

• จากนั้น ต่อด้วยการวางบล็อก move 10 steps (กลุ่ม Motion สีน้ำเงิน 🔵)
• และเพิ่มบล็อก say 'Hello!' for 4 seconds (กลุ่ม Looks สีม่วง 🟣) ซึ่งสำหรับจำนวนครั้ง หรือระยะเวลาในแต่ละบล็อกเราสามารถกำหนดได้นะคะ ด้วยการเปลี่ยนตัวเลข default เป็นตัวเลขที่เราต้องการค่า ง่ายนิ๊ดดดเดียวว
• เมื่อต่อแต่ละบล็อคเสร็จแล้วก็จะได้รูปร่างหน้าตาแบบนี้เลย เย้เย้

เอาล่ะ แล้วเจ้าโปรแกรมตัวนี้มันทำงานยังไงกันน๊า อ่านคำอธิบายด้านล่างนี้ได้เลยค่า

ก่อนอื่นเรามาลองทำความเข้าใจคำสั่งไปที่ละบล็อกกันก่อนนะคะ

• บล็อกแรก when green flag clicked เป็นคำสั่งเอาไว้ตรวจจับเหตุการณ์ที่ผู้ใช้ คลิกที่สัญลักษณ์รูปธงสีเขียว เมื่อมีการคลิกเกิดขึ้นก็จะมีการส่งสัญญาณไปสั่งให้บล็อกถัดไปเริ่มทำงาน

• ต่อมาจะเป็นบล็อก move 10 steps คือการสั่งให้ตัวละครเคลื่อนที่ไปข้างหน้า
  หน่วย โดยเราสามารถเปลี่ยนเลข 10 เป็นค่าอื่นได้ตามต้องการ จากตัวอย่างเราจะเห็นว่าตัวละครหันหน้าไปทางขวา ทำให้เมื่อเราคลิกที่ธงแต่ละครั้งตำแหน่งในแกน x จะเปลี่ยนไปทีละ 10 หน่วย

• บล็อกสุดท้ายคือ say Hello! For 2 seconds คือการทำให้ตัวละครเเสดงข้อความ Hello! คล้ายๆเป็นการพูด เป็นเวลา 2 วินาที เเล้วหลังจากนั้นข้อความก็จะหายไป โดยเราสามารถเปลี่ยนข้อความเเละระยะเวลาเป็นค่าอื่นได้ (ในที่นี้จะเปลี่ยนเป็น
  4 วินาทีค่ะ)

• เมื่อนำทั้งหมดมาเรียงก็กันก็จะเกิดการทำงานต่อกันเป็นทอดๆจากบนลงล่าง

Note: ช่องวงรีสีขาวในบล็อกต่างๆ เราสามารถเปลี่ยนเเปลงค่าในนั้น หรือจะนำตัวแปรมาใส่แทนก็ได้นะคะ เช่นในตัวอย่างนี้บล็อก say Hello! For 2 seconds ค่าระยะเวลาการแสดงข้อความถูกเปลี่ยนจาก 2 วินาที เป็น 4 วินาทีตามตัวอย่างข้างบนที่อธิบายไปค่าาา

4. สร้างการเคลื่อนไหวแบบต่อเนื่องด้วย Loop

จากตัวอย่างก่อนหน้านี้เราจะเห็นว่าเราต้องคอยคลิกที่ธงหลายๆครั้งเพื่อให้ตัวละครเคลื่อนที่อย่างต่อเนื่องใช่ไหมคะ ซึ่งเรามีวิธีที่ง่ายกว่านั้นด้วยการใช้บล็อก forever และเพิ่มความ
ท้าท้ายเข้าไปอีกเล็กน้อยด้วยการ ทำให้ตัวละครของเราเนี้ย เคลื่อนที่ถอยหลังเมื่อไปชนกับขอบ เเละ Say Hello เมื่ออยู่ที่ตำแหน่ง x = 0 เท่านั้น ป่ะป่ะ ไปลุยกันเลยค๊าาา

อันดับเเรกเราจะมาสร้างตัวแปรไว้สำหรับเก็บค่าของ จำนวน step ที่จะเคลื่อนที่ในแต่ละครั้ง เเละ ทิศทางของการเคลื่อนที่ (+) หมายถึงเดินหน้า (-) หมายถึงถอยหลัง

• ไปที่ Variables -> Make a Variable

• ตั้งชื่อตัวแปรว่า number_of_step
• หลังจากสร้างตัวแปรเสร็จเเล้ว ก็จะได้บล็อกไว้สำหรับทำงานกับตัวแปรมาดังภาพข้างล่างนี้ค่า

ต่อมาเราก็สามารถสร้างโปรเเกรมต่อได้เลย โปรแกรมที่เสร็จเเล้วก็จะหน้าตาแบบนี้ค่า เพื่อนๆอ่านคำอธิบายด้านล่างรูปภาพได้เลยน๊า

• set x to 0 และ set y to 0 เป็นการสั่งให้ตัวละครกลับมาเริ่มต้นที่จุด (0,0) ทุกครั้ง
• set number_of_step to 5 เป็นการกำหนดค่าเริ่มต้นให้กับตัวแปร
• forever เป็นคำสั่งที่ใช้ในการวนลูปทำซ้ำๆแบบไม่มีที่สิ้นสุดจนกว่าจะกดหยุดโปรแกรม
• move number_of_step steps เป็นการสั่งให้ตัวละครเคลื่อนที่ โดยนำค่าจากตัวแปรมาใช้
• if <condition> then [statement] เป็นการเรียกใช้บล็อกที่อยู่ภายใน (statement) เมื่อเงื่อนไข <condition> เป็นจริง
• โดยบล็อกif then อันเเรกหมายความว่า ถ้าตำเเหน่ง x มีค่าเป็น 0 ให้เรียกบล็อก say Hello! For 2 seconds

• อันถัดไปหมายความว่า ถ้าตัว sprite ไปชนกับขอบของ stage ให้กำหนดค่าตัวแปร nember_of_step ใหม่ โดย เอาค่าเดิมไปคูณกับ -1 เพื่อทำให้เครื่องหมายเปลี่ยนเป็นตรงกันข้าม จึงทำให้ตัวละคร sprite สามารถเปลี่ยนจากการเคลื่อนที่จากเดินหน้าเป็นถอยหลัง เเละจากถอยหลังเป็นเดินหน้าได้
• เพื่อนๆสามารถดูเฉลยวิธีการสร้างโปรเเกรมละการเคลื่อนที่ของน้องแมวน้อย sprite
  จากลิ้งด้านล่างนี้นะค๊า

• เสร็จแล้วอย่าลืมบันทึกโปรเจคกันน๊า
  

สรุป

Block-based Visual Programming ที่เราเรียนผ่านกันไป เหมาะสำหรับเพื่อนๆที่เริ่มต้นเรียนรู้การเขียน programming เพราะไม่ต้องพิมพ์โค้ดที่ยุ่งยากซับซ้อน ทำให้ผู้ใช้สามารถเรียนรู้หลักการเขียนโปรแกรมและ logic ได้อย่างรวดเร็ว เหมาะสำหรับการใช้เป็นก้าวแรกก่อนเข้าสู่การเขียนโปรแกรมเชิงข้อความ (Text-based Programming) 👍🏻

นอกจากนี้นะคะ การฝึกเขียน Block-based Visual Programming ด้วย Scratch ก็ยังมีเครื่องมือและ online community ที่เอาไว้คอยแลกเปลี่ยนความรู้อีกด้วย

พวกเราชาว Futurequest คิดว่าเจ้าเครื่องมือตัวนี้เนี้ยถือเป็นจุดเริ่มต้นที่ดีในการฝึกทักษะการเขียนโปรแกรมสำหรับเพื่อนๆที่เป็นมือใหม่ค่ะ

เอาล่ะะะะ จบไปแล้วนะคะสำหรับ blog ของเราวันนี้

วันนี้แตงโมเเละ Futurequest ขอลาไปก่อนนะคะ

ถ้าเพื่อนๆชอบคอนเท้นท์ของเรา สามารถ subscribe newsletter ของพวกเราด้วยนะค๊า

เยิ้ฟๆค่า 🥳💕