Module Web

Ce projet a été réalisé dans le cadre de mon stage de 3ᵉ année chez EasyVista, au sein du département Recherche et Développement. EasyVista est une société dont l’engagement réside dans le soutien aux entreprises pour les libérer des complexités qui peuvent entraver leurs processus IT.

EasyVista fournit une plateforme ITSM (Gestion des Services Informatiques) qui est un ensemble de solutions logicielles intégrées conçues pour aider les organisations à planifier, fournir, exploiter et soutenir efficacement les services informatiques au sein de leur infrastructure.

Durant cette période de stage, j’ai participé à plusieurs développements front-end, dont un projet portant sur l’ajout de nouvelles fonctionnalités au sein de l’application EasyVista Service Manager ( EVSM ).

Le projet, intitulé “Module Web”, avait pour objectif d’introduire un nouveau mécanisme d’interaction entre l’interface utilisateur et des services externes à travers la mise en place d’API Buttons. Un API Button correspond à un bouton capable de déclencher dynamiquement des appels vers des API REST en fonction d’un contexte défini par l’utilisateur (si l’utilisateur souhaite mettre à jour une donnée par exemple).

Ce besoin s’inscrivait dans une volonté d’offrir davantage de flexibilité aux administrateurs et concepteurs d’applications, en leur permettant de configurer des modules avec des services tiers directement depuis l’interface, sans nécessiter de développement spécifique (No-Code).

L’objectif principal de ce projet était de permettre la création et la gestion de boutons capables de déclencher des appels vers les différentes routes de l'API suivant l’architecture REST.

Il s’agissait de proposer une interface permettant aux administrateurs de configurer ces boutons en définissant les paramètres nécessaires aux appels API, notamment le choix du connecteur, des ressources et des méthodes HTTP telles que GET, POST, PUT ou DELETE.

Un autre objectif consistait à offrir une expérience utilisateur fluide et intuitive, en permettant la personnalisation visuelle des boutons ainsi que la prévisualisation en temps réel de leur rendu avant validation. Cette fonctionnalité de preview devait permettre de sécuriser la configuration et de limiter les erreurs.

Enfin, le projet visait à s’intégrer de manière cohérente dans l’écosystème existant, en respectant les standards techniques et visuels de l’entreprise.

.Enjeux

L’un des enjeux majeurs de ce projet résidait dans la capacité à établir une communication fiable entre le front-end et les API REST. Il était essentiel de bien comprendre le fonctionnement des endpoints côté backend afin de garantir des interactions correctes et sécurisées.

Un autre point important concernait l'ergonomie de l’interface. La configuration des API Buttons impliquait plusieurs paramètres techniques, ce qui nécessitait de concevoir une interface suffisamment claire pour rester accessible aux utilisateurs tout en conservant un haut niveau de personnalisation.

EasyVista développait ses propres composants atomiques en React, c’est-à-dire des éléments design servant de brique élémentaire à une page internet, comme un champ textuel, une icône, une combobox, un input ou un label.

Il fallait donc respecter les conventions afin d’assurer une cohérence visuelle et fonctionnelle avec le reste de l’application dès réception de la maquette fournie par l’équipe UI/UX.

Le projet présentait plusieurs risques, notamment liés à la gestion des appels API. Une mauvaise configuration pouvait entraîner des erreurs d’exécution ou des comportements inattendus côté utilisateur.

Un autre risque concernait la complexité de l’interface de configuration. Une interface trop technique ou mal structurée aurait pu rendre la fonctionnalité difficile à utiliser, ce qui aurait limité son adoption.

Par ailleurs, l’intégration de nouvelles fonctionnalités dans un projet existant comportait un risque de régression.Il était donc nécessaire de mettre en place des tests et des processus de validation afin de garantir la stabilité de l’application.

Enfin, le projet impliquait une collaboration avec plusieurs équipes, ce qui nécessitait une bonne communication afin d’éviter les incompréhensions et de garantir la cohérence globale du produit.

