Map Interactive - CRM

Dans le cadre de l'une de mes missions Freelance en 2021, j'ai pu élaborer un outil personnalisé pour un client, qui souhaitait compléter sa solution de CRM par un outil permettant de visualiser l'emplacement de sa flotte de produits sur le territoire, ainsi que les collaborateurs spécifiques à chaque zone.

L'outil devait être simple d'utilisation, et permettre de visualiser les données de manière claire et précise. Il devait également être intégré à la solution de CRM déjà en place, Pipedrive.

La stack

J'ai donc développé une application web en Vue.js 2, avec Nuxt.js, qui permet de visualiser les données de Pipedrive sur une carte interactive. Nuxt est alors utilisé en mode SPA (Single Page Application), pour permettre une navigation fluide et rapide.

Du côté serveur, j'ai réalisé une API très simple en PHP, avec un système d'authentification minimal et une connexion à l'API de Pipedrive. Cette API permet de récupérer les données de Pipedrive, qui ne sont pas géocodées, et de les géocoder à l'aide de l'API Adresse pour les afficher sur la carte.

Pour le rendu des points sur la carte, j'ai utilisé la librairie Leaflet, qui est très pratique et permet de personnaliser facilement les marqueurs et les popovers. Le fond de carte utilisé est celui de Mapbox, qui est très complet.

Pour le back office permettant de définir les accès et les zones attribuées à chaque collaborateur, j'ai utilisé Bootstrap pour le kit d'interface afin d'avoir une interface simple et responsive.

L'application est hébergée sur un serveur dédié, et est accessible par le personnel de l'entreprise.

Résultats

Le projet a été réalisé en 2-3 semaines, et a été très bien accueilli par le client, qui a pu constater une amélioration de sa productivité grâce à cet outil.