Pembuatan kode

Pembuatan kode adalah proses mengubah blok pada ruang kerja menjadi {i>string<i} kode yang dapat dieksekusi.

Pembuatan kode sangat penting, karena inilah yang memungkinkan blok Anda untuk benar-benar melakukan hal-hal seperti mengevaluasi ekspresi aritmetika, memindahkan karakter melewati labirin, atau mengkonfigurasi toko {i>online<i}!

Anda tidak dapat "menjalankan" memblokir secara langsung. Sebagai gantinya, Anda akan membuat string kode, lalu menjalankan perintah tersebut.

Generator kode

Untuk membuat kode, Anda harus memilih bahasa berbasis teks yang ingin buat.

Generator kode adalah kelas yang menangani aturan untuk menghasilkan kode yang khusus untuk bahasa tertentu, tetapi tidak spesifik untuk setiap blok. Sebagai misalnya, ia menangani hal-hal seperti memformat komentar, membuat pernyataan indentasi, dan mengutip {i>string<i}.

// 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 Lempar 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);

Unpkg

Anda harus menyertakan generator setelah Anda 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 Anda 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 kodenya, Anda dapat buat juga generator kode kustom.

Generator kode blok

Bagian kedua dari pembuatan kode adalah menentukan blok kode apa yang buat. Ini harus dilakukan untuk setiap blok, untuk setiap bahasa yang Anda yang ingin Anda buat.

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

Cara kerja generator kode untuk berbagai jenis blok berbeda:

• Pemblokiran dengan output
• Pemblokiran tanpa output

Tetapi semuanya memerlukan pengumpulan nilai dari {i>field<i}, mengumpulkan blok dalam kode, lalu menggabungkan {i>string<i} tersebut.

Generation

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

Dengan update berkelanjutan, Anda dapat menampilkan atau menjalankan kode setiap kali pengguna melakukan berubah. Membuat kode adalah operasi yang cepat, sehingga hanya ada sedikit performa dampak karena melakukan ini. 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 field preamble atau {i>preamble code<i} 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 {i>preamble<i} biasanya digunakan untuk menyertakan definisi eksternal di awal kode. Kode pos biasanya digunakan untuk memanggil fungsi untuk memulai di akhir kode.

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

Eksekusi

Setelah membuat kode, Anda harus mencari tahu cara menjalankannya. Memutuskan cara menjalankannya sangat spesifik untuk aplikasi, dan di luar cakupan dari Blockly.

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