Aplikasi Peta dengan Menggunakan Intent pada App Inventor

Mengenal App Inventor lebih dalam (8)

Pada tutorial sebelumnya kita telah mengenal Intent (ActivityStarter) pada App Inventor dan membuat sebuah aplikasi yang akan mengakses aplikasi kamera. Disini kita akan menggunakan kembali ActivityStarter untuk mengakses peta. Selain itu kita akan menggunakan komponen List Picker, yaitu sebuah komponen List pada UI (User Interface) untuk memilih daftar pilihan yang telah kita siapkan sebelumnya.

Untuk UI kita hanya akan menggunakan komponen List Picker dan ActivityStarter, sedangkan untuk mengakses peta (Google Maps), properties yang harus diset pada Activity Starter adalah :

1. Action : android.intent.action.VIEW2. ActivityPackage : com.google.android.maps.MapsActivity3. ActivityClass : com.google.android.apps.maps

Gb.1 User Interface

Iki Mazadi http://indo-android.blogspot.com

Gb.2 Components dan Properties

Setelah komponen terpasang dan properties pada ActivityStarter sudah kita setting, langkah selanjutnya adalah langsung kita ke jendela Blocks Editor. Pertama kita akan membuat sebuah list tempat, yang mendefinisikan tujuan dari peta yang akan kita buat, dan pada UI akan kita akses melalui komponen ListPicker. Caranya yaitu dengan menggunakan blocks make a list, masukkan teks nama tempat, dan tempatkan pada sebuah Variabel yang kita namakan saja Tujuan.

Gb.3 Blocks ListPicker

Selanjutnya, kita ingin ketika membuka aplikasi maka ListPicker telah terisi List-nya oleh List yang kita buat sebelumnya. Untuk itu kita menggunakan blocks Screen.Initialize yang akan memuat secara otomatis begitu aplikasi dijalankan, dimana yang kita baca adalah elemen dari List yang kita tampung pada variable (dalam hal ini variabel Tujuan). Blocks ListPicker yang kita gunakan adalah ListPicker.Elements dan dikaitkan dengan global variabel Tujuan.

Iki Mazadi http://indo-android.blogspot.com

Gb.4 Screen1.Initialize

Gb.5 Tampilan List

Tahapan selanjutnya adalah menginisialisasi apa yang akan dilakukan setelah ListPicker dipilih, yaitu ketika kita memilih satu dari tiga list yang dibuat. Tentu saja yang kita inginkan adalah begitu kita memilih salahsatu list, kita tap, maka akan terbuka peta sesuai dengan yang dipilih. Untuk itu digunakan blocks ListPicker.AfterPicking , dan point penting selanjutnya adalah mengeset ActivityStarter.DataUri. Blocks ini berfungsi untuk melakukan panggilan http ke alamat tujuan dari peta.

Untuk itu kita memberikan alamat url dari peta (Google Maps), yang kita tuliskan pada sebuah blocks text, yaitu format alamat pencarian peta secara umum dari Google Maps http://maps.google.com/maps?q= . Sedangkan point tujuan diambil pada blocks ListPicker.Selection. Setelah itu gabungkan teks alamat url tersebut melalui blocks make Text , sehingga nantinya ketika kita tap pada list, alamat tersebut akan lengkap, misalnya http://maps.google.com/maps?q= “Bromo Indonesia” . Terakhir untuk mengeksekusinya kita menggunakan blocks ActivityStarter.StartActivity , dimana blocks ini digunakan untuk mentrigger Activity agar dijalankan.

Iki Mazadi http://indo-android.blogspot.com

Gb.6 Block ListPicker.AfterPicking

Sampai tahap ini kita telah menyelesaikan semua langkah untuk membuat aplikasi ini, point yang terpenting adalah pada ListPicker, kemudian bagaimana menginisialisasi List dengan menggunakan Screen.Initialize. Kemudian menghandle event yang terjadi setelah List dipilih, yang dalam hal ini dengan menggunakan blocks ListPicker.AfterPicking. Selanjutnya adalah menggunakan ActivityStarter.DataUri untuk memasukkan alamat tujuan dari peta sesuai dengan yang kita inginkan, dan terakhir mengeksekusinya dengan menggunakan blocks ActivityStarter.StartActivity.

Kita bisa mencoba aplikasi pada Emulator, dan asalkan Komputer kerja kita terkoneksi dengan Internet maka bisa langsung menjalankan aplikasi persis seperti apabila kita jalankan pada handset. Mengenai terbukanya peta akan tergantung pada kecepatan koneksi, pada awal akan muncul notifikasi “Waiting for location” , itu berarti sedang dilakukan pencarian lokasi peta. Dan apabila ditemukan akan muncul notifikasi pencarian lokasi yang kita tap sesuai pada List. Kemudian terakhir peta dari lokasi yang kita cari akan dimuat ditampilkan.

Gb.8 Pencarian Peta Tujuan

Iki Mazadi http://indo-android.blogspot.com

Gb.8 Pencarian Peta Tujuan

Gb.9 Peta Bromo

Sedangkan blocks lengkap dari aplikasi ini bisa dilihat dalam gambar Gb.10 Block Lengkap Aplikasi .

Iki Mazadi http://indo-android.blogspot.com

Gb.10 Block Lengkap Aplikasi

Aplikasi ini dibuat dengan menggunakan App Inventor versi true offline (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 :)

Saat ini versi App Inventor Personal Server Offline 1.4.6 bisa di Download pada link http://sourceforge.net/projects/ai4a-configs/files/V1.4.6/

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