first commit
This commit is contained in:
commit
de50e6cb14
|
|
@ -0,0 +1,173 @@
|
|||
# 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
|
||||
|
||||
1. **Coleta de Coordenadas**: O app coleta coordenadas das entregas (lat/lng)
|
||||
2. **Ordenação**: Aplica algoritmo do vizinho mais próximo para otimizar rota
|
||||
3. **API Mapbox**: Envia waypoints ordenados para a API de direções
|
||||
4. **Rota Curva**: Recebe coordenadas que seguem as ruas (GeoJSON)
|
||||
5. **Renderização**: Desenha Polyline no mapa com as coordenadas recebidas
|
||||
|
||||
## 🚀 Como Executar
|
||||
|
||||
```bash
|
||||
# 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:
|
||||
|
||||
1. Crie uma conta em [mapbox.com](https://mapbox.com)
|
||||
2. Gere um token de acesso público
|
||||
3. 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
|
||||
```typescript
|
||||
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
|
||||
|
||||
1. **Login**: Autenticação do entregador
|
||||
2. **Lista de Entregas**: Visualização de todas as entregas do dia
|
||||
3. **Rotas**: Mapa com rota otimizada e marcadores
|
||||
4. **Detalhes**: Informações completas da entrega
|
||||
5. **Navegação**: Integração com apps de navegação
|
||||
6. **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
|
||||
|
||||
1. Fork o projeto
|
||||
2. Crie uma branch para sua feature
|
||||
3. Commit suas mudanças
|
||||
4. Push para a branch
|
||||
5. 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! 🚚🗺️**
|
||||
Loading…
Reference in New Issue