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

Если пандемия 2020 года нас чему-то научила, то культура удаленной работы — это путь в будущее. Будучи новым защитником интересов разработчиков в Postman, я рад работать удаленно в глобально распределенной команде по работе с разработчиками, поддерживающей сообщество Postman, насчитывающее более 20 миллионов пользователей по всему миру. В связи с этим меня вдохновила идея создать свою первую коллекцию, чтобы подчеркнуть глобальное присутствие Postman.

В 17-й день 30 дней Postman я был заинтригован функцией Postman Visualizer. Я знал, что она станет сердцем моего проекта, поэтому я решил найти способ визуализировать новых членов моей фантастической команды Postman по всему миру. В этой статье я расскажу, как я начал работу.

Работа с образом в голове

Почтовики живут во всех уголках мира, а моя команда состоит из семи человек, которые работают в разных часовых поясах. Карта должна была стать лучшим видом визуализации, чтобы продемонстрировать наше глобальное разнообразие. Изучив сеть Postman API Network, я наткнулся на визуализацию карты землетрясений, в которой использовались библиотеки D3.js для сопоставления данных с координатами долготы и широты.


Карта землетрясений по всему миру

Я понял, что на этой карте можно визуализировать практически все, что угодно, если у меня есть доступ к данным о долготе и широте.

Пришло время проверить эту теорию на практике. Я создал пример POST-запроса под названием Random Users, используя Postman Echo API. Идея этого запроса заключалась в том, чтобы с помощью библиотеки подделок Postman отправить обратно фиктивные данные для десяти пользователей со случайными именами, долготами и широтами.

let users = [];

for (var i=0; i<10; i++){
    let tempUsers = {
        name: pm.variables.replaceIn("{{$randomFullName}}"),
        latitude: pm.variables.replaceIn("{{$randomLatitude}}"),
        longitude: pm.variables.replaceIn("{{$randomLongitude}}")

    }
    users.push(tempUsers);
}
pm.collectionVariables.set('req_body', JSON.stringify(users));

Вход в полноэкранный режим Выход из полноэкранного режима

В этом скрипте перед запросом я использовал динамические переменные для создания объектов для десяти пользователей со случайными именами, широтами и долготами. Затем эти объекты помещаются в массив и устанавливаются в тело запроса с помощью переменной коллекции и сериализации JSON. После отправки этого запроса я могу получить случайных пользователей:


Ответ, включающий случайных пользователей из запроса Postman Echo Post

Теперь пришло время для визуализации. На вкладке Test я использовал шаблон из примера Earthquake и изменил пару интересных моментов:

var response = pm.response.json().data;
let parsedData = [];

//data parsing
for (let users of response){
    let tempEntry = {};
    tempEntry.name = users.name;
    tempEntry.lat = users.latitude;
    tempEntry.long = users.longitude;
    tempEntry.circleSize = 6;
    tempEntry.color = "#F09D51";
    parsedData.push(tempEntry);
}
// visualize 
pm.visualizer.set(template, {
    data: parsedData,
    title: "Map of Random Users"
} ); 

Войти в полноэкранный режим Выход из полноэкранного режима

Данные ответа Echo API разбираются для каждого из пользователей, имя, широта, долгота, размер и цвет круга для каждой точки данных. Затем метод pm.visualizer.set() используется для визуализации разобранных данных, а заголовок карты возвращается из echo API. Вот что мы получаем:


Визуализация случайных пользователей

Вуаля, теория сработала! Это доказало, что с некоторыми координатами долготы и широты я могу использовать этот визуализатор для создания карты случайных пользователей. Это будет мой шаблон для визуализации, но теперь пришло время поработать с реальными данными пользователей.

Выбор API

Получить данные о реальных пользователях может быть непросто. Мне нужно было найти данные о долготе и широте для всей моей команды, поэтому в качестве отправной точки я решил использовать данные об их местоположении из их профилей в Twitter.

API Twitter — это действительно мощный API. Чтобы получить данные пользователя по имени пользователя, я специально использовал конечную точку Twitter API user by username для получения данных о местоположении отдельного пользователя и Twitter API User by Usernames для получения данных о местоположении нескольких пользователей. В Postman параметры запроса для user.fields используются для получения всевозможных данных из Twitter, таких как:

Created_at,description,entities,id,location,name,pinned_tweet_id,profile_image_url,protected,url,username,verified,withheld

Войти в полноэкранный режим Выйти из полноэкранного режима

Этот запрос форкнут из коллекции Twitter API v2 Postman Collection, которая позволяет любому получить доступ к широкому множеству конечных точек Twitter с соответствующей авторизацией из Twitter Developer Dashboard.

В моем случае я использовал свой Twitter-аккаунт @poojamakes, чтобы получить данные о своем местоположении — Вашингтон, округ Колумбия.


Запрос Twitter API V2 «Пользователь по имени пользователя

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

API PositionStack идеально подошел, поскольку он обеспечивает точное прямое и обратное геокодирование, охватывающее более 2 миллиардов мест и адресов по всему миру. Чтобы использовать этот API, вам необходимо получить API-ключ от PositionStack, нажав на Get Free API Key и выбрав бесплатный вариант для личного использования.

