Echtzeit-Standortverfolgung mit PubNub React Native

Blog

Standortverfolgung in Echtzeit mit PubNub React Native

Mit der ständig zunehmenden Nutzung mobiler Apps sind Geolokalisierungs- und Tracking-Funktionen in den meisten Apps zu finden. Die Echtzeit-Geolocation-Verfolgung spielt bei vielen On-Demand-Diensten eine wichtige Rolle, wie zum Beispiel:

  • Taxidienste wie Uber, Lyft oder Ola
  • Essenslieferdienste wie Uber Eats, Foodpanda oder Zomato
  • Überwachung von Drohnenflotten

In diesem Handbuch verwenden wir React Native, um eine Echtzeit-Standortverfolgungs-App zu erstellen. Wir werden zwei React Native-Apps erstellen. Eine fungiert als Tracking-App (Tracking-App genannt) und die andere wird verfolgt (Trackee-App).

So sieht die endgültige Ausgabe für dieses Tutorial aus:

Voraussetzungen

Dieses Tutorial erfordert Grundkenntnisse von React Native. Befolgen Sie zum Einrichten Ihres Entwicklungscomputers die offizielle Anleitung Hier .

Neben React Native verwenden wir auch PubNub , ein Dienst von Drittanbietern, der Echtzeit-Datenübertragung und -Updates bietet. Wir verwenden diesen Service, um die Benutzerkoordinaten in Echtzeit zu aktualisieren.

Registrieren Sie sich für ein kostenloses PubNub-Konto Hier .

Da wir Google Maps auf Android verwenden, benötigen wir auch einen Google Maps API-Schlüssel, den Sie auf Google Maps beziehen können API-Schlüssel abrufen Seite.

Um sicherzustellen, dass wir auf derselben Seite sind, sind dies die Versionen, die in diesem Tutorial verwendet werden:

  • Knoten v10.15.0
  • über dem Meeresspiegel 6.4.1
  • Garn 1.16.0
  • reaktiv 0.59.9
  • Reaktive-native-Karten 0.24.2
  • pubnub-react 1.2.0

Einstieg

Wenn Sie sich gleich den Quellcode unserer Tracker- und Trackee-Apps ansehen möchten, hier sind ihre GitHub-Links:

Beginnen wir zunächst mit der Trackee-App.

auf rost vertrauen wir

Trackee-App

Um ein neues Projekt mit |_+_| zu erstellen, geben Sie dies in das Terminal ein:

react-native-cli $ react-native init trackeeApp

Kommen wir nun zum lustigen Teil – der Codierung.

React Native Maps hinzufügen

Da wir Maps in unserer App verwenden werden, benötigen wir dafür eine Bibliothek. Wir verwenden reagieren-native-maps .

|_+_| . installieren indem Sie die Installationsanweisungen befolgen Hier .

PubNub . hinzufügen

Neben Karten installieren wir auch das PubNub React SDK, um unsere Daten in Echtzeit zu übertragen:

$ cd trackeeApp

Danach können Sie die App jetzt ausführen:

react-native-maps

Auf Ihrem Simulator/Emulator sollten Sie so etwas sehen:

Trackee-App

Trackee-Code

Öffnen Sie nun die |_+_| Datei und die folgenden Importe:

$ yarn add pubnub-react

Abgesehen von MapView, das die Karte in unserer Komponente rendert, haben wir |_+_| . importiert und |_+_| von |_+_|.

Swiper reagieren-nativ

|_+_| identifiziert einen Standort auf einer Karte. Wir verwenden es, um den Standort des Benutzers auf der Karte zu identifizieren.

|_+_| ermöglicht es uns, die animierte API zu verwenden, um das Zentrum und den Zoom der Karte zu steuern.

Nachdem wir die erforderliche Komponente importiert haben, definieren wir einige Konstanten und Anfangswerte für unsere Maps:

$ react-native run-ios $ react-native run-android

