Moviendo más allá de los fundamentos: ¿Por qué importa la ubicación en tiempo real

La ubicación del usuario es una de las corrientes de datos más poderosas que una aplicación móvil puede capturar. Cuando se hace bien, convierte una aplicación estática en una herramienta de conocimiento de contexto que anticipa lo que necesitan los usuarios. Reactar Mapas nativos combinados con la API de Geolocalización es el enfoque estándar de la industria para esto, y se integran naturalmente con un CMS sin cabeza como Directus.

Arquitectura Resumen: Donde Directus se adapta

Antes de escribir cualquier código, ayuda a entender cómo se conectan las piezas. React Native maneja el frontend móvil, incluyendo datos de renderización de mapas y ubicación cruda. Directus actúa como el backend y CMS sin cabeza. Almacena historias de ubicación de usuario, definiciones de geofence, y cualquier metadata que necesite. La React Native app fetches y envía datos de ubicación a Directus a través de su REST o GraphQL API de auditoría.

Para una mirada más profunda a las capacidades de modelado de datos de Directus, vea la Guía de modelado de datos de Directus.

Prerrequisitos y paquete de montaje

Necesitarás un proyecto de React Native (CLI o Expo de flujo de trabajo desnudo) y una instancia Directus. Para el desarrollo local, puedes hacer girar Directus a través de Docker. Aquí están los paquetes básicos que necesitas en tu proyecto de React Native:

  • react-native-maps – Proporciona el componente del mapa y el sobreimpuesto del marcador.
  • @react-native-community/geolocation] – Access to device GPS and network location.
  • @react-native-community/geolocation] – Access to device GPS and network location.

Instalarlos desde la raíz de su proyecto:

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

Para iOS, ejecute para vincular los módulos nativos. Si está utilizando Expo, tendrá que expulsar al flujo de trabajo o utilizar el porque estas bibliotecas requieren un enlace de módulo nativo. Después de la instalación, verifique todo compilado ejecutando la aplicación en un simulador o dispositivo antes de pasar.

Permisos de la plataforma: El portero

Tanto Android como iOS requieren un consentimiento explícito para acceder a la ubicación. No poder manejar los permisos con gracia es la causa número uno de los fallos de tiempo de ejecución y las reseñas negativas.

Configuración Android

Abra y agregue estos permisos dentro del bloque , antes del elemento :

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

da la precisión del GPS, mientras que proporciona un retroceso utilizando Wi-Fi y torres de celda. Incluyendo ambos permite que su aplicación degrada con gracia en entornos donde el GPS es débil, como interior.

Configuración iOS

Abra y agregue una o ambas teclas:

<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 requiere una explicación convincente para cada clave. Evite cadenas genéricas como “Tu aplicación necesita acceso a tu ubicación, cúsrdquo; como los revisores pueden rechazarlo. Sea específico: ;Para mostrar las cafeterías cercanas y proporcionar navegación de vuelta, cúmulo; por ejemplo. Comience con ]] si sólo necesitas realizar un seguimiento genuino.

Permiso de tiempo de ejecución Manejo de acción de los nativos

Configurar valores de manifiesto es sólo la mitad del trabajo. También necesita solicitar permiso en tiempo de ejecución, especialmente en Android 6.0+ e iOS 8.0+. Utilice el módulo para Android y confíe en la biblioteca de geolocalización nativa para iOS, que activa el sistema de forma automática cuando llame o ].

Aquí hay un gancho de permiso reutilizable:

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

Llame a esta función antes de cualquier llamada de geolocalización. Si el usuario niega, muestre un mensaje amistoso explicando el impacto y ofrezca un botón para abrir la configuración del sistema. Nunca simplemente se estrelló o mostrar un mapa en blanco.

Aplicación básica: Mostrando el Usuario en un mapa

Con permisos conectados, puede construir el componente de seguimiento principal. El siguiente código solicita la posición actual del usuario, establece la región del mapa y deja caer un marcador. También actualiza el marcador en tiempo real utilizando .

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;

