com
Geolocation memberikan informasi lokasi dari perangkat seperti garis lintang (latitude) dan bujur
(longitude). Sumber umum informasi lokasi diperoleh melalui Global Positioning System (GPS), sinyal
jaringan seperti alamat IP, RFID, WiFi dan alamat MAC Bluetooth, dan ID selular GSM / CDMA. Tidak ada
jaminan bahwa informasi yang diberikan oleh sensor adalah lokasi perangkat yang sebenarnya.
Artikel kali ini akan menjelaskan cara mendapatkan lokasi perangkat mobile dengan menggunakan API
Cordova. Teknik yang digunakan adalah dengan memanfaatkan plugin cordova-plugin-geolocation dan
objek navigator.geolocation.
Sebelum memulai dengan pembuatan aplikasi ini, pastikan komputer kerja Anda telah dipersiapkan
dengan API Cordova dan software yang dibutuhkan lainnya. Untuk mempersiapkan lingkungan kerja
Cordova, silakan membaca artikel “Memulai Cordova” yang dibuat penulis sebelumnya.
Catatan:
Pada artikel ini platform yang digunakan hanya Android, sehingga semua penjelasan yang
diuraikan mengacu pada platform tersebut.
Kode program dari contoh aplikasi telah disertakan bersama artikel ini sehingga Anda bisa
menggunakannya sambil membaca penjelasan agar lebih mudah memahaminya.
2. Buka sebuah command shell dan masuk ke dalam folder kerja di atas. Pada contoh ini akan
dibuat sebuah projek bernama geolocation.
Setelah projek berhasil dibuat, file-file projek tersebut akan disimpan di dalam folder
..\Cordova\workshop\geolocation. Silakan menuju folder tersebut dan melihat folder-folder dan
file-file apa saja yang sudah terbentuk.
1
www.tobuku.com
6. Sesuaikan versi API Android yang terinstal pada komputer kerja dengan versi target yang akan
dibuat. Pada API Cordova yang digunakan oleh penulis, secara default target yang ditetapkan
adalah android-22. Namun karena pada komputer kerja penulis versi API Android yang terinstal
adalah 21 maka bagian ini harus diedit secara manual.
2
www.tobuku.com
Mempersiapkan jQuery
Langkah ini bertujuan untuk memperindah tampilan dan tidak berhubungan dengan fungsi inti dari
aplikasi yang sedang dibuat.
jQuery dibutuhkan untuk digunakan bersama-sama jQuery Mobile. Versi jQuery yang digunakan pada
contoh program ini adalah jquery-1.11.3. Dianjurkan untuk tidak menggunakan jQuery 2.x karena
terbatasnya versi browser yang didukung oleh versi tersebut.
https://jquery.com/download/
https://jquerymobile.com/
3
www.tobuku.com
<!DOCTYPE html>
<html>
<head>
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
<!--link rel="stylesheet" type="text/css" href="css/index.css"-->
<link rel="stylesheet" href="css/jquery.mobile-1.4.5.min.css">
<script src="js/jquery-1.11.3.js"></script>
<script src="js/jquery.mobile-1.4.5.min.js"></script>
<script type="text/javascript" charset="utf-8">
var watchID = null;
var deviceReady = false;
var timeOut = 30000;
// Wait for device API libraries to load
//
function onLoad() {
document.addEventListener("deviceready", onDeviceReady, false);
}
function startWatch(){
if(deviceReady) {
$("#geolocation").html('<span class="blink_me">Trying to sense the location. Please wait...</span>');
// onSuccess Geolocation
//
function onSuccess(position) {
var htmlText = '<b>Latitude: ' + position.coords.latitude + '<br />' +
'Longitude: ' + position.coords.longitude + '</b><br />' +
4
www.tobuku.com
'<hr />' +
'<span class="blink_me">Sensing every ' + (timeOut/1000)+ ' seconds.</span><p>';
$("#geolocation").html(htmlText);
}
function stopWatch(){
if(deviceReady) {
navigator.geolocation.clearWatch(watchID);
$("#geolocation").html("Location sensing is stopped");
}
}
function blinker() {
$('.blink_me').fadeOut(500);
$('.blink_me').fadeIn(500);
}
setInterval(blinker, 1000); //Runs every second
</script>
</head>
<body onload="onLoad()">
<!-- ################# MAIN PAGE ################# -->
<div data-role="page" id="pageone">
<div data-role="header">
<h1>Geolocation</h1>
<a href="#about" data-icon="info" data-iconpos="notext">About</a>
</div>
</div>
5
www.tobuku.com
<!--div data-role="footer">
<p align="center">Footer text here</p>
</div-->
</div>
</body>
</html>
6
www.tobuku.com
3. Hapus semua folder drawable-xxx dan tinggalkan sebuah folder bernama drawable. Dengan
dihapusnya folder-folder drawable-xxx maka perangkat mobile selalu akan mencari gambar icon
di dalam folder drawable.
4. Di dalam folder drawable terdapat file bernama icon.png. File inilah yang dapat diganti dengan
gambar lain supaya icon aplikasi berubah sesuai dengan gambar yang diinginkan. Silakan
mengambil gambar icon yang baru dan salin ke dalam folder ini dengan nama file yang sama
(hapus file icon.png yang asli). Pastikan resolusinya sama dengan gambar yang asli.
7
www.tobuku.com
Menjalankan aplikasi
1. Sambungkan kabel data dari komputer ke perangkat Android. Pastikan perangkat Android
terdeteksi oleh komputer.
8
www.tobuku.com
Referensi:
https://www.npmjs.com/package/cordova-plugin-geolocation
https://github.com/apache/cordova-plugin-geolocation
http://cordova.apache.org/docs/en/2.5.0/cordova_geolocation_geolocation.md.html
Proverbs 1:7. The fear of the LORD is the beginning of knowledge: but fools despise wisdom and
instruction.