Trois baguettes à retirer
Il est 7 h 30. Sur son téléphone, une cliente commande trois baguettes à retirer à la boulangerie.
Elle appuie sur « Commander ». Une seconde plus tard, l'écran affiche : « Commande n° 12 confirmée ».
Entre les deux, un programme sur un serveur a tout fait. C'est lui que vous allez écrire.
À la fin de cette leçon
Remarque
Je peux dire ce que fait un back-end quand il reçoit une requête.
Mots clés
| Mot | Ce que ça veut dire | Exemple |
|---|---|---|
| Back-end | le programme sur le serveur qui traite les requêtes | |
| Requête | un message envoyé au serveur : une méthode et un chemin | GET /carte |
| Route | une méthode et un chemin reliés à une fonction | |
| Gestionnaire | la fonction qui traite une route | |
| Réponse | ce que le serveur renvoie : un statut et un corps | |
| Code de statut | un nombre qui dit comment la requête s'est passée | 201 |
Les cellules que les étudiants remplissent restent vides dans cet aperçu.
Une route choisit le gestionnaire
Chaque requête arrive avec une méthode et un chemin, comme GET /carte.
Le back-end garde une liste de routes. Chaque route relie une méthode et un chemin à une fonction, le gestionnaire.
Si aucune route ne correspond, le back-end répond 404 : introuvable.
Essayez : envoyez trois requêtes
// Un petit back-end pour le retrait en boutique d'une boulangerie.
const carte = { baguette: 120, croissant: 130, flan: 290 };
function lister_carte() {
return { statut: 200, corps: carte };
}
function prix_de(nom) {
if (!(nom in carte)) {
return { statut: 404, corps: { erreur: 'Pas à la carte' } };
}
return { statut: 200, corps: { nom: nom, centimes: carte[nom] } };
}
function traiter(requete) {
if (requete.methode === 'GET' && requete.chemin === '/carte') {
return lister_carte();
}
if (requete.methode === 'GET' && requete.chemin.startsWith('/carte/')) {
return prix_de(requete.chemin.slice(7));
}
return { statut: 404, corps: { erreur: 'Route inconnue' } };
}
console.log(traiter({ methode: 'GET', chemin: '/carte' }));
console.log(traiter({ methode: 'GET', chemin: '/carte/flan' }));
console.log(traiter({ methode: 'GET', chemin: '/carte/pizza' }));
À vous : ajoutez une route
function traiter(requete) {
if (requete.methode === 'GET' && requete.chemin === '/carte') {
return { statut: 200, corps: { baguette: 120, croissant: 130 } };
}
// À vous : ajoutez ici une route GET /horaires.
// Elle renvoie le statut 200 et le corps { ouverture: '7h', fermeture: '19h30' }.
return { statut: 404, corps: { erreur: 'Route inconnue' } };
}
console.log(traiter({ methode: 'GET', chemin: '/carte' }));
console.log(traiter({ methode: 'GET', chemin: '/horaires' }));
Le gestionnaire lit ou change des données
Un gestionnaire fait le vrai travail. GET lit des données. POST en crée de nouvelles.
Avant d'écrire, le gestionnaire vérifie ce qu'il reçoit. Une commande sans quantité est refusée avec le statut 400.
Dans une vraie entreprise, les commandes vont dans une base de données. Ici, une simple liste les garde.
Essayez : créez des commandes
const commandes = [];
function creer_commande(corps) {
// Le back-end vérifie lui-même : il ne fait confiance à personne.
if (!corps.produit || !corps.quantite) {
return { statut: 400, corps: { erreur: 'Produit et quantité obligatoires' } };
}
const commande = { numero: commandes.length + 1, produit: corps.produit, quantite: corps.quantite };
commandes.push(commande);
return { statut: 201, corps: commande };
}
function traiter(requete) {
if (requete.methode === 'POST' && requete.chemin === '/commandes') {
return creer_commande(requete.corps);
}
if (requete.methode === 'GET' && requete.chemin === '/commandes') {
return { statut: 200, corps: commandes };
}
return { statut: 404, corps: { erreur: 'Route inconnue' } };
}
console.log(traiter({ methode: 'POST', chemin: '/commandes', corps: { produit: 'baguette', quantite: 3 } }));
console.log(traiter({ methode: 'POST', chemin: '/commandes', corps: { produit: 'flan' } }));
console.log(traiter({ methode: 'GET', chemin: '/commandes' }));
// À vous : envoyez une commande de 2 croissants, puis exécutez de nouveau.
Une erreur fréquente
Attention
Beaucoup pensent que l'appli vérifie déjà le formulaire, donc que le back-end peut tout accepter. C'est faux. N'importe qui peut envoyer une requête sans passer par l'appli. Le back-end vérifie toujours lui-même.
La réponse dit comment cela s'est passé
Chaque réponse porte un code de statut et un corps, souvent en JSON.
Les codes en 200 disent que tout va bien. Ceux en 400 disent que la requête est fausse. Ceux en 500 disent que le serveur a un problème.
L'appli lit le statut pour savoir quoi afficher à la cliente.