Khi xâm nhập vào lõi của Blockly hoặc phát triển một trình bổ trợ, Playground là một công cụ cực kỳ hữu ích. Ứng dụng này có một thực thể được định cấu hình sẵn của Blockly mà bạn có thể dùng để kiểm thử, gỡ lỗi hoặc tạo nguyên mẫu. Tại Google, hầu như toàn bộ quá trình phát triển của Blockly đều diễn ra bằng cách sử dụng Playground. Dưới đây là bản xem trước đơn giản trên máy chủ minh hoạ.
Có 3 loại sân chơi dành cho Blockly cốt lõi: đơn giản, nâng cao và đa dạng. Trong các mẫu khối, thường chỉ sử dụng mô phỏng nâng cao.
Điều kiện tiên quyết
Blockly hiện sử dụng hệ thống mô-đun Đóng. Do cách tải, các mô-đun Đóng chưa được biên dịch phải được tìm nạp từ URL http: hoặc https: và không thể tìm nạp trực tiếp từ URL file:. Do đó, để tải sân chơi ở chế độ không được biên dịch, bạn phải tải các mô-đun đó từ máy chủ web cục bộ.
Chúng tôi đã tạo một tập lệnh khởi động máy chủ cục bộ và tải tất cả mã cần thiết để tải các mô-đun Blockly. Bạn cần phải cài đặt npm trên máy của mình và chạy npm install từ thư mục gốc của Blockly để cài đặt tất cả các phần phụ thuộc.
Sử dụng Internet Explorer
Blockly hiện sử dụng các tính năng nâng cao trong cơ sở mã có thể không tương thích với Internet Explorer. Trong mã đã nén (đã biên dịch), các tính năng này được sao chép để hoạt động với IE, nhưng việc tải mã không nén có thể không hoạt động. Nếu bạn tải Playground trong IE, ngay cả qua máy chủ http cục bộ, do đó, Playground sẽ tự động tải mã Blockly được nén nhằm đảm bảo khả năng tương thích. Hãy xem phần "Truy cập trực tiếp vào sân chơi" để biết thêm thông tin chi tiết về việc kiểm thử các thay đổi trong mô phỏng ở chế độ nén.
Sân chơi đơn giản
Hai sân chơi còn lại là cơ sở cho sân chơi đơn giản. Cửa sổ này hiển thị một hộp công cụ và không gian làm việc, đồng thời cho phép bạn điều chỉnh một số chế độ cài đặt có giới hạn.
Để mở Playground, hãy chạy
npm run start
từ thư mục gốc của Blockly. Đảm bảo không có gì khác đang nghe trên cổng 8080. Lệnh này sẽ khởi động một máy chủ lưu trữ các mô-đun Blockly và tự động mở trình duyệt của bạn đến trang mô phỏng. Khi bạn đã sẵn sàng tắt sân chơi, hãy kết thúc quá trình (ctrl-c trong môi trường Mac và Linux).
Sân chơi có:
- Tất cả các mã đều được giải nén để phát triển nhanh chóng.
- Tất cả khối mặc định (ngoại trừ một số khối không dùng nữa).
- Tất cả các trình tạo ngôn ngữ (JavaScript, Python, PHP, Lua và Dart).
- Chuyển đổi tuần tự và giải tuần tự trạng thái không gian làm việc (JSON hoặc XML).
- Chuyển đổi giữa bố cục LTR và RTL.
- Chuyển đổi giữa các bố cục hộp công cụ.
- Kiểm thử căng thẳng cho trình kết xuất.
- Ghi nhật ký tất cả sự kiện trong bảng điều khiển.
Sân chơi nâng cao
Playground nâng cao chứa các tính năng bổ sung giúp việc gỡ lỗi Blockly thậm chí dễ dàng hơn nữa. Đây cũng là sân chơi mặc định được dùng trong các mẫu khối cho tất cả trình bổ trợ.
Sân chơi này có tất cả các tính năng sân chơi đơn giản cộng với:
- Bạn có thể định cấu hình các chế độ cài đặt bổ sung, chẳng hạn như kích thước lưới, các chế độ điều khiển thu phóng/di chuyển, trình kết xuất, giao diện, v.v.
- Các chế độ cài đặt và khối được sử dụng sẽ được tự động lưu vào bộ nhớ đệm và sử dụng vào lần tiếp theo tải sân chơi.
- Xem kết quả của từng trình tạo trong cùng một cửa sổ.
Để bắt đầu bản dựng nâng cao cho mọi trình bổ trợ trong khối mẫu, hãy chạy npm run
start qua thư mục gốc của trình bổ trợ. Hiện tại, chỉ có một trình bổ trợ có thể chạy tại một thời điểm và trình bổ trợ này sử dụng cổng 3000. Nếu bạn gặp sự cố khi khởi động trình bổ trợ,
trước tiên, hãy đảm bảo không có thiết bị nào khác đang nghe trên cổng đó.
Để bắt đầu sân chơi nâng cao trong cốt lõi, hãy chạy npm run start từ thư mục gốc của Blockly, sau đó nhấp vào đường liên kết "Nâng cao" trong tiêu đề.
Bạn cũng có thể tạo trang thử nghiệm của riêng mình bao gồm sân chơi nâng cao bằng cách sử dụng gói công cụ dành cho nhà phát triển của Blockly.
Nhiều sân chơi
Nhiều sân chơi chứa một số sân chơi ở nhiều cấu hình cho chế độ LTR và vị trí của hộp công cụ. Tính năng này chủ yếu dùng để kiểm tra nhanh nhằm đảm bảo rằng Blockly chưa làm hỏng bất kỳ yếu tố nào liên quan đến LTR trước khi phát hành. Để mở
mô hình này, hãy làm theo các bước dành cho sân chơi đơn giản, sau đó thay đổi
URL thành /tests/multi_playground.html.
Kiểm thử các thay đổi
Khi chạy bất kỳ sân chơi nào từ một máy chủ cục bộ, bạn chỉ cần làm mới trang để xem các thay đổi của mình trong Blockly trong hầu hết trường hợp. Nếu đã thêm một tệp mới hoặc thêm phần phụ thuộc mới vào một tệp, trước tiên, bạn có thể cần chạy npm run
build. Thao tác này sẽ cập nhật tệp test/deps.js để đảm bảo các phần phụ thuộc được tải chính xác, sau đó làm mới trang.
Nếu đang chạy nền tảng nâng cao của một trình bổ trợ, thì bạn thậm chí không cần phải làm mới trang. Các thay đổi sẽ tự động được tải lên nhanh!
Trực tiếp ra sân chơi
Trước đây, bạn có thể truy cập ứng dụng đơn giản này trên máy bằng cách trực tiếp chuyển đến tệp test/playground.html trong trình duyệt. Điều này vẫn có thể xảy ra với các sân chơi đơn giản và nhiều sân chơi, nhưng không nên dùng nữa. Nếu bạn làm như vậy, Playground sẽ phát hiện ra rằng bạn hiện không chạy máy chủ cục bộ và tự động sử dụng các tệp Blockly được nén (xem trang Tạo khối để biết thêm thông tin) và bất cứ khi nào bạn thay đổi nội dung nào đó trong Core Blockly, bạn sẽ phải tạo lại lõi và giai đoạn các thay đổi. Bạn vẫn có thể truy cập các trang này nếu được lưu trữ trên máy chủ từ xa, chẳng hạn như ví dụ được lưu trữ trên trang web minh hoạ của chúng tôi. Nền sẽ có màu xanh dương sáng bất cứ khi nào bạn ở chế độ nén.
Không thể sử dụng sân chơi nâng cao qua quyền truy cập file:.