Mover-se para além dos princípios básicos: Por que a localização em tempo real importa

A localização do usuário é uma das mais poderosas transmissões de dados que uma aplicação móvel pode capturar. Quando feita corretamente, ela transforma uma aplicação estática em uma ferramenta consciente do contexto que antecipa o que os usuários precisam. Reagir mapas nativos combinados com a API de Geolocalização é a abordagem padrão do setor para isso, e eles se integram naturalmente com um CMS sem cabeça como Directus. Ao armazenar e servir dados de localização através do Directus, você pode criar recursos que vão desde rastreamento de drivers e encaminhamento de entrega até check-ins sociais e recomendações baseadas em proximidade. Este artigo caminha através de uma implementação completa, desde a configuração do ambiente até práticas recomendadas mais duras para que você possa enviar uma experiência confiável de localização-aware.

Visão geral da arquitetura: Onde o Directus se encaixa

Antes de escrever qualquer código, ajuda a compreender como as peças se conectam. Reaja com o interface móvel, incluindo a renderização de mapas e dados de localização brutos. Directus atua como a infra- estrutura e CMS sem cabeça. Armazena os históricos de localização do usuário, as definições de geofence e os metadados que você precisa. O aplicativo React Native obtém e envia dados de localização para o Directus através da sua API REST ou GraphQL. Esta separação mantém o seu frontend lean e os seus dados centralizados, pesquisáveis e auditáveis.

Para uma análise mais profunda das capacidades de modelagem de dados da Directus, consulte o Directus Data Modeling Guide.

Pré-requisitos e Configuração do Pacote

Você precisará de um projeto React Native (CLI ou Expo de fluxo de trabalho nu) e uma instância do Directus. Para o desenvolvimento local, você pode girar o Directus via Docker. Aqui estão os pacotes principais que você precisa no seu projeto React Native:

  • [[FLT: 0]]react-native-maps – Fornece o componente do mapa e a sobreposição do marcador.
  • @react-native-community/geolocation – Acesso ao GPS do dispositivo e à localização da rede.
  • @react-native-community/geolocation – Acesso ao GPS do dispositivo e à localização da rede.

Instale-os a partir do seu root do projeto:

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

Para iOS, execute para ligar os módulos nativos. Se estiver usando Expo, você precisará ejetar para o fluxo de trabalho nu ou usar o porque essas bibliotecas requerem linkação de módulos nativos. Após a instalação, verifique tudo compila rodando a aplicação em um simulador ou dispositivo antes de seguir em frente.

Permissões da Plataforma: O Portão

Tanto Android quanto iOS exigem consentimento explícito do usuário para acessar o local. Falhar para lidar com permissões graciosamente é a causa número um de falhas de tempo de execução e comentários negativos. Comece com a configuração da plataforma necessária.

Configuração do Android

Abra e adicione estas permissões dentro do bloco , antes do elemento :

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

dá precisão GPS, enquanto fornece um backback usando Wi-Fi e torres de celular. Incluindo ambos permite que seu aplicativo degradar graciosamente em ambientes onde o GPS é fraco, como dentro de casa.

Configuração do iOS

Abra e adicione uma ou ambas as 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>

A Apple necessita de uma explicação convincente para cada tecla. Evite strings genéricas como o “Sua aplicação precisa de acesso à sua localização,” como revisores podem rejeitá- la. Seja específico: [[FLT: 0]]“Para mostrar as cafeterias próximas e fornecer navegação turno a turno,” [[ FLT: 1]] por exemplo. Comece com [[ FLT: 11]] se você só precisa de acompanhamento de primeiro plano. Atualize para a chave sempre apenas se a sua aplicação necessitar de atualizações de fundo.

Tratamento de Permissão em Tempo de Execução no Reagir nativo

A definição de valores manifestos é apenas metade do trabalho. Você também precisa solicitar permissão no tempo de execução, especialmente no Android 6.0+ e iOS 8.0+. Use o módulo para Android e confie na biblioteca de geolocalização nativa para iOS, que desencadeia o prompt do sistema automaticamente quando você chama ou .

Aqui está um gancho de permissão reutilizável:

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

Chame esta função antes de qualquer chamada de geolocalização. Se o usuário negar, mostre uma mensagem amigável explicando o impacto e ofereça um botão para abrir as configurações do sistema. Nunca simplesmente desfaça ou mostre um mapa em branco.

Implementação Principal: Exibindo o Usuário em um Mapa

Com permissões ligadas, você pode criar o componente principal de rastreamento. O código a seguir solicita a posição atual do usuário, define a região do mapa e solta um marcador. Ele também atualiza o marcador em tempo real usando .

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;

