Mengkode Aplikasi NativeScript Real-Time: Geolokasi dan Google Maps

Indonesian (Bahasa Indonesia) translation by ⚡ Rova Rindrata (you can also view the original English article)

NativeScript adalah kerangka kerja untuk membangun aplikasi mobile bawaan lintas platform menggunakan XML, CSS, dan JavaScript. Dalam seri ini, kita akan mencoba beberapa hal keren yang dapat Anda lakukan dengan aplikasi NativeScript: geolokasi dan integrasi Google Maps, database SQLite, integrasi Firebase, dan pemberitahuan push. Sepanjang jalan, kita akan membangun aplikasi kebugaran dengan kemampuan real-time yang akan menggunakan masing-masing dari fitur-fitur ini.

Dalam tutorial ini, Anda akan belajar bagaimana bekerja dengan geolokasi dan Google Maps di aplikasi NativeScript.

Saya berasumsi bahwa Anda sudah tahu cara membuat aplikasi di NativeScript. Jika Anda baru mengenal NativeScript, sebaiknya Anda memeriksa salah satu tutorial sebelumnya di NativeScript sebelum mencoba mengikuti tutorial ini.

Pengenalan NativeScript
Pada artikel ini, saya akan memperkenalkan Anda ke NativeScript, kerangka kerja sumber terbuka untuk membuat aplikasi mobile dengan JavaScript.

Wernher-Bel Ancheta
15 Juli 2016

Pengembangan Mobile
Membuat Aplikasi NativeScript Pertama Anda
Dalam tutorial ini saya akan menunjukkan cara memulai pengembangan aplikasi NativeScript. Anda akan belajar cara mengatur lingkungan Anda agar bisa bekerja dengannya...

Wernher-Bel Ancheta
05 Agustus 2016

NativeScript
Membuat Aplikasi Cuaca dengan TypeScript dan NativeScript
Dalam tutorial ini Anda akan membuat aplikasi cuaca lintas platform yang lengkap dengan TypeScript dan NativeScript. Sepanjang jalan, Anda akan mempelajari NativeScript kunci...

Wernher-Bel Ancheta
17 Agustus 2016

Aplikasi Mobile

Apa yang Akan Anda Buat

Anda akan membuat pelacak berjalan menggunakan geolokasi dan Google Maps. Ini akan menunjukkan kepada pengguna berapa jarak yang telah mereka lalui dan jumlah langkah yang mereka ambil untuk menempuh jarak itu. Juga akan ada peta yang akan menampilkan lokasi pengguna saat ini.

Untuk memberi gambarannya, inilah hasil akhir dari tampilan akhir:

Menyiapkan Proyek

Mulailah dengan membuat aplikasi NativeScript baru:

tns create fitApp --appid "com.yourname.fitApp"

Agar lebih mudah membuat UI aplikasi, saya telah membuat sebuah repo GitHub yang mencakup versi starter dan final proyek. Anda bisa melanjutkan dan menyalin isi folder aplikasi ke folder aplikasi proyek Anda. Kita hanya akan bekerja dengan dua file: file main-page.xml dan main-page.js. Sisanya hanya boilerplate dari proyek demo NativeScript.

Menjalankan Aplikasi

Kita akan menggunakan emulator Android yang disediakan oleh Android Studio untuk menguji aplikasinya. Ini akan memungkinkan kita untuk menggunakan Android GPS Emulator untuk mensimulasikan perubahan lokasi dari kenyamanan rumah kita sendiri. Saya tidak terlalu suka berjalan-jalan di luar tanpa tujuan untuk menguji geolokasi! Tapi jika itu yang Anda lakukan maka saya tidak akan menghentikan Anda.

Jika Anda menjalankan tns run android, maka secara otomatis akan memanggil emulator Android jika sudah terinstal. Jika belum terinstal, Anda bisa menginstalnya dengan meluncurkan Android Studio, mengklik configure, dan memilih SDK Manager. Ini akan membuka SDK Platforms secara default. Klik pada tab SDK Tools dan pastikan untuk memilih Android Emulator, dan klik Apply untuk menginstalnya.

Untuk menggunakan emulator GPS, unduh dari GitHub dan jalankan file war yang dapat dieksekusi:

java -jar android-gps-emulator-0.2.war

Setelah selesai, Anda akan bisa mengakses http://localhost:8080/gpsemulator/ dari browser Anda dan terhubung ke localhost. Pastikan emulator Android sudah berjalan saat Anda melakukan ini. Setelah Anda terhubung, cukup perbesar di peta dan klik pada tempat yang ingin Anda gunakan sebagai lokasinya. Aplikasi akan mendeteksi ini dan menggunakannya sebagai lokasi saat ini.

Bekerja dengan Geolokasi

