Pengantar aplikasi Blockly

Aplikasi Blockly adalah aplikasi web yang berisi editor Blockly (ruang kerja). Dokumen ini memberikan contoh penggunaan aplikasi Blockly dan melihat fitur UI umum.

Jika Anda belum melakukannya, pastikan untuk membaca glosarium visual dan langkah-langkah dasar aplikasi sebelum melanjutkan dengan dokumen ini.

Apa fungsi aplikasi Blockly?

Aplikasi Blockly membantu pengguna menulis program di berbagai bidang, mulai dari video game hingga robotika hingga analisis data. Pengguna menulis program menggunakan blok, yang digunakan aplikasi untuk membuat kode berbasis teks, seperti JavaScript atau Python. Kemudian, aplikasi menjalankan kode yang dihasilkan secara langsung atau pengguna mendownload dan menjalankannya di platform lain, seperti robot atau pengontrol video game genggam.

Berikut beberapa contoh jenis program yang ditulis pengguna dengan aplikasi Blockly:

  • Solusi teka-teki, animasi, atau musik: Kode yang dihasilkan memecahkan teka-teki (seperti labirin), menampilkan animasi, atau memutar musik. Sebagai contoh, lihat Music Lab dari Code.org.

  • Video game: Kode yang dihasilkan menjalankan video game. Misalnya, buat dua level pertama "Whack the Mole" di MakeCode Arcade dan download game ke pengontrol atau mainkan di simulator.

  • Robotik: Kode yang dihasilkan mengarahkan robot. Misalnya, memprogram robot dengan Ozoblockly dan mendownloadnya ke robot sungguhan atau menjalankannya di simulator.

  • Menggambar: Kode yang dihasilkan menggambar gambar 2D atau 3D. Sebagai contoh, lihat BlocksCAD.

  • Analisis data: Kode yang dihasilkan menganalisis data dan membuat grafik. Untuk contoh, lihat demonstrasi Platform Dialogic ini.

  • Kode spesifik per aplikasi: Kode yang dihasilkan melakukan tugas spesifik untuk aplikasi tertentu. Misalnya, Alat Developer Blockly adalah alat untuk mendesain blok Blockly baru. Generator ini membuat kode definisi blok, yang dapat disalin dan ditempelkan pengguna ke dalam aplikasi Blockly mereka sendiri.

Antarmuka pengguna

Cara yang baik untuk memahami komponen umum aplikasi Blockly adalah dengan melihat antarmuka penggunanya.

Komponen UI dasar

Hampir semua aplikasi Blockly memiliki beberapa komponen dasar: editor Blockly (ruang kerja), panel output, dan tombol "Jalankan". Misalnya, berikut adalah UI Maze di Blockly Games.

UI aplikasi labirin dengan editor, panel output, dan tombol Jalankan.

Beberapa aplikasi Blockly menghilangkan tombol "Jalankan" dan memperbarui panel output setiap kali pengguna membuat perubahan. Misalnya, aplikasi Graph dalam contoh Blockly memiliki dua panel output (satu untuk grafik dan satu untuk persamaan) yang diperbarui pada setiap perubahan.

UI aplikasi grafik dengan editor, panel output untuk persamaan yang dibuat oleh pengguna, dan panel output untuk grafik persamaan tersebut.

Beberapa aplikasi tidak memiliki panel output. Hal ini paling umum dalam aplikasi hardware, seperti aplikasi untuk memprogram robot. Meskipun beberapa aplikasi ini menyertakan simulator hardware, banyak di antaranya hanya memungkinkan pengguna mendownload dan menjalankan kode yang dihasilkan langsung di perangkat target.

Komponen UI tambahan

Sebagian besar aplikasi memiliki komponen UI tambahan. Beberapa di antaranya memenuhi kebutuhan umum, seperti menyimpan pekerjaan pengguna, sementara yang lain memenuhi kebutuhan khusus aplikasi, seperti mendesain GUI. Berikut beberapa contohnya:

  • Scratch, aplikasi untuk membuat animasi dan video game, memiliki editor grafis dan suara; panel untuk membuat sprite dan latar belakang baru; serta menu file, edit, dan setelan:

    Antarmuka pengguna Scratch.

  • MakeCode Arcade, sebuah aplikasi untuk membuat video game, memiliki kontrol output, editor kode dan grafis, menu setelan, serta tombol download dan simpan. Panel outputnya menyimulasikan pengontrol game genggam.

    Antarmuka pengguna MakeCode Arcade.

  • MIT App Inventor, aplikasi untuk membuat aplikasi ponsel, memiliki layar terpisah untuk desainer GUI dan editor Blockly, serta menu file, koneksi, build, dan setelan. Alih-alih panel output, pengguna menguji kode yang dihasilkan di ponsel mereka.

    Desainer GUI di antarmuka pengguna App Inventor Editor Blockly di antarmuka pengguna App Inventor

Komponen tambahan yang harus Anda sertakan bergantung pada tujuan aplikasi dan kemampuan pengguna Anda. Beberapa komponen umum adalah:

  • Administrasi:

    • Pengelolaan file (baru, buka, simpan, simpan sebagai, hapus)
    • Pengelolaan akun (membuat, login, logout)
    • Setelan (bahasa, konfigurasi UI)

  • Pemrograman:

    • Mengedit perintah (urungkan, ulangi, salin, potong, tempel, duplikasikan)
    • Desainer GUI
    • Editor grafis dan suara
    • Editor kode atau tampilan kode hanya baca

  • Pengujian

    • Konfigurasi output (mulai/berhenti, kecepatan pemutaran, volume, screenshot, dll.)
    • Debugger (titik henti sementara, jalankan, langkah, penyorotan blok)
    • Menetapkan parameter pengujian

  • Hardware

    • Koneksi (USB, Bluetooth, kode QR)
    • Konfigurasi (pilih model, pilih aksesori, tetapkan nama komponen)
    • Kontrol (mengontrol robot secara manual, merekam posisi robot)
    • Mendownload kode

  • Bantuan

    • Dokumentasi
    • Tutorial interaktif
    • Bantuan yang peka terhadap konteks

Apa langkah selanjutnya?

Jika Anda masih memikirkan aplikasi, lanjutkan membaca tentang pertimbangan desain.

Jika Anda ingin melihat cara membuat aplikasi sederhana, coba codelab Memulai Blockly.

Dan jika Anda siap menulis aplikasi: