Beranda / Coding

Cara Membuat Aplikasi "Hello World" Interaktif

Aplikasi yang interaktif di App Inventor dirancang untuk merespons aksi pengguna, misalnya saat tombol diklik. Untuk menangani aksi ini, kita menggunakan blok event handler seperti when Button1.Click do. Blok ini akan menjalankan perintah tertentu ketika suatu event terjadi.
 

Setelah event terdeteksi, kita bisa memberikan respons, seperti mengubah teks pada label dengan set Label1.Text to, atau memutar suara menggunakan call Sound1.Play. Untuk menampilkan teks, kita memakai blok string yakni teks yang ditulis dalam tanda kutip dan ditampilkan lewat blok berwarna pink.

Kombinasi antara blok event dan blok pengatur properti memungkinkan kita membuat aplikasi yang tidak hanya fungsional, tapi juga terasa hidup dan menyenangkan. Interaksi sederhana ini adalah dasar penting sebelum membangun fitur-fitur yang lebih kompleks.

Setelah kita bisa mendesain tampilan, sekarang saatnya kita memberi "otak" pada aplikasi kita di Blocks Editor. Kita akan belajar bagaimana membuat aplikasi merespons tindakan pengguna.

Event Handling (Menangani Kejadian)

Bayangkan sebuah bel di rumah. Apa yang terjadi ketika seseorang menekan bel? Kamu akan melakukan sesuatu, misalnya membuka pintu.

Dalam aplikasi, tindakan pengguna seperti menekan tombol disebut "event" atau "kejadian". Aplikasi tidak akan melakukan apa-apa sampai kita memberinya perintah tentang apa yang harus dilakukan ketika sebuah kejadian terjadi. Proses memberi perintah inilah yang disebut Event Handling. Kita memberitahu aplikasi: "Ketika kejadian ini terjadi, lakukan perintah itu."

Blok when Button1.Click do

Ini adalah blok perintah yang paling sering kita gunakan. Blok ini berwarna emas dan bentuknya seperti mulut yang siap "memakan" perintah-perintah lain di dalamnya.
  • when Button1.Click: Artinya, "Ketika Tombol1 di-klik". Ini adalah event atau pemicunya.
  • do: Artinya, "lakukan".
Jadi, blok ini secara sederhana berarti: "Ketika pengguna mengklik Tombol1, lakukan semua perintah yang ada di dalam mulut blok ini." Perintah apa pun yang kita masukkan ke dalamnya hanya akan dijalankan setelah tombol itu diklik.

Blok set Label1.Text to

Bagaimana cara kita mengubah tulisan pada sebuah Label saat aplikasi berjalan? Kita menggunakan blok "setter". Setter bertugas untuk mengatur atau mengubah properti sebuah komponen.
  • set Label1.Text: Artinya, "Atur properti Teks milik Label1".
  • to: Artinya, "menjadi".
Blok ini memberi kita kekuatan untuk mengubah tulisan pada Label secara dinamis. Misalnya, tulisan yang awalnya "Selamat Datang" bisa kita ubah menjadi "Kamu berhasil!".

String (Teks)

Dalam dunia pemrograman, semua bentuk tulisan (kata, kalimat, atau bahkan satu huruf) disebut sebagai "String". Di App Inventor, kita menggunakan blok teks berwarna merah muda (pink) untuk membuat sebuah string.

Anggap saja blok ini seperti kertas catatan kecil. Kamu bisa menulis apapun di dalamnya. Kemudian, kertas catatan ini bisa kamu tempelkan ke blok perintah lain, misalnya ke blok set Label1.Text to untuk memberitahu aplikasi tulisan apa yang harus ditampilkan.

Membuat Aplikasi "Hello World" Dasar

Sekarang, mari kita gabungkan semua konsep di atas untuk membuat aplikasi paling dasar di dunia pemrograman: "Hello World". Tujuannya adalah membuat tulisan "Hello World!" muncul di layar ketika sebuah tombol ditekan.

