Apa Itu Coding Blok? Cara Program Blok Menjadi Kode Asli

Coding blok adalah cara menyusun program dengan menumpuk blok warna-warni yang mirip kepingan puzzle, bukan mengetiknya baris demi baris. Setiap blok adalah satu perintah, misalnya “atur pin sebagai output”, “nyalakan LED”, atau “tunggu 100 ms”. Karena blok hanya bisa menyambung di tempat yang pas, kesalahan seperti lupa titik koma, kurung yang tidak ditutup, atau salah ketik perintah memang tidak mungkin terjadi, dan kamu bisa fokus pada logika program. Itulah sebabnya coding berbasis blok dianggap sebagai jalan masuk paling ramah ke dunia pemrograman bagi anak-anak dan pemula.

Tapi coding blok bukan bahasa mainan. Di balik setiap program blok yang dikirim ke Arduino atau Raspberry Pi Pico ada kode sungguhan, dan board selalu menjalankan kode itu. Di artikel ini kamu akan melihat apa itu blok, apa arti warnanya, dan bagaimana program blok berubah menjadi kode C++ atau MicroPython asli, langkah demi langkah, lewat proyek-proyek gratis di BlueGrays. Di bagian akhir kamu juga akan menemukan kelebihan dan batasan coding blok, serta bagaimana coding blok bisa dipakai bersama alat seperti Scratch, mBlock, dan Tinkercad.

Apa itu coding blok, dan kenapa disebut “blok”?

Dalam coding blok, setiap perintah adalah sebuah kepingan dengan lekukan dan tonjolan di tepinya. Tonjolan di bagian bawah satu blok masuk ke lekukan blok di bawahnya, sehingga perintah berjalan berurutan dari atas ke bawah. Beberapa blok punya “mulut” terbuka di dalamnya: ini adalah blok wadah yang menampung blok lain. Blok lainnya punya slot oval putih tempat kamu memasang angka atau blok nilai lain. Karena bentuk tiap kepingan menentukan apa yang bisa dipasang di mana, hampir mustahil menyusun program yang melanggar aturan. Sebagian besar editor blok sekarang mengikuti jalan yang dibuka oleh Scratch dari MIT dan library open source Blockly dari Google. Blok di BlueGrays juga berbasis Blockly; set bloknya kami rancang sendiri untuk proyek elektronika dan menampilkannya dalam bahasa aplikasi. Ingat, blok bukan bahasa pemrograman baru. Perintah, urutan, kondisi, perulangan, dan variabel adalah konsep yang persis sama dengan di kode teks; blok hanya membuatnya terlihat.

Bagaimana program blok berubah menjadi kode asli?

Editor blok memakai code generator di balik layar: setiap jenis blok punya template dalam kode teks, dan ketika blok disusun, template-template itu digabungkan secara berurutan. BlueGrays sedikit lebih ketat: blok setiap proyek dibuat agar cocok satu per satu dengan kode asli yang masuk ke board. Setiap baris di blok punya pasangan di kode, dan setiap baris kode punya pasangan di blok. Di proyek Arduino dan ESP32, kode itu adalah C++; di proyek Raspberry Pi Pico, MicroPython. Untuk membaca program blok, kamu cukup mengenal lima bagian ini:

• setup (jalan sekali): bagian yang hanya berjalan sekali ketika board menyala atau di-reset. Bagian ini sama dengan fungsi setup() di Arduino, dan biasanya di sinilah pin diatur sebagai INPUT atau OUTPUT.
• ulangi selamanya: bagian yang berjalan dari atas ke bawah berulang-ulang selama board menyala. Di Arduino ini adalah fungsi loop(), di MicroPython perulangan while True:.
• Blok perintah: blok seperti “tulis HIGH ke pin 9” atau “tunggu 100 ms” yang disusun di dalam blok wadah dan masing-masing mengerjakan satu tugas. Kebanyakan hanya satu baris di kode teks.
• Blok nilai: angka seperti 9 atau 100 di oval putih, dan blok bulat yang mengembalikan hasil, seperti “baca pin 13”. Blok ini dipasang di slot blok perintah dan menjadi nilai di dalam kurung di kode.
• Menu dropdown: pilihan seperti OUTPUT / INPUT atau HIGH / LOW. Pilihan ini sama dengan konstanta OUTPUT / INPUT dan HIGH / LOW di kode, dan karena menunya hanya menawarkan pilihan yang valid, tidak mungkin salah ketik.

