ব্লক ফ্যাক্টরিতে একটি প্লাগইন ক্ষেত্র যোগ করুন

ব্লকলি ডেভেলপার টুল আপনাকে ব্লক ব্যবহার করে কাস্টম ব্লক তৈরি করতে দেয়! কোর ব্লকলির সাথে আসা ক্ষেত্রগুলি ছাড়াও প্লাগইন হিসাবে প্রকাশিত ক্ষেত্রগুলির জন্য এটির সমর্থন রয়েছে৷ আপনি যদি একটি কাস্টম ক্ষেত্র তৈরি করে থাকেন, আপনি এই নির্দেশিকা অনুসরণ করে ব্লক ফ্যাক্টরিতে এটির জন্য সমর্থন যোগ করতে পারেন। আপনি এটির জন্য সমর্থন যোগ করার আগে কাস্টম ক্ষেত্রটি অবশ্যই npm-এ প্রকাশ করতে হবে৷ Blockly-এর পরিবর্তনের সাথে তাল মিলিয়ে চলতে আপনাকে আপনার ফিল্ড আপডেট করার প্রতিশ্রুতিও দিতে হবে, অন্যথায় ভবিষ্যতে আমাদের ব্লক ফ্যাক্টরি থেকে এটি সরাতে হতে পারে।

ব্লক কারখানা উন্নয়ন

ব্লক ফ্যাক্টরির সোর্স কোড examples/developer-tools ডিরেক্টরির ব্লকলি-স্যাম্পল রিপোজিটরিতে অবস্থিত।

ব্লকলি-নমুনাগুলিতে বিকাশকারী সরঞ্জামগুলিতে একটি পরিবর্তন জমা দিতে, আপনাকে ব্লকলি-নমুনাগুলিতে বিকাশের জন্য সাধারণ পদক্ষেপগুলি অনুসরণ করতে হবে। প্লাগইনগুলির সাথে কাজ করার বিপরীতে, আপনাকে ব্লকলি-স্যাম্পলের রুট লেভেলের পরিবর্তে examples/developer-tools ডিরেক্টরি থেকে সরাসরি npm install চালাতে হবে।

প্লাগইন ইন্সটল করুন

ব্লক ফ্যাক্টরি প্রিভিউতে আপনার কাস্টম ক্ষেত্র দেখানোর জন্য, এটি কাস্টম ক্ষেত্র ইনস্টল করতে হবে। বিকাশকারী-টুলগুলির একটি npm নির্ভরতা হিসাবে আপনার ক্ষেত্র যোগ করুন। তারপর, এটি নিবন্ধন করুন বা developer-tools/src/blocks/index.ts এ প্রয়োজনীয় অন্য কোনও সেটআপ কাজ করুন।

ক্ষেত্রের জন্য একটি ব্লক তৈরি করুন

যেহেতু ব্লক ফ্যাক্টরি কাস্টম ব্লক তৈরি করতে ব্লক ব্যবহার করে, তাই আপনার কাস্টম ফিল্ডের প্রতিনিধিত্ব করে এমন একটি ব্লকের প্রয়োজন হবে।

ব্লক সংজ্ঞা তৈরি করুন

আপনাকে আপনার ক্ষেত্রের জন্য ব্লক ডিজাইন করতে হবে; আপনি যদি মেটা পেতে চান তবে আপনি ব্লক ফ্যাক্টরি ব্যবহার করে এটি ডিজাইন করতে পারেন! ব্লকটি ব্যবহারকারীকে আপনার ক্ষেত্রের জন্য প্রয়োজনীয় সেটআপ কনফিগার করার অনুমতি দেবে, যেমন ডিফল্ট মান এবং একটি নাম। এই ব্লকের সংজ্ঞাটি developer-tools/src/blocks/fields.ts এ যোগ করুন এবং এটি developer-tools/src/blocks/index.ts এ আমদানি করুন।

টুলবক্সে ব্লক যোগ করুন

এর পরে, ব্যবহারকারীদের কাছে অ্যাক্সেসযোগ্য করার জন্য আপনাকে টুলবক্স সংজ্ঞাতে এই ব্লকটি যোগ করতে হবে। টুলবক্সের সংজ্ঞাটি developer-tools/src/toolbox.ts এ অবস্থিত। আপনার ব্লক "ক্ষেত্র" বিভাগে যোগ করা উচিত।

কোড জেনারেটর

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

output-generators/fields ডিরেক্টরিতে আপনার ক্ষেত্র ব্লকের জন্য একটি ফাইল তৈরি করুন। আপনি এই ফাইলে নিম্নলিখিত প্রতিটি জেনারেটরের জন্য ব্লক-কোড জেনারেটর যোগ করবেন। blocks/index.ts ফাইলে এই ফাইলটি ইমপোর্ট করুন যাতে ব্লক-কোড জেনারেটর ফাংশন অ্যাপ্লিকেশনে লোড হয়।

