Blockly Developer Tools adalah alat developer berbasis web yang mengotomatiskan bagian konfigurasi Blockly , termasuk membuat blok kustom, membangun kotak peralatan, dan mengonfigurasi ruang kerja Blockly web Anda.
Proses developer Blockly yang menggunakan alat ini terdiri dari tiga bagian:
- Buat elemen penyusun kustom menggunakan Block Factory dan Block Exporter.
- Buat toolbox dan ruang kerja default menggunakan Workspace Factory.
- Mengonfigurasi ruang kerja Anda menggunakan Workspace Factory (saat ini platform khusus web ).
Blokir Tab Pabrik
Tab {i>Block Factory<i} membantu Anda membuat definisi blok dan generator kode blok untuk elemen penyusun kustom. Pada tab ini Anda dapat dengan mudah membuat, memodifikasi, dan menyimpan elemen penyusun kustom.
Menentukan blok
Video ini akan menjelaskan langkah-langkah penentuan blok secara mendetail. UI tidak digunakan tanggal, tetapi fitur blok yang ditonjolkan masih akurat.
Mengelola library
Blok direferensikan oleh namanya, jadi setiap blok yang ingin Anda buat harus memiliki nama yang unik. UI memberlakukan ini dan memperjelas saat Anda 'menyimpan' blok baru atau 'memperbarui' dalam blok yang ada.
Anda dapat beralih di antara blok yang telah disimpan sebelumnya atau membuat blok kosong baru blokir dengan mengeklik tombol {i>Library<i}. Mengubah nama blok yang ada adalah cara lain untuk membuat beberapa blok dengan definisi yang serupa secara cepat.
Mengekspor dan mengimpor library
Pemblokiran disimpan ke penyimpanan lokal browser. Mengosongkan lokal browser akan menghapus blok Anda. Untuk menyimpan blok tanpa batas waktu, Anda harus mendownload koleksi Anda. Block Library Anda didownload sebagai XML yang dapat diimpor untuk menyetel Blokir Library Anda ke keadaan saat Anda mengunduh file. Perhatikan bahwa mengimpor Block Library akan menggantikan saat ini, jadi Anda mungkin ingin mengekspor terlebih dahulu.
Fitur impor dan ekspor juga merupakan cara yang direkomendasikan untuk mengelola dan membagikan kumpulan elemen penyusun kustom yang berbeda.
Blokir tab Pengekspor
Setelah merancang blok, Anda perlu mengekspor definisi blok dan stub generator untuk digunakan dalam aplikasi. Hal ini dilakukan di Blokir tab Pengekspor.
Setiap blok yang disimpan di Block Library akan ditampilkan di Block Selector. Klik blok tersebut untuk memilih atau membatalkan pilihan untuk mengekspor. Jika Anda ingin memilih semua blok di koleksi Anda, gunakan “Select” → “All Stored In Block {i>library<i}”. Jika Anda membuat {i>toolbox<i} atau mengonfigurasi ruang kerja Anda menggunakan tab Pabrik Workspace Pabrik, Anda juga dapat memilih semua blok yang digunakan oleh mengklik “Select” → “All Using Workspace Factory”.
Setelan ekspor memungkinkan Anda memilih bahasa buatan yang ingin ditargetkan dan apakah Anda ingin definisi, stub generator, atau keduanya untuk pemblokiran yang dipilih. Setelah Anda memilih opsi ini, klik 'Ekspor' untuk mendownload .
Tab Pabrik Workspace
Pabrik Workspace memudahkan konfigurasi toolbox dan default satu set blok di ruang kerja. Anda dapat beralih antara mengedit {i>toolbox<i} dan memulai {i>workspace<i} dengan {i>Toolbox<i} dan "Ruang Kerja" tombol.
Membuat {i>toolbox<i}
Tab ini membantu membangun XML untuk Toolbox. Materi ini mengasumsikan pengetahuan tentang fitur Toolbox. Jika sudah memiliki XML untuk toolbox yang ingin Anda edit di sini, Anda dapat muat dengan mengklik "Load to Edit".
Toolbox tanpa kategori
Jika Anda memiliki beberapa blok dan ingin menampilkannya tanpa kategori apa pun, cukup tarik ke ruang kerja, dan Anda akan melihat blok muncul di toolbox dalam pratinjau.
Toolbox dengan kategori
Jika Anda ingin blok tampilan dalam kategori, klik tombol “+” dan pilih untuk kategori baru. Tindakan ini akan menambahkan kategori ke daftar kategori Anda yang dapat Anda pilih dan edit. Pilih “Kategori Standar” untuk menambahkan masing-masing kategori Blockly standar (Logic, Loops, dll.), atau “Standard Toolbox” untuk menambahkan semua kategori Blockly standar. Gunakan tombol panah untuk menyusun ulang kategori.
Untuk mengubah nama atau warna kategori yang dipilih, gunakan “Edit Kategori” {i>dropdown<i}. Menarik blok ke ruang kerja akan menambahkannya ke ruang kerja yang dipilih kategori.
Pemblokiran lanjutan
Secara default, Anda dapat menambahkan blok standar atau blok apa pun di library ke {i>toolbox<i}. Jika Anda memiliki blok yang ditentukan dalam JSON yang tidak ada di library Anda, Anda dapat mengimpornya menggunakan perintah "Impor Blok Kustom" tombol.
Beberapa blok sebaiknya digunakan bersama atau menyertakan default. Hal ini dilakukan dengan kelompok dan bayangan. Apa saja blok yang terhubung di editor akan ditambahkan ke {i>toolbox<i} sebagai sebuah grup. Blok yang dilampirkan ke balok lain juga bisa diubah menjadi balok bayangan dengan memilih blok turunan dan mengklik "Make Shadow" tombol. Catatan: Hanya blok turunan yang tidak berisi variabel yang dapat diubah menjadi shadow blok.
Jika Anda menyertakan variabel atau blok fungsi dalam {i>toolbox<i} mereka, sertakan Kategori "Variabel" atau "Fungsi" di kotak peralatan Anda untuk memungkinkan pengguna memanfaatkan blok tersebut. Pelajari selengkapnya tentang "Variabel" atau "Fungsi" kategori.
Mengonfigurasi ruang kerja (untuk web Blockly)
Untuk mengonfigurasi berbagai bagian ruang kerja Anda, buka "Pabrik Workspace" dan pilih "Ruang Kerja".
Pilih Opsi Workspace
Tetapkan nilai yang berbeda untuk opsi konfigurasi dan melihat hasilnya di area pratinjau. Mengaktifkan grid atau zoom menampilkan lebih banyak opsi untuk dikonfigurasi. Beralih ke menggunakan kategori biasanya juga memerlukan proses workspace; tempat sampah dan bilah gulir akan ditambahkan secara otomatis saat Anda menambahkan kategori pertama.
Menambahkan Blok bawaan ke Ruang Kerja
Ini opsional tetapi mungkin diperlukan jika Anda ingin menampilkan kumpulan blok dalam ruang kerja:
- Saat aplikasi dimuat.
- Saat peristiwa (menaikkan level, mengklik tombol bantuan, dll.) dipicu.
Tarik blok ke ruang pengeditan untuk melihatnya di ruang kerja Anda dalam pratinjau. Kamu bisa membuat grup blok, menonaktifkan blok, dan membuat blok tertentu menjadi bayangan memblokir ketika Anda memilihnya.
Anda dapat mengekspor blok ini sebagai XML (lihat di bawah). Tambahkan mereka ke ruang kerja Anda dengan
Blockly.Xml.domToWorkspace
, tepat 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 file kustom Anda Ruang kerja blok.
- Toolbox: Menghasilkan XML untuk menetapkan toolbox Anda.
- Blok Ruang Kerja: Menghasilkan XML yang dapat dimuat ke ruang kerja.