There are several ways to get the Blockly code, and several ways to load it once you've gotten it.
প্যাকেজ তৈরি করুন স্ক্রিপ্ট
ব্লকলি একটি স্ক্রিপ্ট প্রদান করে যা একটি স্টার্টার অ্যাপ্লিকেশন বুটস্ট্র্যাপ করে, যা আপনি পরে পরিবর্তন করতে পারেন। এটি ওয়েবপ্যাক এবং এসলিন্টের মতো সাধারণ ওয়েব ডেভেলপমেন্ট টুল ব্যবহার করে, কিন্তু রিঅ্যাক্ট বা অ্যাঙ্গুলারের মতো কোনও ফ্রেমওয়ার্ক অন্তর্ভুক্ত করে না।
This requires you to install node.js and npm before running the following commands.
To create an application written in JavaScript in a new hello-world directory:
npx @blockly/create-package app hello-world
একটি নতুন hello-world ডিরেক্টরিতে TypeScript-এ লেখা একটি অ্যাপ্লিকেশন তৈরি করতে:
npx @blockly/create-package app hello-world --typescript
এগুলো এমন একটি প্যাকেজ তৈরি করে যা প্যাকেজ টার্গেট আমদানি করে । এটি নির্ভরতা পরিচালনা করার জন্য একটি package.json ফাইলও ব্যবহার করে, যা ব্লকলির সর্বশেষ সংস্করণের সাথে আপ-টু-ডেট থাকা সহজ করে তোলে।
এটিতে কিছু সহজ স্টার্টার স্ক্রিপ্টও রয়েছে, যেমন ব্রাউজারে স্থানীয়ভাবে প্রকল্পটি পরীক্ষা করার জন্য একটি:
cd hello-world
npm run start
অন্যান্য কমান্ডের জন্য আপনি জেনারেট করা package.json ফাইলটি দেখতে পারেন।
Unpkg
যদি আপনি কেবল আইডিয়া নিয়ে খেলা করেন এবং একটি সম্পূর্ণ অ্যাপ্লিকেশন বুটস্ট্র্যাপ করতে না চান, তাহলে আপনি স্ক্রিপ্ট ট্যাগ ব্যবহার করে unpkg থেকে Blockly লোড করতে পারেন।
আপনি যদি যেকোনো HTML পৃষ্ঠায় নিম্নলিখিতটি যোগ করেন, তাহলে আপনি Blockly ব্যবহার করে পরীক্ষা করার জন্য সরাসরি একটি ব্রাউজারে HTMLটি খুলতে পারেন:
<!-- 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 অথবা Yarn ) মাধ্যমে ব্লকলি প্রয়োজন করার পরামর্শ দেয় কারণ:
- ব্লকলিতে পরিবর্তনগুলি সম্পর্কে আপডেট থাকা সহজ।
- এটি ব্লকলিতে মাঙ্কিপ্যাচিংয়ের পরিবর্তে প্লাগইন ব্যবহারকে উৎসাহিত করে।
NPM
npm install blockly --save
সুতা
yarn add blockly
গিটহাব
আপনি আমাদের GitHub রিলিজ থেকেও সংকুচিত কোডটি ডাউনলোড করতে পারেন। তবে, ব্লকলির সর্বশেষ আপডেট এবং সংশোধনগুলি পেতে আপনাকে নিয়মিত বিরতিতে কোডটি ম্যানুয়ালি ডাউনলোড করতে হবে।
Load the code
একবার কোডটি পেয়ে গেলে, আপনার কোড থেকে এটি অ্যাক্সেস করার বিভিন্ন উপায় রয়েছে।
Script tags
<!-- 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;
আমদানি
// 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);