Chapitre 6.1 : Connexion de FastAPI au Frontend

Temps d'étude : 30 minutes

---

1. Retour au "moteur hyperdrive" : Comparaison des protocoles

Dans le chapitre précédent, nous avons amarré notre MCC (frontend) à la "SSI" (API Laravel). Nous allons maintenant revenir à notre chasseur supraluminique (FastAPI) et effectuer la même opération.

L'objectif de ce chapitre n'est pas seulement de répéter les actions, mais de comparer deux approches. C'est comme si le même vaisseau Dragon s'amarrait d'abord à la SSI, puis à la station chinoise "Tiangong". Le mécanisme d'amarrage est le même (REST), mais il peut y avoir des nuances dans les procédures et l'emplacement des ports.

💡 Analogie spatiale :

Le processus est le même : approcher, s'aligner, s'amarrer. Mais pour la "SSI", il fallait utiliser le port /api/planets, et pour "Tiangong" — le port /spaceships. Notre opérateur au MCC doit connaître ces détails pour que la mission réussisse.

---

2. Préparation du "chasseur" (FastAPI) pour l'amarrage

Nous l'avons déjà fait au Chapitre 4.2, mais assurons-nous que tout est en place.

Étape 1 : Démarrer le serveur FastAPI

1. Arrêtez le serveur Laravel s'il est en cours d'exécution (pour éviter les conflits de ports).
2. Ouvrez un terminal dans le dossier de votre projet FastAPI.

3. Activez l'environnement virtuel :

   • Windows : .\venv\Scripts\Activate.ps1
   • macOS / Linux : source venv/bin/activate

4. Démarrez le serveur :

   uvicorn main:app --reload
   

   Le serveur sera accessible à l'adresse http://127.0.0.1:8000.

Étape 2 : Vérifier les paramètres CORS dans main.py

Assurez-vous que votre projet FastAPI contient le CORSMiddleware configuré que nous avons ajouté précédemment. Il doit autoriser les requêtes provenant de l'adresse de votre frontend.

# main.py
from fastapi.middleware.cors import CORSMiddleware

# ...

origins = [
    "http://127.0.0.1:5500", # Adresse du Live Server
    "null", # Pour file:///
]

app.add_middleware(
    CORSMiddleware,
    allow_origins=origins,
    allow_credentials=True,
    allow_methods=["*"],
    allow_headers=["*"],
)

# ...

Si tout est en place, votre serveur FastAPI est entièrement prêt.

---

3. Reconfiguration de l'"antenne" du MCC vers FastAPI

Maintenant, le plus intéressant : les modifications minimales à apporter à notre JavaScript pour qu'il fonctionne à nouveau avec FastAPI.

Étape 1 : Modifier l'URL de base

Ouvrez api.js et restaurez API_BASE_URL à sa valeur initiale.

// api.js

// Spécifiez l'URL de notre API FastAPI
const API_BASE_URL = 'http://127.0.0.1:8000'; // <-- Sans /api !

// ... reste du code apiRequest ...

Étape 2 : Adaptation à la structure de la réponse FastAPI

Rappelons que notre GET /spaceships dans FastAPI renvoie un simple tableau, et non un objet avec pagination. Cela signifie que nous devons restaurer le code de fetchAndDisplayFleet à son état initial.

Modifiez la fonction fetchAndDisplayFleet dans app.js :

// app.js

async function fetchAndDisplayFleet() {
    try {
        fleetListContainer.innerHTML = '<p>Chargement de la télémétrie depuis FastAPI...</p>';
        const ships = await apiRequest('/spaceships'); // <-- Requête vers /spaceships

        // Dans FastAPI, nous avons un simple tableau, donc la clé .data n'est pas nécessaire !

        fleetListContainer.innerHTML = '';
        if (ships.length === 0) {
            fleetListContainer.innerHTML = '<p>Il n\'y a pas d\'appareils dans le registre.</p>';
            return;
        }

        ships.forEach(ship => {
            // Restaurons notre fonction originale pour créer des cartes
            const card = createShipCard(ship);
            fleetListContainer.appendChild(card);
        });
    } catch (error) {
        fleetListContainer.innerHTML = `<p style="color: #ff6b6b;">Erreur lors du chargement de la flotte : ${error.message}</p>`;
    }
}

