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

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

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

ซอร์สโค้ดของโรงงานบล็อกอยู่ในที่เก็บ blockly-samples ในไดเรกทอรี examples/developer-tools

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

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

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

สร้างบล็อกสำหรับฟิลด์

เนื่องจากโรงงานบล็อกใช้บล็อกเพื่อสร้างบล็อกที่กำหนดเอง คุณจึงต้องมีบล็อก ที่แสดงฟิลด์ที่กำหนดเอง

สร้างคำจำกัดความของบล็อก

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

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

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

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

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

สร้างไฟล์สำหรับการบล็อกฟิลด์ในไดเรกทอรี 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 Factory มี 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);
};

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

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

Stub ของเครื่องกำเนิดไฟฟ้า

สุดท้ายคือเครื่องมือสร้างที่สร้าง Stub ของเครื่องมือสร้างสำหรับฟิลด์ ในเครื่องมือสร้างโค้ดบล็อกนี้ คุณจะเขียนโค้ดที่สร้างโค้ดที่ช่วย ผู้ใช้เขียนโค้ดที่สร้างโค้ด คุณสับสนไหม ไม่ยากอย่างที่คิด

ส่วนหัวของตัวสร้างสำหรับบล็อกที่กำหนดเองจะมีตัวแปรที่สร้างไว้ล่วงหน้า ซึ่งแสดงถึงทุกช่องในบล็อก จากนั้นTODOผู้ใช้ต้อง ประกอบตัวแปรทั้งหมดนี้เป็นสตริงโค้ดสุดท้ายที่ บล็อกที่กำหนดเองจะแสดง ซึ่งหมายความว่าโดยปกติแล้วเครื่องมือสร้างโค้ดบล็อกทั้งหมด ของคุณเพียงแค่ต้องส่งคืนบรรทัดที่สร้างตัวแปรที่กำหนดเองนี้ สมมติว่าผู้ใช้ กำลังสร้างบล็อกที่กำหนดเองซึ่งจะเพิ่มแสงอาทิตย์ลงใน Canvas โดยจะ เพิ่มฟิลด์มุมลงในบล็อกและตั้งชื่อว่า "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 Factory ได้โดยการเรียกใช้ npm start ในไดเรกทอรี blockly-samples/examples/developer-tools คุณควรจะลากบล็อกจากหมวดหมู่ฟิลด์ เพิ่มลงในอินพุตในบล็อก และดูเอาต์พุตที่เปลี่ยนแปลงได้ ตรวจสอบว่าตัวอย่างของ บล็อกดูถูกต้อง และโค้ดสำหรับส่วนเอาต์พุตแต่ละส่วน ถูกต้อง