Saat melakukan peretasan di inti Blockly atau mengembangkan plugin, playground adalah alat yang sangat berguna. Layanan ini memiliki instance Blockly yang telah dikonfigurasi sebelumnya dan dapat digunakan 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 Blockly inti: 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 memuat dari server web lokal.
Kita 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 dalam codebase-nya yang mungkin tidak kompatibel dengan Internet Explorer. Dalam kode yang dikompresi (dikompilasi), fitur ini ditranspile agar berfungsi dengan IE, tetapi memuat 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 dalam upaya untuk memastikan kompatibilitas. Lihat bagian "Mengakses playground secara langsung" untuk mengetahui detail selengkapnya tentang pengujian perubahan di playground dalam mode terkompresi.
Playground Sederhana
Playground sederhana adalah dasar dari dua playground lainnya. Aplikasi ini menampilkan toolbox dan ruang kerja, serta memungkinkan Anda menyesuaikan setelan dalam jumlah terbatas.
Untuk membuka tempat bermain, jalankan
npm run start
dari root Blockly. Pastikan tidak ada yang memproses di port 8080. Perintah ini akan memulai server yang menghosting modul Blockly dan otomatis membuka browser Anda ke halaman playground. Jika Anda sudah siap untuk menonaktifkan playground, akhiri proses (ctrl-c di lingkungan Mac dan Linux).
Taman bermain ini memiliki:
- Semua kode tidak dikompresi untuk pengembangan yang cepat.
- Semua blok default (kecuali beberapa blok 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 toolbox.
- Pengujian stres untuk perender.
- Catat semua peristiwa di konsol.
Taman bermain lanjutan
Playground lanjutan berisi fitur tambahan untuk mempermudah proses debug Blockly. Ini juga merupakan playground default yang digunakan di contoh blockly untuk semua plugin.
Taman bermain ini memiliki semua fitur taman bermain sederhana, ditambah:
- 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 lagi.
- Lihat output setiap generator di jendela yang sama.
Untuk memulai playground lanjutan bagi plugin apa pun di blockly-samples, jalankan npm run
start dari direktori root plugin. Saat ini, hanya satu plugin yang dapat berjalan sekaligus, dan menggunakan port 3000. Jika Anda kesulitan memulai plugin,
pastikan tidak ada hal lain yang diproses di 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 alat developer Blockly.
Multi-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. Untuk membuka
playground ini, ikuti langkah-langkah untuk playground sederhana, lalu ubah
URL menjadi /tests/multi_playground.html.
Menguji perubahan
Saat menjalankan salah satu 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 harus 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 memungkinkan dengan
playground yang sederhana dan multi, tetapi tidak lagi direkomendasikan. Jika Anda melakukannya,
playground akan mendeteksi bahwa Anda tidak menjalankan server lokal dan
otomatis menggunakan file Blockly yang dikompresi (lihat
halaman Mem-build Blockly untuk mengetahui informasi
selengkapnya) dan setiap kali Anda mengubah sesuatu di core Blockly, Anda harus
mem-build ulang core dan melakukan staging perubahan. Anda tetap dapat mengakses halaman ini jika dihosting
di server jarak jauh, seperti contoh yang dihosting di situs demo kami. Latar belakang
akan berwarna biru cerah setiap kali Anda berada dalam mode terkompresi.
Playground lanjutan tidak tersedia melalui akses file:.