Principales detalles en esta aplicación:

  • distanceFilter: 10] – Sólo activa una actualización de ubicación cuando el dispositivo se mueve al menos 10 metros. Esto ahorra batería y reduce las llamadas de red.
  • intervalo: 5000] – Caps the update frequency to once every 5 seconds on Android. iOS ignora esto pero utiliza su propio oscilación.
  • showsUserLocation – Una característica de mapas nativos de reacción integrada que muestra un punto de sistema nativo para la ubicación del usuario, incluso sin un marcador explícito. También maneja el círculo de precisión de pulsor azul.

Datos de ubicación persistentes a Directus

Mostrando la ubicación en un mapa es útil, pero el valor real viene de almacenar y preguntar esos datos. En Directus, crear una colección llamada ]localizaciones con estos campos:

  • id] (auto-incremento, clave primaria)
  • user id] (traer o relacionarse con directus users)
  • latitud (float)
  • longitud (float)
  • exactitud] (flote, metros)
  • timestamp] (hora, autogenerado)

Luego, dentro de su llamada , envíe cada actualización a 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);
 }
};

Actualizaciones de lotes si usted espera que escribe de alta frecuencia. Directus admite la creación de varios elementos de una vez al pasar un array al mismo punto final. Esto reduce la sobrecarga de red y evita los límites de velocidad.

Geofencing with React Native and Directus

Geofencing es la capacidad de detectar cuando un usuario entra o sale de un límite geográfico predefinido. Directus puede almacenar estas definiciones de límites, y su aplicación React Native puede comprobarlas contra la posición actual. Este patrón potencia notificaciones como "ldquo;Bienvenido a la tienda! Ørdquo; o "ldquo;Usted dejó su área de oficina.

Geofences de almacenamiento en Directus

Crear una colección llamada geofences con los siguientes campos:

  • id] (principal clave)
  • nombre (cadena)
  • latitud (float)
  • longitud (float)
  • radius (float, meters)
  • trigger on entry (boolean)
  • trigger on exit (boolean)
  • message (texto)

Comprobación de geofencia cliente-side

En cada actualización de ubicación, busque las geofences activas de Directus y pruebe la distancia entre la posición actual y cada centro de cerca. Puede utilizar la fórmula Haversine o una aproximación más 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;
};

Coloque la lista de geofences localmente y refresque periódicamente en lugar de buscar en cada actualización de posición. Esto mantiene la aplicación sensible y reduce la carga del servidor.

Optimización de rendimiento y batería

El seguimiento de la ubicación es una de las características más intensas de la batería en el móvil. Los usuarios desinstalarán una aplicación que drena su teléfono, por lo que la optimización no es opcional.

  • Use distanceFilter – Establece lo suficientemente alto para evitar las actualizaciones de la jittery. Para las aplicaciones de caminar, 10 metros es una buena base de referencia. Para las aplicaciones de conducción, 20-50 metros funciona mejor.
  • Reducir la exactitud de la ubicación cuando sea posible] – Para características como "ldquo;current city, limitadardquo; coarse location (network-based) es suficiente. Use fino (GPS) sólo cuando la precisión es inferior a 50 metros de peso.
  • Trottle network calls – Buffer location points in memory and flush them to Directus every 30 seconds or every 100 points, whichever comes first.
  • Deja de ver cuándo la aplicación va a fondo] – A menos que tu app tenga un caso de uso de fondo legítimo (navegación, seguimiento de fitness), despeja el watchId en el oyente de cambio de AppState. iOS terminará tu aplicación de todas formas si utiliza demasiada energía de fondo.
  • Use ] – Aceptar una ubicación en caché si es lo suficientemente reciente. Esto evita despertar innecesariamente el hardware GPS.

Apple y Google ofrecen herramientas de profilado de energía detalladas. Use el historial de energía de Xcode y el historiador de baterías de Android para inspeccionar el comportamiento de su aplicación antes de enviar.

Casos de manipulación y borde de errores

Los servicios de localización son notoriamente poco confiables. Los usuarios pueden negar permisos, el modo de avión puede estar encendido, el GPS puede ser bloqueado en interiores, y los dispositivos más antiguos pueden devolver datos escalonados o inexactos. Su aplicación debe anticipar cada uno de estos escenarios.

  • Permission denied – Mostrar una bandera no bloqueadora con un "ldquo;Open Settings limitadardquo; botón. Nunca la fuerza-quit la aplicación.
  • Ubicación no disponible] – Mostrar un mensaje como "ldquo;Location temporalmente no disponible. Compruebe la configuración del dispositivo. Ørdquo; Continuar viendo para que la aplicación se recupera automáticamente cuando la señal regrese.
  • Tiempo] – Retira hasta tres veces con retroceso exponencial. Si aún no, vuelve a la ubicación gruesa o a la última posición conocida.
  • Datos de cuento o encaje – Compare el tiempo de la posición devuelta contra . Si es mayor de 60 segundos, descarte y espere la próxima actualización.