জাভাস্ক্রিপ্ট সংজ্ঞা

javascriptDefinitionGenerator কোড তৈরি করে যা জাভাস্ক্রিপ্ট সংজ্ঞায় অন্তর্ভুক্ত করা হবে এমন একটি ব্লকের জন্য যা আপনার কাস্টম ক্ষেত্র অন্তর্ভুক্ত করে। সাধারণত, এর অর্থ হল ব্লক-কোড জেনারেটরের কোডের একটি লাইন ফেরত দেওয়া উচিত যা দেখতে .appendField(new YourFieldConstructor(arg1, arg2), 'userSpecifiedName') এর মতো। নোট করুন যে কোডের এই লাইনে একটি সেমিকোলন অন্তর্ভুক্ত নয় , কারণ একটি ইনপুট যেটিতে একাধিক ক্ষেত্র রয়েছে তাতে একাধিক কল যুক্ত appendField একসাথে চেইন করা হবে। কনস্ট্রাক্টরের আর্গুমেন্টগুলি ব্যবহারকারীর ফিল্ড ব্লকে সেট করা মান থেকে টানা হয়। FieldAngle এর জন্য এই ব্লক-কোড জেনারেটরের একটি উদাহরণ এখানে দেওয়া হল:

javascriptDefinitionGenerator.forBlock['field_angle'] = function (
  block: Blockly.Block,
  generator: JavascriptDefinitionGenerator,
): string {
  const name = generator.quote_(block.getFieldValue('FIELDNAME'));
  const angle = block.getFieldValue('ANGLE');
  return `.appendField(new FieldAngle(${angle}), ${name})`;
};

ব্লক ফ্যাক্টরি টুলবক্সের "ক্ষেত্র" বিভাগ থেকে ব্যবহারকারী যে অ্যাঙ্গেল ব্লকটি টেনে এনেছেন তাতে দুটি ক্ষেত্র রয়েছে:

FIELDNAME : ব্যবহারকারী তাদের কাস্টম ব্লকে ক্ষেত্রের নাম সেট করতে পারেন
ANGLE : ব্যবহারকারী ডিফল্ট কোণ মান সেট করতে পারেন

এই ব্লক-কোড জেনারেটরে, আমরা ডিফল্ট কোণ মান পাই এবং এটিকে FieldAngle কনস্ট্রাক্টরের কাছে একমাত্র যুক্তি হিসাবে পাস করি। ক্ষেত্রের নামটি সর্বদাই appendField এর দ্বিতীয় আর্গুমেন্ট হিসাবে পাস করা হয়।

JSON সংজ্ঞা

jsonDefinitionGenerator অনুরূপ, কিন্তু এটি JSON ব্লক সংজ্ঞার অংশটিকে আউটপুট করে যা আপনার ক্ষেত্রের সাথে মিলে যায়। সাধারণত, এই কোডটি একটি JSON অবজেক্ট যার মধ্যে রয়েছে:

type : ব্লকলি ফিল্ড রেজিস্ট্রিতে আপনার ক্ষেত্রের নামের সাথে মিলে যায়
name : ব্যবহারকারী তাদের কাস্টম ব্লকে ক্ষেত্রের নাম সেট করতে পারেন
আপনার ক্ষেত্রের json প্রারম্ভিক পদ্ধতি দ্বারা প্রয়োজনীয় অন্য কোনো কাস্টম বৈশিষ্ট্য।

এখানে আবার FieldAngle থেকে একটি উদাহরণ:

jsonDefinitionGenerator.forBlock['field_angle'] = function (
  block: Blockly.Block,
  generator: JsonDefinitionGenerator,
): string {
  const code = {
    type: 'field_angle',
    name: block.getFieldValue('FIELDNAME'),
    angle: block.getFieldValue('ANGLE'),
  };
  return JSON.stringify(code);
};

কোড হেডার

কোড হেডার জেনারেটর ব্লক ফ্যাক্টরিতে দেখানো কোড হেডার আউটপুট তৈরি করে। ব্যবহারকারী কীভাবে কোডটি লোড করতে চান তার উপর নির্ভর করে এই আউটপুটটি এসমডিউল আমদানি এবং স্ক্রিপ্ট ট্যাগের মধ্যে টগল করা যেতে পারে, তাই আসলে দুটি ভিন্ন জেনারেটর উদাহরণ রয়েছে: প্রতিটি ক্ষেত্রে একটি। আপনাকে তাদের প্রত্যেকের জন্য একটি ব্লক-কোড জেনারেটর যোগ করতে হবে। FieldAngle এর জন্য এখানে একটি উদাহরণ:

