Über die Grundlagen hinausgehen: Warum Echtzeit-Standort wichtig ist

Der Standort des Nutzers ist einer der leistungsfähigsten Datenströme, die eine mobile Anwendung erfassen kann. Wenn es richtig gemacht wird, verwandelt es eine statische App in ein kontextbewusstes Tool, das voraussieht, was die Nutzer brauchen. React Native Maps in Kombination mit der Geolocation API ist der branchenübliche Ansatz dafür, und sie integrieren sich auf natürliche Weise in ein Headless CMS wie Directus. Durch die Speicherung und Bereitstellung von Standortdaten über Directus können Sie Funktionen erstellen, die von der Fahrerverfolgung und dem Lieferrouting bis hin zu sozialen Check-ins und nähebasierten Empfehlungen reichen. Dieser Artikel führt durch eine vollständige Implementierung, von der Umgebungseinstellung bis hin zu produktionsgesicherten Best Practices, so dass Sie eine zuverlässige standortbezogene Erfahrung liefern können.

Architekturübersicht: Wo Directus passt

Bevor Sie einen Code schreiben, hilft es zu verstehen, wie sich die Teile verbinden. React Native behandelt das mobile Frontend, einschließlich Kartenrendering und rohen Standortdaten. Directus fungiert als Backend und Headless CMS. Es speichert Standorthistorien der Benutzer, Geofence-Definitionen und alle Metadaten, die Sie benötigen. Die React Native App holt und sendet Standortdaten über ihre REST- oder GraphQL-API an Directus. Diese Trennung hält Ihr Frontend schlank und Ihre Daten zentralisiert, durchsuchbar und prüfbar.

Für einen tieferen Blick auf Directus Datenmodellierung Fähigkeiten, siehe die Directus Data Modeling Guide.

Voraussetzungen und Paket-Setup

Für lokale Entwicklung können Sie Directus über Docker drehen. Hier sind die Kernpakete, die Sie in Ihrem React Native Projekt benötigen:

  • react-native-maps – Bietet die Map-Komponente und Marker-Overlay.
  • @react-native-community/geolocation – Zugriff auf Geräte-GPS und Netzwerkstandort.
  • @react-native-community/geolocation – Zugriff auf Geräte-GPS und Netzwerkstandort.

Installieren Sie sie von Ihrem Projekt root:

npm install react-native-maps @react-native-community/geolocation

Führen Sie für iOS aus, um die nativen Module zu verknüpfen. Wenn Sie Expo verwenden, müssen Sie den bloßen Workflow auswerfen oder die verwenden, da diese Bibliotheken eine native Modulverknüpfung erfordern.

Plattform-Berechtigungen: Der Gatekeeper

Sowohl Android als auch iOS erfordern eine ausdrückliche Zustimmung des Benutzers, um auf den Standort zuzugreifen. Wenn die Berechtigungen nicht anmutig gehandhabt werden, ist dies die Hauptursache für Laufzeitabstürze und negative Bewertungen. Beginnen Sie mit der erforderlichen Plattformkonfiguration.

Android Konfiguration

Öffne und füge diese Berechtigungen innerhalb des -Blocks vor dem -Element hinzu:

<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />

gibt GPS-Genauigkeit, während ein Fallback mit Wi-Fi und Mobilfunkmasten bietet. Einschließlich beider ermöglicht es Ihrer App, sich in Umgebungen, in denen GPS schwach ist, wie z. B. in Innenräumen, anmutig zu verschlechtern.

iOS Konfiguration

Öffne und füge einen oder beide dieser Schlüssel hinzu:

<key>NSLocationWhenInUseUsageDescription</key>
<string>This app needs your location to show nearby services and track your route.</string>
<key>NSLocationAlwaysAndWhenInUseUsageDescription</key>
<string>This app needs background location access to provide continuous route tracking.</string>

Apple benötigt eine überzeugende Erklärung für jeden Schlüssel. Vermeiden Sie generische Zeichenfolgen wie “Ihre App benötigt Zugriff auf Ihren Standort, ” da Rezensenten es ablehnen können. Seien Sie konkret: “Um beispielsweise nahe gelegene Coffeeshops anzuzeigen und Turn-by-Turn-Navigation anzubieten, ” Beginnen Sie mit , wenn Sie nur Vordergrund-Tracking benötigen. Upgraden Sie auf den Schlüssel immer nur, wenn Ihre App wirklich Hintergrund-Updates benötigt.

