APP INVENTOR

MODUL PELATIHAN

PEMBUATAN APLIKASI

Menggunakan

2

Disusun Oleh:

1

2

Daftar Isi

Daftar Isi.....................................................................................................................................3
Tentang App Inventor 2 .............................................................................................................4

Menyiapkan App Inventor......................................................................................................4
Kebutuhan Sistem ..................................................................................................................5

Sistem Operasi dan Hardware yang dibutuhkan:...............................................................5
Browser...............................................................................................................................5
Phone or Tablet (or use the on-screen emulator)..............................................................5
Mengenal Antamuka AI2 ...........................................................................................................6
Mengenal Design View ...........................................................................................................7
Palette ....................................................................................................................................7
The Viewer..............................................................................................................................8
Component.............................................................................................................................9
Media....................................................................................................................................10
Properties .............................................................................................................................10
Membuat Aplikasi Sederhana..................................................................................................11
Membuat Music Player Sederhana..........................................................................................13
Membuat Splash Screen ..........................................................................................................15
Membuat Aplikasi Database Sederhana..................................................................................17
Membuat Video Player Sederhana ..........................................................................................19
Membuat Paket dan Menyebarkan.........................................................................................17
Berbagi source code (.aia)....................................................................................................21
Berbagi aplikasi untuk dipasang pada perangkat android (.apk file)...................................22
Sumber Bacaan ........................................................................................................................23

3

Tentang App Inventor 2

MIT App Inventor adalah tool pemrograman berbasis blok yang memungkinkan semua orang,
bahkan pemula, untuk memulai pemrograman dan membangun aplikasi yang berfungsi penuh untuk
perangkat Android. Membuat aplikasi Android itu bisa semudah bermain LEGO atau PUZZLE. Kita
tidak harus mengerti bahasa pemrograman Android berbasis OOP dan Java yang pada umumnya
menggunakan IDE seperti Eclipse atau netbean.

Seorang pemula dapat memiliki membuat pertama mereka dengan App Inventor hanya
dengan waktu satu jam atau bahkan bisa kurang, dan dapat memprogram aplikasi yang lebih
kompleks dengan waktu yang relatif cepat dibanding dengan pemrograman pada umumnya. Bahasa
yang digunakan berbasis teks yang lebih tradisional (mudah). Awalnya dikembangkan oleh Profesor
Hal Abelson dan timnya dari Google Education pada saat sedang cuti di Google. App Inventor
berjalan sebagai layanan Web yang dikelola oleh staf di MIT Center for Mobile Learning - sebuah
kolaborasi dari MIT Computer Science and Artificial Intelligence Laboratory (CSAIL) dan MIT Media
Lab. MIT App Inventor mendukung komunitas di seluruh dunia hampir dua juta pengguna yang
mewakili 195 negara di seluruh dunia. Lebih dari 85 ribu pengguna aktif setiap minggunya. Tool ini
telah membuat lebih dari 4,7 juta aplikasi android. Sebuah tool open source untuk pemrograman
sekaligus penciptaan aplikasi yang dapat diakses berbagai orang dari seluruh dunia.

App inventor sudah mendapat perhatian pada:

 Pendidik formal dan informal
 Pemerintah dan masyarakat karyawan dan relawan
 Desainer dan manajer produk
 Penggemar dan Pengusaha

Menyiapkan App Inventor

Untuk versi online, kita harus mempunyai akun Gmail, sedangkan untuk versi offline tidak
harus. Anda dapat mengatur App Inventor dan mulai membangun aplikasi dalam hitungan menit.
Designer dan Blok Editor dapat dijalankan sepenuhnya dalam browser (cloud-Versi Online). Untuk
melihat aplikasi Anda pada perangkat Android ketika saat Anda menggunakan App Inventor (juga
disebut "Live Test"), Anda harus mengikuti langkah-langkah di bawah ini.
 Opsi Satu (Membangun aplikasi dengan perangkat Android dan WiFi Connection)

Jika Anda memiliki komputer, perangkat Android, dan koneksi WiFi, ini adalah cara termudah
untuk menguji aplikasi Anda. Cara ini paling direkomendasikan.

Gambar 1. Pengujian menggunakan perangkat andorid dengan koneksi via WiFi
 Opsi Dua (Tidak memiliki perangkat Android? Gunakan Emulator)

Jika Anda tidak memiliki ponsel Android atau tablet yang akan digunakan, Anda masih dapat
menggunakan App Inventor, yaitu dengan menggunakan emulator.

4