Ce projet a été réalisé au sein de l’équipe web du département R&D d’EasyVista, composée d’environ quatorze personnes. Le travail était organisé selon la méthodologie agile, ce qui impliquait une collaboration fréquente entre les membres de l’équipe.

Le quotidien était rythmé par des réunions journalières, appelées Daily meetings, durant lesquelles chacun présentait l’avancement de ses tâches et les éventuels points bloquants. Ces échanges permettaient de maintenir une bonne coordination et d’assurer une progression continue du projet.

Chaque semaine était organisé un Weekly (réunion hebdomadaire) avec des équipes situées sur d’autres sites et dans d’autres pays. Ces réunions se déroulaient en anglais et permettaient de partager une vision globale de l’avancement des différents projets.

.Etude des besoins fonctionnels

Après l’assignation à cette tâche par mon maître de stage via notre outils Azure DevOps, j’ai commencé par analyser le besoin fonctionnel associé. Cette phase consistait à comprendre précisément le contexte dans lequel la fonctionnalité devait s’intégre et savoir quelle application d’EasyVista était concernée par mon intervention.

Il était également nécessaire d’étudier les différentes user stories afin d’identifier les attentes des utilisateurs finaux et les comportements attendus.

Cette analyse m’a amené à prendre en compte plusieurs éléments, notamment les contraintes techniques liées à l’environnement existant et les interactions avec les API.

Cette étape m’as également permis de visualiser les différentes maquettes fournies par l'équipe UI/UX et de clarifier certains points avec mon maître de stage lorsque des doutes subsistaient.

Cette phase de compréhension était essentielle, car elle permettait d’orienter correctement mon travail avant de débuter tout développement.

.Prise en main de l'application

À la suite de la phase précédente, j’ai pris en main l’application EVSM afin de mieux comprendre son fonctionnement global. Pour cela, je me suis connecté à l’application et je l’ai utilisée en conditions réelles, en adoptant le point de vue d'un utilisateur.

J’ai pu alors explorer les différentes fonctionnalités existantes, notamment le comportement des boutons, l’ouverture des fenêtres modales ainsi que les interactions entre les différents éléments de l’interface.

Grâce à cette approche, j'ai pu appréhender la logique métier et les parcours d’un utilisateur. J’ai identifié les conventions, tant sur le plan ergonomique que sur le plan technique, afin de développer des modules cohérents.

.Phase de développement

Après m’être familiarisé avec l’interface, j’ai entamé le développement de la fonctionnalité. La première étape a consisté à intégrer un bouton au sein du header de l’application. Ce bouton avait pour rôle de déclencher l’ouverture d’une fenêtre modale dédiée à la gestion des API Buttons.

Cette interface permettait d’afficher l’ensemble des boutons déjà configurés par l’utilisateur. Chaque élément de la liste présentait plusieurs informations essentielles, telles que le nom du bouton, la ressource API associée, son type ainsi que sa date de dernière mise à jour. Cette vue centralisée facilitait la gestion et le suivi des différentes configurations existantes.

La création d’un nouveau bouton reposait sur un formulaire de configuration accessible depuis cette interface. Ce formulaire permettait de définir les paramètres nécessaires à l’appel API, notamment le choix du connecteur, la sélection de la ressource ainsi que la méthode HTTP à utiliser. Certains champs étaient obligatoires afin de garantir un fonctionnement correct et d’éviter des erreurs lors de l’exécution des appels.

Une attention particulière a été portée à la personnalisation visuelle des boutons. L’utilisateur avait la possibilité de modifier plusieurs caractéristiques, telles que la couleur, la taille, la forme ou encore certains aspects liés au style, afin d’adapter le bouton à ses besoins spécifiques et à son environnement d’intégration.

L’une des fonctionnalités majeures de cette phase de développement était la mise en place d’une prévisualisation dynamique. Cette preview permettait d’observer en temps réel le rendu du bouton en fonction des paramètres définis dans le formulaire. Cette approche offrait la possibilité d’ajuster immédiatement les choix effectués et de valider visuellement le résultat avant la sauvegarde.

Dans l’ensemble, cette phase de développement visait à proposer une interface à la fois flexible et intuitive, permettant de configurer des interactions complexes avec des API tout en conservant une expérience utilisateur fluide et cohérente avec le reste de l’application.

.Tests unitaires et validation

A chaque fonctionnalité développée, une phase de tests débutait afin de vérifier le bon fonctionnement des éléments implémentés. Cette étape était essentielle pour s’assurer que les API Buttons répondaient correctement aux différentes configurations définies par l’utilisateur et que les appels API étaient exécutés comme attendu.

Les tests unitaires étaient exécutés via Jenkins, outil d’intégration continue utilisé au sein de l’équipe. À chaque mise à jour du code, Jenkins permettait de lancer automatiquement une série de tests et de générer des rapports détaillés sur leur exécution. Ces rapports mettaient en évidence les tests réussis, leséventuels échecs ainsi que les temps d'exécution, ce qui facilitait l’identification rapide des anomalies.

Je me suis aussi assuré durant la validation que les nouvelles fonctionnalités n’introduisaient pas de régressions dans l'application.

Une fois les tests validés, les modifications étaient soumises sous forme de merge request sur GitHub, puis examinées lors de revues de code par un ou plusieurs membres de l’équipe.

La mise en œuvre de ce projet reposait sur une stack front-end moderne basée sur React et TypeScript. Ce choix technologique s’inscrivait dans une volonté d’améliorer la maintenabilité du code, de structurer davantage l’application et de faciliter les évolutions futures. L’approche par composants proposée par React permettait de construire des interfaces modulaires et réutilisables, tout en garantissant une meilleure lisibilité du code.

.Choix des technologies

React & TypeScript:

L’utilisation de React, couplée à TypeScript, constituait le socle principal du développement. React est une bibliothèque JavaScript permettant de créer des interfaces utilisateur dynamiques à partir de composants réutilisables. Cette approche favorise une organisation claire du code en séparant les différentes parties de l’interface. TypeScript vient compléter cette logique en apportant un système de typage statique, permettant de sécuriser le développement et de limiter certaines erreurs dès la phase de conception. Dans le cadre de ce projet, cette combinaison permettait de produire un code plus robuste et plus facilement maintenable.

EasyVista avait dévéloppé ses propres composants atomiques tels que EvLabel, EvInput, EvCombobox ou encore EvToggle. Ces composants constituent des briques élémentaires de l’interface, plus besoin de passer par des balises javascript ou un quelconque module fournissant ce dont on a besoin.

API REST:

L’interaction avec les services backend reposait sur l’utilisation d’API REST. Les API Buttons développés dans le cadre du projet permettaient de déclencher des appels vers différentes routes en utilisant des méthodes HTTP telles que GET, POST, PUT ou DELETE. Cette architecture permettait de rendre les fonctionnalités dynamiques et adaptables à différents cas d’utilisation, en fonction des configurations définies par les utilisateurs.

CSS:

Le style et la personnalisation des composants étaient assurés grâce à CSS. Celui-ci permettait notamment de gérer l’apparence des boutons en fonction des paramètres définis par l’utilisateur, comme la couleur, la taille ou la forme. Cette couche de personnalisation était essentielle pour adapter les composants à différents contextes d’utilisation tout en respectant les standards visuels de l’application.

.Outils complémentaires

Le développement du projet s’appuyait sur plusieurs outils complémentaires permettant d’assurer la qualité du code et le bon déroulement du travail en équipe.

GitHub:

