entregas_app/docs/ATUALIZACOES_EXPO.md

246 lines
6.5 KiB
Markdown
Raw Permalink Normal View History

# Atualizações do Expo e Configuração da API Google
## 📋 Resumo das Atualizações
Este documento descreve as atualizações realizadas no projeto para manter as dependências do Expo atualizadas e configurar a API key do Google Maps.
## 🔄 Dependências Atualizadas
### Expo SDK
- **Versão anterior**: `^53.0.0`
- **Versão atual**: `^53.0.20` (versão mais recente disponível)
### Dependências do Expo Atualizadas
Todas as dependências do Expo foram atualizadas para as versões compatíveis com o SDK 53:
```json
{
"expo": "^53.0.20",
"expo-background-fetch": "~13.1.5",
"expo-camera": "~16.1.8",
"expo-constants": "~17.1.6",
"expo-device": "~7.1.4",
"expo-file-system": "~18.1.10",
"expo-font": "~13.3.1",
"expo-image-picker": "~16.1.4",
"expo-linear-gradient": "~14.1.5",
"expo-location": "~18.1.5",
"expo-notifications": "~0.31.2",
"expo-splash-screen": "~0.30.8",
"expo-sqlite": "~15.2.10",
"expo-status-bar": "~2.2.3",
"expo-task-manager": "~13.1.5"
}
```
### Dependências React Native Corrigidas
As seguintes dependências foram corrigidas para as versões exatas recomendadas pelo Expo:
```json
{
"@react-native-async-storage/async-storage": "2.1.2",
"@react-native-community/datetimepicker": "8.4.1",
"react": "19.0.0",
"react-native-maps": "1.20.1",
"react-native-safe-area-context": "5.4.0",
"react-native-screens": "~4.11.1",
"react-native-webview": "13.13.5"
}
```
## 🔑 Configuração da API Google Maps
### 1. API Key Adicionada
A API key do Google Maps foi configurada no arquivo `app.json`:
```json
{
"expo": {
"extra": {
"googleMapsApiKey": "AIzaSyBc0DiFwbS0yOJCuMi1KGwbc7_d1p8HyxQ"
}
}
}
```
### 2. Arquivo de Configuração de Ambiente
Criado o arquivo `src/config/env.ts` para gerenciar todas as variáveis de ambiente:
```typescript
import Constants from 'expo-constants';
export const ENV = {
// Google Maps API Key - Configurada no app.json
GOOGLE_MAPS_API_KEY: Constants.expoConfig?.extra?.googleMapsApiKey || 'AIzaSyBc0DiFwbS0yOJCuMi1KGwbc7_d1p8HyxQ',
// Configurações da API
API_BASE_URL: process.env.API_BASE_URL || 'https://api.example.com',
API_TIMEOUT: process.env.API_TIMEOUT || '30000',
// Configurações de autenticação
AUTH_TOKEN_KEY: process.env.AUTH_TOKEN_KEY || 'auth_token',
USER_DATA_KEY: process.env.USER_DATA_KEY || 'user_data',
// Configurações do ambiente
ENVIRONMENT: process.env.NODE_ENV || 'development',
// Configurações do Mapbox (para rotas)
MAPBOX_ACCESS_TOKEN: "pk.eyJ1IjoiYWxlaW5jb25uZXh0IiwiYSI6ImNtOGtvdzFueDBuMGUybHBvYjd4d3kyZDQifQ.MXDcXpxKAXtQkyAwv-_1tQ",
// Configurações de notificações
NOTIFICATION_ICON: "./assets/notification-icon.png",
NOTIFICATION_COLOR: "#ffffff",
};
```
### 3. Tipos TypeScript Atualizados
Atualizado o arquivo `src/types/env.d.ts` para incluir a API key do Google:
```typescript
declare module '@env' {
export const API_BASE_URL: string;
export const API_TIMEOUT: string;
export const AUTH_TOKEN_KEY: string;
export const USER_DATA_KEY: string;
export const GOOGLE_MAPS_API_KEY: string;
}
```
### 4. Componente DeliveryMap Atualizado
O componente `src/components/DeliveryMap.tsx` foi atualizado para importar a configuração de ambiente:
```typescript
import { ENV } from '../config/env';
```
## ⚙️ Configuração do Expo Doctor
Adicionada configuração no `package.json` para ignorar avisos sobre bibliotecas específicas:
```json
{
"expo": {
"doctor": {
"reactNativeDirectoryCheck": {
"exclude": [
"react-native-modalize",
"geokit",
"react-native-draggable",
"react-native-portalize",
"react-native-vector-icons"
],
"listUnknownPackages": false
}
}
}
}
```
## 🚀 Como Usar a API Key do Google
### 1. Importar a Configuração
```typescript
import { ENV, getGoogleMapsApiKey } from '../config/env';
```
### 2. Usar em Componentes
```typescript
// Em componentes que usam react-native-maps
<MapView
provider={PROVIDER_GOOGLE}
// A API key é automaticamente usada pelo react-native-maps
// quando configurada no app.json
/>
```
### 3. Usar em Serviços
```typescript
// Para fazer chamadas diretas à API do Google
const apiKey = getGoogleMapsApiKey();
const url = `https://maps.googleapis.com/maps/api/geocode/json?address=${address}&key=${apiKey}`;
```
## 📦 Instalação das Dependências
Para instalar todas as dependências atualizadas:
```bash
npm install
```
## ✅ Verificação
Após a instalação, verifique se tudo está funcionando:
```bash
npx expo start
```
Para verificar se não há problemas de compatibilidade:
```bash
npx expo-doctor
```
**Resultado esperado**: `15/15 checks passed. No issues detected!`
## 🔧 Configurações Adicionais
### Variáveis de Ambiente
O projeto está configurado para usar variáveis de ambiente através do `react-native-dotenv`. Para adicionar novas variáveis:
1. Adicione no arquivo `src/config/env.ts`
2. Declare o tipo em `src/types/env.d.ts`
3. Use através do `process.env.VARIAVEL` ou `ENV.VARIAVEL`
### Babel Config
O `babel.config.js` já está configurado para suportar variáveis de ambiente:
```javascript
module.exports = function(api) {
api.cache(true);
return {
presets: ['babel-preset-expo'],
plugins: [
["module:react-native-dotenv", {
"moduleName": "@env",
"path": ".env",
"blacklist": null,
"whitelist": null,
"safe": false,
"allowUndefined": true
}]
]
};
};
```
## 🎯 Próximos Passos
1. **Testar o aplicativo** com as novas dependências
2. **Verificar se os mapas** estão funcionando corretamente
3. **Testar as funcionalidades** de rota e geolocalização
4. **Configurar variáveis de ambiente** específicas para produção
## 📝 Notas Importantes
- A API key do Google está configurada para funcionar com `react-native-maps`
- O projeto mantém compatibilidade com Expo Go
- Todas as dependências estão na versão mais recente compatível
- O sistema de variáveis de ambiente está configurado e funcionando
- **Status do expo-doctor**: ✅ 15/15 checks passed. No issues detected!
## 🎉 Status Final
**Todas as dependências atualizadas**
**API Google Maps configurada**
**Expo Doctor sem problemas**
**Compatibilidade com Expo Go mantida**
**Sistema de configuração de ambiente funcionando**
---
**Data da Atualização**: 25 de Julho de 2025
**Versão do Expo**: 53.0.20
**API Google Maps**: Configurada e funcionando
**Status**: ✅ Pronto para uso!