สนามเด็กเล่น

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

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

ข้อกำหนดเบื้องต้น

ตอนนี้ Blockly ใช้ระบบโมดูลการปิดแล้ว เนื่องจากวิธีการโหลด โมดูลการปิดที่ไม่ได้คอมไพล์จะต้องดึงข้อมูลจาก URL http: หรือ https: และไม่สามารถดึงจาก URL ของ file: ได้โดยตรง ดังนั้น หากต้องการโหลดเพลย์กราวด์ในโหมดไม่คอมไพล์ คุณต้องโหลดจากเว็บเซิร์ฟเวอร์ภายใน

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

การใช้ Internet Explorer

ตอนนี้ Blockly ใช้ฟีเจอร์ขั้นสูงในฐานของโค้ดที่อาจใช้ไม่ได้กับ Internet Explorer ในโค้ดที่บีบอัด (คอมไพล์) ฟีเจอร์เหล่านี้จะได้รับการแปลงให้ใช้งานได้กับ IE แต่การโหลดโค้ดที่ไม่ได้บีบอัดอาจไม่ทำงาน หากคุณโหลด Playground ใน IE แม้จะใช้งานผ่านเซิร์ฟเวอร์ HTTP ในเครื่อง สนามเด็กเล่นก็จะโหลดโค้ด Blockly ที่บีบอัดโดยอัตโนมัติเพื่อให้มั่นใจว่าสามารถใช้งานร่วมกันได้ ดูรายละเอียดเพิ่มเติมเกี่ยวกับการเปลี่ยนแปลงการทดสอบในสนามเด็กเล่นในโหมดบีบอัดได้ที่ส่วน "การเข้าถึง Playground โดยตรง"

สนามเด็กเล่นแบบเรียบง่าย

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

วิ่งเพื่อเปิดสนามเด็กเล่น

npm run start

จากรูทของ Blockly ตรวจสอบว่าไม่มีอะไรฟังอยู่บนพอร์ต 8080 แล้ว คำสั่งนี้จะเริ่มต้นเซิร์ฟเวอร์ที่โฮสต์โมดูล Blockly และเปิดเบราว์เซอร์ของคุณไปยังหน้าสนามเด็กเล่นโดยอัตโนมัติ เมื่อคุณพร้อมที่จะปิดสนามเด็กเล่นแล้ว ให้หยุดกระบวนการ (ctrl-c ในสภาพแวดล้อม Mac และ Linux)

สนามเด็กเล่นนี้มีคุณสมบัติดังนี้

• โค้ดทั้งหมดไม่ได้รับการบีบอัดเพื่อการพัฒนาอย่างรวดเร็ว
• การบล็อกที่เป็นค่าเริ่มต้นทั้งหมด (ยกเว้นการบล็อกบางรายการที่เลิกใช้งานแล้ว)
• เครื่องมือสร้างภาษาทั้งหมด (JavaScript, Python, PHP, Lua และ Dart)
• ทำให้สถานะของพื้นที่ทำงานเป็นอนุกรมและดีซีเรียลไลซ์ (JSON หรือ XML)
• สลับระหว่างรูปแบบ LTR และ RTL
• สลับระหว่างเลย์เอาต์กล่องเครื่องมือ
• การทดสอบความเครียดสำหรับโหมดแสดงภาพ
• บันทึกเหตุการณ์ทั้งหมดในคอนโซล

สนามเด็กเล่นขั้นสูง

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

สนามเด็กเล่นแห่งนี้มีฟีเจอร์สนามเด็กเล่นแบบเรียบง่ายทั้งหมด รวมถึง

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

หากต้องการเริ่มใช้งานสนามเด็กเล่นขั้นสูงสำหรับปลั๊กอินในตัวอย่างแบบบล็อก ให้เรียกใช้ npm run start จากไดเรกทอรีรากของปลั๊กอิน ปัจจุบันเรียกใช้ได้ทีละปลั๊กอินเท่านั้น และใช้พอร์ต 3000 หากคุณมีปัญหาในการเริ่มต้นใช้งานปลั๊กอิน ให้ตรวจสอบว่าไม่มีสิ่งใดฟังอยู่บนพอร์ตนั้น

หากต้องการเริ่ม Playground ขั้นสูงในส่วนหลัก ให้เรียกใช้ npm run start จากรูทของ Blockly แล้วคลิกลิงก์ "ขั้นสูง" ใต้ชื่อ

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

สนามเด็กเล่นหลายแห่ง

หลายสนามเด็กเล่นมีสนามเด็กเล่นหลายตัวในการกำหนดค่าที่แตกต่างกันสำหรับโหมด LTR และตำแหน่งของกล่องเครื่องมือ ซึ่งหลักๆ แล้วจะใช้เพื่อตรวจสอบอย่างรวดเร็วว่า Blockly ไม่ได้สร้างความเสียหายใดๆ ที่เกี่ยวข้องกับ LTR ก่อนการเผยแพร่ หากต้องการเปิดสนามเด็กเล่นนี้ ให้ทำตามขั้นตอนสำหรับสนามเด็กเล่นแบบง่าย แล้วเปลี่ยน URL เป็น /tests/multi_playground.html

การเปลี่ยนแปลงในการทดสอบ

เมื่อเรียกใช้ Playing จากเซิร์ฟเวอร์ภายใน สิ่งที่คุณต้องทำเพื่อดูการเปลี่ยนแปลงใน Blockly ในกรณีส่วนใหญ่คือการรีเฟรชหน้า หากเพิ่มไฟล์ใหม่หรือเพิ่มทรัพยากร Dependency ใหม่ไปยังไฟล์แล้ว คุณอาจต้องเรียกใช้ npm run build ก่อน ซึ่งจะอัปเดตไฟล์ test/deps.js เพื่อให้แน่ใจว่าโหลดทรัพยากร Dependency อย่างถูกต้อง แล้วจึงรีเฟรชหน้า

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

การเข้าถึงสนามเด็กเล่นโดยตรง

ก่อนหน้านี้คุณเข้าถึงสนามเด็กเล่นพื้นฐานภายในเครื่องได้โดยไปที่ไฟล์ test/playground.html ในเบราว์เซอร์โดยตรง วิธีนี้ยังคงเป็นไปได้ด้วยสนามเด็กเล่นที่เรียบง่ายและมีหลายพื้นที่ แต่เราไม่แนะนำอีกต่อไปแล้ว หากคุณทำเช่นนี้ สนามเด็กเล่นจะตรวจหาว่าคุณไม่ได้ใช้เซิร์ฟเวอร์ภายในอยู่และใช้ไฟล์ Blockly ที่มีการบีบอัดโดยอัตโนมัติ (ดูข้อมูลเพิ่มเติมในหน้า Building Blockly) และเมื่อใดก็ตามที่คุณเปลี่ยนแปลงบางอย่างใน Blockly หลัก คุณจะต้องสร้างแกนกลางและดำเนินการเปลี่ยนแปลงอีกครั้ง คุณยังสามารถเข้าถึงหน้าเหล่านี้ได้หากโฮสต์บนเซิร์ฟเวอร์ระยะไกล อย่างเช่นที่ตัวอย่างของเราโฮสต์อยู่ในเว็บไซต์เดโมของเรา พื้นหลังจะเป็นสีน้ำเงินสว่างทุกครั้งที่คุณอยู่ในโหมดบีบอัด

สนามเด็กเล่นขั้นสูงไม่พร้อมใช้งานผ่านการเข้าถึง file: