Rapport de stage de Jacques-Henri Vollet

Intégration et prise en main

Cette première semaine a été tout d'abord consacrée à la découverte de l'environnement de travail, à l'installation et à la configuration des différents outils. J'ai dans un premier temps réglé une première difficulté liée au fait que je travaillais sous un environnement Windows et que les fichiers permettant de déployer les outils avaient été configurés pour un environnement MacOS. J'ai trouvé la solution suivante pour éviter d'avoir à redémarrer le conteneur Docker après chaque modification de fichier sur Windows :

Puis j'ai paramétré Git pour qu'il soit sensible à la casse des noms de fichiers, ayant remarqué que les modifications de ce type n'étaient pas prises en compte dans mes push. Finalement, on m'a expliqué le fonctionnement des tickets avec Jira. Dans un second temps, j'ai pris connaissance du cahier des charges et de mes objectifs concernant le développement du front-end.

J'ai commencé à étudier les maquettes fournies par l'UX designer, qui m'ont permis de comprendre les attentes en termes d'interface utilisateur et d'expérience utilisateur.

J'ai commencé à coder le header de l'application. Pour cela, j'ai installé FontAwesome pour les icônes. Je me suis ensuite attelé au tableau principal. Après discussion avec l'équipe, nous avons décidé d'utiliser la version gratuite de MUI (Material-UI) et notamment le composant DataGrid pour afficher les données. Les données ont été codées en dur dans un premier temps, car les endpoints de l'API n'étaient pas encore prêts.

"filteredData" correspond aux données récupérées dans le parent Dashboard, et transmises via la propriété data du composant enfant TableData, au composant enfant de ce dernier : DataGrid

Extension des fonctionnalités

La semaine deux a été consacrée à l'extension d'un certain nombre de fonctionnalités et au développement du CSS sur les composants de la bibliothèque MUI. J'ai en particulier développé des fonctionnalités du tableau en créant un composant toggle pour ouvrir/fermer l'onglet de prévisualisation, j'ai activé le filtre natif de DataGrid MUI sur les colonnes pertinentes, et j'ai installé des packages pour pouvoir utiliser MUI.

• Composant toggle permettant d'ouvrir ou de fermer un onglet de prévisualisation :

• Amélioration du CSS en utilisant l'inspecteur pour cibler correctement le composant :

Poursuite du développement front-end et préparation pour la connexion aux endpoints de l'API REST

Lors de la troisième semaine, j'ai commencé à développer de nouvelles pages (notamment en créant des routes) et composants. Ces composants ont concerné l'onglet de prévisualisation détaillé (par exemple un composant commentaire), la page d'édition des demandes (par exemple avec des composants BlocQuestionsRéponses et InfoDemande) et l'interface de gestion utilisateur. Ensuite, j'ai préparé l'intégration avec le back-end en réalisant des tests à partir du Swagger qui m'a été fourni. Ces tests ont nécessité la création de hooks utilisant une identification avec des jetons.

• Développement de composants spécifiques :
  • BlocQuestionsRéponses : Affichage des questions/réponses
  
• Préparation API : Analyse du Swagger et conception des requêtes REST
• Extrait du Swagger :

• Requête d'authentification :

• Exemple de hook utilisant la requête d'identification :

Sécurité et gestion utilisateurs

Lors de la semaine quatre, j'ai continué à travailler sur le CSS et à développer les pages en testant avec le Swagger les échanges de données. J'ai modifié le composant lié à la page utilisateur afin qu'il différencie les cas d'utilisateur gestionnaires et les cas d'utilisateurs non gestionnaires, afin de réaliser un affichage différencié. J'ai créé un composant filtre pour le tableau afin de remplacer le filtre natif de DataGrid MUI qui ne convenait pas en raison de fenêtres intermédiaires non éliminables. Finalement, en utilisant un champ fourni par le back-end, j'ai implémenté la fonctionnalité de verrouillage du mode édition lorsqu'un utilisateur était en train d'éditer un devis.

• Tableau de bord :
  • Composant filtre :
  
  • Utilisation du composant filtre dans le composant DataTable :
  
• Gestion des utilisateurs : CRUD complet avec contrôle des permissions pour affichage différencié :

Intégration totale API

Lors de cette semaine 5, je me suis focalisé sur la finalisation des différents hooks dont j'avais besoin afin de récupérer les données existantes ou transmettre les nouvelles données à la base de données. Cela m'a permis de finaliser les affichages pour les pages de gestion des utilisateurs, de gestion des demandes, et de l'onglet de prévisualisation. J'ai notamment dû créer des fonctions pour mettre les données à envoyer dans les formats attendus par le back-end et les données à afficher dans les formats attendus par le front-end.

• Page d'édition :
• Exemple de fonction pour formater les données :

Fonctionnalités avancées

J'ai commencé à implémenter les fonctionnalités liées à la sécurisation en créant un lien menant à une page de demande d'e-mail pour obtenir un lien de réinitialisation du mot de passe, puis j'ai créé la page de réinitialisation que j'ai testée en interne car le nom de domaine n'était pas encore implémenté côté back-end. Finalement, j'ai finalisé les fonctionnalités principales de la page Édition et la page de gestion des utilisateurs en testant divers scénarios. Ceci m'a permis d'identifier certains bugs liés à des paramétrages de back-end non encore finalisés (par exemple, la possibilité de changer son mot de passe alors qu'on est un utilisateur déclaré inactif).

Fonctionnalités avancées

Dans cette septième semaine, j'ai travaillé essentiellement sur la fonction de recherche du tableau et sur l'affichage des réponses de succès ou d'erreur, à l'aide du composant snackbar fourni par MUI. J'ai finalisé le CSS des différents boutons.

• Fonction recherche :
  • Composant SearchModal :
  
  • Hook useSearch :
  

Phase de tests et livraison

Cette dernière semaine a donné lieu à la finalisation du projet. J'ai réglé quelques soucis de CSS, amélioré le responsive, lequel n'était pas une priorité du projet, et notamment rédigé une documentation précisant la structure des composants front-end et les démarches à effectuer avant la phase de validation et mise en production. Ces démarches concernaient notamment le paramétrage de certains ID liés aux permissions. J'ai également ajouté un autre champ commentaire qui n'était pas initialement prévu.

• Préparation à la livraison : Extrait de la documentation

Télécharger le manuel