Gambar 2. Pengujian menggunakan emulator
 Opsi Tiga (Tidak ada WiFi? Membangun aplikasi dengan perangkat Android dan Kabel USB)

Beberapa firewall di sekolah-sekolah dan instansi tertentu melarang jenis koneksi WiFi yang
dibutuhkan. Jika WiFi tidak bekerja untuk Anda, cobalah USB.

Gambar 3. Pengujian menggunakan perangkat andorid dengan koneksi via kabel USB

Kebutuhan Sistem

Catatan : Tidak bisa menggunakan browser Internet Explorer. Direkomendasikan menggunakan
browser Chrome or Firefox.

Sistem Operasi dan Hardware yang dibutuhkan:
 Macintosh (with Intel processor): Mac OS X 10.5 or higher
 Windows: Windows XP, Windows Vista, Windows 7
 GNU/Linux: Ubuntu 8 or higher, Debian 5 or higher - NOTE: GNU/Linux live development is only

supported for WiFi connections between computer and Android device.
Browser
1. Mozilla Firefox 3.6 or higher
2. Note: If you are using Firefox with the NoScript extension, you'll need to turn the extension off.

See the note on the troubleshooting page.
3. Apple Safari 5.0 or higher
4. Google Chrome 4.0 or higher
5. Microsoft Internet Explorer is not supported
Phone or Tablet (or use the on-screen emulator)
 Android Operating System 2.3 ("Gingerbread") or higher

5

Mengenal Antamuka AI2

Pada bagian ini Anda akan mulai mendesain dan membuat sebuah program. Sesi “Mengenal
Antarmuka Ai2” akan dijelaskan secara singkat bagian-bagian dari antarmuka dari App Inventor 2.
Ada 2 tampilan pada App Inventor 2 yaitu Design View dan Blocks View. Gambar 26 adalah tampilan
dari Design View versi Online, ini tidak berbeda jauh dengan versi offlinenya.

Gambar 26. Tampilan antarmuka App Inventor 2 (Design View).

Pada tampilan ini (Design View) terdapat kotak besar yang berada di tengah yang kita kenal
dengan Viewer. Viewer ini merupakan tampilan kasar dari aplikasi yang kita buat pada android
device. Di Viewer Anda bisa melihat baterai, waktu dan jaringan itu semua seperti tampilan yang ada
di handphone Anda. Tapi perlu diingat bahwa apa yang anda lihat dalam Design view itu belum tentu
seperti apa yang anda lihat dalam handphone Anda. Maka dari itu untuk mendesain atau membuat
sebuah aplikasi Android Anda harus menghubungkan Komputer dan App Inventor pada perangkat
android Anda yang sebenarnya. Anda harus mengetes aplikasi Anda pada perangkat yang
sesungguhnya.

Untuk masuk ke dalam tampilan Block Editor tekan tombol blocks yang berada pada sisi
kanan atas. Block dalam App Inventor itu seperti sebuah statement atau instruksi yang berada
dalam Bahasa pemograman. Jadi dalam membuat aplikasi Android dengan menggunakan App
Inventor lebih menyenangkan. Setelah di klik pada tombol blocks maka muncul seperti pada
Gambar 27.

6

Gambar 27. Tampilan antarmuka App Inventor 2 (Blocks View).

Mengenal Design View

Membuat aplikasi Android dengan menggunakan App Inventor terdiri dari dua langkah
utama. Yang Pertama ialah menggunakan Design View untuk menambahkan komponen-
komponen kedalam projek anda. Beberapa komponen seperti tampilan, tobol-tombol, dan
sebuah tempat untuk memasukkan text(text field). Dari tampilan ini kita mendesain User Interface
atau bagaimana cara aplikasi ini dapat berinteraksi dengan pengguna. Beberapa macam
komponen yang tidak terlihat tapi sangat berguna seperti database dan pengaturan layar. Dalam
sesi selanjutnya saya akan mencoba untuk menjelaskan bagaimana cara mendesain sebuah
tampilan.

Design View terdiri dari lima komponen dasar:
o Palette
o Viewer
o Component
o Media
o Properties

Palette

Palette terdiri dari objek (komponen) apa saja yang bisa anda gunakan ke dalam aplikasi
android anda. Palette terdiri dari beberapa grup semuanya dikelompokkan kedalam satu grup jika
memiliki tema/fungsi yang sama. Contohnya User Interface yang memiliki fungsi digunakan untuk
mengatur interaksi aplikasi dengan si pengguna yang terdiri dari button, check box, clock,
image, label, dan lain-lain. Cara untuk menampilkan atau menyembunyikan anggota dari
suatu kelompok kita perlu mengeklik pada nama kelompok itu.