// Fonction originale pour créer des cartes de vaisseaux
function createShipCard(ship) {
    const card = document.createElement('div');
    card.className = 'card';
    card.innerHTML = `
        <h3>${ship.name} (ID: ${ship.id})</h3>
        <p>Type: ${ship.type}</p>
        <p>Année de lancement: ${ship.launch_year}</p>
        <p>Statut: ${ship.status}</p>
        <div class="card-actions">
            <button class="edit-btn" data-ship-id="${ship.id}">Modifier</button>
            <button class="delete-btn" data-ship-id="${ship.id}">Radier</button>
        </div>
    `;
    return card;
}

Étape 3 : Vérification des opérations CRUD

Étant donné que nos modèles Pydantic dans FastAPI et les champs du formulaire HTML correspondent (name, type, launch_year, status), les fonctions handleSaveShip et handleDeleteShip devraient fonctionner sans modifications, car elles ciblent déjà le point de terminaison /spaceships.

---

4. Bilan comparatif : Qu'est-ce que cela signifie pour le développeur frontend ?

• Universalité de REST : Vous avez clairement constaté que pour le frontend, peu importe le backend utilisé (PHP/Laravel ou Python/FastAPI), tant qu'il respecte les principes REST.
• Importance de la documentation : Les principales différences résidaient dans les URL des points de terminaison et la structure des réponses JSON. C'est précisément ce qui doit être décrit dans la documentation de l'API. Sans elle, le développeur frontend travaillerait "à l'aveugle".
• Flexibilité du frontend : Votre code JavaScript doit être suffisamment flexible pour s'adapter facilement à différents formats de données (par exemple, vérifier s'il y a une clé data, ou si c'est juste un tableau).

Conclusion : La compétence à travailler avec une API REST est une clé universelle qui ouvre les portes à l'interaction avec n'importe quel backend moderne.

---

Quiz pour la consolidation

1. La principale différence dans l'URL entre notre API Laravel et notre API FastAPI était...

a) L'utilisation de ports différents b) La présence du préfixe `/api` chez Laravel c) L'utilisation de HTTPS chez FastAPI

2. Quel a été le principal changement requis dans le code JS lors du passage d'une réponse paginée de Laravel à un simple tableau de FastAPI ?

a) Cesser d'accéder à `responseData.data` et utiliser `responseData` directement b) Utiliser une autre méthode `fetch` c) Modifier le `Content-Type` dans les en-têtes

3. Cette expérience prouve que pour un développeur frontend...

a) Il est important de connaître à la fois PHP et Python b) Il est important de comprendre les principes REST et de savoir lire la documentation API c) Laravel et FastAPI sont absolument identiques

4. La configuration CORS est une tâche...

a) Du développeur frontend b) De l'administrateur système c) Du développeur backend

5. Si FastAPI utilisait la pagination, comme Laravel, que devrions-nous faire côté frontend ?

a) Rien, le code fonctionnerait tout seul b) Modifier à nouveau la logique pour extraire le tableau de la clé `data` (ou similaire) c) Passer de `fetch` à la bibliothèque Axios

Vérifier

---

🚀 Résumé du chapitre :

Vous avez réussi à changer les "protocoles de communication" de votre MCC et à comparer en pratique le travail avec deux systèmes backend différents.

• ✅ Vous avez consolidé la compétence de configuration de API_BASE_URL pour basculer entre les serveurs.
• ✅ Vous avez compris l'importance de la structure de la réponse (data vs simple tableau) et comment y adapter le frontend.
• ✅ Vous avez réalisé qu'un bon développeur frontend doit être prêt à travailler avec n'importe quelle API RESTful, en étudiant attentivement sa documentation.

La compétence d'amarrage universel est acquise ! Maintenant que nous savons configurer la connexion de base, il est temps de parler de protocoles plus complexes : CORS, authentification et sécurité.

📌 Vérification :

• Assurez-vous que votre serveur FastAPI est en cours d'exécution.
• Assurez-vous d'avoir restauré API_BASE_URL et la logique de traitement de la réponse dans app.js à la version pour FastAPI.
• Vérifiez que votre frontend exécute à nouveau correctement toutes les opérations CRUD avec le backend FastAPI.

⚠️ En cas d'erreurs :

• Erreur CORS : Assurez-vous que le serveur FastAPI est démarré avec les bons paramètres CORS.
• Erreur Cannot read properties of undefined (reading 'length') : Vous avez peut-être oublié de supprimer l'accès à .data de responseData.
• 404 Not Found : Vérifiez API_BASE_URL — FastAPI n'a pas de préfixe /api.