Eternityz: Tutorial Pembuatan Aplikasi Untuk Menampilkan Lokasi Di Google Map

Sebelum memulai tutorial, saya akan menjelaskan sedikit tentang beberapa hal.

1. Android

Android adalah sebuah nama untuk system operasi pada suatu gadget seperti komputer tablet dan smartphone. Sistem operasi yang digunakan berbasis linux. Logo android berbentuk robot dengan dua antenna dikepalanya ini melambangkan bahwa android merupakan simbolisasi dari system operasi kelas atas untuk gadget dan smartphone.

klik untuk memperbesar

(sumber: http://www.berbagiinfo4u.com/2013/06/apa-itu-android.html)

2. App Inventor

Aplikasi yang beralamat di http://appinventor.mit.edu/ ini merupakan aplikasi web sumber terbuka yang awalnya dikembangkan oleh Google, dan saat ini dikelola oleh Massachusetts Institute of Technology (MIT). Aplikasi ini memungkinkan pengguna untuk memprogram komputer, untuk menciptakan aplikasi perangkat lunak bagi system operasi android. App inventor ini menggunakan antar muka grafis, yang memungkinkan pengguna untuk melakukan drag-and-drop objek visual untuk menciptakan aplikasi yang bisa dijalankan pada perangkat android.

klik untuk memperbesar

(sumber:wikipedia)

3. MEmu App Player

Aplikasi yang beralamat di http://www.memuplay.com/ ini merupakan sebuah emulator android yang powerful, yang bertujuan untuk menyediakan pengalaman terbaik dalam memainkan game dan aplikasi android pada PC. Emulator android ini terbilang cukup baru, namun dapat memberikan performa yang cukup handal. Namun kita tetap bisa menggunakan emulator android apa saja, yang kita inginkan.

(sumber:memuplay.com)

klik untuk memperbesar

4. Google Maps

Kini tersedia untuk Android dan menawarkan layanan penuh yang dimiliki Google. Aplikasi ini merupakan penggabungan dari GPS dan Google Maps. Anda akan menemukan rute terbaik dengan Google Maps, sehingga tidak akan tersesat di kota besar mana pun di dunia.

Anda akan lebih mudah menggunakan aplikasi peta ini pada smartphone dan tablet Android dengan desain terbaru. Cara pengoperasiannya juga sangat mudah dengan memberikan informasi yang dibutuhkan mengenai suatu tempat dan menampilkan lokasinya dengan cepat merupakan fitur utama yang ditawarkan Google Maps.

Untuk menggunakan aplikasi ini Anda harus terhubung ke internet dengan sambungan cepat yang bertujuan mengunduh peta secara langsung. Hal lain yang dapat dilakukan layanan ini adalah penggunaan GPS dari aplikasi untuk mengetahui posisi Anda berada. Aplikasi ini juga mengizinkan Anda untuk menentukan rute terdekat dari sebuah tempat dengan menggunakan alat transportasi berbeda. Oleh sebab itu, Google Maps sangat dibutuhkan bagi orang yang sering bepergian agar tidak tersesat.

Pada tutorial kali ini yang akan dilakukan adalah bagaimana membuat sebuah aplikasi yang memungkinkan kita untuk menyimpan alamat kita di Google Maps. Aplikasi ini juga bisa menampilkan dimana lokasi kita saat ini di Google Maps. Pada tutorial ini, dianggap bahwa kita telah meyelesaikan tutorial dasar dari App Inventor.

Pada tutorial kali ini akan diperkenalkan tentang:

-List manipulation - membuat daftar, menambahkan item ke dalam daftar

-List Picker - menambahkan item ke dalam daftar, menyimpan data yang terdapat dalam daftar

-Location Sensor - mendeteksi lokasi saat ini untuk menampilkasnnya pada Google Maps

-Activity Starter - digunakan untuk memulai awal Google Maps pada alamat saat ini atau alamat yang telah ditentukan

-Notifier - menampilkan pesan

-TinyDB - menyimpan data kedalan database yang tetap

-Dll - manipulasi text, validasi dasar.

Pertama sekali, kita akan bekerja di bagian design. Hasil jadi design-nya seperti gambar dibawah ini:

Gambar dibawah ini menampilkan bagaimana komponen-komponen tersebut di atur di editor desain. Gambar ini juga menampilkan komponen-komponen yang tidak tampak (Seperti Tiny Db, Activity Starter, Location Sensor, dan Notifier) yang digunaakan oleh aplikasi ini.

Langkah - langkah pembuatan aplikasi :

1. Buka app inventor melalui link http://appinventor.mit.edu/

2. Login menggunakan Email yang sudah terdaftar pada appinventor

3. Klik Start New Project , untuk membuat applikasi baru

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

5. Mendesain Screen 1 dengan beberapa komponen.
Untuk komponen-komponen yang dibutuhkan pada aplikasi, 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. Atur posisi komponen menjadi center yang terdapat pada menu Properties. Untuk memberikan Background pad screen1, dapat diatur pada menu Properties, dan menginputkan gambar sebagai backgroud tampilan.

8. Susun block alur program.

Klik Block pada sudut kanan atas.

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,