تولید کد

تولید کد فرآیند تبدیل بلوک‌های یک فضای کاری به رشته‌ای از کد است که می‌تواند اجرا شود.

تولید کد بسیار مهم است، زیرا این چیزی است که به بلوک‌های شما امکان می‌دهد واقعاً کارهایی را انجام دهند ، مانند ارزیابی عبارات حسابی، حرکت یک کاراکتر در پیچ و خم، یا پیکربندی یک فروشگاه آنلاین!

شما نمی توانید بلوک ها را مستقیماً "اجرا کنید". در عوض شما رشته های کد تولید می کنید و سپس آن ها را اجرا می کنید.

مولدهای کد

برای تولید کد، باید زبان متنی را که می خواهید تولید کنید انتخاب کنید.

یک کد مولد کلاسی است که قوانین تولید کدی را که مختص یک زبان خاص است، اما مختص یک بلوک منفرد نیست، کنترل می کند. به عنوان مثال، مواردی مانند قالب بندی نظرات، تورفتگی عبارات، و نقل قول از رشته ها را کنترل می کند.

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

const code = javascriptGenerator.workspaceToCode(myWorkspace);

Blockly 5 مولد کد داخلی را ارائه می دهد:

• جاوا اسکریپت ES5
• پایتون 3
• لوا 5.1
• دارت 2
• PHP 7

با استفاده از یکی از روش های زیر می توانید ژنراتورها را وارد و استفاده کنید.

ماژول ها

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

بعد از اینکه 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);

اسکریپت های محلی

بعد از اینکه 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);

اگر این فهرست شامل زبانی نیست که می‌خواهید برای آن کد تولید کنید، می‌توانید یک تولیدکننده کد سفارشی نیز ایجاد کنید.

مولدهای بلاک کد

بخش دوم تولید کد، تعریف کدهایی است که بلوک‌های جداگانه تولید می‌کنند. این باید برای هر بلوک، برای هر زبان جداگانه ای که می خواهید ایجاد کنید، انجام شود.

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

نحوه کار مولدهای کد برای انواع مختلف بلوک ها متفاوت است:

• بلوک های دارای خروجی
• بلوک های بدون خروجی

اما همه آنها نیاز به جمع آوری مقادیر از فیلدها ، جمع آوری کد بلوک های داخلی ، و سپس به هم پیوستن آن رشته ها دارند.

نسل

تولید می تواند زمانی انجام شود که کاربر نهایی آن را درخواست کند (مثلاً وقتی روی دکمه ای کلیک می کند)، یا می تواند به طور مداوم انجام شود.

به روز رسانی های مداوم به شما این امکان را می دهد که هر زمان که کاربر تغییری ایجاد کرد، کد را نمایش یا اجرا کنید. تولید کد یک عملیات سریع است، بنابراین تأثیر کمی در عملکرد برای انجام این کار وجود دارد. این کار با استفاده از شنونده رویداد انجام می شود.

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

کد مقدمه یا پس اسکریپت

پس از اینکه کد خود را تولید کردید، می توانید کد مقدمه یا مقدمه (اختیاری) را در ابتدا یا انتهای کد تولید شده قرار دهید.

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

کد مقدمه معمولاً برای گنجاندن تعاریف خارجی در ابتدای کد استفاده می شود. کد پست اسکریپت معمولاً برای فراخوانی توابع برای شروع رفتار در انتهای کد استفاده می شود.

اگر کد تولید شده شما همانطور که هست قابل اجرا است، دیگر نیازی به اضافه کردن مقدمه یا پس اسکریپت نیست.

اجرا

بعد از اینکه کد را تولید کردید، باید نحوه اجرای آن را بیابید. تصمیم گیری در مورد نحوه اجرای آن بسیار کاربردی است و خارج از محدوده Blockly است.

برای کد جاوا اسکریپت، تیم Blockly استفاده از JSInterpreter را توصیه می کند. زبان های دیگر به ابزارهای دیگری نیاز دارند.