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

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

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

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

แท็บบล็อกแฟกทอรี

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

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

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

การจัดการคลัง

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

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

การส่งออกและนำเข้าคลัง

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

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

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

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

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

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

แท็บ Workspace Factory

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

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

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

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

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

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

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

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

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

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

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

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

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

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

เลือกตัวเลือก 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: สร้าง XML ที่โหลดลงในพื้นที่ทํางานได้