5.1 KiB

Raw Blame History

App de Entregas com Rotas Curvas - Expo Go

Este aplicativo React Native com Expo foi desenvolvido para gerenciamento de entregas com rotas curvas como o Uber, funcionando perfeitamente no Expo Go.

🚀 Funcionalidades

Rotas Curvas: Usa a API do Mapbox para traçar rotas que seguem as ruas, nunca em linha reta
Compatível com Expo Go: Funciona sem necessidade de dev build ou EAS Build
Ordenação Inteligente: Algoritmo do vizinho mais próximo para otimizar rotas
Interface Moderna: UI/UX inspirada no Uber com mapas interativos
Gestão de Entregas: Status tracking, fotos, assinaturas e sincronização

🛠️ Tecnologias Utilizadas

React Native com Expo SDK 53
react-native-maps para mapas (compatível com Expo Go)
API do Mapbox para rotas curvas
TypeScript para tipagem segura
AsyncStorage e SQLite para persistência local
React Navigation para navegação

📱 Componentes Principais

1. DeliveryMap

Componente principal que renderiza o mapa com rotas curvas:

Usa react-native-maps (compatível com Expo Go)
Integra com API do Mapbox para rotas
Mostra marcadores coloridos por status
Suporte a modo fullscreen

2. useMapboxDirections

Hook customizado para obter rotas da API do Mapbox:

Calcula rotas otimizadas entre múltiplos pontos
Converte coordenadas GeoJSON para react-native-maps
Tratamento de erros e fallbacks

3. sortDeliveriesByDistanceAndDate

Função que implementa o algoritmo do vizinho mais próximo:

Calcula distâncias usando fórmula de Haversine
Ordena entregas por proximidade e data
Suporte a geocodificação de endereços

🗺️ Como as Rotas Funcionam

Coleta de Coordenadas: O app coleta coordenadas das entregas (lat/lng)
Ordenação: Aplica algoritmo do vizinho mais próximo para otimizar rota
API Mapbox: Envia waypoints ordenados para a API de direções
Rota Curva: Recebe coordenadas que seguem as ruas (GeoJSON)
Renderização: Desenha Polyline no mapa com as coordenadas recebidas

🚀 Como Executar

# Instalar dependências
npm install

# Iniciar o projeto
npx expo start

# Escanear QR code no Expo Go

🔧 Configuração

Token do Mapbox

O token já está configurado no código. Para usar seu próprio:

Crie uma conta em mapbox.com
Gere um token de acesso público
Substitua em src/hooks/useMapboxDirections.ts

API de Entregas

Configure sua API em src/services/api.ts:

URL base da API
Endpoints de autenticação e entregas
Headers de autorização

📊 Estrutura de Dados

Interface Delivery

interface Delivery {
  id: string;
  outId: number;
  customerName: string;
  street: string;
  streetNumber: string;
  neighborhood: string;
  city: string;
  state: string;
  customerPhone: string;
  lat: number | null;
  lng: number | null;
  status: 'in_progress' | 'completed' | 'pending';
  coordinates?: {
    latitude: number;
    longitude: number;
  };
  // ... outras propriedades
}

🎯 Vantagens da Solução

✅ Compatibilidade com Expo Go

Usa apenas bibliotecas compatíveis com Expo Go
Não requer dev build ou EAS Build
Funciona imediatamente após expo start

✅ Rotas Realistas

Seguem as ruas reais (não linhas retas)
Consideram sentido das vias
Evitam vias bloqueadas ou restritas

✅ Performance Otimizada

Algoritmo eficiente de ordenação
Cache de rotas para evitar requisições desnecessárias
Lazy loading de componentes de mapa

✅ UX Profissional

Interface similar ao Uber
Feedback visual em tempo real
Navegação intuitiva entre telas

🔄 Fluxo de Trabalho

Login: Autenticação do entregador
Lista de Entregas: Visualização de todas as entregas do dia
Rotas: Mapa com rota otimizada e marcadores
Detalhes: Informações completas da entrega
Navegação: Integração com apps de navegação
Finalização: Captura de fotos e assinatura

🐛 Troubleshooting

Mapa não carrega

Verifique conexão com internet
Confirme se o token do Mapbox está válido
Teste em dispositivo físico (melhor que emulador)

Rotas não aparecem

Verifique se as entregas têm coordenadas válidas
Confirme se a API do Mapbox está respondendo
Verifique logs no console para erros

Performance lenta

Reduza número de marcadores simultâneos
Implemente virtualização para listas grandes
Use cache para rotas já calculadas

📈 Próximos Passos

Implementar cache offline de rotas
Adicionar suporte a múltiplos veículos
Integrar com sistema de tráfego em tempo real
Implementar notificações push
Adicionar analytics de performance

🤝 Contribuição

Fork o projeto
Crie uma branch para sua feature
Commit suas mudanças
Push para a branch
Abra um Pull Request

📄 Licença

Este projeto está sob a licença MIT. Veja o arquivo LICENSE para mais detalhes.

Desenvolvido para funcionar perfeitamente no Expo Go com rotas curvas como o Uber! 🚚🗺️

5.1 KiB Raw Blame History