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

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

สนามเด็กเล่นหลักๆ ของ Blockly มีอยู่ 3 ประเภท ได้แก่ แบบง่าย ขั้นสูง และแบบหลายที่ ใน blockly-samples โดยทั่วไปจะใช้เฉพาะพื้นที่ทํางานขั้นสูง

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

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

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

การใช้ Internet Explorer

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

พื้นที่ทดสอบแบบง่าย

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

หากต้องการเปิด Playgroud ให้เรียกใช้

npm run start

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

สนามเด็กเล่นมีให้เลือกดังนี้

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

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

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

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

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

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

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

นอกจากนี้ คุณยังสร้างหน้าทดสอบของคุณเองซึ่งมีพื้นที่ทํางานขั้นสูงได้โดยใช้แพ็กเกจ dev-tools ของ Blockly

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

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

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

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

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

การเข้าถึงแพลตฟอร์มทดสอบโดยตรง

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

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