Réaliser une application monopage : tutorial autour d’une appli à destination d’un service RH

Les Single-Page Applications (ou « application monopage ») ont le vent en poupe. Il faut dire que par leur simplicité, 
leur fluidité et leur rapidité d’implantation, ces apps favorisent un déploiement souple, que ce soit sur le Web ou en 
intranet. Aujourd’hui, agap2IT vous propose un tutorial autour d’une appli à destination d’un service RH dans une entreprise, 
afin d’exploiter au mieux le concept.

Pourquoi coder une Single-Page Application (SPA) ?

Dans le domaine de la navigation web, la Single-Page Application apporte des réponses concrètes à des questions de requêtes serveur et de rapidité de l’expérience utilisateur. Par opposition à des sites se chargeant de manière séquentielle, les applis monopage récupèrent les données de manière asynchrone sans que l’affichage du contenu s’en trouve modifié ni que la page n’ait à se réactualiser. On retrouve aujourd’hui ces pages performantes sur des services aussi divers que les webmails, les réseaux sociaux, les services de vidéo à la demande. Autant d’usages populaires rendus possibles par la scalabilité de cette approche.

TUTORIAL

étape 1 : Définir les fonctionnalités d’une Single-Page Application

Afin d’optimiser son processus, un service RH décide d’automatiser l’intégralité de la gestion des absences et des congés. Dans notre tutorial, imaginons la réponse d’un service IT qui développe une appli web monopage, accessible à l’ensemble des salariés de l’entreprise depuis leur ordinateur ou leur mobile, où chaque utilisateur dispose d’un calendrier dynamique sur lequel il peut indiquer ses demandes d’absence (congés payés, congés sans solde) et également ses absences accidentelles (arrêt-maladie, absence pour décès d’un proche, garde enfant malade) avec transmission des justificatifs.

Cette interface en front-end sera complétée par deux applis back office : l’une pour les chefs de service, qui peuvent valider ou non les demandes d’absence, l’autre pour le service RH, afin de monitorer les absences par service, etc. Les données générées par les calendriers sont directement indexées sur les logiciels de gestion de paie du service, et un script est relié au serveur mail pour programmer un message d’absence automatiquement.

étape 2 : choisir un framework adapté pour une SPA

L’utilisation de frameworks JavaScript ou TypeScript accompagne généralement le développement d’une SPA spécialisée. Pour l’application monopage RH, le choix de la simplicité s’avère React (combiné avec Node.js pour le back-end). Souple, complète et assortie d’une acculturation massive dans les milieux IT, cette solution s’appuie à tous les niveaux sur les avantages de rapidité de JavaScript, mais aussi sur la compatibilité de Node.js avec les outputs métier (notamment les logiciels de gestion de paie). Pour des projets plus ambitieux, si la SPA est amenée à évoluer vers de nouvelles fonctionnalités, le côté modulaire du TypeScript s’exprimera parfaitement avec Angular, framework performant avec une approche légèrement plus complexe qu’en JavaScript pur.

étape 3 : créer un back office pour la collecte et l’utilisation des données

Node.js, par le biais de frameworks comme Express, permet de construire une base de données et un back-end qui sera utilisé par les différentes interfaces du projet. La première étape consistera à créer un serveur où seront adressées les requêtes de l’appli. C’est également sur ce serveur, via un module SQL et un routage des données, que la gestion des informations d’absence entrées par les utilisateurs s’effectue. Il est essentiel d’implanter une API REST afin de gérer les fonctions intermédiaires entre front et back-end. Le service d’authentification, les privilèges d’accès pour l’entrée sur les back offices spécifiques (accès chef de service et dashboard pour le service RH) seront ainsi gérés par des fonctions de l’API. De même, un module Node.js comme Nodemailer permettra de notifier les chefs de service des demandes à valider et les salariés de l’état de leur demande après validation ou non par le chef de service.

étape 4 : architecture de la SPA et développement

Une fois le back-end préconçu, le serveur installé, l’interface utilisateur proprement dite est à créer. Dans un scénario où l’on utilise le framework React, il s’agira de créer les différents formulaires, le calendrier dynamique où les utilisateurs peuvent indiquer plusieurs états pour la même date (soit absence planifiée, soit absence imprévue), ainsi que le module de transmission des justificatifs. Autant de composants qui nourrissent l’API REST via la fonction fetch. Côté affichage, afin que l’utilisateur soit informé de manière dynamique des demandes qu’il réalise sur la SPA, React incorpore une fonction d’état, qui correspond à la « mémoire » du composant, et une fonction d’effet, qui applique le changement via un appel à l’API et modifie donc les données.

Lorsque l’on écrit la même appli en Angular, les mêmes grands principes s’appliquent, à cette différence que certains services se situent en dehors des composants eux-mêmes. Ainsi, pour que les modifications appliquées par l’utilisateur soient appelées par l’API, le service HttpRequest d’Angular est à injecter dans le code en tant que module indépendant.

Le front-end pour les chefs de service suivra encore la même logique, avec des composants différents, notamment l’ajout d’un dashboard afin de suivre en temps réel l’évolution des congés et des absences de tous les membres du service en même temps. Enfin, le front-end du back office du service RH cumulera l’ensemble des congés validés et les absences justifiées dans un tableau de bord central, avec des modules à implémenter pour la gestion des flux de données vers les logiciels métier, notamment la gestion de paie.

étape 5 : test et déploiement

Après la mise en ligne du serveur, la création de la base de données et du système d’authentification, et le développement, la phase de test peut commencer, en commençant par les composants du front-end pour aller vers le système global. Les tests de performance, notamment pour les SPA conçues en Angular, permettent de donner un aperçu des éventuelles évolutions de la solution, avec l’intégration de nouvelles fonctionnalités module par module si la scalabilité de l’appli s’avère confirmée par les stats.

Grâce aux bonnes connaissances acquises par les ingénieurs IT en matière de frameworks JavaScript et TypeScript,  agap2IT propose des spécialistes de ces langages dans de nombreux secteurs où l’approche en SPA s’avère pertinente.