* 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.
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>
</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);
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):
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);
}
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
Source : http://lekkomputer.wordpress.com/2014/05/07/membuat-aplikasi-android-untuk-mengambil-koordinat-lokasi-di-handphone-dengan-gps/
gan kalok membuat database nya gmn gan
ReplyDeleteKoordinat ditentukan di baris ini : center:newgoogle.maps.LatLng(-34.397,150.644),
ReplyDelete