Améliorez et ajoutez des fonctionnalités¶

Étape 1 – Analysez le code existant¶

Vous allez explorer les starters code fournis et lire les codes back-end et front-end. Cette étape est cruciale pour comprendre l’architecture actuelle du projet. Essayez de comprendre l’organisation des fichiers, les classes principales et les interactions front/back.

Prérequis Avoir:

• installé les technologies utilisées:
• Java 21 et Maven 3.9.3
• Angular 19
• Docker, Docker Compose et Docker Desktop sur votre environnement de travail local
• cloné et ouvert les starters code dans votre environnement de travail;
• lancé l’application en local:
• le back-end pour confirmer qu’elle démarre avec la base de données
• le front-end pour confirmer qu’elle démarre

Résultat attendu

• Compréhension des starters code front et back et leurs intéractions.
• Les applications back-end et front-end démarrent normalement et communiquent entre elles.
• On arrive à créer un utilisateur agent de la bibliothèque.

Recommandations

• D’abord, suivez les instructions dans le fichier README.md du dépôt back-end afin de lancer le projet.
• Assurez-vous d’avoir installé Docker, Docker Compose et Docker Desktop sur votre environnement de travail local.
• Démarrez le code back-end:
• Ouvrez le fichier src/main/resources/application.yml. Les credentials d’accès à la base de données sont masqués par des variables d’environnement. Ces variables d’environnement sont définies dans le fichier.env
  • Ouvrez le fichier compose.yaml. Il définit la base de données MySQL qui est démarrée avec l’application et qui contient les données nécessaires au fonctionnement du back-end.
  • Parcourez les configurations et les couches de l’application
  • Lancez le back-end. Pour cela, veuillez lire la documentation README.md du projet, section Démarrage du back-end.
• Démarrez le code front-end:
• Installez les dépendances du projet avec la commande:npm install
  • Parcourez les fichiers contenus dans le répertoire src/app pour comprendre les configurations.
  • Lancez le front-end (npm run start)
• Testez l'enregistrement d’un agent de la bibliothèque:
• Lorsque le front-end est lancé, ouvrez votre navigateur et saisissez l’adresse: http://localhost:4200/register
  • Remplissez le formulaire d’enregistrement d’un nouvel utilisateur et valider.
  • Lisez les logs du back-end. Vous devez voir la trace d’insertion d’un nouvel utilisateur dans la table des utilisateurs.
• Vous pouvez vous connecter aussi à la base de données via Docker Desktop et consulter la table user.
• Un nouvel utilisateur doit apparaître dans cette table de données.
  • Pour rappel, dans le README.md du projet, il est indiqué pas à pas comment se connecter à la base de données et consulter le contenu de la table user.
• Prenez des notes lors de vos explorations des starters code, en particulier des endroits où vous avez besoin de creuser plus profondément.

Points de vigilance

• Ne modifiez pas encore le code à cette étape.
• Ne vous arrêtez pas seulement à la structure des fichiers: regardez aussi le contenu logique.
• Vérifiez le comportement visuel (même si c’est encore simple).

Outils

• Les IDE:
• VS Code
• IntelliJ
• Angular CLI
• Java 21
• Maven 3.9.3
• Docker, Docker Compose et Docker Desktop

Ressources

• Documentation sur l'installation de Docker, Docker Compose et Docker Desktop:
• https://docs.docker.com/desktop/
• https://docs.docker.com/engine/install/

Étape 2 – Corrigez l’API d’authentification des utilisateurs côté back-end¶

Corrigez le service d’implémentation de l’API d’authentification des utilisateurs dans la partie back-end, en suivant le modèle de l'existant.

Prérequis Avoir:

• exploré et analysé les starters code;
• identifié l’endpoint actuel d’authentification/api/login;
• compris la structure des classes: controller, service, etc…

Résultat attendu

• L’API d’authentification fonctionne bien et retourne un token JWT lorsque l'authentification est réussie.

Recommandations

• L’API d’authentification d’un utilisateur/api/login ne fonctionne pas et rencontre quelques bugs.
• Déboguez le code existant:
• Mettez des points d’arrêt dans les différents fichiers pour comprendre les appels entre les différentes classes et identifier la cause du bug.
  • Assurez-vous que l’utilisateur envoie un login et un mot de passe valides.
  • Relisez le service d’authentification UserService.java, méthode ‘login’, puis ajoutez les points d’arrêt pour déboguer et identifier les incohérences et les inexactitudes à corriger.
• Apportez une correction appropriée pour que cette API fonctionne normalement.
• Pour rappel, cette API doit retourner un token JWT lorsque l’authentification réussit.
  • Pensez à implémenter le service JWTService.java qui est chargé de délivrer un token JWT.
• Testez le fonctionnement de cette route avec Postman.

Points de vigilance

• Respectez les bonnes pratiques: découpage de code, respect des couches, etc…
• N’ignorez pas les conventions de nommage.
• Si vous n'avez pas encore utilisé Postman, suivez ces étapes:
• Installer Postman sur votre machine.
  • Importer la collection Postman (File > Import).
  • Utiliser la collection Postman pour vérifier le fonctionnement de la route

Outils

• EDI: VS Code, Intellij
• Postman

Ressources

• Entity To DTO Conversion for a Spring REST API | Baeldung
• Comment importer une collection Postman (documentation officielle)
• Débogage de code avec IntelliJ
• Tutorial: Debug your first Java application | IntelliJ IDEA
  • Debug code | IntelliJ IDEA Documentation

