Capítulo 3: Integração do Frontend

🎯 Objetivos

• Compreender o frontend de teste fornecido
• Conectar o frontend ao backend Spring Boot
• Testar o formulário de contato em um ambiente real
• Configurar CORS para Codespaces

---

📚 Recursos Frontend

Recursos do Projeto

Recurso	Link
Código Frontend	Pasta frontend
Guia de integração	27-guide-formulaire-frontend-codespaces.md

---

🎨 Apresentação do Frontend

O frontend fornecido é uma aplicação simples em HTML/CSS/JavaScript que permite:

• ✅ Enviar formulários de contato
• ✅ Visualizar as respostas da API
• ✅ Testar a autenticação de admin
• ✅ Consultar a lista de leads

Estrutura do Frontend

frontend/
├── index.html          # Página do formulário de contato
├── admin.html          # Página admin (lista de leads)
├── login.html          # Página de login
├── css/
│   └── styles.css      # Estilos
└── js/
    ├── contact.js      # Lógica do formulário de contato
    ├── admin.js        # Lógica admin
    └── auth.js         # Gerenciamento de autenticação

---

🚀 Inicialização do Frontend

Opção 1: Com Live Server (VS Code / Codespaces)

1. Instale a extensão Live Server no VS Code/Codespaces

2. Abra a pasta frontend:

cd frontend

3. Clique com o botão direito em index.html → Open with Live Server

4. O navegador será aberto automaticamente no frontend

Opção 2: Com Python (Simple HTTP Server)

# Dentro da pasta frontend
cd frontend

# Python 3
python -m http.server 3000

# Acesse http://localhost:3000

Opção 3: Com Node.js

# Instale o serve globalmente
npm install -g serve

# Inicie o servidor
cd frontend
serve -p 3000

---

⚙️ Configuração para Codespaces

Problema de CORS no Codespaces

No GitHub Codespaces, as URLs são diferentes:

• Backend: https://xxx-8080.app.github.dev
• Frontend: https://xxx-3000.app.github.dev

Solução: Configurar as URLs do Codespaces

