1. ที่มา
Blockly คือ เครื่องมือพัฒนาโปรแกรมแบบวิชวล (Visual) โดยใช้สัญลักษณ์ภาพแบบจิ๊กซอล แทนคำสั่งมาเรียงต่อกันตามเงื่อนไขที่ต้องการ พัฒนาโดย google for education แล้วเปิดให้ทดลองใช้ (Try Blockly) บนเว็บของกูเกิ้ล หรือนักพัฒนาจะดาวน์โหลดไปติดตั้งบน website ของตนเอง เพื่อพัฒนาต่อยอดได้ ในเครื่องมีอนี้มีกลุ่มของสัญลักษณ์ที่ประกอบด้วย Logic, Loops, Math, Text, Lists, Colour, Variables, Functions
—
2. รับโปรแกรม (get the code)
โดย download แฟ้ม .zip เมื่อแตกแล้วก็นำไปวางบน server ที่บริการภาษา python
หน้าตาที่ได้ก็จะเป็น blockly แบบที่พบได้ใน demo ซึ่งจะทำงานบน client-side
—
3. Playground on the demo sever.
บริการใช้งาน Blockly แล้วสร้างเป็น source code : javascript แล้วคัดลอกออกมาได้
เพื่อนำไปใช้ใน compiler ต่อไปได้ แต่ทดสอบประมวลผลไม่ได้
—
4. บริการ Live Demo : JS Interpreter
สำหรับทดสอบประมวลผล Blockly และรายงานผลผ่านสัญลักษณ์ print ได้
แต่ copy : javascript ไม่ได้
—
5. code editor + run
ที่ block แล้วมองเห็น code ภาษาต่าง ๆ ทั้ง block, javascript, python, dart, xml
แล้วสั่ง run เพื่อดูผลลัพธ์ หรือ copy code ไปใช้ได้
—
6. มี Demos ให้ทดสอบการใช้งาน Blockly แบบต่าง ๆ
สร้างเครื่องบิน หรือ code editor ที่สลับไปมาระหว่าง source กับ symbol
—
7. ตัวอย่างบริการ blockly จากเว็บไซต์ต่าง ๆ
เช่น Blockly Games ใช้สร้างเกมง่าย ๆ ได้
หรือ Appinventor สำหรับ Android apps
—
8. ตัวอย่าง XML
<xml><block type=”variables_set” id=”642″ inline=”true” x=”-51″ y=”18″><field name=”VAR”>a</field><value name=”VALUE”><block type=”text” id=”643″><field name=”TEXT”>a</field></block></value><next><block type=”controls_repeat_ext” id=”644″ inline=”true”><value name=”TIMES”><block type=”math_number” id=”645″><field name=”NUM”>5</field></block></value><statement name=”DO”><block type=”text_append” id=”646″ inline=”false”><field name=”VAR”>a</field><value name=”TEXT”><block type=”text” id=”647″><field name=”TEXT”>b</field></block></value></block></statement><next><block type=”text_print” id=”648″ inline=”false”><value name=”TEXT”><block type=”variables_get” id=”649″><field name=”VAR”>a</field></block></value></block></next></block></next></block></xml>