Runtime Permission Handling bei React Native

Manuelle Werte zu setzen ist nur die halbe Arbeit. Sie müssen auch zur Laufzeit eine Berechtigung anfordern, insbesondere auf Android 6.0+ und iOS 8.0+. Verwenden Sie das -Modul für Android und verlassen Sie sich auf die native Geolokalisierungsbibliothek für iOS, die die Systemaufforderung automatisch auslöst, wenn Sie oder anrufen.

Hier ist ein wiederverwendbarer Berechtigungshaken:

import { PermissionsAndroid, Platform } from 'react-native';

const requestLocationPermission = async () => {
 if (Platform.OS === 'android') {
 const apiLevel = Platform.Version;
 if (apiLevel < 23) {
 // permissions granted automatically at install time
 return true;
 }
 const granted = await PermissionsAndroid.request(
 PermissionsAndroid.PERMISSIONS.ACCESS_FINE_LOCATION,
 {
 title: 'Location Permission',
 message: 'This app needs access to your location.',
 buttonPositive: 'Grant',
 buttonNegative: 'Deny',
 }
 );
 return granted === PermissionsAndroid.RESULTS.GRANTED;
 }
 // iOS handles runtime permission via the Geolocation call itself
 return true;
};

Rufen Sie diese Funktion vor jedem Geolokalisierungsaufruf auf. Wenn der Benutzer dies ablehnt, zeigen Sie eine freundliche Nachricht an, in der die Auswirkungen erläutert werden, und geben Sie eine Schaltfläche zum Öffnen der Systemeinstellungen.

Kernimplementierung: Anzeige des Benutzers auf einer Karte

Wenn Berechtigungen verdrahtet sind, können Sie die Hauptverfolgungskomponente erstellen. Der folgende Code fordert die aktuelle Position des Benutzers an, legt die Kartenregion fest und lässt einen Marker fallen. Er aktualisiert den Marker auch in Echtzeit mit .

import React, { useState, useEffect, useRef } from 'react';
import { View, StyleSheet } from 'react-native';
import MapView, { Marker, PROVIDER_GOOGLE } from 'react-native-maps';
import Geolocation from '@react-native-community/geolocation';
import { requestLocationPermission } from './permission';

const LocationTracker = () => {
 const [region, setRegion] = useState(null);
 const [currentLocation, setCurrentLocation] = useState(null);
 const watchId = useRef(null);
 const mapRef = useRef(null);

 useEffect(() => {
 const initTracking = async () => {
 const hasPermission = await requestLocationPermission();
 if (!hasPermission) return;

 // Get the initial position immediately
 Geolocation.getCurrentPosition(
 (position) => {
 const { latitude, longitude } = position.coords;
 const initialRegion = {
 latitude,
 longitude,
 latitudeDelta: 0.01,
 longitudeDelta: 0.01,
 };
 setRegion(initialRegion);
 setCurrentLocation({ latitude, longitude });
 },
 (error) => {
 console.warn('Initial position error:', error.message);
 },
 { enableHighAccuracy: true, timeout: 15000, maximumAge: 10000 }
 );

 // Subscribe to continuous updates
 watchId.current = Geolocation.watchPosition(
 (position) => {
 const { latitude, longitude } = position.coords;
 setCurrentLocation({ latitude, longitude });
 // Optionally animate the map to follow the user
 mapRef.current?.animateToRegion({
 latitude,
 longitude,
 latitudeDelta: 0.01,
 longitudeDelta: 0.01,
 }, 500);
 },
 (error) => {
 console.warn('Watch position error:', error.message);
 },
 { enableHighAccuracy: true, distanceFilter: 10, interval: 5000 }
 );
 };

 initTracking();

 return () => {
 if (watchId.current !== null) {
 Geolocation.clearWatch(watchId.current);
 }
 };
 }, []);

 if (!region) {
 return ;
 }

 return (
 
 
 {currentLocation && (
 
 )}
 
 
 );
};

