À propos de ce cours
Objectifs de la leçon
- Distinguer le front-end et le back-end d'une application.
- Décrire le fonctionnement du modèle client / serveur.
- Expliquer ce qu'est une API et pourquoi elle est indispensable.
- Situer NestJS dans l'architecture d'une application web ou mobile.
Front-end et back-end
Une application moderne se compose de deux grandes parties :
- Le front-end: ce que l'utilisateur voit et manipule (pages web, écrans d'une application mobile). Il s'exécute sur l'appareil de l'utilisateur, dans le navigateur ou le téléphone. Exemples : HTML, CSS, Bootstrap, Angular, Flutter.
- Le back-end: la partie invisible qui s'exécute sur un serveur. Il reçoit les demandes, vérifie les droits, applique les règles métier, lit et enregistre les données, puis renvoie une réponse. Exemples : PHP, Laravel, Symfony, Node.js, NestJS.
Quand un stagiaire consulte ses notes sur l'application de son établissement, l'écran affiché est le front-end ; le calcul de la moyenne, la vérification de son identité et la lecture des notes dans la base de données sont faits par le back-end.
Le modèle client / serveur
Le web repose sur un principe simple : un client envoie une requête, un serveur la traite et renvoie une réponse.
- Le client prend l'initiative : navigateur, application mobile, ou même un autre serveur.
- Le serveur attend en permanence les requêtes, sur une adresse et un port (par exemple
localhost:3000pendant le développement). - Un même serveur répond à des milliers de clients différents.
Plusieurs clients interrogent la même API ; seule l'API accède à la base de données.
Qu'est-ce qu'une API ?
Une API (Application Programming Interface, interface de programmation) est un ensemble de « portes d'entrée » qu'un serveur met à disposition des clients. Chaque porte correspond à une action précise : lister les stagiaires, ajouter un stagiaire, supprimer une absence…
Une API web ne renvoie pas une page HTML mais des données, le plus souvent au format JSON. C'est ensuite le front-end qui décide comment les afficher :
[
{ "id": 1, "nom": "Ben Ali", "prenom": "Sami", "groupe": "DEV101" },
{ "id": 2, "nom": "Trabelsi", "prenom": "Ines", "groupe": "DEV101" }
]Grâce à l'API, un seul back-end peut servir à la fois le site Angular, l'application Flutter et un tableau de bord d'administration.
Analogie du restaurant: le client (front-end) ne va pas en cuisine. Il passe commande au serveur (l'API), qui transmet à la cuisine (logique métier et base de données) puis rapporte le plat (la réponse JSON). La carte du restaurant, c'est la documentation de l'API.
Le travail du développeur back-end
- Concevoir les routes de l'API (les adresses et actions disponibles).
- Valider les données reçues : on ne fait jamais confiance au client.
- Gérer l'authentification (qui est l'utilisateur ?) et l'autorisation (a-t-il le droit ?).
- Lire et écrire dans la base de données.
- Gérer les erreurs, la sécurité et les performances.
- Documenter et tester l'API, puis la déployer sur un serveur.
NestJS est un framework qui fournit une organisation et des outils pour réaliser chacune de ces tâches : c'est l'objet de ce cours.
Activités
Activité 1 Front-end ou back-end ?
Pour chaque tâche, indiquez si elle relève du front-end ou du back-end :
- Afficher un message d'erreur en rouge sous un champ de formulaire.
- Vérifier qu'une adresse e-mail n'est pas déjà utilisée par un autre compte.
- Calculer la moyenne générale d'un stagiaire à partir de ses notes.
- Animer l'ouverture d'un menu.
- Enregistrer une nouvelle absence dans la base de données.
- Refuser l'accès à la liste des notes à un utilisateur non connecté.
Voir le corrigé
- Front-end (affichage).
- Back-end : seul le serveur connaît tous les comptes.
- Back-end : le calcul fait foi et ne doit pas pouvoir être modifié par l'utilisateur.
- Front-end.
- Back-end.
- Back-end. Le front-end peut masquer un bouton, mais la vraie protection est faite par le serveur.
Activité 2 Analyser une application réelle
Ouvrez un site que vous utilisez souvent (plateforme de cours, site de vente…). Appuyez sur F12, ouvrez l'onglet Réseau (Network), filtrez sur Fetch/XHR, puis rechargez la page.
- Relevez l'adresse de deux requêtes envoyées à une API.
- Pour l'une d'elles, ouvrez l'onglet Réponse: quel est le format des données ?
- Quelles informations de la page proviennent de cette réponse ?
Voir le corrigé
Les réponses varient selon le site choisi. On observe en général des adresses du type /api/..., des réponses au format JSON (objets entre accolades, tableaux entre crochets) et des données affichées ensuite dans la page : nom de l'utilisateur, liste de produits, notifications… C'est exactement ce type d'API que nous allons construire avec NestJS.
À retenir
- Le front-end s'exécute chez l'utilisateur, le back-end sur le serveur.
- Le client envoie une requête, le serveur renvoie une réponse.
- Une API expose des actions et renvoie des données, en général en JSON.
- Un seul back-end peut servir plusieurs front-ends (web, mobile).
- NestJS est un framework pour construire ce back-end avec Node.js et TypeScript.