🌟ทำความรู้จักกับ Blockly

Blockly คือ โครงการจากทาง Google for Education เพื่อให้ผู้ที่สนใจเขียนโปรแกรม สามารถเรียนรู้ได้ง่าย และสามารถเขียนโปรแกรมได้ด้วยการต่อชิ้นส่วน Block คล้าย Lego เลยหล่ะ 🤫

เราลองมาดูตัวอย่าง หน้าตา Blockly ไปพร้อมๆ กัน

ภาพตัวอย่างที่ 1 - รูปแบบ Blockly

สำหรับ Blockly เปิดให้เราสามารถสร้างชิ้นส่วน Block เป็นของตนเองได้ เพื่อนำไปต่อเพื่อเขียนโปรแกรมนั่นเอง บางคน อาจจะยังไม่เข้าใจ ลองมาอธิบายตามภาพทีละขั้นตอนกัน ✌🏻

ข้อควรรู้ : Blockly พัฒนาด้วยภาษา JavaScript รวมถึงการทำงานของ Blockly

ภาพตัวอย่างที่ 2 - การเขียนโปรแกรมตรวจสอบเงื่อนไข ผ่านการต่อชิ้นส่วน Block

ตัวอย่างภาพที่ 2 เป็นการต่อชิ้นส่วน Block เพื่อตรวจสอบตามค่าตัวแปรตามเงื่อนไข โดยอธิบายขั้นตอนแต่ละ Block ได้ดังนี้

ภาพตัวอย่างที่ 3 - ชิ้นส่วน Block ประกาศตัวแปร และตั้งค่าเริ่มต้นเป็นตัวเลข 100

ตัวอย่างภาพที่ 3 เป็นการนำชิ้นส่วน Block 2 ส่วน นำมาต่อกัน โดยแยกออกเป็น

1. Block ประกาศตัวแปรชื่อ Count

2. Block ตั้งค่าเริ่มต้นให้กับตัวแปรชื่อ Count มีค่าเท่ากับ 100

ภาพตัวอย่างที่ 4 - ชิ้นส่วน Block การตรวจสอบเงื่อนไข

ตัวอย่างภาพที่ 4 แสดงให้เห็นถึงชิ้นส่วนแต่ละ Block ก่อนนำมาประกอบกัน โดยประกอบไปด้วย Block ดังนี้

1. Block ตรวจสอบเงื่อนไข ถ้าเงื่อนไขเป็นจริง ให้ทำงานใน Block ข้างใน do
2. Block เปรียบเทียบ ทั้งสองข้าง ว่าตรงกันหรือไม่ โดยจะใช้เครื่องหมาย =
3. Block ตัวแปรชื่อ Count ที่ประกาศไว้ตั้งแต่ตอนต้น
4. Block ตัวเลขที่จะนำมาเทียบค่า

เมื่อนำ Block ทั้ง 4 ส่วนมาประกอบเข้าด้วยกัน จะได้ลักษณะดัง ตัวอย่างภาพที่ 5

ตัวอย่างภาพที่ 5 - การต่อชิ้นส่วน Block ตรวจสอบเงื่อนไขเทียบค่าตัวแปร

นอกจากนี้ในตัวอย่าง Blockly แสดงให้เห็นถึงการนำ Blockly แปลงจากชิ้นส่วน Block ไปเป็นภาษาโปรแกรมมิ่งอื่น ๆ ได้เช่นกัน นอกเหนือจากภาษา JavaScript อาทิเช่น Python, PHP, Lua, Dart และอีกมากมาย แล้วแต่ผู้สร้าง Block จะนำไปพัฒนา

ภาพตัวอย่างที่ 6 - การแปลงชิ้นส่วน Block ให้เป็นภาษาโปรแกรมมิ่ง

📌 ผู้อ่านสามารถเข้าไปทำความรู้จักกับ Blockly เพิ่มเติมได้จากลิงก์ด้านล่างนี้

👉🏻 https://developers.google.com/blockly/

🌟 ในบทความถัดไปเราจะมาทำความรู้จัก Blockly ให้มากขึ้นไปพร้อม ๆ กัน 🎉