เครื่องมือสําหรับนักพัฒนาซอฟต์แวร์ Blockly

เครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ Blockly เป็นเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์บนเว็บที่ทำให้ขั้นตอนการกำหนดค่า Blockly ทำงานโดยอัตโนมัติบางส่วน ซึ่งรวมถึงการสร้างบล็อกที่กำหนดเอง การสร้างกล่องเครื่องมือ และการกำหนดค่า Workspace บนเว็บ Blockly

ขั้นตอนของนักพัฒนาซอฟต์แวร์ Blockly ที่ใช้เครื่องมือดังกล่าวประกอบด้วย 3 ส่วน ดังนี้

  • สร้างบล็อกที่กำหนดเองโดยใช้ Block Factory และ Block Exporter
  • สร้างกล่องเครื่องมือและพื้นที่ทำงานเริ่มต้นโดยใช้ Workspace Factory
  • กำหนดค่าพื้นที่ทำงานโดยใช้ Workspace Factory (ปัจจุบันเป็นฟีเจอร์บนเว็บเท่านั้น)

บล็อกแท็บเริ่มต้น

แท็บ "บล็อกเป็นค่าเริ่มต้น" ช่วยให้คุณสร้างการกำหนดการบล็อกและเครื่องมือสร้างโค้ดบล็อกสำหรับการบล็อกที่กำหนดเอง ในแท็บนี้ คุณสามารถสร้าง แก้ไข และบันทึกบล็อกที่กำหนดเองได้อย่างง่ายดาย

การกำหนดการบล็อก

วิดีโอนี้จะอธิบายขั้นตอนการกำหนดบล็อกโดยละเอียด แม้ว่า UI จะล้าสมัย แต่ฟีเจอร์บล็อกที่ไฮไลต์ไว้ยังคงถูกต้อง

การจัดการไลบรารี

การบล็อกจะอ้างอิงตามชื่อ ดังนั้นบล็อกแต่ละรายการที่คุณต้องการสร้างต้องมีชื่อที่ไม่ซ้ำกัน UI จะบังคับใช้การดำเนินการนี้และทำให้มีความชัดเจนเมื่อคุณ "บันทึก" บล็อกใหม่หรือ "อัปเดต" บล็อกที่มีอยู่

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

การส่งออกและการนำเข้าไลบรารี

ระบบจะบันทึกการบล็อกไปยังพื้นที่เก็บข้อมูลในเครื่องของเบราว์เซอร์ การล้างพื้นที่เก็บข้อมูลในเครื่องของเบราว์เซอร์ จะลบบล็อกของคุณ หากต้องการบันทึกการบล็อกไว้ตลอดไป คุณต้องดาวน์โหลดคลัง ไลบรารีของบล็อกได้รับการดาวน์โหลดเป็นไฟล์ XML ซึ่งคุณนำเข้าได้เพื่อตั้งค่าไลบรารีของบล็อกให้อยู่ในสถานะเหมือนตอนที่ดาวน์โหลดไฟล์ โปรดทราบว่าการนำเข้าไลบรารีของบล็อกจะแทนที่ไลบรารีปัจจุบัน ดังนั้นคุณอาจต้องส่งออกก่อน

นอกจากนี้ ฟีเจอร์การนำเข้าและส่งออกยังเป็นวิธีที่แนะนำในการดูแลและแชร์บล็อกที่กำหนดเองชุดต่างๆ

บล็อกแท็บผู้ส่งออก

เมื่อคุณออกแบบการบล็อกแล้ว คุณจะต้องส่งออกการกำหนดการบล็อกและต้นขั้วเครื่องกำเนิดไฟฟ้าเพื่อใช้ในแอป โดยสามารถทำได้ในแท็บ "บล็อกเครื่องมือส่งออก"

ทุกบล็อกที่จัดเก็บไว้ในคลังบล็อกจะแสดงในตัวเลือกบล็อก คลิกที่บล็อกเพื่อเลือกหรือยกเลิกการเลือกเพื่อส่งออก หากคุณต้องการเลือกบล็อกทั้งหมดในไลบรารี ให้ใช้ตัวเลือก "เลือก" → "จัดเก็บทั้งหมดในไลบรารี" หากคุณสร้างกล่องเครื่องมือหรือกำหนดค่าพื้นที่ทำงานโดยใช้แท็บ "โรงงานของ Workspace" คุณจะสามารถเลือกบล็อกทั้งหมดที่ใช้ได้โดยคลิก "เลือก" → "ทั้งหมดที่ใช้ใน Workspace Factory"

