Alat Developer Blockly adalah alat developer berbasis web yang dapat membantu Anda membuat blok kustom dan menyertakannya dalam aplikasi Anda.
Menentukan blok
Ruang kerja Block Factory akan dimulai dengan blok konfigurasi kosong. Anda dapat menambahkan input dan kolom ke blok dengan menarik blok dari kategori masing-masing di toolbox. Anda juga dapat menyetel 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, Anda harus mendesain blok secara terpisah dan menghubungkannya dalam definisi toolbox. Selain itu, blok dapat memiliki fitur lanjutan seperti pengubah, tetapi fitur lanjutan ini tidak dapat dibuat di Factory. Anda harus mengubah definisi blok sesuai dengan dokumentasi setelah Anda membuat bentuk dasar blok.
Saat Anda mengubah blok konfigurasi di ruang kerja, pratinjau untuk blok akan diperbarui secara otomatis. 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 pembuat kode bawaan. Cara Anda menentukan blok dan generator kode blok bergantung pada faktor-faktor ini, sehingga Anda dapat menyetelnya di Block Factory untuk mengubah output kode.
Format impor Blockly
Anda dapat memuat Blockly melalui tag <script> di HTML, atau menggunakan pernyataan import
jika Anda menggunakan alat build dengan aplikasi Anda. Pilihan ini memengaruhi cara Anda mereferensikan bagian tertentu dari Blockly API. Untuk mengetahui informasi selengkapnya tentang
cara memilihnya, lihat dokumentasi tentang memuat Blockly.
Apa pun metode yang Anda gunakan, pastikan untuk memilih pilihan yang sesuai di
Block Factory agar 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 mutator, Anda dapat menggunakan format JavaScript.
Bahasa pembuat kode
Blockly dilengkapi dengan beberapa bahasa pembuat kode. Pilih
bahasa yang diperlukan aplikasi Anda untuk menampilkan
stub generator kode blok yang sesuai. Jika menggunakan generator bahasa kustom, Anda dapat mengubah nama kelas CodeGenerator kustom setelah menyalin kode ke dalam aplikasi.
Output kode
Bagian berikutnya dari Block Factory menunjukkan kode yang perlu Anda salin ke dalam aplikasi untuk memuat blok yang telah Anda buat. Tempat Anda menyalin kode akan bergantung pada cara Anda menyusun aplikasi, tetapi secara umum Anda perlu menjalankan header kode sebelum definisi dan generator 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 belum 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; misalnya, beberapa kolom yang dapat Anda sertakan dalam blok berasal dari plugin Blockly. Plugin ini akan memiliki pernyataan impornya sendiri dan mungkin kode lain yang harus Anda jalankan untuk menginisialisasi kolom. Kode ini harus disertakan sebelum bagian kode berikut.
Definisi blok
Definisi blok adalah cara Anda memberi tahu Blockly bentuk blok Anda, 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 Anda mencoba mereferensikan blok berdasarkan nama, seperti
dalam definisi toolbox. Bagaimanapun juga, pastikan header kode ada dalam file tempat Anda menyertakan kode ini.
Stub generator
Generator kode blok adalah cara Anda mendeskripsikan kode yang harus dibuat untuk sebuah blok. Stub generator yang dibuat oleh Block Factory memberi Anda kode dasar untuk mendapatkan nilai input dan kolom yang ada di blok Anda. Anda yang akan 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 sendiri, pastikan untuk menyertakan kode ini sebelum mencoba membuat kode untuk ruang kerja yang menyertakan blok kustom Anda. Apa pun caranya, pastikan header kode ada dalam file tempat Anda menyertakan kode ini.
Panduan video
Video ini menjelaskan langkah-langkah mendefinisikan blok secara mendetail. UI sudah usang, tetapi fitur blok yang disorotinya masih kurang lebih akurat.
Koleksi 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 Anda 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 block" di 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 kini 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 mengajukan bug terhadap blockly-samples dan menyertakan file yang tidak dapat diuraikan.