Geolokasi di NativeScript mirip dengan API Geolokasi di JavaScript. Satu-satunya perbedaan fungsi adalah penambahan fungsi distance() yang digunakan untuk menghitung jarak antara dua lokasi.

Menginstal Plugin Geolokasi

Agar dapat bekerja dengan geolokasi, Anda harus menginstal plugin geolokasi terlebih dahulu:

tns plugin add nativescript-geolocation

Setelah selesai, Anda sekarang dapat memasukkannya dari file skrip Anda:

var geolocation = require("nativescript-geolocation");

Mendapatkan Lokasi Pengguna Saat Ini

Plugin geolocation NativeScript mencakup tiga fungsi yang dapat Anda gunakan untuk bekerja dengan lokasi pengguna saat ini. Kita akan menggunakannya masing-masing dalam aplikasi ini:

getCurrentLocation
watchLocation
distance

Buka file main-view-model.js dan tambahkan kode berikut di dalam fungsi createViewModel(). Di sini kita menginisialisasi variabel yang akan kita gunakan nanti untuk menyimpan berbagai nilai yang diperlukan untuk melacak lokasi pengguna.

Saya telah menambahkan beberapa komentar dalam kode sehingga Anda tahu apa yang terjadi. Ada juga beberapa baris kode yang dikomentari; ini untuk integrasi Google Maps. Saya telah mengomentari mereka sekarang untuk menjaga hal-hal tetap sederhana. Begitu sampai pada integrasi Google Maps, Anda harus menghapus komentar tersebut.

function createViewModel() {
    var viewModel = new Observable();
    var watchId; // stores the ID of the location watcher so we can stop it later
    var start_location; // stores the location of the user when they first started tracking
    var current_location; // stores the current location of the user
   
    viewModel.is_tracking = false; // whether the user's location is currently being tracked or not
    //viewModel.latitude = 15.447819409392789;
    //viewModel.longitude = 120.93888133764267;
    //viewModel.zoom = 20;

    var total_distance = 0;
    var total_steps = 0;

    var locations = []; // array which will store the locations

    //var mapView;
    //var marker = new mapsModule.Marker();

    if (!geolocation.isEnabled()) { // check if geolocation is not enabled
        geolocation.enableLocationRequest(); // request for the user to enable it
    } 

    // next: add code for getting the user's current location
}

Selanjutnya, tambahkan kode untuk mendapatkan lokasi pengguna saat ini. Kode ini dijalankan saat pengguna mengetuk tombol untuk memulai dan menghentikan pelacakan lokasi. Metode geolocation.getCurrentLocation() digunakan untuk mendapatkan lokasi saat ini.

Di sini kami telah menetapkan tiga pilihan: desireAccuracy, updateDistance, dan timeout. desiredAccuracy memungkinkan Anda untuk menentukan keakuratan dalam meter. Ini memiliki dua nilai yang mungkin: Accuracy.high, yaitu sekitar 3 meter, dan Accuracy.any, yaitu sekitar 300 meter. updateDistance menentukan berapa banyak perbedaan (dalam meter) harus ada antara lokasi sebelumnya dan lokasi saat ini sebelum akan diperbarui. Terakhir, timeout menentukan berapa milidetik menunggu sebuah lokasi.

Begitu lokasi diterima, kami menetapkannya sebagai start_location dan melakukan push ke array locations. Nantinya, lokasi ini akan digunakan bersamaan dengan lokasi pertama yang akan diambil dari pengamatan lokasi pengguna saat menentukan jarak yang ditempuh.

viewModel.toggleTracking = function() {
    
    if (geolocation.isEnabled()) {

        this.set('is_tracking', !viewModel.is_tracking); // flip the toggle for tracking
        if (viewModel.is_tracking) { 
            geolocation.getCurrentLocation(
                {
                    desiredAccuracy: Accuracy.high, // 3 meter accuracy 
                    updateDistance: 5, // 5 meters
                    timeout: 2000 // 2 seconds
                }
            ).
            then(function(loc) {
                if (loc) {
                    start_location = loc;
                    locations.push(start_location);
                    
                    //viewModel.set('latitude', loc.latitude);
                    //viewModel.set('longitude', loc.longitude);
                }
            }, function(e){
                dialogs.alert(e.message);
            });  

            // next: add code for watching user's current location

        } else {
            
            // next: add code to stop watching the user's current location
        }

    } else {
        dialogs.alert("Please enable Geolocation");
    }
}

Pengamatan Untuk Lokasi Pengguna Saat Ini

Untuk mendapatkan lokasi saat ini, kita menggunakan fungsi geolocation.watchLocation(). Fungsi ini mirip dengan fungsi setInterval() dalam JavaScript, karena juga menjalankan fungsi callback berulang kali sampai Anda menghentikannya dengan fungsi geolocation.clearWatch(). Fungsi callback secara otomatis dipanggil berdasarkan updateDistance dan minimumUpdateTime.

