Thiết kế ứng dụng

Có một số mô hình để lựa chọn khi thiết kế một ứng dụng sử dụng Blockly. Bạn nên cân nhắc những lựa chọn này từ sớm, vì chúng ảnh hưởng đến các khối mà người dùng sẽ cần.

Cấu hình

Nhiều ứng dụng Blockly được dùng để mô tả các cấu hình, thay vì các chương trình có thể thực thi. Các ứng dụng cấu hình thường bắt đầu bằng cách khởi chạy một khối cấp gốc trên không gian làm việc. Một ví dụ điển hình là thẻ Block Factory (Nhà máy khối) của Công cụ dành cho nhà phát triển 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);

Thao tác này sẽ tạo một khối không thể xoá, không thể di chuyển và chứa tất cả cấu hình của người dùng. Không gian làm việc có thể được chuyển đổi tuần tự bất cứ lúc nào để xác định cấu hình hiện tại.

Những ứng dụng như vậy có thể muốn tự động tắt mọi khối không kết nối với khối gốc. Bạn có thể hoàn thành việc này bằng một dòng:

workspace.addChangeListener(Blockly.Events.disableOrphans);

Chương trình dài tập

Phần lớn các ứng dụng Blockly được thiết kế để tạo các chương trình nối tiếp. Người dùng xếp các khối lại với nhau và các khối này sẽ được thực thi theo thứ tự.

Mọi khối (không bị vô hiệu hoá) trên không gian làm việc sẽ tạo thành một phần của chương trình. Nếu có nhiều ngăn xếp khối, các ngăn xếp cao hơn sẽ được thực thi trước. (Nếu hai ngăn xếp có chiều cao gần bằng nhau, thì các ngăn xếp ở bên trái (bên phải ở chế độ RTL) sẽ được ưu tiên.)

Bạn có thể xuất không gian làm việc sang mã thực thi bất cứ lúc nào. Mã này có thể được thực thi phía máy khách bằng JavaScript (bằng cách sử dụng eval hoặc Trình thông dịch JS) hoặc phía máy chủ bằng bất kỳ ngôn ngữ nào.

import {javascriptGenerator} from 'blockly/javascript';

var code = javascriptGenerator.workspaceToCode(workspace);

Chương trình song song

Một số ứng dụng Blockly chọn thực thi tất cả các ngăn xếp khối song song thay vì tuần tự. Ví dụ: một ứng dụng âm nhạc trong đó một vòng lặp trống chạy đồng thời với một giai điệu.

Một cách triển khai thực thi song song là tạo mã cho từng khối riêng lẻ:

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;
}

Nếu ngôn ngữ đích là JavaScript, thì mảng allCode có thể được dùng để tạo nhiều Trình thông dịch JS để thực thi đồng thời. Nếu ngôn ngữ đích là một ngôn ngữ như Python, thì mảng allCode có thể được hợp nhất thành một chương trình duy nhất sử dụng mô-đun phân luồng.

Giống như mọi chương trình song song, bạn phải đưa ra quyết định cẩn thận về mọi tài nguyên dùng chung, chẳng hạn như biến và hàm.

Chương trình hướng sự kiện

Trình xử lý sự kiện chỉ là các hàm được hệ thống gọi, chứ không phải do chương trình gọi. Các khối này có thể bao quanh ngăn xếp các khối sẽ được thực thi hoặc có thể là tiêu đề nằm trên cùng của ngăn xếp các khối.

Một số nhà phát triển thích thêm "mũ" vào đầu các khối sự kiện để chúng trông khác biệt với các khối khác. Đây không phải là giao diện mặc định cho Blockly, nhưng bạn có thể thêm giao diện này bằng cách ghi đè hằng số trình kết xuất ADD_START_HATS thành true (Lớp học mã về trình kết xuất tuỳ chỉnh – Ghi đè hằng số) hoặc bằng cách thêm một giao diện và đặt lựa chọn mũ cho kiểu khối. Để biết thêm thông tin về cách đặt mũ cho các khối trong giao diện, hãy xem phần Kiểu khối trong tài liệu về giao diện.

Trong mô hình dựa trên sự kiện, bạn cũng có thể tạo một trình xử lý cho quá trình khởi động chương trình. Theo mô hình này, mọi khối trên không gian làm việc không kết nối với một trình xử lý sự kiện sẽ bị bỏ qua và không thực thi.

Khi thiết kế một hệ thống sử dụng các sự kiện, hãy cân nhắc xem có thể hoặc nên hỗ trợ nhiều phiên bản của cùng một trình xử lý sự kiện hay không.

Bố cục Workspace

Có hai cách hợp lý để bố trí màn hình từ trái sang phải. Một cách bắt đầu bằng thanh công cụ ở bên trái, không gian làm việc ở giữa và hình ảnh trực quan đầu ra ở bên phải. Bố cục này được dùng trong phiên bản 1 của Scratch, cũng như Made with Code.

Cách còn lại bắt đầu bằng hình ảnh trực quan về đầu ra ở bên trái, thanh công cụ ở giữa và không gian làm việc ở bên phải. Bố cục này được Scratch phiên bản 2 cũng như hầu hết các ứng dụng Blockly sử dụng.

Trong cả hai trường hợp, không gian làm việc đều phải kéo giãn để chiếm hết kích thước màn hình có sẵn – người dùng cần có nhiều không gian nhất có thể để lập trình. Như bạn có thể thấy trong các ảnh chụp màn hình ở trên, bố cục đầu tiên hoạt động kém hiệu quả trên màn hình rộng vì mã của người dùng và hình ảnh trực quan đầu ra được tách biệt. Trong khi đó, bố cục thứ hai cho phép có thêm không gian cho các chương trình lớn hơn mà vẫn giữ cả 3 phần gần nhau.

Người dùng cũng nên cân nhắc vấn đề mà họ đang cố gắng giải quyết trước tiên, sau đó xem xét các công cụ được cung cấp và chỉ sau đó mới bắt đầu lập trình.

Tất nhiên, toàn bộ thứ tự cần được đảo ngược đối với bản dịch tiếng Ả Rập và tiếng Do Thái.

Trong một số trường hợp, chẳng hạn như khi sử dụng một số ít các khối đơn giản, có thể hộp công cụ sẽ nằm phía trên hoặc phía dưới không gian làm việc. Blockly hỗ trợ tính năng cuộn ngang trong Hộp công cụ cho những trường hợp này, nhưng bạn nên sử dụng tính năng này một cách cẩn thận.

Đề xuất: Đặt hình ảnh trực quan của chương trình bên cạnh thanh công cụ.