APIs REST et communication 🔄

Une API (Application Programming Interface) c'est comme un serveur de restaurant : tu passes commande, la cuisine prépare, et on te sert. Sans voir la cuisine !

1. Architecture client-serveur 🔄

pseudo ' Les verbes HTTP (actions qu'on peut faire) : GET → LIRE des données ⬅ Comme regarder le menu POST → CRÉER une ressource ⬅ Comme passer commande PUT → MODIFIER une ressource ⬅ Comme changer sa commande DELETE → SUPPRIMER ⬅ Comme annuler

' Codes de statut (réponses du serveur) : 200 = ✅ OK (tout va bien) 201 = ✅ CRÉÉ (ressource créée) 400 = ❌ Mauvaise requête 401 = ❌ Non authentifié (pas connecté) 403 = ❌ Accès refusé (pas le droit) 404 = ❌ Pas trouvé 500 = 💥 Erreur serveur ``'

3. Créer une API avec Next.js 🏗️

Exécution pas à pas
pseudo
1/51
1' Structure d'une API REST avec Next.js :2' Fichier : src/app/api/users/route.ts3 4' Données stockées en mémoire (simule une base de données)5utilisateurs ← [6    {id: 1, nom: "Alice", email: "alice@exemple.com"},7    {id: 2, nom: "Bob", email: "bob@exemple.com"}8]9 10FONCTION GET()11    ' Retourne la liste des utilisateurs12    RETOURNER JSON(utilisateurs)   ⬅ Statut 200 par défaut13FIN FONCTION14 15FONCTION POST(req)16    ' Crée un nouvel utilisateur17    corps ← req.JSON()              ⬅ Lit les données envoyées18    nouvelUtilisateur ← {19        id: taille(utilisateurs) + 1,20        nom: corps.nom,21        email: corps.email22    }23    utilisateurs.ajouter(nouvelUtilisateur)24    RETOURNER JSON(nouvelUtilisateur, statut: 201)  ⬅ "Créé !"25FIN FONCTION26``'27 28```typescript29// src/app/api/users/route.ts30import { NextRequest, NextResponse } from "next/server";31 32const users = [33    { id: 1, nom: "Alice", email: "alice@example.com" },34    { id: 2, nom: "Bob", email: "bob@example.com" },35];36 37export async function GET() {38    return NextResponse.json(users);39}40 41export async function POST(req: NextRequest) {42    const body = await req.json();43    const newUser = {44        id: users.length + 1,45        nom: body.nom,46        email: body.email,47    };48    users.push(newUser);49    return NextResponse.json(newUser, { status: 201 });50}51 
▶️
' Structure d'une API REST avec Next.js :
' Structure d'une API REST avec Next.js :Le programme exécute cette action, puis passe à la suivante.
Le programme exécute cette instruction, puis passe à la suivante.

4. Appeler l'API depuis le frontend 📞

Exécution pas à pas
pseudo
1/85
1' Hook personnalisé pour charger des utilisateurs2FONCTION useUtilisateurs()3    [utilisateurs, setUtilisateurs] ← useState([])4    [chargement, setChargement] ← useState(true)5    [erreur, setErreur] ← useState(null)6    7    useEffect(() → {8        fetch("/api/utilisateurs")          ⬅ Appelle l'API9            .then(réponse → {10                SI NON réponse.ok ALORS11                    lever Erreur("Erreur réseau")12                FIN SI13                RETOURNER réponse.json()    ⬅ Convertit en JSON14            })15            .then(données → {16                setUtilisateurs(données)17                setChargement(false)18            })19            .catch(err → {20                setErreur(err.message)21                setChargement(false)22            })23    }, [])24    25    RETOURNER {utilisateurs, chargement, erreur}26FIN FONCTION27``'28 29```tsx30// Hook personnalisé31function useUsers() {32    const [users, setUsers] = useState([]);33    const [loading, setLoading] = useState(true);34    const [error, setError] = useState(null);35 36    useEffect(() => {37        fetch("/api/users")38            .then(res => {39                if (!res.ok) throw new Error("Erreur réseau");40                return res.json();41            })42            .then(data => {43                setUsers(data);44                setLoading(false);45            })46            .catch(err => {47                setError(err.message);48                setLoading(false);49            });50    }, []);51 52    return { users, loading, error };53}54``'55 56---57 58## 5. Exemple complet 💻59 60```tsx61function ListeUtilisateurs() {62    const { users, loading, error } = useUsers();63 64    if (loading) return <div>Chargement...</div>;65    if (error) return <div>Erreur : {error}</div>;66 67    return (68        <ul>69            {users.map(user => (70                <li key={user.id}>{user.nom} - {user.email}</li>71            ))}72        </ul>73    );74}75``'76 77---78 79## Exercices pour toi 🎯80 811. **API de tâches** : crée une API `/api/taches` avec GET et POST822. **Frontend** : appelle ton API et affiche les tâches dans une liste833. **Suppression** : ajoute une méthode DELETE à ton API844. **Recherche** : ajoute une query `?q=texte` pour filtrer les résultats85 
▶️
' Hook personnalisé pour charger des utilisateurs
' Hook personnalisé pour charger des utilisateursLe programme exécute cette action, puis passe à la suivante.
Le programme exécute cette instruction, puis passe à la suivante.