Pada kode di bawah ini, lokasi akan diperbarui jika minimal 5 meter berbeda dari lokasi sebelumnya yang diambil. Tapi update ini hanya akan terjadi setiap 5 detik. Artinya jika pengguna tidak berjalan 5 meter atau lebih dalam waktu 5 detik, lokasinya tidak akan diperbarui.

watchId = geolocation.watchLocation(
    function (loc) {
        if (loc) {
            current_location = loc;
            
            // next: add code for getting the distance between two locations
        }
    }, 
    function(e){
        dialogs.alert(e.message);
    }, 
    {
        desiredAccuracy: Accuracy.high, 
        updateDistance: 5, // 5 meters
        minimumUpdateTime : 5000 // update every 5 seconds
    }
);

Setelah pengguna menunjukkan bahwa mereka ingin berhenti melacak, Anda perlu memanggil fungsi geolocation.clearWatch(). Anda juga perlu mengatur ulang sisa nilai yang diperbarui setiap kali lokasi diubah.

geolocation.clearWatch(watchId); // stop watching the user's location
total_distance = 0;
total_steps = 0;
locations = [];
viewModel.set('distance', "distance travelled: " + total_distance + " meters");
viewModel.set('steps', "steps: " + total_steps);

Mendapatkan Jarak Antara Dua Lokasi

Sekarang kita siap untuk mendapatkan jaraknya. Hal ini bisa dilakukan dengan memanggil fungsi geolocation.distance(). Fungsi ini menerima dua objek location sebagai argumennya, jadi kita akan menggunakan dua lokasi terakhir yang di-push ke array locations untuk menentukan jarak (dalam meter) yang ditempuh pengguna dari lokasi yang sebelumnya direkam ke yang sekarang. Dari sana, kita bisa menggunakan konversi perkiraan dari meter ke jumlah langkah—saya menyebut perkiraan karena tidak semua orang akan menempuh jarak yang sama dalam satu langkah.

Setelah itu, kita dapat menambahkan distance dan steps yang dihasilkan ke total_distance dan total_steps sehingga kita dapat melacak total jarak dan langkah yang telah diambil sejak mereka mulai melacak lokasi mereka.

locations.push(loc);

//viewModel.set('latitude', loc.latitude);
//viewModel.set('longitude', loc.longitude);
//marker.position = mapsModule.Position.positionFromLatLng(viewModel.latitude, viewModel.longitude); 

location_count = locations.length;

if (location_count >= 2) {
    var distance = Math.round(geolocation.distance(locations[location_count - 2], locations[location_count - 1])); // get the distance between the last two locations
    var steps = Math.round(distance * 1.3123); // determine the approximate number of steps
    
    // add the current distance to the overall distance travelled
    total_distance = total_distance + distance;
    total_steps = total_steps + steps;
    
    // update the UI
    viewModel.set('distance', "distance travelled: " + total_distance + " meters");
    viewModel.set('steps', "steps: " + total_steps);
}

Pada titik ini, Anda sekarang dapat mulai menguji aplikasi menggunakan emulator GPS yang telah saya sebutkan sebelumnya. Perhatikan bahwa Anda perlu menekan save pada file main-view-model.js untuk memicu pemuatan ulang aplikasi.

Kemudian pilih lokasi di emulator GPS sehingga lokasi yang baru akan diambil oleh aplikasi setelah ia dimuat. Jika Anda tidak melakukan ini, ia akan menjadi default ke lokasi Googleplex di Mountain View, California. Ini berarti bahwa pada saat Anda memilih lokasi di emulator, ini akan beralih dari lokasi ini ke lokasi yang Anda pilih. Jika jauh sekali Anda akan mendapatkan jumlah yang sangat besar untuk jarak dan langkah-langkahnya.

Bergantian, Anda bisa mengetes perangkat nyata dengan internet dan GPS yang diaktifkan. Hanya GPS yang dibutuhkan pada saat ini, namun begitu kita menambahkan Google Maps, aplikasi ini memerlukan koneksi internet.

Bekerja dengan Google Maps

Kita sekarang akan menggunakan Google Maps untuk menambahkan peta yang menunjukkan lokasi pengguna saat ini.

Menginstal Plugin Google Maps

tns plugin add nativescript-google-maps-sdk

Setelah terinstal, Anda perlu menyalin file sumber string template untuk Android:

cp -r node_modules/nativescript-google-maps-sdk/platforms/android/res/values app/App_Resources/Android/

Selanjutnya, buka file app/App_Resources/Android/values/nativescript_google_maps_api.xml dan tambahkan kunci API Google Maps Anda (kunci server) sendiri:

<?xml version="1.0" encoding="utf-8"?>
<resources>
     <string name="nativescript_google_maps_api_key">YOUR GOOGLE MAPS API KEY HERE</string>
