Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. NativeScript
Code

Mengkode Aplikasi NativeScript Real-Time: Geolokasi dan Google Maps

by
Difficulty:IntermediateLength:LongLanguages:
This post is part of a series called Code a Real-Time NativeScript App.
Code a Real-Time NativeScript App: SQLite

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.

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:

app final

Menyiapkan Proyek

Mulailah dengan membuat aplikasi NativeScript baru:

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:

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.

GPS Emulator

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:

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

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.

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.

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.

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.

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.

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

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

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

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:

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:

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:

Menambahkan Penanda

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

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

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

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.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.