MODUL PELATIHAN

PEMBUATAN APLIKASI

Menggunakan

2
Disusun Oleh:

Riza Arifudin
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
Cara Install App Inventor Versi Offline ................................................................................................... 6
Mengenal Antamuka AI2 ...................................................................................................................... 15
Mengenal Design View ...................................................................................................................... 16
Palette ............................................................................................................................................... 16
The Viewer ........................................................................................................................................ 17
Component ....................................................................................................................................... 18
Media ................................................................................................................................................ 19
Properties .......................................................................................................................................... 19
Membuat Music Player Sederhana ....................................................................................................... 20
Membuat Splash Screen ....................................................................................................................... 22
Membuat Paket dan Menyebarkan ...................................................................................................... 24
Berbagi source code (.aia)................................................................................................................. 24
Berbagi aplikasi untuk dipasang pada perangkat android (.apk file) ................................................ 25
Sumber Bacaan ..................................................................................................................................... 26
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.
 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
Cara Install App Inventor Versi Offline
Untuk membuat aplikasi android dengan App Inventor, kita bisa menggunakan 2 cara yaitu
Online dan Offline. Untuk membuat aplikasi android secara online dengan App Inventor, caranya
cukup mudah, Anda bisa langsung membuka aplikasinya di link
berikut http://ai2.appinventor.mit.edu/

Gambar 3. Tampilan App Inventor 2 versi Online

Sedangkan untuk yang Offline dapat didapatkan dari M. Hossein Amerkashi yang sudah
mengembangkan App Inventor versi Offline dengan nama Ai2LiveComplete. Ada perbedaan versi
online dan offline yaitu pada versi online Anda butuh koneksi internet, sedangkan untuk versi Offline
Anda tidak perlu untuk koneksi internet.
Berikut ini adalah langkah-langkah install App Inventor Versi Offline atau biasa disebut
Ai2LiveComplete:
1. Download Ai2LiveComplete! di link berikut http://sourceforge.net/projects/ailivecomplete/

Gambar 4. Tampilan untuk mendownload Ai2LiveComplete

2. Setelah download nya selesai, selanjutnya file Ai2LiveComplete.zip di-extract ke direktori

C/D Anda.
 Gambar 5. Tampilan file Ai2LiveComplete dalam bentuk zip

Gambar 6. Tampilan folder Ai2LiveComplete hasil ekstrak file

3. Sebelum dilanjutkan kembali, pastikan komputer atau laptop Anda sudah ter-install JDK.
kalau belum ada atau belum install, Anda bisa download http://www.oracle.com/
technetwork/ java/javase/downloads/jdk7-downloads-1880260.html, kemudian install dulu.
4. Setelah itu, Anda atur environment variable JAVA_HOME untuk menunjuk folder JDK yang
sudah ter-install. Caranya adalah dengan klik kanan pada icon My Computer di desktop, lalu
klik Properties.
5. Selanjutnya klik Advanced system settings,

Gambar 7. Tampilan Advanced system settings

6. Maka akan muncul window System Properties, selanjutnya klik Environment Variables…
 Gambar 8. Tampilan System Properties

7. Maka akan muncul jendela Environment Variables, kemudian klik New… seperti gambar
dibawah ini

Gambar 9. Tampilan Environment Variables

8. Maka akan tampil jendela New User Variable, kemudian isi

 Variable name : JAVA_HOME
  Variable value : C:\Program Files\Java\jdk 1.7.0 atau alamat dimana JDK Anda ter-
installl
Lengkapnya seperti gambar dibawah ini

Gambar 10. Tampilan dari New User Variable

9. Kembali ke folder Ai2LiveComplete, selanjutnya klik 2 kali pada WinStartAIServer.cmd

Gambar 11. Tampilan dari folder Ai2LiveComplete

10. Maka akan muncul jendela cmd yang menandakan bahwa server AiLiveComplete sedang
dijalankan seperti gambar dibawah ini

(a)
 (b)
Gambar 12. Tampilan dari jendela cmd.exe

11. Selanjutnya silakan buka browser Anda. Lalu ketikan saja di kotak address
nya http://localhost:8888 Maka akan tampil seperti dibawah ini. Silakan isi email Anda atau
langsung aja klik Log In

Gambar 13. Tampilan halaman login

Gambar 14. Tampilan jendela setelah login berhasil

12. Apabila Anda sudah berhasil Login di App Inventor versi Offline ini. Tampilannya tidak
berbeda jauh dengan tampilan App Inventor versi Online.
 Gambar 15. Tampilan antarmuka App Inventor 2 offline

13. Selanjutnya Anda coba buat project baru, klik New Project

Gambar 16. Tombol untuk memulai membuat project baru

14. Isikan nama project yang Anda inginkan, misalnya Test

Gambar 17. Memberi nama project baru

15. Anda bisa langsung buat aplikasi Android yang Anda inginkan, cukup drag & drop
komponennya, lalu drag & drop block events nya.
 Gambar 18. Contoh menambah komponen pada project

16. Apabila Anda ingin menyimpan atau men-download file .apk dari project aplikasi android
yang sudah dibuat. Pertama-tama, Anda klik 2 kali pada file
WinStartBuildServerWithHeap.cmd untuk menjalankan server Build nya pada cmd.

Gambar 19. Menjalankan file WinStartBuildServerWithHeap.cmd

Gambar 19. Tampilan file WinStartBuildServerWithHeap.cmd yang sedang berjalan

17. Selanjutnya kembali lagi ke browser yang sudah membuka App Inventor dan menampilkan
project Android yang ingin di-download .apk nya..

18. Pada Menu Bar, klik Build, lalu pilih App (save .apk to my computer) seperti gambar
dibawah ini.

Gambar 20. Tampilan untuk menyimpan apk ke komputer.

19. Kemudian akan tampil Progress Bar yang menandakan bahwa project sedang di-Build untuk
menghasilkan .apk nya.

Gambar 21. Tampilan progress bar pada saat menyimpan apk.

20. Apabila Progress Bar sudah menunjukkan 100% maka akan tampil tulisan “The APK file will
be saved in download folder” yang berarti file APK sudah selesai di-Build dan siap untuk di-
download.

Gambar 22. Tampilan progress bar pada saat selesai menyimpan apk.

21. Apabila Anda cek di cmd yang sudah Anda buka sebelumnya, maka terdapat tulisan INFO :
BUILD 1 FINISHED yang berarti file APK sudah berhasil dibuat.

Gambar 23. Tampilan jendela cmd saat berhasil menyimpan apk.

22. Secara otomatis akan langsung men-download seperti gambar di bawah ini.

Gambar 24. Tampilan jendela cmd saat berhasil menyimpan apk.

23. Langkah terakhir, coba Anda cek di direktori penyimpanan folder, dimana file Test.apk siap
untuk di-install di smartphone Android Anda.

Gambar 25. Tampilan file apk di explorer.

Selamat Mencoba dan Berkreasi.

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.
 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.
 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.
 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

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

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 31. 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

  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

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

  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

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 31. 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 32. Cara mengimpor source code dari suatu project

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 33. 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 33. 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..
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