2.7 KiB

Raw Blame History

🛰️ Relatório de Conexão API - Integra Finance

Este documento descreve a arquitetura de comunicação entre o Front-end (React) e o Back-end, detalhando como as conexões foram construídas e como proceder para conectar o backend em segundos.

🏗️ Arquitetura de Comunicação (DAL)

A camada de acesso a dados (Data Access Layer) foi projetada para ser híbrida (API + Mock). Isso permite que o desenvolvimento continue mesmo sem o backend estar rodando, garantindo alta produtividade.

1. Instância Central (`src/services/api.js`)

Utilizamos o Axios para gerenciar as requisições.

BaseURL: Configurável via variável de ambiente.
Interceptors: Gerenciam automaticamente a inclusão de tokens de autenticação (x-access-token) em todas as chamadas.

2. Utilitário de Decisão (`src/services/serviceUtils.js`)

Criamos um helper chamado handleRequest. Ele é o "cérebro" que decide se a aplicação deve buscar dados do Mock ou da API Real com base em uma única flag global.

⚡ Como conectar o Backend em Segundos

Para conectar o back, você não precisa alterar o código de nenhum componente ou tela. Basta seguir estes 3 passos:

Passo 1: Configurar o arquivo `.env`

Crie um arquivo chamado .env na raiz do projeto (use o .env.example como base):

VITE_API_URL=http://sua-url-do-backend:5000
VITE_USE_MOCK=false

[!IMPORTANT] Ao mudar VITE_USE_MOCK para false, todos os serviços do sistema passarão a apontar para o seu backend instantaneamente.

Passo 2: Padrão de Implementação de Serviço

Ao criar uma nova funcionalidade, siga este padrão em src/services/[feature]Service.js:

import api from './api';
import { handleRequest, simulateLatency } from './serviceUtils';

export const meuNovoService = {
  getDados: () => handleRequest({
    mockFn: () => simulateLatency({ nome: "Dado Mockado" }), // O que retorna no modo Mock
    apiFn: () => api.get('/api/meu-endpoint')             // O que retorna no modo Real
  }),
};

📋 Resumo Técnico para Desenvolvedores

Recurso	Localização	Função
Instância Axios	`src/services/api.js`	Configuração de URL e Tokens.
Logic Wrapper	`src/services/serviceUtils.js`	Alternância Mock/Real e Simulação de Latência.
Mocks	`src/services/mocks/`	Objetos JSON com dados de teste.
Serviços	`src/services/*.js`	Definição dos endpoints e contratos.

✅ Checklist de Conexão Rápida

Definir VITE_API_URL no .env.
Mudar VITE_USE_MOCK para false.
Reiniciar o servidor de desenvolvimento (npm run dev).

Pronto! O sistema agora consumirá dados reais do seu banco de dados.

2.7 KiB Raw Blame History