कोड प्राप्त करें

Blockly कोड पाने के कई तरीके हैं. साथ ही, कोड मिलने के बाद उसे लोड करने के कई तरीके भी हैं.

Create-package स्क्रिप्ट

Blockly एक स्क्रिप्ट उपलब्ध कराती है, जो स्टार्टर ऐप्लिकेशन को बूटस्ट्रैप करती है. इसके बाद, उसमें बदलाव किया जा सकता है. इसमें 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

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

अगर किसी एचटीएमएल पेज में यह कोड जोड़ा जाता है, तो 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>

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

कोड प्राप्त करें

Blockly को चलाने के लिए, कोड पाने के कई तरीके हैं.

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

• Blockly में होने वाले बदलावों के बारे में आसानी से पता चलता है
• यह Blockly को मॉन्कीपैच करने के बजाय, प्लग इन इस्तेमाल करने का सुझाव देता है

NPM

npm install blockly --save

ऊन

yarn add blockly

GitHub

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

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

कोड लोड करना

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

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

<!-- 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);