Logikanya sangat sederhana:
  1. Kita butuh pemicu, yaitu ketika tombol diklik. Kita gunakan blok when Button1.Click do.
  2. Kita ingin melakukan sesuatu, yaitu mengubah tulisan pada Label.
  3. Untuk mengubah tulisan, kita gunakan blok set Label1.Text to.
  4. Tulisan apa yang ingin kita tampilkan? "Hello World!". Kita ambil blok teks berwarna pink, ketik "Hello World!" di dalamnya, lalu pasangkan ke blok set Label1.Text to.
Jika digabungkan, perintah lengkapnya menjadi: "Ketika Tombol1 diklik, atur properti Teks pada Label1 menjadi 'Hello World!'". Dengan begitu, aplikasimu menjadi interaktif!

Contoh Kasus atau Ilustrasi

Mari kita coba langsung membuat aplikasi ”Hello World”. Ikuti langkah-langkah berikut:

Kasus 1: Mendesain Tampilan
Pertama, kita siapkan dulu "wajah" aplikasi kita. Pastikan kamu berada di halaman Designer.

1. Buat Proyek Baru: Dengan nama "HelloWorld".
2. Tambahkan Label: 
  • Dari panel Palette di sebelah kiri, seret komponen Label ke tengah layar Viewer.
  • Klik pada Label1 yang baru kamu tambahkan.
  • Di panel Properties di sebelah kanan, cari properti Text. Hapus tulisan yang ada dan ganti dengan "..." (tiga titik saja). Ini akan menjadi tulisan awal kita.
3. Tambahkan Tombol:
  • Dari panel Palette, seret komponen Button ke bawah Label.
  • Klik pada Button1.
  • Di panel Properties, ubah properti Text-nya menjadi "Tampilkan Pesan!".
Tampilan desainmu sekarang seharusnya sudah siap.

Kasus 2: Memberi Perintah

Sekarang, kita akan memberi "otak" pada aplikasi kita agar bisa melakukan sesuatu.

1. Pindah ke Halaman Blocks: Klik tombol "Blocks" di pojok kanan atas untuk pindah ke halaman editor blok.

2. Siapkan Pemicu (Event):
  • Di panel Blocks sebelah kiri, klik pada Button1. Kamu akan melihat semua blok perintah yang berhubungan dengan tombol itu.
  • Cari dan seret blok when Button1.Click do ke area kerja. Blok emas ini adalah pemicunya, yang artinya "Ketika Tombol1 diklik, lakukan...".
  • Sehingga tampilan Blocks
3. Atur Perintah Mengubah Teks:
  • Sekarang, klik pada Label1 di panel kiri.
  • Cari blok set Label1.Text to dan seret ke dalam "mulut" blok when Button1.Click do. Blok ini bertugas untuk mengubah tulisan di Label1.
  • Sehingga tampilan Block
4. Siapkan Teks Baru:
  • Di panel kiri, klik pada kategori Text (berwarna pink).
  • Ambil blok paling atas yang berisi tanda kutip kosong "".
  • Pasangkan blok pink ini ke ujung blok set Label1.Text to.
  • Klik di dalam blok pink tersebut dan ketik "Hello World!".
Kasus 3: Uji Coba Aplikasimu

Waktunya mencoba hasil karyamu!
  1. Install Aplikasi MIT App Inventor di Play Store (Android) atau Di App Store (iPhone).
  2. Buku Aplikasi MIT App Inventor di HP mu, kemudian hubungkan aplikasi menggunakan aplikasi MIT AI Companion.
  3. Kamu bisa melakukan scan di Aplikasi MIT App Inventor atau bisa juga dengan masukan 6 digit kode.
  4. Saat aplikasi terbuka di HP, kamu akan melihat tulisan "..." dan sebuah tombol "Tampilkan Pesan!".
  5. Tekan tombol “Tampilkan Pesan!”. 
  6. Jika berhasil, tulisan "..." akan langsung berubah menjadi "Hello World!".
Selamat! Kamu baru saja berhasil membuat aplikasi interaktif pertamamu. Kamu sudah memberi perintah pada aplikasi untuk merespons sentuhan pengguna.

Fakta Menarik / Fun Facts
  • "Hello World!" adalah program pertama yang sering dibuat oleh pemula dalam banyak bahasa pemrograman!
  • Banyak aplikasi besar juga diawali dari interaksi sederhana seperti ini.