Materi Blockly

 Pengertian Blockly: 

   Blockly adalah editor pemrograman visual dari Google Developers yang memungkinkan pengguna membuat program dengan cara menggabungkan balok-balok (blok) kode melalui metode drag-and-drop.

Apa Itu Blockly?

• Editor Pemrograman Visual: Blockly menyediakan antarmuka grafis dengan blok-blok kode yang dapat disambung-sambung untuk membentuk program. 

• Berbasis Blok (Block-Based): Pengguna tidak perlu mengetik kode secara manual, melainkan menyusun blok-blok visual seperti menyusun puzzle. 

• Pembuat Program Berbasis Teks: Blok-blok yang disusun oleh pengguna dapat diubah menjadi kode dalam bahasa pemrograman standar seperti JavaScript, Python, dan PHP. 

 

Fungsi Blockly: 

   Alat ini berfungsi untuk pendidikan coding karena dapat menghasilkan kode dalam berbagai bahasa seperti JavaScript, Python, dan PHP, serta cocok untuk proyek dunia nyata dan pendidikan di semua kalangan. Selain itu, ada Blockly Games sebagai platform interaktif untuk memperkenalkan konsep pemrograman dasar kepada pemula.

Jenis-jenis blok utama di Blockly berdasarkan fungsinya:

1. Blok Nilai (Value Blocks)

• Fungsi: Blok ini berfungsi seperti ekspresi dalam bahasa pemrograman berbasis teks, menghasilkan nilai atau data yang dapat digunakan oleh blok lain. 

• Contoh: Blok yang melakukan operasi matematika (penjumlahan, pengurangan), blok yang mengambil nilai dari sebuah variabel, atau blok yang menghasilkan angka dan teks.

 

2. Blok Pernyataan (Statement Blocks)

• Fungsi: Blok ini menjalankan tindakan atau serangkaian perintah, mirip dengan pernyataan dalam bahasa pemrograman teks. 

• Contoh: 

  1). Blok Kontrol: Mengontrol alur eksekusi, seperti loop (misalnya, blok for each) atau kondisional (misalnya, blok if-else). 

 2). Blok Aksi: Melakukan tindakan tertentu, seperti menggambar garis atau menggerakkan lengan robot. 

3. Blok Prosedur (Procedure Blocks) 

• Fungsi: Digunakan untuk mendefinisikan dan memanggil prosedur (fungsi) yang dapat digunakan kembali di berbagai bagian program.

• Karakteristik: Mirip dengan blok pernyataan karena menjalankan serangkaian tindakan. 

• contoh: blok "define" (untuk mendefinisikan prosedur baru) dan blok "call" (untuk memanggil atau menjalankan prosedur yang sudah didefinisikan).

4. Blok Variabel (Variable Blocks) 

• Fungsi: Memungkinkan pengguna untuk mendeklarasikan, mengatur nilai, dan mengambil nilai variabel yang digunakan dalam program.

• Karakteristik: Dapat berupa blok "getter" untuk mengambil nilai variabel atau blok "setter" untuk mengubah nilainya

Blockly juga memiliki beberapa ikon bawaan yang memiliki fungsi khusus, seperti:

  1). Ikon Komentar: Untuk menambahkan komentar teks pada blok atau ruang kerja. 

Ikon Peringatan: Untuk menunjukkan adanya masalah atau potensi kesalahan dalam blok. 

  2). Ikon Pengubah: Mengacu pada bagian ikon yang bisa diubah, biasanya untuk mengakses fungsi mutator pada blok.

Fitur-fitur Blockly:

• Antarmuka Berbasis Blok Visual: Pengguna dapat membuat program dengan menyeret dan melepaskan blok grafis yang saling terkait, tanpa perlu khawatir tentang sintaks pemrograman teks. 

• Pembuatan Kode Otomatis: Saat blok disusun, Blockly secara otomatis mengubahnya menjadi kode berbasis teks seperti JavaScript atau Python. 

• Fleksibilitas Domain: Dapat digunakan untuk berbagai aplikasi, mulai dari video game dan robotika hingga analisis data.

Cara Kerja Blockly:

 1). Visualisasi Kode: Blockly menggunakan editor berbasis blok yang menyajikan konsep pemrograman (seperti variabel, logika, dan perulangan) sebagai balok-balok yang bisa disatukan. 

 2). Penggunaan Ruang Kerja: Pengguna menyusun balok-balok ini di ruang kerja untuk membuat program yang berurutan. Balok yang lebih tinggi dalam tumpukan dieksekusi terlebih dahulu. 

 3). Pembaruan dan Rendering:

• Antrean (Queueing): Setiap kali balok diubah (misalnya, nilai diubah atau balok disambungkan/diputuskan), perubahan tersebut dimasukkan ke dalam antrean. 

• Pengumpulan (Batching): Perubahan ini dikelompokkan ke dalam kumpulan blok yang perlu dirender ulang. 

• request Animation Frame : Sistem kemudian meminta browser untuk memanggil fungsi callback sebelum frame saat ini digambar, memastikan pembaruan terjadi secara efisien. 

• Rendering Hirarkis: Dalam callback, setiap blok dalam kumpulan dirender dari balok daun ke balok induknya, memastikan balok anak memiliki informasi ukuran yang akurat sebelum balok induk dirender. 

 4). Ekspor Kode: Setelah program selesai, ruang kerja dapat diekspor menjadi kode yang dapat dijalankan. 

 5). Dukungan Berbagai Bahasa: Kode ini dapat dieksekusi di sisi klien (misalnya, JavaScript) atau di sisi server dalam bahasa pemrograman apa pun. 

 6). Kustomisasi: Pengembang dapat menyesuaikan Blockly untuk aplikasi mereka dengan membuat balok kustom yang sesuai dengan kebutuhan spesifik.

Manfaat Blockly:

   adalah memudahkan pengajaran dan pembelajaran konsep pemrograman bagi pemula dengan menyediakan antarmuka pemrograman visual berbasis blok yang intuitif, memungkinkan pengguna untuk belajar logika, algoritma, dan sintaks kode tanpa perlu menghafal bahasa pemrograman teks yang kompleks. Selain itu, Blockly juga meningkatkan motivasi belajar, kreativitas, dan kemampuan pemecahan masalah pada siswa melalui pendekatan interaktif dan permainan yang menarik.

Contoh dari permainan Blockly: