Desain aplikasi

Ada beberapa paradigma yang dapat dipilih saat mendesain aplikasi yang menggunakan Blockly. Pilihan ini harus dipertimbangkan sejak awal, karena memengaruhi blok yang akan dibutuhkan pengguna.

Konfigurasi

Banyak aplikasi Blockly digunakan untuk mendeskripsikan konfigurasi, bukan program yang dapat dieksekusi. Aplikasi konfigurasi biasanya dimulai dengan menginisialisasi satu blok tingkat root di ruang kerja. Contoh yang baik adalah tab Block Factory di Blockly Developer Tools:

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

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

Hal ini akan membuat blok yang tidak dapat dihapus dan dipindahkan yang menyimpan semua konfigurasi pengguna. Ruang kerja dapat diserialisasi kapan saja untuk menentukan konfigurasi saat ini.

Aplikasi tersebut mungkin ingin menonaktifkan secara otomatis setiap blok yang tidak terhubung ke blok root. Hal ini dapat dilakukan dengan satu baris:

workspace.addChangeListener(Blockly.Events.disableOrphans);

Program serial

Sebagian besar aplikasi Blockly dirancang untuk membuat program bersambung. Pengguna menumpuk blok yang dieksekusi secara berurutan.

Setiap blok (yang tidak dinonaktifkan) di ruang kerja akan menjadi bagian dari program. Jika ada beberapa tumpukan blok, blok yang lebih tinggi akan dieksekusi terlebih dahulu. (Jika dua stack memiliki tinggi yang hampir sama, stack di sebelah kiri (kanan dalam mode RTL) akan diberi prioritas.)

Ruang kerja dapat diekspor ke kode yang dapat dieksekusi kapan saja. Kode ini dapat dieksekusi di sisi klien dalam JavaScript (menggunakan eval atau JS Interpreter), atau di sisi server dalam bahasa apa pun.

import {javascriptGenerator} from 'blockly/javascript';

var code = javascriptGenerator.workspaceToCode(workspace);

Program paralel

Beberapa aplikasi Blockly memilih untuk mengeksekusi semua tumpukan blok secara paralel, bukan secara serial. Contohnya adalah aplikasi musik tempat loop drum berjalan bersamaan dengan melodi.

Salah satu cara untuk menerapkan eksekusi paralel adalah dengan membuat kode untuk setiap blok secara terpisah:

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

Jika bahasa targetnya adalah JavaScript, array allCode kemudian dapat digunakan untuk membuat beberapa Interpreter JS untuk eksekusi serentak. Jika bahasa targetnya seperti Python, maka array allCode dapat dirakit menjadi satu program yang menggunakan modul threading.

Seperti program paralel lainnya, keputusan yang cermat harus dibuat terkait resource bersama seperti variabel dan fungsi.

Program berbasis peristiwa

Pengendali peristiwa hanyalah fungsi yang dipanggil oleh sistem, bukan oleh program. Blok ini dapat melampirkan stack blok yang akan dieksekusi, atau dapat berupa header yang berada di atas stack blok.

Beberapa developer suka menambahkan 'topi' ke bagian atas blok acara agar terlihat berbeda dari blok lainnya. Ini bukan tampilan default untuk Blockly, tetapi dapat ditambahkan dengan mengganti konstanta perender ADD_START_HATS menjadi true (Codelab perender kustom - Mengganti konstanta). atau dengan menambahkan tema dan menyetel opsi topi pada gaya blok. Untuk mengetahui informasi selengkapnya tentang cara menyetel topi pada blok sebagai bagian dari tema, lihat Gaya blok dalam dokumentasi tema.

Dalam model berbasis peristiwa, sebaiknya buat juga handler untuk memulai program. Dalam model ini, setiap pemblokiran pada ruang kerja yang tidak terhubung ke pengendali peristiwa akan diabaikan dan tidak akan dieksekusi.

Saat mendesain sistem yang menggunakan peristiwa, pertimbangkan apakah mungkin atau diinginkan untuk mendukung beberapa instance handler peristiwa yang sama.

Tata letak Workspace

Ada dua cara yang wajar untuk menata letak layar dari kiri ke kanan. Salah satu cara dimulai dengan toolbar di sebelah kiri, ruang kerja di tengah, dan visualisasi output di sebelah kanan. Tata letak ini digunakan oleh Scratch versi 1, serta Made with Code.

Cara lainnya dimulai dengan visualisasi output di sebelah kiri, toolbar di tengah, dan ruang kerja di sebelah kanan. Tata letak ini digunakan oleh Scratch versi 2, serta sebagian besar aplikasi Blockly.

Dalam kedua kasus, ruang kerja harus direntangkan untuk memenuhi ukuran layar yang tersedia. Pengguna memerlukan ruang sebanyak mungkin untuk memprogram. Seperti yang dapat dilihat pada screenshot di atas, tata letak pertama berperforma buruk di layar lebar karena kode pengguna dan visualisasi output dipisahkan. Sedangkan tata letak kedua memungkinkan ruang tambahan untuk program yang lebih besar sekaligus menjaga ketiga bagian tetap berdekatan.

Pengguna juga akan lebih mudah memahami masalah yang ingin mereka pecahkan terlebih dahulu, lalu melihat alat yang disediakan, dan baru kemudian mulai memprogram.

Tentu saja seluruh urutan perlu dibalik untuk terjemahan bahasa Arab dan Ibrani.

Dalam beberapa kasus, seperti saat menggunakan sejumlah kecil blok sederhana, toolbox sebaiknya berada di atas atau di bawah ruang kerja. Blockly mendukung scroll horizontal di Toolbox untuk kasus ini, tetapi harus digunakan dengan hati-hati.

Rekomendasi: Tempatkan visualisasi program di samping toolbar.