Beranda / Coding

Persiapan ke Mobile App dengan App Inventor

Setiap hari, kalian pasti menggunakan berbagai aplikasi di smartphone kalian, seperti WhatsApp, TikTok, atau game Mobile Legends. Pernahkah terbayang bagaimana aplikasi-aplikasi itu dibuat? Apakah harus jago coding yang rumit? Ternyata tidak selalu! Ada cara yang lebih mudah, mirip seperti Scratch, untuk membuat aplikasi di HP. Namanya App Inventor!


Di bab ini, kita akan menjelajahi dunia pengembangan aplikasi mobile dengan cara yang sederhana namun seru! Siapa bilang membuat aplikasi itu harus jago coding? Dengan bantuan platform visual bernama App Inventor, kalian bisa merancang aplikasi Android sendiri, bahkan tanpa menulis kode rumit. Yuk, kita pahami dulu konsep dasarnya!

Apa Itu Aplikasi Mobile?

Sebelum mulai membuat aplikasi, penting untuk tahu dulu apa itu aplikasi mobile.
  • Aplikasi mobile adalah program atau perangkat lunak yang dibuat khusus agar bisa berjalan di perangkat seperti smartphone atau tablet.
  • Contoh aplikasi mobile yang sering kalian gunakan sehari-hari: WhatsApp, TikTok, Instagram, Mobile Legends, dan masih banyak lagi.
Perbedaan Aplikasi Mobile dan Aplikasi Web

Aplikasi Mobile
  • Aplikasi Mobile Diunduh dan diinstal di HP
  • Bisa digunakan tanpa internet (tergantung jenis aplikasinya)
  • Didesain untuk perangkat mobile
Aplikasi Web
  • Dibuka lewat browser (seperti Chrome)
  • Biasanya butuh koneksi internet
  • Didesain untuk semua perangkat, tapi lebih cocok untuk layar besar
Sistem Operasi Mobile: Android vs iOS

Aplikasi mobile berjalan di atas sistem operasi (OS) yang berbeda. Dua OS mobile yang paling populer adalah:
  • Android – dikembangkan oleh Google, digunakan oleh banyak merek seperti Samsung, Oppo, Xiaomi, dll.
  • iOS – dikembangkan oleh Apple, hanya digunakan di iPhone dan iPad.
Catatan: Dalam pembelajaran ini, kita akan fokus pada Android karena App Inventor hanya bisa membuat aplikasi Android.

Mengenal App Inventor: Bikin Aplikasi Tanpa Ribet!

Apa Itu App Inventor?
  • App Inventor adalah sebuah platform visual buatan MIT (Massachusetts Institute of Technology) yang memungkinkan siapapun (termasuk kalian!) untuk membuat aplikasi Android tanpa menulis kode.
  • Alih-alih mengetik program, kalian cukup menyusun blok-blok seperti puzzle, mirip dengan Scratch!
Kenapa Cocok untuk Pemula?
  • Tidak perlu pusing dengan aturan penulisan kode (sintaksis).
  • Antarmukanya mudah dipahami, cocok untuk kalian yang baru belajar.
  • Kalian bisa langsung melihat hasil aplikasi yang dibuat.
Apa Saja yang Dibutuhkan?

Untuk mulai membuat aplikasi dengan App Inventor, kalian perlu:
  • Akun Google
  • Koneksi internet
  • Komputer atau laptop
  • Akses ke situs: ai2.appinventor.mit.edu
Mengenal Tampilan App Inventor

App Inventor punya dua tampilan utama yang penting untuk dipahami:

Designer View (Tampilan Desain)

Di sinilah kalian mendesain tampilan aplikasi, seperti menata tombol, gambar, dan teks.
Komponen di Designer View:
  • Palette: Tempat semua komponen siap pakai (tombol, teks, gambar, dll).
  • Viewer: Layar tiruan HP tempat kalian menyusun komponen.
  • Components: Daftar semua komponen yang kalian tambahkan.
  • Properties: Untuk mengatur tampilan dan perilaku komponen (misalnya warna tombol, tulisan, gambar).
Blocks Editor (Tampilan Blok Kode)

Di sinilah kalian menambahkan logika atau perintah agar aplikasi bisa "hidup".
- Blok kode disusun seperti potongan puzzle.
- Ada blok untuk: 
  • Kontrol (contoh: if...then)
  • Logika (benar/salah)
  • Teks dan angka
  • Blok khusus untuk tiap komponen (seperti Button atau Label)
Penting! Block code App Inventor tetap memakai bahasa Inggris. 

Contoh:
when Button1.Click do
set Label1.Text to "Halo Dunia!"

Komponen dan Event Dasar

Saat membuat aplikasi, kalian akan bekerja dengan dua hal utama:

1. Komponen (Components)

Komponen adalah bagian-bagian dari aplikasi yang bisa dilihat atau digunakan pengguna.
Beberapa komponen dasar:
  • Button: Tombol yang bisa diklik
  • Label: Menampilkan teks
  • TextBox: Tempat pengguna mengetik teks
  • Image: Menampilkan gambar
  • SoundPlayer: Untuk memutar suara
2. Event (Kejadian)

Event adalah aksi atau peristiwa yang terjadi saat aplikasi digunakan dan bisa memicu blok kode.
Contoh event:
  • Button.Click – saat tombol diklik
  • Screen.Initialize – saat aplikasi dibuka pertama kali
  • TextBox.TextChange – saat teks diubah