В данном сценарии я использовал конечную точку Forward Geocoding, чтобы сделать запрос прямого геокодирования, используя конечную точку API forward и указав параметр query с местоположением из Twitter.

Результаты API:


Пример конечной точки геокодирования PositonStack Forward Geocoding

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

Я решил проявить немного изобретательности и также получить данные о погоде для каждого члена команды с помощью Open Weather API, используя конечную точку Current Weather Data, которая позволяет получить текущие данные о погоде для любого места на Земле, включая более 200 000 городов, используя географические координаты (lat, lon).

На данный момент у меня есть все части головоломки:

  • Данные о местоположении пользователя из Twitter User Look Up APIs
  • Данные о долготе и широте из API PositionStack
  • Данные о погоде из Open Weather API
  • Визуализация карты с помощью Postman Echo

Теперь пришло время создать один рабочий процесс (или, может быть, много), чтобы собрать все эти части вместе.

Построение рабочих процессов

Во время работы над этим проектом я понял одну вещь: существует множество различных способов построения рабочих процессов запросов с помощью Postman. В моем случае я нашел три конкретных способа, о которых я расскажу подробнее в своей предстоящей статье в блоге. Однако общим для всех этих рабочих процессов является возможность создавать, устанавливать и разбирать объекты данных в каждом запросе с помощью сериализации. Мой коллега Ян Дуглас написал замечательную статью в блоге на эту тему, в которой рассказывает об идее «сериализации» данных для хранения и преобразования сложных типов данных при записи и чтении из памяти.

В данном случае я храню эти данные в переменных окружения объекта. Переменные вообще необходимы при работе с несколькими API и запросами. В этом сценарии я использовал переменную среды для задания всех имен пользователей Twitter, которые я буду использовать в API Twitter для получения данных о местоположении и имени каждого пользователя. Затем я смог создать объект с этими данными с помощью pm.environment.set() и установить эти сериализованные данные в строку с помощью JSON.stringify() в другую переменную среды для использования в параметре запроса для API PositionStack, чтобы получить долготу и широту каждого пользователя.

let response = pm.response.json();
// building users object 
let obj= { 
     name : response.data.name,
     location:response.data.location,
     latitude: null,
     longitude: null
}
pm.environment.set("user-object", JSON.stringify(obj));
Вход в полноэкранный режим Выход из полноэкранного режима

Изначально эти данные задаются как null, но по мере прохождения данных через другой API и их десериализации и разбора с помощью JSON.parse(), в каждый запрос можно добавлять все больше и больше данных.

var dataOut = pm.response.json().data[0];
let lat = dataOut.latitude;
let long = dataOut.longitude;

//add long and lat from object
var userObj = JSON.parse(pm.environment.get("user-object"));
userObj.latitude = lat
userObj.longitude = long

// set lat and long to main object
pm.environment.set("user-object", JSON.stringify(userObj));
Вход в полноэкранный режим Выход из полноэкранного режима

Мы получаем данные о долготе и широте из ответа API. Затем разбирается исходная переменная окружения, данные добавляются в объект и, наконец, снова устанавливаются с помощью pm.environment.set() для использования в другом запросе.

Использование этих методов в качестве модели для каждого сценария дает нам общий рабочий процесс:

  1. Получить местоположение пользователя из API Twitter.
  2. Преобразовать местоположение в долготу и широту.
  3. Использовать долготу и широту для получения данных о погоде для каждого пользователя на основе его местоположения.
  4. Визуализируйте все данные на карте.

Вот визуальный обзор всего этого рабочего процесса. Последний POST-запрос использует Postman Echo API, который заменяет случайные данные реальными данными для каждого пользователя из Twitter, PositionStack и Open Weather API:


Рабочий процесс API

Создание собственных командных визуализаций

В целом, эта коллекция была создана для того, чтобы продемонстрировать магию универсальности Postman. Просто зная основы работы с переменными, объектами, сериализацией и визуализациями, вы сможете пройти долгий путь.

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

Если вам интересно поиграть с этой коллекцией и визуализировать своих собственных членов команды по всему миру, не забудьте сделать вилку моей коллекции.


На карту нанесены семь членов команды разработчиков Postman: @iandouglas736, @poojamakes, @DevRelSean, @arlemi, @jansche, @PetuniaGray, @DevRelKev.

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

Чтобы начать работу с этой коллекцией:

  1. Создайте эту коллекцию в своем рабочем пространстве.
  2. Получите токен пользователя Twitter и добавьте bearer_token к текущему значению в переменной коллекции.
  3. Получите ключ API PositionStack и добавьте api-access-key к текущему значению в переменной коллекции.
  4. Получите ключ API Open Weather и добавьте weather_api_key к текущему значению в переменной коллекции.
  5. Используйте бегунок коллекции для выполнения отдельных запросов Postman и захвата всех объектов в качестве переменных окружения для каждого пользователя.

Проверьте визуализацию в запросе Postmanauts - Visualize во всех папках.

The post Визуализация глобально распределенной команды с помощью нескольких API appeared first on Postman Blog.

Оцените статью
Procodings.ru
Добавить комментарий