অ্যাপ্লিকেশন নকশা

ব্লকলি ব্যবহার করে এমন একটি অ্যাপ্লিকেশন ডিজাইন করার সময় বেছে নেওয়ার জন্য বেশ কয়েকটি দৃষ্টান্ত রয়েছে। এই পছন্দগুলি বিবেচনা করার আগে থেকেই করা উচিত, যেহেতু তারা ব্যবহারকারীর প্রয়োজনীয় ব্লকগুলিকে প্রভাবিত করে।

কনফিগারেশন

অনেক ব্লকলি অ্যাপ্লিকেশনগুলি এক্সিকিউটেবল প্রোগ্রামের পরিবর্তে কনফিগারেশন বর্ণনা করতে ব্যবহৃত হয়। কনফিগারেশন অ্যাপ্লিকেশনগুলি সাধারণত ওয়ার্কস্পেসে একটি রুট লেভেল ব্লক শুরু করার মাধ্যমে শুরু হয়। একটি ভাল উদাহরণ হল ব্লকলি ডেভেলপার টুলের ব্লক ফ্যাক্টরি ট্যাব:

অন্য ব্লক ডিজাইন করতে ব্যবহৃত একটি ব্লক। ব্যবহারকারীরা ব্লকের নাম, ব্লক উল্লেখ করতে পারেন ইনপুট, ইনপুট অভ্যন্তরীণ বা বাহ্যিক, এবং তাই অন

Blockly.Blocks['factory_base'] = {
  init: function() {
    this.setDeletable(false);
    this.setMovable(false);
    this.setEditable(false);
    // etc...
  }
}

Blockly.serialization.blocks.append({'type': 'factory_base'}, workspace);

এটি একটি অপসারণযোগ্য, অস্থাবর ব্লক তৈরি করে যা ব্যবহারকারীর সমস্ত কনফিগারেশন ধারণ করে। বর্তমান কনফিগারেশন নির্ধারণ করতে ওয়ার্কস্পেস যেকোন সময় সিরিয়াল করা হতে পারে।

এই ধরনের অ্যাপ্লিকেশনগুলি রুট ব্লকের সাথে সংযুক্ত নয় এমন কোনও ব্লক স্বয়ংক্রিয়ভাবে নিষ্ক্রিয় করতে পারে। এটি একটি লাইন দিয়ে সম্পন্ন করা যেতে পারে:

workspace.addChangeListener(Blockly.Events.disableOrphans);

সিরিয়াল প্রোগ্রাম

বেশিরভাগ ব্লকলি অ্যাপ্লিকেশনগুলি সিরিয়াল প্রোগ্রাম তৈরি করার জন্য ডিজাইন করা হয়েছে। ব্যবহারকারীরা ব্লকগুলিকে একত্রে স্ট্যাক করে যা ক্রমানুসারে কার্যকর করা হয়।

সরানোর, বাম দিকে ঘুরতে এবং সরানোর কমান্ড সহ ব্লকের একটি স্ট্যাক আবার

কর্মক্ষেত্রে প্রতিটি (অ-অক্ষম) ব্লক প্রোগ্রামের অংশ হবে। ব্লকের একাধিক স্ট্যাক থাকলে, উচ্চতরগুলি প্রথমে কার্যকর করা হয়। (যদি দুটি স্ট্যাক প্রায় একই উচ্চতা হয়, তবে বাম দিকের স্ট্যাকগুলিকে (RTL মোডে ডানে) অগ্রাধিকার দেওয়া হয়৷)

ওয়ার্কস্পেস যেকোন সময় এক্সিকিউটেবল কোডে এক্সপোর্ট করা হতে পারে। এই কোডটি জাভাস্ক্রিপ্টে ক্লায়েন্ট সাইড ( eval বা জেএস ইন্টারপ্রেটার ব্যবহার করে) বা যেকোনো ভাষায় সার্ভার সাইডে এক্সিকিউট করা হতে পারে।

import {javascriptGenerator} from 'blockly/javascript';

var code = javascriptGenerator.workspaceToCode(workspace);

সমান্তরাল প্রোগ্রাম