7

Gambar 28. Tampilan palette pada Design View

The Viewer

Merupakan tempat kita menempatkan komponen-komponen yang akan ditampilkan pada layar
perangkat android kita dan komponen–komponen yang bisa di atur posisi layoutnya. Pada viewer,
kita juga bisa melihat komponen yang tidak bisa kita lihat dengan handphone.

8

Gambar 29. Tampilan viewer pada Design View

Component

Terdiri dari daftar komponen apa saja yang telah kita tambahkan ke dalam projek kita
baik yang bersifat terlihat maupun tidak terlihat dalam perangkat android kita. Tampilannya
berupa susunan atau daftar (seperti root explorer) yang memudahkan kita untuk mengatur
komponen atau melihat apasaja yang berbentuk seperti direktori.

Gambar 30. Tampilan Componens pada Design View

9

Media

Kolom Media terletak di bawah dari kolom Component. Kolom ini digunakan untuk mengatur
(menambah dan menghapus) semua media komponen untuk mendukung aplikasi yang telah
anda buat. Tipe media yang dapat ditambahkan ke dalam kolom media adalah gambar, clip art,
musik, dan f i lm. Anda juga dapat menambahkan media secara langsung kedalam kolom
Propertiy. Media yang anda tambahkan ke dalam App Inventor diambil dari computer dan
diupload ke dalam App Inventor. Semua media yang anda tambahkan ke dalam sebuah aplikasi
Android tidak boleh melebihi 5 MB.

Di dalam kolom media anda juga bisa menghapus atau mendownload media yang telah
ditambahkan dengan meng-klik nama medianya sehingga nanti akan muncul pilihan delete untuk
perintah menghapus atau klik download to my computer untuk perintah mendownload ke
komputer.

Gambar 30. Tampilan Media pada Design View

Properties

Setiap komponen yang anda tambahkan ke dalam projek, anda dapat mengatur komponen
itu bagaiman dia berinteraksi dengan pengguna maupun dengan komponen lain, atau bagaimana
tampilannya. Setiap komponen pada App Inventor memiliki kolom properties yang berbeda-beda.

Gambar 30. Tampilan Properties Clock1 pada Design View

10

Membuat Aplikasi Sederhana

Berikut ini tutorial membuat aplikasi sederhana melalui app inventor 2.
1. Akses http://ai2.appinventor.mit.edu/ (online) atau localhost:8888 (offline)

Login dengan akun google anda.
2. Pilih Start New Project yang berada di kiri atas layar. Masukkan nama project yang diinginkan,

misal "Hallo". Lalu piilh OK.

Gambar 31. Tampilan memberi nama project baru

3. Setting pada Component Screen1 pada Properties-nya seperti Gambar 32.

Gambar 32. Mengubah Properties Screen1

4. Desain tampilan aplikasi dengan memanfaatkan fitur dari palette. Masukkan komponen dari
palette ke viewer dengan cara drag and drop komponen yang diinginkan.

 Pertama drag and drop komponen Button (sebanyak 2) dan Label (sebanyak 1) dari
palette “User interface”, kemudian atur propertiesnya sesuai Gambar 33.

Gambar 33. Desain Komponen

11

5. Setelah mendesain tampilan screen, saatnya masuk ke menu Blocks dan lakukan program
berdasarkan seperti pada Gambar 34.

Gambar 34. Desain Block untuk Aplikasi Hallo
6. Setelah selesai memprogram, selanjutnya klik connect dan pilih AI Companion seperti Gambar

35, kemudian scan codenya atau masukkan codenya dengan menjalankan aplikasi AICompanion
dari smartphone android dan Anda dapat melihat hasilnya di smartphone android Anda.

7. Untuk menjadikan project tersebut menjadi sebuah file .apk dengan cara klik Build dan disimpan
pada my computer. Kemudian kirim file apk tadi ke smartphone android, install, dan jalankan.

12

Membuat Music Player Sederhana

Berikut ini tutorial membuat aplikasi player musik sederhana melalui app inventor 2.
1. Akses http://ai2.appinventor.mit.edu/ (online) atau localhost:8888 (offline)

Login dengan akun google anda.
2. Pilih Start New Project yang berada di kiri atas layar. Masukkan nama project yang diinginkan,

misal "Musik". Lalu piilh OK.

Gambar 32. Tampilan memberi nama project baru