Étape 3 – Implémentez l’interface d’authentification côté front-end¶

Ajoutez une interface utilisateur qui permet d’authentifier un utilisateur et de consommer l’API améliorée précédemment.

Prérequis

Avoir:

• testé l’endpoint back-end /api/login avec succès;
• compris le framework front Angular.

Résultat attendu

• L’utilisateur peut déclencher la fonctionnalité d’authentification depuis l’interface.
• Le front-end communique avec le back-end avec succès pour authentifier un utilisateur.

Recommandations

• Dans l’application front-end, vous développerez un écran d’authentification (nouveau composant login) et lui associerez une route.
• Cet écran doit rester simple, seulement avec des boutons et champs obligatoires pour permettre les fonctionnalités de login et mot de passe.
  • Dans ce projet, la qualité visuelle importe peu. Ce qui importe, c'est la manipulation des données.
• Réalisez un service pour que le nouvel écran appelle l’API /api/login développée précédemment.
• En vous inspirant de l’existant, créez les model,composant, service, etc., nécessaires pour implémenter avec succès cette nouvelle fonctionnalité.
• Testez le nouvel écran en appelant le back-end et vérifiez que tout fonctionne bien. Vérifiez que vous recevez un token d’authentification.
• Respectez les échanges d’information entre le front-end et le back-end via des DTO.

Points de vigilance

• Assurez-vous que les erreurs serveur s'affichent.
• Gérez les états: chargement, erreur, succès.

Ressources

• Le cours Débutez avec Angular, Partie 5:
• le chapitre Partagez des données avec les Services
  • le chapitre Passez en SPA avec le routing
• Angular Services Guide (pour Angular v17, mais toujours pertinent au code du front en v19)
• Pour la version actuelle d'Angular, référez-vous à cette page équivalente.

Étape 4 – Ajoutez de nouvelles fonctionnalités côté back-end¶

Ajoutez des APIs CRUD (Create, Read, Update, Delete en anglais) pour gérer les étudiants de la bibliothèque:

• Ajouter un étudiant
• Consulter la liste des étudiants
• Consulter les informations détaillées d’un étudiant
• Modifier un étudiant
• Supprimer un étudiant

Prérequis

Avoir:

• terminé l’implémentation front/back de l’authentification avec un token JWT.

Résultat attendu

• Toutes les nouvelles APIs fonctionnent normalement pour gérer les étudiants.

Recommandations

• À partir de cette étape, vous devez implémenter les différentes routes pour ajouter, consulter, modifier et supprimer un étudiant (c'est-à-dire effectuer les actions CRUD).
• Découpez bien le code en suivant le modèle en couches:
• les entrées/sorties sont gérées par le controller;
• les traitements sont faits dans le service;
• l'accès aux données est fait par des repository.
• Pensez à utiliser les DTO. Les entités ne doivent pas apparaître dans les controllers.
• Toutes ces APIs doivent être sécurisées. L’utilisateur doit être authentifié (utiliser un Bearer Token dans le header) avant de pouvoir exploiter ces APIs.
• Dès qu’une API est implémentée, testez le fonctionnement avec Postman.

Points de vigilance

• Les APIs CRUD sont accessibles uniquement aux utilisateurs authentifiés (configuration Spring Security, etc….).
• Si vous rencontrez des erreurs en implémentant votre code Java, suivez des méthodes de débogage.

Outils

• EDIs: VS Code, IntelliJ

Ressources

• Entity To DTO Conversion for a Spring REST API | Baeldung
• Débogage de code avec Intellij
• Tutorial: Debug your first Java application | IntelliJ IDEA
• Debug code | IntelliJ IDEA Documentation

Étape 5 – Implémentez les écrans côté front-end¶

Développez les écrans du front-end pour consommer les APIs codées précédemment.

Prérequis Avoir:

• terminé l’implémentation des APIs CRUD pour gérer les étudiants;
• lu la documentation sur Angular.

Résultat attendu

• Tous les écrans nécessaires pour gérer les étudiants sont codés.
• Le front-end consomme les APIs CRUD du back-end.
• L’utilisateur peut effectuer les actions décrites ci-dessous.

Recommandations

• Dans l’application front-end, développez les écrans pour les opérations CRUD:
• ajouter un nouvel étudiant
  • consulter les étudiants
  • consulter le détail d’un étudiant
  • modifier un étudiant
  • supprimer un étudiant
• Pour rappel, il n’est pas nécessaire de coder de beaux écrans.
• Pour ce projet, l’esthétique et la beauté des écrans importent peu.
  • Le plus important (côté front) est de pouvoir manipuler les données et les afficher.
• Commencez par les écrans les plus simples (ceux qui ont le moins d'éléments – boutons, champs – à développer).
• Sécurisez l’accès aux écrans en vous assurant que l’utilisateur est connecté avant d’accéder à ces pages (utiliser les guard).
• Réalisez les services Angular pour appeler les APIs développées précédemment.
• Faites en sorte que les informations envoyées depuis le front-end correspondent aux DTO attendus du côté du back-end.
• Testez les écrans en appelant le back-end et vérifiez que tout fonctionne bien.

Points de vigilance

• Protégez les routes d’accès aux écrans des étudiants par l’utilisation de Guard Angular.
• Si l’utilisateur n’est pas connecté, il ne peut pas créer, consulter, modifier et supprimer des étudiants.

Outils

• EDIs: VS Code, IntelliJ

Ressources