membuat contoh aplikasi sederhana dengan App Inventor

Posted on April 26, 2013by bingeby

hmm.. emulator android sudah punya.., App Inventor sebagai tools untuk membuat aplikasi android pun sudah pernah dikenalkan, nah sekarang waktunya untuk praktek membuat aplikasi android sendiri dengan App Inventor yang katanya mudah itu hehe.., sebagai contoh saya akan membuat aplikasi katalog sederhana 7 keajaiban dunia, cekidot..

Halaman depan AppInventor

sebelum memulai membuat aplikasi, ada prerequisite program yang dibutuhkan untuk menjalankan App Inventor ini untuk membuka block editornya. block editor ini adalah serangkaian alur perintah pemrograman pada App Inventor, jadi yang biasanya kita membuat program dengan coding, kali ini kita membuat program berdasarkan alur perintah (block editor ini bentuknya seperti puzzle loh). bisa di-download

dihttp://appinventor.mit.edu/explore/install-app-inventorsoftware.html sesuaikan dengan operating system kalian, download, install ikuti petunjuknya. dan JAVA JDK bisa didownload di sini http://www.oracle.com/technetwork/java/javase/downloads/i ndex.html setelah selesai meng-install program tersebut, hal pertama yang selanjutnya dilakukan adalah membuka halaman App Inventor http://appinventor.mit.edu/ pilih invent untuk langsung membuat aplikasi android (untuk mengaksesnya kita harus memiliki akun google). ikuti petunjuknya sampai nanti kita ketemu editor App Inventor.

Editor pada AppInventor

saya upload beberapa gambar sebagian untuk sebagai display awalnya atau yang biasa kita sebut welcome screen atau splash screen. lalu sebagian lagi untuk gambar katalognya.

lalu buat beberapa screen baru (klik add screen) sebagai halaman baru untuk memunculkan katalognya (di pemrograman desktop biasa kita sebut form). saya menamakannya sesuai dengan nama negara-negaranya. disebelah kanan screen terdapat properties untuk mengatur tampilan dari screen tersebut.

setelah itu drag drop satu button dan dua label pada pallete di group basic ke viewer di screen1, lalu pada button edit properties dengan memasukan gambar logo pada properties image, hapus text button-nya. pada label, sesuaikan tulisannya dengan yang kita inginkan. sehingga jadi seperti ini

pada screen lainnya (sebagai contoh screen italy) kita bisa memasukan webviewer dari pallete agar konten dari screen tersebut dapat mengambil konten dari internet (kontennya sendiri saya masukan dari wikipedia). klik component-nya lalu masukan url sumber konten yang akan ditampilkan tersebut di properties. jangan lupa untuk memberi title pada properties screen, beri nama yang sesuai.

lakukan hal yang sama pada screen negara yang lainnya. kecuali pada screen MainMenu terdapat perbedaan. pada screen MainMenu, gunakan screenArrangement sesuaikan dengan kebutuhan lalu masukan beberapa button pada screenArrangement tersebut. ubah kembali button-button tersebut seperti pada screen1 (masukan image pada tiap button, lalu hapus textnya).

lalu hal berikutnya yang harus dilakukan adalah memberi alur perintah di block editor. buka block editor pada kanan atas App Inventor. nanti akan ada aplikasi yang langsung di-download dan di-running oleh java. block editor ini adalah program terpisah tapi terintegrasi dengan App Inventor. buka screen1 pada App Inventor di browser, maka block editor akan membuka block editor untuk screen1. pada block editor screen1, buka tab My Block lalu nanti akan terbuka component apasaja yang ada pada screen1 yang kita buat tadi. pilih button lalu button.click (ini adalah event ketika button tersebut di klik oleh user), drag drop pada editornya. lalu pada tab built-in group control cari call open another screen. drag drop lalu tempelkan pada event button.click (seperti puzzle). masih pada tab built-in, pada group text cari text text lalu drag drop pada call open another screen lalu pada text-nya isikan nama screen yang akan kita buka apabila user klik button tersebut (disini saya MainMenu). sehingga bila user klik button tersebut, maka keluar

screen MainMenu. sehingga puzzle yang tadi kita buat menjadi seperti ini

apabila kita ingin mencoba hasil dari block editor, klik new emulator, tunggu sampai emulator android keluar, lalu connect to device dan pilih device emulator yang sedang jalan. tetapi kita tidak bisa mencoba keseluruhan eventnya seperti pindah screen, tapi hal tersebut bisa kita lakukan dengan membuat package dari aplikasi yang kita buat lalu menjalankannya pada emulator dari AVD manager. pada App Inventor di browser, buka screen MainMenu, sehingga block editor berganti jadi block editor MainMenu. lakukan alur perintah ganti screen seperti pada screen1. lakukan untuk semua screen yang tersisa sebagai katalog.

jadi, alur program yang kita buat adalah Splash screen (screen1) > screen main menu (pilih salah satu keajaiban dunia) > screen katalog yang menampilkan konten dari webviewer wikipedia. selesai membuat aplikasinya, kita harus mencobanya. kembali pada App Inventor di browser, pada kanan atas terdapat package for phone, klik lalu pilih download to this computer untuk kita mencobanya pada emulator android AVD manager. setelah selesai download, install hasilnya pada emulator (bagi yang belum tahu, cara install-nya bisa dilihat disini). lalu jalankan aplikasinya pada emulator android AVD manager. setelah dijalankan, hasilnya sebagai berikut.

demikian aplikasi android sederhana sudah kita buat, semoga bermanfaat dan semoga kita bisa membuat aplikasi yang lebih baik lagi. terima kasih