Guia de Setup e Arquitetura — App Cliente & Passageiro — Federal Pro

Instalação Expo SDK 57, Google Maps Platform e Soluções para Solicitação de Viagens e Entregas (Lado do Cliente).

1. Script de Automação em PowerShell (Windows)

Script otimizado com as bibliotecas necessárias para o app do passageiro/cliente:

# ============================================================
# INSTALAÇÃO - APP PASSAGEIRO / CLIENTE (EXPO SDK 57)
# ============================================================

Write-Host "1. Atualizando CLI do Expo e EAS..." -ForegroundColor Cyan
npm install -g expo-cli eas-cli

Write-Host "2. Instalando nucleo Expo SDK 57..." -ForegroundColor Cyan
npx expo install expo@~57.0.0 react@18.3.1 react-native@0.76.7

Write-Host "3. Instalando componentes de Navegacao e UI..." -ForegroundColor Cyan
npx expo install expo-router react-native-safe-area-context react-native-screens expo-linking expo-constants expo-status-bar react-native-gesture-handler react-native-reanimated

Write-Host "4. Instalando utilitarios visuais e navegação web..." -ForegroundColor Cyan
npx expo install expo-font expo-image expo-splash-screen expo-system-ui expo-web-browser expo-build-properties

Write-Host "5. Instalando modulos do cliente (Localização em uso, Notificacoes e WebView)..." -ForegroundColor Cyan
npx expo install expo-location expo-notifications react-native-webview expo-image-picker expo-local-authentication

Write-Host "6. Instalando armazenamento de sessão e dados locais..." -ForegroundColor Cyan
npx expo install @react-native-async-storage/async-storage expo-secure-store

Write-Host "7. Instalando tipos do TypeScript..." -ForegroundColor Cyan
npm install -D typescript @types/react @types/react-native

Write-Host "8. Executando verificacao de compatibilidade..." -ForegroundColor Cyan
npx expo install --fix

Write-Host "============================================================" -ForegroundColor Green
Write-Host " Setup do App de Passageiro/Cliente concluido!" -ForegroundColor Green
Write-Host "============================================================" -ForegroundColor Green

2. Configuração do `app.config.ts` (Apenas Permissões de Cliente)

Ajustado com foco em solicitações do cliente (com permissão de localização apenas durante o uso do app):

import type { ExpoConfig } from 'expo/config';

const GOOGLE_REST_API_KEY = 'AIzaSyDZfT08g1v-fF2LeWD7uf8EsfmIUBqGMQE';

const config: ExpoConfig = {
  name: 'Federal Pro — Passageiro e Entregas',
  slug: 'Federal-Pro-Cliente',
  version: '1.0.0',
  orientation: 'portrait',
  icon: './assets/images/icon.png',
  scheme: 'federalpro',
  userInterfaceStyle: 'light',
  primaryColor: '#208AEF',
  newArchEnabled: true,
  assetBundlePatterns: ['**/*'],

  ios: {
    bundleIdentifier: 'com.federalpro.cliente',
    supportsTablet: false,
    infoPlist: {
      NSLocationWhenInUseUsageDescription:
        'O Federal Pro utiliza sua localização para definir o ponto de partida e sugerir locais próximos.',
      NSPhotoLibraryUsageDescription:
        'O Federal Pro acessa suas fotos para alterar sua imagem de perfil.',
      NSCameraUsageDescription:
        'O Federal Pro utiliza a câmera para leitura de QR Codes e foto de perfil.',
      NSFaceIDUsageDescription:
        'O Federal Pro usa o Face ID para acesso rápido à sua conta.',
      ITSAppUsesNonExemptEncryption: false,
    },
  },

  android: {
    package: 'com.federalpro.cliente',
    adaptiveIcon: {
      backgroundColor: '#0F172A',
      foregroundImage: './assets/images/android-icon-foreground.png',
      backgroundImage: './assets/images/android-icon-background.png',
    },
    permissions: [
      'ACCESS_FINE_LOCATION',
      'ACCESS_COARSE_LOCATION',
      'READ_MEDIA_IMAGES',
      'USE_BIOMETRIC',
      'USE_FINGERPRINT',
      'POST_NOTIFICATIONS',
      'INTERNET',
    ],
  },

  plugins: [
    'expo-router',
    [
      'expo-splash-screen',
      {
        backgroundColor: '#208AEF',
        image: './assets/images/splash-icon.png',
        imageWidth: 80,
        resizeMode: 'contain',
      },
    ],
    'expo-font',
    'expo-secure-store',
    [
      'expo-location',
      {
        locationWhenInUsePermission:
          'O Federal Pro utiliza sua localização para definir o ponto de partida das suas corridas e entregas.',
      },
    ],
    [
      'expo-image-picker',
      {
        photosPermission:
          'O Federal Pro acessa suas fotos para alterar a foto do seu perfil.',
      },
    ],
    'expo-notifications',
  ],

  experiments: {
    typedRoutes: true,
    reactCompiler: true,
  },

  extra: {
    google: {
      restApiKey: GOOGLE_REST_API_KEY,
      restBaseUrl: 'https://maps.googleapis.com/maps/api',
    },
    apiBase: 'https://federalpro.com.br/backend/api',
    eas: {
      projectId: 'SUBSTITUA_PELO_SEU_EAS_PROJECT_ID',
    },
  },
};