การตั้งค่าการส่งออกช่วยให้คุณเลือกภาษาที่สร้างขึ้นที่ต้องการกำหนดเป้าหมาย และเลือกว่าคุณต้องการกำหนดคำจำกัดความ สตับตัวสร้าง หรือทั้ง 2 ภาษาสำหรับบล็อกที่เลือก เมื่อเลือกไฟล์เหล่านี้แล้ว ให้คลิก "ส่งออก" เพื่อดาวน์โหลดไฟล์

แท็บโรงงานของ Workspace

Workspace Factory ทำให้การกำหนดค่ากล่องเครื่องมือและชุดบล็อกเริ่มต้นในพื้นที่ทำงานเป็นเรื่องง่าย คุณสามารถสลับระหว่างการแก้ไขกล่องเครื่องมือและพื้นที่ทำงานสำหรับการเริ่มต้นได้โดยใช้ปุ่ม "กล่องเครื่องมือ" และ "พื้นที่ทำงาน"

การสร้างกล่องเครื่องมือ

แท็บนี้จะช่วยสร้าง XML สำหรับกล่องเครื่องมือ เนื้อหาจะถือว่าคุ้นเคยกับฟีเจอร์ต่างๆ ของกล่องเครื่องมือ หากมี XML สำหรับกล่องเครื่องมือที่ต้องการแก้ไขอยู่แล้ว ก็โหลดได้โดยคลิก "โหลดเพื่อแก้ไข"

กล่องเครื่องมือที่ไม่มีหมวดหมู่

หากคุณมีบล็อก 2-3 บล็อกและต้องการแสดงหมวดหมู่โดยไม่มีหมวดหมู่ เพียงลากบล็อกเหล่านั้นลงในพื้นที่ทำงาน แล้วคุณจะเห็นการบล็อกปรากฏขึ้นในกล่องเครื่องมือในตัวอย่าง

กล่องเครื่องมือที่มีหมวดหมู่

หากต้องการแสดงการบล็อกในหมวดหมู่ ให้คลิกปุ่ม "+" แล้วเลือกรายการแบบเลื่อนลงสำหรับหมวดหมู่ใหม่ ซึ่งจะเป็นการเพิ่มหมวดหมู่ลงในรายการหมวดหมู่ ที่คุณจะเลือกและแก้ไขได้ เลือก "หมวดหมู่มาตรฐาน" เพื่อเพิ่มหมวดหมู่ Blockly มาตรฐานแต่ละรายการ (ตรรกะ ลูป ฯลฯ) หรือ "กล่องเครื่องมือมาตรฐาน" เพื่อเพิ่มหมวดหมู่ Blockly มาตรฐานทั้งหมด ใช้ปุ่มลูกศรเพื่อเรียงลำดับหมวดหมู่ใหม่

หากต้องการเปลี่ยนชื่อหรือสีของหมวดหมู่ที่เลือก ให้ใช้เมนูแบบเลื่อนลง "แก้ไขหมวดหมู่" การลากบล็อกเข้าไปในพื้นที่ทำงานจะเป็นการเพิ่มบล็อกนั้นลงในหมวดหมู่ที่เลือก

บล็อกขั้นสูง

โดยค่าเริ่มต้น คุณสามารถเพิ่มบล็อกมาตรฐานหรือบล็อกใดก็ได้ในคลัง ของคุณในกล่องเครื่องมือ หากคุณมีบล็อกที่กำหนดใน JSON ที่ไม่ได้อยู่ในไลบรารีของคุณ คุณสามารถนำเข้าบล็อกโดยใช้ปุ่ม "นำเข้าบล็อกที่กำหนดเอง"