</resources>

Pastikan Anda telah mengaktifkan Google Maps Android API dari Google Console sebelum mencoba menggunakannya.

Menambahkan Peta

Untuk peta, buka file main-page.xml dan Anda akan melihat yang berikut ini:

<maps:mapView 
    latitude="{{ latitude }}" 
    longitude="{{ longitude }}" 
    zoom="{{ zoom }}" 
    mapReady="{{ onMapReady }}" 
/>

Di sini kita telah menentukan tiga pilihan (longitude, latitude, and zoom) dan sebuah fungsi untuk dieksekusi setelah peta siap. longitude dan latitude tentukan lokasi yang ingin Anda render di peta. Zoom menentukan tingkat zoom pada peta. mapReady adalah dimana kita menentukan fungsi untuk menambahkan penanda pada peta. Penanda ini mewakili lokasi pengguna saat ini, sehingga akan ditampilkan di tengah peta.

Secara default, ini tidak akan berfungsi karena Anda belum menambahkan definisi skema untuk peta. Jadi di elemen Page Anda, tambahkan definisi untuk elemen maps:

<Page 
    xmlns="http://schemas.nativescript.org/tns.xsd" 
    xmlns:maps="nativescript-google-maps-sdk"
>
</Page>

Setelah selesai, instance peta Google akan di-render tepat di bawah tombol untuk melacak lokasi. Tidak akan ada peta karena latitude dan longitude belum ditentukan. Untuk melakukannya, kembali ke file main-view-model.js dan hapus komentar pada baris kode untuk bekerja dengan Google Maps:

// default coordinates
viewModel.latitude = 15.447819409392789;
viewModel.longitude = 120.93888133764267;
viewModel.zoom = 20; // default map zoom level

var mapView; // variable for storing the current map instance
var marker = new mapsModule.Marker(); // variable for storing the marker instance

Menambahkan Penanda

Karena kita sudah menyatakan koordinat default untuk penanda, kita sebenarnya bisa memberikan plot penanda begitu peta siap:

viewModel.onMapReady = function(args) {
    mapView = args.object; // get the map view
    marker.position = mapsModule.Position.positionFromLatLng(viewModel.latitude, viewModel.longitude); // set the marker's position on the map
    mapView.addMarker(marker); // add the marker to the map
}

Selanjutnya, kita perlu memperbarui posisi penanda setelah pengguna mulai melacak lokasi mereka. Anda dapat melakukannya di dalam fungsi callback sukses untuk fungsi getCurrentLocation():

locations.push(start_location);

// remove the comments for these:                       
//viewModel.set('latitude', loc.latitude);
//viewModel.set('longitude', loc.longitude);
//marker.position = mapsModule.Position.positionFromLatLng(viewModel.latitude, viewModel.longitude);

Kita juga perlu memperbaruinya saat lokasi pengguna diperbarui (di dalam fungsi callback sukses untuk watchLocation):

current_location = loc;
locations.push(loc);

// remove the comments for these:
//viewModel.set('latitude', loc.latitude);
//viewModel.set('longitude', loc.longitude);
//marker.position = mapsModule.Position.positionFromLatLng(viewModel.latitude, viewModel.longitude);

Setelah selesai, peta yang menampilkan lokasi default akan ditampilkan di aplikasi.

Kesimpulan

Dalam tutorial ini, Anda telah membuat aplikasi NativeScript yang memungkinkan pengguna melacak berapa jarak yang telah mereka tempuh dan perkiraan jumlah langkah yang mereka ambil untuk menempuh jarak itu. Anda juga telah menggunakan Google Maps untuk memungkinkan pengguna melihat lokasi mereka saat ini. Dengan melakukannya, Anda telah belajar menggunakan plugin geolokasi dan Google Maps untuk NativeScript.

Ini baru permulaan! Di posting berikutnya dari seri ini, kami akan menambahkan database lokal, pemberitahuan push dan fitur keren lainnya ke aplikasi kita.

Sementara itu, lihat beberapa tulisan kami yang lain tentang pengkodean mobile NativeScript dan lintas platform.

Untuk pengenalan yang komprehensif terhadap NativeScript, coba kursus video kami Pengkodean Aplikasi Mobile dengan NativeScript. Dalam kursus ini, Keyvan Kasaei akan menunjukkan kepada Anda langkah demi langkah bagaimana membangun sebuah aplikasi sederhana. Sepanjang jalan, Anda akan belajar menerapkan alur kerja aplikasi sederhana dengan permintaan jaringan, arsitektur MVVM, dan beberapa komponen UI NativeScript yang paling penting. Pada akhirnya, Anda akan mengerti mengapa Anda harus mempertimbangkan NativeScript untuk proyek aplikasi seluler berikutnya.