ऐप्लिकेशन डिज़ाइन

Blockly का इस्तेमाल करने वाला ऐप्लिकेशन डिज़ाइन करते समय, चुनने के लिए कई पैराडाइम होते हैं. इन विकल्पों पर शुरुआत में ही विचार कर लेना चाहिए, क्योंकि इनसे यह तय होता है कि उपयोगकर्ता को किन ब्लॉक की ज़रूरत होगी.

कॉन्फ़िगरेशन

Blockly के कई ऐप्लिकेशन का इस्तेमाल, कॉन्फ़िगरेशन के बारे में बताने के लिए किया जाता है. हालांकि, इनका इस्तेमाल एक्ज़ीक्यूटेबल प्रोग्राम के लिए नहीं किया जाता. कॉन्फ़िगरेशन ऐप्लिकेशन आम तौर पर, वर्कस्पेस पर रूट लेवल के एक ब्लॉक को इनिशियलाइज़ करके शुरू होते हैं. इसका एक अच्छा उदाहरण, Blockly डेवलपर टूल का Block Factory टैब है:

Blockly.Blocks['factory_base'] = {
  init: function() {
    this.setDeletable(false);
    this.setMovable(false);
    this.setEditable(false);
    // etc...
  }
}

Blockly.serialization.blocks.append({'type': 'factory_base'}, workspace);

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

ऐसे ऐप्लिकेशन, रूट ब्लॉक से कनेक्ट न होने वाले किसी भी ब्लॉक को अपने-आप बंद कर सकते हैं. इसे एक लाइन में इस तरह लिखा जा सकता है:

workspace.addChangeListener(Blockly.Events.disableOrphans);

सीरियल प्रोग्राम

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

वर्कस्पेस पर मौजूद हर (बंद नहीं किया गया) ब्लॉक, प्रोग्राम का हिस्सा होगा. अगर ब्लॉक के कई स्टैक हैं, तो सबसे ऊपर वाले स्टैक के ब्लॉक पहले लागू होते हैं. (अगर दो स्टैक की ऊंचाई लगभग एक जैसी है, तो बाईं ओर (आरटीएल मोड में दाईं ओर) मौजूद स्टैक को प्राथमिकता दी जाती है.)

वर्कस्पेस को किसी भी समय एक्ज़ीक्यूटेबल कोड में एक्सपोर्ट किया जा सकता है. इस कोड को JavaScript में क्लाइंट साइड पर (eval या JS इंटरप्रेटर का इस्तेमाल करके) या किसी भी भाषा में सर्वर साइड पर एक्ज़ीक्यूट किया जा सकता है.

import {javascriptGenerator} from 'blockly/javascript';

var code = javascriptGenerator.workspaceToCode(workspace);

पैरलल प्रोग्राम

कुछ Blockly ऐप्लिकेशन, ब्लॉक के सभी स्टैक को क्रम से चलाने के बजाय, एक साथ चलाने का विकल्प चुनते हैं. उदाहरण के लिए, संगीत वाला कोई ऐसा ऐप्लिकेशन जिसमें ड्रम लूप और मेलोडी एक साथ चलती है.

पैरलल एक्ज़ीक्यूशन को लागू करने का एक तरीका यह है कि हर ब्लॉक के लिए अलग-अलग कोड जनरेट किया जाए:

import {javascriptGenerator} from 'blockly/javascript';

var json = Blockly.serialization.workspaces.save(workspace);

// Store top blocks separately, and remove them from the JSON.
var blocks = json['blocks']['blocks'];
var topBlocks = blocks.slice();  // Create shallow copy.
blocks.length = 0;

// Load each block into the workspace individually and generate code.
var allCode = [];
var headless = new Blockly.Workspace();
for (var i = 0; block < topBlocks.length; i++) {
  var block = topBlocks[i];
  blocks.push(block);
  Blockly.serialization.workspaces.load(json, headless);
  allCode.push(javascriptGenerator.workspaceToCode(headless));
  blocks.length = 0;
}

अगर टारगेट की गई भाषा JavaScript है, तो allCode ऐरे का इस्तेमाल एक साथ कई JS इंटरप्रेटर बनाने के लिए किया जा सकता है, ताकि उन्हें एक साथ एक्ज़ीक्यूट किया जा सके. अगर टारगेट की गई भाषा Python जैसी कोई भाषा है, तो allCode ऐरे को एक ऐसे प्रोग्राम में असेंबल किया जा सकता है जो थ्रेडिंग मॉड्यूल का इस्तेमाल करता है.