Dann definieren wir unsere Klassenkomponente mit einigen Zustands-, Lebenszyklusmethoden und benutzerdefinierten Hilfsmethoden:

App.js

Wütend! Das ist eine Menge Code, also gehen wir es Stück für Stück durch.

Zuerst haben wir einen lokalen Zustand in unserem |_+_| initialisiert. Außerdem initialisieren wir eine PubNub-Instanz:

import React from 'react'; import { StyleSheet, View, Platform, Dimensions, SafeAreaView } from 'react-native'; import MapView, { Marker, AnimatedRegion } from 'react-native-maps'; import PubNubReact from 'pubnub-react';

Sie müssen X durch Ihre eigenen PubNub-Veröffentlichungs- und Abonnementschlüssel ersetzen. Um Ihre Schlüssel zu erhalten, melden Sie sich bei Ihrem PubNub-Konto an und gehen Sie zum Dashboard.

Sie finden a Demoprojekt App dort bereits verfügbar. Es steht Ihnen frei, eine neue App zu erstellen, aber für dieses Tutorial verwenden wir diese Demo Projekt.

Kopieren Sie die Schlüssel und fügen Sie sie in die PubNub-Konstruktorinstanz ein.

Danach verwenden wir die |_+_| Lebenszyklus die |_+_| . anrufen Methode:

Marker

Die |_+_| verwendet die |_+_| API zum Beobachten von Änderungen der Standortkoordinaten des Benutzers. Jedes Mal, wenn sich der Benutzer bewegt und sich seine Positionskoordinaten ändern, |_+_| gibt die neuen Koordinaten des Benutzers zurück.

Die |_+_| akzeptiert zwei Parameter—|_+_| und |_+_|.

Als Optionen setzen wir |_+_| nach |_+_| für hohe Genauigkeit und |_+_| nach |_+_| nur dann Updates zu erhalten, wenn sich der Standort um mindestens zehn Meter Entfernung geändert hat. Wenn Sie maximale Genauigkeit wünschen, verwenden Sie |_+_|, aber beachten Sie, dass mehr Bandbreite und Daten benötigt werden.

Im |_+_| erhalten wir die Positionskoordinaten und rufen use this Koordinaten auf, um die lokalen Zustandsvariablen zu setzen.

AnimatedRegion

Nachdem wir nun die Benutzerkoordinaten haben, verwenden wir sie, um eine Markierung auf der Karte hinzuzufügen und diese Markierung dann kontinuierlich zu aktualisieren, wenn sich die Benutzerkoordinaten mit ihrer Position ändern.

Dazu verwenden wir |_+_| für |_+_| und |_+_| für iOS. Wir übergeben ein Objekt |_+_| mit |_+_| und |_+_| als Parameter für diese Methoden:

react-native-mas

Wir möchten auch, dass die Koordinaten des Benutzers kontinuierlich an unsere Tracker-App gesendet werden. Um dies zu erreichen, verwenden wir |_+_| . von React Lebenszyklusmethode:

Marker

Die |_+_| wird unmittelbar nach der Aktualisierung aufgerufen. Es wird also jedes Mal aufgerufen, wenn die Koordinaten des Benutzers geändert werden.

Wir verwenden weiterhin ein |_+_| Bedingung, dass die Koordinaten nur veröffentlicht werden, wenn der Breitengrad geändert wird.

Wir haben dann den PubNub |_+_| . genannt Methode zum Veröffentlichen der Koordinaten zusammen mit dem Kanalnamen |_+_| wir wollen diese Koordinaten veröffentlichen.

Hinweis: Stellen Sie sicher, dass die |_+_| Der Name ist in beiden Apps gleich. Andernfalls erhalten Sie keine Daten.

Nachdem wir nun mit allen erforderlichen Methoden fertig sind, rendern wir unser |_+_|. Fügen Sie diesen Code in Ihrem |_+_| . hinzu Methode:

in der App-Messaging-API
AnimatedRegion

Wir haben |_+_| verwendet, das sich animiert bewegt, wenn sich der Benutzer bewegt und sich seine Koordinaten ändern.

