Blockly Developer Tools adalah alat developer berbasis web yang dapat membantu Anda membuat blok kustom dan menyertakannya dalam aplikasi.
Menentukan blok
Ruang kerja Block Factory akan dimulai dengan blok konfigurasi kosong. Anda dapat menambahkan input dan kolom ke blok dengan menarik blok dari masing-masing kategori di toolbox. Anda juga dapat menetapkan teks tooltip, URL bantuan, warna, dan pemeriksaan koneksi untuk blok dengan mengubah blok konfigurasi.
Block Factory hanya dapat membuat satu jenis blok dalam satu waktu. Jika ingin mendesain beberapa blok yang terhubung bersama, Anda harus mendesain blok secara terpisah dan menghubungkannya di definisi toolbox. Selain itu, blok dapat memiliki fitur lanjutan seperti mutator, tetapi fitur lanjutan ini tidak dapat dibuat di Factory. Anda harus mengubah definisi blok sesuai dengan dokumentasi setelah membuat bentuk dasar blok.
Saat Anda mengubah blok konfigurasi di ruang kerja, pratinjau untuk blok akan otomatis diperbarui. Kode yang perlu Anda tambahkan ke aplikasi juga akan diperbarui secara otomatis.
Konfigurasi output
Blockly mendukung berbagai metode untuk menentukan blok dan memuat Blockly itu sendiri, serta memiliki beberapa bahasa generator kode bawaan. Cara Anda menentukan blok dan generator kode blok bergantung pada faktor-faktor ini, sehingga Anda dapat menetapkannya di Block Factory untuk mengubah output kode.
Format impor Blockly
Anda dapat memuat Blockly melalui tag <script> di HTML, atau menggunakan pernyataan
import jika menggunakan alat build dengan aplikasi Anda. Pilihan ini memengaruhi
cara Anda mereferensikan bagian tertentu dari Blockly API. Untuk mengetahui informasi selengkapnya tentang
blok yang akan dipilih, lihat dokumentasi tentang memuat Blockly.
Apa pun metode yang Anda gunakan, pastikan untuk memilih pilihan yang sesuai di
Block Factory sehingga kode yang akan Anda tambahkan ke aplikasi akurat untuk
aplikasi Anda.
Format definisi blok
Blockly mendukung penentuan blok dalam JSON atau JavaScript. Format JSON lebih disukai, tetapi jika Anda akan menambahkan fitur lanjutan seperti pengubah, Anda dapat menggunakan format JavaScript.
Bahasa pembuat kode
Blockly dilengkapi dengan beberapa bahasa generator kode. Pilih
bahasa yang diperlukan aplikasi Anda untuk menampilkan stub generator kode blok
yang sesuai. Jika menggunakan generator bahasa kustom, Anda dapat
mengubah nama class CodeGenerator kustom setelah menyalin kode
ke aplikasi.
Output kode
Bagian berikutnya dari Block Factory akan menampilkan kode yang perlu Anda salin ke aplikasi untuk memuat blok yang telah Anda buat. Tempat Anda menyalin kode akan bergantung pada cara Anda menyusun aplikasi, tetapi umumnya Anda harus menjalankan header kode sebelum generator definisi dan kode blok, definisi blok sebelum Anda mencoba menggunakannya di toolbox, dan generator kode blok sebelum Anda mencoba membuat kode untuk ruang kerja. Untuk setiap bagian, Anda dapat menggunakan tombol salin untuk menyalin seluruh blok kode untuk bagian tersebut.
Jika masih tidak yakin cara menggunakan output kode, Anda mungkin tertarik dengan aplikasi contoh yang memiliki contoh blok kustom dan generator kode blok.
Header kode
Bagian Header Kode menampilkan kode yang Anda perlukan untuk memuat library Blockly inti dan generator bahasa yang telah Anda pilih. Mungkin ada konfigurasi lain di sini juga; misalnya, beberapa kolom yang mungkin Anda sertakan dalam blok berasal dari plugin Blockly. Plugin ini akan memiliki pernyataan impornya sendiri dan mungkin kode lain yang harus Anda jalankan untuk melakukan inisialisasi kolom. Kode ini harus disertakan sebelum bagian kode berikut.
Definisi blok
Definisi blok adalah cara Anda memberi tahu Blockly bentuk
blok, seperti kolom dan input yang dimilikinya, warna, dan lainnya. Setelah
Anda menjalankan kode ini, Blockly akan mengetahui cara membuat blok hanya berdasarkan
type-nya.
Jika menggunakan aplikasi contoh, Anda dapat menyertakan kode ini dalam
file di direktori blocks/. Jika Anda memiliki struktur aplikasi sendiri,
pastikan untuk menyertakan kode ini sebelum mencoba mereferensikan blok menurut namanya, seperti
dalam definisi toolbox. Apa pun yang Anda pilih, pastikan header kode ada
dalam file tempat Anda menyertakan kode ini.
Stub generator
Generator kode blok adalah cara Anda mendeskripsikan kode yang harus dihasilkan untuk blok. Stub generator yang dibuat oleh Block Factory memberi Anda kode dasar untuk mendapatkan nilai input dan kolom yang ada di blok Anda. Anda dapat menggabungkan nilai-nilai ini ke dalam kode akhir yang akan dihasilkan.
Jika menggunakan aplikasi contoh, Anda dapat menyertakan kode ini dalam
file di direktori generators/. Jika Anda memiliki struktur aplikasi
Anda sendiri, pastikan untuk menyertakan kode ini sebelum mencoba membuat kode untuk
ruang kerja yang menyertakan blok kustom Anda. Apa pun yang Anda pilih, pastikan header kode ada dalam file tempat Anda menyertakan kode ini.
Panduan video
Video ini menjelaskan langkah-langkah menentukan blok secara mendetail. UI-nya sudah tidak aktual, tetapi fitur blok yang ditandainya masih kurang lebih akurat.
Library blok
Blok disimpan di penyimpanan lokal browser secara otomatis setiap kali Anda membuat perubahan pada blok. Anda dapat membuat blok baru atau memuat blok yang ada dari penyimpanan lokal dengan mengklik tombol yang sesuai di toolbar atas.
Mengimpor dari Block Factory lama
Jika telah menggunakan Block Factory lama dan ingin memigrasikan definisi blok yang ada ke alat baru, Anda dapat melakukannya dengan mengikuti langkah-langkah berikut:
Di Block Factory lama, klik tombol
Export Block Librarydi toolbar. Tindakan ini akan mendownload file dengan semua definisi blok Anda.
Di Block Factory baru, klik tombol
Load blockdi toolbar.Pilih opsi "Impor dari Block Factory" di menu.
Upload file yang Anda download di Langkah 1.
Definisi blok Anda akan otomatis dikonversi ke format baru dan sekarang akan tersedia dari menu
Load block. Blok mungkin telah diganti namanya jika ada konflik dengan blok yang ada.Jika ada error saat mengurai blok Anda, kami tidak akan dapat memuatnya. Anda dapat membantu kami dengan melaporkan bug terhadap blockly-samples dan menyertakan file yang tidak akan diuraikan.