Le versioning du code était géré via GitHub, une plateforme en ligne qui permet de stocker et gérer le code d’un projet. Concrètement, chaque développeur travaille sur sa propre version du code, appelée “branche”, afin de développer une fonctionnalité sans impacter le reste du projet. Une fois le travail terminé, une demande appelée “merge request” est effectuée pour proposer l’intégration des modifications dans la version principale. Cela permet aux autres membres de l’équipe de relire le code, de proposer des améliorations et de valider les changements avant leur mise en production. Ce fonctionnement facilite le travail collaboratif et permet de conserver un historique clair de toutes les évolutions du projet.

Jenkins:

Les tests unitaires étaient exécutés à l’aide de Jenkins, un outil d’intégration continue. Jenkins est un logiciel qui automatise certaines tâches techniques, notamment la vérification du code. À chaque modification envoyée sur le projet, Jenkins lance automatiquement une série de tests pour s’assurer que le code fonctionne correctement et qu’il ne casse pas des fonctionnalités existantes. Il génère ensuite un rapport indiquant si tout s’est bien passé ou si des erreurs sont apparues. Cela permet de détecter rapidement les problèmes et de garantir la qualité du logiciel tout au long de son développement.

Azure DevOps:

La gestion des tâches et le suivi des développements étaient réalisés via Azure DevOps. Cet outil permet d’organiser le travail sous forme de tickets, qui correspondent à des fonctionnalités à développer, des corrections à apporter ou des améliorations à réaliser. Chaque ticket contient une description du besoin, les objectifs à atteindre ainsi que des informations utiles pour le développement. Les développeurs peuvent ainsi suivre l’avancement de leur travail, voir ce qui reste à faire et prioriser leurs tâches. Cela apporte une vision claire du projet et facilite l’organisation du travail en équipe.

Teams:

La communication au sein de l’équipe était assurée à l’aide de Microsoft Teams. Cet outil permet d’échanger facilement à distance, que ce soit par messagerie instantanée, appels audio ou visioconférences. Il était utilisé quotidiennement pour les réunions d’équipe, comme les “Daily meetings”, ainsi que pour les réunions hebdomadaires avec des équipes situées dans d’autres pays. Teams facilitait également les échanges informels entre collègues, ce qui permettait de poser des questions rapidement, de débloquer des situations et de maintenir une bonne coordination entre les différents acteurs du projet.

Ce projet dont le but était la mise en place d’une fonctionnalité complète permettant la création et la gestion d’API Buttons au sein de l’application EasyVista Service Manager fût un succès. L’interface développée offre aux utilisateurs une solution flexible pour configurer des interactions avec des services externes, tout en restant cohérente avec l’environnement existant.

L’intégration de la prévisualisation en temps réel constitue un apport très pertinent. Elle permet aux utilisateurs de mieux comprendre le rendu et le comportement du bouton avant sa validation, ce qui réduit les erreurs de configuration et améliore l’expérience utilisateurs.

J’ai pu consolider mes compétences en React & TypeScript, à savoir dans la construction d’interfaces dynamique et modulaires. J’ai également approfondi ma compréhension des API REST et de leur intégration dans une application front-end, en prenant en compte les contraintes liées aux échanges avec le backend.

Au-delà de l’aspect technique, ce projet m’a permis de découvrir un environnement de développement professionnel structuré, avec des pratiques telles que les tests automatisés, les revues de code et l'utilisation d'outils d'intégration continue. J’ai également pu développer mes compétences en communication, en collaborant avec différentes équipes et en participant activement aux échanges liés au projet.

En termes de perspectives, des améliorations pourraient être envisagées afin d’enrichir la fonctionnalité. Il serait notamment intéressant d’accompagner davantage l’utilisateur dans la configuration des API Buttons, par exemple en proposant des validations plus avancées ou des suggestions automatiques. L’ajout de mécanismes de suivi des appels API pourrait également permettre de mieux diagnostiquer les erreurs et d’améliorer la fiabilité globale du système.