Kelas 8 · Coding Ekskul

Bikin aplikasi HP sendiri, tanpa nulis kode satu baris pun

Thunkable adalah tempat kamu menyusun aplikasi seperti menyusun balok — tinggal seret, tempel, dan aplikasimu langsung bisa dicoba di HP.

when Button1.Click
set Label1.Text
"Halo, dunia!"
play Sound1
▶ Coba di HP
BAGIAN 1

Apa itu Thunkable?

Bayangkan seperti bermain balok LEGO

Di Thunkable, kamu tidak mengetik kode seperti print("halo"). Kamu tinggal menyeret balok perintah (disebut block) dan menyusunnya jadi satu, persis seperti menyusun balok LEGO jadi sebuah bangunan.

1

Tanpa kode rumitThunkable pakai sistem "drag and drop" — mirip Scratch, tapi hasil akhirnya aplikasi HP sungguhan.

2

Langsung dicoba di HPAda aplikasi "Thunkable Live" — begitu kamu ubah sesuatu di komputer, tampilannya langsung berubah di HP kamu.

3

Dua bagian utamaTab Design untuk menata tampilan (tombol, teks, gambar), dan tab Blocks untuk mengatur apa yang terjadi saat tombol ditekan.

4

Gratis dan lewat browserCukup buka thunkable.com pakai Chrome, tidak perlu install program berat.

BAGIAN 2

Yuk, mulai buka Thunkable

Ikuti urutan ini sebelum masuk ke praktik. Kerjakan sendiri-sendiri dulu di komputer masing-masing.

Buka thunkable.com

Gunakan browser Chrome, lalu klik tombol Sign Up di pojok kanan atas. Bisa daftar pakai akun Google sekolah.

Buat proyek baru

Setelah masuk ke Dashboard, klik Create App, pilih Blank App, lalu beri nama proyekmu, misalnya "LatihanPertama".

Tip: pakai nama tanpa spasi supaya tidak error, contoh AplikasiKu1.

Kenali tab Design

Di sebelah kiri ada daftar Components (tombol, label, gambar) yang bisa diseret ke layar HP di tengah. Di kanan ada pengaturan properti komponen yang sedang dipilih.

Kenali tab Blocks

Klik tab Blocks di pojok kanan atas. Di sini kamu menyusun balok perintah untuk komponen yang sudah kamu buat di tab Design.

Pasang Thunkable Live di HP

Unduh aplikasi Thunkable Live dari Play Store, lalu scan kode QR yang muncul di halaman proyekmu untuk melihat aplikasimu berjalan langsung.

BAGIAN 3 · PRAKTIK BERSAMA

Latihan pertama: Aplikasi "Halo, Sapaan!"

Sebelum mengerjakan proyek kelompok, buat dulu aplikasi kecil ini bersama-sama supaya paham cara kerja Design dan Blocks.

Tambah komponen Label

Di tab Design, seret komponen Label dari daftar Components ke bagian atas layar HP. Ganti isi teksnya menjadi "Siapa namamu?" lewat kotak Text di panel kanan.

Tambah komponen TextInput

Seret komponen TextInput ke bawah Label tadi. Ini kotak tempat pengguna mengetik nama mereka.

Tambah komponen Button

Seret komponen Button di bawah TextInput. Ganti tulisannya menjadi "Sapa Aku".

Tambah satu Label lagi untuk hasil

Seret satu Label lagi di paling bawah, kosongkan teksnya. Label ini nanti menampilkan sapaan.

Pindah ke tab Blocks

Klik komponen Button1 di daftar sebelah kiri, lalu seret balok when Button1.Click ke area kerja.

Susun balok di dalamnya

Klik Label2, seret balok set Label2.Text to masukkan ke dalam balok Click tadi. Lalu klik komponen Text (bawaan blocks) untuk balok join, gabungkan tulisan "Halo, " dengan TextInput1.Text.

Tip: cari balok join di kategori Text untuk menggabungkan dua tulisan jadi satu.

Uji coba di HP

Buka Thunkable Live, ketik namamu di kotak, tekan tombol "Sapa Aku", lalu lihat tulisan sapaan muncul di layar.