3. Desain tampilan aplikasi terlebih dahulu dengan memanfaatkan fitur pada palette. Masukkan
komponen dari palette ke viewer dengan cara drag and drop komponen yang diinginkan.
 Pertama drag and drop komponen Label dari palette “User interface”, kemudian atur
propertiesnya sesuai gambar dibawah
 Selanjutnya pilih komponen Horizontal Arrangement yang berada di palette “Layout”
 Masukan komponen notifier dan masukan tiga buah button dari palette “User interface”
dan letakkan di dalam Horizontal Arrangement. Desain tampilan aplikasi semenarik
mungkin.

Gambar 32. Tampilan desain dari project player musik sederhana

13

 Tambahkan komponen Player dari Palette”Media”. Pilih salah satu file musik melalui
properties Source dari komponen player dengan cara klik pada “none..”

Gambar 33. Properties dari Player untuk memilih file musik

4. Setelah mendesain tampilan screen, saatnya masuk ke menu Blocks dan lakukan program
berdasarkan logika logika yang diinginkan.

Gambar 34. Block Code dari aplikasi player musik

5. Setelah selesai memprogram. Jadikan project tersebut menjadi sebuah file .apk dengan cara klik
Build dan disimpan pada my computer. Kemudian kirim file apk tadi ke smartphone android,
install, dan jalankan.

Gambar 35. Tampilan player musik pada android

14

Membuat Splash Screen

1. Akses http://ai2.appinventor.mit.edu/ (online) atau localhost:8888 (offline)
Login dengan akun google anda.

2. Pilih Start New Project yang berada di kiri atas layar. Masukkan nama project yang diinginkan,
misal "SplashScreen". Lalu piilh OK.

Gambar 36. Tampilan memberi nama project Splash Screen

3. Desain tampilan aplikasi terlebih dahulu dengan memanfaatkan fitur pada palette. Masukkan
Komponen dari palette ke viewer dengan cara drag and drop komponen yang diinginkan.
 Pertama drag and drop komponen Image dari palette “User interface”, kemudian atur
propertiesnya sesuai gambar dibawah

Gambar 37. Desain tampilan project SplashScreen

Gambar 38. Properties pada komponen Image1

15

 Selanjutnya pilih komponen clock yang berada di palette “Sensor”. Atur propertiesnya
seperti gambar.

Gambar 39. Properties pada komponen Clock1

4. Add new screen sebagai contoh saya beri nama Screen2

Gambar 40. Menambah Screen baru dengan nama Screen2

5. Kemudian ke Screen1, buat block code seperti seperti berikut.

Gambar 41. Block Code pada Screen1

16

Membuat Aplikasi Database Sederhana

1. Akses http://ai2.appinventor.mit.edu/ (online) atau localhost:8888 (offline)
Login dengan akun google anda.

2. Pilih Start New Project yang berada di kiri atas layar. Masukkan nama project yang diinginkan,
misal "Database1". Lalu piilh OK.

Gambar 42. Tampilan memberi nama project Database

3. Desain tampilan aplikasi terlebih dahulu dengan memanfaatkan fitur pada palette. Masukkan
Komponen dari palette ke viewer dengan cara drag and drop komponen yang diinginkan.
 Pertama drag and drop komponen TextBox dari palette “User interface”, kemudian atur
propertiesnya sesuai gambar dibawah
 Selanjutnya pilih komponen Horizontal Arrangement yang berada di palette “Layout”
 Masukan masukan tiga buah button dari palette “User interface” dan letakkan di dalam
Horizontal Arrangement. Desain tampilan aplikasi semenarik mungkin.
 Masukan komponen TinyDB dari palette “Storage” dan letakkan di dalam screen1

Gambar 43. Tampilan desain dari project database sederhana

17

4. Setelah mendesain tampilan screen, saatnya masuk ke menu Blocks dan lakukan program
berdasarkan seperti pada Gambar 44.

Gambar 44. Desain Block untuk Aplikasi Database Sederhana
5. Setelah selesai memprogram. Jadikan project tersebut menjadi sebuah file .apk dengan cara klik

Build dan disimpan pada my computer. Kemudian kirim file apk tadi ke smartphone android,
install, dan jalankan.

18

Membuat Video Player Sederhana

Berikut ini tutorial membuat aplikasi player video sederhana melalui app inventor 2.
1. Akses http://ai2.appinventor.mit.edu/ (online) atau localhost:8888 (offline)

Login dengan akun google anda.
2. Pilih Start New Project yang berada di kiri atas layar. Masukkan nama project yang diinginkan,

misal "VideoPlayer". Lalu piilh OK.

Gambar 45. Tampilan memberi nama project baru

