Modélisation des champs des formulaires
chez LesFurets.com

Jonathan Fitoussi

Jonathan Fitoussi

Étudiant en Master 2 STL/INSTA

En alternance chez Courtanet, éditeur du site LesFurets.com

LesFurets.com

1er site indépendant de comparaison d’assurance, lancé en septembre 2012

Un lieu unique pour comparer rapidement des centaines d’offres (assurances auto, moto, MRH, santé et emprunteur)

Application Web Java

Sujet

  • Formulaire permettant aux utilisateurs de cibler leurs besoins
  • Mettre en place un outil permettant de visualiser un graphe correspondant aux formulaires présents sur le site
  • Adapter le format d'export existant
  • Proposer des fonctions de gestion du graphe
  • Superposer des données "business" au graphe

Un Formulaire

Une hiérarchie entre les éléments du formulaire

  • Écran
  • Bloc
  • Groupe
  • Champ

MetaModel

Définition : Metamodel signifie littéralement modèle du modèle.

  • Défini les éléments d'un formulaire ainsi que leurs dépendances
  • Dans le code sous forme d'Enum Java

Enum Java

Une hiérarchie entre les champs du formulaire

  • Field
  • Group
  • Bloc
  • Screen

public enum EFieldAuto implements FieldID {
VEH_DTL_DEMANDE(LISTBOX, ...

public enum EGroupAuto implements GroupID {
GRP_VEH_IMMAT("GRP_VEH_IMMAT", VEH_DTL_IMMAT_NUM, VEH_DTL_IMMAT_SERVICE, ...

public enum EBlockAuto implements BlockID {
BLK_MA_DEMANDE("BLK_MA_DEMANDE", VEH_DTL_DEMANDE, VEH_DTL_CHOIX_RECHERCHE_VEHICULE, ...

public enum EScreenAuto implements ScreenID {
SCR_VEHICULE("Vehicule", BLK_MA_DEMANDE, BLK_UTILISATION_VEHICULE, ...

Conception de l'outil

  • Export des données
  • Création d'un graphe
  • Interface

Problèmatique

Adapter le code existant pour le futur outil

Integrer l'outil au workflow de l'entreprise

Développement integré au process de l'équipe

Application Web

                
                public enum EFieldAuto implements FieldID{
                VEH_DTL_DEMANDE(LISTBOX, "VEH_DTL_DEMANDE", TAG_QUESTION_HOMEPAGE), //
                /**
                * @see #SEC_SUPPRESSION
                */
                VEH_DTL_SECOND(LISTBOX, "VEH_DTL_SECOND"), //
                VEH_DTL_TITULAIRE(LISTBOX, "VEH_DTL_TITULAIRE"), //

Données JSON

Utiliser la génération de code

Générer les données sous forme d'un tableau d'éléments

Noeud Ecran

{ "data": { "label": "Votre véhicule", "id": "Vehicule", "type": "SCREEN" }, "group": "nodes" }

Noeud Bloc

{ "data": { "label": "Ma demande",
"id": "BLK_MA_DEMANDE", "parent": "Vehicule", "type": "BLOCK" }, "group": "nodes" },

Arête du graphe

{ "data": {
"id": "SEC_DON_ANEC_HIS_DATE_RETRAIT", "source": "SEC_DON_ANNUL",
"target": "SEC_HIS_DATE_RETRAIT" },
"group": "edges" },

Graphe en Javascript CytoscapeJS

Tracer un graphe

Exploration

Edition

Brouillon

Style du graphe

  • Positionnement
  • Information
  • Espacement
  • Type de champ
  • Peut contenir
  • Design

Style d'un élément

Propre

Opération sur le graphe

Recherche

Édition de données

Sauvegarde du graphe

Chargement d'un graphe

Propre

Exploitation du graphe

Différences

Versionnement des modifications

Superposition des données utilisateurs

Propre

Propre

Propre

Conclusion

Conclusion

Développer un outil en se servant d'une technologie existante

S'adapter au workflow d'une équipe de développement

Challenger les équipes fonctionnelles