BAGIAN 4 · TUGAS KELOMPOK

5 proyek sederhana untuk 5 kelompok

Setiap kelompok memilih satu proyek. Semua bisa dibuat memakai komponen dan balok yang sudah kamu pelajari di latihan tadi.

Kelompok 1

Aplikasi Ucapan Ulang Tahun

Pengguna mengetik nama temannya, lalu aplikasi menampilkan ucapan ulang tahun otomatis.

Komponen: Label, TextInput, ButtonBalok: join, set Text
  1. Buat Label "Masukkan nama teman", TextInput, Button "Buat Ucapan", dan Label kosong untuk hasil.
  2. Di tab Blocks, buat when Button1.Click.
  3. Di dalamnya, set Label2.Text to join "Selamat Ulang Tahun, " + TextInput1.Text + "! Semoga bahagia selalu 🎉".
  4. Coba di HP dengan beberapa nama berbeda.
  5. Tantangan tambahan: ganti warna Label hasil jadi warna cerah agar terlihat meriah.
Kelompok 2

Aplikasi Kalkulator Penjumlahan

Pengguna memasukkan dua angka, aplikasi menampilkan hasil penjumlahannya.

Komponen: 2 TextInput, Label, ButtonBalok: + (math), set Text
  1. Buat dua TextInput (angka pertama dan kedua), Button "Hitung", dan Label untuk hasil.
  2. Ubah properti kedua TextInput menjadi tipe Number di panel kanan.
  3. Di Blocks, buat when Button1.Click lalu set Label1.Text to balok math +.
  4. Isi kedua sisi balok + dengan TextInput1.Text dan TextInput2.Text.
  5. Tantangan tambahan: tambahkan tombol lain untuk pengurangan atau perkalian.
Kelompok 3

Aplikasi Tebak Angka

Aplikasi memilih angka acak 1–10, lalu memberi tahu apakah tebakan pengguna benar atau salah.

Komponen: TextInput, Button, 2 LabelBalok: random, if/else
  1. Buat Label judul, TextInput untuk tebakan, Button "Cek Jawaban", Label untuk hasil.
  2. Di Blocks, buat variabel bernama angkaRahasia lalu isi dengan balok random integer from 1 to 10 saat when Screen1.Opens.
  3. Buat when Button1.Click, lalu balok if/else: jika TextInput1.Text = angkaRahasia, tampilkan "Benar!"; jika tidak, tampilkan "Coba lagi!".
  4. Uji coba beberapa kali sampai menemukan angka yang benar.
  5. Tantangan tambahan: tambahkan petunjuk "terlalu besar" atau "terlalu kecil".
Kelompok 4

Aplikasi Kumpulan Quotes Motivasi

Setiap kali tombol ditekan, muncul satu kata-kata motivasi acak dari daftar.

Komponen: Label, ButtonBalok: list, pick a random item
  1. Buat Label besar untuk menampilkan quote, dan Button "Quote Berikutnya".
  2. Di Blocks, buat variabel daftarQuotes berisi balok make a list dengan 5 kalimat motivasi pilihan kelompok.
  3. Buat when Button1.Click, lalu set Label1.Text to pick a random item from list daftarQuotes.
  4. Tekan tombol berulang kali untuk memastikan quote-nya berganti-ganti.
  5. Tantangan tambahan: tambahkan gambar latar yang berhubungan dengan semangat belajar.
Kelompok 5

Aplikasi Konversi Suhu

Pengguna memasukkan suhu dalam Celsius, aplikasi menampilkan hasil dalam Fahrenheit.

Komponen: TextInput, Label, ButtonBalok: math (×, +), set Text
  1. Buat Label "Masukkan suhu (°C)", TextInput bertipe Number, Button "Konversi", dan Label hasil.
  2. Ingatkan kelompok rumusnya: F = (C × 9/5) + 32.
  3. Di Blocks, buat when Button1.Click, lalu susun balok math sesuai rumus dengan TextInput1.Text sebagai nilai C.
  4. set Label2.Text to hasil balok math tadi, tambahkan tulisan "°F" di belakangnya memakai join.
  5. Tantangan tambahan: buat juga arah sebaliknya, dari Fahrenheit ke Celsius.