Setiap event bisa dipasangkan dengan blok kode tertentu agar aplikasi bisa merespons tindakan pengguna.

Siap Jadi Pembuat Aplikasi?

Setelah memahami teori dasar ini, kalian sudah punya bekal awal untuk memulai membuat aplikasi Android kalian sendiri. Seru, kan? Di bab-bab selanjutnya, kita akan langsung praktek membuat aplikasi pertama kalian. Siapkan ide-ide kreatif dan bersiaplah jadi young app developer!

Contoh Kasus atau Ilustrasi

Kasus 1: "Salam Digital: Halo Dunia!"

Deskripsi: Bayangkan kamu membuat aplikasi yang menyapa pengguna saat mereka menekan tombol. Ini adalah dasar dari semua aplikasi: interaksi!
Komponen:
  • Label (teks awal: Halo!)
  • Button (teks: Klik Saya!)
Blok Kode:
when Button1.Click
do set Label1.Text to "Halo Dunia!"

Ilustrasi: 
Tombol ditekan → Label berubah dari "Halo!" menjadi "Halo Dunia!"
Cocok untuk memperkenalkan konsep event handler dan properti komponen.

Kasus 2: "Kucing Bersuara"

Deskripsi: Bayangkan ada gambar kucing yang bisa mengeluarkan suara saat disentuh. Seru, bukan?
Komponen:
  • Image (gambar kucing)
  • Sound (mengisi suara meong)
Blok Kode:
when Image1.Click
do call Sound1.Start

Ilustrasi: 
Saat gambar kucing ditekan → aplikasi pemutar suara “meong”. 
Melatih siswa mengenali penggunaan media dan event pada gambar.

Kasus 3: "Hitung Skor Otomatis!"

Deskripsi: Kamu membuat aplikasi penghitung skor. Setiap kali tombol diklik, nilainya naik satu.
Komponen:
  • Button (teks: Tambah Skor)
  • Label (teks awal: 0)
Blok Kode:
when Button1.Click
do set Label1.Text to Label1.Text + 1

Ilustrasi: 
Setiap klik → nilai skor bertambah (1, 2, 3, …).
Konsep penting: variabel, aritmatika, dan update tampilan.

Kasus 4: "Sihir Warna Latar!"

Deskripsi: Buat tombol yang saat ditekan akan mengubah warna latar layar. Ini memberikan efek visual yang menyenangkan.
Komponen:
  • Button (teks: Ubah Warna!)
Blok Kode:
when Button1.Click
do set Screen1.BackgroundColor to any color

Ilustrasi: 
Setiap tekan tombol → warna latar berubah secara acak.
Mengenalkan konsep visual feedback dan atribut antarmuka.

Kasus 5: "Lampu Menyala dan Padam"

Deskripsi: Aplikasi bisa menyalakan atau mematikan gambar lampu. Seperti saklar digital!
Komponen:
  • Button (teks: Nyalakan/Matikan)
  • Image (gambar lampu, bisa berubah dari “off” ke “on”)
  • Variabel status (boolean: nyala/mati)
Blok Kode:
when Button1.Click
do if status = true
set Image1.Picture to "lampu_off.png"
set status to false
else
set Image1.Picture to "lampu_on.png"
set status to true

Ilustrasi:
Klik pertama → lampu menyala
Klik kedua → lampu mati
Melatih siswa memahami kondisi (if-else) dan kontrol status aplikasi.

Kasus 6: "Kuis Kilat: Tebak Angka!"

Deskripsi: Siswa menekan tombol untuk menampilkan angka acak, lalu menebaknya lewat input.
Komponen:
  • Button (Tampilkan Angka)
  • Label (Tampilkan Angka Acak)
  • TextBox (Tempat Menjawab)
  • Button (Cek Jawaban)
  • Label (Hasil Cek)
Blok Kode:
when Button1.Click
do set Label1.Text to random integer from 1 to 10
when Button2.Click
do if TextBox1.Text = Label1.Text
set Label2.Text to "Benar!"
else
set Label2.Text to "Coba lagi!"

Ilustrasi:
Aplikasi memilih angka → siswa menebak → aplikasi memberi umpan balik.
Memperkenalkan konsep random, perbandingan, dan logika interaktif.

Fakta Menarik / Fun Facts
  • Aplikasi mobile pertama yang populer adalah game sederhana seperti Snake di ponsel Nokia lawas!
  • App Inventor dibuat oleh Google sebelum diserahkan ke MIT. Ini adalah salah satu cara termudah untuk mengubah ide aplikasi menjadi kenyataan di ponsel.
Rangkuman

App Inventor adalah platform berbasis web dari MIT yang memungkinkan kamu membuat aplikasi Android dengan mudah, tanpa perlu menulis kode rumit. Di App Inventor, kamu akan menggunakan antarmuka visual yang mirip dengan Scratch, yaitu sistem drag & drop untuk menyusun blok-blok kode.

Ada dua tampilan utama dalam App Inventor:
  • Designer View: untuk merancang tampilan aplikasi, seperti menambahkan tombol, gambar, dan warna latar.
  • Blocks Editor: untuk menyusun logika program menggunakan blok-blok yang saling disambungkan.
Dengan App Inventor, kamu bisa membuat aplikasi sederhana seperti:
  • Tombol sapa
  • Suara hewan
  • Kalkulator uang jajan
Bahkan ide kecil pun bisa kamu ubah jadi aplikasi nyata di HP-mu!