Seri 8 : Aplikasi peta dengan menggunakan intent pada app inventor
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

Seri 8 : Aplikasi peta dengan menggunakan intent pada app inventor

  • 1,831 views
Uploaded on

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

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

More in: Education
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
1,831
On Slideshare
1,826
From Embeds
5
Number of Embeds
3

Actions

Shares
Downloads
132
Comments
0
Likes
0

Embeds 5

http://www.docseek.net 2
http://www.slashdocs.com 2
http://www.docshut.com 1

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Aplikasi Peta dengan Menggunakan Intent pada App InventorMengenal App Inventor lebih dalam (8)Pada tutorial sebelumnya kita telah mengenal Intent (ActivityStarter) pada App Inventor dan membuat sebuahaplikasi yang akan mengakses aplikasi kamera. Disini kita akan menggunakan kembali ActivityStarter untukmengakses 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 mengaksespeta (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 InterfaceIki Mazadi http://indo-android.blogspot.com
  • 2. Gb.2 Components dan PropertiesSetelah komponen terpasang dan properties pada ActivityStarter sudah kita setting, langkah selanjutnya adalahlangsung kita ke jendela Blocks Editor. Pertama kita akan membuat sebuah list tempat, yang mendefinisikantujuan dari peta yang akan kita buat, dan pada UI akan kita akses melalui komponen ListPicker. Caranya yaitudengan menggunakan blocks make a list, masukkan teks nama tempat, dan tempatkan pada sebuah Variabelyang kita namakan saja Tujuan. Gb.3 Blocks ListPickerSelanjutnya, kita ingin ketika membuka aplikasi maka ListPicker telah terisi List-nya oleh List yang kita buatsebelumnya. Untuk itu kita menggunakan blocks Screen.Initialize yang akan memuat secara otomatis begituaplikasi dijalankan, dimana yang kita baca adalah elemen dari List yang kita tampung pada variable (dalam halini variabel Tujuan). Blocks ListPicker yang kita gunakan adalah ListPicker.Elements dan dikaitkan dengan globalvariabel Tujuan.Iki Mazadi http://indo-android.blogspot.com
  • 3. Gb.4 Screen1.Initialize Gb.5 Tampilan ListTahapan selanjutnya adalah menginisialisasi apa yang akan dilakukan setelah ListPicker dipilih, yaitu ketika kitamemilih 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 melakukanpanggilan http ke alamat tujuan dari peta.Untuk itu kita memberikan alamat url dari peta (Google Maps), yang kita tuliskan pada sebuah blocks text, yaituformat alamat pencarian peta secara umum dari Google Maps http://maps.google.com/maps?q= . Sedangkanpoint tujuan diambil pada blocks ListPicker.Selection. Setelah itu gabungkan teks alamat url tersebut melaluiblocks make Text , sehingga nantinya ketika kita tap pada list, alamat tersebut akan lengkap, misalnyahttp://maps.google.com/maps?q= “Bromo Indonesia” . Terakhir untuk mengeksekusinya kita menggunakanblocks ActivityStarter.StartActivity , dimana blocks ini digunakan untuk mentrigger Activity agar dijalankan.Iki Mazadi http://indo-android.blogspot.com
  • 4. Gb.6 Block ListPicker.AfterPickingSampai tahap ini kita telah menyelesaikan semua langkah untuk membuat aplikasi ini, point yang terpentingadalah pada ListPicker, kemudian bagaimana menginisialisasi List dengan menggunakan Screen.Initialize.Kemudian menghandle event yang terjadi setelah List dipilih, yang dalam hal ini dengan menggunakan blocksListPicker.AfterPicking. Selanjutnya adalah menggunakan ActivityStarter.DataUri untuk memasukkan alamattujuan dari peta sesuai dengan yang kita inginkan, dan terakhir mengeksekusinya dengan menggunakan blocksActivityStarter.StartActivity.Kita bisa mencoba aplikasi pada Emulator, dan asalkan Komputer kerja kita terkoneksi dengan Internet makabisa langsung menjalankan aplikasi persis seperti apabila kita jalankan pada handset. Mengenai terbukanya petaakan tergantung pada kecepatan koneksi, pada awal akan muncul notifikasi “Waiting for location” , itu berartisedang dilakukan pencarian lokasi peta. Dan apabila ditemukan akan muncul notifikasi pencarian lokasi yangkita tap sesuai pada List. Kemudian terakhir peta dari lokasi yang kita cari akan dimuat ditampilkan. Gb.8 Pencarian Peta TujuanIki Mazadi http://indo-android.blogspot.com
  • 5. Gb.8 Pencarian Peta Tujuan Gb.9 Peta BromoSedangkan 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 linkhttp://sourceforge.net/projects/ai4a-configs/files/V1.4.6/Iki MazadiFounderhttp://indo-android.blogspot.comhttp://www.gobaksodor.comhttp://www.tidofriends.com*Artikel ini di publikasikan di tabloid PC Plus 2012Iki Mazadi http://indo-android.blogspot.com