Blok dan kode berdampingan: proyek LED Berkedip

Cukup teorinya, mari lihat contoh nyata. Di proyek LED Berkedip, sebuah LED dan resistor dihubungkan ke pin 9, dan LED berkedip lima kali per detik. Di tabel bawah ini kita menerjemahkan blok dari gambar di atas menjadi kode satu per satu. Setiap baris adalah satu blok, dan setiap blok adalah satu baris kode:

1void setup() {
2  pinMode(9,OUTPUT);     // LED pini çıkış / LED pin as output
3}
4
5void loop() {
6  digitalWrite(9,HIGH);  // LED'i yak / Turn the LED on
7  delay(100);            // 100 ms bekle (1000 ms = 1 sn) / Wait 100 ms (1000 ms = 1 s)
8  digitalWrite(9,LOW);   // LED'i söndür / Turn the LED off
9  delay(100);            // 100 ms bekle / Wait 100 ms
10}

Di kode ada beberapa hal yang tidak kamu lihat di blok: kata void, kurung kurawal, dan titik koma. Semua itu adalah aturan sintaks C++, dan di blok, bentuk kepingannya sendiri yang mengurusnya. Mulut blok wadah menggantikan kurung kurawal, dan blok yang tersusun satu di bawah yang lain menggantikan urutan baris. Kalau angka 100 di slot nilai kamu ganti menjadi 1000, kodenya akan bertuliskan delay(1000) dan LED akan berkedip sekali per detik. Kalau kamu memilih LOW alih-alih HIGH dari menu, HIGH di kode akan berubah menjadi LOW. Berkat kecocokan satu per satu ini, setelah beberapa proyek kamu mulai bisa membaca kode tanpa melihat bloknya. Rangkaian dan langkah perakitan proyek yang sama ada di bagian 2 seri ini: LED berkedip dengan coding blok.

Apa arti warna blok?

Di editor blok, warna bukan hiasan; warna menunjukkan dari kategori mana sebuah blok berasal. Ketika pertama kali melihat sebuah program, warna membantumu membacanya seperti “di sini variabel dideklarasikan, di sini ada keputusan, di sini ada perulangan”. Inilah kategori yang akan kamu lihat di gambar blok proyek-proyek BlueGrays:

Bentuk blok juga memberi petunjuk. Blok kondisi dan perbandingan punya ujung runcing mirip segi enam dan pas di slot kondisi blok “jika”, sedangkan blok angka dan variabel punya ujung bulat. Ada satu detail di tabel yang perlu diperhatikan: di blok “hitung dengan i dari 0 sampai 5 per 1”, batas atasnya ikut dihitung, jadi i berturut-turut bernilai 0, 1, 2, 3, 4, dan 5. Di kode, ini ditulis dengan kondisi i < 6, dan perulangannya berjalan enam kali. Proyek LED Berjalan menyalakan enam LED satu per satu dengan blok ini; blok perulangan dan array kami bahas lebih rinci di bagian perulangan dan variabel di coding blok dari seri ini.

Blok “jika” bersarang di gambar ini menjadi baris if bersarang di kode. Blok “jika button ≠ lastButton” adalah baris if (button != lastButton) dan berjalan ketika keadaan tombol berubah. Blok “jika button = 1” di dalamnya hanya menangkap momen tombol ditekan. Blok “atur ledState ke bukan ledState” adalah baris ledState = !ledState;, yang mengubah 0 menjadi 1 dan 1 menjadi 0. Blok “tulis ledState ke pin 7” sesudahnya adalah digitalWrite(7, ledState);. Kamu bisa melihat proyek lengkapnya di halaman Nyala/Mati LED dengan Tombol (On/Off); hubungan antara blok “jika” dan if/else kami uraikan di bagian blok jika (if) dengan tombol dari seri ini.

C++ di Arduino dan ESP32, MicroPython di Pico

Logika blok yang sama diterjemahkan ke bahasa yang berbeda di board yang berbeda. Di proyek Arduino dan ESP32, blok dipetakan ke kode C++, dan blok setup serta ulangi selamanya menjadi setup() dan loop(). Misalnya, blok proyek LED Berkedip dengan ESP32 punya struktur yang sama dengan LED Berkedip; hanya pinnya 5 dan jedanya 500 ms. Di proyek Raspberry Pi Pico, blok berubah menjadi MicroPython. Di sini tidak ada fungsi setup(): apa pun yang ada di dalam blok setup menjadi baris-baris yang berjalan sekali di bagian atas file, dan blok ulangi selamanya menjadi perulangan while True:.

