เพิ่มช่องปลั๊กอินลงใน Block Factory

เครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ Blockly ช่วยให้คุณสร้างบล็อกที่กำหนดเอง โดยใช้การบล็อก! ซึ่งมีการรองรับช่องที่เผยแพร่เป็นปลั๊กอินนอกเหนือจากช่องที่มาพร้อมกับ Blockly หลัก หากคุณสร้างช่องที่กำหนดเองแล้ว คุณจะเพิ่มการสนับสนุนสำหรับช่องลงใน Block Factory ได้โดยทำตามคู่มือนี้ คุณต้องเผยแพร่ช่องที่กำหนดเองใน npm ก่อน จึงจะเพิ่มการสนับสนุนได้ นอกจากนี้ คุณยังต้องมุ่งมั่นที่จะอัปเดตช่องให้ทันกับการเปลี่ยนแปลงใน Blockly มิเช่นนั้นเราอาจต้องนำช่องออกจาก Block Factory ในอนาคต

การพัฒนาโรงงานบล็อก

ซอร์สโค้ดสำหรับ Block Factory จะอยู่ในที่เก็บตัวอย่างแบบบล็อกในไดเรกทอรี examples/developer-tools

หากต้องการส่งการเปลี่ยนแปลงไปยังเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ในตัวอย่างที่บล็อก คุณจะต้องทำตามขั้นตอนทั่วไปสำหรับการพัฒนาในตัวอย่างที่บล็อก แต่คุณจะต้องเรียกใช้ npm install จากไดเรกทอรี examples/developer-tools โดยตรง แทนที่จะเรียกใช้ที่ระดับรากของตัวอย่างแบบบล็อก

ติดตั้งปลั๊กอิน

หากต้องการให้ Block Element แสดงช่องที่กำหนดเองในตัวอย่าง คุณจะต้องติดตั้งช่องที่กำหนดเอง เพิ่มฟิลด์เป็นทรัพยากร Dependency ของ NPM ของ developer-tools จากนั้นลงทะเบียนบัญชีหรือดำเนินการตั้งค่าอื่นๆ ที่จำเป็นใน developer-tools/src/blocks/index.ts

สร้างบล็อกสำหรับช่อง

เนื่องจาก Block Factory ใช้บล็อกในการสร้างบล็อกที่กำหนดเอง คุณจึงต้องมีบล็อกที่แสดงถึงช่องที่กำหนดเองของคุณ

สร้างคําจํากัดความ

คุณต้องออกแบบบล็อกสี่เหลี่ยมสำหรับฟิลด์ของคุณ ถ้าต้องการได้รับเมตา คุณสามารถออกแบบบล็อกโดยใช้ Block Font ได้! การบล็อกควรอนุญาตให้ผู้ใช้กำหนดการตั้งค่าที่ช่องต้องการ เช่น ค่าเริ่มต้นและชื่อ เพิ่มคำจำกัดความของการบล็อกนี้ลงใน developer-tools/src/blocks/fields.ts และนำเข้าใน developer-tools/src/blocks/index.ts

เพิ่มบล็อกไปยังกล่องเครื่องมือ

ต่อไปคุณต้องเพิ่มการบล็อกนี้ลงในคำจำกัดความของกล่องเครื่องมือเพื่อให้ผู้ใช้เข้าถึงได้ ดูคำจำกัดความของกล่องเครื่องมือใน developer-tools/src/toolbox.ts ควรเพิ่มการบล็อกลงในหมวดหมู่ "ช่อง"

เครื่องมือสร้างโค้ด

Block factor ทำงานโดยใช้ระบบ Code Generator ที่คุณ คุ้นเคยจาก Blockly อยู่แล้ว แต่ละบล็อกจะมีตัวสร้างโค้ดบล็อกสำหรับเอาต์พุตแต่ละประเภทที่ Block Factory สร้างขึ้น และบล็อกระดับบนสุดจะรวบรวมโค้ดสำหรับบล็อกย่อยเป็นเอาต์พุตที่ถูกต้อง หากต้องการเพิ่มการสนับสนุนสำหรับช่องที่กำหนดเอง คุณจะต้องเพิ่มฟังก์ชันโปรแกรมสร้างโค้ดบล็อกสำหรับแต่ละคลาสโปรแกรมสร้างโค้ด

