Construire un back-office métier avec Angular : l’administration de Rezo Pouce

Cet article fait partie d’une série consacrée aux back-offices Angular de Rezo Pouce. Après avoir présenté les deux applications et leur architecture commune, cette série détaille l’espace d’administration : authentification et contrôle d’accès, gestion des territoires, pilotage du service Rezo Séniors et cartographie. Ce premier volet présente l’application administration.rezopouce.fr, son architecture et ses choix techniques.

Le besoin

Un service de mobilité solidaire ne fonctionne pas tout seul. Derrière chaque territoire Rezo Pouce, il y a des gestionnaires qui configurent le périmètre géographique, des référents Séniors qui suivent les demandes de trajets, des animateurs qui recrutent des conducteurs bénévoles. Ces acteurs ont besoin d’un outil central pour piloter leur activité : consulter, créer, modifier, suivre.

Le site public, présenté dans la série précédente, s’adresse aux utilisateurs finaux — passagers, conducteurs, visiteurs. Le back-office, lui, s’adresse aux professionnels du réseau. Les besoins sont différents : des listes paginées et filtrables, des formulaires d’édition, des tableaux de bord, des vues cartographiques, des imports de données. Et surtout, un contrôle d’accès fin — chaque utilisateur ne doit voir et modifier que ce qui relève de sa responsabilité.

Le choix d’Angular

Le site public repose sur Symfony avec des modules AngularJS intégrés. Pour le back-office, le choix s’est porté sur Angular (version 8), un framework structurellement différent de son prédécesseur AngularJS.

Ce choix répondait à plusieurs contraintes. Un back-office métier implique des formulaires complexes avec des validations croisées, des états multiples, des interactions dynamiques entre champs. Le système de Reactive Forms d’Angular est conçu pour ces cas d’usage — validation synchrone et asynchrone, formulaires imbriqués, groupes de champs dynamiques. La couche TypeScript apporte un typage statique bienvenu sur une application qui manipule des dizaines de modèles de données différents. Et le système de modules Angular, avec le lazy loading, permet de découper l’application en blocs fonctionnels chargés à la demande — un point important quand l’application grandit.

Pour l’interface utilisateur, Angular Material fournit un ensemble de composants prêts à l’emploi — tables, formulaires, dialogues, menus, onglets — avec une cohérence visuelle qui évite de réinventer chaque composant d’interface. Ce choix a été complété par Bootstrap 4 pour la grille de mise en page et ng-bootstrap pour quelques composants supplémentaires.

L’architecture de l’application

L’application est structurée autour d’un noyau central et de modules fonctionnels indépendants.

Le noyau — le module core — contient tout ce qui est transversal : l’authentification, le layout principal avec sa barre de navigation, les modèles de données partagés, les services utilitaires, les guards de sécurité, et les composants d’interface réutilisables. C’est la fondation sur laquelle reposent tous les modules métier.

Chaque domaine fonctionnel est encapsulé dans son propre module Angular, chargé en lazy loading :

• Le module territoires gère la hiérarchie géographique : territoires, communes, points d’arrêt, points relais. Il permet de configurer chaque niveau, d’importer des données en masse, de créer, configurer et consulter les fiches mobilité et les statistiques.
• Le module séniors couvre l’ensemble du service Rezo Séniors vu côté gestionnaire : un calendrier des trajets, la gestion des utilisateurs (conducteurs et passagers), le suivi financier des indemnités, et le paramétrage du service par territoire.
• Le module cartographie fournit les composants de carte Leaflet partagés entre les autres modules — affichage de points, couches superposées, géocodage multi-sources.

D’autres modules ont existé — gestion des trajets classiques, espace professionnel, configuration de l’application mobile — mais ont été abandonnés au fil de l’évolution du service. Ils restent présents dans le code source sans être activés en production.

L’outillage complémentaire

Au-delà du socle Angular, l’application s’appuie sur plusieurs librairies spécialisées qui répondent à des besoins métier précis.

FullCalendar affiche les trajets Séniors sous forme de calendrier interactif — une vue bien plus lisible qu’une simple liste pour un référent qui doit planifier sa semaine. Highcharts et Chart.js produisent les graphiques des tableaux de bord statistiques. Quill offre un éditeur de texte riche pour la rédaction de contenus éditoriaux — fiches mobilité, descriptions de territoire. Et ng-select remplace les sélecteurs natifs par des composants de recherche avec autocomplétion, indispensables quand une liste déroulante contient plusieurs centaines de communes.

Ce que cette application représente

Ce back-office est l’outil de travail quotidien des équipes Rezo Pouce. Sa valeur ne se mesure pas à sa sophistication technique, mais à sa capacité à rendre autonomes des personnes qui ne sont pas des développeurs. Un référent de territoire doit pouvoir ajouter un point d’arrêt, consulter les trajets de la semaine, exporter une liste de conducteurs — sans assistance technique, sans documentation, sans formation prolongée.

C’est aussi l’application que j’ai le plus fait évoluer au fil des cinq années du projet. Chaque nouveau besoin exprimé par les équipes de terrain se traduisait par un écran, un filtre, un export supplémentaire. L’architecture modulaire d’Angular a permis d’absorber cette croissance sans refonte majeure — chaque ajout fonctionnel restait contenu dans son module, sans effet de bord sur le reste de l’application.

Les articles suivants détailleront chaque aspect de ce back-office : l’authentification et le contrôle d’accès multi-rôles, la gestion des territoires, le pilotage du service Rezo Séniors, et la cartographie.