Введение

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

Понимание визуализатора Postman

Визуализатор Postman позволяет разработчикам создавать собственные визуализации данных ответов API, что позволяет им лучше понимать и передавать сложные данные. Используя JavaScript и HTML, разработчики могут создавать визуализации, начиная от простых диаграмм и заканчивая сложными интерактивными элементами.

К основным функциям Postman’s Visualizer относятся:

  • Возможность визуализировать данные с помощью HTML, CSS и JavaScript.
  • Поддержка различных библиотек диаграмм, таких как Chart.js, D3.js и Google Charts.
  • Простая интеграция с тестовыми сценариями Postman.

Начало работы с визуализатором Postman

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

Шаг 1. Сделайте запрос API. В этом примере мы будем использовать простой общедоступный API для получения списка пользователей. Импортируйте следующий запрос API в Postman:

GET https://jsonplaceholder.typicode.com/users

Шаг 2. Добавьте тестовый сценарий. На вкладке «Тесты» вашего запроса добавьте следующий код, чтобы включить визуализатор:

pm.visualizer.set(`
    <html>
        <head>
            <style>
                // Add your CSS styles here
            </style>
        </head>
        <body>
            // Add your HTML and JavaScript code here
        </body>
    </html>
`);

Создание простой гистограммы с помощью Chart.js

Чтобы создать гистограмму, отображающую количество пользователей в компании, мы будем использовать библиотеку Chart.js. Сначала добавьте ссылку CDN для Chart.js в заголовок вашего HTML-кода в скрипте визуализатора:

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

Затем создайте элемент холста в теле вашего HTML-кода:

<canvas id="usersChart"></canvas>

Теперь измените свой тестовый сценарий, чтобы проанализировать ответ API и извлечь необходимые данные. Затем создайте новый экземпляр Chart.js с данными и отобразите его в визуализаторе:

const jsonData = pm.response.json();
const companyNames = jsonData.map(user => user.company.name);
const userCounts = {};

companyNames.forEach(company => {
    if (userCounts[company]) {
        userCounts[company]++;
    } else {
        userCounts[company] = 1;
    }
});

const chartData = {
    labels: Object.keys(userCounts),
    datasets: [{
        label: 'Users per Company',
        data: Object.values(userCounts),
        backgroundColor: 'rgba(75, 192, 192, 0.2)',
        borderColor: 'rgba(75, 192, 192, 1)',
        borderWidth: 1
    }]
};

pm.visualizer.set(`
    <html>
        <head>
            <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
        </head>
        <body>
            <canvas id="usersChart"></canvas>
            <script>
                const ctx = document.getElementById('usersChart').getContext('2d');
                const chart = new Chart(ctx, {
                    type: 'bar',
                    data: chartData,
                    options: {
                        scales: {
                            y: {
                                beginAtZero: true
                            }
                        }
                    }
                });
            </script>
        </body>
    </html>
`, { jsonData, chartData });

Просмотр вашей визуализации

Чтобы просмотреть визуализацию, отправьте запрос API в Postman. Получив ответ, нажмите на вкладку «Визуализация» рядом с вкладкой «Красиво» в разделе ответов. Теперь вы должны увидеть гистограмму, отображающую количество пользователей в компании.

Заключение

Postman’s Visualizer — это мощный инструмент для разработчиков, позволяющий создавать интерактивные визуализации данных ответов API. Благодаря возможности настраивать визуализацию с помощью HTML, CSS и JavaScript разработчики могут создавать убедительные представления данных, помогающие принимать решения и передавать сложную информацию. Следуя этому пошаговому руководству, вы теперь должны быть готовы раскрыть всю мощь визуального представления данных с помощью Postman’s Visualizer.

  1. Официальная документация Postman Visualizer
  2. Учебный центр почтальона
  3. Сообщество почтальонов

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