Visualiser des équipes distribuées à l'aide de Felt

Dec 01 2022

Le travail à distance est là pour rester. L'inadéquation des fuseaux horaires est l'un des défis du travail à distance.

Le travail à distance est là pour rester. L'inadéquation des fuseaux horaires est l'un des défis du travail à distance. Imaginez que vous ayez un ingénieur logiciel travaillant dans la région de la baie et un concepteur de produit travaillant au Portugal. En tant que nouveaux employés à bord, il est important que chacun comprenne dans quel fuseau horaire ses coéquipiers travaillent. Cela permet aux membres de l'équipe de définir des heures de collaboration qui se chevauchent, de mettre en place une communication asynchrone efficace et d'éviter les retards lorsque quelqu'un a besoin de demander de l'aide pour se débloquer.

Carte d'équipe distribuée construite à l'aide de Felt

À mon avis, chaque manuel de l'employé de moins de 100 employés devrait inclure une carte permettant aux nouveaux employés de déterminer rapidement dans quel fuseau horaire leurs collègues travaillent.

Le processus en 3 étapes que j'ai suivi pour créer une carte des membres de l'équipe distribuée impliquait la création d'un outil CSV Geocoder qui a été utilisé pour transformer une feuille de calcul en une feuille de calcul avec des coordonnées de latitude et de longitude supplémentaires, l'ajout d'un formulaire sur lequel les utilisateurs pouvaient télécharger leur CSV et la création la visualisation des données au sein de Felt un outil de cartographie.

Création d'un outil de géocodage CSV

Le géocodage est le processus consistant à prendre une description ou un texte d'un emplacement et à le transformer en coordonnées géographiques telles qu'une latitude et une longitude.

Dans la plupart des cas, les informations de localisation dont vous disposez sur les membres de l'équipe incluent une adresse, une ville, un état ou un pays. Afin d'afficher des marqueurs sur une carte, vous devez traduire les informations de localisation données en coordonnées géographiques (latitude, longitude). Vous ne voulez probablement pas créer manuellement les marqueurs bien qu'il soit facile de le faire dans Felt. J'ai entrepris d'automatiser une partie de ce processus.

Alors que de nombreuses API de géocodage existent, j'ai choisi d'effectuer une recherche rapide en lisant un fichier CSV contenant toute la latitude et la longitude de chaque ville du monde et en le faisant correspondre avec l'individu. Nous ne voulons probablement pas créer des marqueurs exacts de l'emplacement d'un individu pour des raisons de sécurité. Pour mon cas d'utilisation actuel où je n'utilise vraiment que les informations de la ville pour définir les coordonnées de latitude et de longitude, cela fonctionne très bien.

Schéma système du travail backend

Sous le capot, le serveur Node.js que j'ai configuré pour effectuer le travail effectue ce qui suit en utilisant une combinaison de bibliothèques populaires telles que express, multer et fast-csv.

Une chose intéressante que j'ai apprise tout au long de ce processus est qu'en fonction de la taille de votre fichier CSV, vous ne pouvez pas simplement transférer le fichier sur votre serveur et le traiter en une seule fois en raison de contraintes de mémoire. Vous auriez besoin de le diviser en morceaux et de traiter chaque partie avant de la combiner à la fin. Il est probablement prudent de dire que cette carte visualisant une équipe distribuée est destinée aux équipes < 150 personnes. En raison de ces contraintes actuelles, nos feuilles de calcul contiendront probablement un nombre de lignes dans ce même stade approximatif.

2. Créer un formulaire pour télécharger le CSV

Le formulaire que j'ai utilisé pour télécharger le CSV à envoyer à mon serveur principal pour effectuer les transformations sur le CSV impliquait quelques composants clés.

Formulaire HTML

Le premier composant consistait à ajouter un élément de formulaire qui serait utilisé pour soumettre le fichier CSV à un point de terminaison spécifique. Le deuxième composant consistait à ajouter un élément d'entrée utilisé pour sélectionner et télécharger le fichier. Les attributs clés à noter ici sur l'élément d'entrée incluent le fait de le rendre obligatoire afin que les utilisateurs ne puissent pas soumettre sans fichier et d'ajouter des vérifications pour que le type de fichier soit CSV.

<form method="POST" action="/submit" encType="multipart/form-data">
                <h1>CSV Geocoder</h1>
                <div>
                  <input type="file" id="file" name="geocode" required accept='.csv' />
                </div>
                <br>
                <div>
                  <button>Upload</button>
                </div>
              </form>

Les trois étapes que j'ai utilisées pour créer la visualisation de la carte consistaient à télécharger le CSV pour créer tous les marqueurs pour les membres de l'équipe, à activer la couche de fuseau horaire et enfin à ajouter une image à chaque marqueur.

Quelques dernières choses intéressantes que je veux explorer à l'avenir…

Quel est l'endroit le plus équidistant pour tous les membres de l'équipe pour organiser un hors site ?
Intégration d'une API de géocodage Open Source avec Address
Ajouter une option de géocodage inversé
Gestion robuste des erreurs (données de cellule manquantes, en-têtes de table mal étiquetés/manquants)

Je chercherai à le déployer à la fin de la semaine après avoir fait quelques TLC sur la conception et ajouté une gestion supplémentaire des erreurs sur le serveur pour les cas extrêmes !