Au-delà des bases : pourquoi l'emplacement en temps réel compte

L'emplacement de l'utilisateur est l'un des flux de données les plus puissants qu'une application mobile peut capturer. Une fois fait correctement, il transforme une application statique en un outil contextuel qui anticipe ce dont les utilisateurs ont besoin. Réagissez Native Maps combiné à l'API de géolocalisation est l'approche standard de l'industrie pour cela, et ils s'intègrent naturellement avec un CMS sans tête comme Directus. En stockant et en servant les données de localisation par Directus, vous pouvez créer des fonctionnalités allant du suivi et de l'acheminement des pilotes à l'enregistrement social et aux recommandations basées sur la proximité.

Vue d'ensemble de l'architecture : Où Directus s'adapte

Avant d'écrire un code, il aide à comprendre comment les pièces se connectent. Réagir Native gère la façade mobile, y compris le rendu de carte et les données de localisation brutes. Directus agit comme le moteur de recherche et sans tête CMS. Il stocke l'historique de localisation de l'utilisateur, les définitions de géofence et toutes les métadonnées dont vous avez besoin. L'application Réagir Native récupère et envoie les données de localisation à Directus via son API REST ou GraphQL. Cette séparation maintient votre frontend maigre et vos données centralisées, consultables et auditables.

Pour un examen plus approfondi des capacités de modélisation des données de Directus, voir le Guide de modélisation des données de Directus.

Prérequis et configuration du paquet

Vous aurez besoin d'un projet React Native (CLI ou Expo nue workflow) et d'une instance Directus. Pour le développement local, vous pouvez faire tourner Directus via Docker. Voici les paquets de base dont vous avez besoin dans votre projet React Native :

  • réaction-native-maps[ – Fournit le composant de la carte et le recouvrement de marqueur.
  • @react-native-community/geolocation – Accès au GPS et à l'emplacement du réseau.
  • @react-native-community/geolocation – Accès au GPS et à l'emplacement du réseau.

Installez-les à partir de votre racine de projet :

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

Pour iOS, lancez pour lier les modules natifs. Si vous utilisez Expo, vous devrez éjecter vers le flux de travail nu ou utiliser le parce que ces bibliothèques nécessitent une liaison de module natif. Après l'installation, vérifiez tout compile en exécutant l'application sur un simulateur ou un périphérique avant de passer à l'action.

Autorisations de la plate-forme : Le gardien de la porte

Android et iOS exigent le consentement explicite de l'utilisateur pour accéder à l'emplacement. Ne pas gérer les permissions gracieusement est la cause numéro un des accidents d'exécution et des commentaires négatifs. Commencez par la configuration de la plate-forme requise.

Configuration Android

Ouvrez et ajoutez ces permissions dans le bloc , avant l'élément :

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

donne une précision GPS, tandis que fournit un repli en utilisant Wi-Fi et tours cellulaires. Inclure les deux permet à votre application de dégrader gracieusement dans des environnements où le GPS est faible, comme à l'intérieur.

Configuration iOS

Ouvrir et ajouter une ou les deux touches:

<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 exige une explication convaincante pour chaque clé. Évitez les chaînes génériques comme “Votre application a besoin d'accéder à votre emplacement,” car les évaluateurs peuvent le rejeter. Soyez précis : “Pour afficher les cafés à proximité et fournir la navigation tour à tour,” par exemple. Commencez par si vous avez seulement besoin de suivi de l'avant-plan.

Traitement des permissions de course dans Réagir Native

Vous devez également demander l'autorisation à l'exécution, en particulier sur Android 6.0+ et iOS 8.0+. Utilisez le module pour Android et comptez sur la bibliothèque de géolocalisation native pour iOS, qui déclenche automatiquement l'invite système lorsque vous appelez ou .

Voici un crochet réutilisable de permission:

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;
};

Appelez cette fonction avant tout appel de géolocalisation. Si l'utilisateur nie, affichez un message amical expliquant l'impact et offrez un bouton pour ouvrir les paramètres du système. Ne jamais simplement planter ou afficher une carte vide.

Mise en œuvre de base : Affichage de l'utilisateur sur une carte

Avec les permissions câblées, vous pouvez construire le composant principal de suivi. Le code suivant demande la position actuelle de l'utilisateur, définit la région de la carte, et lâche un marqueur. Il met également à jour le marqueur en temps réel en utilisant .

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;

