ब्लॉकली पाएं

ब्लॉकली कोड को पाने के कई तरीके हैं. साथ ही, कोड मिलने के बाद इसे लोड करने के कई तरीके हैं.

पैकेज स्क्रिप्ट बनाएं

ब्लॉकली एक ऐसी स्क्रिप्ट देता है जो स्टार्टर ऐप्लिकेशन को बूटस्ट्रैप करती है. इसके बाद, उस ऐप्लिकेशन में बदलाव किया जा सकता है. इसमें webpack और eslint जैसे सामान्य वेब डेवलपमेंट टूल का इस्तेमाल किया जाता है. हालांकि, इसमें React या Angular जैसा फ़्रेमवर्क शामिल नहीं होता.

इसके लिए, आपको नीचे दिए गए कमांड चलाने से पहले Node.js और npm को इंस्टॉल करना होगा.

नई hello-world डायरेक्ट्री में, JavaScript में लिखा गया ऐप्लिकेशन बनाने के लिए:

npx @blockly/create-package app hello-world

नई hello-world डायरेक्ट्री में, TypeScript में लिखा गया ऐप्लिकेशन बनाने के लिए:

npx @blockly/create-package app hello-world --typescript

इसके ज़रिए एक ऐसा पैकेज बनता है जो पैकेज टारगेट को इंपोर्ट करता है. यह डिपेंडेंसी मैनेज करने के लिए,package.json फ़ाइल का इस्तेमाल करता है. इससे, Blockly के नए वर्शन से अप-टू-डेट रहना आसान हो जाता है.

इसमें कुछ आसान स्टार्टर स्क्रिप्ट भी शामिल होती हैं, जैसे कि प्रोजेक्ट को ब्राउज़र में स्थानीय तौर पर टेस्ट करने के लिए कोई स्क्रिप्ट:

cd hello-world
npm run start

दूसरे निर्देशों के लिए, जनरेट की गई Package.json फ़ाइल को देखें.

अनपब्लिश करें

अगर आप सिर्फ़ आइडिया पर काम कर रहे हैं और आपको पूरा ऐप्लिकेशन बूटस्ट्रैप नहीं करना है, तो आप स्क्रिप्ट टैग का इस्तेमाल करके Unpkg से ब्लॉकली को लोड कर सकते हैं.

अगर इन्हें किसी भी एचटीएमएल पेज पर जोड़ा जाता है, तो Blockly के साथ प्रयोग करने के लिए, सीधे किसी ब्राउज़र में एचटीएमएल खोला जा सकता है:

<!-- Load Blockly core -->
<script src="https://unpkg.com/blockly/blockly_compressed.js"></script>
<!-- Load the default blocks -->
<script src="https://unpkg.com/blockly/blocks_compressed.js"></script>
<!-- Load a generator -->
<script src="https://unpkg.com/blockly/javascript_compressed.js"></script>
<!-- Load a message file -->
<script src="https://unpkg.com/blockly/msg/en.js"></script>

यह ब्लॉकली को हासिल करने के लिए, लंबे समय तक चलने वाला अच्छा समाधान नहीं है. ऐसा इसलिए है, क्योंकि यह वेबपैक जैसे बंडलर के साथ काम नहीं करता है, लेकिन यह प्रोटोटाइपिंग और एक्सपेरिमेंट के लिए अच्छा है.

कोड पाएं

ब्लॉकली को चलाने के लिए, कोड को कई तरीकों से पाया जा सकता है.

ब्लॉकली की टीम यह सुझाव देती है कि पैकेज मैनेजर (जैसे कि एनपीएम या यार्न) की मदद से ब्लॉकली का इस्तेमाल करना ज़रूरी है, क्योंकि:

• ब्लॉकली में हुए बदलावों की मदद से, अप-टू-डेट रहना आसान है
• यह बंदरपैचिंग ब्लॉकली के बजाय, प्लगिन का इस्तेमाल करने को बढ़ावा देता है

एनपीएम

npm install blockly --save

रेशे

yarn add blockly

GitHub

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

चेतावनी: GitHub से डाउनलोड करने की सुविधा सिर्फ़ उन डेवलपर के लिए उपलब्ध कराई जाती है जो पहले ब्लॉकली को हैक कर रहे थे. अगर आप नए डेवलपर हैं, तो आपको पैकेज मैनेजर का इस्तेमाल करना चाहिए.

कोड लोड करें

कोड मिलने के बाद, कई तरीकों से इसे कोड से ऐक्सेस किया जा सकता है.

स्क्रिप्ट टैग

<!-- Load Blockly core -->
<script src="./my-lib-directory/blockly/blockly_compressed.js"></script>
<!-- Load the default blocks -->
<script src="./my-lib-directory/blockly/blocks_compressed.js"></script>
<!-- Load a generator -->
<script src="./my-lib-directory/blockly/javascript_compressed.js"></script>
<!-- Load a message file -->
<script src="./my-lib-directory/blockly/msg/en.js"></script>

स्क्रिप्ट टैग का इस्तेमाल करते समय, ग्लोबल नेमस्पेस से इंपोर्ट किए गए डेटा को ऐक्सेस किया जा सकता है:

// Access Blockly.
Blockly.thing;

// Access the default blocks.
Blockly.libraryBlocks['block_type'];

// Access the generator.
javascript.javascriptGenerator;

ध्यान दें: स्क्रिप्ट टैग का इस्तेमाल करते समय, आपके पास एक से ज़्यादा मैसेज फ़ाइलें नहीं हो सकतीं. ऐसा इसलिए, क्योंकि मैसेज सीधे Blockly.Msg कलेक्शन पर लागू हो जाते हैं.

इंपोर्ट

ध्यान दें: हमारे पैकेज टारगेट को इंपोर्ट करने के लिए आपको वेबपैक जैसे बंडलर का इस्तेमाल करना होगा. ऐसा इसलिए, क्योंकि Blockly को ईएसएम के बजाय यूएमडी के तौर पर पैकेज किया जाता है.

// Import Blockly core.
import * as Blockly from 'blockly/core';
// Import the default blocks.
import * as libraryBlocks from 'blockly/blocks';
// Import a generator.
import {javascriptGenerator} from 'blockly/javascript';
// Import a message file.
import * as En from 'blockly/msg/en';

मैसेज फ़ाइलें इंपोर्ट करते समय, आपको उन्हें भी लागू करना होगा.

Blockly.setLocale(En);

ज़रूरी है

// Require Blockly core.
const Blockly = require('blockly/core');
// Require the default blocks.
const libraryBlocks = require('blockly/blocks');
// Require a generator.
const {javascriptGenerator} =  require('blockly/javascript');
// Require a message file.
const En = require('blockly/msg/en');

जब आपको मैसेज फ़ाइलों की ज़रूरत होती है, तो आपको उन्हें भी लागू करना होता है.

Blockly.setLocale(En);