CONTEXTE DU PROJET

Mettre en avant les produits en exploitant l’interactivité des tablettes

Notre partenaire Manitoba nous a confié la réalisation d’une application métier à destination des équipes commerciales de son client final. Cet outil se présente sous la forme d’un site internet compatible ordinateurs de bureau et tablettes. Il permet de parcourir de manière interactive le catalogue de produits et de réaliser des configurations sur le terrain, avec les clients en direct.

L’application développée est disponible hors connexion et se rapproche d’une prise de commande. Elle permet de mettre en avant les références produits et de les présenter de manière ludique. L’interface d’administration permet une mise à jour rapide et simple.

RÉSULTATS

Une application pertinente pour son usage

• une application simple à utiliser
• un client final satisfait
• l’intégration de plus de produits que prévu initialement
• une solution qui évolue dans le temps

CONCEPTION

Partir du bon pied sur l’expérience utilisateur proposée

Dans les premières phases du projet, nous avons accompagné notre partenaire Manitoba dans la définition du cadre fonctionnel et de l’expérience utilisateur (UX) en proposant des wireframes intégrant notamment les problématiques d’utilisation sur tablette. Les maquettes ont été réalisées par notre partenaire sur la base de ces écrans.

En concertation avec Manitoba, et dans une optique d’évolutivité et de simplicité, nous avons fait le choix de la réalisation du projet sous forme d’une Progressive Web App (PWA). Cette notion assez récente permet de s’appuyer sur les technologies web classiques et d’y adjoindre quelques fonctionnalités particulières pour s’approcher de l’expérience mobile ou tablette.

DÉVELOPPEMENT

Un outil métier interactif et fiable

Nous avons opté pour une base de données MongoDB pour faciliter la construction des modèles de données et pour la rendre plus évolutive. Côté serveur (backend), une interface en GraphQL fait office d’API pour la lecture et la manipulation des données.

Nous nous sommes orientés vers la technologie ReactJS pour réaliser la partie visuelle et interactive (frontend) de l’application web. De cette manière, nous avons pu construire un outil à la fois performant et fiable, notamment pour la fonctionnalité de configuration qui permet de combiner plusieurs produits en un seul visuellement.

Une fois la base réalisée, nous avons adapté le site internet pour le rendre compatible PWA : de cette manière il peut être intégré à des tablettes presqu’à la manière d’une application native.

MODE HORS CONNEXION

Le mode hors ligne pour les commerciaux sur le terrain

L’utilisation de GraphQL, notamment son implémentation Apollo côté client, nous a permis de réaliser rapidement la fonctionnalité d’accès à l’application hors connexion (offline). En effet, les requêtes principales sont effectuées lorsque l’utilisateur décide du passage hors ligne, et le cache intégré permet de délivrer les données de manière transparente, qu’il y ait accès à Internet ou non.

Nous avons également utilisé les fonctionnalités récentes des navigateurs pour télécharger et stocker les nombreuses images des produits du catalogue, et pouvoir les réafficher à l’utilisateur. Un indicateur visuel permet au commercial de savoir quand le téléchargement est terminé. En attendant, l’application web reste totalement utilisable.

Enfin, nous avons mis en place un système de versionnage des données : un utilisateur qui aurait téléchargé l’application en hors ligne est ainsi averti quand il doit remettre à jour son application.

INTERFACE D’ADMINISTRATION

L’intégration rapide de données massive

L’interface d’administration que nous avons développé a eu comme première mission de faciliter l’import manuel de toutes les données qui étaient déjà disponibles sur la première version du site. Nous avons ainsi pensé cette interface autour d’un processus de renseignement des données du catalogue afin de pouvoir accélérer cette opération (ex : traitements par lots).

Comme dans la plupart des outils d’administration que nous développons pour nos projets, nous avons également mis un soin particulier à ce que l’interface soit pratique à utiliser et claire, malgré quelques concepts plus difficiles à aborder (ex : déclinaisons de produits). Nous y avons intégré deux formes de documentation : des textes d’aides disséminés dans toute l’interface, et un contenu plus dense proposé en page d’accueil pour expliquer les grandes lignes.

ÉVOLUTIONS

Un modèle technique et métier évolutif

Nous avons conçu l’application pour pouvoir plus simplement développer de nouvelles fonctionnalités et faire évoluer celles qui existent. Dans cette optique :

• le choix de ReactJS permet d’avoir une stabilité technique dans le temps ;
• la base MongoDB autorise des données métiers complexes, avec des modifications et de l’ajout plus souples qu’un modèle relationnel type SQL ;
• l’interface GraphQL créé une abstraction qui rend l’application moins dépendante des solutions techniques choisies et qui facilite la création d’autres outils autour des mêmes données ;
• le modèle de données a été très orienté métier plutôt que technique pour ne pas répondre qu’aux enjeux de départ mais anticiper ceux de demain…