Penjejakan lokasi masa nyata dengan React Native dan PubNub

Tutorial ini menunjukkan membina aplikasi penjejakan lokasi masa nyata menggunakan React Native dan PubNub. Kami akan membuat dua aplikasi: aplikasi "Trackee" (yang dikesan) dan aplikasi "Tracker" (yang menerima kemas kini lokasi).

Penjejakan lokasi masa nyata adalah penting untuk banyak perkhidmatan atas permintaan, termasuk perkongsian perjalanan (Uber, Lyft), penghantaran makanan (Uber Eats, Doordash), dan Pengurusan Fleet Drone. Panduan ini menyediakan pendekatan praktikal, langkah demi langkah untuk melaksanakan fungsi ini.

video menunjukkan aplikasi dalam tindakan

Ciri -ciri Utama:

Leverages React Native and PubNub untuk pertukaran data masa nyata.
memerlukan kunci API Peta Google dan akaun pubnub.
membangunkan kedua -dua aplikasi trackee dan tracker.
menggunakan API Geolocation dan Mekanisme Penerbitan/Langgan PubNub.
Sesuai untuk pelbagai aplikasi, dari perjalanan menunggang untuk memerintahkan pengesanan.

Prasyarat:

Basic React Native Knowledge. (Lihat Panduan Rasmi untuk Persediaan: [Pautan ke Panduan Rasmi])
Akaun PubNub ([Pautan ke pendaftaran PubNub])
kunci API Peta Google ([pautan ke halaman kunci API Peta Google])

Persekitaran Pembangunan:

nod v10.15.0
npm 6.4.1
benang 1.16.0
React-native 0.59.9
React-native-maps 0.24.2
pubnub-react 1.2.0

Kod sumber:

Trackee App: [Link to Trackee App Repo]
App Tracker: [Pautan ke Repo App Tracker]

persediaan aplikasi Trackee:

Buat Projek Native React baru:
1. react-native init trackeeApp
navigasi ke direktori projek:
2. cd trackeeApp Pasang
(ikuti arahan pada [pautan ke pemasangan peta reaksi-asli]).
3. react-native-maps Pasang PubNub React SDK:
4. yarn add pubnub-react

Kod aplikasi Trackee (app.js) melibatkan penubuhan peta, menggunakan API Geolocation untuk menjejaki lokasi, dan penerbitan kemas kini lokasi ke PubNub menggunakan kaedah . Kaedah kitaran

memastikan perubahan lokasi segera dihantar. Android dan iOS memerlukan pengendalian yang sedikit berbeza untuk mengemas kini penanda animasi. Pengendalian dan pembersihan ralat dalam

juga disertakan. publish componentDidUpdate componentWillUnmount persediaan aplikasi tracker:

Ikuti langkah yang sama seperti aplikasi Trackee, membuat projek bernama trackerApp. Perbezaan utama terletak pada melanggan saluran PubNub menggunakan kaedah subscribe dan mengemas kini peta berdasarkan data lokasi yang diterima.

video yang menunjukkan analisis masa nyata di pubnub

Ujian:

Ujian melibatkan menjalankan aplikasi Trackee (idealnya dalam mod pelepasan pada simulator iOS dengan lokasi simulasi) dan aplikasi tracker pada emulator Android. Analisis masa nyata Pubnub dapat mengesahkan penghantaran data.

Kesimpulan:

Pelaksanaan asas ini mempamerkan penjejakan lokasi masa nyata. Banyak aplikasi yang mungkin, termasuk perjalanan, pengesanan pesanan, dan pemantauan aset.

FAQs:

Artikel ini disimpulkan dengan seksyen Soalan Lazim yang komprehensif yang menangani soalan umum tentang melaksanakan penjejakan lokasi masa nyata di React Native, termasuk pengendalian kebenaran, pengesanan latar belakang, pengoptimuman, pengendalian ralat, ujian, geofencing, keselamatan data, dan berkongsi data lokasi dengan yang lain dengan yang lain Pengguna.

Atas ialah kandungan terperinci Penjejakan lokasi masa nyata dengan React Native dan PubNub. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!