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

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

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

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

แท็บโรงงานบล็อก

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

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

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

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

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

แท็บโรงงานบล็อกที่มีปุ่มบันทึกและลบซึ่งมีชื่อบล็อก แท็บ Block Factory ที่มีปุ่มอัปเดต และลบซึ่งมีชื่อบล็อก

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

เมนูแบบเลื่อนลงของคลังบล็อกที่มีรายการ 4 รายการ ได้แก่ "สร้างบล็อกใหม่" และชื่อของ บล็อก 3 รายการที่สร้างไว้ก่อนหน้านี้

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

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

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

ปุ่มล้างไลบรารี นำเข้าไลบรารีบล็อก และดาวน์โหลดไลบรารีบล็อก

แท็บ Block Exporter

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

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

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

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

แท็บ Block Exporter ทั้งหมด ซึ่งมีพื้นที่ตัวเลือกบล็อก พื้นที่การตั้งค่าการส่งออก และพื้นที่ตัวอย่างการส่งออก

แท็บ Workspace Factory

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

ปุ่มกล่องเครื่องมือและปุ่ม Workspace

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

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

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

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

แท็บ Workspace Factory ที่เลือกปุ่มกล่องเครื่องมือ มี Blockly editor ทางด้านซ้ายสำหรับเลือกบล็อกในกล่องเครื่องมือ พื้นที่หมวดหมู่ตรง กลางสำหรับเพิ่มหมวดหมู่ลงในกล่องเครื่องมือ และพื้นที่แสดงตัวอย่างทางด้านขวา เพื่อแสดงกล่องเครื่องมือที่คุณสร้างขึ้น ลากบล็อก 3 บล็อกไปยัง พื้นที่ทำงานทางด้านซ้าย ซึ่งจะสร้างกล่องเครื่องมือแบบ Flyout ซึ่งแสดงทางด้านขวา

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

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

ส่วนหมวดหมู่ของแท็บ Workspace Factory ซึ่งแสดงรายการหมวดหมู่ปัจจุบันและปุ่มสำหรับเพิ่มและลบหมวดหมู่ รวมถึงเลื่อนขึ้นและลงในรายการ เลือกปุ่ม + เพื่อเพิ่มหมวดหมู่

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

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

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

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

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

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

การกำหนดค่าพื้นที่ทำงาน

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

เลือกตัวเลือก Workspace

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

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

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

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

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

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

แท็บ Workspace Factory โดยเลือกปุ่ม Workspace บล็อกถูก ลากไปยังพื้นที่ทำงานของโปรแกรมแก้ไข Blockly ทางด้านซ้าย โดยจะแสดงเป็น บล็อกที่โหลดไว้ล่วงหน้าในพื้นที่ทํางานของโปรแกรมแก้ไข Blockly ทางด้าน ขวา

คุณส่งออกบล็อกเหล่านี้เป็น 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 มีตัวเลือกการส่งออกต่อไปนี้ให้คุณ

เมนูแบบเลื่อนลง &quot;ส่งออก&quot; ที่ด้านบนของแท็บ Workspace Factory พร้อมตัวเลือกในการ ส่งออกโค้ดเริ่มต้น กล่องเครื่องมือ บล็อกพื้นที่ทำงานที่โหลดไว้ล่วงหน้า หรือทั้งหมด นี้

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