Membuat dan menjalankan kode

Aplikasi Anda dapat membuat kode kapan saja. Misalnya, kode ini dapat menghasilkan kode saat pengguna akhir mengklik tombol atau setiap kali pengguna melakukan perubahan.

Untuk ringkasan pembuatan kode, lihat Pembuatan kode.

Mengimpor generator kode bahasa

Untuk membuat kode, Anda memerlukan generator kode bahasa. Anda dapat mengimpor generator kode bahasa dengan 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';

// Generate code for all the blocks in the workspace.
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 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>

// Generate code for all the blocks in the workspace.
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>

// Generate code for all the blocks in the workspace.
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);

Buat kode

Untuk membuat kode, gunakan fungsi workspaceToCode generator.

const code = javascriptGenerator.workspaceToCode(workspace);

Update berkelanjutan

Update berkelanjutan memungkinkan Anda menampilkan atau menjalankan kode setiap kali pengguna membuat perubahan. Membuat kode adalah operasi yang cepat, sehingga ada sedikit dampak performa untuk melakukannya. 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);

Menambahkan kode preambul atau postscript

Setelah membuat kode, Anda dapat menyertakan kode sebelum awal atau setelah akhir kode yang dihasilkan secara opsional.

let code = javascriptGenerator.workspaceToCode(workspace);
// Add a preamble and a postscript to the code.
const preamble = 'import {MyLibrary} from \'/path/to/my/library\';\n'
const postscript = 'MyLibrary.myKickoffFunction();\n';
code = preamble + code + postscript;

Kode muka 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.

Mengeksekusi kode

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

Jika Anda ingin menjalankan kode JavaScript, lihat Membuat dan menjalankan JavaScript. Bagian ini membahas beberapa fitur khusus generator kode JavaScript, serta JSInterpreter, yang direkomendasikan tim Blockly sebagai cara untuk mengeksekusi JavaScript dengan aman.

Bahasa lain memerlukan alat lain.