* Artikel ini dipersembahkan oleh Intel Developer Zone. Untuk
Mengetahui lebih lanjut tentang membuat aplikasi Android di Arstitektur
Intel, kunjungi Intel Developer Zone for Android.
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.
Pembuatan Proyek Aplikasi
Buat proyek baru di Intel XDK dan beri nama proyeknya “CekLokasi” dan tentukan lokasi penyimpanan proyeknya sesuai dengan preferensi kamu. Pilih “Start with App Designer” di menu sebelah kiri untuk mempermudah 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
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:
|
|
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=GOOGLE_API_KEY&sensor=false">
</script>
|
Ganti GOOGLE_API_KEY dengan Google API Key kamu.
Kodingan di atas diperlukan agar kamu dapat mengakses Google Maps API.
Deklarasikan juga variabel global “var MyMap” di bagian JavaScript sebagai variabel untuk Google Maps kamu nanti.
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 memenuhi layar ponsel, tambahkan kodingan CSS berikut
di bagian style di index.html
|
|
#map-canvas { width: 100%; height: 100% }
|
Sekarang, buat kodingan yang memanggil Google Maps dan menampilkannya
di aplikasi kamu ketika aplikasinya dijalankan. Kodingannya ditempatkan
di bagian fungsi JavaScript onDeviceReady. Kodingannya adalah sebagai berikut:
|
|
var mapOptions = {
center: new google.maps.LatLng(-34.397, 150.644),
zoom: 12,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
MyMap = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
|
Pada kodingan di atas, diset koordinat -34.397, 150.644
sebagai koordinat bawaan pada peta Google Maps kita (dapat diubah
sesuka kita). Diset juga level pembesaran petanya di level 12 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 posisi kita saat ini. Kodingannya adalah sebagai berikut
(lihat komentar untuk penjelasan kodingannya):
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
|
var currentLatitude, currentLongitude; // Variabel untuk menyimpan koordinat
var getLocation = function()
{
var suc = function(p){
if (p.coords.latitude != undefined)
{
// Ambil koordinat garis lintang dari ponsel
currentLatitude = p.coords.latitude;
// Ambil koordinat garis bujur dari ponsel
currentLongitude = p.coords.longitude;
// Proses koordinat menjadi koordinat Google Maps
myLatLng = new google.maps.LatLng( currentLatitude, currentLongitude )
// Geser Google Maps ke koordinat tersebut
MyMap.panTo(myLatLng);
// Buat penanda yang menandakan lokasi koordinat pada peta Google Maps
var marker = new google.maps.Marker({
position: myLatLng,
map: MyMap,
title: "Lokasi saat ini"
});
}
};
//Jika gagal coba lagi
var fail = function(){
getLocation();
};
// Memanggil fungsi getCurrentPosition untuk mengambil koordinat ponsel
AppMobi.geolocation.getCurrentPosition(suc,fail);
}
|
Nah, sekarang kita tinggal menambahkan pemanggilan fungsi getLocation di tombol yang kita buat sebelumnya. Untuk melakukan hal tersebut cukup menambahkan kodingan href=”javascript:getLocation()” 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
.jpg "chatting di bbm3 android version terbaru")
Tampilan game Snake
