Kita akan belajar mengakses peta dari aplikasi yang kita buat dengan menggunakan Intent

1. 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.VIEW
2. ActivityPackage : com.google.android.maps.MapsActivity
3. ActivityClass : com.google.android.apps.maps
Gb.1 User Interface
Iki Mazadi http://indo-android.blogspot.com

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

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

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

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

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