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