कोड जनरेशन एक ऐसी प्रोसेस है जिसकी मदद से, किसी फ़ाइल फ़ोल्डर के ब्लॉक को एक्ज़ीक्यूट किया जा सकने वाला कोड की स्ट्रिंग.
कोड जनरेट करना बेहद ज़रूरी है, क्योंकि इसकी मदद से आपके ब्लॉक असल में ये किया जाता है, जैसे अंकगणितीय व्यंजकों का आकलन करना, किसी वर्ण को एक से दूसरी जगह ले जाना भूलभुलैया से आगे बढ़ें या ऑनलाइन स्टोर कॉन्फ़िगर करें!
आपके पास "चलाने" का विकल्प नहीं है सीधे ब्लॉक करता है. इसके बजाय आप कोड स्ट्रिंग जनरेट करते हैं और फिर उन्हें लागू करेगा.
कोड जनरेटर
कोड जनरेट करने के लिए, आपको अपनी पसंद की टेक्स्ट-आधारित भाषा चुननी होगी जनरेट करना.
कोड जनरेटर वह श्रेणी होती है, जो कोड जनरेट करने के लिए उन नियमों को प्रबंधित करती है, जो ख़ास भाषा के लिए, लेकिन किसी एक ब्लॉक के लिए ख़ास नहीं. इसके लिए उदाहरण के लिए, यह टिप्पणियों को फ़ॉर्मैट करने, स्टेटमेंट इंडेंट करने, और कोट करने की स्ट्रिंग.
// javascriptGenerator is a code generator that makes javascript strings.
import {javascriptGenerator} from 'blockly/javascript';
const code = javascriptGenerator.workspaceToCode(myWorkspace);
Blockly, पांच तरह के कोड जनरेटर उपलब्ध कराता है:
- JavaScript ES5
- Python 3
- लुआ 5.1
- डार्ट 2
- 7,000
यहां दिए गए किसी एक तरीके का इस्तेमाल करके, जनरेटर को इंपोर्ट और इस्तेमाल किया जा सकता है.
मॉड्यूल
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) { /* ... */ }
अलग-अलग तरह के ब्लॉक के लिए, कोड जनरेटर के काम करने का तरीका अलग-अलग होता है:
हालांकि, उन सभी के लिए फ़ील्ड से वैल्यू इकट्ठा करना ज़रूरी है, इनर ब्लॉक कलेक्ट करें' code, और फिर जोड़ा जाना उन स्ट्रिंग का एक जैसा होना चाहिए.
जेनरेशन
जेनरेशन तब किया जा सकता है, जब असली उपयोगकर्ता इसका अनुरोध करे (उदाहरण के लिए, जब वे एक बटन पर क्लिक करें) या ऐसा लगातार किया जा सकता है.
लगातार अपडेट होने से, आप उस समय कोड को दिखा या चला सकते हैं, जब उपयोगकर्ता किसी बदलें. कोड जनरेट करना बहुत तेज़ काम है, इसलिए इसकी परफ़ॉर्मेंस अच्छी नहीं है कितना असर पड़ता है. ऐसा इवेंट लिसनर का इस्तेमाल करके किया जाता है.
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`;
प्रीएंबल कोड का इस्तेमाल आम तौर पर, शुरुआत में बाहरी परिभाषाओं को शामिल करने के लिए किया जाता है डालें. आम तौर पर, पोस्टस्क्रिप्ट कोड का इस्तेमाल, फ़ंक्शन को कॉल करने के लिए किया जाता है कोड के अंत में मौजूद होता है.
अगर आपका जनरेट किया गया कोड ज्यों का त्यों चलाया जा सकता है, तो प्रीएंबल या पोस्टस्क्रिप्ट डालें.
प्लान लागू करना
कोड जनरेट करने के बाद, आपको यह पता लगाना होगा कि उसे कैसे एक्ज़ीक्यूट करना है. यह तय करना कि इसे कैसे एक्ज़ीक्यूट किया जाए, यह खास तौर पर ऐप्लिकेशन के हिसाब से होता है और दायरे से बाहर होता है ब्लॉकली में से एक है.
ब्लॉकली टीम, JavaScript कोड के लिए JSInterpreter. अन्य भाषाओं के लिए अन्य टूल की आवश्यकता होती है.