const { width, height } = Dimensions.get('window'); const ASPECT_RATIO = width / height; const LATITUDE = 37.78825; const LONGITUDE = -122.4324; const LATITUDE_DELTA = 0.0922; const LONGITUDE_DELTA = LATITUDE_DELTA * ASPECT_RATIO;

Wir löschen auch alle |_+_| Watch-Methode in |_+_| um Speicherverluste zu vermeiden.

Beenden wir die Trackee-App, indem wir einige Stile hinzufügen:

export default class App extends React.Component { constructor(props) { super(props); this.state = { latitude: LATITUDE, longitude: LONGITUDE, coordinate: new AnimatedRegion({ latitude: LATITUDE, longitude: LONGITUDE, latitudeDelta: 0, longitudeDelta: 0 }) }; this.pubnub = new PubNubReact({ publishKey: 'X', subscribeKey: 'X' }); this.pubnub.init(this); } componentDidMount() { this.watchLocation(); } componentDidUpdate(prevProps, prevState) { if (this.props.latitude !== prevState.latitude) { this.pubnub.publish({ message: { latitude: this.state.latitude, longitude: this.state.longitude }, channel: 'location' }); } } componentWillUnmount() { navigator.geolocation.clearWatch(this.watchID); } watchLocation = () => { const { coordinate } = this.state; this.watchID = navigator.geolocation.watchPosition( position => { const { latitude, longitude } = position.coords; const newCoordinate = { latitude, longitude }; if (Platform.OS === 'android') { if (this.marker) { this.marker._component.animateMarkerToCoordinate( newCoordinate, 500 // 500 is the duration to animate the marker ); } } else { coordinate.timing(newCoordinate).start(); } this.setState({ latitude, longitude }); }, error => console.log(error), { enableHighAccuracy: true, timeout: 20000, maximumAge: 1000, distanceFilter: 10 } ); }; getMapRegion = () => ({ latitude: this.state.latitude, longitude: this.state.longitude, latitudeDelta: LATITUDE_DELTA, longitudeDelta: LONGITUDE_DELTA }); render() { return ( { this.marker = marker; }} coordinate={this.state.coordinate} /> ); } } const styles = StyleSheet.create({ container: { ...StyleSheet.absoluteFillObject, justifyContent: 'flex-end', alignItems: 'center' }, map: { ...StyleSheet.absoluteFillObject } });

Da unsere Karte den gesamten Bildschirm abdecken soll, müssen wir die absolute Positionierung verwenden und jede Seite auf Null setzen (|_+_|).

|_+_| bietet |_+_| die der Einfachheit halber verwendet werden können und die Duplizierung dieser wiederholten Stile reduzieren.

Ausführen der Trackee-App

Bevor wir weitermachen, ist es immer eine gute Idee, unsere App zu testen. Wir können dies tun, indem wir die folgenden Schritte ausführen.

Auf iOS

Wenn Sie den iOS-Simulator verwenden, haben Sie Glück. Es ist sehr einfach, diese Funktion in iOS im Vergleich zu Android zu testen.

Gehen Sie in Ihren iOS-Simulatoreinstellungen zu Debuggen > Standort > Autobahnauffahrt und aktualisieren Sie Ihre App (|_+_| + |_+_|). Sie sollten so etwas sehen:

Trackee-App

Auf Android

Leider gibt es für Android keine einfache Möglichkeit, diese Funktion zu testen.

Sie können Apps von Drittanbietern verwenden, um GPS-Ortungs-Apps zu imitieren. ich fand GPS-Joystick eine große Hilfe sein.

Sie können auch verwenden Genymotion , das ein Dienstprogramm zum Simulieren des Standorts hat.

Testen auf PubNub

Um zu testen, ob PubNub Daten empfängt, können Sie die Echtzeitanalyse aktivieren, die die Anzahl der Nachrichten anzeigt, die Ihre App empfängt oder sendet.

In deiner Schlüssel Tab, gehen Sie nach unten und schalten Sie ein Echtzeit-Analyse . Gehen Sie dann zu Real-time Analytics, um zu überprüfen, ob die Daten empfangen werden.

Dies ist alles, was die Trackee-App tun muss, also gehen wir zur Tracker-App über.

Tracker-App

Befolgen Sie die gleichen Schritte wie für die Trackee-App und erstellen Sie ein neues React Native-Projekt namens |_+_|.

Sowohl Tracker- als auch Trackee-Apps teilen den Großteil ihres Codes.

So installieren Sie MSI-Motherboard-Treiber

Der einzige Unterschied besteht darin, dass in |_+_| wir erhalten die Standortkoordinaten vom |_+_| über PubNub.

Fügen Sie |_+_| . hinzu SDK, importieren und initialisieren wie in der Trackee-App.

Fügen Sie in |_+_| Folgendes hinzu:

constructor()

Hier ist der Sneak Peak des aktualisierten Code für die Tracker-App.

Im obigen Code verwenden wir PubNubs |_+_| Methode zum Abonnieren unserer |_+_| Kanal, sobald die Komponente montiert wird.

Danach verwenden wir |_+_| um die auf diesem Kanal empfangenen Nachrichten zu erhalten.

Wir verwenden diese Koordinaten, um die MapView der Tracker-App zu aktualisieren.

Da beide Apps dieselben Koordinaten verwenden, sollten wir die Koordinaten der Trackee-App in der Tracker-App sehen können.

Beide Apps zusammen ausführen

Endlich sind wir beim letzten Schritt. Es ist nicht einfach, beide Apps auf demselben Computer im Entwicklungsmodus zu testen.

Um beide Apps auf einem iOS-Computer zu testen, gehe ich wie folgt vor:

  1. Wir werden die Trackee-App auf dem iOS-Simulator ausführen, da sie über den Debug-Modus verfügt, in dem ich ein sich bewegendes Fahrzeug simulieren kann. Ich werde es auch im Release-Modus ausführen, da wir nicht zwei Pakete gleichzeitig ausführen können:

    constructor(props) { super(props); this.state = { latitude: LATITUDE, longitude: LONGITUDE, coordinate: new AnimatedRegion({ latitude: LATITUDE, longitude: LONGITUDE, latitudeDelta: 0, longitudeDelta: 0, }), }; // Initialize PubNub this.pubnub = new PubNubReact({ publishKey: 'X', subscribeKey: 'X', }); this.pubnub.init(this); }

    Gehen Sie jetzt zu Debuggen > Standort > Autobahnauffahrt .

    reagieren native-app-intro-slider
  2. Wir führen die Tracker-App auf dem Android-Emulator aus:

    componentDidMount()

Die Tracker-App sollte jetzt die |_+_| . sehen können bewegen sich genau wie in der Trackee App.
Den Quellcode für beide Apps finden Sie auf GitHub.

Abschluss

Dies ist nur eine sehr grundlegende Implementierung von Echtzeit-Standortverfolgungsdiensten. Wir kratzen nur an der Oberfläche mit dem, was wir mit der Standortverfolgung erreichen können. In Wirklichkeit sind die Möglichkeiten endlos. Zum Beispiel:

  • Sie könnten einen Mitfahrdienst wie Uber, Lyft usw. erstellen.
  • Mit der Standortverfolgung können Sie Ihre Bestellungen wie Lebensmittel oder Lebensmittel vom lokalen Verkäufer verfolgen.
  • Sie können den Standort Ihrer Kinder verfolgen (nützlich für Eltern oder Lehrer).
  • Sie könnten Tiere in einem geschützten Nationalpark aufspüren.

Literatur-Empfehlungen

☞ Klonen von Tinder mit reaktiven nativen Elementen und Expo

React Native Tutorial: Facebook-Login mit React Native FBSDK

Top 20 der besten Reaktionsvorlagen für Web-Apps im Jahr 2020

#react-native #reactjs