Blockly Developer Tools
adalah alat developer berbasis web yang mengotomatiskan bagian dari proses konfigurasi Blockly, termasuk membuat blok kustom, membuat toolbox,
dan mengonfigurasi ruang kerja Blockly.
Proses developer Blockly yang menggunakan alat ini terdiri dari tiga bagian:
- Buat blok kustom menggunakan Block Factory dan Block Exporter.
- Buat toolbox dan ruang kerja default menggunakan Workspace Factory.
- Konfigurasikan ruang kerja Anda menggunakan Workspace Factory (saat ini merupakan fitur khusus web).
Tab Blokir Pabrik
Tab Block Factory membantu Anda membuat definisi blok dan generator kode blok untuk blok kustom. Di tab ini, Anda dapat dengan mudah membuat, mengubah, dan menyimpan blok kustom.
Menentukan blok
Video ini menjelaskan langkah-langkah menentukan blok secara mendetail. UI-nya sudah usang, tetapi fitur blok yang ditandainya masih akurat.
Mengelola library
Blok dirujuk berdasarkan namanya, sehingga setiap blok yang ingin Anda buat harus memiliki nama unik. UI menerapkan hal ini dan membuatnya jelas saat Anda 'menyimpan' blok baru atau 'memperbarui' blok yang ada.
Anda dapat beralih antarblok yang sebelumnya telah disimpan 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 yang serupa.
Mengekspor dan mengimpor library
Blok disimpan ke penyimpanan lokal browser. Menghapus penyimpanan lokal browser akan menghapus pemblokiran Anda. Untuk menyimpan blok tanpa batas waktu, Anda harus mendownload library. Library Blok Anda didownload sebagai file XML yang dapat diimpor untuk menetapkan Library Blok ke status saat Anda mendownload file. Perhatikan bahwa mengimpor Library Blok akan menggantikan library saat ini, jadi sebaiknya ekspor terlebih dahulu.
Fitur impor dan ekspor juga merupakan cara yang direkomendasikan untuk mengelola dan membagikan berbagai kumpulan blok kustom.
Tab Block Exporter
Setelah mendesain blok, Anda harus mengekspor definisi blok dan stub generator untuk menggunakannya di aplikasi. Hal ini dilakukan di tab Block Exporter.
Setiap blok yang disimpan di Pustaka Blok Anda akan ditampilkan di Pemilih Blok. Klik blok untuk memilih atau membatalkan pilihannya untuk diekspor. Jika Anda ingin memilih semua blok di library, gunakan opsi "Select" → "All Stored In Block Library". Jika membuat toolbox atau mengonfigurasi ruang kerja menggunakan tab Workspace Factory, Anda juga dapat memilih semua blok yang digunakan dengan mengklik "Select" → "All Used In Workspace Factory".
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 'Ekspor' untuk mendownload file.
Tab Workspace Factory
Workspace Factory memudahkan konfigurasi toolbox dan kumpulan blok default di ruang kerja. Anda dapat beralih antara mengedit toolbox dan memulai ruang kerja dengan tombol "Toolbox" dan "Workspace".
Membuat toolbox
Tab ini membantu mem-build XML untuk Toolbox. Materi ini mengasumsikan pemahaman tentang 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, cukup tarik ke ruang kerja, dan Anda akan melihat blok muncul di toolbox dalam 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 "Kategori Standar" untuk menambahkan setiap kategori Blockly standar (Logika, Loop, 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 dropdown "Edit Kategori". Menarik blok ke ruang kerja akan menambahkannya ke kategori yang dipilih.
Blok lanjutan
Secara default, Anda dapat menambahkan blok standar atau blok apa pun di library ke kotak alat. Jika memiliki blok yang ditentukan dalam JSON yang tidak ada di library, Anda dapat mengimpornya menggunakan tombol "Import Custom Blocks".
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 dilampirkan ke blok lain juga dapat diubah menjadi blok bayangan dengan memilih blok turunan dan mengklik tombol "Buat Bayangan". Catatan: Hanya blok turunan yang tidak berisi variabel yang dapat diubah menjadi blok bayangan.
Jika Anda menyertakan blok variabel atau fungsi di toolbox, sertakan kategori "Variabel" atau "Fungsi" di toolbox Anda agar pengguna dapat sepenuhnya menggunakan blok tersebut. Pelajari lebih lanjut kategori"Variabel" atau "Fungsi".
Mengonfigurasi ruang kerja
Untuk mengonfigurasi berbagai bagian ruang kerja, buka tab "Workspace Factory", lalu pilih "Workspace".
Memilih Opsi Ruang Kerja
Tetapkan nilai yang berbeda untuk opsi konfigurasi dan lihat hasilnya di area pratinjau. Mengaktifkan petak atau zoom akan menampilkan lebih banyak opsi untuk dikonfigurasi. Selain itu, beralih untuk menggunakan 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
Ini bersifat opsional, tetapi mungkin diperlukan jika Anda ingin menampilkan kumpulan blok di ruang kerja:
- Saat aplikasi dimuat.
- Saat peristiwa (meningkatkan 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 tertentu menjadi blok bayangan saat memilihnya.
Anda dapat mengekspor blok ini sebagai XML (lihat di bawah). Tambahkan ke ruang kerja Anda 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.
- Workspace Blocks: Menghasilkan XML yang dapat dimuat ke dalam ruang kerja.