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

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

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

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

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

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

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

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

การจัดการห้องสมุด

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

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

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

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

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

บล็อกแท็บเครื่องมือส่งออก

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

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

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

แท็บ Workspace Works

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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