फ़ैक्ट्री ब्लॉक करने के लिए प्लगिन फ़ील्ड जोड़ें

Blockly Developer Tools की मदद से, ब्लॉक का इस्तेमाल करके कस्टम ब्लॉक बनाए जा सकते हैं! इसमें उन फ़ील्ड के लिए भी सहायता मिलती है जिन्हें प्लगिन के तौर पर पब्लिश किया जाता है. इसके अलावा, इसमें Blockly के साथ आने वाले फ़ील्ड के लिए भी सहायता मिलती है. अगर आपने कोई कस्टम फ़ील्ड बनाया है, तो इस गाइड को पढ़कर, Block Factory में इसके लिए सहायता जोड़ी जा सकती है. कस्टम फ़ील्ड के लिए सहायता जोड़ने से पहले, उसे npm पर पब्लिश किया जाना चाहिए. आपको अपने फ़ील्ड को अपडेट करने का वादा भी करना होगा, ताकि Blockly में होने वाले बदलावों के साथ इसे अपडेट किया जा सके. ऐसा न करने पर, हमें आने वाले समय में इसे Block Factory से हटाना पड़ सकता है.

ब्लॉक फ़ैक्ट्री पर डेवलपमेंट

ब्लॉक फ़ैक्ट्री का सोर्स कोड, examples/developer-tools डायरेक्ट्री में मौजूद blockly-samples रिपॉज़िटरी में मौजूद है.

blockly-samples में डेवलपर टूल में बदलाव सबमिट करने के लिए, आपको blockly-samples में डेवलपमेंट के लिए सामान्य चरणों का पालन करना होगा. हालांकि, प्लगिन के साथ काम करने के बजाय, आपको examples/developer-tools को सीधे examples/developer-tools डायरेक्ट्री से चलाना होगा. इसके लिए, आपको blockly-samples के रूट लेवल पर जाने की ज़रूरत नहीं होगी.npm install

प्लगिन इंस्टॉल करना

कस्टम फ़ील्ड को ब्लॉक फ़ैक्ट्री में पूर्वावलोकन के तौर पर दिखाने के लिए, कस्टम फ़ील्ड को इंस्टॉल करना ज़रूरी है. अपने फ़ील्ड को developer-tools की npm डिपेंडेंसी के तौर पर जोड़ें. इसके बाद, developer-tools/src/blocks/index.ts में इसे रजिस्टर करें या ज़रूरी सेटअप से जुड़ा कोई अन्य काम करें.

फ़ील्ड के लिए ब्लॉक बनाना

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

ब्लॉक की परिभाषा बनाना

आपको अपने फ़ील्ड के लिए ब्लॉक डिज़ाइन करना होगा. अगर आपको मेटा ब्लॉक डिज़ाइन करना है, तो Block Factory का इस्तेमाल करके भी इसे डिज़ाइन किया जा सकता है! ब्लॉक में, उपयोगकर्ता को आपके फ़ील्ड के लिए ज़रूरी सेटअप कॉन्फ़िगर करने की अनुमति होनी चाहिए. जैसे, डिफ़ॉल्ट वैल्यू और नाम. इस ब्लॉक की परिभाषा को developer-tools/src/blocks/fields.ts में जोड़ें और इसे developer-tools/src/blocks/index.ts में इंपोर्ट करें.

टूलबॉक्स में ब्लॉक जोड़ें

इसके बाद, आपको इस ब्लॉक को टूलबॉक्स की परिभाषा में जोड़ना होगा, ताकि उपयोगकर्ता इसे ऐक्सेस कर सकें. टूलबॉक्स की परिभाषा developer-tools/src/toolbox.ts में मौजूद है. आपके ब्लॉक को "फ़ील्ड" कैटगरी में जोड़ा जाना चाहिए.

कोड जनरेटर

ब्लॉक फ़ैक्ट्री, कोड जनरेटर सिस्टम का इस्तेमाल करके काम करती है. इस सिस्टम के बारे में आपको Blockly से पहले से ही जानकारी है. हर ब्लॉक में, ब्लॉक फ़ैक्ट्री से जनरेट किए गए हर तरह के आउटपुट के लिए, ब्लॉक-कोड जनरेटर होता है. साथ ही, पैरंट ब्लॉक, चाइल्ड ब्लॉक के कोड को सही आउटपुट में असेंबल करते हैं. कस्टम फ़ील्ड के लिए सहायता जोड़ने के लिए, आपको CodeGenerator क्लास में से हर एक के लिए ब्लॉक-कोड जनरेटर फ़ंक्शन जोड़ने होंगे.

output-generators/fields डायरेक्ट्री में, अपने फ़ील्ड ब्लॉक के लिए एक फ़ाइल बनाएं. आपको इस फ़ाइल में, यहां दिए गए हर जनरेटर के लिए ब्लॉक-कोड जनरेटर जोड़ने होंगे. इस फ़ाइल को blocks/index.ts फ़ाइल में इंपोर्ट करें, ताकि ब्लॉक-कोड जनरेट करने वाले फ़ंक्शन ऐप्लिकेशन में लोड हो जाएं.

