יצירת קוד

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

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

אי אפשר "לרוץ" של משפטים יחידים, במקום זאת יוצרים מחרוזות קוד, לבצע אותן.

מחוללי קוד

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

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

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

ביטול האריזה

אחרי שמוסיפים את 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);

הקדמה או קוד מיקוד

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

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

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

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

ביצוע

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

לגבי קוד JavaScript, הצוות של Blockly ממליץ להשתמש JSInterpreter. לשפות אחרות נדרשים כלים אחרים.