69 lines
2.7 KiB
Markdown
69 lines
2.7 KiB
Markdown
# 🛰️ 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):
|
|
|
|
```env
|
|
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`:
|
|
|
|
```javascript
|
|
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
|
|
|
|
1. [ ] Definir `VITE_API_URL` no `.env`.
|
|
2. [ ] Mudar `VITE_USE_MOCK` para `false`.
|
|
3. [ ] Reiniciar o servidor de desenvolvimento (`npm run dev`).
|
|
|
|
**Pronto!** O sistema agora consumirá dados reais do seu banco de dados.
|