Alat Developer Blockly

Blockly Developer Tools adalah alat developer berbasis web yang dapat membantu Anda membuat blok kustom dan menyertakannya dalam aplikasi.

Catatan: Dokumen ini membahas versi baru Blockly Developer Tools yang kompatibel dengan Blockly v10+. Jika Anda mencari alat lama, lihat dokumentasi lama.

Menentukan blok

Ruang kerja Blokir Pabrik 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 menetapkan teks tooltip, URL bantuan, warna, dan pemeriksaan koneksi untuk blok tersebut 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 dalam definisi kotak peralatan. 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 tersebut akan diperbarui secara otomatis. Kode yang harus Anda tambahkan ke aplikasi juga akan diperbarui secara otomatis.

Konfigurasi output

Blockly mendukung berbagai metode untuk menentukan blok dan memuat Blockly sendiri, serta memiliki beberapa bahasa generator 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 blok

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 mana yang harus 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 di JSON atau JavaScript. Format JSON lebih disarankan, tetapi jika akan menambahkan fitur lanjutan seperti mutator, Anda dapat menggunakan format JavaScript.

Bahasa generator kode

Blockly dikirim 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 menunjukkan kode yang harus Anda salin ke dalam 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 definisi dan generator kode blok, definisi blok sebelum mencoba menggunakannya di toolbox, dan generator kode blok sebelum 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 dengan cara menggunakan output kode, Anda mungkin tertarik dengan aplikasi contoh yang memiliki contoh blok kustom dan generator blok kode.

Header kode

Bagian Header Kode menampilkan kode yang Anda perlukan untuk memuat library Blockly inti dan generator bahasa yang 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 impor sendiri dan mungkin kode lain yang harus Anda jalankan untuk menginisialisasi kolom. Kode ini harus disertakan sebelum salah satu bagian kode berikut.

Blokir definisi

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 pada direktori blocks/. Jika Anda memiliki struktur aplikasi sendiri, pastikan untuk menyertakan kode ini sebelum mencoba mereferensikan blok berdasarkan nama, seperti dalam definisi toolbox. Apa pun itu, pastikan header kode ada dalam file tempat Anda menyertakan kode ini.

Potongan 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 dapat menggabungkan nilai-nilai ini ke dalam kode akhir yang akan dihasilkan.

Jika menggunakan aplikasi contoh, Anda dapat menyertakan kode ini dalam file pada 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 itu, pastikan header kode ada di file tempat Anda menyertakan kode ini.

Panduan video

Video ini akan menjelaskan langkah-langkah penentuan blok secara mendetail. UI-nya sudah usang, tetapi fitur blok yang ditandainya masih kurang akurat.

Blokir koleksi

Pemblokiran disimpan dalam penyimpanan lokal browser secara otomatis setiap kali Anda melakukan perubahan pada blok tersebut. Anda dapat membuat blok baru atau memuat blok yang ada dari penyimpanan lokal dengan mengklik tombol yang sesuai di toolbar atas.

Impor dari Block Factory yang 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:

1. Di Block Factory yang lama, klik tombol Export Block Library di toolbar. Ini akan mengunduh file dengan semua definisi blok Anda.

   

2. Di Block Factory yang baru, klik tombol Load block di toolbar.

3. Pilih opsi "Impor dari Blokir Pabrik" di menu.

   

4. Upload file yang Anda download pada Langkah 1.

5. Definisi blok Anda harus 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.

6. Jika terjadi error saat mengurai salah satu pemblokiran Anda, kami tidak akan dapat memuatnya. Anda dapat membantu kami dengan melaporkan bug terhadap sampel blockly dan menyertakan file yang tidak akan diurai.