Saat meretas inti Blockly atau mengembangkan plugin, playground adalah alat yang sangat berguna. Platform ini memiliki instance Blockly yang telah dikonfigurasi sebelumnya, yang dapat Anda gunakan untuk pengujian, proses debug, atau pembuatan prototipe. Di Google, hampir semua pengembangan Blockly dilakukan menggunakan playground. Sebagai pratinjau, berikut adalah playground sederhana di server demo.
Ada 3 jenis playground untuk core Blockly: sederhana, lanjutan, dan multi. Dalam contoh blockly, biasanya hanya playground lanjutan yang digunakan.
Prasyarat
Blockly kini menggunakan sistem modul Closure. Karena cara pemuatannya,
modul Closure yang tidak dikompilasi harus diambil dari URL http: atau https: dan
tidak dapat diambil langsung dari URL file:. Oleh karena itu, untuk memuat
playground dalam mode yang tidak dikompilasi, Anda harus memuatnya dari server web lokal.
Kami telah membuat skrip yang memulai server lokal dan memuat semua kode
yang diperlukan untuk memuat modul Blockly. Anda harus menginstal npm di mesin Anda dan menjalankan npm install dari root Blockly untuk menginstal semua dependensi.
Menggunakan Internet Explorer
Blockly kini menggunakan fitur lanjutan pada codebase-nya yang mungkin tidak kompatibel dengan Internet Explorer. Dalam kode yang dikompresi (dikompilasi), fitur ini ditranspilasi agar berfungsi dengan IE, tetapi pemuatan kode yang tidak dikompresi mungkin tidak berfungsi. Jika Anda memuat playground di IE, bahkan melalui server http lokal, playground akan otomatis memuat kode Blockly yang dikompresi sebagai upaya untuk memastikan kompatibilitas. Lihat bagian "Mengakses playground secara langsung" untuk detail selengkapnya tentang menguji perubahan di playground dalam mode terkompresi.
Playground Sederhana
Playground sederhana adalah dasar dari dua playground lainnya. Alat ini menampilkan toolbox dan ruang kerja, serta memungkinkan Anda untuk menyesuaikan sejumlah setelan terbatas.
Untuk membuka taman bermain, jalankan
npm run start
dari akar Blockly. Pastikan tidak ada lagi yang menunggu di port 8080. Perintah ini akan memulai server yang menghosting modul Blockly dan otomatis membuka browser Anda ke halaman playground. Saat Anda siap untuk menonaktifkan playground, akhiri prosesnya (ctrl-c di lingkungan Mac dan Linux).
Playground ini memiliki:
- Semua kode tidak dikompresi untuk pengembangan yang cepat.
- Semua blok default (kecuali untuk beberapa yang tidak digunakan lagi).
- Semua generator bahasa (JavaScript, Python, PHP, Lua, dan Dart).
- Melakukan serialisasi dan deserialisasi status ruang kerja (JSON atau XML).
- Beralih antara tata letak LTR dan RTL.
- Beralih antara tata letak kotak alat.
- Uji daya tahan untuk perender.
- Membuat log semua peristiwa di konsol.
Playground lanjutan
Playground lanjutan berisi fitur tambahan untuk semakin mempermudah proses debug Blockly. Ini juga merupakan playground default yang digunakan dalam contoh blok untuk semua plugin.
Taman bermain ini memiliki semua fitur taman bermain simpel plus:
- Setelan tambahan dapat dikonfigurasi, seperti ukuran petak, kontrol zoom/pindahkan, perender, tema, dan lainnya.
- Setelan dan blok yang digunakan akan di-cache dan digunakan secara otomatis saat playground dimuat.
- Lihat output setiap generator di jendela yang sama.
Untuk memulai playground lanjutan untuk plugin apa pun dalam contoh blockly, jalankan npm run
start dari direktori root plugin. Saat ini, hanya satu plugin yang dapat berjalan pada satu waktu, dan plugin menggunakan port 3000. Jika Anda mengalami masalah saat memulai plugin, pertama-tama pastikan tidak ada lagi yang memproses port tersebut.
Untuk memulai playground lanjutan di core, jalankan npm run start dari root
Blockly, lalu klik link "Advanced" di bawah judul.
Anda juga dapat membuat halaman pengujian sendiri yang menyertakan playground lanjutan dengan menggunakan paket dev-tools Blockly.
Beberapa taman bermain
Multi playground berisi beberapa playground dalam konfigurasi yang berbeda
untuk mode LTR dan lokasi toolbox. Hal ini terutama digunakan untuk memeriksa dengan cepat
bahwa Blockly tidak merusak apa pun yang terkait dengan LTR sebelum rilis. Guna membuka
playground ini, ikuti langkah-langkah untuk playground sederhana, lalu ubah
URL menjadi /tests/multi_playground.html.
Perubahan pengujian
Saat menjalankan playground dari server lokal, yang perlu Anda lakukan untuk
melihat perubahan di Blockly dalam sebagian besar kasus adalah memuat ulang halaman. Jika telah menambahkan
file baru atau menambahkan dependensi baru ke file, Anda mungkin perlu menjalankan npm run
build terlebih dahulu yang akan mengupdate file test/deps.js untuk memastikan dependensi
dimuat dengan benar, lalu memuat ulang halaman.
Jika menjalankan playground lanjutan plugin, Anda bahkan tidak perlu memuat ulang halaman. Perubahan dimuat secara otomatis.
Mengakses playground secara langsung
Sebelumnya, playground sederhana diakses secara lokal dengan langsung membuka
file test/playground.html di browser Anda. Hal ini masih dapat dilakukan dengan
playground yang sederhana dan multi, tetapi tidak lagi direkomendasikan. Jika Anda melakukannya, playground akan mendeteksi bahwa Anda tidak menjalankan server lokal dan
akan otomatis menggunakan file Blockly yang dikompresi (lihat
halaman Build Blockly untuk mengetahui
info selengkapnya) dan setiap kali mengubah sesuatu di core Blockly, Anda harus
mem-build ulang core dan mentahap perubahan. Anda tetap dapat mengakses halaman ini jika dihosting di server jarak jauh, seperti contoh yang dihosting pada situs demo kami. Latar
belakang akan berwarna biru terang setiap kali Anda berada dalam mode terkompresi.
Playground lanjutan tidak tersedia melalui akses file:.