เครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ Blockly เป็นเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์บนเว็บที่ช่วยให้คุณสร้างบล็อกที่กำหนดเองและรวมไว้ในแอปพลิเคชันได้
กำหนดบล็อก
พื้นที่ทํางานของ Block Factory จะเริ่มด้วยบล็อกการกําหนดค่าว่าง คุณสามารถเพิ่มอินพุตและช่องลงในบล็อกได้โดยลากบล็อกจากหมวดหมู่ที่เกี่ยวข้องในกล่องเครื่องมือ นอกจากนี้ คุณยังตั้งค่าข้อความเคล็ดลับเครื่องมือ, URL ความช่วยเหลือ, สี และการตรวจสอบการเชื่อมต่อสำหรับบล็อกได้โดยแก้ไขบล็อกการกําหนดค่า
บล็อกแฟกทอรีจะสร้างบล็อกได้ครั้งละ 1 ประเภทเท่านั้น หากต้องการออกแบบบล็อกหลายรายการที่เชื่อมต่อกัน คุณจะต้องออกแบบบล็อกแยกกันและเชื่อมต่อบล็อกเหล่านั้นในคําจํากัดความของกล่องเครื่องมือ นอกจากนี้ บล็อกยังมีฟีเจอร์ขั้นสูง เช่น ตัวเปลี่ยน แต่คุณจะสร้างฟีเจอร์ขั้นสูงเหล่านี้ใน Factory ไม่ได้ คุณจะต้องแก้ไขคำจำกัดความของบล็อกตามเอกสารประกอบหลังจากที่สร้างรูปแบบพื้นฐานของบล็อกแล้ว
เมื่อคุณแก้ไขบล็อกการกําหนดค่าในพื้นที่ทํางาน ตัวอย่างของบล็อกจะอัปเดตโดยอัตโนมัติ โค้ดที่คุณต้องเพิ่มลงในแอปพลิเคชันจะอัปเดตโดยอัตโนมัติด้วย
การกำหนดค่าการแสดงผล
Blockly รองรับวิธีการต่างๆ ในการกําหนดบล็อกและโหลด Blockly เอง รวมถึงมีภาษาเครื่องมือสร้างโค้ดในตัวหลายภาษา วิธีกำหนดบล็อกและเครื่องมือสร้างโค้ดของบล็อกจะขึ้นอยู่กับปัจจัยเหล่านี้ คุณจึงตั้งค่าใน Block Factory เพื่อเปลี่ยนเอาต์พุตโค้ดได้
รูปแบบการนําเข้า Blockly
คุณสามารถโหลด Blockly ผ่านแท็ก <script> ใน HTML หรือใช้คำสั่ง import หากใช้เครื่องมือสร้างกับแอปพลิเคชัน ตัวเลือกนี้ส่งผลต่อวิธีอ้างอิงส่วนต่างๆ ของ Blockly API ดูข้อมูลเพิ่มเติมเกี่ยวกับตัวเลือกได้ที่เอกสารประกอบเกี่ยวกับการโหลด Blockly
ไม่ว่าคุณจะใช้วิธีใดก็ตาม อย่าลืมเลือกตัวเลือกที่เกี่ยวข้องในบล็อกแฟคทอรี่เพื่อให้โค้ดที่จะเพิ่มลงในแอปพลิเคชันถูกต้องสำหรับแอปพลิเคชัน
รูปแบบคำจำกัดความของบล็อก
Blockly รองรับการกําหนดบล็อกใน JSON หรือ JavaScript เราขอแนะนำให้ใช้รูปแบบ JSON แต่หากต้องการเพิ่มฟีเจอร์ขั้นสูง เช่น ตัวแปรที่เปลี่ยนค่า คุณจะใช้รูปแบบ JavaScript ได้
ภาษาของเครื่องมือสร้างโค้ด
Blockly มาพร้อมกับภาษาของเครื่องมือสร้างโค้ดหลายภาษา เลือกภาษาที่แอปพลิเคชันของคุณต้องใช้เพื่อแสดงสแต็บเครื่องมือสร้างโค้ดบล็อกที่เกี่ยวข้อง หากใช้เครื่องมือสร้างภาษาที่กําหนดเอง คุณจะแก้ไขชื่อคลาส CodeGenerator ที่กําหนดเองได้หลังจากคัดลอกโค้ดลงในแอปพลิเคชัน
เอาต์พุตของโค้ด
ส่วนถัดไปของ Block Factory จะแสดงโค้ดที่คุณต้องคัดลอกลงในแอปพลิเคชันเพื่อโหลดบล็อกที่คุณสร้างขึ้น ตําแหน่งที่คัดลอกโค้ดจะขึ้นอยู่กับโครงสร้างของแอปพลิเคชัน แต่โดยทั่วไปแล้ว คุณจะต้องเรียกใช้ส่วนหัวของโค้ดก่อนคําจํากัดความและเครื่องมือสร้างโค้ดบล็อก คําจํากัดความของบล็อกก่อนพยายามใช้ในกล่องเครื่องมือ และเครื่องมือสร้างโค้ดบล็อกก่อนพยายามสร้างโค้ดสําหรับเวิร์กสเปซ สําหรับแต่ละส่วน คุณสามารถใช้ปุ่มคัดลอกเพื่อคัดลอกทั้งบล็อกโค้ดของส่วนนั้น
หากยังไม่แน่ใจว่าจะใช้งานเอาต์พุตโค้ดอย่างไร คุณอาจสนใจตัวอย่างแอปซึ่งมีตัวอย่างบล็อกที่กำหนดเองและเครื่องมือสร้างโค้ดบล็อก
ส่วนหัวของโค้ด
ส่วนส่วนหัวของโค้ดจะแสดงโค้ดที่คุณต้องโหลดไลบรารี Blockly หลักและเครื่องมือสร้างภาษาที่คุณเลือก อาจมีการกำหนดค่าอื่นๆ ที่นี่ด้วย เช่น ฟิลด์บางรายการที่คุณอาจรวมไว้ในบล็อกมาจากปลั๊กอิน Blockly ปลั๊กอินเหล่านี้จะมีคำสั่งการนําเข้าของตัวเองและอาจมีโค้ดอื่นๆ ที่คุณจะต้องเรียกใช้เพื่อเริ่มต้นใช้งานช่อง โค้ดนี้ควรอยู่ก่อนส่วนโค้ดต่อไปนี้
คําจํากัดความของบล็อก
คําจํากัดความของบล็อกคือวิธีที่คุณบอก Blockly เกี่ยวกับรูปร่างของบล็อก เช่น ช่องและอินพุตที่มี สี และอื่นๆ หลังจากเรียกใช้โค้ดนี้แล้ว Blockly จะทราบวิธีสร้างบล็อกโดยอิงตาม type ของบล็อกนั้นๆ
หากใช้แอปตัวอย่าง คุณสามารถใส่โค้ดนี้ไว้ในไฟล์ที่อยู่ในไดเรกทอรี blocks/ หากคุณมีโครงสร้างแอปพลิเคชันของตัวเอง ให้ใส่โค้ดนี้ก่อนพยายามอ้างอิงบล็อกตามชื่อ เช่น ในคําจํากัดความของกล่องเครื่องมือ ไม่ว่าจะด้วยวิธีใด โปรดตรวจสอบว่าส่วนหัวของโค้ดอยู่ในไฟล์ที่คุณใส่โค้ดนี้
ข้อมูลโค้ดเริ่มต้นของเครื่องมือสร้าง
เครื่องมือสร้างโค้ดบล็อกคือวิธีที่คุณอธิบายโค้ดที่ควรสร้างขึ้นสำหรับบล็อก สตับเครื่องมือสร้างที่ BlockGenerator สร้างจะให้โค้ดพื้นฐานสําหรับรับค่าของอินพุตและช่องที่อยู่ในบล็อก คุณเลือกที่จะรวมค่าเหล่านี้ไว้ในโค้ดสุดท้ายที่จะสร้างขึ้นได้
หากใช้แอปตัวอย่าง คุณสามารถใส่โค้ดนี้ไว้ในไฟล์ที่อยู่ในไดเรกทอรี generators/ หากคุณมีโครงสร้างแอปพลิเคชันของตัวเอง โปรดใส่โค้ดนี้ก่อนพยายามสร้างโค้ดสําหรับเวิร์กสเปซที่มีบล็อกที่กําหนดเอง ไม่ว่าจะด้วยวิธีใด โปรดตรวจสอบว่าส่วนหัวของโค้ดอยู่ในไฟล์ที่คุณใส่โค้ดนี้
วิดีโอคําแนะนําแบบทีละขั้น
วิดีโอนี้จะอธิบายขั้นตอนในการกําหนดบล็อกโดยละเอียด UI ล้าสมัยแล้ว แต่ฟีเจอร์ของบล็อกที่ไฮไลต์ไว้ยังคงมีความแม่นยำอยู่บ้าง
คลังบล็อก
ระบบจะบันทึกบล็อกไว้ในพื้นที่เก็บข้อมูลในเครื่องของเบราว์เซอร์โดยอัตโนมัติทุกครั้งที่คุณทำการเปลี่ยนแปลงบล็อก คุณสามารถสร้างบล็อกใหม่หรือโหลดบล็อกที่มีอยู่จากพื้นที่เก็บข้อมูลในเครื่องได้โดยคลิกปุ่มที่เกี่ยวข้องในแถบเครื่องมือด้านบน
นําเข้าจาก Block Factory รุ่นเดิม
หากคุณเคยใช้ Block Factory รุ่นเดิมและต้องการย้ายข้อมูลคำจำกัดความของบล็อกที่มีอยู่ไปยังเครื่องมือใหม่ ให้ทำตามขั้นตอนต่อไปนี้
ใน Block Factory แบบเดิม ให้คลิกปุ่ม
Export Block Libraryในแถบเครื่องมือ ซึ่งจะเป็นการดาวน์โหลดไฟล์ที่มีคำจำกัดความของบล็อกทั้งหมด
ใน Block Factory ใหม่ ให้คลิกปุ่ม
Load blockในแถบเครื่องมือเลือกตัวเลือก "นําเข้าจาก Block Factory" ในเมนู
อัปโหลดไฟล์ที่ดาวน์โหลดไว้ในขั้นตอนที่ 1
ระบบควรแปลงคำจำกัดความของบล็อกเป็นรูปแบบใหม่โดยอัตโนมัติ และตอนนี้จะพร้อมใช้งานจากเมนู
Load blockระบบอาจเปลี่ยนชื่อบล็อกหากมีความขัดแย้งกับบล็อกที่มีอยู่หากมีข้อผิดพลาดในการแยกวิเคราะห์บล็อก เราจะโหลดบล็อกเหล่านั้นไม่ได้ คุณสามารถช่วยเราได้โดยรายงานข้อบกพร่องเกี่ยวกับตัวอย่างบล็อกลี่ และแนบไฟล์ที่ไม่สามารถแยกวิเคราะห์ได้