Principaux détails de cette mise en œuvre:

  • distanceFilter: 10 – ne déclenche une mise à jour d'emplacement que lorsque l'appareil se déplace à au moins 10 mètres. Cela permet d'économiser la batterie et de réduire les appels réseau.
  • intervalle: 5000 – Capte la fréquence de mise à jour à une fois toutes les 5 secondes sur Android. iOS ignore cela mais utilise son propre throttling.
  • showsUserLocation – Une fonctionnalité intégrée de React Native Maps qui affiche un point système natif pour l'emplacement de l'utilisateur, même sans marqueur explicite. Il gère également le cercle de précision de pulsation bleue.

Persistance des données de localisation à diriger

L'affichage de l'emplacement sur une carte est utile, mais la valeur réelle provient du stockage et de la requête de ces données. Dans Directus, créez une collection appelée locations[ avec ces champs :

  • id (auto-inclusion, clé primaire)
  • user id (chaîne ou relation avec les utilisateurs directs)
  • latitude (float)
  • longitude (float)
  • exactitude (float, mètres)
  • timestamp (datetime, généré automatiquement)

Puis, dans votre callback , envoyez chaque mise à jour à 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);
 }
};

Mises à jour par lots si vous attendez des écritures à haute fréquence. Directus prend en charge la création de plusieurs éléments à la fois en passant un tableau au même point d'arrêt. Cela réduit les frais généraux du réseau et évite les limites de taux.

Géofençage avec Réaction Native et Directus

Le géofençage est la capacité de détecter lorsqu'un utilisateur entre ou sort une limite géographique prédéfinie. Directus peut stocker ces définitions de limites, et votre application React Native peut les vérifier par rapport à la position actuelle. Ce modèle permet de signaler des pouvoirs comme “Bienvenue au magasin!” ou “Vous avez quitté votre bureau.”

Stockage des géofences en directus

Créer une collection appelée geofences avec les champs suivants:

  • id (clé primaire)
  • nom (chaîne)
  • latitude (float)
  • longitude (float)
  • rayon (float, mètres)
  • trigger on entry (booléenne)
  • trigger on exit (booléenne)
  • message (texte)

Vérification de la géofinence à l'aide du client

Sur chaque mise à jour, récupérer les géofences actives de Directus et tester la distance entre la position actuelle et chaque centre de clôture. Vous pouvez utiliser la formule Haversine ou une approximation plus simple:

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 la liste des géofences localement et la rafraîchit périodiquement plutôt que de récupérer sur chaque mise à jour de position. Cela maintient l'application réactive et réduit la charge du serveur.

Performance et optimisation de la batterie

Le suivi de l'emplacement est l'une des fonctions les plus exigeantes en batterie sur mobile. Les utilisateurs désinstalleront une application qui vide leur téléphone, de sorte que l'optimisation n'est pas optionnelle.

  • Utiliser la distanceFilter – Réglez-la assez haut pour éviter les mises à jour jittery. Pour les applications de marche, 10 mètres est une bonne base de référence.
  • Réduire la précision de l'emplacement lorsque c'est possible – Pour des caractéristiques comme “city,” emplacement grossier (basé sur le réseau) est suffisant.
  • Calls réseau – Points de localisation tampon en mémoire et les rincer à Directus toutes les 30 secondes ou tous les 100 points, selon le premier des deux.
  • Arrêtez de regarder quand l'application va à l'arrière-plan – À moins que votre application ait un cas d'utilisation de fond légitime (navigation, suivi de la condition physique), effacez l'identifiant de veille dans l'auditeur de changement AppState. iOS mettra fin à votre application de toute façon si elle utilise trop d'énergie de fond.
  • – Acceptez un emplacement mis en cache s'il est assez récent. Cela évite de réveiller inutilement le matériel GPS.

Apple et Google fournissent tous deux des outils de profilage énergétique détaillés. Utilisez le journal d'énergie de Xcode et l'historique de batterie d'Android pour inspecter le comportement de votre application avant l'expédition.

Gestion des erreurs et des cas de bord

