การออกแบบแอปพลิเคชัน

มีรูปแบบต่างๆ ให้เลือกเมื่อออกแบบแอปพลิเคชันที่ใช้ Blockly คุณควรพิจารณาตัวเลือกเหล่านี้ตั้งแต่เนิ่นๆ เนื่องจากตัวเลือกเหล่านี้ส่งผลต่อบล็อกที่ผู้ใช้จะต้องใช้

การกำหนดค่า

แอปพลิเคชัน Blockly จำนวนมากใช้เพื่ออธิบายการกําหนดค่า ไม่ใช่โปรแกรมที่เรียกใช้ได้ โดยปกติแล้วแอปพลิเคชันการกําหนดค่าจะเริ่มต้นด้วยการเริ่มต้นบล็อกระดับรูท 1 บล็อกในพื้นที่ทํางาน ตัวอย่างที่ดีคือแท็บ Block Factory ของเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ Blockly

บล็อกที่ใช้ออกแบบบล็อกอื่นๆ ผู้ใช้ระบุชื่อบล็อก อินพุตของบล็อกได้ ไม่ว่าอินพุตจะเป็นภายในหรือภายนอก และอื่นๆ

Blockly.Blocks['factory_base'] = {
  init: function() {
    this.setDeletable(false);
    this.setMovable(false);
    this.setEditable(false);
    // etc...
  }
}

Blockly.serialization.blocks.append({'type': 'factory_base'}, workspace);

ซึ่งจะสร้างบล็อกที่ลบไม่ได้และย้ายไม่ได้ซึ่งเก็บการกำหนดค่าทั้งหมดของผู้ใช้ พื้นที่ทำงานอาจได้รับการจัดรูปแบบให้เป็นอนุกรมได้ทุกเมื่อเพื่อกำหนดการกำหนดค่าปัจจุบัน

แอปพลิเคชันดังกล่าวอาจต้องการปิดใช้บล็อกที่ไม่ได้เชื่อมต่อกับบล็อกรูทโดยอัตโนมัติ ซึ่งทำได้ในบรรทัดเดียว ดังนี้

workspace.addChangeListener(Blockly.Events.disableOrphans);

โปรแกรมแบบอนุกรม

แอปพลิเคชัน Blockly ส่วนใหญ่ออกแบบมาเพื่อสร้างโปรแกรมแบบอนุกรม ผู้ใช้จะวางบล็อกซ้อนกันซึ่งจะทํางานตามลําดับ

กองบล็อกที่มีคำสั่งให้ย้าย เลี้ยวซ้าย และย้ายอีกครั้ง

บล็อก (ที่ยังไม่ได้ปิดใช้) ทั้งหมดในพื้นที่ทํางานจะเป็นส่วนหนึ่งของโปรแกรม หากมีกองบล็อกหลายกอง ระบบจะเรียกใช้บล็อกที่สูงกว่าก่อน (หากกอง 2 กองมีความสูงใกล้เคียงกัน ระบบจะให้ความสำคัญกับกองที่อยู่ด้านซ้าย (ด้านขวาในโหมด RTL))

พื้นที่ทํางานสามารถส่งออกเป็นโค้ดที่เรียกใช้ได้ทุกเมื่อ โค้ดนี้อาจทำงานฝั่งไคลเอ็นต์ใน JavaScript (โดยใช้ eval หรือ JS Interpreter) หรือฝั่งเซิร์ฟเวอร์ในภาษาใดก็ได้

import {javascriptGenerator} from 'blockly/javascript';

var code = javascriptGenerator.workspaceToCode(workspace);

โปรแกรมคู่ขนาน

แอปพลิเคชัน Blockly บางรายการเลือกที่จะเรียกใช้กองบล็อกทั้งหมดพร้อมกันแทนที่จะเรียกใช้ตามลำดับ ตัวอย่างเช่น แอปพลิเคชันเพลงที่เล่นลูปกลองพร้อมกับทำนองเพลง

วิธีหนึ่งในการใช้การดําเนินการแบบขนานคือการสร้างโค้ดสําหรับแต่ละบล็อกแยกกัน ดังนี้

import {javascriptGenerator} from 'blockly/javascript';

var json = Blockly.serialization.workspaces.save(workspace);

// Store top blocks separately, and remove them from the JSON.
var blocks = json['blocks']['blocks'];
var topBlocks = blocks.slice();  // Create shallow copy.
blocks.length = 0;

// Load each block into the workspace individually and generate code.
var allCode = [];
var headless = new Blockly.Workspace();
for (var i = 0; block < topBlocks.length; i++) {
  var block = topBlocks[i];
  blocks.push(block);
  Blockly.serialization.workspaces.load(json, headless);
  allCode.push(javascriptGenerator.workspaceToCode(headless));
  blocks.length = 0;
}

หากภาษาเป้าหมายคือ JavaScript ระบบอาจใช้อาร์เรย์ allCode เพื่อสร้างตัวแปรแปลภาษา JS หลายรายการเพื่อดำเนินการพร้อมกัน หากภาษาเป้าหมายเป็นภาษาอย่าง Python ระบบอาจประกอบอาร์เรย์ allCode เข้าเป็นโปรแกรมเดียวที่ใช้โมดูลการแยกเธรด

เช่นเดียวกับโปรแกรมแบบขนานอื่นๆ คุณต้องตัดสินใจอย่างรอบคอบเกี่ยวกับทรัพยากรที่แชร์ เช่น ตัวแปรและฟังก์ชัน

