Визуализация распределенных команд с помощью Felt

Удаленная работа никуда не делась. Одной из проблем удаленной работы является несовпадение часовых поясов. Представьте, что у вас есть один инженер-программист, работающий в Сан-Франциско, и дизайнер продуктов, работающий в Португалии. Для новых сотрудников важно, чтобы все понимали, в каком часовом поясе работают их товарищи по команде. Это позволяет членам команды устанавливать совпадающие часы совместной работы, настраивать эффективную асинхронную связь и предотвращать задержки, когда кому-то нужно обратиться за помощью, чтобы разблокировать.

На мой взгляд, каждое руководство для сотрудников с числом сотрудников менее 100 должно включать карту, на которой новые сотрудники могут быстро выяснить, в каком часовом поясе работают их коллеги.

Трехэтапный процесс, который я предпринял для создания карты распределенных членов команды, включал создание инструмента CSV Geocoder, который использовался для преобразования электронной таблицы в таблицу с дополнительными координатами широты и долготы, добавление формы, в которую пользователи могли загружать свои CSV-файлы, и создание визуализация данных в Felt — картографический инструмент.

1. Создание инструмента геокодера CSV

Геокодирование — это процесс преобразования описания или текста местоположения в географические координаты, такие как широта и долгота.

В большинстве случаев имеющаяся у вас информация о местоположении членов команды включает адрес, город, штат или страну. Чтобы отобразить маркеры на карте, вы должны перевести информацию о местоположении в географические координаты (широта, долгота). Вы, вероятно, не хотите создавать маркеры вручную, хотя это легко сделать в Felt. Я решил автоматизировать часть этого процесса.

Хотя существует множество API геокодирования, я решил выполнить быстрый поиск, прочитав файл CSV, который содержал всю широту и долготу каждого города в мире, и сопоставив его с конкретным человеком. Вероятно, мы не хотим создавать точные маркеры местонахождения человека из соображений безопасности. Для моего текущего варианта использования, когда я действительно использую информацию о городе только для установки координат широты и долготы, это отлично работает.

Под капотом сервер Node.js, который я настроил для выполнения работы, делает следующее, используя комбинацию популярных библиотек, таких как express, multer и fast-csv.

Одна интересная вещь, которую я узнал в ходе этого процесса, заключается в том, что в зависимости от размера вашего CSV-файла вы не можете просто передать файл на свой сервер и обработать его сразу из-за ограничений памяти. Вам нужно будет разбить его на куски и обработать каждую часть, прежде чем объединять ее в конце. Вероятно, можно с уверенностью сказать, что эта карта, визуализирующая распределенную команду, предназначена для команд < 150 человек. Из-за этих текущих ограничений наши электронные таблицы, вероятно, будут содержать количество строк на том же приблизительном уровне.

2. Создание формы для загрузки CSV

Форма, которую я использовал для загрузки CSV для отправки на мой внутренний сервер для выполнения преобразований в CSV, включала несколько ключевых компонентов.

Первым компонентом было добавление элемента формы, который будет использоваться для отправки файла CSV в определенную конечную точку. Второй компонент включал добавление элемента ввода, используемого для выбора и загрузки файла. Ключевые атрибуты, которые следует отметить здесь для элемента ввода, включают в себя его обязательность , чтобы пользователи не могли отправлять без файла, и добавление проверок для типа файла 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>

Три шага, которые я использовал для создания визуализации карты, включали загрузку CSV для создания всех маркеров для членов команды, включение слоя часового пояса и, наконец, добавление изображения к каждому маркеру.

Несколько последних интересных вещей, которые я хочу исследовать в будущем…

1. Где находится наиболее равноудаленное место для проведения выездного мероприятия всеми членами команды?
2. Интеграция API геокодирования с открытым исходным кодом с адресом
3. Добавьте опцию обратного геокодирования
4. Надежная обработка ошибок (отсутствующие данные ячеек, неправильная маркировка/отсутствующие заголовки таблиц)

Я постараюсь развернуть его в конце недели после того, как проведу TLC над дизайном и добавлю дополнительную обработку ошибок на сервере для крайних случаев!

Посмотрите карту на войлоке:

У вас есть вопросы или отзывы? Я хотел бы услышать это!

электронная почта: [email protected]

твиттер:https://twitter.com/duckduckquy

Чувствовала:https://felt.com/

Источник данных:https://www.kaggle.com/datasets/juanmah/world-cities