Tutorial Menampilkan Lokasi pada Google Maps menggunakan APP INVENTOR 2

A. Membuat Projek

1. Buka website MIT App Inventor  http://appinventor.mit.edu/
2. Klik Create apps, lalu login menggunakan akun gmail.
3. Start a new project. Dari menu Project, klik New Project.
4. Masukkan judul project dengan nama “Latihan4”, setelah itu klik “ok”. Untuk aturan penamaan judul project tidak menggunakan spasi.

5. Terlihat Tampilan Awal projek seperti gambar dibawah

B. Membuat Tampilan Aplikasi

1. Mulailah membuat tampilan untuk screen 1 dengan menambahkan komponen komponen yang di perlukan.

 

C. Membuat Blocks

1. Setelah selesai, klik screen 1 lalu pilih blocks. Maka akan muncul jendela block pada screen 1

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

3.Buatlah blocks inisialisasi screen 1 dengan membuat procedure ketika aplikasi dijalankan serta memeriksa database kami untuk mengetahui apakah ada alamat yang tersimpan. Jika tidak ada data, maka kita hanya menggunakan daftar kosong.

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

5.Buatlah blocks untuk Submit Button  untuk melakukan validasi  untuk memastikan data telah dikirimkan. Jika validasi tidak lulus, akan  menampilkan pesan kesalahan. Jika tidak, akan memanggil 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. Sehingg dibutuhkan procedure untuk append new address.

6. Selanjutnya,buatlah blocks untuk memilih alamat. Ketika pengguna mengklik ListPicker1 ‘Pilih Lokasi’ dan lakukan pemilihan alamat.Gambar 13. Blocks List Picker 1 5.   Buatlah blocks ViewOnMapButton saat  diklik, dimana 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).

7. Ketika View On Map Tombol diklik, kita memvalidasi untuk memastikan bahwa alamat yang sudah telah dipilih. Jika tidak, pesan kesalahan ditampilkan. Jika tidak, kita menggunakan blok di bawah ini untuk menampilkan alamat:

D. Menjalankan Aplikasi

1. Setelah selesai pembuatan blocks, klik menuBuild. Lalu pilih pilihan 1 (provide QR code for .apk) untuk penggunaan aplikasi pada android. 
2. Setelah ini maka proses compiling akan segera dimulai. Tunggu sampai 100%

3. Simpanlah aplikasi yang telah di download ini didalam folder yang diinginkan. Jika kita menggunakan android, maka bukalah aplikasi tersebut.

4. Lakukan penginstallah program tersebut dan buka aplikasi tersebut sehingga akan muncul tampilan dibawah ini. Tampilan dibawah ini merupakan tampilan awal aplikasi.

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

6. Untuk menampilkan alamat pada peta , klik view on map. Tampilan seperti gambar dibawah :