Mengenal App Inventor
by Zunny Hidayatulloh
App Inventor adalah aplikasi pemrograman android berbasis web yang diciptakan oleh
MIT untuk memberdayakan semua pihak dari yang muda hingga dewasa.
Dengan menggunakan aplikasi ini semua orang dapat membuat aplikasi dengan cepat dan
mudah. Cara menggunakan aplikasi ini sangat mudah, tinggal menggunakan blok-blok yang
sudah disiapkan dan disusun sesuai keinginan.
Aplikasi ini memiliki beberapa bagian sebagai berikut :
Ini adalah My Project Page, tempat menampilkan daftar aplikasi yang telah disimpan. Halaman
ini memiliki beberapa bagian yaitu :
1. Project Menu : berfungsi untuk mengatur project, baik itu membuat project baru,
menghapus project, import project dan sebagainya
2. Connect Menu : berfungsi untuk menghubungkan project dengan emulator atau
handphone dan menjalankan project secara langsung.
3. Build Menu : berguna untuk membentuk project menjadi installer aplikasi dan siap
mempublish ke market
Modul App Inventor Zunny H
4. Help Menu : Jika ada masalah dan pertanyaan, pengguna dapat membuka menu ini
untuk mendapatkan bantuan
5. My Project Menu : untuk membuka daftar seluruh project yang telah disimpan
6. Gallery Menu : untuk membuka gallery aplikasi yang telah dibuat orang lain atau
mencari referensi aplikasi
7. Guide Menu : berfungsi untuk membuka halaman panduan pembuatan program aplikasi
di App Inventor
8. Report an Issue : Jika memiliki masalah dengan App Inventor yang sedang digunakan,
maka pengguna dapat melapor error yang terjadi tersebut kepada pihak MIT
9. Language Menu : untuk mengubah bahasa yang ada pada App Inventor
10. Account Menu : untuk mengelola akun aplikasi App Inventor
11. Daftar aplikasi yang sudah disimpan
12. Tombol untuk membuat project baru
Ketika kita membuat project baru, maka akan tampil halaman baru dengan bagian-nagian
seperti berikut ini :
1. Pallete Pane : bagian yang menyediakan komponen android untuk digunakan untuk
pembuatan program aplikasi.
2. Designer Pane : bagian untuk mendesain tampilan aplikasi yang ingin dibuat
3. Component Pane : bagian yang menampilkan komponen-komponen yang telah
dimasukkan ke dalam screen atau tampilan
4. Properties : bagian untuk mengatur properti komponen
5. Tombol Designer : tombol untuk berpindah ke halaman designer
Modul App Inventor Zunny H
6. Tombol Blocks : tombol untuk berpindah ke halaman blok dan menyusun kode
program aplikasi
7. Tombol Screen : tombol untuk mengubah screen yang ingin dibuat
8. Tombol Add Screen : tombol untuk membuat screen baru
Menjalankan Project App Inventor
Ketika kita telah membuat aplikasi di App Inventor, kita bisa menjalankan project ke
beberapa media yaitu
1. AI Companion : aplikasi perantara App Inventor yang diinstal di perangkat
handphone untuk menjalankan project secara realtime di perangkat handphone.
Untuk menjalankan menggunakan media ini yaitu dengan memasukkan kode
project ke dalam aplikasi AI Companion pada perangkat atau memindai kode QR
yang telah disediakan
2. Emulator : menjalankan aplikasi di emulator bawaan dari App Inventor
3. USB : menjalankan project ke perangkat handphone dengan menggunakan
media USB
Ketika kita hendak menjalankan project dengan media aplikasi AI Companion yaitu
dengan cara :
1. Instal aplikasi AI Companion di handphone
Modul App Inventor Zunny H
2. Pada app inventor pilih menu connect kemudian pilih metode yang diinginkan
3. Selanjutnya masukkan kode atau pindai QR code yang ada di App Inventor ke
dalam aplikasi AI Companion pada handphone
Selain menggunakan AI Companion, kita juga dapat menggunakan emulator untuk
menjalankan project. Berikut langkah-langkahnya :
1. Instal terlebih dahulu aplikasi emulator android seperti Nox, Bluestack,
Genymotion atau sejenisnya
2. Kemudian pada App Inventor, pilih menu build kemudian pilih save .apk to my
computer
Modul App Inventor Zunny H
3. Jika file apk sudah terdownload, mak aplikasi dapat diinstal di emulator dengan
mendrag file apk ke dalam aplikasi emulator
Yang terakhir adalah menjalankan project menggunakan USB, yaitu dengan cara
seperti berikut :
1. Hubungkan perangkat handphone ke dengan komputer menggunakan kabel
USB
2. Instal driver handphone
3. Hidupkan fitur debugging pada handphone
4. Instal aplikasi AI Starter di komputer
5. Buka aplikasi AI Starter di laptop
6. Kemudian di aplikasi App Inventor, pilih menu Connect dan pilih USB
7. Tunggu hingga aplikasi ditampilkan di perangkat handphone
Referensi :
http://appinventor.mit.edu/explore/ai2/setup-emulator.html
http://appinventor.mit.edu/explore/ai2/setup-device-usb.html#step2
Menginstal App Inventor Offline
Aplikasi App Inventor adalah aplikasi yang kita buka secara online, tapi kadang terjadi
kendala ketika kita ingin menggunakan App Inventor online karena aplikasi ini
membutuhkan koneksi internet yang stabil. Untuk mengatasi masalah tersebut, kita bisa
menggunakan aplikasi App Inventor offline. Untuk penggunaannya sama seperti ketika
kita menggunakan aplikasi versi online.
Modul App Inventor Zunny H
Berikut cara menginstal aplikasinya :
1. Buka link berikut ini (link).
2. Pilih menu Files, kemudian pilih versi yang tertinggi
3. Akan muncul pilihan aplikasi yang bisa kita instal, yaitu installer atau portable.
Jika kita pilih installer, maka nanti kita harus menginstal seperti aplikasi biasa,
sedangkan postable kita tinggal ekstrak file yang ada.Agar lebih mudah lagi, kita
pilih saja yang portable.
Modul App Inventor Zunny H
4. Kemudian pilih file yang sesuai dengan perangkat Anda, 32-bit atau 64-bit.
5. Setelah filenya selesai didownload, kemudian buka file yang sudah diunduh.
Modul App Inventor Zunny H
6. Drag folder tersebut ke folder yang mudah dijangkau seperti Local Disk C atau
Local Disk D
Note : Folder penyimpanan aplikasi tidak boleh mengandung spasi
7. Untuk menjalankan aplikasi, buka file dengan nama AI2U.exe
8. Akan tampil menu utama aplikasi seperti gambar di bawah, silakan pilih All AI2U
Server
Modul App Inventor Zunny H
9. Jangan ditutup comand promp yang tampil, karena itu adalah proses agar
servicenya berjalan.
10. Jika sudah, sekarang pilih Start Invent, maka akan membuka aplikasi di browser.
11. Akan muncul tampilan login seperti gambar di bawah ini, pilih Click here to use
your Google Account to Login.
12. Masukkan alamat email Anda dan pilih LogIn
13. Kita sudah berhasil membuka aplikasi App Inventor Offline
Membuat Layout
Ketika kita hendak membuat aplikasi android, kita harus tahu bagaimana untuk
membuat tampilan. Di dalam app inventor, terdapat beberapa komponen yang
digunakan untuk membuat tampilan, berikut adalah komponennya :
1. HorizontalArragment : Komponen untuk mengatur komponen yang ada di
dalamnya secara horizontal secara sejajar.
2. HorizontalScrollArragment : Komponen untuk mengatur komponen yang ada
di dalamnya secara horizontal secara sejajar dan jika komponen melebihi layar
maka komponen bisa digeser secara horizontal
3. VerticalArragment : Komponen untuk mengatur komponen yang ada di
dalamnya secara vertical secara sejajar.
Modul App Inventor Zunny H
4. VerticalScrollArragment : Komponen untuk mengatur komponen yang ada di
dalamnya secara vertical secara sejajar dan jika komponen melebihi layar maka
komponen bisa digeser secara vertical
5. TableArragment : Komponen untuk mengatur komponen dengan susunan table
yaitu kolom dan baris.
Di dalam screen kita juga dapat mengatur komponen di bagian properties,
pengaturanya yaitu :
1. AlignHorizontal : pengaturan untuk mengatur komponen di dalam layar secara
horizontal. Ada 3 pilihan yaitu di kanan, tengah, dan kiri.
2. AlignVertical : pengaturan untuk mengatur komponen di dalam layar secara
vertical. Ada 3 pilihan yaitu di atas, tengah, dan bawah.
Aplikasi Biodata
Untuk membuat sebuah aplikasi android tekan tombol Create apps pada ujung
kiri atas halaman maka kita akan diminta untuk memasukkan akun google yang akan
kita gunakan sebagai akun developer pada Mit App Inventor.
Setelah melakukan Login pada akun google yang kita miliki maka kita akan
diminta untuk memberikan izin terhadap akun, kamu dapat menekan tombol allow saja
dan akan tampil tampilan awal Mit App Inventor.
Modul App Inventor Zunny H
Untuk membuat sebuah project baru kita tinggal melakukan click terhadap
tombol start new project yang berada pada sudut kiri atas halaman. Lalu isikan nama
project yang ingin kita buat.
Lalu ketika selesai memasukkan nama Project tekan tombol ok maka kita akan
dibawa menuju halaman pembuatan aplikasi android.
Modul App Inventor Zunny H
Hal selanjutnya adalah memasukkan label pada screen, dengan cara melakukan
drag and drop ke screen layar android.
Untuk mengkostumisasi tampilan screen 1 kita dapat melakukannya dengan cara
mengubah properties pada screen1. Untuk membuat label berada di tengah tengah
layar adalah dengan cara mengubah variabel width dengan fill parent.. lalu variabel text
align menjadi center pada properties label.
Selanjutnya sebuah label, sebuah scrool arrangment dan sebuah table dengan 2
buah column dan 5 buah rows agar lebih mudah dalam pengaturan tata letaknya.
Modul App Inventor Zunny H
Kemudian, di dalam table arrangment kita masukan 5 buah label dan lima buah
textbox, sehingga susuan componen table arangment menjadi seperti berikut:
Setelah selesai maka tampilanya akan menjadi seperi berikut :
Modul App Inventor Zunny H
Setelah selesai mendesign kita akan mengatur operasi pada aplikasi yang kita
buat. Klik “Blocks” pada sudut kanan atas.Lalu . Pilih logic “when screen1 .initialize
do” dan masukkan ke dalam viewer.
Pilih pada bagian label nama, dan ambil logic “Set label nama visible
to”.Fungsi dari initialize adalah ketika program di jalankan perintah apakah yang akan
di eksekusi terlebih dahulu. Sehingga pertama kali kita akan menghilangkan tampilan 5
label data yang akan tampil.
Modul App Inventor Zunny H
Untuk logic pada button1 yaitu “when button1 click do ” . Untuk isinya dilakukan
hal yang sama dengan screen1, hanya saja nilainya menjadi true, dan isi dari label
nama, tempat, tanggal, kelamin dan alamat tadi menjadi isi dari textbox yang di
inputkan setelah meng-klik tombol Tampilkan Data/button 1 dengan menambah logic
“set labelname text to textboxnama text”
Aplikasi telah berhasil kita buat, selanjutnya adalah melakukan build , dengan
cara klik tombol dan pilih App save .apk to my computer.
Setelah APK berhasil dodwnload, install pada emulator, hanya dengan drag and
drop apk ke emulator yang digunakan.
Modul App Inventor Zunny H
Aplikasi Talk To Me
Aplikasi ini adalah aplikasi untuk memudahkan orang yang mengalami tuna
wicara atau tuna rungu untuk berkomunikasi. Aplikasi akan mengubah teks yang diketik
oleh pengguna dan mengubahnya ke suara begitu juga sebaliknya. Cara
pembuatannya sebagai berikut :
Membuat Tampilan
Tampilan aplikasi akan kita buat seperti gambar di atas. Aplikasi akan mengubah teks
yang ditulis di kolom teks ke suara ketika tombol speak diklik dan sebaliknya jika tombol
record diklik.
Membuat Block Logika
Modul App Inventor Zunny H
Ketika tombol btnrecord diklik, maka aplikasi akan memanggil komponen
speechRecognizer1 untuk mengambil teks dan ketika teks di dapat makan akan di
tampilkan di TextBox1.
Ketika btnspeak diklik maka akan memanggil komponen TextToSpeech1 untuk
mengeluarkan data berupa suara sesuai teks yang ada di textBox1.
Aplikasi Mengenal Buah
Aplikasi ini adalah aplikasi sederhana untuk memberikan pengetahuan tentang
buah. Sangat cocok untuk pendidikan anak2. Cara pembuatannya seperti berikut ini :
Membuat Tampilan
Tampilannya akan kita buat seperti gambar di atas, kita tambahkan tombol sebanyak
data yang akan kita tampilkan kemudian kita tambahkan komponen image untuk
menampilkan gambar serta kita tambahkan komponen sound untuk memutar suara.
Kali ini kita akan memutar audio yang sudah kita siapkan, jadi kita perlu
mengunggahnya ke App Inventor seperti gambar di bawah ini
Modul App Inventor Zunny H
Di dalam media pane kita tambahkan gambar serta suara yang dibutuhkan.
Membuat Block Logika
Untuk setiap tombol kita buat blocknya seperti ini pada gambar di atas. Jika tombol
diklik, maka tampilkan gambar sesuai dengan data, kemudian masukkan suara ke
komponen sound, selanjutnya sound diputar. Kita ubah juga backroundnya menjadi
warna yang kita inginkan lalu kita ubah tekt menjadi data yang diinginkan
Aplikasi Find My Age
Modul App Inventor Zunny H
Aplikasi ini adalah aplikasi untuk menghitung umur kita sekarang dengan praktis
dan mengetahui tingkat perkembangan kita yaitu anak-anak, remaja, atau dewasa.
Berikut cara membuatnya :
Membuat Tampilan
Tampilannya akan kita buat seperti gambar di atas, dan komponen yang dibutuhkan
yaitu dua komponen label, satu textbox dan dua button. Jika tombol Find diklik maka
akan aplikasi akan menampilkan umur kita.
Membuat Block Logika
Setelah membuat tampilan aplikasi sekarang kita buat block logikanya seperti gambar
ini
Modul App Inventor Zunny H
Ketika aplikasi dibuka dan ketika tombol reset diklik, maka kita kosongkan kolom teks
dengan memanggil prosedur atau fungsi resettxttahun. Ketika tombol find diklik, maka
kita ubah teks hasil menjadi tahun sekarang dikurangi tahun yang dimasukkan di dalam
kolom teks. Jika hasilnya kurang dari 10 maka akan tampil pesan “Kamu masih anak-
anak”, dan dilanjutkan dengan kode untuk remaja dan dewasa.
Aplikasi Rumus Bangun Datar
Aplikasi ini adalah aplikasi untuk menghitung bangun datar dengan praktis
sehingga perhitungan menjadi lebih cepat dan efisien. Berikut cara membuatnya :
Membuat Tampilan
Di dalam aplikasi terdapat beberapa Screen
Modul App Inventor Zunny H
Untuk tampilan pertama aplikasi adalah tampilan menu utama. Di dalamnya terdapat
komponen label dan ListView untuk menampilkan daftar bangun datar.
Kemudian buat Screen baru kemudian buat tampilannya seperti gambar di bawah :
Modul App Inventor Zunny H
Di Screen ini kita akan membuat tampilan untuk menghitung luar segitiga, komponen
yang dibutuhkan yaitu komponen 2 label, 2 textbox, dan 2 tombol.
Membuat Block Logika
Pertama, jika Screen 1 dibuka maka akan menampilkan daftar bangun datar, jika salah
satu bangun datar diklik, maka akan tampil tampilan untuk menghitung sesuai yang
diklik/dipilih.
Jangan lupa masukkan item bangun datar di properti listview seperti gambar berikut :
Modul App Inventor Zunny H
Kemudian untuk Screen segitiga, kita buat blocknya seperti berikut ini
Modul App Inventor Zunny H
Pada block di atas, kita siapkan variable pesan error untuk kolom teks alas dan tinggi.
Ketika tombol hitung diklik, kita cek dulu apakah kolom teks masih kosong atau tidak,
jika masih kosong maka akan mengeluarkan pesan error, jika tidak maka kita hitung
sesuai rumus bangun datar tersebut.
Untuk Screen lainya dibuat sesuai bangun datar lainya.
Modul App Inventor Zunny H
