יצירת קוד

יצירת קוד הוא התהליך של הפיכת הבלוקים של סביבת העבודה למחרוזת קוד שאפשר לבצע.

יצירת קוד היא חשובה מאוד, כי היא מאפשרת לבלוקים שלכם למעשה לבצע פעולות, כמו להעריך ביטויים אריתמטיים, להעביר דמות במבוך או להגדיר חנות וירטואלית!

לא ניתן להפעיל חסימות ישירות. במקום זאת, יוצרים מחרוזות קוד ואז מריצים אותן.

מחוללי קוד

כדי ליצור קוד, צריך לבחור את השפה מבוססת הטקסט שרוצים ליצור.

מחולל קוד הוא מחלקה שמטפלת בכללים ליצירת קוד שספציפיים לשפה מסוימת, אבל לא ספציפיים לבלוק מסוים. לדוגמה, הוא מטפל בדברים כמו עיצוב תגובות, כניסות פיסקה וציטוט מחרוזות.

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

const code = javascriptGenerator.workspaceToCode(myWorkspace);

חברתBlockly מספקת 5 מחוללי קוד מובנים:

• JavaScript ES5
• Python 3
• Lua 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) { /* ... */ }

אופן הפעולה של מחוללי קודים שונה בסוגים שונים של בלוקים:

• חסימות עם פלטים
• חסימות ללא פלטים

עם זאת, בכולם צריך לאסוף את הערכים משדות, לאסוף קוד של בלוקים פנימיים ואז לשרשר את המחרוזות האלה.

דור

אפשר ליצור אותה כשמשתמש הקצה מבקש אותה (לדוגמה, כשהם לוחצים על לחצן), או לבצע אותה באופן רציף.

עדכונים שוטפים מאפשרים להציג או להריץ את הקוד בכל פעם שהמשתמש מבצע שינוי. יצירת קוד היא פעולה מהירה, ולכן יש לה השפעה מועטה על הביצועים. הפעולה הזו מתבצעת באמצעות event listener.

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

קוד קידומת או קוד Postscript

אחרי שיצרתם את הקוד, תוכלו לכלול (אופציונלי) פתיח או קוד בתחילת הקוד שנוצר.

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

בדרך כלל משתמשים בקוד המקדים כדי לכלול הגדרות חיצוניות בתחילת הקוד. בדרך כלל משתמשים בקוד Postscript כדי להפעיל פונקציות כדי להתחיל בהתנהגות בסוף הקוד.

אם הקוד שיצרתם ניתן להרצה כמו שהוא, אין צורך לכלול קידומת או Postscript.

ביצוע

לאחר יצירת הקוד, עליך להבין איך להוציא אותו לפועל. ההחלטה להפעיל אותה היא ספציפית לאפליקציה, ומחוץ להיקף שלBlockly.

הצוות של blockly ממליץ על קוד JavaScript להשתמש ב-JSInterpreter. בשפות אחרות נדרשים כלים אחרים.