Les services de localisation sont notoirement peu fiables. Les utilisateurs peuvent refuser les permissions, le mode avion peut être activé, le GPS peut être bloqué à l'intérieur, et les appareils plus anciens peuvent retourner des données obsolètes ou sauvagement inexactes.

  • Permission refusée[ – Afficher une bannière non-bloquante avec un bouton “Ouvrir Paramètres”. Ne jamais forcer-quit l'application.
  • Location non disponible – Affiche un message comme “Location temporairement indisponible. Vérifiez les paramètres de votre appareil.” Continuez à regarder afin que l'application se rétablisse automatiquement lorsque le signal revient.
  • Timeout – Réessayez jusqu'à trois fois avec un retour exponentiel. Si elle échoue encore, revenez à un emplacement grossier ou à la dernière position connue.
  • Données discontinues ou en cache – Comparez l'horodatage de la position retournée contre . S'il est plus de 60 secondes, jetez-le et attendez la prochaine mise à jour.

Intégrez un service de loging léger (ou envoyez simplement des erreurs à une collection Directus appelée location errors) afin que vous puissiez surveiller les taux de défaillance réels et améliorer votre logique itérativement.

Essais sur les appareils et les scénarios

Les simulateurs sont utiles pour l'itération rapide de l'interface utilisateur, mais ils ne peuvent pas simuler le comportement réel du GPS. Toujours tester sur des appareils physiques dans des conditions variables : marcher, conduire, à l'intérieur d'un bâtiment, dans un tunnel, et avec l'appareil en mode économie d'énergie. Les émulateurs Android peuvent injecter des emplacements de simulation via les commandes étendues, mais les simulateurs iOS ne peuvent pas émuler le GPS du tout pour la bibliothèque de géolocalisation.

Créer un plan d'essai qui couvre ces cas :

  • Nouvelle installation et première autorisation
  • Refuser la permission et l'accorder plus tard via les paramètres
  • Mouvement rapide (conduite à la vitesse de l'autoroute)
  • Dispositif stationnaire avec une grande précision (devrait produire un groupe serré de points)
  • Transition de l'état de la situation (la carte a-t-elle récupéré la dernière position connue?)

Confidentialité, conformité et confiance de l'utilisateur

Les données de localisation sont sensibles. La manipulation erronée peut entraîner des amendes réglementaires et la perte de confiance des utilisateurs. Traitez-les avec le même soin que les mots de passe ou les informations financières.

  • Transparence – Expliquez exactement quelles données de localisation vous recueillez et pourquoi dans votre politique de confidentialité.
  • ] – Ne collectez que le niveau de précision dont vous avez besoin. Supprimez les anciens points après une période de rétention (par exemple, 30 jours) via un flux d'automatisation Directus.
  • Encryptage – Servez votre instance Directus sur HTTPS. Envisagez de chiffrer les champs de collecte au repos si votre modèle de menace le demande.
  • Commandes utilisateur[ – Fournissez un tableau de bord dans l'application où les utilisateurs peuvent voir leur historique de localisation et supprimer des points individuels ou effacer l'historique entier. Cela renforce la confiance et s'harmonise avec les règlements de confidentialité comme le RGPD et la CCPA.

Pour plus d'informations sur le traitement des données personnelles dans Directus, consultez le Options de configuration de sécurité Directus.

Aller plus loin : Cas d'utilisation avancée

Une fois les bases solides, vous pouvez calquer sur des fonctionnalités plus sophistiquées en utilisant la même fondation.

Partage de la localisation en temps réel

Utilisez le support WebSocket ou SSE de Directus pour diffuser des mises à jour de localisation à d'autres utilisateurs. Par exemple, une application de livraison peut afficher le marqueur de déménagement du messager sur la carte du client. Le moteur reçoit l'emplacement via REST et le pousse vers les clients abonnés sans sondage.

Analyse basée sur la localisation

Données agrégées de localisation dans Directus pour générer des cartes thermiques, des rapports de temps de séjour ou des schémas de route populaires. Le Directus Analytics Guide montre comment construire des tableaux de bord en plus de vos données.

Demande hors ligne

Lorsque le réseau n'est pas disponible, les points de localisation de la file d'attente sur l'appareil utilisent AsynchroStorage ou une base de données locale comme WatermelonDB. Une fois la connectivité reprise, rincer la file d'attente à Directus.

Conclusion

En jumelant une implémentation frontend robuste avec un CMS sans tête comme Directus, vous obtenez un backend flexible pour stocker, interroger et agir sur les données de localisation sans construire de couche API personnalisée. Concentrez-vous sur la gestion des autorisations, l'optimisation des batteries et la confidentialité des données dès le départ, et vous fournirez une fonctionnalité que les utilisateurs trouvent vraiment utile plutôt que intrusive. Les exemples de code et les stratégies dans ce guide vous donnent une base de données prête à la production que vous pouvez adapter à des domaines tels que la logistique, le réseautage social, les services de terrain ou toute application qui profite de savoir où sont ses utilisateurs.