const styles = StyleSheet.create({
 container: { flex: 1 },
 map: { flex: 1 },
});

export default LocationTracker;

Wichtige Details in dieser Implementierung:

  • distanceFilter: 10 – löst nur eine Standortaktualisierung aus, wenn sich das Gerät mindestens 10 Meter bewegt.
  • Intervall: 5000 – Caps die Update-Frequenz auf einmal alle 5 Sekunden auf Android. iOS ignoriert dies, verwendet aber eine eigene Drosselung.
  • showsUserLocation – Eine eingebaute React Native Maps-Funktion, die einen nativen Systempunkt für den Standort des Benutzers anzeigt, auch ohne explizite Markierung.

Persistierende Standortdaten zu Directus

Die Anzeige des Standorts auf einer Karte ist nützlich, aber der wahre Wert kommt von der Speicherung und Abfrage dieser Daten.

  • id (Auto-Inkrement, Primärschlüssel)
  • user id (String oder Relation zu directus users)
  • Breitengrad (float)
  • Länge (float)
  • Genauigkeit (Float, Meter)
  • timestamp (Datumszeit, automatisch generiert)

Dann, innerhalb Ihres Rückrufs, senden Sie jedes Update an Directus:

import axios from 'axios';

const DIRECTUS_URL = 'https://your-directus-instance.com';
const DIRECTUS_TOKEN = 'your-static-token-or-dynamic-jwt';

const saveLocationToDirectus = async (coords) => {
 try {
 await axios.post(
 `${DIRECTUS_URL}/items/locations`,
 {
 latitude: coords.latitude,
 longitude: coords.longitude,
 accuracy: coords.accuracy,
 // user_id is typically pulled from auth context
 },
 {
 headers: {
 Authorization: `Bearer ${DIRECTUS_TOKEN}`,
 },
 }
 );
 } catch (error) {
 console.error('Failed to save location:', error.response?.data || error.message);
 }
};

Batch-Updates, wenn Sie hochfrequente Schreibvorgänge erwarten. Directus unterstützt das Erstellen mehrerer Elemente gleichzeitig, indem ein Array an denselben Endpunkt übergeben wird. Dies reduziert den Netzwerk-Overhead und vermeidet Geschwindigkeitsbegrenzungen.

Geofencing mit React Native und Directus

Geofencing ist die Fähigkeit zu erkennen, wenn ein Benutzer eine vordefinierte geografische Grenze betritt oder verlässt. Directus kann diese Randdefinitionen speichern und Ihre React Native App kann sie mit der aktuellen Position vergleichen. Dieses Muster unterstützt Benachrichtigungen wie “Willkommen im Laden! ” oder “Sie haben Ihren Bürobereich verlassen. ”

Lagerung von Geofences in Directus

Erstellen Sie eine Sammlung mit dem Namen geofences mit den folgenden Feldern:

  • id (Primärschlüssel)
  • name (String)
  • Breitengrad (float)
  • Länge (float)
  • radius (Float, Meter)
  • trigger on entry (boolean)
  • trigger on exit (boolean)
  • Message (Text)

Kundenseite Geofence Check

Bei jedem Standortupdate holen Sie die aktiven Geofences von Directus und testen Sie den Abstand zwischen der aktuellen Position und jedem Zaunzentrum.

const getDistanceFromLatLonInMeters = (lat1, lon1, lat2, lon2) => {
 const R = 6371000; // Earth's radius in meters
 const dLat = (lat2 - lat1) * Math.PI / 180;
 const dLon = (lon2 - lon1) * Math.PI / 180;
 const a =
 Math.sin(dLat / 2) * Math.sin(dLat / 2) +
 Math.cos(lat1 * Math.PI / 180) *
 Math.cos(lat2 * Math.PI / 180) *
 Math.sin(dLon / 2) *
 Math.sin(dLon / 2);
 const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
 return R * c;
};

const checkGeofences = async (currentCoords, geofences) => {
 for (const fence of geofences) {
 const distance = getDistanceFromLatLonInMeters(
 currentCoords.latitude,
 currentCoords.longitude,
 fence.latitude,
 fence.longitude
 );
 if (distance <= fence.radius) {
 return fence; // user is inside this geofence
 }
 }
 return null;
};

