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

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

ध्यान दें: यह दस्तावेज़, Blockly Developer Tools के नए वर्शन के बारे में है. यह Blockly v10 और इसके बाद के वर्शन के साथ काम करता है. अगर आपको लेगसी टूल के बारे में जानकारी चाहिए, तो लेगसी दस्तावेज़ देखें.

ब्लॉक तय करना

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

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

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

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

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

Blockly इंपोर्ट फ़ॉर्मैट

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

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

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

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

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

कोड का आउटपुट

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

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

कोड हेडर

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

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

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

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

जनरेटर स्टब

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

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

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

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

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

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

लेगसी Block Factory से इंपोर्ट करना

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

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

   

2. नए ब्लॉक फ़ैक्ट्री में, टूलबार में मौजूद "ब्लॉक लोड करें" बटन पर क्लिक करें.

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

   

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

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

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