कोड जनरेट करना

कोड जनरेशन, फ़ाइल फ़ोल्डर में ब्लॉक को कोड की स्ट्रिंग में बदलने की प्रोसेस है, जिसे एक्ज़ीक्यूट किया जा सकता है.

कोड जनरेशन बहुत ज़रूरी है, क्योंकि इसकी मदद से आपके ब्लॉक असल में अंकगणित के एक्सप्रेशन का आकलन करके, किसी किरदार को भूल-भूलैया से बाहर ले जाने या ऑनलाइन स्टोर कॉन्फ़िगर करने जैसे काम कर सकते हैं!

ब्लॉक को सीधे "चल" नहीं सकते. इसके बजाय, कोड स्ट्रिंग जनरेट करें और फिर उन्हें एक्ज़ीक्यूट करें.

कोड जनरेटर

कोड जनरेट करने के लिए, आपको टेक्स्ट के आधार पर कौनसी भाषा जनरेट करनी है, यह चुनना होगा.

कोड जनरेटर ऐसी क्लास है जो कोड जनरेट करने के नियमों को हैंडल करती है. ये नियम किसी खास भाषा के लिए होते हैं, न कि किसी ब्लॉक के लिए. जैसे, यह टिप्पणियों को फ़ॉर्मैट करने, स्टेटमेंट इंडेंट करने, और कोट करने वाली स्ट्रिंग बनाने जैसी चीज़ों को हैंडल करता है.

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

const code = javascriptGenerator.workspaceToCode(myWorkspace);

ब्लॉकली, पहले से मौजूद पांच कोड जनरेटर उपलब्ध कराता है:

  • JavaScript ES5
  • Python 3
  • लुआ 5.1
  • डार्ट 2
  • 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) { /* ... */ }

अलग-अलग तरह के ब्लॉक के लिए, कोड जनरेटर के काम करने का तरीका अलग-अलग है:

हालांकि, इन सभी के लिए फ़ील्ड से वैल्यू इकट्ठा करना, इनर ब्लॉक का कोड इकट्ठा करना, और इसके बाद स्ट्रिंग को जोड़ना होता है.

पीढ़ी

जब असली उपयोगकर्ता इसका अनुरोध करे, तब जनरेट किया जा सकता है (उदाहरण के लिए, जब वह किसी बटन पर क्लिक करे) या यह काम लगातार किया जा सकता है.

लगातार अपडेट होने की सुविधा से, जब भी उपयोगकर्ता बदलाव करता है, तब कोड को दिखाने या चलाने की सुविधा मिलती है. कोड जनरेट करना एक तेज़ कार्रवाई है. इसलिए, ऐसा करने से परफ़ॉर्मेंस पर बहुत कम असर पड़ता है. ऐसा इवेंट लिसनर का इस्तेमाल करके किया जाता है.

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 इस्तेमाल करने का सुझाव देती है. अन्य भाषाओं के लिए अन्य टूल की ज़रूरत होती है.