Menggunakan Geolocation pada Cordova

(1)

1

Menggunakan Geolocation pada Cordova

Juli 2015

Tingkat: √

Oleh : Feri Djuandi

Pemula Menengah Mahir

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.

Membuat projek baru

1. Buat sebuah folder kerja untuk projek Cordova. Pada contoh ini folder tersebut diletakkan pada folder ..\Cordova\workshop. Anda bebas menentukan nama dan lokasi folder tersebut.

2. Buka sebuah command shell dan masuk ke dalam folder kerja di atas. Pada contoh ini akan dibuat sebuah projek bernama geolocation.

3. Jalankan perintah berikut ini:

cordova create geolocation com.excercise.geolocation 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.

(2)

2

4. Tambahkan dukungan untuk platform Android. Silakan masuk ke folder ..\Cordova\workshop\

geolocation dan jalankan perintah:

cordova platforms add android

5. Tambahkan plugin-plugin yang dibutuhkan. Silakan masuk ke folder

..\Cordova\workshop\geolocation dan jalankan perintah:

cordova plugin add cordova-plugin-device cordova plugin add cordova-plugin-console cordova plugin add cordova-plugin-geolocation

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.

Buka file project.properties di dalam folder ..\workshop\geolocation\platforms\android. Ubah versi API pada bagian target dengan yang sesuai.

Buka file AndroidManifest.xml di dalam folder ..\workshop\geolocation\platforms\android. Ubah versi API pada bagian android:targetSdkVersion dengan yang sesuai.

(3)

3

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.

1. Silakan mengunduh jQuery dari situs beralamat: https://jquery.com/download/

2. Silakan menyalin file jquery-1.11.3.js ke dalam folder ..\geolocation\www\js.

Mempersiapkan jQuery Mobile

Pada contoh ini framework jQuery Mobile akan digunakan untuk memperindah tampilan antar muka (User Interface= UI). jQuery Mobile adalah UI framework yang sangat populer dan cukup mudah digunakan. Versi jQuery Mobile yang digunakan pada contoh program ini adalah jquery.mobile-1.4.5, namun demikian tidak ada batasan untuk menggunakan versi yang lebih baru.

1. Silakan mengunduh jQuery Mobile dari situs beralamat: https://jquerymobile.com/

2. Silakan menyalin file jquery.mobile-1.4.5.min.js ke dalam folder ..\geolocation\www\js. 3. Silakan menyalin file jquery.mobile-1.4.5.min.css ke dalam folder ..\geolocation\www\css.

(4)

4

Mengedit file html

Buka file index.html yang ada di dalam folder ..\geolocation\www. Hapus semua skrip HTML yang asli dan ganti dengan skrip yang baru berikut ini.

<!DOCTYPE html> <html>

<head>

var watchID = null; var deviceReady = false; var timeOut = 30000;

// Wait for device API libraries to load //

function onLoad() {

document.addEventListener("deviceready", onDeviceReady, false); }

// device APIs are available // function onDeviceReady() { deviceReady = true; } function startWatch(){ if(deviceReady) {

$("#geolocation").html('<span class="blink_me">Trying to sense the location. Please wait...</span>'); // Throw an error if no update is received every 30 seconds

var options = { timeout: timeOut };

watchID = navigator.geolocation.watchPosition(onSuccess, onError, options); }

}

// onSuccess Geolocation //

function onSuccess(position) {

var htmlText = '<b>Latitude: ' + position.coords.latitude + '<br />' + 'Longitude: ' + position.coords.longitude + '</b><br />' +

(5)

5

'<hr />' +

'<span class="blink_me">Sensing every ' + (timeOut/1000)+ ' seconds.</span><p>'; $("#geolocation").html(htmlText);

}

// onError Callback receives a PositionError object //

function onError(error) {

var htmlText = '<font color="red"><b>Error</b><br>' + 'Code: ' + error.code + '<br>' + 'Message: ' + error.message + '</font>' ; $("#geolocation").html(htmlText); /*alert('code: ' + error.code + '\n' + 'message: ' + error.message + '\n'); */ } 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>

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

<center><h1>Device Location</h1></center> <p align="center"><img src="img/logo.png"></p> <div id="geolocation">Location not detected</div>

<a href="#" ajax="false" role="button" theme="a" icon="location" iconpos="left" data-inline="true" onclick="startWatch();">Sense Location</a> 

<a href="#" ajax="false" role="button" theme="a" icon="delete" iconpos="left" data-inline="true" onclick="stopWatch();">Stop Sensing</a>

(6)

6

<!--div data-role="footer">

<p align="center">Footer text here</p> </div-->

</div>

<h1>About</h1> </div>

<div data-role="main" class="ui-content"> <center><h1>Geolocation</h1></center>

<p>This is an Apache Cordova sample application.</p> Author: Feri Djuandi

<br>Email: feri.djuandi@gmail.com </div>

</div>

(7)

7

Mempersiapkan file-file gambar

File-file gambar ada di dalam folder ..\geolocation\www\img.

Mempersiapkan file icon

Sebuah icon baru telah dipersiapkan untuk menggantikan icon standar dari aplikasi Cordova. 1. Siapkan sebuah gambar dengan format PNG dan berukuran 96 x 96 pixel.

2. Pada folder projek aplikasi Cordova, silakan masuk ke sub-folder ..\platforms\android\res. Di situ akan dijumpai beberapa folder drawable dan drawable-xxx seperti pada gambar berikut ini.

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.

(8)

8

Menjalankan aplikasi

1. Sambungkan kabel data dari komputer ke perangkat Android. Pastikan perangkat Android terdeteksi oleh komputer.

2. Masuk ke dalam folder ..\Cordova\workshop\geolocation dan jalankan perintah: cordova run android

Tampilan aplikasi saat dijalankan diperlihatkan pada gambar di bawah ini.

(9)

9

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.