Learn/ Tutorial Coding/ App Inventor/ Pengenalan
πŸ“± App Inventor Β· Tutorial 1

Mengenal MIT App Inventor

App Inventor adalah platform dari MIT (Massachusetts Institute of Technology) untuk membuat aplikasi Android dengan cara menyusun blok visual β€” mirip Scratch, tapi hasilnya bisa diinstall di HP kamu!

1. Apa Itu App Inventor?

βœ… Bisa Dilakukan

  • β€’ Bikin app Android (.apk)
  • β€’ Desain UI drag-and-drop
  • β€’ Logika pakai blok visual
  • β€’ Uji coba langsung di HP
  • β€’ Gratis & berbasis browser

ℹ️ Perlu Diketahui

  • β€’ Khusus Android (bukan iOS)
  • β€’ Butuh akun Google
  • β€’ Untuk preview butuh HP Android atau emulator
  • β€’ Cocok untuk app sederhana–menengah
πŸ”— Buka App Inventor: appinventor.mit.edu β†’ klik "Create Apps!" β†’ login dengan Google

2. Mengenal Antarmuka App Inventor

App Inventor punya dua mode utama yang bisa kamu switch kapan saja:

🎨

Designer Mode

Tempat kamu mendesain tampilan app. Drag komponen dari panel kiri ke layar ponsel di tengah. Atur propertinya di panel kanan.

  • πŸ“¦ Palette β€” daftar komponen tersedia
  • πŸ“± Viewer β€” preview layar HP
  • πŸ”§ Properties β€” atur warna, ukuran, teks
  • πŸ“‹ Components β€” daftar komponen yang sudah ditambah
🧩

Blocks Mode

Tempat kamu menulis logika/program menggunakan blok visual. Seperti puzzle β€” susun blok untuk menentukan "apa yang terjadi ketika..."

  • πŸŽͺ Built-in Blocks β€” blok logika bawaan (if, loop, math)
  • πŸ“± Component Blocks β€” blok dari komponen yang kamu tambah
  • πŸ”„ Event Blocks β€” "ketika tombol diklik..."

3. Komponen Dasar yang Wajib Tahu

KomponenFungsiContoh Penggunaan
🏠 Screen Layar utama app Satu app bisa punya banyak Screen
πŸ”˜ Button Tombol yang bisa diklik Tombol "Hitung", "Simpan", "Mulai"
🏷️ Label Teks yang ditampilkan Judul, hasil perhitungan, pesan
✏️ TextBox Input teks dari user Form nama, angka, password
πŸ–ΌοΈ Image Menampilkan gambar Foto profil, logo, ilustrasi
πŸ“» RadioButton Pilihan satu dari banyak Pilih jenis kelamin
β˜‘οΈ CheckBox Pilihan ya/tidak Persetujuan, filter
πŸ”Š Sound Memutar suara/musik Efek suara game, notifikasi
πŸ—£οΈ TextToSpeech Teks dibacakan suara App aksesibilitas, kuis
πŸ’Ύ TinyDB Simpan data lokal Simpan skor, preferensi user

4. Cara Kerja Blok Event

Blok di App Inventor bekerja dengan pola Event β†’ Aksi. "Ketika sesuatu terjadi β†’ lakukan ini".

πŸ
when Button1.Click do

Jalankan aksi saat tombol ditekan

πŸ
when TextBox1.TextChanged do

Reaksi real-time saat user mengetik

πŸ
when Screen1.Initialize do

Setup awal saat app pertama dibuka

β
when Clock1.Timer do

Update tampilan secara berkala

5. πŸ—οΈ App Pertama: "Klik Sapa!"

Buat app sederhana: ketika tombol diklik, label menampilkan "Halo, Dunia!"

Langkah 1 β€” Designer Mode

  1. 1. Drag Label ke layar β†’ Properties: Text = "Tekan tombol di bawah!", FontSize = 18
  2. 2. Drag Button ke layar β†’ Properties: Text = "πŸ‘‹ Sapa Dunia!"
  3. 3. Rename komponen: Label1 β†’ LabelHasil, Button1 β†’ TombolSapa

Langkah 2 β€” Blocks Mode

when TombolSapa.Click do
set LabelHasil.Text to "Halo, Dunia! πŸŽ‰"

↑ Inilah tampilannya di Blocks mode β€” blok disusun seperti puzzle

πŸ“± Test di HP: Klik Connect β†’ AI Companion β†’ install app "MIT AI2 Companion" di HP β†’ scan QR code. App langsung jalan di HP kamu!
← Semua Tutorial App Inventor Tutorial 2: Proyek Kalkulator BMI β†’