1. Artikel menjelaskan cara membuat aplikasi sederhana GombalGembel menggunakan App Inventor yang menyimpan dan menampilkan kata-kata rayuan secara acak. 2. Aplikasi ini menyimpan kata-kata rayuan dalam sebuah list dan memilih item list secara acak untuk ditampilkan di label dan textbox. 3. Penggunaan komponen seperti button, textbox, label dan horizontal arrangement diperlukan untuk mendesain antarmuka pen

1. Aplikasi Android GombalGembel dengan App Inventor
Mengenal App Inventor lebih dalam (6)
Projek kali ini kita akan membuat aplikasi sederhana GombalGembel, aplikasi ini pada intinya menyimpan kata-kata (Quotes)
dan kemudian menampilkan secara acak ketika kita mengklik tombolnya. Aplikasinya ini bisa dikembangkan menjadi berbagai
macam aplikasi, misal do’a, kata-kata motivasi, catatan-catatan kecil, atau juga sepertu yang akan kita buat disini, kata-kata
rayuan GombalGembel .
Yang bisa dipakai untuk membuat pacar, istri atau gebetan tersenyum-senyum bahagia ketika menggunakan aplikasi ini.
Sekaligus kita akan belajar membuat List, memilih List, juga menampilkannya secara acak pada Label atau Textbox.
Untuk membuatnya bisa dengan App Inventor True Offline (App Inventor Personal Server), yaitu App Inventor yang bisa
digunakan tanpa harus terkoneksi dengan internet. Tentu saja kita harus mendownloadnya terlebih dahulu di
http://sourceforge.net/projects/ai4a-configs/files/Personal%20server/ . Silahkan baca keterangan (Readme) untuk instalasi
dan cara menggunakannya, atau bisa melihat artikel pada blog penulis http://indo-android.blogspot.com/2012/07/app-
inventor-true-offline-app-inventor.html :) .
Logika dari aplikasi ini adalah :
Siapkan teks dari Quotes GombalGembel pada sebuah List yaitu pada Blocks Make List, setelah itu kaitkan pada sebuah
variable (Define Variables, Built-in > Definition > def variable as) yang kita namakan saja GombalGembel. kemudian untuk
memilih teks pada List itu gunakan Blocks Select List Item , dimana List-nya adalah variable global GombalGembel (yg diambil
dari MyBlocks>MyDefinitions>global GombalGembel).
Disini List teks ketika ditampilkan akan diacak dengan menggunakan Blocks Random Integer (Built In > Math > Random
Integer), yang diset dari 1 s/d 5 sesuai jumlah List Quotes dan ditampilkan pada komponen Textbox dan Label, mengapa
menggunakan dua komponen?, alasannya adalah hanya untuk memperlihatkan saja bahwa kita bisa menggunakan komponen
tersebut untuk menampilkan. Button Clear digunakan untuk mengeset teks di Textbox dan Label menjadi kosong apabila kita
perlukan, karena ketika kita tekan pada Tombol Klik, maka secara otomatis teks akan tampil secara acak.
Ok, Langsung saja :
1. Desain terlebih dahulu UI (User Interface) pada Desainer, dan komponen utama yang akan kita gunakan
adalah : Button, Textbox, Label, kemudian HorizontalArrangement untuk merapikannya.
Iki Mazadi http://indo-android.blogspot.com

2. Gb 1. Desain UI pada Jendela Desainer
Gb 2. Komponen pada UI
2. Pada Blocks Editor, susun blocks seperti ini :
Iki Mazadi http://indo-android.blogspot.com

3. Gb 3. Blocks komponen
3. Setelah itu kita bisa mencobanya pada Emulator, sehingga akan terlihat seperti ini :
Gb 4. Aplikasi pada Emulator
4. Terakhir, agar aplikasi ini bisa kita kirimkan ke gebetan, download pada Komputer kita dari Jendela Desainer Package
for Phone > Download to This Computer dan kirim dengan email atau koneksi lainnya.
Iki Mazadi http://indo-android.blogspot.com

4. Apabila ingin menggunakan App Inventor Online caranya :
1. Memiliki account gmail
2. Download & Install Java dari link ini http://www.java.com/en/download/manual.jsp pilih sesuai dengan sistem operasi
anda, misal untuk windows pilih versi untuk windows
3. Masuk ke http://beta.appinventor.mit.edu dan pilih menu learn > setup > untuk PC dengan sistem operasi windows
klik pada menu Instructions for Windows dan kemudian download installer atau bisa langsung diakses ke
http://dl.google.com/dl/appinventor/installers/windows/appinventor_setup_installer_v_1_2.exe kemudian install installer
ini.
4. Apabila sudah terinstall semua, untuk memulainya silahkan Masuk kembali ke http://beta.appinventor.mit.edu
Atau bisa menggunakan App Inventor personal server (Offline), jadi tidak membutuhkan koneksi internet untuk
menggunakannya. Saat ini versi App Inventor 1.4.6 bisa di Download pada link http://sourceforge.net/projects/ai4a-
configs/files/V1.4.6/
Well, silahkan dieksplorasi lagi agar lebih mantabs aplikasi GombalGembel ini. Bisa dikembangkan lagi jumlah Quotes-nya,
atau diganti menjadi Quotes Do’a atau Kata-kata Motivasi atau yang lainnya.
BOX
Yang perlu diperhatikan bagi yang baru saja menggunakan App Inventor adalah :
1. Penggunaan HorizontalArrangement, komponen ini akan sangat membantu dalam pembuatan UI (User Interface). Yaitu
agar komponen-komponen lain bisa disusun rapi jarak maupun tempat layoutnya pada layar. Selain bisa menggunakan
komponen HorizontalArrangement, kita juga bisa menggunakan komponen Screen Arrangement lain yaitu Table
Arrangement. Dengan komponen Table Arrangement kita bisa membuat layout UI secara tabular (Tabel), dan mendefinisikan
secara bebas berapa banyak Kolom dan Row-nya. Selain itu yang perlu diperhatikan adalah pengaturan propertis dari
komponen-komponen tersebut, dimana pada projek ini dilakukan pengaturan propertis lebar (Width) ke Fill Parent agar lebar
HorizontalArrangement otomatis sesuai dengan lebar layar.
2. Penggunaan variable (Define Variables, Built-in > Definition > def variable as). Variable ini akan selalu kita buat ketika kita
menampung suatu nilai, entah itu nilai teks ataupun nilai angka.
Iki Mazadi
Founder
http://indo-android.blogspot.com
http://www.gobaksodor.com
http://www.tidofriends.com
*Artikel ini di publikasikan di tabloid PC Plus 2012
Iki Mazadi http://indo-android.blogspot.com