โปรแกรมที่ทำงานตามเหตุการณ์

ตัวแฮนเดิลเหตุการณ์เป็นเพียงฟังก์ชันที่ระบบเรียกใช้ ไม่ใช่โปรแกรม บล็อกเหล่านี้อาจรวมกองบล็อกที่จะดำเนินการ หรืออาจเป็นส่วนหัวที่อยู่ด้านบนกองบล็อกก็ได้

บล็อก &quot;เมื่อคลิกเมาส์&quot; 2 บล็อก โดยบล็อกหนึ่งมีการป้อนคำสั่งและอีกบล็อกหนึ่งมีการต่อเชื่อมถัดไป

นักพัฒนาแอปบางรายชอบเพิ่ม "หมวก" ไว้ที่ด้านบนของบล็อกเหตุการณ์เพื่อให้ดูแตกต่างจากบล็อกอื่นๆ ลักษณะนี้ไม่ใช่ลักษณะเริ่มต้นของ Blockly แต่อาจเพิ่มได้โดยลบล้างค่าคงที่ของโปรแกรมแสดงผล ADD_START_HATS เป็น true (Custom renderers codelab - Override constants) หรือเพิ่มธีมและตั้งค่าตัวเลือกหมวกในสไตล์บล็อก ดูข้อมูลเพิ่มเติมเกี่ยวกับการตั้งค่าหมวกในบล็อกซึ่งเป็นส่วนหนึ่งของธีมได้ที่นี่

บล็อก &quot;เมื่อคลิกเมาส์&quot; เดียวกันที่มีหมวก ซึ่งจะสร้างโหนกขึ้นบนบล็อก

ในโมเดลที่ทำงานตามเหตุการณ์ คุณอาจต้องสร้างตัวแฮนเดิลสำหรับการเริ่มต้นโปรแกรมด้วย ภายใต้รูปแบบนี้ ระบบจะละเว้นและจะไม่เรียกใช้บล็อกใดๆ ในเวิร์กスペースที่ไม่ได้เชื่อมต่อกับตัวแฮนเดิลเหตุการณ์

เมื่อออกแบบระบบที่ใช้เหตุการณ์ ให้พิจารณาว่าเป็นไปได้หรือควรรองรับอินสแตนซ์หลายรายการของตัวแฮนเดิลเหตุการณ์เดียวกันหรือไม่

เลย์เอาต์ของ Workspace

การจัดเลย์เอาต์หน้าจอจากซ้ายไปขวามี 2 วิธีที่เหมาะสม ทางหนึ่งจะเริ่มต้นด้วยแถบเครื่องมือทางด้านซ้าย พื้นที่ทํางานตรงกลาง และการแสดงภาพผลลัพธ์ทางด้านขวา เลย์เอาต์นี้ใช้โดย Scratch เวอร์ชัน 1 และ Made with Code

แอปพลิเคชันที่มีแถบเครื่องมือทางด้านซ้าย พื้นที่ทํางานตรงกลาง และเขาวงกต (การแสดงภาพเอาต์พุต) ทางด้านขวา

อีกวิธีหนึ่งจะเริ่มต้นด้วยการแสดงภาพผลลัพธ์ทางด้านซ้าย แถบเครื่องมือตรงกลาง และพื้นที่ทํางานทางด้านขวา เลย์เอาต์นี้ใช้โดย Scratch เวอร์ชัน 2 และแอปพลิเคชัน Blockly ส่วนใหญ่

แอปพลิเคชันที่มีเขาวงกต (การแสดงภาพผลลัพธ์) ทางด้านซ้าย แถบเครื่องมืออยู่ตรงกลาง และพื้นที่ทํางานอยู่ทางด้านขวา

ไม่ว่าในกรณีใด พื้นที่ทํางานควรขยายให้เต็มขนาดหน้าจอที่มีให้ เนื่องจากผู้ใช้ต้องการพื้นที่ในการเขียนโปรแกรมมากที่สุด ดังที่เห็นในภาพหน้าจอด้านบน เลย์เอาต์แรกมีประสิทธิภาพต่ำในหน้าจอกว้างเนื่องจากโค้ดของผู้ใช้และการแสดงภาพผลลัพธ์แยกกัน ส่วนเลย์เอาต์ที่ 2 มีพื้นที่เพิ่มเติมสำหรับโปรแกรมขนาดใหญ่กว่า แต่ก็ยังคงให้ทั้ง 3 ส่วนอยู่ใกล้กัน

นอกจากนี้ ผู้ใช้ควรพิจารณาปัญหาที่ต้องการแก้ไขก่อน จากนั้นดูเครื่องมือที่มีให้ แล้วจึงเริ่มเขียนโปรแกรม

แน่นอนว่าคำสั่งซื้อทั้งหมดต้องพลิกกลับสำหรับคำแปลภาษาอาหรับและภาษาฮิบรู

ในบางกรณี เช่น เมื่อใช้บล็อกง่ายๆ จำนวนไม่มากนัก คุณอาจวางกล่องเครื่องมือไว้เหนือหรือใต้พื้นที่ทํางานก็ได้ Blockly รองรับการเลื่อนแนวนอนในกล่องเครื่องมือสำหรับกรณีเหล่านี้ แต่ควรใช้ด้วยความระมัดระวัง

คําแนะนํา: วางการแสดงภาพโปรแกรมไว้ข้างแถบเครื่องมือ