Cache die Geofences-Liste lokal und aktualisiere sie regelmäßig, anstatt bei jedem Positionsupdate abzurufen. Dadurch wird die App reaktionsschnell und die Serverlast reduziert.

Performance und Batterieoptimierung

Die Ortung ist eine der batterieintensivsten Funktionen auf dem Handy. Benutzer deinstallieren eine App, die ihr Telefon leer macht, daher ist die Optimierung nicht optional.

  • Entfernung verwendenFilter – Stellen Sie es hoch genug ein, um nervöse Updates zu vermeiden. Für Geh-Apps sind 10 Meter eine gute Grundlinie. Für Fahr-Apps funktionieren 20-50 Meter besser.
  • Reduzieren Sie die Standortgenauigkeit, wenn möglich – Für Features wie “current city,” rough location (netzwerkbasiert) ist ausreichend. Verwenden Sie fine (GPS) nur, wenn Genauigkeit unter 50 Metern zählt.
  • Throttle Network Calls – Puffern Sie die Standortpunkte im Speicher und spülen Sie sie alle 30 Sekunden oder alle 100 Punkte in Directus, je nachdem, was zuerst eintritt.
  • Hören Sie auf zuzuschauen, wenn die App in den Hintergrund wechselt – Sofern Ihre App keinen legitimen Hintergrund-Anwendungsfall hat (Navigation, Fitness-Tracking), löschen Sie die watchId im AppState Change Listener. iOS beendet Ihre App trotzdem, wenn sie zu viel Hintergrundenergie verbraucht.
  • Verwenden Sie – Akzeptieren Sie einen zwischengespeicherten Standort, wenn er neu genug ist.

Apple und Google bieten sowohl detaillierte Energieprofilierungstools an. Verwenden Sie Xcodes Energieprotokoll als auch Androids Batteriehistoriker, um das Verhalten Ihrer App vor dem Versand zu überprüfen.

Fehlerbehandlung und Edge Cases

Ortungsdienste sind notorisch unzuverlässig. Benutzer können Berechtigungen verweigern, der Flugzeugmodus kann eingeschaltet sein, GPS kann in Innenräumen blockiert sein und ältere Geräte können veraltete oder völlig ungenaue Daten zurückgeben. Ihre App sollte jedes dieser Szenarien antizipieren.

  • Permission denied – Zeigen Sie ein nicht blockierendes Banner mit einer “Open Settings” Schaltfläche.
  • Location nicht verfügbar – Zeigen Sie eine Nachricht wie “Location vorübergehend nicht verfügbar an. Überprüfen Sie die Geräteeinstellungen. ” Fahren Sie fort, damit sich die App automatisch erholt, wenn das Signal zurückkehrt.
  • Timeout – Reproduziere bis zu dreimal mit exponentiellem Backoff.
  • Stale oder zwischengespeicherte Daten – Vergleichen Sie den Zeitstempel der zurückgegebenen Position mit . Wenn sie älter als 60 Sekunden ist, verwerfen Sie sie und warten Sie auf das nächste Update.

Integrieren Sie einen leichten Protokollierungsdienst (oder senden Sie einfach Fehler an eine Directus-Sammlung namens location errors], damit Sie die Fehlerraten in der realen Welt überwachen und Ihre Logik iterativ verbessern können.

Testen über Geräte und Szenarien hinweg

Simulatoren sind nützlich für eine schnelle UI-Iteration, aber sie können kein echtes GPS-Verhalten simulieren. Testen Sie immer auf physischen Geräten unter unterschiedlichen Bedingungen: Gehen, Fahren, innerhalb eines Gebäudes, in einem Tunnel und mit dem Gerät im Stromsparmodus. Android-Emulatoren können über die erweiterte Steuerung Scheinorte einfügen, aber iOS-Simulatoren können GPS überhaupt nicht für die Geolokalisierungsbibliothek emulieren. Verwenden Sie einen Dienst wie Locationary, um realistische GPS-Tracks während der Entwicklung wiederzugeben.