3. Desain tampilan aplikasi terlebih dahulu dengan memanfaatkan fitur pada palette. Masukkan
komponen dari palette ke viewer dengan cara drag and drop komponen yang diinginkan.
 Pertama drag and drop komponen VideoPlayer dari palette “Media”, kemudian atur
propertiesnya sesuai gambar dibawah
 Selanjutnya pilih komponen Horizontal Arrangement yang berada di palette “Layout”
 Masukan dua buah komponen button dari palette “User interface” dan letakkan di
dalam Horizontal Arrangement. Desain tampilan aplikasi semenarik mungkin.

Gambar 46. Tampilan desain dari project player video sederhana

19

 Pilih salah satu file video melalui properties Source dari komponen VideoPlayer dengan
cara klik pada “none..”

Gambar 47. Properties dari VideoPlayer untuk memilih file musik

4. Setelah mendesain tampilan screen, saatnya masuk ke menu Blocks dan lakukan program
berdasarkan logika logika yang diinginkan.

Gambar 48. Block Code dari aplikasi player video

5. Setelah selesai memprogram. Jadikan project tersebut menjadi sebuah file .apk dengan cara klik
Build dan disimpan pada my computer. Kemudian kirim file apk tadi ke smartphone android,
install, dan jalankan.

20

Membuat Paket dan Menyebarkan

Anda dapat menyebarkan aplikasi yang sudah dibuat dalam bentuk executable (.apk)
sehingga bisa dipasang pada perangkat android. Anda juga dapat berbagi source code-nya dalam
bentuk file berekstensi .aia sehingga bisa dibuka dikomputer lain pada akun gmail yang berbeda,
sehingga kita bisa merubah dan mengeditnya. Untuk mendistribusikan aplikasi yang sudah dibuat,
pada umumnya di tarud di Google Play Store.

Berbagi source code (.aia)

Pastikan Anda melihat semua daftar dari project-project Anda (Jika tidak, pilih Project | My
Projects). Pilih project yang Anda inginkan untuk di simpan dengan cara memberi centang (v) pada
check box-nya. Pilih Project | Export selected project (.aia) to my computer untuk menyimpan
(export) source code (blocks) dari project anda. Source code tersimpan dalam bentuk file
berekstensi .aia.

Gambar 49. Cara mengekspor source code dari suatu project

Untuk membuka (import) kembali file .aia ke akun lain atau komputer lain caranya dengan

klik Project | Import project (.aia) from my computer.

Gambar 50. Cara mengimpor source code dari suatu project

21

Berbagi aplikasi untuk dipasang pada perangkat android (.apk file)

Untuk membangun (build) paket aplikasi (file .apk) dari project yang sudah dibuat caranya dengan meng-
klik pada menu "Build" pada toolbar App Inventor.

Gambar 51. Tampilan untuk membuat file .apk
Pilih "App (save .apk to my computer)" apabila anda ingin menyimpan langsung file apknya ke
komputer Anda. Setelah dipilih akan muncul kotak pop-up box yang menandakan bahwa file .apk sedang dalam
proses kompilasi dan dilanjutnya proses download. Sedangkan untuk pilihan “provide QR code for .apk” akan
menampilkan jendela QR code yang harus discan menggunakan perangkat android kita sehingga aplikasi akan
langsung terpasang pada perangkat android kita.

Gambar 52. Tampilan Progress Bar pada saat membuat file .apk
File .apk yang sudah dibuat dapat anda distribusikan melalui email ke teman anda, atau bisa anda taruh di
website anda sehingga banyak orang bisa mendownloadnya. Anda juga dapat mendistribusikan aplikasi yang
sudah anda buat melalui Google Play Store.
Untuk memasang file .apk langsung dari komputer pastikan setting perangkat android anda untuk
membolehkan memasang aplikasi selain dari Google Play Store sudah tercentang, yaitu untuk Android 4 atau
lebih tinggi pada "Settings > Applications" dan kemudian beri tanda cek pada chek box "Unknown Sources".
Untuk perangkat Android 4.0 atau dibawahnya, melalui "Settings > Security" atau "Settings > Security &
Screen Lock" dan kemudian beri tanda cek pada chek box "Unknown Sources" dan konfirmasi pemilihan
anda..

22

Sumber Bacaan

o http://appinventor.mit.edu/
o http://www.appinventor.org/
o http://pandugalau.com/tutorial-cara-install-app-inventor-versi-offline-ai2livecomplete/
o http://pramadiheryo.blogspot.com/2014/11/tutorial-app-inventor-2-membuat-music.html

23