Blockly Developer Tools
adalah alat developer berbasis web yang mengotomatiskan bagian-bagian proses konfigurasi Blockly, termasuk membuat blok kustom, membangun toolbox,
dan mengonfigurasi ruang kerja Blockly web Anda.
Proses developer Blockly menggunakan alat ini terdiri dari tiga bagian:
- Buat blok kustom menggunakan Block Factory dan Block Exporter.
- Buat toolbox dan ruang kerja default menggunakan Factory Workspace.
- Konfigurasikan ruang kerja Anda menggunakan Workspace Factory (saat ini merupakan fitur khusus web).
Blokir Tab Pabrik
Tab Block Factory membantu Anda membuat definisi blok dan generator kode blok untuk blok kustom. Pada tab ini, Anda dapat dengan mudah membuat, mengubah, dan menyimpan blok kustom.
Menentukan blok
Video ini memberikan langkah-langkah untuk mendefinisikan blok secara detail. UI sudah usang, tetapi fitur blok yang disoroti masih akurat.
Mengelola library
Blok dirujuk oleh namanya, jadi setiap blok yang ingin Anda buat harus memiliki nama yang unik. UI memberlakukan hal ini dan memperjelas kapan Anda 'menyimpan' blok baru atau 'memperbarui' blok yang sudah ada.
Anda dapat beralih antarblok yang telah disimpan sebelumnya atau membuat blok kosong baru dengan mengklik tombol Library. Mengubah nama blok yang ada adalah cara lain untuk membuat beberapa blok dengan cepat dengan definisi serupa.
Mengekspor dan mengimpor library
Pemblokiran disimpan ke penyimpanan lokal browser. Menghapus penyimpanan lokal browser akan menghapus blok Anda. Untuk menyimpan blok tanpa batas waktu, Anda harus mendownload library. Library Block Anda didownload sebagai file XML yang dapat diimpor untuk menyetel Library Block Anda ke status saat Anda mendownload file. Perlu diperhatikan bahwa mengimpor Library Pemblokiran akan menggantikan library saat ini, jadi Anda mungkin ingin mengekspornya terlebih dahulu.
Fitur impor dan ekspor juga merupakan cara yang direkomendasikan untuk mengelola dan berbagi kumpulan elemen penyusun kustom yang berbeda.
Blokir tab Pengekspor
Setelah mendesain blok, Anda perlu mengekspor definisi blok dan stub generator untuk menggunakannya dalam aplikasi. Hal ini dilakukan di tab Block Exporter.
Setiap blok yang disimpan di Library Block Anda akan ditampilkan dalam Block Selector. Klik pada blok untuk memilih atau membatalkan pilihan untuk ekspor. Jika ingin memilih semua blok dalam library Anda, gunakan opsi “Select” → “All Stored In Block Library”. Jika Anda membuat toolbox atau mengonfigurasi ruang kerja Anda menggunakan tab Pabrik Workspace, Anda juga dapat memilih semua blok yang digunakan dengan mengklik “Pilih” → “Semua yang Digunakan di Pabrik Workspace”.
Setelan ekspor memungkinkan Anda memilih bahasa yang dihasilkan yang ingin ditargetkan dan apakah Anda menginginkan definisi, stub generator, atau keduanya untuk blok yang dipilih. Setelah memilihnya, klik 'Export' untuk mendownload file Anda.
Tab Factory Workspace
Pabrik Workspace memudahkan konfigurasi toolbox dan kumpulan blok default di ruang kerja. Anda dapat beralih antara mengedit {i>toolbox<i} dan ruang kerja awal dengan tombol "Toolbox" dan "Ruang kerja".
Membuat kotak peralatan
Tab ini membantu mem-build XML untuk Toolbox. Materi ini mengasumsikan Anda telah memahami fitur-fitur Toolbox. Jika sudah memiliki XML untuk toolbox yang ingin diedit di sini, Anda dapat memuatnya dengan mengklik "Load to Edit".
Toolbox tanpa kategori
Jika Anda memiliki beberapa blok dan ingin menampilkannya tanpa kategori apa pun, cukup tarik blok tersebut ke ruang kerja, dan Anda akan melihat blok tersebut muncul di toolbox di pratinjau.
Toolbox dengan kategori
Jika Anda ingin menampilkan blok dalam kategori, klik tombol “+” dan pilih item dropdown untuk kategori baru. Tindakan ini akan menambahkan kategori ke daftar kategori yang dapat Anda pilih dan edit. Pilih “Standard category” untuk menambahkan masing-masing kategori Blockly standar (Logic, Loops, dll.), atau “Toolbox Standar” untuk menambahkan semua kategori Blockly standar. Gunakan tombol panah untuk menyusun ulang kategori.
Untuk mengubah nama atau warna kategori yang dipilih, gunakan menu dropdown "Edit Kategori". Menarik blok ke ruang kerja akan menambahkannya ke kategori yang dipilih.
Blok lanjutan
Secara default, Anda dapat menambahkan salah satu blok standar atau blok apa pun di library ke toolbox. Jika memiliki blok yang ditentukan dalam JSON yang tidak ada di library, Anda dapat mengimpornya menggunakan tombol "Impor Pemblokiran Kustom".
Beberapa blok harus digunakan bersama atau menyertakan default. Hal ini dilakukan dengan grup dan bayangan. Setiap blok yang terhubung di editor akan ditambahkan ke toolbox sebagai grup. Blok yang terpasang ke blok lain juga dapat diubah menjadi blok bayangan dengan memilih blok turunan dan mengklik tombol "Make Shadow". Catatan: Hanya blok turunan yang tidak berisi variabel yang dapat diubah menjadi blok bayangan.
Jika Anda menyertakan blok variabel atau fungsi dalam toolboxnya, sertakan kategori "Variabel" atau "Fungsi" dalam toolbox agar pengguna dapat memanfaatkan blok tersebut sepenuhnya. Pelajari kategori "Variabel" atau "Fungsi" lebih lanjut.
Mengonfigurasi ruang kerja (untuk Blockly web)
Untuk mengonfigurasi berbagai bagian ruang kerja Anda, buka tab "Factory Workspace", lalu pilih "Ruang kerja".
Pilih Opsi Ruang Kerja
Tetapkan nilai yang berbeda untuk opsi konfigurasi dan lihat hasilnya di area pratinjau. Mengaktifkan grid atau zoom akan menampilkan lebih banyak opsi untuk dikonfigurasi. Selain itu, peralihan ke kategori biasanya memerlukan ruang kerja yang lebih kompleks; tempat sampah dan scrollbar ditambahkan secara otomatis saat Anda menambahkan kategori pertama.
Menambahkan Blok yang Dimuat sebelumnya ke Ruang Kerja
Hal ini bersifat opsional, tetapi mungkin diperlukan jika Anda ingin menampilkan kumpulan blok di ruang kerja:
- Saat aplikasi dimuat.
- Saat sebuah peristiwa (melanjutkan level, mengklik tombol bantuan, dll.) dipicu.
Tarik blok ke ruang pengeditan untuk melihatnya di ruang kerja Anda dalam pratinjau. Anda dapat membuat grup blok, menonaktifkan blok, dan membuat blok bayangan tertentu saat memilihnya.
Anda dapat mengekspor blok tersebut sebagai XML (lihat di bawah). Tambahkan ke ruang kerja dengan Blockly.Xml.domToWorkspace, segera setelah Anda membuat ruang kerja:
var xmlText = '<xml xmlns="https://developers.google.com/blockly/xml">' +
'<block type="math_number"></block></xml>';
Blockly.Xml.domToWorkspace(Blockly.utils.xml.textToDom(xmlText), workspace);
Kode contoh ini menambahkan satu blok math_number ke ruang kerja.
Mengekspor
Workspace Factory memberi Anda opsi ekspor berikut:
- Kode Awal: Menghasilkan html dan JavaScript awal untuk memasukkan ruang kerja Blockly yang disesuaikan.
- Toolbox: Menghasilkan XML untuk menentukan toolbox Anda.
- Blok Workspace: Menghasilkan XML yang dapat dimuat ke ruang kerja.