สร้างไฟล์สำหรับบล็อกช่องในไดเรกทอรี output-generators/fields คุณจะต้องเพิ่มโปรแกรมสร้างโค้ดบล็อกสำหรับโปรแกรมสร้างแต่ละรายการต่อไปนี้ในไฟล์นี้ นำเข้าไฟล์นี้ในไฟล์ blocks/index.ts เพื่อให้โหลดฟังก์ชันของโปรแกรมสร้างโค้ดบล็อกลงในแอปพลิเคชัน

คำจำกัดความของ JavaScript

javascriptDefinitionGenerator จะสร้างโค้ดที่จะรวมไว้ในคําจํากัดความ JavaScript สําหรับบล็อกที่มีช่องที่กําหนดเอง ซึ่งหมายความว่าโปรแกรมสร้างโค้ดบล็อกควรจะแสดงบรรทัดโค้ดที่มีลักษณะเป็น .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})`;
};

บล็อกมุมที่ผู้ใช้ลากจากหมวดหมู่ "ช่อง" ของกล่องเครื่องมือ Block มัน มี 2 ช่อง ดังนี้

  • FIELDNAME: ผู้ใช้สามารถตั้งชื่อของช่องในบล็อกที่กำหนดเอง
  • ANGLE: ผู้ใช้สามารถกำหนดค่ามุมเริ่มต้นได้

ในโปรแกรมสร้างโค้ดบล็อกนี้ เราจะรับค่ามุมเริ่มต้นและส่งต่อเป็นอาร์กิวเมนต์เดียวไปยังตัวสร้าง FieldAngle ระบบจะส่งชื่อช่องเป็นอาร์กิวเมนต์ที่ 2 ไปยัง appendField เสมอ

คำจำกัดความของ JSON

jsonDefinitionGenerator คล้ายกัน แต่เอาต์พุตนี้จะเป็นส่วนหนึ่งของคำจำกัดความของการบล็อก JSON ที่สอดคล้องกับฟิลด์ของคุณ โดยปกติแล้วโค้ดนี้จะเป็นออบเจ็กต์ JSON ที่มี

  • type: สอดคล้องกับชื่อช่องในรีจิสทรีฟิลด์ Blockly
  • 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);
};

ส่วนหัวของโค้ด

โปรแกรมสร้างส่วนหัวของโค้ดจะสร้างเอาต์พุตของส่วนหัวโค้ดที่แสดงในโรงงานบล็อก คุณสลับระหว่างการนำเข้า esmodule และแท็กสคริปต์ได้ ทั้งนี้ขึ้นอยู่กับวิธีที่ผู้ใช้ต้องการโหลดโค้ด ดังนั้นจริงๆ แล้วมีอินสแตนซ์ตัวสร้าง 2 รายการที่แตกต่างกัน นั่นคือ 1 อินสแตนซ์สำหรับแต่ละกรณี คุณต้องเพิ่มเครื่องมือสร้างโค้ดบล็อก สำหรับแต่ละรายการ นี่คือตัวอย่างสำหรับ 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 ซึ่งช่วยให้คุณระบุบรรทัดของโค้ดที่ควรเรียกก่อนที่จะใช้ฟิลด์ในโค้ด โดยทั่วไปจะรวมถึงงานต่างๆ เช่น การนำเข้าฟิลด์หรือการโหลดฟิลด์ผ่านแท็กสคริปต์ และบางทีอาจเรียกฟังก์ชันที่จะลงทะเบียนฟิลด์กับรีจิสตรีฟิลด์ของ Blockly

สำหรับเครื่องมือสร้างบล็อกโค้ดทั้ง 2 รายการนี้ ควรเพิ่มโค้ดทั้งหมดผ่านการเรียกไปยัง 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 ฯลฯ) พร้อมสิ่งที่ผู้ใช้ตั้งชื่อในช่อง

ทดสอบ

หลังจากเขียนบทความเหล่านี้ครบแล้ว คุณควรเริ่ม Block Element ได้โดยเรียกใช้ npm start ในไดเรกทอรี blockly-samples/examples/developer-tools คุณควรสามารถลากการบล็อกจากหมวดหมู่ของช่อง เพิ่มบล็อกลงในอินพุต บนบล็อก และดูการเปลี่ยนแปลงเอาต์พุตได้ ตรวจสอบว่าตัวอย่างของบล็อกถูกต้อง และโค้ดสำหรับส่วนเอาต์พุตแต่ละส่วนถูกต้อง