JavaScript की परिभाषा

javascriptDefinitionGenerator, ऐसा कोड बनाता है जिसे आपके कस्टम फ़ील्ड वाले ब्लॉक के JavaScript डेफ़िनिशन में शामिल किया जाएगा. आम तौर पर, इसका मतलब है कि ब्लॉक-कोड जनरेटर को कोड की एक ऐसी लाइन दिखानी चाहिए जो .appendField(new YourFieldConstructor(arg1, arg2), 'userSpecifiedName') जैसी दिखती हो. ध्यान दें कि इस कोड की लाइन में सेमीकोलन शामिल नहीं है, क्योंकि कई फ़ील्ड वाले इनपुट में, appendField को एक साथ कई बार कॉल किया जाएगा. कंस्ट्रक्टर में मौजूद आर्ग्युमेंट, उपयोगकर्ता की ओर से फ़ील्ड ब्लॉक पर सेट की गई वैल्यू से लिए जाते हैं. यहां FieldAngle के लिए, ब्लॉक-कोड जनरेटर का एक उदाहरण दिया गया है:

javascriptDefinitionGenerator.forBlock['field_angle'] = function (
  block: Blockly.Block,
  generator: JavascriptDefinitionGenerator,
): string {
  const name = generator.quote_(block.getFieldValue('FIELDNAME'));
  const angle = block.getFieldValue('ANGLE');
  return `.appendField(new FieldAngle(${angle}), ${name})`;
};

उपयोगकर्ता ने Block Factory टूलबॉक्स की "फ़ील्ड" कैटगरी से जिस ऐंगल ब्लॉक को ड्रैग किया है उसमें दो फ़ील्ड हैं:

• FIELDNAME: उपयोगकर्ता, अपने कस्टम ब्लॉक पर फ़ील्ड का नाम सेट कर सकता है
• ANGLE: उपयोगकर्ता, डिफ़ॉल्ट ऐंगल की वैल्यू सेट कर सकता है

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

ध्यान दें: किसी भी जगह पर फ़ील्ड वैल्यू के आस-पास कोटेशन मार्क लगाने की ज़रूरत होती है. जैसे, appendField को फ़ील्ड का नाम पास करते समय, आपको कोटेशन मार्क में मैन्युअल तरीके से रैप करने के बजाय generator.quote_ का इस्तेमाल करना चाहिए.

JSON की परिभाषा

jsonDefinitionGenerator भी इसी तरह का है, लेकिन यह JSON ब्लॉक की उस परिभाषा को आउटपुट करता है जो आपके फ़ील्ड से मेल खाती है. आम तौर पर, यह कोड एक JSON ऑब्जेक्ट होता है. इसमें ये चीज़ें शामिल होती हैं:

• type: यह Blockly फ़ील्ड रजिस्ट्री में मौजूद आपके फ़ील्ड के नाम से मेल खाता है
• name: उपयोगकर्ता, अपने कस्टम ब्लॉक पर फ़ील्ड का नाम सेट कर सकता है
• आपके फ़ील्ड के JSON इनिशियलाइज़ेशन के लिए ज़रूरी कोई अन्य कस्टम प्रॉपर्टी.

यहां FieldAngle का एक और उदाहरण दिया गया है:

jsonDefinitionGenerator.forBlock['field_angle'] = function (
  block: Blockly.Block,
  generator: JsonDefinitionGenerator,
): string {
  const code = {
    type: 'field_angle',
    name: block.getFieldValue('FIELDNAME'),
    angle: block.getFieldValue('ANGLE'),
  };
  return JSON.stringify(code);
};

ध्यान दें: ब्लॉक-कोड जनरेटर हमेशा स्ट्रिंग दिखाते हैं. इसलिए, ऑब्जेक्ट को वापस भेजने से पहले उसे स्ट्रिंग में बदलें.

कोड हेडर

कोड हेडर जनरेटर, BlockFactory में दिखाए गए कोड हेडर का आउटपुट बनाता है. इस आउटपुट को esmodule इंपोर्ट और स्क्रिप्ट टैग के बीच टॉगल किया जा सकता है. यह इस बात पर निर्भर करता है कि उपयोगकर्ता कोड को कैसे लोड करना चाहता है. इसलिए, असल में दो अलग-अलग जनरेटर इंस्टेंस होते हैं: हर मामले के लिए एक. आपको हर एक के लिए ब्लॉक-कोड जनरेटर जोड़ना होगा. यहां FieldAngle का एक उदाहरण दिया गया है:

importHeaderGenerator.forBlock['field_angle'] = function (
  block: Blockly.Block,
  generator: CodeHeaderGenerator,
): string {
  generator.addHeaderLine(
    `import {registerFieldAngle, FieldAngle} from '@blockly/field-angle';`,
  );
  generator.addHeaderLine(`registerFieldAngle();`);
  return '';
};

