Laporan 4 Workshop Aplikasi Internet "Tutorial Membuat Aplikasi Google Maps"

GOOGLE MAP Pada App Inventor

App Inventor adalah sebuah perangkat pemrograman untuk membuat aplikasi android, yang menyenangkan dari tool ini adalah karena berbasis Visual Block Programming. Disebut Visual Block Programming menggunakan, menyusun dan drag-drops blok, merupakan simbol-simbol perintah dan fungsi event handler tertentu dalam membuat aplikasi, dan secara sederhana kita bisa menyebutnya tanpa menuliskan kode program (coding less).

Google Maps adalah layanan pemetaan web yang dikembangkan oleh Google. Layanan ini memberikan citra satelit, peta jalan, panorama 360°, kondisi lalu lintas, dan perencanaan rute untuk bepergian dengan berjalan kaki, mobil, sepeda (versi beta), atau angkutan umum.

Untuk Proses Pembuatan Google Maps silahkan mengikuti langkah-langkah berikut :

1. Membuka Aplikasi MIT App Invertor

MIT App Inventor sebenarnya bisa dijalankan secara online maupun offline. Namun ada perbedaan mendalam antara keduanya, khususnya dalam hal instalasi dan konfigurasi. Ada serangkaian proses yang cukup panjang untuk menginstal MIT App Inventor dan menggunakannya secara offline. Namun untuk sarana pembelajaran, sebaiknya Anda mulai dari versi onlinenya saja. Setidaknya Anda tidak perlu pusing dengan proses instalasi yang rumit dan bisa langsung mulai membuat aplikasi Android.

Untuk mengakses MIT App Inventor online, Anda bisa mengunjungi appinventor.mit.edu. Ini adalah homepage MIT App Inventor. Di sini Anda akan dihadapkan pada berbagai informasi seputar App Inventor, termasuk program-program pendidikan yang terkait dengannya. Sebelum menjalankan MIT App Inventor, pilih menu get started untuk mempelajari lebih jauh tentang tata cara memulai menggunakan aplikasi ini. Untuk mengakses aplikasi MIT App Inventor,dari sini Anda bisa langsung mengklik tautan "create apps" yang mengarah ke ai2.appinventor.mit.edu.

2. Login dengan Akun Google

Saat pertama kali mengakses MIT App Inventor, pengguna akan diminta untuk login dengan
akun Google miliknya. Masukkan username dan password akun Google Anda, setelah itu Anda akan
diarahkan ke halaman permission request yang berisi permintaan izin untuk mengakses beberapa
informasi akun Google Anda. Di sini cukup pilih Allow, setujui terms of service yang muncul
setelahnya dan aplikasi MIT App Inventor akan terbuka.

3. Mulai Membuat Project Baru

untuk memulai project atau aplikasi yang akan dibuat dan isi judul aplikasi yang akan anda buat, untuk kali ini judulnya GoogleMap.

4. Pada tampilan MIT App Inventor akan tampil Screen1 pada menu Desain.

Tampilan ini merupakan tampilan yang akan muncul saat kita menjalankan aplikasi google map, maka oleh karena itu, kita harus mendesain tombol maupun label atau komponen lain yang akan ditampilkan untuk menjalankan aplikasi google map ini.

5. Mendesain Screen 1 dengan beberapa komponen.

Untuk komponen-komponen yang dibutuhkan, dapat kita akses dari menu Pallete dibagian sisi kiri menu desain, yaitu:

Menu User Interface : komponen label, button, Notifier1, ListPicker dan TextBox
Menu Storage : komponen TinyDB
Menu Layout : komponen HorizontalArragement dan VerticalArragement
Menu Connectifity : komponen ActivityStarted
Menu Sensors : komponen LocationSensor

6. Buatlah desain screen 1 seperti gambar berikut ini:

7. Kemudian tampilan dari kompenen dirapikan

dimana setiap komponen itu dapat di atur tampilannya pada menu Properties disisi ujung kanan. Untuk memberikan Baground tampilan screen1, kita dapat mengaturnya dibagian menu Properties, dan menginputkan gambar sebagai bagroud tampilan.

8. Setelah proses desain selesai

maka yang dilakukan selanjutnya adalah menyusun block.

Blocks ini didesain untuk memanggil atau memproses dari kompponen-komponen yang ada discreen1 untuk dijalankan sebagai aplikasi GOOGLE MAP.

9. Menginisialisasi penambahan alamat dan daftar lokasi pada Scrreen1

Inisialisasi Alamat
Pada menu Pallete klik Built-in -> Variables -> seret puzzel Initialize global "nama" to ke halaman Viewer -> menganti nama dengan "tagAdd" pada puzzel.
Pada menu Built-in -> pilih Text -> seret puzzel pertama (" ") ke sisi to puzzel Initialize global ditampilan Viewer -> ketikan alamat pada puzzel text.

Inisialisasi List lokasi
Pada menu Pallete klik Built-in -> Variables -> seret puzzel Initialize global "nama" to ke halaman Viewer -> menganti nama dengan "listLocasi" pada puzzel.
Pada menu Built-in -> pilih List -> seret puzzel pertama (create empty list) ke sisi to puzzel Initialize global ditampilan Viewer.

10. Pada saat screen1 diinisialisasikan, maka init data dipanggil, kemudian listpicker1 tidak enable.

Blocks menjalankan init data.

11. Mengkodekan perintah button Addlokasi dan cancel pada saat diklik.

12. Kemudian Mengkodekan perintah button LokasiHelp pada saat diklik.

13. Menambahakan puzzel procedures untuk pemangilan set to global list, add item to list, dan call StoreValue TinyDB.

Built-in -> procedures -> seret puzzel "to do" ke halaman Viewer -> pasangan Puzzel secara lengkap

14. Lalu mengkodekan button Submit pada saat di Klik.

15. Kemudian mengkodekan procedures ShowMap.

Built-in -> procedures -> seret puzzel "to do" ke halaman Viewer -> tambahkan "set to" action dan datauri dari ActivityStarter1 dan lanjutkan memasangkan Puzzel text secara lengkap seperti gambar8 -> tambahkan call StatActivity
Klik ListPicker1 -> pilih puzzel when AfterPicking dan seret ke tampilan Viewer -> tambahkan puzzel "set to" TMasuanAlamat,

16. Lalu mengkodekan button untuk klik ViewonMaps dan button My Location

Button ViewonMaps clik
Button 1 when click

17. Kemudian simpan aplikasi ini dengan cara:

Klik Build di menu atas bagian tengah MIT App Inventor -> klik App (save .Apk to my Computer) -> tunggung sampai proses penyimpanan selesai.

18. Build aplikasi tersebut agar bisa diakses ke smartphone.

19. Untuk aplikasi ini, smartphone haruslah android dan memiliki aplikasi GMAP.

20. Hasil:

Setelah selesai pembuatan aplikasi multiscreen, maka berikut ini hasil tampilan pada Android :

1. Buka aplikasi google Map pada Android yang telah di download sebelumnya.