Erstellen Sie einen Testplan, der diese Fälle abdeckt:

  • Neue Installation und Erstgenehmigung prompt
  • Verweigern Sie die Erlaubnis und gewähren Sie sie später über Einstellungen
  • Schnelle Bewegung (Fahren mit Autobahngeschwindigkeiten)
  • Stationäres Gerät mit hoher Genauigkeit (sollte eine enge Ansammlung von Punkten erzeugen)
  • Hintergrund-zu-Vordergrund-Übergang (hat die Karte die letzte bekannte Position wiederhergestellt?)

Datenschutz, Compliance und Vertrauen der Nutzer

Standortdaten sind sensibel. Fehlverhalten kann zu Bußgeldern und Vertrauensverlust der Nutzer führen. Behandeln Sie sie mit der gleichen Sorgfalt wie Passwörter oder Finanzinformationen.

  • Transparenz – Erklären Sie genau, welche Standortdaten Sie sammeln und warum in Ihrer Datenschutzerklärung.
  • Datenminimierung – Sammeln Sie nur die erforderliche Genauigkeit. Löschen Sie alte Punkte nach einer Aufbewahrungsfrist (z. B. 30 Tage) über einen Directus-Automatisierungsfluss.
  • Encryption – Serve your Directus instance over HTTPS. Erwägen Sie die Verschlüsselung der -Sammlungsfelder in Ruhe, wenn Ihr Bedrohungsmodell dies verlangt.
  • Benutzersteuerung – Stellen Sie ein In-App-Dashboard bereit, in dem Benutzer ihren Standortverlauf sehen und einzelne Punkte löschen oder den gesamten Verlauf löschen können. Dies schafft Vertrauen und stimmt mit Datenschutzbestimmungen wie DSGVO und CCPA überein.

Weitere Hinweise zum Umgang mit personenbezogenen Daten in Directus finden Sie in den Directus Security Configuration Options.

Weiter gehen: Advanced Use Cases

Sobald die Grundlagen solide sind, können Sie mit derselben Grundlage auf anspruchsvollere Funktionen geschichten.

Realtime Location Sharing

Verwenden Sie Directus WebSocket oder SSE-Unterstützung, um Standortaktualisierungen an andere Benutzer zu senden. Zum Beispiel kann eine Liefer-App den Bewegungsmarker des Kuriers auf der Karte des Kunden anzeigen. Das Backend erhält den Standort über REST und drückt ihn an abonnierte Clients ohne Umfragen.

Standortbasierte Analysen

Aggregieren Sie Standortdaten in Directus, um Heatmaps, Verweilzeitberichte oder beliebte Routenmuster zu generieren. Der Directus Analysehandbuch zeigt, wie Sie Dashboards auf Ihren Daten erstellen.

Offline-Warteschlangen

Wenn das Netzwerk nicht verfügbar ist, wird der Ort des Geräts mit AsyncStorage oder einer lokalen Datenbank wie WatermelonDB in die Warteschlange gestellt. Sobald die Verbindung wieder aufgenommen wird, spülen Sie die Warteschlange zu Directus. Dies gewährleistet die Datenintegrität auch in Bereichen mit fleckiger Abdeckung.

Schlussfolgerung

Die Implementierung von User Location Tracking mit React Native Maps und der Geolocation API ist ein gut verstandenes Muster, aber der Teufel steckt im Detail. Indem Sie eine robuste Frontend-Implementierung mit einem Headless CMS wie Directus kombinieren, erhalten Sie ein flexibles Backend zum Speichern, Abfragen und Handeln auf Standortdaten, ohne eine benutzerdefinierte API-Ebene zu erstellen. Konzentrieren Sie sich von Anfang an auf Berechtigungsverarbeitung, Batterieoptimierung und Datenschutz und Sie werden eine Funktion liefern, die Benutzer wirklich nützlich und nicht aufdringlich finden. Die Codebeispiele und Strategien in diesem Handbuch geben Ihnen eine produktionsfähige Grundlage, die Sie an Domänen wie Logistik, soziale Netzwerke, Außendienste oder jede App anpassen können, die davon profitiert, zu wissen, wo sich ihre Benutzer befinden.