Visualización de equipos distribuidos usando Felt

El trabajo remoto llegó para quedarse. Un desafío del trabajo remoto es el desajuste de la zona horaria. Imagine que tiene un ingeniero de software trabajando en el Área de la Bahía y un diseñador de productos trabajando en Portugal. Como nuevos empleados a bordo, es importante que todos entiendan en qué zona horaria están trabajando sus compañeros de equipo. Esto permite a los miembros del equipo establecer horas de colaboración superpuestas, configurar una comunicación asincrónica efectiva y evitar demoras cuando alguien necesita pedir ayuda para desbloquearse.

En mi opinión, cada manual del empleado con <100 empleados debe incluir un mapa donde los nuevos empleados puedan averiguar rápidamente en qué zona horaria están trabajando sus compañeros de trabajo.

El proceso de 3 pasos que tomé para crear un mapa de los miembros del equipo distribuido implicó la creación de una herramienta CSV Geocoder que se usó para transformar una hoja de cálculo en una con coordenadas adicionales de latitud y longitud, agregando un formulario en el que los usuarios podían cargar su CSV y creando la visualización de datos dentro de Felt una herramienta de mapeo.

1. Creación de una herramienta de geocodificador CSV

La geocodificación es el proceso de tomar una descripción o texto de una ubicación y transformarlo en coordenadas geográficas como latitud y longitud.

En la mayoría de los casos, la información de ubicación que tiene de los miembros del equipo incluye una dirección, ciudad, estado o país. Para mostrar marcadores en un mapa, debe traducir la información de ubicación dada en coordenadas geográficas (latitud, longitud). Probablemente no desee crear manualmente los marcadores, aunque es fácil hacerlo en Felt. Me propuse automatizar parte de este proceso.

Si bien existen muchas API de codificación geográfica, opté por realizar una búsqueda rápida leyendo un archivo CSV que contenía toda la latitud y longitud de cada ciudad del mundo y comparándolo con el individuo. Probablemente no queramos crear marcadores exactos de la ubicación de un individuo por razones de seguridad. Para mi caso de uso actual en el que realmente solo uso la información de la ciudad para establecer las coordenadas de latitud y longitud, esto funciona muy bien.

Debajo del capó, el servidor Node.js que configuré para realizar el trabajo hace lo siguiente usando una combinación de bibliotecas populares como express, multer y fast-csv.

Una cosa interesante que aprendí a lo largo de este proceso es que, según el tamaño de su archivo CSV, no puede simplemente enviar el archivo a su servidor y procesarlo todo a la vez debido a limitaciones de memoria. Deberá dividirlo en partes y procesar cada parte antes de combinarlo al final. Probablemente sea seguro decir que este mapa que visualiza un equipo distribuido está destinado a equipos de menos de 150 personas. Debido a estas restricciones actuales, nuestras hojas de cálculo probablemente contendrán un recuento de filas en el mismo estadio.

2. Crear un formulario para cargar el CSV

El formulario que usé para cargar el CSV para enviarlo a mi servidor backend para realizar las transformaciones en el CSV involucraba algunos componentes clave.

El primer componente fue agregar un elemento de formulario que se usaría para enviar el archivo CSV a un punto final específico. El segundo componente implicó agregar un elemento de entrada utilizado para seleccionar y cargar el archivo. Los atributos clave a tener en cuenta aquí en el elemento de entrada incluyen hacer que sea obligatorio para que los usuarios no puedan enviar sin un archivo y agregar comprobaciones para que el tipo de archivo sea 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>

Los tres pasos que usé para crear la visualización del mapa fueron cargar el CSV para crear todos los marcadores para los miembros del equipo, habilitar la capa de zona horaria y, finalmente, agregar una imagen a cada marcador.

Algunas cosas interesantes finales que quiero explorar en el futuro...

1. ¿Cuál es el lugar más equidistante para que todos los miembros del equipo organicen una reunión externa?
2. Integración de una API de geocodificación de código abierto con dirección
3. Agregar una opción de geocodificación inversa
4. Manejo robusto de errores (datos de celda faltantes, encabezados de tabla mal etiquetados/faltantes)

Buscaré implementarlo al final de la semana después de hacer un poco de TLC en el diseño y agregar un manejo de errores adicional en el servidor para casos extremos.

Echa un vistazo al mapa en fieltro:

¿Tiene preguntas o comentarios? ¡Me encantaría oírlo!

correo electrónico: [email protected]

gorjeo:https://twitter.com/duckduckquy

Sintió:https://felt.com/

Fuente de datos:https://www.kaggle.com/datasets/juanmah/world-cities