Teknik Dasar Mendesain Aplikasi Android dengan MIT App Inventor 2

Programming MIT App Inventor 2

Oleh: Wawan pada 2025-05-02 08:46:53 | Diperbarui: Wawan pada 2025-06-14 06:01:20

Bagikan: Facebook | Twitter | Whatsapp | Linkedin Kunjungan: 57

---

Sekilas Riwayat MIT App Inventor 2

Pada awalnya App Inventor adalah proyek Google yang ditangani oleh Hal Abelson, seorang ahli komputer di Institut Teknologi Massachussets (MIT), itulah sebabnya pada awal pengembangan diberi nama Google App Inventor.

Setelah proyek dihentikan oleh Google, Hal Abelson melanjutkannya pengembangannya di kampus MIT bersama dengan rekan-rekan sejawatnya, dan sejak itu namanya menjadi MIT App Inventor 2 hingga sekarang.

Platform MIT App Inventor 2

Plaform online tersedia di https://appinventor.mit.edu/. Gunakan akun Google untuk login dan memulai pembuatan proyek baru. Sebagai alternatif kita bisa pakai MIT App Inventor 2 versi offline, misalnya yang tersedia untuk diunduh di https://sourceforge.net/projects/ai2offline/.

Memulai Proyek Baru

Klik Start New Project.

Berikan nama untuk proyek tersebut, lalu OK.

Ingat! Nama proyek jangan mengandung spasi.

User Interface

Keterangan :

1. Pallets - Berisi komponen-komponen dalam berbagai kategori. Komponen dapat diambil untuk menyusun tampilan aplikasi Android yang diinginkan.
2. Viewer - Area untuk menyusun komponen-komponen sehingga membentuk tampilan aplikasi Android.
3. Components - Berisi daftar yang digunakan/dilibatkan dalam proyek.
4. Properties - Berisi aneka properti dari komponen yang dapat diatur menurut kebutuhan.

Mode Kerja

MIT App Inventor 2 menyediakan dua mode kerja, yaitu :

• Mode Designer - Mode yang digunakan ketika kita bekerja mendesain tampilan aplikasi Android.
• Mode Blocks - Mode yang digunakan ketika kita bekerja memprogramnya.

Screen (Layar)

Pada panel Viewer tersedia komponen bernama Screent1, yang masih kosong. Inilah layar pertama dari aplikasi Android kita. Jika diperlukan, kita dapat menambahkan Screen lainnya. Untuk hal ini, klik tombol Add Screen.

Tata-Letak (Layout)

Ketika kita tambahkan komponen-komponen lain ke dalam Screen1, bawaannya komponen-komponen itu tertata secara vertikal. Pada panel Palette tersedia kategori Layout, yang dapat digunakan untuk mengatur tata-letak komponen-komponen pada layar.

Sebagai contoh, langkah berikut menyiapkan layout secara horisontal :

1. Drag komponen HorizontalArrangement ke dalam Screent1.
2. Tambahkan lagi komponen yang sama pada Screen1.

Properti Komponen

Klik HorizontalArrangement1, maka kita akan dapat mengatur komponen tersebut pada panel Properties. Sebagai contoh, klik properti Width, pilih Fill Parrent, dan kemudian klik OK.

Lakukan hal yang sama untuk komponen HorizontalArrangement2. Hasilnya akan terlihat seperti berikut.

Kita dapat letakkan komponen-komponen lain ke dalam HorizontalArrangement1 dan HorizontalArrangement2. Sebagai contoh, buka kategori User Interface pada panel Palette, lalu drag komponen Button ke dalam HorisontalArrangement1. Lakukan hal yang sama pada HorizontalArrangement2.

Pilih Button1, atur properti-propertinya sebagai berikut :

• BackgroundColor: Red
• FontBold: aktif 
• FontSize: 20
• Width: Fill parent
• Text: OFF

Menghasilkan tampilan :

Lakukan pengaturan properti Button lainnya sehingga diperoleh hasil seperti berikut ini :

Untuk komponen Button2 dan Button4, atur properti Visible menjadi tidak aktif.

 

Memprogram Komponen

Silahkan beralih dulu ke mode Blocks. Klik komponen Button1, lalu pilih blok Event Click.

Klik lagi Button1, lalu pilih blok pengatur visibilitas (Set Visible), dan pasangkan blok tersebut ke dalam blok Event Click.

Visibilitas (keterlihatan) sebuah komponen diatur dengan nilai True (terlihat) atau False (tak terlihat). Klik kategori Logic, lalu pilih blok False dan kemudian pasangkan ke dalam rangkaian.

Rangkaian blok di atas mengatakan, "Ketika Button1 diklik, lakukan pengaturan Visible dari Button1 menjadi False". Hal ini berarti bahwa ketika Button1 diklik, maka ia menjadi tak terlihat.

Menduplikasi Blok

Sebagai contoh, klik-kanan blok pengatur visibilitas, lalu pilih perintah Duplicate.

Selanjutnya pasangkan blok duplikat tersebut ke dalam rangkaian, dan lakukan penggantian komponen menjadi Button2 serta nilai visibilitasnya menjadi True.

Hasil akhir yang diperoleh :

Lakukan duplikasi terhadap rangkaian blok di atas guna memprogram komponen Button2.

Ujicoba

Terlebih dahulu silahkan pasang aplikasi MIT AI2 Companion pada smartphone Android. Jalankan aplikasi tersebut. Setelah itu, pilih menu AI Companion dari menu Connect.

Pada perangkat Android, pilih Scan QR Code.

Kemudian pindai QR Code yang diperlihatkan pada layar.

Desain layar aplikasi Android yang telah dibuat akan diperlihatkan hasilnya pada ponsel Android.

Membangun Aplikasi (Build)

Gunakan perintah Android App dari menu Build untuk membentuk desain yang telah dibuat menjadi aplikasi android (.apk). 

Ikuti proses build yang sedang berlangsung hingga selesai, dan kemudian unduh aplikasi android (.apk) yang diperoleh.

Langkah akhir adalah memasang aplikasi android ke ponsel android.

Selamat mencoba!

Go!