ब्लॉक किए जाने वाले डेवलपर टूल

Blockly Developer Tools एक वेब पर आधारित डेवलपर टूल है. इससे आपको कस्टम ब्लॉक बनाने और उन्हें अपने ऐप्लिकेशन में शामिल करने में मदद मिल सकती है.

ब्लॉक फ़ैक्ट्री का स्क्रीनशॉट, जिसमें टूलबॉक्स और आउटपुट के अलग-अलग एरिया दिखाए गए हैं

ब्लॉक तय करें

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

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

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

आउटपुट कॉन्फ़िगरेशन

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

आउटपुट कॉन्फ़िगरेशन पैनल का स्क्रीनशॉट, जिसमें ब्लॉकली इंपोर्ट फ़ॉर्मैट, ब्लॉक डेफ़िनिशन फ़ॉर्मैट, और कोड जनरेटर लैंग्वेज के लिए सिलेक्टर दिए गए हैं

ब्लॉकली इंपोर्ट फ़ॉर्मैट

अगर ऐप्लिकेशन के साथ बिल्ड टूल का इस्तेमाल किया जाता है, तो एचटीएमएल में <script> टैग से या import स्टेटमेंट का इस्तेमाल करके, Blockly को लोड किया जा सकता है. इस विकल्प से, Blockly API के कुछ हिस्सों का रेफ़रंस देने के तरीके पर असर पड़ता है. कौनसा विकल्प चुनना है, इस बारे में ज़्यादा जानने के लिए Blockly को लोड करने से जुड़ा दस्तावेज़ देखें. आप चाहे जिस भी तरीके का इस्तेमाल करें, ब्लॉक फ़ैक्ट्री में उससे जुड़ा विकल्प चुनना न भूलें, ताकि आपके ऐप्लिकेशन में जो कोड जोड़ा जाएगा वह आपके ऐप्लिकेशन के लिए सही हो.

परिभाषा का फ़ॉर्मैट ब्लॉक करें

यह विकल्प, JSON या JavaScript में ब्लॉक तय करने की सुविधा देता है. JSON फ़ॉर्मैट को प्राथमिकता दी जाती है, लेकिन अगर आपको म्यूटर जैसी बेहतर सुविधाएं जोड़नी हैं, तो JavaScript फ़ॉर्मैट का इस्तेमाल किया जा सकता है.

कोड जनरेटर की भाषा

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

कोड का आउटपुट

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

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

कोड हेडर

Code Headers सेक्शन में वह कोड दिखता है जिसकी ज़रूरत Blockly लाइब्रेरी को लोड करने और आपके चुने गए लैंग्वेज जनरेटर को लोड करने के लिए होती है. यहां अन्य कॉन्फ़िगरेशन भी हो सकते हैं; उदाहरण के लिए, ब्लॉक में शामिल कुछ फ़ील्ड, Blockly प्लगिन से हो सकते हैं. इन प्लगिन के अपने इंपोर्ट स्टेटमेंट होंगे. इसके अलावा, फ़ील्ड को शुरू करने के लिए, आपको कोई दूसरा कोड चलाना होगा. इस कोड को इनमें से किसी भी कोड सेक्शन से पहले शामिल किया जाना चाहिए.

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

ब्लॉक की परिभाषा: इससे ब्लॉकली के आकार के बारे में पता चलता है. जैसे, उसमें कौनसे फ़ील्ड और इनपुट हैं, रंग वगैरह. इस कोड को इस्तेमाल करने के बाद, Blockly को पता चल जाएगा कि इसकी type के आधार पर ब्लॉक कैसे बनाया जाए.

अगर सैंपल ऐप्लिकेशन का इस्तेमाल किया जा रहा है, तो इस कोड को blocks/ डायरेक्ट्री में मौजूद फ़ाइल में शामिल किया जा सकता है. अगर आपके पास खुद का ऐप्लिकेशन स्ट्रक्चर है, तो किसी ब्लॉक का नाम बताने से पहले, इस कोड को ज़रूर शामिल करें, जैसे कि टूलबॉक्स डेफ़िनिशन में. दोनों में से किसी भी तरीके से, पक्का करें कि कोड हेडर उस फ़ाइल में मौजूद हों जिसमें यह कोड शामिल किया गया है.

जनरेटर स्टब

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

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

सिलसिलेवार तरीके से दिए गए निर्देश वाला वीडियो

इस वीडियो में, ब्लॉक को तय करने के तरीके के बारे में पूरी जानकारी दी गई है. यूज़र इंटरफ़ेस (यूआई) पुराना है. हालांकि, इससे जिन सुविधाओं को ब्लॉक किया जाता है वे ज़्यादा या कम सटीक होती हैं.

लाइब्रेरी ब्लॉक करें

किसी भी समय ब्लॉक में बदलाव करने पर, ब्लॉक अपने-आप ब्राउज़र के लोकल स्टोरेज में सेव हो जाते हैं. सबसे ऊपर मौजूद टूलबार में, उनसे जुड़े बटन पर क्लिक करके, नया ब्लॉक बनाया जा सकता है या अपने लोकल स्टोरेज से कोई मौजूदा ब्लॉक लोड किया जा सकता है.

लेगसी ब्लॉक फ़ैक्ट्री से इंपोर्ट करें

अगर आपने लेगसी ब्लॉक फ़ैक्ट्री का इस्तेमाल किया है और आपको अपनी मौजूदा ब्लॉक परिभाषाओं को नए टूल में माइग्रेट करना है, तो यह तरीका अपनाएं:

  1. लेगसी ब्लॉक फ़ैक्ट्री में, टूलबार में Export Block Library बटन पर क्लिक करें. इससे आपकी सभी ब्लॉक डेफ़िनिशन वाली एक फ़ाइल डाउनलोड हो जाएगी.

    हाइलाइट किए गए &quot;Export Block Library&quot; बटन के साथ लेगसी ब्लॉक फ़ैक्ट्री का स्क्रीनशॉट

  2. नई ब्लॉक फ़ैक्ट्री में, टूलबार में Load block बटन पर क्लिक करें.

  3. मेनू में "ब्लॉक फ़ैक्ट्री से इंपोर्ट करें" विकल्प चुनें.

    ब्लॉक फ़ैक्ट्री का स्क्रीनशॉट, जिसमें &quot;लोड ब्लॉक&quot; और &quot;इंपोर्ट करें&quot; बटन को हाइलाइट किया गया है

  4. पहले चरण में डाउनलोड की गई फ़ाइल अपलोड करें.

  5. ब्लॉक की परिभाषाएं, नए फ़ॉर्मैट में अपने-आप बदल जाएंगी और अब वे Load block मेन्यू में उपलब्ध होंगी. अगर पहले से मौजूद ब्लॉक में कोई समस्या होती है, तो हो सकता है कि ब्लॉक का नाम बदल दिया गया हो.

  6. अगर आपके किसी भी ब्लॉक को पार्स करने में गड़बड़ियां हुई थीं, तो हम उन्हें लोड नहीं कर पाएंगे. आप ब्लॉक वाले सैंपल के लिए गड़बड़ी की जानकारी फ़ाइल करके और फ़ाइल को पार्स न होने वाली फ़ाइल को शामिल करके, हमारी मदद कर सकते हैं.