Bab 17

Event dan User Interface Dasar
Memahami interaksi pengguna dan membuat tampilan aplikasi pertamamu

Quiz
Materi
Game
Worksheet
Soal 1 dari 10Skor: 0
dari 10
0
Benar
0
Salah
💡 Tahukah Kamu?
Setiap kali kamu menekan tombol di HP — entah itu tombol kirim pesan, tombol like, atau tombol belanja — kamu sedang memicu sebuah EVENT. Aplikasi yang kamu gunakan "mendengarkan" event-event tersebut dan merespons sesuai programnya. Hari ini kamu akan belajar membuat aplikasi yang bisa mendengarkan dan merespons aksi pengguna!

A. Apa Itu Event?

Event adalah suatu kejadian atau aksi yang dilakukan oleh pengguna atau sistem yang dapat "didengarkan" dan direspons oleh program. Event adalah cara utama pengguna berinteraksi dengan aplikasi.

Jenis EventContoh di Aplikasi HP
Tap / ClickMenekan tombol, memilih item, mengetuk ikon
Long PressMenekan tombol lama untuk opsi tambahan
SwipeMenggeser layar ke kiri/kanan untuk pindah halaman
Input TextMengetik teks di kotak input
Screen LoadSaat halaman aplikasi pertama kali dibuka
TimerSetiap N detik, lakukan sesuatu secara otomatis
💡 Analogi: Event seperti bel pintu rumah. Saat tamu memencet bel (event), kamu mendengar bunyinya lalu membuka pintu (aksi). Tanpa bel yang dipencet, kamu tidak akan melakukan apa-apa!

B. Komponen Dasar User Interface

User Interface (UI) adalah bagian dari aplikasi yang dapat dilihat dan digunakan oleh pengguna. Komponen UI dasar yang akan kita gunakan di Thunkable:

Komponen UIFungsi
LabelMenampilkan teks yang tidak bisa diedit pengguna. Digunakan untuk judul, instruksi, atau hasil.
ButtonTombol yang bisa ditekan. Saat ditekan, memicu event yang menjalankan kode.
TextInputKotak input untuk pengguna mengetik teks atau angka.
ImageMenampilkan gambar dalam aplikasi.
ScreenHalaman/layar dalam aplikasi. Satu aplikasi bisa punya banyak screen.
SoundMemutar efek suara saat event terjadi.

C. Cara Kerja Event di Thunkable

Di Thunkable, cara kerja event sangat intuitif. Setiap komponen memiliki event yang bisa kamu "pasang" aksinya. Semua event mengikuti pola berikut:

KETIKA [komponen] [event terjadi] MAKA [lakukan aksi]

Contoh-contoh Event Handler

KETIKA Button1 ditekan MAKA Ubah teks Label1 menjadi 'Tombol sudah ditekan!' KETIKA TextInput1 teks berubah MAKA Simpan teks ke variabel 'nama_pengguna' KETIKA Screen1 dibuka MAKA Tampilkan pesan sambutan
💡 Ingat: Tanpa event handler, tombol hanya jadi hiasan. Event handler-lah yang membuat aplikasi terasa "hidup"!

D. Prinsip Desain UI yang Baik

UI yang baik bukan hanya soal tampilan, tapi juga kemudahan penggunaan (usability). Berikut prinsip dasar yang perlu kamu terapkan:

  • Konsisten — gunakan warna, ukuran font, dan gaya yang sama di seluruh aplikasi.
  • Jelas — setiap tombol dan label harus jelas fungsinya. Hindari teks yang membingungkan.
  • Sederhana — jangan terlalu banyak elemen di satu layar. Fokus pada fungsi utama.
  • Responsif — aplikasi harus merespons aksi pengguna dengan cepat (tampilkan loading jika perlu).
  • Aksesibel — font cukup besar, kontras warna yang baik agar mudah dibaca.

E. Aktivitas Praktik

✏️ Aktivitas 4.1 — Aplikasi "Halo, Aku [Nama]!"

Platform: Thunkable (thunkable.com) — buat aplikasi pertamamu yang menerima nama dan menyapa pengguna!

  1. Buka Thunkable dan buat project baru.
  2. Tambahkan komponen: Label (judul), TextInput (nama), Button (sapa), Label (hasil).
  3. Atur tampilan: beri warna background dan ukuran font yang nyaman.
  4. Tambahkan event: KETIKA Button ditekan MAKA ubah teks Label hasil menjadi 'Halo, ' + teks TextInput + '!'
  5. Test di Thunkable Live atau export ke HP.
🎯 Tantangan: Tambahkan validasi — jika TextInput kosong saat tombol ditekan, tampilkan pesan 'Masukkan namamu dulu!'

✏️ Aktivitas 4.2 — Aplikasi Multi-Tombol Interaktif

Buat aplikasi dengan 3 tombol yang masing-masing melakukan aksi berbeda:

  • Tombol 1 "Salam Pagi" — ubah background jadi terang, tampilkan 'Selamat Pagi!'
  • Tombol 2 "Salam Malam" — ubah background jadi gelap, tampilkan 'Selamat Malam!'
  • Tombol 3 "Reset" — kembalikan ke tampilan awal

Tambahkan: counter yang menghitung berapa kali pengguna menekan tombol apa pun, lalu tampilkan 'Kamu sudah menekan tombol sebanyak X kali'. Coba simulasinya di tab Game!

👋 Game 1: Simulator "Halo, Aku [Nama]!"

Ini simulasi Aktivitas 4.1. Ketik namamu, tekan tombol, dan lihat event handler bekerja. Aktifkan validasi untuk mencoba tantangannya!

Halo, Aku!
Tekan tombol "Sapa" di layar HP di atas!

🎛️ Game 2: Aplikasi Multi-Tombol

Ini simulasi Aktivitas 4.2. Tekan tiga tombol berbeda dan perhatikan bahwa setiap tombol punya event handler sendiri. Counter selalu bertambah di setiap tekanan!

Aplikasi Salam
Belum ada salam
Kamu sudah menekan tombol sebanyak 0 kali
Tekan salah satu tombol di layar HP di atas!

🔎 Game 3: Detektif Event

Baca situasi di aplikasi HP, lalu tebak jenis event yang terjadi. Ada 8 situasi!

Skor: 0 / 0
Pilih jenis event yang paling tepat!

📝 Jawab pertanyaan berikut berdasarkan materi Event dan User Interface Dasar. Pilih kelas dan namamu, lalu isi jawaban.

Soal 1
Apa itu event dalam pemrograman aplikasi? Jelaskan dengan analogi sehari-hari yang berbeda dari yang ada di materi!
Soal 2
Sebutkan 5 komponen UI yang sudah kamu pelajari! Jelaskan fungsi masing-masing dengan satu kalimat!
Soal 3
Sebuah aplikasi kalkulator membutuhkan beberapa komponen UI. Sebutkan semua komponen yang diperlukan dan jelaskan event apa yang perlu diprogram untuk setiap tombol!
Soal 4
Apa perbedaan antara Label dan TextInput? Dalam situasi apa kamu memilih Label, dan kapan memilih TextInput?
Soal 5
Jelaskan 3 prinsip desain UI yang kamu anggap paling penting! Berikan contoh aplikasi nyata yang menerapkan prinsip tersebut dengan baik!
← Kembali