Integrar un servicio de registro ligero (o simplemente enviar errores a una colección Directus llamada ]location errors) para que puedas monitorear las tasas de falla del mundo real y mejorar tu lógica iterativamente.

Pruebas de dispositivos y escenarios

Los simuladores son útiles para la iteración rápida de la interfaz de usuario, pero no pueden simular el comportamiento verdadero del GPS. Siempre prueba en dispositivos físicos bajo condiciones variables: caminar, conducir, dentro de un edificio, en un túnel, y con el dispositivo en modo de ahorro de energía. Los emuladores de Android pueden inyectar lugares de mock a través de los controles extendidos, pero los simuladores de iOS no pueden emular GPS en absoluto para la biblioteca de geolocación.

Crear un plan de prueba que cubra estos casos:

  • Instalación fresca y permiso de primera vez
  • Negar permiso y luego concederlo más tarde mediante ajustes
  • Movimiento rápido (conduciendo a velocidades de la carretera)
  • Dispositivo estacionario con alta precisión (deber producir un grupo de puntos apretado)
  • Transición de fondo a tierra (¿Recuperó el mapa la última posición conocida?)

Privacidad, Cumplimiento y Confianza de Usuarios

Los datos de ubicación son sensibles. El mal manejo puede llevar a multas regulatorias y pérdida de confianza de los usuarios. Trate de él con el mismo cuidado que contraseñas o información financiera.

  • Transparencia] – Explicar exactamente qué datos de ubicación recopila y por qué en su política de privacidad. Enlace a él desde el aviso de permiso.
  • Reducir al mínimo de datos] – Recoger sólo el nivel de precisión que necesita. Eliminar los puntos antiguos después de un período de retención (por ejemplo, 30 días) a través de un flujo de automatización Directus.
  • Encryption] – Servir su instancia Directus sobre HTTPS. Considerar la posibilidad de cifrar los campos de colección en reposo si su modelo de amenaza lo exige.
  • Controles de usuario] – Proporcionar un panel de control en la aplicación donde los usuarios pueden ver su historial de ubicación y eliminar puntos individuales o borrar toda la historia. Esto construye confianza y se alinea con las regulaciones de privacidad como GDPR y CCPA.

Para obtener más orientación sobre el manejo de datos personales en Directus, revise las Opciones de configuración de seguridad de Directus.

Seguir adelante: Casos de uso avanzado

Una vez que los básicos son sólidos, puede capar en características más sofisticadas utilizando la misma fundación.

Compartir en tiempo real

Use WebSocket o SSE de Directus para transmitir actualizaciones de ubicación a otros usuarios. Por ejemplo, una aplicación de entrega puede mostrar el marcador móvil del mensajero en el mapa del cliente. El backend recibe la ubicación vía REST y lo empuja hacia fuera para clientes suscritos sin votación.

Análisis basado en la ubicación

Datos de ubicación ágiles en Directus para generar mapas de calor, informes de tiempo de morada o patrones de ruta populares. La Guía de Análisis muestra cómo construir tableros de datos sobre sus datos.

Carga desactivada

Cuando la red no está disponible, los puntos de ubicación de cola en el dispositivo utilizando AsyncStorage o una base de datos local como WatermelonDB. Una vez que la conectividad se reanude, desplifique la cola a Directus. Esto asegura la integridad de los datos incluso en áreas con cobertura de manchas.

Conclusión

Implementar el seguimiento de la ubicación del usuario con React Native Maps y la Geolocation API es un patrón bien entendido, pero el diablo está en los detalles. Combinando una implementación de frontend robusta con un CMS sin cabeza como Directus, obtienes un backend flexible para almacenar, preguntar y actuar en datos de ubicación sin construir una capa de API personalizada. Enfócate en el manejo de permisos, optimización de baterías y ejemplos de datos de actualización.