Principais detalhes nesta implementação:

  • [[FLT: 0]]distânciaFilter: 10[[FLT: 1]] – Só ativa uma atualização de localização quando o dispositivo se move pelo menos 10 metros. Isto economiza bateria e reduz as chamadas de rede.
  • intervalo: 5000 – Caps a frequência de atualização para uma vez a cada 5 segundos no Android. iOS ignora isso, mas usa sua própria estrangulamento.
  • [[ FLT: 0]] mostraUserLocation[[ FLT: 1]] – Uma funcionalidade integrada de Reagir Mapas Nativos que mostra um ponto nativo do sistema para a localização do utilizador, mesmo sem um marcador explícito. Ele também lida com o círculo de precisão de pulsação azul.

Persistindo Dados de Localização para Directus

Mostrar a localização num mapa é útil, mas o valor real vem do armazenamento e consulta desses dados. No Directus, crie uma coleção chamada localizações[ com estes campos:

  • [[FLT: 0]]id (incremento automático, chave primária)
  • user id (texto ou relação com directus users)
  • [[FLT: 0]]latitude (flutuar)
  • [[FLT: 0]]longitude (flutuar)
  • ]exactidão (flutuante, metros)
  • [[FLT: 0]] timestamp (datetime, auto-gerado)

Em seguida, dentro de sua chamada de volta , envie cada atualização para 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);
 }
};

Atualizações em lote se você espera gravação de alta frequência. Directus suporta criar vários itens de uma só vez passando um array para o mesmo ponto final. Isso reduz a sobrecarga da rede e evita limites de taxa.

Geofecting com Reagir Nativo e Directus

Geofecting é a capacidade de detectar quando um usuário entra ou sai de um limite geográfico predefinido. O Directus pode armazenar estas definições de limite, e a sua aplicação Reagir Nativo poderá configurá- las na posição atual. Este padrão pode habilitar as notificações como “ Bem- vindo ao armazenamento!” ou “ Você deixou a sua área de escritório.”

Guardar as Geofenças em Directus

Criar uma coleção chamada geofences com os seguintes campos:

  • [[FLT: 0]]id (chave primária)
  • [[FLT: 0]] nome (texto)
  • [[FLT: 0]]latitude (flutuar)
  • [[FLT: 0]]longitude (flutuar)
  • rradio (flutuante, metros)
  • [[FLT: 0]]trigger on entry (booleano)
  • [[FLT: 0]] gatilho on exit (booleano)
  • [[FLT: 0]]] mensagem (texto)

Verificação da Geofence do Cliente

Em cada atualização de localização, obtenha as geofences ativas do Directus e teste a distância entre a posição atual e cada centro de cerca. Você pode usar a fórmula Haversine ou uma aproximação mais simples:

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 na lista de geofences localmente e atualize- a periodicamente em vez de obter em todas as atualizações de posição. Isto mantém o aplicativo responsivo e reduz a carga do servidor.

Desempenho e otimização da bateria

O rastreamento de localização é um dos recursos mais intensivos em bateria no celular. Os usuários desinstalarão um aplicativo que drena seu telefone, então a otimização não é opcional. Siga estas diretrizes:

  • [[FLT: 0]] Use o distanceFilter – Defina-o suficientemente alto para evitar atualizações nervosas. Para aplicações de caminhada, 10 metros é uma boa linha de base. Para aplicações de condução, 20-50 metros funciona melhor.
  • [[ FLT: 0]] Reduzir a precisão de localização quando possível[[ FLT: 1]] – Para funcionalidades como a cidade actual do “, a localização grosseira do ” (baseada na rede) é suficiente. Use o Fine (GPS) apenas quando a precisão inferior a 50 metros importa.
  • Chamadas de rede de acelerador – Pontos de localização de buffer na memória e descartá- los para Directus a cada 30 segundos ou cada 100 pontos, o que vier primeiro.
  • Pare de ver quando a aplicação vai para o fundo – A menos que a sua aplicação tenha uma caixa de uso de fundo legítima (navegação, acompanhamento de fitness), limpe o watchId no ouvinte de mudança do AppState. O iOS irá terminar a sua aplicação de qualquer forma se usar muita energia de fundo.
  • [[FLT: 0]] Use [[FLT: 21]] – Aceite uma localização em cache se for recente o suficiente. Isto evita acordar o hardware GPS desnecessariamente.

Apple e Google fornecem ferramentas detalhadas de análise de energia. Use o Registro de Energia do Xcode e o historiador de bateria do Android para inspecionar o comportamento de seu aplicativo antes do envio.

Erro no tratamento e nas bordas

