Une Plateforme de Suivi des Données en Temps Réel de Satisfaction.AI par xBrain

Dadiana est un projet innovant développé par xBrain, conçu spécifiquement pour offrir aux clients un backoffice leur permettant de suivre en temps réel les données générées par leur intelligence artificielle, Satisfaction.AI. Ce projet est destiné à améliorer la gestion des données clients et à fournir des informations précises et exploitables en direct.

C’est au cours de ce projet que j’ai eu l’occasion de découvrir et de me familiariser avec plusieurs technologies telles que GraphQL, SVG, et Adobe Illustrator, tout en travaillant en collaboration avec une équipe dédiée pour la partie backend.

Contexte et Objectifs du Projet Dadiana

L’objectif principal de Dadiana est de créer une interface intuitive et fonctionnelle permettant aux utilisateurs de Satisfaction.AI de suivre les interactions et les données issues des conversations clients de manière simplifiée. Cette plateforme leur permet de visualiser les performances, d’analyser les interactions, et d’accéder aux informations critiques en un seul endroit.

Satisfaction.AI est une solution d’intelligence artificielle développée par xBrain, principalement utilisée dans les systèmes de chatbots pour améliorer l’expérience client. Dadiana sert de tableau de bord centralisé pour regrouper et analyser toutes les données collectées, rendant les informations exploitables et accessibles en temps réel.

Découverte de Nouvelles Technologies

Le projet m’a offert l’opportunité d’élargir mes compétences techniques. Plusieurs technologies et outils ont été introduits au cours du développement de Dadiana :

• GraphQL : Une technologie que j'ai découverte sur ce projet. Elle a transformé la manière dont les données sont récupérées et manipulées par rapport aux API REST traditionnelles. GraphQL permet de spécifier exactement quelles données sont nécessaires et dans quel format, optimisant ainsi les requêtes et réduisant la surcharge de réseau.

• SVG et Adobe Illustrator : Dans le cadre de la création d'éléments graphiques et d’icônes pour l’interface utilisateur, j'ai utilisé Adobe Illustrator pour créer des visuels optimisés, notamment sous le format SVG. L’avantage du format SVG réside dans sa capacité à être mis à l’échelle sans perte de qualité, tout en étant léger et parfaitement adapté pour le web.

Développement Backend : Python et GraphQL

Le backend de Dadiana a été développé par une autre équipe en Python, utilisant GraphQL pour interagir avec le front-end. Mon travail a principalement consisté à intégrer ces fonctionnalités backend dans l’interface via l’utilisation d’Apollo Client, une bibliothèque dédiée à la gestion des requêtes GraphQL dans les applications React.

Le choix de GraphQL pour le projet a permis de simplifier l’interaction avec les données. Au lieu d’avoir plusieurs points d’entrée comme avec une API REST classique, GraphQL centralise toutes les requêtes sur un seul endpoint. Cela améliore l'efficacité des appels d'API et facilite l'intégration des nouvelles fonctionnalités sans nécessiter de modifications majeures côté serveur.

Tâches Réalisées

Durant le développement de Dadiana, voici les principales tâches sur lesquelles j’ai travaillé :

1. Build et Mise en Production de la Démo

Un aspect clé de mon travail consistait à construire et déployer la version de démonstration de Dadiana. Cette démo permettait aux clients de tester les fonctionnalités en avant-première et de fournir des retours pour affiner le produit avant la mise en production complète.

2. Intégration de l’API et des Requêtes GraphQL via Apollo Client

J’ai intégré les fonctionnalités backend, développées en GraphQL, à l’interface utilisateur via Apollo Client, une bibliothèque de gestion des requêtes GraphQL pour React. Cette intégration a permis d'assurer une communication fluide entre le backend et le front-end, en récupérant les données de manière dynamique et en les affichant en temps réel sur la plateforme.

3. Création d’Icônes avec Adobe Illustrator

Dans le cadre du design de l’application, j’ai utilisé Adobe Illustrator pour concevoir des icônes personnalisées et optimiser leur exportation au format SVG. Ces icônes ont ensuite été intégrées dans l’interface de Dadiana afin de fournir une expérience utilisateur cohérente et attrayante.

4. Intégration des Prototypes Sketch

L’application a été développée à partir de prototypes créés sur Sketch, un outil populaire de conception d’interface utilisateur. J’ai assuré l'intégration de ces prototypes dans le projet, en respectant les contraintes de design et en veillant à une bonne ergonomie.

5. Internationalisation (Multilangue)

Étant donné que Dadiana est destiné à des clients de différentes régions du monde, j’ai mis en place un système d’internationalisation permettant de supporter plusieurs langues. Cette fonctionnalité permet à l’interface de s’adapter facilement à différents marchés en proposant une traduction dynamique des contenus.

6. Web Scraping avec Puppeteer et Node.js

L'une des tâches les plus techniques que j'ai réalisées sur ce projet a été le web scraping des données de chats depuis Satisfaction.AI. En utilisant Puppeteer (une bibliothèque Node.js qui fournit une API pour contrôler un navigateur via le protocole DevTools), j’ai automatisé la récupération des données de chats de Chatra.io, un logiciel de live chat. Ces données étaient ensuite stockées dans MongoDB Atlas pour être exploitées dans Dadiana.

7. Gestion des Tâches de l’Équipe

En plus du développement technique, j'ai également joué un rôle dans la gestion des tâches de l’équipe, composée de deux développeurs. Cette responsabilité impliquait la coordination des différentes étapes du projet, la gestion des priorités et le suivi des livrables afin de garantir un avancement fluide.

Technologies et Librairies Utilisées

Le développement de Dadiana s’appuyait sur un ensemble de technologies modernes pour assurer la performance, la flexibilité et la maintenabilité de l’application :

• React.js : La bibliothèque principale utilisée pour le développement du front-end.

• Moment.js : Pour la gestion des dates et des heures, notamment pour afficher les timestamps des chats.

• React-intl : Utilisé pour l’internationalisation de l’interface.

• React-router : Pour gérer la navigation au sein de l’application.

• Apollo-boost : Un package simplifié pour configurer Apollo Client, facilitant l'intégration de GraphQL.

• Material-UI 4 : Utilisé pour l'interface utilisateur, offrant des composants réactifs et un design moderne.

Le login pour accéder au prototype est:
Email: demo@xbrain.io
Mot de passe: B?Nn*U@2xtL3w5m7