Pembuatan kode

Pembuatan kode adalah proses mengubah blok pada ruang kerja menjadi string kode yang dapat dieksekusi.

Pembuatan kode sangat penting karena memungkinkan blok Anda benar-benar melakukan berbagai hal, seperti mengevaluasi ekspresi aritmetika, memindahkan karakter melalui labirin, atau mengonfigurasi toko online.

Anda tidak dapat "menjalankan" blok secara langsung. Sebagai gantinya, Anda membuat string kode, lalu menjalankannya.

Generator kode

Untuk menghasilkan kode, Anda harus memilih bahasa berbasis teks yang ingin dibuat.

Generator kode adalah class yang menangani aturan untuk membuat kode khusus untuk bahasa tertentu, tetapi tidak spesifik untuk blok individual. Misalnya, API ini menangani hal-hal seperti memformat komentar, pernyataan indentasi, dan mengutip string.

// javascriptGenerator is a code generator that makes javascript strings.
import {javascriptGenerator} from 'blockly/javascript';

const code = javascriptGenerator.workspaceToCode(myWorkspace);

Blockly menyediakan 5 generator kode bawaan:

• ES5 JavaScript
• Python 3
• Lua 5.1
• Panah 2
• PHP 7

Anda dapat mengimpor dan menggunakan generator menggunakan salah satu metode berikut.

Modul

import {javascriptGenerator} from 'blockly/javascript';
import {pythonGenerator} from 'blockly/python';
import {phpGenerator} from 'blockly/php';
import {luaGenerator} from 'blockly/lua';
import {dartGenerator} from 'blockly/dart';

const jsCode = javascriptGenerator.workspaceToCode(workspace);
const pythonCode = pythonGenerator.workspaceToCode(workspace);
const phpCode = phpGenerator.workspaceToCode(workspace);
const luaCode = luaGenerator.workspaceToCode(workspace);
const dartCode = dartGenerator.workspaceToCode(workspace);

Lepaskan

Anda harus menyertakan generator setelah menyertakan Blockly.

<script src="https://unpkg.com/blockly"></script>
<script src="https://unpkg.com/blockly/javascript_compressed"></script>
<script src="https://unpkg.com/blockly/python_compressed"></script>
<script src="https://unpkg.com/blockly/php_compressed"></script>
<script src="https://unpkg.com/blockly/lua_compressed"></script>
<script src="https://unpkg.com/blockly/dart_compressed"></script>

const jsCode = javascript.javascriptGenerator.workspaceToCode(workspace);
const pythonCode = python.pythonGenerator.workspaceToCode(workspace);
const phpCode = php.phpGenerator.workspaceToCode(workspace);
const luaCode = lua.luaGenerator.workspaceToCode(workspace);
const dartCode = dart.dartGenerator.workspaceToCode(workspace);

Skrip lokal

Anda harus menyertakan generator setelah menyertakan Blockly.

<script src="blockly_compressed.js"></script>
<script src="javascript_compressed.js"></script>
<script src="python_compressed.js"></script>
<script src="php_compressed.js"></script>
<script src="lua_compressed.js"></script>
<script src="dart_compressed.js"></script>

const jsCode = javascript.javascriptGenerator.workspaceToCode(workspace);
const pythonCode = python.pythonGenerator.workspaceToCode(workspace);
const phpCode = php.phpGenerator.workspaceToCode(workspace);
const luaCode = lua.luaGenerator.workspaceToCode(workspace);
const dartCode = dart.dartGenerator.workspaceToCode(workspace);

Jika daftar ini tidak menyertakan bahasa yang ingin Anda buatkan kode, Anda juga dapat membuat generator kode kustom.

Generator kode blok

Bagian kedua dari pembuatan kode adalah menentukan kode yang dihasilkan oleh setiap blok. Hal ini harus dilakukan untuk setiap blok, untuk setiap bahasa yang ingin Anda buat.

javascriptGenerator.forBlock['my_custom_block'] = function(block, generator) { /* ... */ }

Cara kerja generator kode berbeda untuk berbagai jenis blok:

• Blok dengan output
• Pemblokiran tanpa output

Namun, semuanya memerlukan pengumpulan nilai dari kolom, mengumpulkan kode blok dalam, lalu menggabungkan string tersebut.

Generasi

Pembuatan dapat dilakukan saat pengguna akhir memintanya (misalnya, saat mereka mengklik tombol), atau dapat dilakukan secara terus-menerus.

Dengan update berkelanjutan, Anda dapat menampilkan atau menjalankan kode setiap kali pengguna membuat perubahan. Membuat kode adalah operasi yang cepat, sehingga akan sedikit berdampak pada performa. Hal ini dilakukan menggunakan pemroses peristiwa.

const supportedEvents = new Set([
  Blockly.Events.BLOCK_CHANGE,
  Blockly.Events.BLOCK_CREATE,
  Blockly.Events.BLOCK_DELETE,
  Blockly.Events.BLOCK_MOVE,
]);

function updateCode(event) {
  if (workspace.isDragging()) return; // Don't update while changes are happening.
  if (!supportedEvents.has(event.type)) return;

  const code = javascriptGenerator.workspaceToCode(workspace);
  document.getElementById('textarea').value = code;
}

workspace.addChangeListener(updateCode);

Kode preamble atau postscript

Setelah membuat kode, Anda dapat menyertakan kode preamble atau preamble (opsional) di awal atau akhir kode yang dihasilkan.

let code = javascriptGenerator.workspaceToCode(workspace);
// Add a preamble and a postscript to the code.
code = `const def = 'some value';\n${code}\nkickOffSomeFunction();\n`;

Kode preamble biasanya digunakan untuk menyertakan definisi eksternal di awal kode. Kode postscript biasanya digunakan untuk memanggil fungsi guna memulai perilaku di akhir kode.

Jika kode yang dihasilkan dapat dijalankan apa adanya, Anda tidak perlu menyertakan preamble atau postscript.

Eksekusi

Setelah membuat kode, Anda perlu mengetahui cara mengeksekusinya. Menentukan cara menjalankannya sangat spesifik untuk aplikasi, dan berada di luar cakupan Blockly.

Untuk kode JavaScript, tim Blockly merekomendasikan penggunaan JSInterpreter. Bahasa lain memerlukan alat lain.