Os serviços de localização não são notoriamente confiáveis. Os usuários podem negar permissões, o modo de avião pode estar ligado, o GPS pode estar bloqueado dentro de casa, e os dispositivos mais antigos podem retornar dados obsoletos ou inexactos.

  • [[ FLT: 0]] Permissão negada[[ FLT: 1]] – Mostrar um banner sem bloqueio com um botão “Open Configurações ”. Nunca desligue a aplicação.
  • [[ FLT: 0]] Localização indisponível[[ FLT: 1]] – Mostrar uma mensagem como “Localização temporariamente indisponível. Verifique a configuração do seu dispositivo. ” Continue a ver para que a aplicação recupere automaticamente quando o sinal voltar.
  • [[ FLT: 0]] Tempo limite [[ FLT: 1]] – Tente até três vezes com recuo exponencial. Se ainda falhar, volte para a localização grosseira ou para a última posição conhecida.
  • [[FLT: 0]] Dados em estado ou em 'cache' – Compare o calendário da posição devolvido com [[FLT: 22]]. Se tiver mais de 60 segundos, descarte- o e aguarde a próxima atualização.

Integre um serviço de registro leve (ou simplesmente envie erros para uma coleção Directus chamada location errors) para que você possa monitorar as taxas de falha do mundo real e melhorar sua lógica de forma iterativa.

Testes em Dispositivos e Cenários

Os simuladores são úteis para a iteração rápida da interface, mas não conseguem simular o comportamento real do GPS. Sempre teste em dispositivos físicos em condições variáveis: caminhada, condução, dentro de um edifício, num túnel, e com o dispositivo em modo de economia de energia. Os emuladores Android podem injetar locais simulados através dos controles estendidos, mas os simuladores iOS não podem emular GPS para a biblioteca de geolocalização. Use um serviço como Localy[] para reproduzir faixas de GPS realistas durante o desenvolvimento.

Criar um plano de teste que abranja estes casos:

  • Instalar e solicitar permissão de primeira vez
  • Negar permissão e depois concedê-la mais tarde através de configurações
  • Movimento rápido (movimentação em velocidade de estrada)
  • Dispositivo estacionário com alta precisão (deve produzir um conjunto apertado de pontos)
  • Transição de fundo para o terreno (o mapa recuperou a última posição conhecida?)

Privacidade, Compliance e Confiança do Usuário

Os dados de localização são sensíveis. Manusear mal pode levar a multas regulatórias e perda de confiança do usuário. Trate-o com o mesmo cuidado que senhas ou informações financeiras.

  • [[FLT: 0]] Transparência – Explique exatamente quais os dados de localização que você coleta e por que na sua política de privacidade. Link para ele a partir da chamada de permissão.
  • Minimização de dados – Colete apenas o nível de precisão que você precisa. Excluir pontos antigos após um período de retenção (por exemplo, 30 dias) através de um fluxo de automação Directus.
  • [[FLT: 0]] Encriptação[[FLT: 1]] – Sirva a sua instância Directus sobre HTTPS. Considere criptografar os campos de recolha [[FLT: 23]] em repouso se o seu modelo de ameaça o exigir.
  • Controlos do utilizador – Fornecer um painel de controlo no aplicativo onde os utilizadores possam ver o seu histórico de localização e apagar pontos individuais ou limpar todo o histórico. Isto constrói confiança e alinha-se com as regras de privacidade, como o GDPR e a CCPA.

Para mais orientações sobre o tratamento de dados pessoais no Directus, consulte as Opções de Configuração de Segurança do Directus .

Indo mais adiante: Casos de uso avançados

Uma vez que os fundamentos são sólidos, você pode incluir em características mais sofisticadas usando a mesma base.

Partilha de Localização em Tempo Real

Use o suporte WebSocket ou SSE da Directus para transmitir atualizações de localização para outros usuários. Por exemplo, um aplicativo de entrega pode mostrar o marcador de movimento do mensageiro no mapa do cliente. A infraestrutura recebe a localização via REST e empurra-a para clientes subscritos sem votação.

Análise baseada em localização

Agregar dados de localização em Directus para gerar mapas de calor, relatórios de tempo de permanência ou padrões de rota populares. O Guia de Análises do Directus mostra como construir painéis em cima dos seus dados.

Fila Desligada

Quando a rede não estiver disponível, os pontos de localização da fila no dispositivo usando o AsyncStorage ou um banco de dados local como o WatermelonDB. Uma vez que a conectividade retome, anule a fila para o Directus. Isto garante a integridade dos dados, mesmo em áreas com cobertura irregular.

Conclusão

A implementação do rastreamento de localização do usuário com os Mapas Nativos de Reagir e a API de Geolocalização é um padrão bem compreendido, mas o diabo está nos detalhes. Ao emparelhar uma implementação de frontend robusta com um CMS sem cabeça como o Directus, você ganha uma infraestrutura flexível para armazenar, pesquisar e agir em dados de localização sem criar uma camada API personalizada. Foque-se no manuseio de permissões, otimização de bateria e privacidade de dados desde o início, e você irá fornecer uma funcionalidade que os usuários acham realmente útil em vez de intrusiva. Os exemplos de código e estratégias neste guia lhe dão uma base pronta para a produção que você pode se adaptar a domínios como logística, rede social, serviços de campo ou qualquer aplicativo que beneficie de saber onde seus usuários estão.