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