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
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
Pas de visuel sur l'état de la flotte
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.
Existant
Ce que les agents faisaient avant
| Limite | Impact |
|---|---|
| Ratures & illisibilité | Erreurs de saisie |
| Fiche volante physique | Perte de documents |
| Saisie 100% manuelle | Perte de temps |
| Pas d'archivage structuré | Aucun historique |
| Pas de suivi temps réel | Dégradation non détectée |
Croquis du véhicule à annoter à la main, kilométrage, niveau de charge, signature manuscrite — sur le parking.
Architecture
Pourquoi une PWA ?
| Critère | App native | PWA |
|---|---|---|
| Déploiement | Store | URL navigateur |
| Mise à jour | Manuelle | Côté serveur |
| Hors-ligne | Natif | Service Worker |
| Coût dev | Double base | Base unique |
| Maintenance NTIC | Compétences mobiles | Aucune |
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
mobile + desktop
0
installation
requise
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
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
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
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
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
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
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
Aperçu ÉtatV
Alignement
Alignement
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
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
Mesures d'atténuation
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
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