Categories: Intel Developer Zone

Membuat Aplikasi Android Untuk Mengambil Koordinat Lokasi di Handphone dengan GPS

Memanfaatkan fitur GPS di ponsel di pembuatan aplikasi tidaklah sulit apalagi jika menggunakan peralatan tambahan salah satunya Intel XDK. Dengan menggunakan Intel XDK, saya berhasil membuat aplikasi sederhana yang memanfaatkan fitur GPS di ponsel Android.

Aplikasi yang saya buat memanfaatkan Google Maps API untuk mengambil posisi kita saat ini dan memunculkannya di Google Maps. Aplikasinya dibuat menggunakan Intel XDK di sistem operasi Windows. Jika kamu belum memiliki Intel XDK dapat mengunduhnya terlebih dahulu di situs resmi Intel XDK dan jika ingin mengetahui lebih lanjut tentang Intel XDK dapat membaca artikel saya beberapa waktu lalu.

Untuk mendampingi artikel ini agar kamu tidak bingung, berikut ini ada video proses pembuatan aplikasinya:

Pembuatan Proyek Aplikasi

Buat proyek baru di Intel XDK, kemudian pilih template HTML5 + Cordova dan beri nama proyeknya “CekLokasi” dan tentukan lokasi penyimpanan proyeknya sesuai dengan preferensi kamu. Jangan lupa untuk mencentang boks “Start with App Designer” untuk mempermudah desain pembuatan aplikasi.

Intel XDK akan secara otomatis membuat template koding untuk proyek aplikasinya agar kamu dapat langsung membuat aplikasi. Jika kamu sudah pernah membuat aplikasi HTML, pasti kamu akan merasa familiar dengan template koding yang dihasilkan karena Intel XDK memang menggunakan bahasa HTML5 untuk pembuatan aplikasinya.

Tahap pertama yang kamu lakukan adalah mengklik tab “Design” untuk memulai pembuatan tampilan aplikasi. Untuk sekarang kita cukup menggunakan tampilan yang sederhana saja. Ketika diminta untuk memilih framework tampilan aplikasi, pilih saja “jQuery Mobile“.

Seret komponen Footer di menu Layout ke tampilan aplikasi kamu. Selanjutnya Seret komponen “Button” ke “Footer” yang baru kamu buat dan setelah itu beri label “Cek Lokasi” di tombol yang kamu buat sebelumnya.

Selesai :) Itu saja langkah-langkah untuk pembuatan tampilan aplikasi menggunakan App Designer di Intel XDK. Sekarang kita akan masuk ke tahap pengkodingan aplikasi kita.

Pengimplementasian GPS dan Google Maps

Pada Intel XDK versi terbaru ini, kita akan menggunakan plugin Geolocation yang tersedia untuk aplikasi kita. Caranya mudah, pilih menu Project yang ada dipojok kiri atas kemudian pilih Plugin Management, kemudian tambahkan plugin Geolocation dengan memilih pada Cordova Plugin Explorer.

Jika kamu belum memiliki Google API Key, dapatkan dulu Google API Key agar kamu dapat menggunakan Google Maps API. Untuk cara mendapatkan Google API Key dapat mengunjungi situs Google Developers. Setelah kamu memiliki Google API Key, masukkan kodingan di bawah ini di bagian head di index.html proyek kamu:

Setelah berhasil menambahkan plugin Geolocation pada proyek CekLokasi ini, sekarang masukkan kodingan di bawah ini di bagian head di index.html proyek kamu:

<script src="http://maps.googleapis.com/maps/api/js"></script>

Kodingan di atas diperlukan agar kamu dapat mengakses Google Maps API. Sekarang tambahkan kodingan di bawah ini di bagian upage-content di index.html

<div id="map-canvas"></div>

Elemen div di atas akan menjadi tempat di mana Google Maps akan ditampilkan di aplikasi kamu. Agar Google Maps-nya nanti dapat tampil pada layar ponsel, lengkapi kodingan tersebut seperti dibawah ini.

<div id="map-canvas" style="width:300px;height:300px;"></div>

Sekarang, buat kodingan yang memanggil Google Maps dan menampilkannya di aplikasi kamu ketika aplikasinya dijalankan. Kodingannya ditempatkan di bagian bawah <head>. Kodingannya adalah sebagai berikut:

<script>
        document.addEventListener("deviceready", function(){
            navigator.geolocation.getCurrentPosition(function(position) {
            var mapProp = {
                center:new google.maps.LatLng(position.coords.latitude,position.coords.longitude), 
                zoom:30, 
                mapTypeId:google.maps.MapTypeId.ROADMAP};
            var map=new google.maps.Map(document.getElementById("map-canvas"), 
                                        mapProp);
            var marker=new google.maps.Marker( { 
                position:new google.maps.LatLng(position.coords.latitude,position.coords.longitude)});
            marker.setMap(map);
            },
</script>

Pada kodingan di atas, diset level pembesaran petanya di level 30 agar peta terlihat lebih jelas. Untuk tipe peta, kita menggunakan peta biasa. Baris terakhir pada kodingan di atas bertugas untuk membuat tampilan Google Maps dengan konfigurasi yang sudah kita tentukan.

Sekarang kita perlu menambahkan kodingan JavaScript yang berfungsi untuk mengecek ketika terjadi error. Kodingannya adalah sebagai berikut:

function(error){
                if(error.code == PositionError.PERMISSION_DENIED)
                {
                    alert("App doesn't have permission to use GPS");
                }
                else if(error.code == PositionError.POSITION_UNAVAILABLE)
                {
                    alert("No GPS device found");
                }
                else if(error.code == PositionError.TIMEOUT)
                {
                    alert("Its taking too long find user location");
                }
                else
                {
                    alert("An unknown error occured");
                }
            }, { maximumAge: 3000, timeout: 5000, enableHighAccuracy: true });
        }, false);

Setelah menambahkan kodingan seperti diatas silahkan tambahkan fungsi CekLokasi() pada kodingan JavaScript di atas seperti berikut ini:

<script>
var CekLokasi = function(){
		//kodingan javascript diatas
}
</script>

Nah, setelah itu sekarang kita tinggal menambahkan pemanggilan fungsi CekLokasi() di tombol yang kita buat sebelumnya. Untuk melakukan hal tersebut cukup menambahkan kodingan onclick = “CekLokasi()” di tombol kita.

Itu saja kodingan yang diperlukan untuk membuat aplikasi, tidak rumit bukan? Sekarang kita dapat mengetes kodingan yang sudah kita buat di menu Emulate di Intel XDK. Untuk mencoba aplikasinya langsung di ponsel Android kamu, masuk ke menu TEST dan untuk membuat file APK-nya, masuk ke menu BUILD.

Tampilan aplikasi hasil kodingan

Untung mengunduh kode sumber lengkap dari proyek ini dapat mengklik link ini

* Artikel ini telah diperbaharui dengan kodingan terbaru

* Artikel ini dipersembahkan oleh Intel Developer Zone. Untuk Mengetahui lebih lanjut tentang membuat aplikasi Android di Arstitektur Intel, kunjungi Intel Developer Zone for Android.