scriptHeaderGenerator.forBlock['field_angle'] = function (
  block: Blockly.Block,
  generator: CodeHeaderGenerator,
): string {
  generator.addHeaderLine(
    `<script src="https://unpkg.com/@blockly/field-angle"></script>`,
  );
  generator.addHeaderLine(`registerFieldAngle();`);
  return '';
};

इन जनरेटर में addHeaderLine नाम का एक तरीका होता है. इसकी मदद से, कोड की ऐसी लाइन तय की जा सकती है जिसे कोड में आपके फ़ील्ड का इस्तेमाल करने से पहले कॉल किया जाना चाहिए. आम तौर पर, इसमें फ़ील्ड को इंपोर्ट करने या स्क्रिप्ट टैग के ज़रिए लोड करने जैसे काम शामिल होते हैं. साथ ही, इसमें ऐसे फ़ंक्शन को कॉल करना भी शामिल हो सकता है जो फ़ील्ड को Blockly की फ़ील्ड रजिस्ट्री में रजिस्टर करेगा.

अहम जानकारी: अगर आपका पैकेज npm पर पब्लिश किया गया है, तो यह unpkg पर अपने-आप उपलब्ध हो जाना चाहिए. unpkg एक ऐसा प्लैटफ़ॉर्म है जहां से स्क्रिप्ट टैग आसानी से लोड किए जा सकते हैं.

इन दोनों ब्लॉक-कोड जनरेटर के लिए, सभी कोड को addHeaderLine पर कॉल करके जोड़ा जाना चाहिए. इस फ़ंक्शन से यह पक्का किया जाएगा कि हर हेडर लाइन सिर्फ़ एक बार दिखे. भले ही, आपके कस्टम फ़ील्ड ब्लॉक का इस्तेमाल एक कस्टम ब्लॉक में कई बार किया गया हो. ब्लॉक-कोड जनरेटर को खाली स्ट्रिंग दिखानी चाहिए.

जनरेटर स्टब

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

कस्टम ब्लॉक के लिए जनरेटर स्टब में, पहले से बना एक वैरिएबल शामिल होता है. यह ब्लॉक के हर फ़ील्ड को दिखाता है. इसके बाद, TODO होता है. उपयोगकर्ता को इसे पूरा करना होता है, ताकि इन सभी वैरिएबल को फ़ाइनल कोड स्ट्रिंग में इकट्ठा किया जा सके. इससे उपयोगकर्ता के कस्टम ब्लॉक को वापस लाया जा सकेगा. इसका मतलब है कि आपके ब्लॉक-कोड जनरेटर को आम तौर पर सिर्फ़ उस लाइन को वापस करना होता है जो इस कस्टम वैरिएबल को बनाती है. मान लीजिए कि उपयोगकर्ता, ऐसा कस्टम ब्लॉक बना रहा है जो उसके कैनवस में सूरज की रोशनी की किरणें जोड़ेगा. वे ब्लॉक में एक ऐंगल फ़ील्ड जोड़ते हैं और उसका नाम "SUN_DIRECTION" रखते हैं. इस ब्लॉक के लिए जनरेटर स्टब में, const angle_sun_direction = block.getFieldValue("SUN_DIRECTION"); लाइन शामिल होगी. यह कोड की वह लाइन है जिसे ऐंगल फ़ील्ड के लिए, हमारे ब्लॉक-कोड जनरेटर को दिखाना होगा:

generatorStubGenerator.forBlock['field_angle'] = function (
  block: Blockly.Block,
  generator: GeneratorStubGenerator,
): string {
  const name = block.getFieldValue('FIELDNAME');
  const fieldVar = generator.createVariableName('angle', name);
  return `const ${fieldVar} = block.getFieldValue(${generator.quote_(
    name,
  )});\n`;
};

वैरिएबल के लिए स्टैंडर्ड नाम पाने के लिए, generator.createVariableName को कॉल किया जा सकता है. साथ ही, अपने फ़ील्ड का टाइप (जैसे कि angle, number वगैरह) और उपयोगकर्ता ने अपने फ़ील्ड का क्या नाम रखा है, उसे पास किया जा सकता है.

इसे आज़माएं

इन सभी फ़ाइलों को लिखने के बाद, आपको blockly-samples/examples/developer-tools डायरेक्ट्री में npm start चलाकर, BlockFactory शुरू करना चाहिए. आपको फ़ील्ड कैटगरी से अपने ब्लॉक को खींचकर, उसे किसी ब्लॉक के इनपुट में जोड़ना होगा. इसके बाद, आपको आउटपुट में बदलाव दिखेगा. देखें कि ब्लॉक की झलक सही दिख रही हो और आउटपुट सेक्शन में मौजूद हर कोड सही हो.