Echtzeit-Standortverfolgung mit React Native und PubNub

Dieses Tutorial zeigt, dass das Erstellen einer Echtzeit-Standort-Tracking-App mit React Native und Pubnub erstellt wird. Wir erstellen zwei Apps: eine "Trackee" -App (die verfolgt) und eine "Tracker" -App (die Standortaktualisierungen empfängt).

Echtzeit-Standortverfolgung ist für viele On-Demand-Dienste von entscheidender Bedeutung, darunter Mitfahrgelegenheiten (Uber, Lyft), Lebensmittellieferung (Uber Eats, Doordash) und Drohnenflottenmanagement. Dieser Leitfaden bietet einen praktischen, Schritt-für-Schritt-Ansatz zur Implementierung dieser Funktionalität.

Video, das die App in Aktion zeigt

Schlüsselmerkmale:

• nutzt React Native und Pubnub für Echtzeitdatenaustausch.
• erfordert einen Google Maps -API -Schlüssel und ein Pubnub -Konto.
• entwickelt sowohl eine Trackee- als auch eine Tracker -Anwendung.
• verwendet die Geolocation -API und die Veröffentlichung/Abonnement -Mechanismus von Pubnub.
• geeignet für verschiedene Anwendungen, vom Fahrverhalten bis zur Bestellung von Tracking.

Voraussetzungen:

• Basic React Native Knowledge. (Siehe offizielle Anleitung für Setup: [Link zum offiziellen Leitfaden]
• Ein Pubnub -Konto ([Link zur Pubnub -Anmeldung])
• A Google Maps API -Schlüssel ([Link zu Google Maps API -Tastaturseite])

Entwicklungsumgebung:

• Knoten v10.15.0
• npm 6.4.1
• Garn 1.16.0
• reagieren native 0,59,9
• React-native Maps 0,24,2
• Pubnub-React 1.2.0

Quellcode:

• Trackee App: [Link zu Trackee App Repo]
• Tracker -App: [Link zu Tracker App Repo]

Trackee App Setup:

1. Erstellen Sie ein neues React Native -Projekt: react-native init trackeeApp
2. Navigieren Sie zum Projektverzeichnis: cd trackeeApp
3. Installation react-native-maps (Befolgen Sie die Anweisungen zu [Link to React-Native-Maps-Installation]).
4. Pubnub React SDK installieren: yarn add pubnub-react

Mit dem Trackee App -Code (App.JS) werden die Karte eingerichtet, die Geolocation -API zur Verfolgung des Speicherorts und die Veröffentlichung von Standortaktualisierungen zu Pubnub mithilfe der publish -Methode. Die componentDidUpdate Lebenszyklusmethode stellt sicher, dass die Standortänderungen sofort gesendet werden. Android und iOS benötigen ein leicht unterschiedliches Handling für Animationsmarker -Updates. Fehlerbehebung und Reinigung in componentWillUnmount sind ebenfalls enthalten.

Tracker -App -Setup:

Befolgen Sie die gleichen Schritte wie die Trackee -App und erstellen Sie ein Projekt mit dem Namen trackerApp. Der Schlüsselunterschied besteht darin, den Pubnub -Kanal mit der subscribe -Methode abzuonnieren und die Karte basierend auf empfangenen Standortdaten zu aktualisieren.

Video mit Echtzeitanalysen auf Pubnub

zeigt

Tests:

In

Tests werden die Trackee -App (idealerweise im Release -Modus auf dem iOS -Simulator mit simuliertem Speicherort) und die Tracker -App auf einem Android -Emulator ausgeführt. Die Echtzeitanalyse von Pubnub kann die Datenübertragung überprüfen.

Schlussfolgerung:

Diese grundlegende Implementierung zeigt die Echtzeit-Standortverfolgung. Zahlreiche Anwendungen sind möglich, einschließlich Fahrhang, Bestellverfolgung und Überwachung von Asset.

FAQs:

Der Artikel schließt mit einem umfassenden FAQ Benutzer.

Das obige ist der detaillierte Inhalt vonEchtzeit-Standortverfolgung mit React Native und PubNub. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!