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

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

การกำหนดค่า

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

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

โปรแกรมที่ขับเคลื่อนด้วยเหตุการณ์

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

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

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

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

เลย์เอาต์ Workspace

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

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

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

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

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

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

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