1from machine import Pin
2import time
3
4# ============ PIN ============
5LED_PIN = 14                    # Boştaki herhangi bir GPIO / Any free GPIO
6led = Pin(LED_PIN, Pin.OUT)     # led adlı pin, ÇIKIŞ / pin named led, OUTPUT
7
8print("== BlueGrays: Pico Harici LED Blink ==")
9print("LED pin: GP" + str(LED_PIN))
10print("500ms yakip 500ms sonduruyor / 500ms on 500ms off")
11
12# ============ ANA DÖNGÜ / MAIN LOOP ============
13while True:
14    led.on()                    # LED'i yak / Turn the LED on
15    print("[LED] ACIK / ON")
16    time.sleep(0.5)             # 0.5 saniye bekle / Wait 0.5 s
17
18    led.off()                   # LED'i söndür / Turn the LED off
19    print("[LED] KAPALI / OFF")
20    time.sleep(0.5)             # 0.5 saniye bekle / Wait 0.5 s

Kamu bisa mengikuti kecocokannya baris demi baris. Blok “deklarasikan bilangan bulat (int) LED_PIN = 14” di dalam “variabel global (paling atas)” adalah baris LED_PIN = 14; karena Python tidak menuliskan tipe data, bagian (int) tidak muncul di kode. Blok “pin led : GP LED_PIN, OUTPUT” menjadi led = Pin(LED_PIN, Pin.OUT). “nyalakan (on) pin led” adalah led.on(), “tunggu 0.5 detik” adalah time.sleep(0.5), dan “cetak serial” adalah baris print(). Blok “gabungkan teks” menempatkan teks “LED pin: GP” dan nilai LED_PIN berdampingan dengan +. Perhatikan: di Arduino, jeda ditulis dalam milidetik (100 ms), di MicroPython dalam detik (0.5), dan blok menunjukkan perbedaan ini dengan blok terpisah “tunggu … ms” dan “tunggu … detik”. Untuk rangkaiannya, lihat halaman LED eksternal Raspberry Pi Pico; kalau kamu baru mengenal Pico, membaca Apa Itu Raspberry Pi Pico? lebih dulu akan memudahkanmu.

Kelebihan dan batasan coding blok

Coding blok bukan jawaban untuk segalanya; coding blok adalah jembatan. Di minggu-minggu pertama, ini cara yang sangat ampuh untuk memahami logika program, dan tujuan sebenarnya adalah suatu hari menyeberangi jembatan itu dan melihat kode teks dengan percaya diri. Melihat blok dan kode berdampingan mempercepat perpindahan itu, karena di setiap proyek baru kamu melihat blok yang sama berubah menjadi baris yang sama berulang kali. Setelah bertemu blok “ulangi selamanya” di sepuluh proyek, kata loop() tidak akan terasa asing lagi. Kalau kamu sudah siap untuk kode teks, dasar pemrograman Arduino mengajakmu menelusuri semuanya, dari variabel sampai fungsi, lengkap dengan contoh.

Untuk siapa coding blok?

• Anak-anak dan keluarga: anak usia 9-10 tahun ke atas yang sudah lancar membaca bisa mulai bersama orang dewasa. Dengan blok di layar dan LED yang menyala di breadboard, coding tidak lagi terasa abstrak.
• Guru dan klub robotika: menjelaskan sebuah proyek dengan blok dulu, lalu pindah ke kodenya, mempertemukan level yang berbeda dalam satu pelajaran. Rencana pelajaran yang kami siapkan untuk ini ada di bagian terakhir seri: rencana pelajaran coding blok untuk kelas robotika.
• Pemula Arduino: kalau kamu baru saja punya board dan sketch pertama terlihat membingungkan, blok adalah cara tercepat untuk melihat fungsi setiap baris. Untuk mengenal board-nya sendiri, mulailah dengan Apa Itu Arduino?
• Siapa pun yang kesulitan membaca kode: memahami program yang ditulis orang lain adalah keterampilan tersendiri. Melihat blok dari proyek siap pakai untuk memahami strukturnya membuatmu lebih mudah melihat bagian mana dari kode yang panjang melakukan apa.

