JS Framework
Ionic

Panduan Teknikal ParseGeoPoint dengan Ionic dan Back4App

12min

Menggunakan titik geo dengan kerangka Ionic

Pendahuluan

Parse memungkinkan Anda untuk mengaitkan koordinat lintang dan bujur dunia nyata dengan sebuah objek. Menambahkan a ParseGeoPoint ke a ParseUser, Anda akan dapat dengan mudah mengetahui pengguna mana yang terdekat dengan yang lain, menunjukkan lokasi pengguna aplikasi Anda dan juga menyimpan informasi lokasi pengguna, di antara kemungkinan lainnya.

Anda juga dapat mengaitkan a ParseGeoPoint ke sembarang ParseObject. Sebagai contoh, jika aplikasi Anda terkait dengan toko dengan afiliasi fisik, Anda akan dapat membuat halaman untuk menunjukkan lokasi toko-toko tersebut atau untuk menunjukkan kepada pengguna toko mana yang terdekat dengannya. Contoh lain dari penggunaan asosiasi ini: jika aplikasi Anda adalah sebuah permainan di mana Anda membuat ParseObjects untuk mewakili karakter, menambahkan ParseGeoPoints ke karakter-karakter ini akan memungkinkan mereka ditampilkan di sepanjang jalur pemain.

Tutorial ini menjelaskan cara menggunakan beberapa fitur dari ParseGeoPoint melalui Back4App.

Setelah mengikuti tutorial ini, Anda akan dapat melakukan ini:

Document image


Prasyarat

1 - Siapkan Kunci API Google

$ npm install @agm/core

Impor SDK dengan menambahkan kunci yang dihasilkan ke ./src/app/app.module.ts.

2 - Ambil lokasi pengguna

Untuk mengambil lokasi pengguna, kita perlu menginstal Ionic Geolocation plugin.

$ ionic cordova plugin add cordova-plugin-geolocation --variable GEOLOCATION_USAGE_DESCRIPTION="Untuk menemukan Anda" $ npm install --save @ionic-native/geolocation

Sekarang kita telah menginstal dan mengimpor Geolocation ke penyedia di ./src/app/app.module.ts, mari kita implementasikan metode ambil lokasi dan simpan hasilnya ke atribut kelas.

3 - Buat halaman untuk menampilkan peta

Sekarang kita memiliki lokasi pengguna, mari kita buat halaman untuk menampilkan peta, menggunakan [Angular Google Maps] yang telah disebutkan sebelumnya.

Pertama, jalankan pembantu:

$ ionic generate page Maps

Mari kita buat agar menerima Marker yang menyimpan posisi saat ini yang ditampilkan peta dan array Marker yang akan menjadi titik pin di sekitar peta.

Mari kita buka maps.html sekarang dan membuatnya menampilkan data.

4 - Menampilkan lokasi pengguna saat ini di peta

Sekarang kita memiliki halaman untuk menampilkan lokasi Peta.

  1. Mari kita kembali ke home.ts dan mengimplementasikan metode untuk menampilkan lokasi pengguna di peta
  2. Mari kita manfaatkan kemudahan Parse sekarang dan mencari rekan terdekat dengan lokasi pengguna

Anda dapat melihat betapa sederhananya. Pada dasarnya, yang perlu kita lakukan adalah menginstansiasi objek kueri untuk koleksi Pengguna dan membuatnya mencari lokasi geo terdekat dengan memanggil near().

5 - Siapkan Back4App untuk mengasosiasikan ParseGeoPoint dengan ParseObjects

Misalkan aplikasi contoh yang Anda bangun terkait dengan sekelompok toko dengan afiliasi fisik. Akan menarik untuk menunjukkan semua afiliasi fisik dari toko ini di peta. Untuk melakukannya, buat kelas Toko di Dasbor Back4pp, simpan toko yang ada sebagai ParseObjects, lokasi mereka dan setelah itu aplikasi akan dapat menanyakan afiliasi fisik dan menampilkan posisi mereka di peta. Langkah-langkah berikut akan membantu Anda dengan itu.

Pergi ke situs web Back4App masuk, temukan aplikasi Anda dan buka Dasbornya.



Pergi ke Core > Browser > Buat kelas, seperti yang ditunjukkan pada gambar di bawah.

Document image


Di bidang Jenis kelas apa yang Anda butuhkan?, pilih opsi Kustom

Document image


Di bidang Apa yang harus kita sebut?, ketik “Toko” dan kemudian klik tombol Buat kelas.

Document image


Kemudian kelas baru yang disebut “Toko” akan ditampilkan dan Anda harus memasukkan 2 kolom di dalamnya: sebuah kolom dengan tipe data String yang disebut Nama, serta kolom lain dengan tipe data GeoPoint yang disebut Lokasi. Kelas Anda harus berakhir seperti ini:

Document image


Sekarang, isi kelas ini dengan informasi. Untuk melakukannya, klik tombol Tambah baris di menu di kanan atas atau di tengah halaman, seperti yang ditunjukkan pada gambar di bawah.

Document image


Kemudian isi baris dengan informasi yang diperlukan: nama toko dan lintang serta bujur. Setelah memasukkan beberapa data, kelas Toko Anda harus terlihat seperti gambar di bawah. Jika Anda ingin memasukkan lebih banyak data, Anda dapat mengklik tombol Tambah baris di bagian atas, atau di tombol + di bawah baris data terakhir.

Document image


Sekarang Anda siap untuk menggunakan informasi lokasi toko di aplikasi Anda.

6 - Tampilkan semua lokasi toko di Peta

Sekarang kita telah menyimpan lokasi toko, mari kita buat metode untuk mendapatkan objek dan menampilkannya.

Mudah, kan? Sekarang, mari kita dapatkan yang TERDEKAT.

Anda dapat melihat bagaimana ini sama seperti mendapatkan Pengguna terdekat seperti yang telah kita lakukan sebelumnya.

7 - Tambahkan tombol ke Halaman Utama

Anda mungkin menyadari bahwa kita tidak memiliki cara untuk memanggil metode tersebut, mari kita tambahkan tombol ke home.ts dan buat itu terjadi!

8 - Uji aplikasi Anda

  1. Temukan aplikasi Anda dan klik pada Dasbor > Inti > Browser > Pengguna dan buat beberapa pengguna dengan lokasi yang terkait untuk memungkinkan metode getClosestUser berfungsi.
  2. Jalankan aplikasi Anda di perangkat nyata atau di browser untuk mendaftar dan masuk. Coba setiap fitur!

Selesai!

Pada tahap ini, Anda dapat menggunakan beberapa fitur ParseGeoPoint melalui Back4App!