Workshop Aplikasi Internet - MENAMPILKAN LOKASI PADA GOOGLE MAPS

Tutorial ini akan menunjukkan bagaimana Anda dapat mengembangkan sebuah aplikasi yang memungkinkan Anda untuk merekam daftar alamat dan melihat alamat pada Google Maps. Juga akan menunjukkan bagaimana Anda melihat lokasi saat ini di Google Map. Tutorial ini mengasumsikan Anda telah menyelesaikan tutorial dasar App Inventor.

Desain Komponen dan Tampilan Screen Screen

Isi komponen pada Screen sesuai dengan gambar di bawah. Kemudian desain tampilan screen sesuai dengan keinginan Anda.

Membuat Blocks 

1. Buatlah blocks untuk mendefinisikan 2 variabel global yakni :

• tagAddress – variabel yang konstan dan akan digunakan, sebagai tag, untuk menyimpan dan mengambil data dari database kami.
• listLocations – variabel yang dapat digunakan untuk menyimpan dan memanipulasi daftar alamat.

Kemudian buatlah block inisialisasi screen 1 dengan membuat procedure dimana ketika aplikasi dijalankan, pemeriksaan akan dilakukan pada database untuk mengetahui apakah ada alamat yang tersimpan. Jika tidak ada data, maka kita hanya menggunakan daftar kosong. 

2. Buat blocks menggunakan Add Location Button untuk menambahkan alamat baru, Cancel Button untuk membatalkan proses penambahan, dan Location Help Button untuk menampilkan jenis alamat dapat dimasukkan.

3.Buat blocks untuk Submit Button, gunanya melakukan validasi  untuk memastikan data telah dikirimkan. Jika validasi tidak lulus, maka akan tampil pesan kesalahan. Jika tidak, akan dipanggil prosedur yang menambahkan alamat baru ke daftar tersebut. Selain itu juga bisa menyimpan daftar diperbarui ke dalam database. Setelah alamat ditambahkan, akan disembunyikan pengaturan yang telah dibuat. Sehingga dibutuhkan procedure untuk append new address.

4. Buat blocks untuk memilih alamat. Ketika pengguna mengklik ListPicker1 ‘Pilih Lokasi’ dan lakukan pemilihan alamat. Kemudian buat blocks ViewOnMapButton dimana saat diklik, tombol tersebut akan  memvalidasi untuk memastikan bahwa alamat yang sudah telah dipilih. Jika tidak, pesan kesalahan ditampilkan. Jika tidak, kita melakukan prosedur untuk menampilkan alamat (show map).

Menjalankan Aplikasi

1. Setelah desain screen dan pembuatan blocks selesai, klik menu Build. Lalu pilih pilihan 1 (provide QR code for .apk) untuk penggunaan aplikasi pada android. Dan pilih pilihan 2 (save .apk to my computer) jika ingin membuka pada PC. 

2. Setelah ini maka proses compiling akan segera dimulai. Tunggu sampai 100%. Simpanlah file program yang telah di download ini didalam folder yang diinginkan pada PC Anda. Jika kita menggunakan android, maka bukalah aplikasi tersebut.

3. Instal program dan jalankan aplikasi tersebut sehingga akan muncul tampilan dibawah ini. Tampilan dibawah ini merupakan tampilan awal aplikasi.

4. Cobalah aplikasi map tersebut dengan menambahkan lokasi yang kita inginkan.

5. Klik view on map untuk menampilkan alamat pada peta.

6. Klik “My Location On the Map” untuk melihat lokasi kita sekarang.

7. Percobaan Selesai.