Soutenance BUT3 · Dept. Informatique · IUT Reims

Optimisation
des process via
développement

Comment le développement d'outils numériques sur-mesure permet-il d'optimiser la gestion interne, la mobilité et la communication interservices au sein d'une municipalité ?

Clément DAVID Mairie de Sainte-Savine · NTIC M. MANDET · M. VAUTROT 05 jan → 10 avr 2026 · 14 semaines
Plan

Au programme

01
Contexte & organisme d'accueil
Mairie de Sainte-Savine · Service NTIC · problèmes identifiés
02
La fiche papier et ses limites
Critique de l'existant — genèse du projet ÉtatV
03
Choix techniques & architecture
PWA, React / TypeScript, Symfony, MCD, QR codes
04
Défis techniques majeurs
Mode hors-ligne (Workbox), RGPD signatures, LDAP / Active Directory
05
Déploiement, retours & bilan
Tests agents, accueil, compétences acquises, perspectives
01
Section 01

Contexte &
organisme d'accueil

La mairie de Sainte-Savine et les problèmes identifiés au sein du service NTIC

Contexte

La mairie de Sainte-Savine

Collectivité

Commune de Sainte-Savine — 10 795 habitants
12 établissements · multiples pôles fonctionnels
Administration publique générale, but non lucratif
1 rue Lamoricière, 10300 Sainte-Savine

Service NTIC — mon service

Support utilisateurs N1/N2 — cœur de l'activité
Infrastructure réseau & Active Directory
Gestion parc matériel · postes, téléphonie, imprimantes
Interventions multi-sites : police, écoles, Maison des Viennes
Contexte

Deux problèmes, une mission

Problème 1 — Flotte automobile

États des lieux sur fiche papier volante — raturée, illisible
Perte de documents, aucun suivi temps réel
Signature sans valeur légale sécurisée

Problème 2 — RH / NTIC

Infos RH transmises par appels & e-mails dispersés
Comptes AD non créés ou non révoqués à temps
Impact direct sur l'accueil des nouveaux agents
Ma mission : concevoir 3 applications déployées en production + 1 initiative spontanée (trombinoscope AD) — en 14 semaines, dans un service sans développeur permanent.
02
Section 02

La fiche papier
& ses limites

Critique de l'existant — genèse du projet ÉtatV

Existant

Ce que les agents faisaient avant

Formulaire papier
Annexe 3 du rapport
Peugeot 208 — GC-734-RL
Croquis du véhicule à annoter à la main, kilométrage, niveau de charge, signature manuscrite — sur le parking.
LimiteImpact
Ratures & illisibilitéErreurs de saisie
Fiche volante physiquePerte de documents
Saisie 100% manuellePerte de temps
Pas d'archivage structuréAucun historique
Pas de suivi temps réelDégradation non détectée
Signature non sécuriséeValeur légale limitée
03
Section 03

Choix techniques
& architecture

Pourquoi une PWA ? Quelle stack ? Comment fonctionne ÉtatV ?

Architecture

Pourquoi une PWA ?

CritèreApp nativePWA
DéploiementStoreURL navigateur
Mise à jourManuelleCôté serveur
Hors-ligneNatifService Worker
Coût devDouble baseBase unique
Maintenance NTICCompétences mobilesAucune

Contrainte décisive

Le service NTIC ne dispose pas de profils développeurs. L'application devait être simple à déployer et à maintenir dans la durée.

1
base de code
mobile + desktop
0
installation
requise
Architecture

Stack & wizard

Client (PWA)

React + TypeScript Redux Toolkit Vite PWA Workbox SVG interactif Canvas signature

Serveur (API REST)

PHP / Symfony API Platform MySQL / Doctrine JWT DH Auditor
Données persistées en localStorage avec TTL 30 min — reprise possible si interruption.

Wizard 4 étapes (agent)

Identification & inspection
Schéma SVG interactif — dégâts int./ext.
Kilométrage & niveau de charge
Jauge tactile personnalisée
Propreté, observations & signature
Canvas tactile — RGPD compliant
Récapitulatif & validation
Confirmation avant envoi au serveur
Architecture

QR codes dans les véhicules

Problème initial