export default config;

3. Arquitetura e Recursos Exclusivos para o App do Cliente

A. Chave de Seleção de Modalidade (Passageiro x Entrega)

Na tela inicial do aplicativo, coloque duas abas/cards principais:

Solicitar Viagem: Seleção do local de embarque e destino, escolha do tipo de veículo (Comum, Executivo, Moto-Táxi) e exibição do valor estimado antes de confirmar.
Enviar Encomenda / Objeto: Formulário específico de entrega solicitando:
- Endereço de Retirada e Endereço de Entrega.
- Nome e Telefone do Destinatário (para envio de link de acompanhamento).
- Observações do pacote (ex: "Entregar na recepção", "Cuidado, frágil").
- Seleção da forma de pagamento (PIX, Cartão ou Dinheiro na entrega).

B. Acompanhamento em Tempo Real (Live Tracking do Cliente)

Como o cliente apenas consulta a rota, ele recebe as atualizações via requisições contínuas (polling) ou WebSockets:

O cliente visualiza o mapa Leaflet com um marcador do motorista que se move conforme o backend PHP envia a nova coordenada `(lat, lng)`.
O sistema calcula o tempo estimado de chegada (ETA) usando a Google Distance Matrix API.
Status visíveis no app: Aguardando motorista → Motorista a caminho → Em deslocamento ao destino → Finalizado.

C. Confirmação de Entrega por Código PIN

Para garantir que a encomenda foi entregue com segurança ao cliente final:

Quando o cliente gera uma solicitação de entrega, o backend PHP gera um código aleatório de 4 dígitos (ex: 8492).
Esse código é exibido na tela do cliente solicitante e enviado por SMS/WhatsApp para o destinatário.
O motorista só consegue finalizar a corrida no sistema dele informando esses 4 dígitos recebidos do destinatário.

D. Histórico de Viagens e Pedidos (PHP + MySQLi)

Consulta no backend para listagem de viagens anteriores e solicitações em aberto:

// Exemplo no PHP (Backend - Consultar Historico do Cliente):
// $cliente_id =$_SESSION['cliente_id'];

$query = "SELECT id, tipo_servico, endereco_origem, endereco_destino, valor_total, status, data_criacao 
          FROM solicitacoes 
          WHERE cliente_id = ? 
          ORDER BY id DESC LIMIT 20";

$stmt =$conn->prepare($query);$stmt->bind_param("i", $cliente_id);$stmt->execute();
$resultado =$stmt->get_result();

$pedidos = [];
while ($row =$resultado->fetch_assoc()) {
    $pedidos[] =$row;
}

echo json_encode(['sucesso' => true, 'dados' => $pedidos]);