blockly คืออะไร

ปรับปรุง : 2563-06-01 (ปรับรูปแบบใหม่)

blockly คืออะไร

Blockly คือ เครื่องมือพัฒนาโปรแกรมแบบวิชวล (Visual) โดยใช้สัญลักษณ์ภาพแบบจิ๊กซอล แทนคำสั่งมาเรียงต่อกันตามเงื่อนไขที่ต้องการ พัฒนาโดย google for education แล้วเปิดให้ทดลองใช้ (Try Blockly) บนเว็บของกูเกิ้ล หรือนักพัฒนาจะดาวน์โหลดไปติดตั้งบน website ของตนเอง เพื่อพัฒนาต่อยอดได้ ในเครื่องมีอนี้มีกลุ่มของสัญลักษณ์ที่ประกอบด้วย Logic, Loops, Math, Text, Lists, Colour, Variables, Functions
Web code : google.com/blockly/guides/configure
Download : google.com/blockly/guides/get-started
Blog : thaiall.com/blog/burin/6656/

generate จาก blockly เป็น javascript ใน server ของเรา

เมื่อดาวน์โหลด Module: Blockly มาวางใน Server ก็สามารถเขียน code เรียกใช้บริการต่าง ๆ ได้ กรณีนี้จะใช้แสดงรายการเครื่องมือไว้ให้ใช้จำนวนหนึ่งทางด้านซ้าย แล้วลากมาต่อกันทางด้านขวา เมื่อกดปุ่ม Show JavaScript หรือ Run Javascript ก็จะได้ผลตามต้องการ หากต้องการเครื่องมือมากกว่านี้ให้ไปใช้ที่ Blockly โดยตรง
ตัวอย่างโจทย์ให้ฝึกต่อบล็อก (ควรผ่าน 20 ด่าน angry bird ก่อน)
1. แสดงเลข 1 ถึง 3 (print)
2. หาผลรวมของเลข 1 ถึงเลข 5 (variable sum)
3. รับเลข 2 จำนวน (prompt) นำมาบวกกัน แล้วแสดงผล (print)
+ generator : https://developers.google.com/blockly/guides/configure/web/code-generators
+ demo listing : https://blockly-demo.appspot.com/static/demos/index.html
+ demo-generator : https://blockly-demo.appspot.com/static/demos/generator/index.html
+ demo-code : Convert block - javascript, python, php .. and edit xml
+ blockly_fixed_sized_workspace.htm
+ blockly_generator.htm

Try Blockly

ภายใต้ google for education มีบริการ try blockly ถูกใช้สำหรับการโปรแกรมด้วยภาพ สามารถประมวลผล และแสดงเป็นภาษาต่าง ๆ อาทิ javascript, python, php, lua หรือ dart สามารถนำ blockly ไปติดตั้ง และพัฒนาต่อยอดได้อีกมากมาย อาทิ Code.org, Microbit, Blockly-games, CodeBug, Ozoblockly
+ thaiall.com/google
+ thaiall.com/scratch

helloworld.htm  [blog:firebase , firebase]
<script>
var Count;
Count = 1;
while (Count <= 3) {
window.alert("Hello World!");
Count = Count + 1;
}
</script>

Hour of Code กับ Classic Maze

เข้าเล่นเกม แล้วได้รับวุฒิบัตร เป็นความภูมิใจครับ โดยเข้า Code.org, Try Code Studio แล้วมองหา The Hour of Code for All ages จะพบ Classic Maze ใน 20 ด่านมีเกม angry bird กับ zombie รวมกัน เล่นสนุกครับ หมุนซ้าย หมุนขวา มี Mark zuckerberg มาคอยให้คำแนะนำการเล่นเกมตลอด จะเล่นทีละด่าน หรือข้ามไปด่านไหนก็ได้ เล่นเสร็จก็จะมี Certificate รับรองว่าเราเนี่ย ผ่านด่าน 20 อรหันต์ (Classic Maze) เรียบร้อย
click to play
เกมนี้จะช่วยให้เข้าใจ Structure Programming ได้เป็นอย่างดี
1. Sequential
2. Decision
3. Repeat

Classic Maze ด่านที่ 20

Source code
while (notFinished()) {
  if (isPathForward()) { 
  moveForward();
  } else {
    if (isPathRight()) {
      turnRight();
    } else {
      turnLeft();
    }
  }
}

เขียน code ให้มีประสิทธิผล
กับเขียน code ให้มีประสิทธิภาพ
ไม่เหมือนกันครับ .. ภาพนี้อธิบายได้

เราสามารถปรับแก้ XML ที่เก็บรูปแบบของ Blockly ได้

โปรแกรมแสดงเลข 1 - 3 ผ่าน windows.alert
แล้วแสดงผลรวมของเลข 1 - 3 เป็นจำนวนสุดท้าย
+ บริการแปลง xml เป็น blockly
+ XML เป็นข้อมูลรูปแบบหนึ่ง ที่ได้รับการยอมรับมาก่อน
+ JSON เป็นข้อมูลรูปแบบหนึ่ง ที่เอื้อต่อการแลกเปลี่ยน

<xml xmlns="http://www.w3.org/1999/xhtml">
<block type="variables_set" id="" x="-1462" y="-212">
<field name="VAR">a</field>
<value name="VALUE">
<block type="math_number" id="">
<field name="NUM">0</field>
</block>
</value>
<next>
<block type="variables_set" id="">
<field name="VAR">sum</field>
<value name="VALUE">
<block type="math_number" id="">
<field name="NUM">0</field>
</block>
</value>
<next>
<block type="controls_repeat_ext" id="">
<value name="TIMES">
<shadow type="math_number" id="">
<field name="NUM">10</field>
</shadow>
<block type="math_number" id="">
<field name="NUM">3</field>
</block>
</value>
<statement name="DO">
<block type="variables_set" id="">
<field name="VAR">a</field>
<value name="VALUE">
<block type="math_arithmetic" id="">
<field name="OP">ADD</field>
<value name="A">
<shadow type="math_number" id="">
<field name="NUM">1</field>
</shadow>
<block type="variables_get" id="">
<field name="VAR">a</field>
</block>
</value>
<value name="B">
<shadow type="math_number" id="">
<field name="NUM">1</field>
</shadow>
</value>
</block>
</value>
<next>
<block type="text_print" id="">
<value name="TEXT">
<shadow type="text" id="">
<field name="TEXT">abc</field>
</shadow>
<block type="variables_get" id="">
<field name="VAR">a</field>
</block>
</value>
<next>
<block type="variables_set" id="">
<field name="VAR">sum</field>
<value name="VALUE">
<block type="math_arithmetic" id="">
<field name="OP">ADD</field>
<value name="A">
<shadow type="math_number" id="">
<field name="NUM">1</field>
</shadow>
<block type="variables_get" id="">
<field name="VAR">sum</field>
</block>
</value>
<value name="B">
<shadow type="math_number" id="">
<field name="NUM">1</field>
</shadow>
<block type="variables_get" id="">
<field name="VAR">a</field>
</block>
</value>
</block>
</value>
</block>
</next>
</block>
</next>
</block>
</statement>
<next>
<block type="text_print" id="">
<value name="TEXT">
<shadow type="text" id="">
<field name="TEXT">abc</field>
</shadow>
<block type="variables_get" id="">
<field name="VAR">sum</field>
</block>
</value>
</block>
</next>
</block>
</next>
</block>
</next>
</block>
</xml>

"ไม่เริ่มต้นในวันนี้ จะไม่มีทางสำเร็จในวันพรุ่ง" โดย โยฮันน์ วอล์ฟกัง ฟอน เกอเทอ