Recherche manuelle du véhicule dans une liste → confusion, lenteur avec des gants

Solution

QR code unique collé dans chaque habitacle (qrcode.react)
Scan → identification auto + bon formulaire (react-qr-scanner)
Token signé côté serveur — infalsifiable
~0s
pour identifier le véhicule
0
erreur d'identification depuis déploiement
04
Section 04

Défis
techniques

Mode hors-ligne, conformité RGPD des signatures, contraintes LDAP

Défi 01 / 03

Mode hors-ligne

Les parkings ne bénéficient pas toujours d'une couverture réseau suffisante.

Service Worker
Workbox + Vite PWA
2 queues IndexedDB
reports-queue
damages-queue
Background Sync
Auto à la reconnexion
Aucune saisie perdue — toast de confirmation envoyé à l'agent dès la synchronisation.
Sans réseau (parking)
UI chargée depuis le cache SW
Saisie + signature
Données en file IndexedDB
Retour en zone couverte
Background Sync → serveur
Défi 02 / 03

RGPD & signatures

Une signature = donnée biométrique à caractère personnel (Art. 9 RGPD).

Approche naïve — exclue

Stocker l'image SVG/PNG brute → donnée biométrique sensible
Risque de réidentification de l'agent

Solution retenue

Canvas tactile (react-signature-canvas + ResizeObserver)
Chiffrement AES-256-CBC — IV aléatoire, clé en variable d'env.
CRON Symfony : anonymisation auto après durée configurable

Principes RGPD appliqués

Minimisation
On ne conserve que ce qui est nécessaire à la preuve
Limitation de conservation
Durée paramétrable — anonymisation CRON automatique
Sécurité par défaut
AES-256-CBC + IV aléatoire + clé hors dépôt de code
Défi 03 / 03

Active Directory & LDAP

Stratégie offensive — exposer la contrainte plutôt que la contourner.

Contrainte infrastructure

Port 636 (LDAPS) fermé par politique de sécurité réseau
Aucun certificat SSL sur le contrôleur de domaine
LDAP simple port 389 — transit en clair sur réseau interne

Mesures d'atténuation

Applications accessibles uniquement en réseau local
Compte de service dédié, droits restreints
Identifiants dans variables d'env. non versionnées
Mots de passe agents jamais stockés
LDAP_USE_TLS — migration LDAPS recommandée et préparée
05
Section 05

Déploiement,
retours & bilan

Tests agents, accueil, compétences acquises et perspectives

Déploiement

Tests & retours agents

Phase 1 — Service NTIC

Auth AD · état des lieux complet · signature
E-mail notification NTIC · génération PDF
Retours précis sur l'ergonomie

Phase 2 — Agents accueil & état civil

Déploiement agent par agent — accompagnement individuel
Explication du wizard · recueil impressions à chaud

Accueil globalement positif

QR code apprécié — zéro recherche manuelle
Parcours guidé simple — comparaison fiche papier favorable
Peu de modifications — ajustements mineurs d'interface
Mon intégration dès le début au service NTIC m'avait permis d'anticiper certaines attentes avant la phase de test formelle.
Bilan

Livrables & compétences

ÉtatV (PWA)
En production · utilisée par les agents
React+TSSymfonyPWA
Portail RH/NTIC
Mouvements personnel · intégré SI
SymfonyFlowbiteLDAP
Plugin GLPI + Trombinoscope
PDF automatiques · annuaire AD
PHPDomPDFReact+TS

Technique

PWA offline-first Workbox / Background Sync API REST Symfony AES-256-CBC / RGPD Auth LDAP contraint Plugin GLPI

Humain

Besoins informels → solutions Déploiement terrain Retours utilisateurs Initiative proactive
Perspectives : migration LDAPS · module maintenance préventive · export PDF états des lieux archivés
Merci

Questions ?

Je suis disponible pour approfondir : architecture PWA offline-first, conformité RGPD des signatures, authentification LDAP dans un SI contraint, ou les autres projets du stage.

Clément DAVID — S6TD2B Mairie de Sainte-Savine · NTIC React · TypeScript · Symfony · PWA · MySQL 05 jan → 10 avr 2026 · 14 semaines