किसी भी पैरलल प्रोग्राम की तरह, वैरिएबल और फ़ंक्शन जैसे शेयर किए गए किसी भी संसाधन के बारे में सोच-समझकर फ़ैसले लेने चाहिए.

इवेंट पर आधारित प्रोग्राम

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

कुछ डेवलपर, इवेंट ब्लॉक के ऊपर 'हैट' जोड़ना पसंद करते हैं, ताकि वे अन्य ब्लॉक से अलग दिखें. यह Blockly का डिफ़ॉल्ट लुक नहीं है. हालांकि, इसे रेंडरर कॉन्स्टेंट ADD_START_HATS को true (कस्टम रेंडरर कोडलैब - कॉन्स्टेंट को बदलें) पर सेट करके जोड़ा जा सकता है. इसके अलावा, थीम जोड़कर और ब्लॉक स्टाइल पर हैट का विकल्प सेट करके भी इसे जोड़ा जा सकता है. थीम के हिस्से के तौर पर ब्लॉक पर हैट सेट करने के बारे में ज़्यादा जानकारी के लिए, थीम के दस्तावेज़ में ब्लॉक स्टाइल देखें.

इवेंट-ड्रिवन मॉडल में, प्रोग्राम शुरू करने के लिए हैंडलर बनाना भी सही हो सकता है. इस मॉडल के तहत, वर्कस्पेस पर मौजूद किसी भी ऐसे ब्लॉक को अनदेखा कर दिया जाएगा जो इवेंट हैंडलर से कनेक्ट नहीं है. साथ ही, उसे लागू नहीं किया जाएगा.

इवेंट का इस्तेमाल करने वाला सिस्टम डिज़ाइन करते समय, यह ध्यान रखें कि क्या एक ही इवेंट हैंडलर के कई इंस्टेंस को सपोर्ट करना मुमकिन है या ज़रूरी है.

Workspace का लेआउट

स्क्रीन को बाईं से दाईं ओर लेआउट करने के दो सही तरीके हैं. एक तरीका बाईं ओर मौजूद टूलबार, बीच में वर्कस्पेस, और दाईं ओर आउटपुट विज़ुअलाइज़ेशन से शुरू होता है. इस लेआउट का इस्तेमाल, Scratch के पहले वर्शन के साथ-साथ Made with Code भी करता है.

दूसरे तरीके में, बाईं ओर आउटपुट विज़ुअलाइज़ेशन, बीच में टूलबार, और दाईं ओर वर्कस्पेस दिखता है. इस लेआउट का इस्तेमाल Scratch के दूसरे वर्शन के साथ-साथ, ज़्यादातर Blockly ऐप्लिकेशन करते हैं.

दोनों ही मामलों में, वर्कस्पेस को स्क्रीन के उपलब्ध साइज़ के हिसाब से स्ट्रेच होना चाहिए -- उपयोगकर्ताओं को प्रोग्रामिंग के लिए ज़्यादा से ज़्यादा जगह की ज़रूरत होती है. ऊपर दिए गए स्क्रीनशॉट में देखा जा सकता है कि पहले लेआउट में, चौड़ी स्क्रीन पर परफ़ॉर्मेंस अच्छी नहीं है. ऐसा इसलिए है, क्योंकि उपयोगकर्ता का कोड और आउटपुट विज़ुअलाइज़ेशन अलग-अलग हैं. वहीं, दूसरे लेआउट में बड़े प्रोग्राम के लिए ज़्यादा जगह मिलती है. साथ ही, तीनों सेक्शन एक-दूसरे के करीब रहते हैं.

उपयोगकर्ताओं के लिए यह भी ज़रूरी है कि वे सबसे पहले उस समस्या पर ध्यान दें जिसे उन्हें हल करना है. इसके बाद, उपलब्ध टूल देखें और फिर प्रोग्रामिंग शुरू करें.

अरबी और हिब्रू अनुवादों के लिए, पूरे क्रम को उलटने की ज़रूरत होती है.

कुछ मामलों में, जैसे कि कम संख्या में आसान ब्लॉक का इस्तेमाल करते समय, टूलबॉक्स को वर्कस्पेस के ऊपर या नीचे रखने से काम हो सकता है. इन मामलों में, Blockly टूलबॉक्स में हॉरिज़ॉन्टल स्क्रोलिंग की सुविधा देता है. हालांकि, इसका इस्तेमाल सावधानी से किया जाना चाहिए.

सुझाव: प्रोग्राम के विज़ुअलाइज़ेशन को टूलबार के बगल में रखें.