Selama bertahun-tahun, tim Blockly dan Blockly Games telah mempelajari banyak pelajaran yang berlaku untuk mereka yang mengembangkan blok baru. Berikut adalah kumpulan kesalahan yang telah kami buat, atau kesalahan yang biasa dilakukan oleh orang lain.
Ini adalah pelajaran umum yang telah kita pelajari menggunakan gaya visual Blockly dan mungkin tidak berlaku untuk semua kasus penggunaan atau desain. Ada solusi lain. Daftar ini juga bukan daftar lengkap masalah yang mungkin dialami pengguna dan cara menghindarinya. Setiap kasus sedikit berbeda dan memiliki konsekuensinya sendiri.
1. Kondisional vs. Loop
Blok yang paling sulit bagi pengguna baru adalah kondisional dan loop. Banyak lingkungan berbasis blok mengelompokkan kedua blok ini ke dalam kategori 'Kontrol' yang sama, dengan kedua blok memiliki bentuk dan warna yang sama. Hal ini sering menyebabkan frustrasi karena pengguna baru salah memahami kedua blok tersebut. Blockly merekomendasikan pemindahan kondisional dan loop ke kategori 'Logic' dan 'Loops' yang terpisah, masing-masing dengan warna yang berbeda. Hal ini memperjelas bahwa ini adalah beberapa ide berbeda yang berperilaku berbeda, meskipun memiliki bentuk yang serupa.
Rekomendasi: Pisahkan kondisional dan loop.
2. Daftar Berbasis Satu
Programmer pemula bereaksi buruk saat mereka menemukan daftar berbasis nol untuk pertama kalinya. Hasilnya, Blockly mengikuti pemimpin Lua dan Lambda Moo dengan membuat pengindeksan daftar dan string berbasis satu.
Untuk penggunaan Blockly yang lebih canggih, daftar berbasis nol didukung untuk mempermudah transisi ke teks. Untuk audiens yang lebih muda atau baru, pengindeksan berbasis satu masih direkomendasikan.
Rekomendasi: Satu adalah angka pertama.
3. Input pengguna
Ada tiga cara untuk mendapatkan parameter dari pengguna. Dropdown adalah yang paling ketat dan bagus untuk tutorial dan latihan sederhana. Kolom input memungkinkan lebih banyak kebebasan dan cocok untuk lebih banyak aktivitas kreatif. Input blok nilai (biasanya dengan blok bayangan) menawarkan peluang untuk menghitung nilai (mis. generator acak), bukan hanya menjadi nilai statis.
Rekomendasi: Pilih metode input yang sesuai untuk pengguna Anda.
4. Gambar pemblokiran live
Dokumentasi untuk blok harus menyertakan gambar blok yang dirujuknya. Mengambil screenshot itu mudah. Namun, jika ada 50 gambar tersebut, dan aplikasi diterjemahkan ke dalam 50 bahasa,tiba-tiba salah satunya mempertahankan 2.500 gambar statis. Kemudian skema warna akan berubah, dan 2.500 gambar perlu diperbarui lagi.
Untuk mengekstraksi diri dari mimpi buruknya pemeliharaan ini, Blockly Games mengganti semua screenshot dengan instance Blockly yang berjalan dalam mode hanya baca. Hasilnya terlihat identik dengan gambar, tetapi dijamin merupakan yang terbaru. Mode hanya baca telah memungkinkan internasionalisasi.
Rekomendasi: Jika Anda mendukung lebih dari satu bahasa, gunakan mode hanya baca.
5. Satu lagi Kiri
Masukan dari anak-anak di AS (meskipun menariknya bukan dari negara lain) mengungkapkan kebingungan yang lazim antara kiri dan kanan. Masalah ini diatasi dengan penambahan panah. Jika arah bersifat relatif (misalnya, terhadap avatar), gaya panah itu penting. Panah lurus → atau panah belokan ↱ membingungkan saat avatar menghadap ke arah yang berlawanan. Yang paling membantu adalah panah melingkar ⟳, bahkan ketika sudut berubah lebih kecil daripada yang ditunjukkan panah.
Rekomendasi: Lengkapi teks dengan ikon Unicode jika memungkinkan.
6. Blok Tingkat Tinggi
Jika memungkinkan, pendekatan tingkat yang lebih tinggi harus diambil, meskipun mengurangi performa atau fleksibilitas eksekusi. Pertimbangkan ekspresi Apps Script ini:
SpreadsheetApp.getActiveSheet().getDataRange().getValues()
Dalam pemetaan 1:1 yang mempertahankan semua potensi kemampuan, ekspresi di atas akan dibuat menggunakan empat blok. Namun, Blockly bertujuan untuk level yang lebih tinggi dan akan menyediakan satu blok yang mengenkapsulasi seluruh ekspresi. Tujuannya adalah mengoptimalkan kasus 95%, meskipun membuat 5% sisanya lebih sulit. Blockly tidak dimaksudkan untuk menjadi pengganti bahasa berbasis teks, tetapi dimaksudkan untuk membantu pengguna mengatasi kurva pembelajaran awal sehingga mereka dapat menggunakan bahasa berbasis teks.
Rekomendasi: Jangan secara asal-asalan mengonversi seluruh API menjadi blok.
7. Nilai Pengembalian Opsional
Banyak fungsi dalam pemrograman berbasis teks menjalankan tindakan, kemudian menampilkan
nilai. Nilai yang ditampilkan ini dapat digunakan atau tidak. Contohnya adalah fungsi
pop() stack. Pop mungkin dipanggil untuk mendapatkan dan menghapus elemen terakhir,
atau mungkin dipanggil untuk menghapus elemen terakhir saja dengan nilai yang ditampilkan
diabaikan.
var last = stack.pop(); // Get and remove last element. stack.pop(); // Just remove last element.
Bahasa berbasis blok umumnya tidak baik dalam mengabaikan nilai hasil. Blok nilai harus dicolokkan ke sesuatu yang menerima nilai. Ada beberapa strategi untuk mengatasi masalah ini.
a) Kendalikan masalah. Sebagian besar bahasa berbasis blok mendesain bahasa untuk menghindari kasus ini. Misalnya, Scratch tidak memiliki blok yang memiliki efek samping dan nilai yang ditampilkan.
b) Menyediakan dua blok. Jika ruang di toolbox tidak menjadi masalah, solusi sederhananya adalah dengan menyediakan dua jenis blok masing-masing, satu dengan dan satu tanpa nilai hasil. Kelemahannya adalah, hal ini dapat menyebabkan kotak peralatan yang membingungkan dengan banyak blok yang hampir identik.
c) Mutasi satu blok. Gunakan dropdown, kotak centang, atau kontrol lain yang memungkinkan pengguna memilih apakah ada nilai yang ditampilkan atau tidak. Blok tersebut kemudian berubah bentuk tergantung pada opsinya. Contohnya dapat dilihat di blok akses daftar Blockly.
d) Makan nilainya. Versi pertama App Penemuan membuat blok pipe khusus yang memakan nilai apa pun yang terhubung. Pengguna tidak memahami konsepnya, dan versi kedua App inventor menghapus blok pipe dan sebagai gantinya merekomendasikan agar pengguna menetapkan nilai ke variabel throwaway.
Rekomendasi: Setiap strategi memiliki kelebihan dan kekurangan, pilih strategi yang tepat untuk pengguna Anda.
8. Blok yang terus bertambah
Blok tertentu mungkin memerlukan sejumlah variabel input. Contohnya adalah blok tambahan yang menjumlahkan kumpulan angka arbitrer, atau blok if/elseif/else dengan kumpulan klausa elseif arbitrer, atau konstruktor daftar dengan jumlah arbitrer elemen yang diinisialisasi. Ada beberapa strategi, masing-masing memiliki kelebihan dan kekurangannya masing-masing.
a) Pendekatan paling sederhana adalah membuat pengguna membuat blok dari blok yang lebih kecil. Contohnya adalah menambahkan tiga angka, dengan menyarangkan dua blok penambahan dua angka. Contoh lainnya adalah hanya menyediakan blok if/else, dan membuat pengguna menyarangkannya untuk membuat kondisi elseif.
Keuntungan dari pendekatan ini adalah kemudahan awalnya (bagi pengguna dan developer). Kelemahannya adalah jika ada banyak tingkat, kode menjadi sangat rumit dan sulit bagi pengguna untuk dibaca dan dikelola.
b) Alternatifnya adalah memperluas blok secara dinamis sehingga selalu ada satu input gratis di akhir. Demikian pula, blok akan menghapus input terakhir jika ada dua input gratis di bagian akhir. Ini adalah pendekatan yang digunakan oleh App inventor versi pertama.
Blok yang tumbuh secara otomatis tidak disukai oleh pengguna App inventor karena beberapa alasan. Pertama, selalu ada input gratis dan program tidak pernah 'selesai'. Kedua, menyisipkan elemen di tengah tumpukan membuat Anda frustrasi karena memutuskan semua elemen di bawah edit dan menghubungkan kembali elemen tersebut. Meskipun demikian, jika urutan tidak penting, dan pengguna merasa nyaman dengan adanya lubang dalam program mereka, ini adalah opsi yang sangat nyaman.
c) Untuk mengatasi masalah lubang, beberapa developer menambahkan tombol +/- untuk memblokir yang menambahkan atau menghapus input secara manual. Open Roberta menggunakan dua tombol seperti itu untuk menambah atau menghapus {i>input<i} dari bawah. Developer lain menambahkan dua tombol di setiap baris sehingga penyisipan dan penghapusan dari bagian tengah tumpukan dapat diakomodasi. Yang lainnya menambahkan dua tombol atas/bawah di setiap baris sehingga penyusunan ulang tumpukan dapat diakomodasi.
Strategi ini adalah spektrum opsi yang berkisar dari hanya dua tombol per blok, hingga empat tombol per baris. Di salah satu sisi terdapat bahaya bahwa pengguna tidak dapat melakukan tindakan yang mereka butuhkan, di sisi lain UI penuh dengan tombol sehingga terlihat seperti jembatan kapal ruang angkasa Enterprise.
d) Pendekatan yang paling fleksibel adalah menambahkan balon mutator ke blok. Tombol ini direpresentasikan sebagai satu tombol yang membuka dialog konfigurasi untuk blok tersebut. Elemen dapat ditambahkan, dihapus, atau disusun ulang sesuai keinginan.
Kekurangan dari pendekatan ini adalah mutatornya tidak intuitif bagi pengguna baru. Memperkenalkan mutator memerlukan beberapa bentuk petunjuk. Aplikasi berbasis blockly yang menargetkan anak-anak di bawah umur tidak boleh menggunakan mutator. Meski begitu dipelajari, audiens ini sangat berharga bagi pengguna super.
Rekomendasi: Setiap strategi memiliki kelebihan dan kekurangan, pilih strategi yang tepat untuk pengguna Anda.
9. Pembuatan Kode Bersih
Pengguna Blockly tingkat lanjut harus dapat melihat kode yang dihasilkan (JavaScript, Python, PHP, Lua, Dart, dll.) dan langsung mengenali program yang mereka tulis. Ini berarti perlu upaya ekstra untuk menjaga agar kode yang dibuat mesin ini tetap dapat dibaca. Tanda kurung berlebihan, variabel numerik, spasi kosong yang digabungkan, dan template kode panjang semuanya menghalangi pembuatan kode yang elegan. Kode yang dihasilkan harus menyertakan komentar dan harus sesuai dengan panduan gaya Google.
Rekomendasi: Berbanggalah dengan kode yang Anda buat. Tampilkan kepada pengguna.
10. Ketergantungan Bahasa
Efek samping dari keinginan akan kode yang bersih adalah perilaku Blockly banyak ditentukan dalam hal perilaku bahasa yang dikompilasi silang. Bahasa output yang paling umum adalah JavaScript, tetapi jika Blockly mengompilasi silang ke bahasa lain, tidak boleh ada upaya tidak wajar yang harus dilakukan untuk mempertahankan perilaku yang tepat di kedua bahasa tersebut. Contohnya, dalam JavaScript, string kosong bernilai salah (false), sedangkan di Lua nilainya adalah benar (true). Menentukan satu pola perilaku untuk dijalankan oleh kode Blockly terlepas dari bahasa target akan menghasilkan kode yang tidak dapat dikelola dan seolah-olah berasal dari compiler GWT.
Rekomendasi: Blockly bukanlah bahasa. Izinkan bahasa yang ada untuk memengaruhi perilaku.