Aller au contenu principal

Chapitre 3: Intégration du Frontend

🎯 Objectifs​

  • Comprendre le frontend de test fourni
  • Connecter le frontend au backend Spring Boot
  • Tester le formulaire de contact dans un environnement réel
  • Configurer CORS pour Codespaces

📚 Ressources Frontend​

Ressources du Projet
RessourceLien
Code FrontendDossier frontend
Guide d'intégration27-guide-formulaire-frontend-codespaces.md

🎨 Présentation du Frontend​

Le frontend fourni est une application simple HTML/CSS/JavaScript qui permet de:

  • ✅ Soumettre des formulaires de contact
  • ✅ Visualiser les réponses de l'API
  • ✅ Tester l'authentification admin
  • ✅ Consulter la liste des leads

Structure du Frontend​

frontend/
├── index.html          # Page formulaire de contact
├── admin.html          # Page admin (liste des leads)
├── login.html          # Page de connexion
├── css/
│   └── styles.css      # Styles
└── js/
    ├── contact.js      # Logique formulaire contact
    ├── admin.js        # Logique admin
    └── auth.js         # Gestion authentification

🚀 Démarrage du Frontend​

Option 1: Avec Live Server (VS Code / Codespaces)​

  1. Installer l'extension Live Server dans VS Code/Codespaces

  2. Ouvrir le dossier frontend:

cd frontend

  1. Clic droit sur index.html → Open with Live Server

  2. Le navigateur s'ouvre automatiquement sur le frontend

Option 2: Avec Python (Simple HTTP Server)​

# Dans le dossier frontend
cd frontend

# Python 3
python -m http.server 3000

# Accéder à http://localhost:3000

Option 3: Avec Node.js​

# Installer serve globalement
npm install -g serve

# Lancer le serveur
cd frontend
serve -p 3000

⚙️ Configuration pour Codespaces​

Problème CORS dans Codespaces​

Dans GitHub Codespaces, les URLs sont différentes:

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

Solution: Configurer les URLs Codespaces​

  1. Récupérer l'URL du backend Codespaces:

    • Quand l'application Spring Boot démarre
    • Noter l'URL publique (ex: https://abc123-8080.app.github.dev)

  2. Modifier le fichier JavaScript du frontend:

// js/config.js ou en haut de contact.js

// Configuration de l'URL de l'API
const API_BASE_URL = 'https://VOTRE-CODESPACE-8080.app.github.dev';

// OU pour développement local
// const API_BASE_URL = 'http://localhost:8080';
  1. Mettre à jour la configuration CORS du 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;
}

📝 Utilisation du Formulaire de Contact​

Page Principale (index.html)​

┌─────────────────────────────────────────────────────────┐
│                    CONTACTEZ-NOUS                       │
├─────────────────────────────────────────────────────────┤
│                                                         │
│  Nom complet *                   Entreprise             │
│  ┌─────────────────────────┐    ┌─────────────────────┐│
│  │ Entrez votre nom        │    │ Votre entreprise    ││
│  └─────────────────────────┘    └─────────────────────┘│
│                                                         │
│  Email *                         Téléphone              │
│  ┌─────────────────────────┐    ┌─────────────────────┐│
│  │ votre@email.com         │    │ 514-555-1234        ││
│  └─────────────────────────┘    └─────────────────────┘│
│                                                         │
│  Type de demande *                                      │
│  ┌─────────────────────────────────────────────────┬──┐│
│  │ Demande d'information                           │ v││
│  └─────────────────────────────────────────────────┴──┘│
│                                                         │
│  Message *                                              │
│  ┌────────────────────────────────────────────────────┐│
│  │ Décrivez votre demande...                          ││
│  │                                                    ││
│  └────────────────────────────────────────────────────┘│
│                                                         │
│            ┌─────────────────────┐                      │
│            │      ENVOYER        │                      │
│            └─────────────────────┘                      │
└─────────────────────────────────────────────────────────┘

Test de Soumission​

  1. Remplir tous les champs obligatoires (*)
  2. Cliquer sur Envoyer
  3. Observer la réponse:

Succès:

✅ Message envoyé avec succès!
Votre demande a été enregistrée. Nous vous contacterons bientôt.

Erreur:

❌ Erreur lors de l'envoi
Veuillez vérifier les champs et réessayer.

🔐 Interface Admin​

Connexion (login.html)​

  1. Accéder à login.html
  2. Entrer les identifiants:
    • Email: admin@test.com
    • Password: password123 (ou selon configuration)
  3. Cliquer sur Se connecter

Dashboard Admin (admin.html)​

Une fois connecté, vous pouvez:

  • 📋 Voir la liste de tous les contacts/leads
  • 🔍 Filtrer par statut (NEW, CONTACTED, CONVERTED, LOST)
  • ✏️ Changer le statut d'un lead
  • 🗑️ Supprimer un lead
┌─────────────────────────────────────────────────────────────────┐
│  Dashboard Admin - Gestion des Leads                [Déconnexion]│
├─────────────────────────────────────────────────────────────────┤
│                                                                 │
│  Filtrer: [Tous ▼]  [NEW]  [CONTACTED]  [CONVERTED]  [LOST]    │
│                                                                 │
│  ┌─────────────────────────────────────────────────────────────┐│
│  │ ID │ Nom          │ Email           │ Type    │ Statut │ ⚙ ││
│  ├────┼──────────────┼─────────────────┼─────────┼────────┼───┤│
│  │ 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 | Nouveaux: 2 | En cours: 1                    │
└─────────────────────────────────────────────────────────────────┘

🔄 Flux de Communication Frontend-Backend​

📡 Appels API depuis le Frontend​

JavaScript pour soumettre le formulaire​

// 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('Message envoyé avec succès!');
        return data;
    } catch (error) {
        showError('Erreur: ' + error.message);
    }
}

JavaScript pour l'authentification 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) {
        // Stocker le token JWT
        localStorage.setItem('token', data.token);
        window.location.href = 'admin.html';
    } else {
        showError('Identifiants incorrects');
    }
}

JavaScript pour récupérer les leads (avec 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 expiré, rediriger vers login
            window.location.href = 'login.html';
        }
        throw new Error('Erreur lors du chargement');
    }

    return await response.json();
}

⚠️ Troubleshooting Frontend​

Erreur CORS​

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

Solution: Vérifier la configuration CORS du backend.

Token non envoyé​

Symptôme: 401 sur les endpoints admin même après connexion.

Solution: Vérifier que le token est bien stocké et envoyé:

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

URL incorrecte​

Symptôme: fetch failed ou network error

Solution: Vérifier que:

  1. Le backend est bien démarré
  2. L'URL dans API_BASE_URL est correcte
  3. Pour Codespaces, utiliser l'URL publique .app.github.dev

✅ Checklist de Validation​

  • Frontend accessible dans le navigateur
  • Formulaire de contact visible
  • Soumission d'un contact réussie
  • Réponse de succès affichée
  • Connexion admin fonctionnelle
  • Liste des leads visible après connexion

📖 Guide Complet​

Guide Détaillé

Pour toutes les instructions détaillées d'intégration frontend avec Codespaces:

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

⏭️ Prochaine Étape​

Chapitre 4: Cours Complémentaire →

Retour à l'index du module