6.5 KiB

Raw Blame 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:

{
  "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:

{
  "@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:

{
  "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:

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:

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:

import { ENV } from '../config/env';

⚙️ Configuração do Expo Doctor

Adicionada configuração no package.json para ignorar avisos sobre bibliotecas específicas:

{
  "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

import { ENV, getGoogleMapsApiKey } from '../config/env';

2. Usar em Componentes

// 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

// 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:

npm install

✅ Verificação

Após a instalação, verifique se tudo está funcionando:

npx expo start

Para verificar se não há problemas de compatibilidade:

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:

Adicione no arquivo src/config/env.ts
Declare o tipo em src/types/env.d.ts
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:

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

Testar o aplicativo com as novas dependências
Verificar se os mapas estão funcionando corretamente
Testar as funcionalidades de rota e geolocalização
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!

6.5 KiB Raw Blame History