Visualizando equipes distribuídas usando Felt

Dec 01 2022
O trabalho remoto veio para ficar. Um desafio do trabalho remoto é a incompatibilidade de fuso horário.

O trabalho remoto veio para ficar. Um desafio do trabalho remoto é a incompatibilidade de fuso horário. Imagine que você tem um Engenheiro de Software trabalhando na Bay Area e um Designer de Produto trabalhando fora de Portugal. Como novos funcionários a bordo, é importante que todos entendam em que fuso horário seus colegas de equipe estão trabalhando. Isso permite que os membros da equipe definam horas de colaboração sobrepostas, estabeleçam uma comunicação assíncrona eficaz e evitem atrasos quando alguém precisar pedir ajuda para desbloquear.

Mapa de equipe distribuído construído usando Felt

Na minha opinião, todo manual do funcionário com menos de 100 funcionários deve incluir um mapa onde os novos funcionários possam descobrir rapidamente em que fuso horário seus colegas de trabalho estão trabalhando.

O processo de 3 etapas que segui para criar um mapa de membros da equipe distribuídos envolveu a criação de uma ferramenta CSV Geocoder que foi usada para transformar uma planilha em uma com coordenadas adicionais de latitude e longitude, adicionando um formulário para o qual os usuários poderiam enviar seu CSV e criando a visualização de dados dentro de Felt uma ferramenta de mapeamento.

  1. Criando uma ferramenta de geocodificador CSV

Geocodificação é o processo de pegar uma descrição ou texto de um local e transformá-lo em coordenadas geográficas, como latitude e longitude.

Na maioria dos casos, as informações de localização que você possui dos membros da equipe incluem endereço, cidade, estado ou país. Para exibir marcadores em um mapa, você deve traduzir as informações de localização fornecidas em coordenadas geográficas (latitude, longitude). Você provavelmente não deseja criar manualmente os marcadores, embora seja fácil fazê-lo no Felt. Eu me propus a automatizar parte desse processo.

Embora existam muitas APIs de geocodificação por aí, optei por realizar uma pesquisa rápida lendo um arquivo CSV que continha todas as latitudes e longitudes de todas as cidades do mundo e comparando-as com o indivíduo. Provavelmente não queremos criar marcadores exatos da localização de um indivíduo por motivos de segurança. Para o meu caso de uso atual, onde eu realmente só uso as informações da cidade para definir as coordenadas de latitude e longitude, isso funciona muito bem.

Diagrama do sistema de trabalho de back-end

Nos bastidores, o servidor Node.js que configurei para executar o trabalho faz o seguinte usando uma combinação de bibliotecas populares, como express, multer e fast-csv.

Uma coisa interessante que aprendi ao longo desse processo é que, dependendo do tamanho do arquivo CSV, você não pode simplesmente enviar o arquivo para o servidor e processá-lo de uma só vez devido a restrições de memória. Você precisaria dividi-lo em pedaços e processar cada parte antes de combiná-lo no final. Provavelmente é seguro dizer que este mapa que visualiza uma equipe distribuída é destinado a equipes < 150 pessoas. Devido a essas restrições atuais, nossas planilhas provavelmente conterão uma contagem de linhas nesse mesmo estádio.

2. Construir um formulário para carregar o CSV

O formulário que usei para carregar o CSV para enviar ao meu servidor de back-end para realizar as transformações no CSV envolvia alguns componentes-chave.

Formulário HTML

O primeiro componente foi adicionar um elemento de formulário que seria usado para enviar o arquivo CSV para um endpoint específico. O segundo componente envolveu a adição de um elemento de entrada usado para selecionar e carregar o arquivo. Os principais atributos a serem observados aqui no elemento de entrada incluem torná-lo obrigatório para que os usuários não possam enviar sem um arquivo e adicionar verificações para o tipo de arquivo ser 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>

As três etapas que usei para criar a visualização do mapa foram carregar o CSV para criar todos os marcadores para os membros da equipe, habilitar a camada de fuso horário e, finalmente, adicionar uma imagem a cada marcador.

Algumas coisas interessantes finais que quero explorar no futuro…

  1. Onde é o local mais equidistante para todos os membros da equipe hospedarem um local externo?
  2. Integrando uma API de geocodificação de código aberto com o endereço
  3. Adicionar uma opção de geocodificação reversa
  4. Manipulação robusta de erros (dados de célula ausentes, cabeçalhos de tabela com rótulos incorretos/ausentes)

Pretendo implantá-lo no final da semana, depois de fazer algum TLC no design e adicionar tratamento de erros adicional no servidor para casos extremos!

Confira o Mapa em Feltro:

Você tem perguntas ou comentários? Eu adoraria ouvi-lo!

e-mail: [email protected]

Twitter:https://twitter.com/duckduckquy

Sentiu:https://felt.com/

Fonte de dados:https://www.kaggle.com/datasets/juanmah/world-cities