Cara termudah untuk memasukkan Blockly ke halaman web adalah dengan memasukkannya ke dalam tag 'div' kosong.
1. Mendapatkan kode
Dapatkan kode dengan cara apa pun yang paling sesuai untuk aplikasi Anda.
2. Menentukan area
Tambahkan div kosong di suatu tempat dalam isi halaman dan tetapkan ukurannya:
<div id="blocklyDiv" style="height: 480px; width: 600px;"></div>
3. Memasukkan ruang kerja
Menentukan struktur kotak alat:
const toolbox = {
"kind": "flyoutToolbox",
"contents": [
{
"kind": "block",
"type": "controls_if"
},
{
"kind": "block",
"type": "controls_repeat_ext"
},
{
"kind": "block",
"type": "logic_compare"
},
{
"kind": "block",
"type": "math_number"
},
{
"kind": "block",
"type": "math_arithmetic"
},
{
"kind": "block",
"type": "text"
},
{
"kind": "block",
"type": "text_print"
},
]
}
Terakhir, panggil kode berikut untuk memasukkan Blockly ke dalam div yang Anda tentukan.
const workspace = Blockly.inject('blocklyDiv', {toolbox: toolbox});
Variabel workspace saat ini tidak digunakan, tetapi akan menjadi penting nanti saat seseorang ingin menyimpan blok atau membuat kode.
Jika lebih dari satu instance Blockly dimasukkan ke halaman yang sama, pastikan
setiap ruang kerja yang ditampilkan disimpan dalam variabel yang berbeda.
Sekarang Anda dapat menguji halaman di browser. Anda akan melihat editor Blockly mengisi div, dengan tujuh blok di toolbox. Berikut adalah demo langsung.