บางการบล็อกควรใช้ร่วมกันหรือรวมค่าเริ่มต้น โดยใช้กลุ่มและเงา การบล็อกที่เชื่อมต่ออยู่ในเครื่องมือแก้ไขจะเพิ่มลงในกล่องเครื่องมือเป็นกลุ่ม บล็อกที่ติดอยู่กับบล็อกอื่นสามารถเปลี่ยนเป็นบล็อกเงาได้โดยเลือกบล็อกย่อย แล้วคลิกปุ่ม "สร้างเงา" หมายเหตุ: เฉพาะบล็อกย่อยที่ไม่มีตัวแปรเท่านั้นที่จะเปลี่ยนเป็นบล็อกเงาได้

หากคุณใส่ตัวแปรหรือบล็อกฟังก์ชันไว้ในกล่องเครื่องมือ ให้ใส่หมวดหมู่ "ตัวแปร" หรือ "ฟังก์ชัน" ในกล่องเครื่องมือเพื่อให้ผู้ใช้ใช้การบล็อกได้เต็มที่ ดูข้อมูลเพิ่มเติมเกี่ยวกับหมวดหมู่ "ตัวแปร" หรือ "ฟังก์ชัน"

การกำหนดค่าพื้นที่ทำงาน (สำหรับเว็บ Blockly)

หากต้องการกำหนดค่าส่วนต่างๆ ของพื้นที่ทำงาน ให้ไปที่แท็บ "Workspace Factory" แล้วเลือก "Workspace"

เลือกตัวเลือกพื้นที่ทำงาน

กำหนดค่าที่แตกต่างกันสำหรับตัวเลือกการกำหนดค่า และดูผลลัพธ์ในพื้นที่แสดงตัวอย่าง การเปิดใช้ตารางกริดหรือการซูมจะแสดงตัวเลือกเพิ่มเติมในการกำหนดค่า นอกจากนี้ การเปลี่ยนมาใช้หมวดหมู่มักจะต้องใช้พื้นที่ทำงานที่ซับซ้อนมากขึ้น ระบบจะเพิ่มถังขยะและแถบเลื่อนโดยอัตโนมัติเมื่อคุณเพิ่มหมวดหมู่แรก

เพิ่มการบล็อกที่โหลดล่วงหน้าไปยังพื้นที่ทำงาน

ขั้นตอนนี้เป็นขั้นตอนที่ไม่บังคับ แต่อาจจำเป็นหากต้องการแสดงชุดบล็อกในพื้นที่ทำงาน ดังนี้

  • เมื่อแอปพลิเคชันโหลด
  • เมื่อมีการทริกเกอร์เหตุการณ์ (การเลื่อนระดับ การคลิกปุ่มช่วยเหลือ ฯลฯ)

ลากบล็อกไปไว้ในพื้นที่แก้ไขเพื่อดูบล็อกเหล่านั้นในพื้นที่ทำงานในตัวอย่าง คุณสามารถสร้างกลุ่มการบล็อก ปิดใช้การบล็อก และทำให้การบล็อกเป็นการบล็อกเงาบางส่วนเมื่อคุณเลือกบล็อกเหล่านั้น

คุณสามารถส่งออกบล็อกเหล่านี้เป็น XML (ดูด้านล่าง) เพิ่มพื้นที่ทํางานไปยังพื้นที่ทํางานด้วย Blockly.Xml.domToWorkspace ทันทีหลังจากสร้างพื้นที่ทํางาน ดังนี้

var xmlText = '<xml xmlns="https://developers.google.com/blockly/xml">' +
    '<block type="math_number"></block></xml>';
Blockly.Xml.domToWorkspace(Blockly.utils.xml.textToDom(xmlText), workspace);

โค้ดตัวอย่างนี้จะเพิ่มบล็อก math_number เดี่ยวลงในพื้นที่ทำงาน

กำลังส่งออก

Workspace Factory มีตัวเลือกการส่งออกดังต่อไปนี้

  • โค้ดเริ่มต้น: สร้าง HTML เริ่มต้นและ JavaScript เพื่อแทรกพื้นที่ทำงานใน Blockly ที่คุณปรับแต่งเอง
  • กล่องเครื่องมือ: สร้าง XML เพื่อระบุกล่องเครื่องมือของคุณ
  • Workspace Blocks: สร้าง XML ที่โหลดลงในพื้นที่ทำงานได้