1. Recupere a URL do backend no Codespaces:

   • Quando a aplicação Spring Boot iniciar
   • Anote a URL pública (ex: https://abc123-8080.app.github.dev)

2. Altere o arquivo JavaScript do frontend:

// js/config.js ou no topo de contact.js

// Configuração da URL da API
const API_BASE_URL = 'https://SEU-CODESPACE-8080.app.github.dev';

// OU para desenvolvimento local
// const API_BASE_URL = 'http://localhost:8080';

3. Atualize a configuração de CORS do backend:

// SecurityConfig.java
@Bean
public CorsConfigurationSource corsConfigurationSource() {
    CorsConfiguration configuration = new CorsConfiguration();
    configuration.setAllowedOriginPatterns(Arrays.asList("*"));
    configuration.setAllowedMethods(Arrays.asList("GET", "POST", "PUT", "DELETE", "OPTIONS"));
    configuration.setAllowedHeaders(Arrays.asList("*"));
    configuration.setAllowCredentials(true);
    
    UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
    source.registerCorsConfiguration("/**", configuration);
    return source;
}

---

📝 Utilização do Formulário de Contato

Página Principal (index.html)

┌─────────────────────────────────────────────────────────┐
│                    FALE CONOSCO                         │
├─────────────────────────────────────────────────────────┤
│                                                         │
│  Nome completo *                Empresa                 │
│  ┌─────────────────────────┐    ┌─────────────────────┐│
│  │ Digite seu nome         │    │ Sua empresa         ││
│  └─────────────────────────┘    └─────────────────────┘│
│                                                         │
│  Email *                        Telefone                │
│  ┌─────────────────────────┐    ┌─────────────────────┐│
│  │ seu@email.com           │    │ 514-555-1234        ││
│  └─────────────────────────┘    └─────────────────────┘│
│                                                         │
│  Tipo de solicitação *                                  │
│  ┌─────────────────────────────────────────────────┬──┐│
│  │ Solicitação de informação                      │ v││
│  └─────────────────────────────────────────────────┴──┘│
│                                                         │
│  Mensagem *                                             │
│  ┌────────────────────────────────────────────────────┐│
│  │ Descreva sua solicitação...                        ││
│  │                                                    ││
│  └────────────────────────────────────────────────────┘│
│                                                         │
│            ┌─────────────────────┐                      │
│            │      ENVIAR         │                      │
│            └─────────────────────┘                      │
└─────────────────────────────────────────────────────────┘

Teste de Envio

1. Preencha todos os campos obrigatórios (*)
2. Clique em Enviar
3. Observe a resposta:

Sucesso:

✅ Mensagem enviada com sucesso!
Sua solicitação foi registrada. Entraremos em contato em breve.

Erro:

❌ Erro ao enviar
Por favor, verifique os campos e tente novamente.

---

🔐 Interface Admin

Login (login.html)

1. Acesse login.html
2. Insira as credenciais:
   • Email: admin@test.com
   • Senha: password123 (ou conforme configuração)
3. Clique em Entrar

Dashboard Admin (admin.html)

Após o login, você pode:

• 📋 Ver a lista de todos os contatos/leads
• 🔍 Filtrar por status (NEW, CONTACTED, CONVERTED, LOST)
• ✏️ Alterar o status de um lead
• 🗑️ Excluir um lead

┌─────────────────────────────────────────────────────────────────┐
│  Dashboard Admin - Gestão de Leads                 [Sair]       │
├─────────────────────────────────────────────────────────────────┤
│                                                                 │
│  Filtrar: [Todos ▼]  [NEW]  [CONTACTED]  [CONVERTED]  [LOST]   │
│                                                                 │
│  ┌─────────────────────────────────────────────────────────────┐│
│  │ ID │ Nome         │ Email           │ Tipo    │ Status │ ⚙ ││
│  ├────┼──────────────┼─────────────────┼─────────┼────────┼───┤│
│  │ 1  │ Jean Dupont  │ jean@test.com   │ INFO    │ NEW    │ ✏🗑││
│  │ 2  │ Marie Martin │ marie@test.com  │ QUOTE   │ CONTACT│ ✏🗑││
│  │ 3  │ Pierre Duval │ pierre@test.com │ SUPPORT │ NEW    │ ✏🗑││
│  └─────────────────────────────────────────────────────────────┘│
│                                                                 │
│  Total: 3 leads | Novos: 2 | Em andamento: 1                   │
└─────────────────────────────────────────────────────────────────┘

---

🔄 Fluxo de Comunicação Frontend-Backend

---

📡 Chamadas de API a partir do Frontend

JavaScript para enviar o formulário

// contact.js
async function submitContact(formData) {
    try {
        const response = await fetch(`${API_BASE_URL}/api/contact`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({
                fullName: formData.fullName,
                email: formData.email,
                company: formData.company,
                phone: formData.phone,
                requestType: formData.requestType,
                message: formData.message
            })
        });

        if (!response.ok) {
            throw new Error('Erreur lors de la soumission');
        }

        const data = await response.json();
        showSuccess('Mensagem enviada com sucesso!');
        return data;
    } catch (error) {
        showError('Erro: ' + error.message);
    }
}

JavaScript para autenticação admin

// auth.js
async function login(email, password) {
    const response = await fetch(`${API_BASE_URL}/api/auth/login`, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify({ email, password })
    });

    const data = await response.json();
    
    if (response.ok) {
        // Armazenar o token JWT
        localStorage.setItem('token', data.token);
        window.location.href = 'admin.html';
    } else {
        showError('Credenciais incorretas');
    }
}

JavaScript para buscar leads (com token)

// admin.js
async function getLeads() {
    const token = localStorage.getItem('token');
    
    const response = await fetch(`${API_BASE_URL}/api/admin/leads`, {
        headers: {
            'Authorization': `Bearer ${token}`
        }
    });

    if (!response.ok) {
        if (response.status === 401) {
            // Token expirado, redirecionar para login
            window.location.href = 'login.html';
        }
        throw new Error('Erro ao carregar');
    }

    return await response.json();
}

---

⚠️ Troubleshooting Frontend

Erro de CORS

Access to fetch at 'http://localhost:8080/api/contact' has been blocked by CORS policy

Solução: Verifique a configuração de CORS do backend.

Token não enviado

Sintoma: 401 nos endpoints admin mesmo após login.

Solução: Verifique se o token está sendo armazenado e enviado:

console.log('Token:', localStorage.getItem('token'));

URL incorreta

Sintoma: fetch failed ou network error

Solução: Verifique se:

1. O backend está rodando
2. A URL em API_BASE_URL está correta
3. Para Codespaces, utilize a URL pública .app.github.dev

---

✅ Checklist de Validação

• Frontend acessível no navegador
• Formulário de contato visível
• Envio de contato bem-sucedido
• Resposta de sucesso exibida
• Login admin funcional
• Lista de leads visível após login

---

📖 Guia Completo

Guia Detalhado

Para todas as instruções detalhadas de integração do frontend com Codespaces:

📖 27-guide-formulaire-frontend-codespaces.md

---

⏭️ Próxima Etapa

Capítulo 4: Curso Complementar →

---

Voltar ao índice do módulo