Blockly's के Core में हैकिंग करने या प्लगिन डेवलप करने के दौरान, प्लेग्राउंड काफ़ी काम का टूल होता है. इसमें Blockly का पहले से कॉन्फ़िगर किया गया इंस्टेंस होता है. इसका इस्तेमाल, जांच करने, डीबग करने या प्रोटोटाइप बनाने के लिए किया जा सकता है. Google में, प्लेग्राउंड का इस्तेमाल करके Blockly का ज़्यादातर डेवलपमेंट किया जाता है. झलक के तौर पर, यहां डेमो सर्वर पर मौजूद आसान प्लेलैंड दिया गया है.
Blockly के मुख्य वर्शन के लिए, तीन तरह के प्लेलैंड उपलब्ध हैं: आसान, बेहतर, और मल्टी. ब्लॉकली सैंपल में, आम तौर पर सिर्फ़ बेहतर खेल के मैदान का इस्तेमाल किया जाता है.
ज़रूरी शर्तें
Blockly अब 'बंद करें' मॉड्यूल सिस्टम का इस्तेमाल करता है. इन्हें लोड करने के तरीके की वजह से, इकट्ठा नहीं किए गए 'बंद है' मॉड्यूल को http: या https: यूआरएल से फ़ेच किया जाना चाहिए. साथ ही, इन्हें सीधे file: यूआरएल से फ़ेच नहीं किया जा सकता. ऐसे में, प्लेग्राउंड को कंपाइल न किए गए मोड में लोड करने के लिए, आपको इसे किसी स्थानीय वेब सर्वर से लोड करना होगा.
हमने एक स्क्रिप्ट बनाई है, जो एक लोकल सर्वर को शुरू करती है और Blockly मॉड्यूल को लोड करने के लिए ज़रूरी सारा कोड लोड करती है. सभी डिपेंडेंसी इंस्टॉल करने के लिए, आपके पास अपनी मशीन पर npm इंस्टॉल होना चाहिए. साथ ही, आपको Blockly के रूट से npm install चलाना होगा.
Internet Explorer का इस्तेमाल करना
Blockly अब अपने कोडबेस में ऐडवांस सुविधाओं का इस्तेमाल करता है. हो सकता है कि ये सुविधाएं, Internet Explorer के साथ काम न करें. संपीड़ित (कंपाइल किए गए) कोड में, इन सुविधाओं को IE के साथ काम करने के लिए ट्रांसपाइल किया जाता है. हालांकि, हो सकता है कि बिना संपीड़ित किए गए कोड को लोड करने पर ये सुविधाएं काम न करें. अगर लोकल एचटीटीपी सर्वर के ज़रिए भी प्लेग्राउंड को IE में लोड किया जाता है, तो प्लेग्राउंड, कंप्रेस किए गए Blockly कोड को अपने-आप लोड कर देगा, ताकि यह पक्का किया जा सके कि वह सही तरीके से काम कर रहा हो. कंप्रेस किए गए मोड में, प्लेलैंड में किए गए बदलावों की जांच करने के बारे में ज़्यादा जानकारी के लिए, "प्लैयलैंड को सीधे ऐक्सेस करना" सेक्शन देखें.
सिंपल प्लेग्राउंड
बाकी दो खेल के मैदान इसी पर आधारित हैं. इसमें टूलबॉक्स और वर्कस्पेस दिखता है. साथ ही, कुछ सेटिंग में बदलाव करने की सुविधा मिलती है.
प्लेग्राउंड खोलने के लिए,
npm run start
Blockly के रूट से. पक्का करें कि पोर्ट 8080 पर कोई और प्रोग्राम काम न कर रहा हो. इस निर्देश से, Blockly मॉड्यूल होस्ट करने वाला सर्वर चालू हो जाएगा और आपका ब्राउज़र अपने-आप प्लेग्राउंड पेज पर खुल जाएगा. जब आपको प्लेलैंड बंद करना हो, तो प्रोसेस को खत्म करें. Mac और Linux एनवायरमेंट में, इसके लिए ctrl-c दबाएं.
खेल के मैदान की सुविधाएं:
- तेज़ी से डेवलपमेंट करने के लिए, सभी कोड को अनकंप्रेस किया जाता है.
- सभी डिफ़ॉल्ट ब्लॉक (कुछ रोके गए ब्लॉक को छोड़कर).
- JavaScript, Python, PHP, Lua, और Dart भाषा के सभी सोर्स.
- वर्कस्पेस की स्थिति (JSON या XML) को सीरियलाइज़ और डीसीरियलाइज़ करना.
- लेफ़्ट-टू-राइट (एलटीआर) और राइट-टू-लेफ़्ट (आरटीएल) लेआउट के बीच स्विच करें.
- टूलबॉक्स लेआउट के बीच स्विच करना.
- रेंडरर के लिए तनाव की जांच.
- कंसोल में सभी इवेंट को लॉग करें.
बेहतर प्लैटफ़ॉर्म
ऐडवांस प्लेलैंड में कुछ और सुविधाएं भी हैं, जिनकी मदद से Blockly को डीबग करना और भी आसान हो जाता है. यह सभी प्लग इन के लिए, blockly-samples में इस्तेमाल किया जाने वाला डिफ़ॉल्ट प्लैटफ़ॉर्म भी है.
इस खेल के मैदान में, खेल के मैदान की सभी सामान्य सुविधाएं मौजूद हैं. साथ ही, ये सुविधाएं भी हैं:
- ग्रिड का साइज़, ज़ूम/बदलाव करने के कंट्रोल, रेंडरर, थीम वगैरह जैसी अन्य सेटिंग कॉन्फ़िगर की जा सकती हैं.
- इस्तेमाल की गई सेटिंग और ब्लॉक को कैश मेमोरी में सेव किया जाता है. अगली बार जब प्लैटफ़ॉर्म लोड किया जाता है, तो इनका इस्तेमाल अपने-आप किया जाता है.
- एक ही विंडो में हर जनरेटर का आउटपुट देखें.
blockly-samples में किसी भी प्लग इन के लिए बेहतर प्लेसग्राउंड शुरू करने के लिए, प्लग इन की रूट डायरेक्ट्री से npm run
start चलाएं. फ़िलहाल, एक बार में सिर्फ़ एक प्लग इन चल सकता है. साथ ही, यह पोर्ट 3000 का इस्तेमाल करता है. अगर आपको प्लगिन शुरू करने में समस्या आ रही है,
तो पहले यह पक्का करें कि उस पोर्ट पर कोई और आवाज़ न सुनाई दे.
कोर में ऐडवांस प्लेसग्राउंड शुरू करने के लिए, Blockly के रूट से npm run start चलाएं. इसके बाद, टाइटल के नीचे मौजूद "ऐडवांस" लिंक पर क्लिक करें.
Blockly के डेवलपर टूल पैकेज का इस्तेमाल करके, बेहतर प्लेसग्राउंड वाला अपना टेस्ट पेज भी बनाया जा सकता है.
मल्टी प्लेग्राउंड
मल्टी प्लेग्राउंड में, एलटीआर मोड और टूलबॉक्स की जगह के लिए
अलग-अलग कॉन्फ़िगरेशन में कई प्लेग्राउंड मौजूद होते हैं. इसका इस्तेमाल मुख्य रूप से, तुरंत यह जांचने के लिए किया जाता है कि रिलीज़ से पहले, Blockly ने LTR से जुड़ी किसी भी चीज़ को गड़बड़ा तो नहीं किया है. इस प्लेलैंड को खोलने के लिए, सामान्य प्लेलैंड को खोलने का तरीका अपनाएं. इसके बाद, यूआरएल को /tests/multi_playground.html में बदलें.
बदलावों की जांच करना
किसी भी प्लेलैंड को लोकल सर्वर से चलाने पर, ज़्यादातर मामलों में Blockly में किए गए बदलाव देखने के लिए, आपको सिर्फ़ पेज को रीफ़्रेश करना होगा. अगर आपने कोई नई फ़ाइल जोड़ी है या किसी फ़ाइल में कोई नई डिपेंडेंसी जोड़ी है, तो आपको पहले npm run
build को चलाना पड़ सकता है. इससे test/deps.js फ़ाइल अपडेट हो जाएगी. इससे यह पक्का किया जा सकेगा कि डिपेंडेंसी सही तरीके से लोड हो रही हैं. इसके बाद, पेज को रीफ़्रेश करें.
अगर किसी प्लग इन का ऐडवांस प्लेसग्राउंड चलाया जा रहा है, तो आपको पेज को रीफ़्रेश करने की भी ज़रूरत नहीं है. बदलाव अपने-आप होल्टलोड हो जाते हैं!
सीधे तौर पर खेल के मैदानों को ऐक्सेस करना
पहले, अपने ब्राउज़र में test/playground.html फ़ाइल पर सीधे नेविगेट करके, आसान प्लेलैंड को स्थानीय तौर पर ऐक्सेस किया जाता था. हालांकि, अब भी सिंगल और मल्टी प्लेसफ़ॉर्म वाले प्लेलैंड में ऐसा किया जा सकता है, लेकिन हम इसका सुझाव नहीं देते. ऐसा करने पर, प्लेलैंड को पता चल जाएगा कि आपने कोई लोकल सर्वर नहीं चलाया है. इसके बाद, वह अपने-आप Blockly की संपीड़ित फ़ाइलों का इस्तेमाल करेगा. ज़्यादा जानकारी के लिए, Blockly पेज बनाना देखें. साथ ही, जब भी Blockly के कोर में कोई बदलाव किया जाएगा, तो आपको कोर को फिर से बनाना होगा और बदलावों को स्टेज करना होगा. अगर ये पेज किसी रिमोट सर्वर पर होस्ट किए गए हैं, तो भी इन्हें ऐक्सेस किया जा सकता है. जैसे, हमारी डेमो साइट पर होस्ट किया गया हमारा उदाहरण. कॉम्प्रेस किए गए मोड में होने पर, बैकग्राउंड का रंग चमकीला नीला होगा.
ऐडवांस प्लेसग्राउंड, file: ऐक्सेस के ज़रिए उपलब्ध नहीं है.