Perbandingan dengan Scratch, mBlock, Tinkercad, dan MakeCode

Sebagian besar alat yang terlintas ketika bicara coding blok adalah editor yang berjalan di komputer atau browser, dan masing-masing unggul di bidangnya sendiri. Kesamaannya: kamu menyeret blok dan menyusun programmu sendiri. BlueGrays menjawab kebutuhan yang berbeda: aplikasi ini menampilkan blok dari proyek siap pakai yang sudah diuji, berdampingan dengan skema rangkaian, daftar komponen, dan kode aslinya. Untuk sekarang, kamu belum bisa menyusun blokmu sendiri menjadi program di aplikasi; sebagai gantinya, kamu membaca bagaimana program yang sudah terbukti berjalan itu disusun. Karena itu alat-alat ini tidak bersaing, tapi saling melengkapi. Misalnya, kamu bisa membandingkan urutan lampu lalu lintas yang kamu buat di mBlock dengan blok proyek Lampu Lalu Lintas, dan kalau belum punya board, simulasikan rangkaiannya di Tinkercad. Untuk detailnya, lihat panduan mBlock dengan Arduino dan simulasi Arduino di Tinkercad.

Cara memakai coding blok di aplikasi BlueGrays

1. Pilih proyek yang punya lencana Blok di Jelajah › Proyek. Kamu juga bisa memakai filter supaya hanya proyek dengan blok yang tampil. Lebih dari 100 proyek di aplikasi punya versi blok, sebagian besar proyek Arduino dan sisanya proyek ESP32 dan Raspberry Pi Pico.
2. Di bagian kode proyek, nyalakan sakelar Tampilkan sebagai blok. Blok dari program yang sama menggantikan kodenya; ketuk gambarnya untuk membukanya layar penuh dan memperbesarnya dengan nyaman.
3. Pindah ke tab Pahami blok. Programnya dijelaskan langkah demi langkah: setiap langkah hanya menampilkan blok untuk langkah itu beserta fungsinya.
4. Kalau penasaran apa fungsi sebuah perintah, buka Panduan kode. Setiap contoh di sana ditampilkan dalam bentuk blok, juga dengan perintah Arduino dan MicroPython.
5. Matikan sakelarnya untuk kembali ke kode asli. Salin kodenya, tempel ke Arduino IDE (Thonny untuk Pico), lalu upload ke board-mu.
6. Perkuat apa yang sudah kamu pelajari dengan Soal harian: 5 soal setiap hari dengan level dari A1 sampai C2, peringkat mingguan, dan lencana.

Blok dan kode dari 31 proyek sepenuhnya gratis; di proyek lain, bloknya terbuka dengan Premium, sama seperti kodenya. Beberapa proyek gratis yang cocok untuk langkah pertama: LED Berkedip, Dua LED Berkedip Bergantian, Lampu Lalu Lintas, LED Berjalan, LED Berkedip dengan ESP32, dan Kedip LED Bawaan Raspberry Pi Pico. Semua proyek dengan blok bisa kamu lihat per platform di halaman coding blok, dan di sana kamu juga bisa membandingkan blok dan kode sebuah proyek contoh secara berdampingan.

Seri Dari Blok ke Kode: peta jalan

1. Apa itu coding blok dan bagaimana program blok menjadi kode asli (artikel ini)
2. Program pertama: LED berkedip dengan coding blok, blok dan C++ berdampingan
3. Tombol dan kondisi: blok jika (if) dan if/else
4. Perulangan dan variabel: ulangi selamanya, hitung, array, dan penghitung
5. Membaca sensor dengan blok, port serial, dan MicroPython di Pico
6. Untuk guru: rencana pelajaran coding blok untuk robotika

Di bagian berikutnya seri ini, kita membangun proyek LED Berkedip dari artikel ini dari awal, dengan rangkaian, blok, dan kode C++ berdampingan, di LED berkedip dengan coding blok. Sementara itu, kamu bisa membuka proyek-proyek yang disebut di sini di aplikasi BlueGrays lengkap dengan skema rangkaian dan kodenya, lalu dengan satu ketukan beralih ke versi blok dari program yang sama lewat Tampilkan sebagai blok atau ke penjelasan langkah demi langkah lewat Pahami blok.