কিছু ব্লকলি অ্যাপ্লিকেশান ক্রমিক না হয়ে সমান্তরালভাবে ব্লকের সমস্ত স্ট্যাক কার্যকর করতে বেছে নেয়। একটি উদাহরণ একটি সঙ্গীত অ্যাপ্লিকেশন যেখানে একটি ড্রাম লুপ একটি সুরের সাথে একযোগে চলে।

সমান্তরাল এক্সিকিউশন বাস্তবায়নের একটি উপায় হল প্রতিটি ব্লকের জন্য পৃথকভাবে কোড তৈরি করা:

import {javascriptGenerator} from 'blockly/javascript';

var json = Blockly.serialization.workspaces.save(workspace);

// Store top blocks separately, and remove them from the JSON.
var blocks = json['blocks']['blocks'];
var topBlocks = blocks.slice();  // Create shallow copy.
blocks.length = 0;

// Load each block into the workspace individually and generate code.
var allCode = [];
var headless = new Blockly.Workspace();
for (var i = 0; block < topBlocks.length; i++) {
  var block = topBlocks[i];
  blocks.push(block);
  Blockly.serialization.workspaces.load(json, headless);
  allCode.push(javascriptGenerator.workspaceToCode(headless));
  blocks.length = 0;
}

টার্গেট ল্যাঙ্গুয়েজ যদি জাভাস্ক্রিপ্ট হয়, তাহলে allCode অ্যারে একসাথে এক্সিকিউশনের জন্য একাধিক JS ইন্টারপ্রেটার তৈরি করতে ব্যবহার করা যেতে পারে। টার্গেট ল্যাঙ্গুয়েজ যদি পাইথনের মত কিছু হয়, তাহলে allCode অ্যারে একটি একক প্রোগ্রামে একত্রিত হতে পারে যা একটি থ্রেডিং মডিউল ব্যবহার করে।

যেকোনো সমান্তরাল প্রোগ্রামের মতো, ভেরিয়েবল এবং ফাংশনের মতো শেয়ার্ড রিসোর্স সম্পর্কে সতর্ক সিদ্ধান্ত নিতে হবে।

ইভেন্ট চালিত প্রোগ্রাম

ইভেন্ট হ্যান্ডলারগুলি এমন ফাংশন যা প্রোগ্রামের পরিবর্তে সিস্টেম দ্বারা কল করা হয়। এই ব্লকগুলি হয় ব্লকের স্ট্যাকটিকে কার্যকর করতে পারে, অথবা সেগুলি হেডার হতে পারে যা ব্লকের স্ট্যাকের উপরে বসে থাকে।

দুটি "অন মাউস ক্লিক" ব্লক, একটি স্টেটমেন্ট ইনপুট সহ এবং একটি পরবর্তী সংযোগ

কিছু বিকাশকারী ইভেন্ট ব্লকের শীর্ষে একটি 'হ্যাট' যুক্ত করতে পছন্দ করে যাতে সেগুলি অন্যান্য ব্লক থেকে আলাদা দেখায়। এটি Blockly-এর জন্য ডিফল্ট চেহারা নয়, তবে এটি রেন্ডারার ধ্রুবক ADD_START_HATS true ওভাররাইড করে যোগ করা যেতে পারে ( কাস্টম রেন্ডারার কোডল্যাব - ওভাররাইড ধ্রুবক )। অথবা একটি থিম যোগ করে এবং ব্লক শৈলীতে হ্যাট বিকল্প সেট করে। থিমগুলির অংশ হিসাবে ব্লকগুলিতে টুপি সেট করার জন্য আরও তথ্যের জন্য, থিম ডকুমেন্টেশনে ব্লক স্টাইল দেখুন।

একই "মাউস ক্লিক" টুপি সঙ্গে ব্লক, যা উপরে একটি কুঁজ গঠন ব্লক

একটি ইভেন্ট-চালিত মডেলের মধ্যে, প্রোগ্রাম শুরুর জন্য একটি হ্যান্ডলার তৈরি করাও বোধগম্য হতে পারে। এই মডেলের অধীনে, ইভেন্ট হ্যান্ডলারের সাথে সংযুক্ত না থাকা ওয়ার্কস্পেসের যেকোনো ব্লক উপেক্ষা করা হবে এবং কার্যকর করা হবে না।

