api2app — быстрое создание графического интерфейса для API
Простой 3 мин Usability *Визуализация данных * Обзор
Хочу рассказать о своём небольшом проекте с открытым исходным кодом, который создал для своих нужд. Возможно, кому-то он тоже будет полезен или найдутся люди, желающие поучаствовать в его развитии.
При помощи api2app можно быстро создать графический интерфейс для API. Его можно использовать для тестирования или демонстрации работы вашего API. Созданным приложением можно поделиться со всеми желающими или использовать по приватной ссылке.
Пример простого приложения, созданного в api2app.
Приведу пример как можно визуализировать данные от измерительного датчика.
Есть API: https://www.mathworks.com/help/thingspeak/readdata.html
Добавление информации об API
Захожу на сайт и в разделе «API» нажимаю кнопку «Добавить новый API».
Вставляю URL и заполняю поля с названиями и значениями параметров из документации.
Добавление информации об API
Нажав на кнопку «Тест», вижу данные, которые приходят от сервера api.thingspeak.com. Сохраняю все данные. Пришло время создать приложение для удобного управления и визуализации.
Создание приложения
Перехожу в раздел «Приложения» -> «Мои приложения», нажимаю кнопку «Создать новое приложение».
Для вывода данных датчика мне нужно указать временной период. Для этого добавляю элемент «Календарь».
Добавление элемента ввода
Заполняю параметры элемента. «Начальная дата периода» — это предыдущий день, поэтому в поле «Смещение в днях для значения по умолчанию» указываю значение «-1».
Параметры элемента «Начальная дата периода»
Для привязки этого поля к API нажимаю кнопку «Действие ввода».
Создание приложения
В появившемся окошке выбираю нужное API и указываю поле, к которому будет привязан элемент ввода — это поле параметра «start».
Действие ввода для поля «Начальная дата периода»
Добавляю второй элемент с календарём — «Конечная дата периода». Для него смещение нулевое (текущий день). Так же, как для предыдущего элемента, включаю опцию «Использовать значение по умолчанию». Указываю действие ввода — параметр «end».
API даёт возможность получать средние значения за день при использовании параметра «average» со значением «daily», поэтому добавляю переключатель с названием «Показывать только среднесуточные значения».
Параметры переключателя «Показывать только среднесуточные значения»
Для этого переключателя выбираю действие ввода — параметр API «average».
Далее добавляю кнопку «Смотреть данные», по клику на которую будет отправляться запрос на сервер.
Действие ввода для кнопки будет — «Отправить».
Действие ввода для кнопки
Теперь добавляю элемент «Линейный график». Например, я хочу выводить значения датчика измерения загрязнения воздуха — PM2.5. По оси X будет дата и время — поле «created_at», по оси Y — значение из поля «field3» (значение конкретного датчика).
Данные, которые возвращает API
Заполняю параметры элемента графика:
Имя поля для оси X — «created_at»
Имя поля для оси Y — «field3»
«Ось X — дата» — включено
Формат даты — «MMM DD, HH:mm»
Название поля — «Уровень загрязнения воздуха — PM2.5, мкг/м3»
Параметры графика
График может служить элементом ввода, по клику на значение графика можно отправлять запрос и выводить дополнительную информацию, но в данном случае я хочу использовать график только для вывода значений. Поэтому нажимаю кнопку «Действие вывода» и в списке полей выбираю «feeds» (ключ массива с данными).
Действие вывода для графика
На этом моё приложение готово. Я могу протестировать его, используя переключатель «Предпросмотр», и сохранить.
В итоге у меня получилось такое приложение:
Полученный графический интерфейс для API
Техническая информация
На клиентской части я использую фреймворк Angular (сейчас версия 16.2). На стороне сервера используется python-фреймворк — Django (сейчас версия 4.1) с базой данных MySQL.
Если у вас возникнут новые идеи или найдутся баги, можно создавать задачи на GitHub:
https://github.com/andchir/api2app-frontend
Теги:
- api2app
Хабы:
- Usability
- Визуализация данных
Если эта публикация вас вдохновила и вы хотите поддержать автора — не стесняйтесь нажать на кнопку Задонатить
