👨‍🍳 Cuisiner ta première API REST : Le Secret de la Sauce Express, Prisma et Postgres

Salut à toi, futur(e) pro du Backend ! 🚀

Tu viens de dompter React, tu sais créer des interfaces qui déchirent, mais maintenant, tu te demandes : "Où vont mes données quand je clique sur Envoyer ?". Bienvenue dans les coulisses !

Aujourd'hui, on va construire le moteur d'une application de gestion de présence pour un centre de formation. On va gérer des Programmes (Web Dev, Marketing, etc.), des Coachs et des Apprenants.

💡 L'analogie du Chef Cuistot

Pour comprendre comment fonctionne une API en architecture MVC (Modèle-Vue-Contrôleur), imagine qu'on prépare une Pâte de maïs (Foufou) :

1. La Base de Données (Le Garde-manger) : C'est là où sont stockés tes sacs de maïs et ton eau.


2. Le Modèle (La Recette) : C'est le plan qui dit : "Pour faire la pâte, il faut tel ingrédient avec tel type de mesure".


3. Le Contrôleur (Le Chef) : C'est celui qui mélange, surveille le feu et décide quand c'est prêt. C'est la logique.


4. Le Routeur (Le Serveur de salle) : Il prend la commande du client ("Je veux un plat de Foufou !") et l'apporte au Chef.


5. La Vue (Le Plat servi) : En API, on ne sert pas une assiette décorée, mais un fichier JSON (de la donnée pure) que ton React pourra ensuite "dresser" sur l'écran.

🛠️ La Boîte à Outils

Oublie les outils complexes comme Docker pour l'instant, on va tout installer en local pour bien voir ce qui se passe "sous le capot".

1. Node.js (ton moteur JS).


