L’ANFR a mis en place une charte des bonnes pratiques engageant les professionnels de la réception TV. Afin de faciliter la signature de cette charte, elle a décidé de proposer aux antennistes un formulaire web de saisie permettant de recenser leurs informations et faciliter la génération du document d’engagement.

Dans ce billet, nous présentons la démarche, le rendu obtenu puis un aperçu de la plateforme technique de projet.

Point de vue utilisateur

Les utilisateurs du formulaire sont des antennistes. Pour favoriser l’adhésion de ces derniers à la charte, nous avons mis l’accent sur trois éléments clés :

  • l’utilisation d’une charte graphique connue
  • un site en responsive design
  • un guidage précis sur la procédure à suivre

Charte graphique connue

Nous avons repris la charte graphique que les antennistes connaissent bien puisqu’elle a été mise en place sur le site http://www.recevoirlatnt.fr. Ci-dessous, le formulaire “MES TRAVAUX” de recevoir la TNT :

Charte graphique à appliquer

Charte graphique à appliquer

Le formulaire à remplir est présenté en point d’entrée. Le choix du framework présenté après a été déterminant pour obtenir un rendu en cohérence avec l’existant :

Charte graphique appliquée

Charte graphique appliquée

Responsive design

Le site est responsive design. Par exemple lorsque la largeur n’est pas suffisante pour une présentation sur deux colonnes, une présentation verticale est préférée :

Responsive design : faible largeur

Responsive design : faible largeur

Guidage de l’utilisateur

L’antenniste est guidé lors de la saisie.

Par exemple, les données saisies sont contraintes (caractère obligatoire, SIRET sur 14 caractères, numéro de téléphone bien formé, etc.) :

Vérification des contraintes à la saisie

Vérification des contraintes à la saisie

Les communes sélectionnables sont pré-chargées à partir du code postal. Pour cela, nous utilisons un web service de GeoAPI pour récupérer les informations cohérentes (code postal liste de communes) :

Communes issues de GeoAPI

Communes issues de GeoAPI

Lorsque le code postal est associé à une seule commune, cette dernière est automatiquement sélectionnée :

Sélection automatique si possible

Sélection automatique si possible

Le composant suivant impose la saisie d’au moins 5 éléments et indique l’effort restant à fournir :

Effort restant à fournir

Effort restant à fournir

Le composant présenté ci-dessous permet de renseigner les émetteurs couvrant la zone d’intervention de l’antenniste. L’utilisateur peut à la fois saisir librement les noms des émetteurs et sélectionner les émetteurs proposés au fur et à mesure de la frappe. Lorsque l’utilisateur a sélectionné un émetteur du référentiel, le lien est conservé pour un post-traitement du dossier :

Saisie libre avec propositions

Saisie libre avec propositions

Avant de passer à la suite, l’antenniste vérifie les informations qu’il a saisies, accepte la charte (qu’il a lue, bien sûr) et valide :

Vérification de la saisie et confirmation

Vérification de la saisie et confirmation

Pour finir, un document est généré au format pdf. L’utilisateur l’imprime et le signe avant de le retourner à l’ANFR :

Récupération du document

Récupération du document

Exemple de fichier pdf généré :

Exemple de document d'engagement pré-rempli

Exemple de document d’engagement pré-rempli

Point de vue technique

Serveur Java

On retrouve un serveur de données PostgreSQL et une API de services HTTP basée sur une stack Jooq, Java, JaxRS / RESTEasy, Jetty. Pour plus de détails, je vous invite à consulter l’article Mise en place d’une API HTTP REST qui présente une solution proche.

Les documents sont produits à partir d’un modèle odt que l’ANFR peut modifier avec un outil bureautique. XDocReport est utilisé avec le langage de balises Freemarker.

Client Angular

Le client est réalisé en Angular version 4 avec typescript.

Angular est un framework de présentation (côté navigateur) qui permet de construire des applications complexes. Parmi les concepts d’Angular, on retrouve notamment les composants, les Property bindings et l’injection de dépendances.

Typescript est un sur-ensemble de javascript ES6 avec un typage des variables, des fonctions, des classes et interfaces, une gestion de modules, etc. Au final, les scripts typescript sont transpilés en javascript de manière à ce qu’ils puissent être interprétés directement par un navigateur web.

Les exemples simplifiés de code présentés ci-dessous donnent un aperçu de l’esprit de la gestion des composants dans Angular.

L’unique page du projet :

~/projets/anfr/antenniste-cbp/repo/client/src/index.html :

Module app

~/projets/anfr/antenniste-cbp/repo/client/src/app/app.module.ts :

Composant app

~/projets/anfr/antenniste-cbp/repo/client/src/app/app.component.ts :

Le composant viendra s’inscrire dans app-root (cf index.html) et utilisera le modèle de présentation app.component.html avec la feuille de style app.component.css.

~/projets/anfr/antenniste-cbp/repo/client/src/app/app.component.html :

On reproduit le même fonctionnement que pour l’index avec header, view et footer.

Composant header (entête)

~/projets/anfr/antenniste-cbp/repo/client/src/app/header/header.component.ts :

Ici, le composant utilise le service LinkService pour charger des données. Le service est injecté via le constructeur. Les données sont chargées de manière asynchrone et lorsqu’elles sont prêtes (then), nous renseignons les variables ministere*.

~/projets/anfr/antenniste-cbp/repo/client/src/app/header/header.component.html

Les variables ministere* sont utilisées directement dans le modèle (“réactivité”).

Service de données links

~/projets/anfr/antenniste-cbp/repo/client/src/app/service/link.service.ts :


Le service de données
LinkService charge les données à partir d’un appel HTTP GET au web service /api/links.

Environnement de développement

Dans la phase de développement, on démarre les serveurs et le client simplement :

Démarrage du serveur de données :

 


Démarrage du serveur web :


Démarrage du client web :

 

Test sur l’URL http://localhost:4200/ :

Livraison / installation, mise à jour

De manière à simplifier la gestion par l’administrateur système/réseau, nous livrons un paquet système qui comporte à la fois le serveur et le client minifié / packagé. Ainsi, il suffit d’une instruction pour installer ou mettre à jour le serveur.

Un script se charge du packaging de l’ensemble :

 

Installation du paquet système :

 

Mise à jour du paquet système :

 

Le site est accessible ici : https://charte-antennistes.anfr.fr.