Blockly পান

ব্লকলি কোড পাওয়ার বিভিন্ন উপায় রয়েছে এবং আপনি এটি পেয়ে গেলে এটি লোড করার বিভিন্ন উপায় রয়েছে।

তৈরি-প্যাকেজ স্ক্রিপ্ট

ব্লকলি একটি স্ক্রিপ্ট প্রদান করে যা একটি স্টার্টার অ্যাপ্লিকেশন বুটস্ট্র্যাপ করে, যা আপনি পরিবর্তন করতে পারেন। এটি ওয়েবপ্যাক এবং eslint- এর মতো সাধারণ ওয়েব ডেভেলপমেন্ট টুল ব্যবহার করে, কিন্তু প্রতিক্রিয়া বা কৌণিকের মতো ফ্রেমওয়ার্ক অন্তর্ভুক্ত করে না।

এর জন্য নিম্নলিখিত কমান্ডগুলি চালানোর আগে আপনাকে node.js এবং npm ইনস্টল করতে হবে।

একটি নতুন hello-world ডিরেক্টরিতে জাভাস্ক্রিপ্টে লেখা একটি অ্যাপ্লিকেশন তৈরি করতে:

npx @blockly/create-package app hello-world

একটি নতুন hello-world ডিরেক্টরিতে টাইপস্ক্রিপ্টে লেখা একটি অ্যাপ্লিকেশন তৈরি করতে:

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

এগুলি একটি প্যাকেজ তৈরি করে যা প্যাকেজ লক্ষ্যগুলি আমদানি করে ৷ এটি নির্ভরতা পরিচালনা করার জন্য একটি package.json ফাইল ব্যবহার করে, যা ব্লকলির সর্বশেষ সংস্করণের সাথে আপ-টু-ডেট থাকা সহজ করে তোলে।

এটি কিছু সহজ স্টার্টার স্ক্রিপ্ট সহ আসে, যেমন একটি ব্রাউজারে স্থানীয়ভাবে প্রকল্পটি পরীক্ষা করার জন্য:

cd hello-world
npm run start

আপনি অন্যান্য কমান্ডের জন্য তৈরি করা package.json ফাইলটি উল্লেখ করতে পারেন।

আনপিকেজি

আপনি যদি শুধু ধারণা নিয়ে খেলতে থাকেন এবং একটি সম্পূর্ণ অ্যাপ্লিকেশন বুটস্ট্র্যাপ করতে না চান, তাহলে আপনি স্ক্রিপ্ট ট্যাগ ব্যবহার করে আনপিকেজি থেকে ব্লকলি লোড করতে পারেন।

আপনি যদি যেকোন 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 বা সুতা ) এর মাধ্যমে ব্লকলি প্রয়োজনের সুপারিশ করে কারণ:

• Blockly-তে পরিবর্তনের সাথে আপ টু ডেট থাকা সহজ
• এটি ব্লকলি মাঙ্কিপ্যাচিংয়ের পরিবর্তে প্লাগইনগুলি ব্যবহার করতে উত্সাহিত করে৷

এনপিএম

npm install blockly --save

সুতা

yarn add blockly

গিটহাব

আপনি আমাদের 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 অ্যারেতে প্রয়োগ করা হয়।

আমদানি

দ্রষ্টব্য: আমাদের প্যাকেজ লক্ষ্যমাত্রার আমদানি ব্যবহার করার জন্য আপনাকে একটি বান্ডলার (ওয়েবপ্যাকের মতো) ব্যবহার করতে হবে, যেহেতু ব্লকলি একটি ESM এর পরিবর্তে UMD হিসাবে প্যাকেজ করা হয়৷

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