1
Menggunakan Accelerometer pada
Cordova
Juli 2015
Tingkat: √Oleh : Feri Djuandi
Pemula Menengah MahirAccelerometer adalah sensor gerak yang mendeteksi perubahan (delta) dalam gerakan relatif terhadap
posisi perangkat saat ini dalam tiga dimensi sepanjang sumbu x, y, dan z.
Artikel kali ini akan menjelaskan cara mendapatkan pembacaan sensor gerak dari perangkat mobile
dengan menggunakan API Cordova. Teknik yang digunakan adalah dengan memanfaatkan plugin
cordova-plugin-device-motion dan objek navigator.accelerometer.
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 accelerometer.
3.
Jalankan perintah berikut ini:
cordova create accelerometer com.excercise.accelerometer
Accelerometer
Setelah projek berhasil dibuat, file-file projek tersebut akan disimpan di dalam folder
..\Cordova\workshop\accelerometer. Silakan menuju folder tersebut dan melihat folder-folder
dan file-file apa saja yang sudah terbentuk.
2
4.
Tambahkan dukungan untuk platform Android. Silakan masuk ke folder ..\Cordova\workshop\
accelerometer dan jalankan perintah:
cordova platforms add android
5.
Tambahkan plugin-plugin yang dibutuhkan. Silakan masuk ke folder
..\Cordova\workshop\accelerometer dan jalankan perintah:
cordova plugin add cordova-plugin-device
cordova plugin add cordova-plugin-console
cordova plugin add cordova-plugin-device-motion
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\accelerometer\platforms\android.
Ubah versi API pada bagian target dengan yang sesuai.
Buka file AndroidManifest.xml di dalam folder ..\workshop\accelerometer\platforms\android.
Ubah versi API pada bagian android:targetSdkVersion dengan yang sesuai.
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 ..\accelerometer\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 ..\accelerometer\www\js.
3.
Silakan menyalin file jquery.mobile-1.4.5.min.css ke dalam folder ..\accelerometer\www\css.
4
Mengedit file html
Buka file index.html yang ada di dalam folder ..\accelerometer\www. Hapus semua skrip HTML yang asli dan ganti dengan skrip yang baru
berikut ini.
<!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 deviceReady = false; var watchID = null; var freq = 1000;
// 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) {
// Update acceleration every "freq" seconds var options = { frequency: freq };
watchID = navigator.accelerometer.watchAcceleration(onSuccess, onError, options); }
}
// Stop watching the acceleration // function stopWatch() { if(deviceReady) { if (watchID) { navigator.accelerometer.clearWatch(watchID); watchID = null;
5
$("#movement").html('Motion detection is stopped'); }
} }
// onSuccess: Get a snapshot of the current acceleration //
function onSuccess(acceleration) {
$("#movement").html('<b>' + 'Acceleration X: ' + acceleration.x + '<br />' + 'Acceleration Y: ' + acceleration.y + '<br />' +
'Acceleration Z: ' + acceleration.z + '<br />' +
'Timestamp: ' + acceleration.timestamp + '<br /></b>' +
'<hr><span class="blink_me">Detecting every ' + (freq / 1000) + ' seconds</span>' );
}
// onError: Failed to get the acceleration // function onError() { $("#movement").html('<font color="red">Error!</font>'); } 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>Accelerometer</h1>
<a href="#about" data-icon="info" data-iconpos="notext">About</a> </div>
<div data-role="main" class="ui-content"> <center><h1>Device Motion</h1></center> <p align="center"><img src="img/logo.png"></p> <div id="movement">Motion not detected</div>
<a href="#" ajax="false" role="button" theme="a" icon="recycle" iconpos="left" data-inline="true" onclick="startWatch();">Detect Motion</a>
<a href="#" ajax="false" role="button" theme="a" icon="delete" iconpos="left" data-inline="true" onclick="stopWatch();">Stop detection</a>
</div>
6
<p align="center">Footer text here</p></div--> </div>
<!-- ################# ABOUT ################# -->
<div data-role="page" data-dialog="true" data-close-btn="right" id="about"> <div data-role="header">
<h1>About</h1> </div>
<div data-role="main" class="ui-content"> <center><h1>Accelerometer</h1></center>
<p>This is an Apache Cordova sample application.</p> Author: Feri Djuandi
<br>Email: [email protected] </div>
</div>
<script type="text/javascript" src="cordova.js"></script> <!--script type="text/javascript" src="js/index.js"></script--> </body>
</html>