importHeaderGenerator.forBlock['field_angle'] = function (
  block: Blockly.Block,
  generator: CodeHeaderGenerator,
): string {
  generator.addHeaderLine(
    `import {registerFieldAngle, FieldAngle} from '@blockly/field-angle';`,
  );
  generator.addHeaderLine(`registerFieldAngle();`);
  return '';
};

scriptHeaderGenerator.forBlock['field_angle'] = function (
  block: Blockly.Block,
  generator: CodeHeaderGenerator,
): string {
  generator.addHeaderLine(
    `<script src="https://unpkg.com/@blockly/field-angle"></script>`,
  );
  generator.addHeaderLine(`registerFieldAngle();`);
  return '';
};

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

এই দুটি ব্লক-কোড জেনারেটরের জন্য, সমস্ত কোড যোগ করা উচিত addHeaderLine এ কলের মাধ্যমে। এই ফাংশনটি নিশ্চিত করবে যে প্রতিটি হেডার লাইন শুধুমাত্র একবার দেখানো হয়েছে, এমনকি যদি আপনার কাস্টম ফিল্ড ব্লকটি একটি কাস্টম ব্লকে একাধিকবার ব্যবহার করা হয়। ব্লক-কোড জেনারেটরের খালি স্ট্রিংটি ফেরত দেওয়া উচিত।

জেনারেটর স্টাব

অবশেষে, আমাদের কাছে জেনারেটর রয়েছে যা ক্ষেত্রের জন্য জেনারেটর স্টাব তৈরি করে। এই ব্লক-কোড জেনারেটরে, আপনি কোড লিখবেন যা কোড তৈরি করে যা ব্যবহারকারীকে কোড তৈরি করতে কোড লিখতে সহায়তা করে। এখনও বিভ্রান্ত? এটা শোনার চেয়ে সহজ!

একটি কাস্টম ব্লকের জেনারেটর স্টাব ব্লকের প্রতিটি ক্ষেত্রের প্রতিনিধিত্ব করে একটি প্রিমেড ভেরিয়েবল অন্তর্ভুক্ত করে। তারপরে একটি TODO আছে যা ব্যবহারকারীকে এই সমস্ত ভেরিয়েবলকে চূড়ান্ত কোড স্ট্রিংয়ে একত্রিত করতে শেষ করতে হবে তাদের কাস্টম ব্লকটি ফিরে আসবে। এর মানে সাধারণত আপনার সমস্ত ব্লক-কোড জেনারেটরকে এই কাস্টম ভেরিয়েবলটি তৈরি করে এমন লাইনটি ফেরত দিতে হবে। বলুন ব্যবহারকারী একটি কাস্টম ব্লক তৈরি করছেন যা তাদের ক্যানভাসে সূর্যালোকের রশ্মি যোগ করবে। তারা ব্লকে একটি কোণ ক্ষেত্র যোগ করে এবং এটির নাম দেয় "SUN_DIRECTION" । এই ব্লকের জেনারেটর স্টাবটিতে লাইন const angle_sun_direction = block.getFieldValue("SUN_DIRECTION"); . কোণ ক্ষেত্রের জন্য আমাদের ব্লক-কোড জেনারেটরের কোডের লাইনটি ফিরে আসতে হবে:

generatorStubGenerator.forBlock['field_angle'] = function (
  block: Blockly.Block,
  generator: GeneratorStubGenerator,
): string {
  const name = block.getFieldValue('FIELDNAME');
  const fieldVar = generator.createVariableName('angle', name);
  return `const ${fieldVar} = block.getFieldValue(${generator.quote_(
    name,
  )});\n`;
};

ভেরিয়েবলের জন্য একটি প্রমিত নাম পেতে, আপনি generator.createVariableName কল করতে পারেন এবং আপনার ক্ষেত্রের ধরনটি পাস করতে পারেন (যেমন angle , number , ইত্যাদি) এবং ব্যবহারকারী তাদের ক্ষেত্রের নাম কী দিয়েছিলেন।

এটি পরীক্ষা করুন

আপনি এই সমস্ত টুকরোগুলি লেখার পরে, আপনি blockly-samples/examples/developer-tools ডিরেক্টরিতে npm start চালিয়ে ব্লক ফ্যাক্টরি শুরু করতে সক্ষম হবেন। আপনি ক্ষেত্র বিভাগ থেকে আপনার ব্লকটি টেনে আনতে সক্ষম হবেন, একটি ব্লকের একটি ইনপুটে এটি যুক্ত করতে পারবেন এবং আউটপুট পরিবর্তন দেখতে পারবেন। ব্লকের প্রিভিউ সঠিক দেখাচ্ছে এবং প্রতিটি আউটপুট বিভাগের কোড সঠিক কিনা তা পরীক্ষা করুন।