2. PostgreSQL : Télécharge-le (via Postgres.app sur Mac ou l'installeur officiel sur Windows/Linux).


3. Un client API : Postman ou l'extension Thunder Client dans VS Code.

🏗️ Étape 1 : Initialisation du Projet (Préparer la cuisine)

Avant de lancer le feu, on doit préparer notre plan de travail. Ouvre ton terminal et tape ces commandes. C'est ici qu'on définit les règles du jeu :

mkdir gestion-presence-api # Crée le dossier du projet

cd gestion-presence-api    # Entre dans le dossier

npm init -y                # Crée le fichier package.json (Ton carnet de recettes)



# Installation des ingrédients principaux (Dépendances de production)

npm install express @prisma/client bcrypt jsonwebtoken



# Installation des ustensiles (Dépendances de développement)

npm install -D prisma nodemon

🥘 À quoi servent ces ingrédients ?

Si on compare notre API à la préparation d'une Pâte de maïs (Foufou), voici le rôle de chaque outil :

• Express.js (Le Réchaud) : C'est ton moteur. Sans lui, rien ne chauffe. Il reçoit les demandes des clients (ex: "Je veux la liste des élèves") et s'assure que la réponse arrive à bon port.


• Prisma & @prisma/client (Le Traducteur) : Ta base de données parle le "SQL", mais toi tu parles le "JavaScript". Prisma est le traducteur magique qui te permet de commander tes ingrédients sans apprendre une langue complexe. C'est l'ORM (Object-Relational Mapping).


• Bcrypt (Le Pilon de sécurité) : Imagine que tu veuilles cacher une épice secrète. Avec Bcrypt, on "écrase" les mots de passe des coachs pour les transformer en une poudre illisible. Même si quelqu'un regarde dans ton garde-manger, il ne pourra jamais retrouver le mot de passe original. C'est le hachage.


• JSON Web Token / JWT (Le Ticket de caisse) : Une fois que le coach est connecté, on lui donne un ticket (le token). À chaque fois qu'il veut "faire l'appel", il montre ce ticket pour prouver qu'il a bien le droit d'être là.


• Nodemon (Le Commis de cuisine) : Normalement, à chaque fois que tu changes un ingrédient dans ton code, tu dois éteindre et rallumer le réchaud. Nodemon le fait automatiquement pour toi dès que tu sauvegardes un fichier. Un gain de temps fou !

💡 Astuce de chef : Ouvre ton fichier package.json et ajoute la ligne "type": "module",. Cela permet d'utiliser les commandes import et export exactement comme tu le faisais avec React. On reste en terrain connu !

🗄️ Étape 2 : Le Schéma (La Recette de base)

On va utiliser des CUID pour nos IDs. Contrairement aux chiffres (1, 2, 3), les CUID sont des textes longs et uniques (ex: clh1abc...), ce qui est beaucoup plus sécurisé.

Initialise Prisma : npx prisma init.

npx prisma init

Dans le fichier prisma/schema.prisma, remplace tout par ceci :

datasource db {

  provider = "postgresql"

  url      = env("DATABASE_URL")

}



generator client {

  provider = "prisma-client-js"

}



model Program {

  id        String    @id @default(cuid())

  name      String    @unique

  coaches   Coach[]

  students  Student[]

}



model Coach {

  id        String   @id @default(cuid())

  name      String

  email     String   @unique

  password  String   // On va le hacher !

  program   Program  @relation(fields: [programId], references: [id])

  programId String

}



model Student {

  id        String   @id @default(cuid())

  name      String

  program   Program  @relation(fields: [programId], references: [id])

  programId String

  attendances Attendance[]

}



model Attendance {

  id        String   @id @default(cuid())

  date      DateTime @default(now())

  isPresent Boolean  @default(false)

  student   Student  @relation(fields: [studentId], references: [id])

  studentId String

}

Action ! Crée ta base de données vide (appelée presence_db) dans ton logiciel Postgres, puis tape :

npx prisma migrate dev --name init_db

📂 Étape 3 : L'Architecture MVC

On va ranger nos fichiers proprement pour ne pas finir avec un code "spaghetti".

• 
  src/
  
  
  
  
  • 
    controllers/ : Le cerveau (logique métier).
  
  
  • 
    routes/ : Les aiguillages (les URLs).
  
  
  • 
    middlewares/ : La sécurité (vérifier le badge JWT).
  
  
  • 
    lib/ : Configuration de Prisma.
  
  
  • 
    index.js : Le point d'entrée du serveur.
  
  
  
  
  
  

🔐 Étape 4 : L'Authentification (Le Badge du Coach)

On ne veut pas que n'importe qui puisse faire l'appel !

1. Le hachage du mot de passe

Dans src/controllers/authController.js, on crée une fonction pour inscrire un coach. On ne stocke jamais "123456", on stocke une version cryptée grâce à bcrypt.

import bcrypt from 'bcrypt';

import jwt from 'jsonwebtoken';

import { prisma } from '../lib/prisma.js';



export const registerCoach = async (req, res) => {

  const { name, email, password, programId } = req.body;



  // On "sale" et on hache le mot de passe

  const hashedPassword = await bcrypt.hash(password, 10);



  const coach = await prisma.coach.create({

    data: { name, email, password: hashedPassword, programId }

  });

  res.json(coach);

};

📝 Étape 5 : Le CRUD des Apprenants

CRUD signifie : Create (Créer), Read (Lire), Update (Modifier), Delete (Supprimer).

Dans src/controllers/studentController.js :

import { prisma } from '../lib/prisma.js';



// LIRE (Read) : Récupérer tous les apprenants

export const getStudents = async (req, res) => {

  const students = await prisma.student.findMany({

    include: { program: true } // On inclut les infos du programme

  });

  res.json(students);

};



// CRÉER (Create) : Ajouter un nouvel apprenant

export const createStudent = async (req, res) => {

  const { name, programId } = req.body;

  const newStudent = await prisma.student.create({

    data: { name, programId }

  });

  res.status(201).json(newStudent);

};

📢 Étape 6 : "Faire l'appel" (La fonctionnalité spéciale)

Le coach doit pouvoir marquer les élèves présents.

export const takeAttendance = async (req, res) => {

  const { studentId, isPresent } = req.body;



  const attendance = await prisma.attendance.create({

    data: {

      studentId,

      isPresent

    }

  });

  res.json({ message: "Présence enregistrée !", attendance });

};

🚦 Étape 7 : Les Routes (Le Serveur de salle)

Dans src/routes/studentRoutes.js, on définit les chemins :

import express from 'express';

import { getStudents, createStudent } from '../controllers/studentController.js';



const router = express.Router();



router.get('/', getStudents);  // GET http://localhost:3000/students

router.post('/', createStudent); // POST http://localhost:3000/students



export default router;

🏆 Pourquoi c'est "Pro" ?

1. Le CUID : Tes IDs ressemblent à ckjvw12340000.... C'est pro et sécurisé.


2. L'Architecture MVC : Si tu as une erreur dans la base de données, tu sais que c'est dans le Modèle. Si une URL ne répond pas, c'est le Routeur. Si le calcul est faux, c'est le Contrôleur.


3. Sécurité : En hachant les mots de passe, même si un hacker vole ta base de données, il ne pourra rien faire des mots de passe.

🧪 À toi de jouer !

1. Lance ton serveur avec nodemon src/index.js.


2. Utilise Postman pour créer un Programme (Web Dev).


3. Inscris un Coach.


4. Ajoute des Apprenants.


5. Fais l'appel !

Bravo ! Tu viens de passer du côté obscur (et puissant) de la force : le Backend. Tu as maintenant une API solide, prête à être connectée à ton application React. 🚀