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
Membuat Aplikasi NativeScript Pertama Anda
Membuat Aplikasi Cuaca dengan TypeScript dan NativeScript
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.
- Aplikasi MobileMembuat Aplikasi Cuaca dengan TypeScript dan NativeScriptWernher-Bel Ancheta
- Pengembangan MobileMemperkenalkan Vue dan Weex untuk Aplikasi Mobile AsliLawrence Turton
- IonicMemulai dengan Layanan Ionic: AuthWernher-Bel Ancheta
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.
Envato Tuts+ tutorials are translated into other languages by our community members—you can be involved too!
Translate this post