ইভেন্ট ব্যবহার করে এমন একটি সিস্টেম ডিজাইন করার সময়, একই ইভেন্ট হ্যান্ডলারের একাধিক দৃষ্টান্ত সমর্থন করা সম্ভব বা পছন্দনীয় কিনা তা বিবেচনা করুন।

ওয়ার্কস্পেস লেআউট

বাম থেকে ডানে স্ক্রীন লেআউট করার দুটি যুক্তিসঙ্গত উপায় রয়েছে। এক উপায় বাম দিকে টুলবার, মাঝখানে ওয়ার্কস্পেস এবং ডানদিকে আউটপুট ভিজ্যুয়ালাইজেশন দিয়ে শুরু হয়। এই লেআউটটি স্ক্র্যাচের সংস্করণ 1 দ্বারা ব্যবহৃত হয়, সেইসাথে কোড দিয়ে তৈরি।

বামদিকে টুলবার সহ একটি অ্যাপ্লিকেশন, মাঝখানে ওয়ার্কস্পেস এবং একটি গোলকধাঁধা (আউটপুট ভিজ্যুয়ালাইজেশন) উপর অধিকার

অন্য উপায়টি বাম দিকে আউটপুট ভিজ্যুয়ালাইজেশন, মাঝখানে টুলবার এবং ডানদিকে ওয়ার্কস্পেস দিয়ে শুরু হয়। এই লেআউটটি স্ক্র্যাচের সংস্করণ 2, সেইসাথে বেশিরভাগ ব্লকলি অ্যাপ্লিকেশন দ্বারা ব্যবহৃত হয়।

বাম দিকে একটি গোলকধাঁধা (আউটপুট ভিজ্যুয়ালাইজেশন) সহ একটি অ্যাপ্লিকেশন, টুলবার মাঝখানে, এবং ডানদিকে কর্মক্ষেত্র।

উভয় ক্ষেত্রেই কর্মক্ষেত্রটি উপলব্ধ স্ক্রীনের আকার নেওয়ার জন্য প্রসারিত হওয়া উচিত -- ব্যবহারকারীদের প্রোগ্রাম করার জন্য যতটা জায়গা তারা পেতে পারে। উপরের স্ক্রিনশটগুলিতে দেখা যায়, ব্যবহারকারীর কোড এবং আউটপুট ভিজ্যুয়ালাইজেশন আলাদা হওয়ার কারণে প্রথম লেআউটটি প্রশস্ত স্ক্রিনে খারাপভাবে কাজ করে। যেখানে দ্বিতীয় লেআউটটি বৃহত্তর প্রোগ্রামগুলির জন্য অতিরিক্ত স্থানের জন্য অনুমতি দেয় এবং এখনও তিনটি বিভাগকে একসাথে রাখে।

এটি ব্যবহারকারীদের জন্য প্রথমে তারা যে সমস্যাটি সমাধান করার চেষ্টা করছে তা বিবেচনা করার জন্য যৌক্তিক অর্থ তৈরি করে, তারপরে সরবরাহ করা সরঞ্জামগুলি দেখুন এবং তারপরেই প্রোগ্রামিং শুরু করুন।

অবশ্যই আরবি এবং হিব্রু অনুবাদের জন্য পুরো অর্ডারটি ফ্লিপ করা দরকার।

কিছু ক্ষেত্রে, যেমন অল্প সংখ্যক সাধারণ ব্লক ব্যবহার করার সময়, টুলবক্সটি ওয়ার্কস্পেসের উপরে বা নীচে থাকা অর্থপূর্ণ হতে পারে। ব্লকলি এই ক্ষেত্রে টুলবক্সে অনুভূমিক স্ক্রলিং সমর্থন করে, তবে এটি যত্ন সহকারে ব্যবহার করা উচিত।

প্রস্তাবনা: টুলবারের পাশে প্রোগ্রাম ভিজ্যুয়ালাইজেশন রাখুন।