Недавно я столкнулся с задачей визуализации данных от датчиков (температура, влажность, частицы PM2.5). Для решения подобных задач существует несколько бесплатных инструментов, например, Grafana + InfluxDB. Найденные мной решения показались слишком сложными и требовательными к ресурсам сервера, поэтому я решил "изобрести свой велосипед", а точнее создать шаблон для Shopker.

Shopker - бесплатный движок для создания сайта, который использует PHP фреймворк Symfony (5+), JS фреймворк Angular (11+) и базу данных MongoDB (4+). Сайт проекта: https://shopker.org/.

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

1. Установка Shopker

Этот пункт я не буду расписывать подробно, т.к. всё есть в документации. Рекомендую использовать Bash скрипт для установки на VDS сервере. В разделе "Уроки" есть видео.

2. Установка шаблона

Скачиваем shopker-templates.zip здесь. Или можно на своем сервере клонировать репозиторий и воспользоваться командой npm install

Распаковываем архив и по FTP загружаем папку "iot" в папку "/templates/", а папку "/assets/iot/" в "/public/", чтобы получилось "/public/assets/iot/".

Открываем админку, переходим в раздел "Настройки". В пункте "Тема шаблонов" вводим название новой темы - iot. Сохраняем.

3. Создание типа контента и коллекции в БД

Переходим в раздел "Каталог" -> "Типы контента", нажимаем кнопку "Добавить".

В поле "Заголовок" вводим "Датчики", системное имя - "sensors", коллекция - "sensors". Активируем чекбокс "Разрешено создание пользователями". Это нужно, чтобы иметь возможность сохранять новые данные через API. Далее создаем первое поле - "Температура, С". Системное имя - "temperature", тип ввода и тип вывода - "Число", группа - "Основное", чекбоксы - "Показывать в таблице", "Показывать на странице" и "Показывать в списке".

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

4. Создание категории

Переходим в раздел "Каталог", в выпадающем меню нажимаем кнопку "Добавить новую категорию". Заголовок - "Датчики", системное имя - "sensors", тип контента - "Датчики".

Далее создаем дочернюю категорию "Устройство #1" (название Вашего устройства). В эту категорию будем сохранять данные от датчиков. Запомните ID этой категории, оно пригодится.

5. Отправка данных и сохранение

Для использования API нам нужен токен. Его можно создать через запрос, используя свой логин и пароль, а можно в разделе "Пользователи".

Вот пример использования API для Bash:

curl -X POST \
"http://your-domain.com/api/ru/user_content/19" \
-H "Content-Type: application/json" \
-H "Accept: application/json" \
-H "X-AUTH-TOKEN: xxxxx" \
-d '{"temperature":23,"humidity":35}'

Если используете ESP2866 или подобный модуль wi-fi, то функция отправки данных будет примерно такая:

// Shopker settings
char shopkerApiUrl[45] = "http://your-domain.com/api/ru/user_content/19";// 19 - ID категории
char shopkerApiKey[121] = "c5f3a652f67c5d31a5cd39ec287bd3ba36e1b7737dc9e26ae697c4d467c8638a1f1bd62906b00f4a1f83f1214fad20fe3fbe49d135f263c10d64b137";// API токен
...

void sendDataToShopker(float temp, float hum, int pm2, int pm10) {
  Serial.println("API URL: " + String(shopkerApiUrl));
  
  String jsonString = "{";
  jsonString += "\"temperature\":" + String(temp) + ", ";
  jsonString += "\"humidity\":" + String(hum) + ", ";
  jsonString += "\"pm25\":" + String(pm2) + ", ";
  jsonString += "\"pm10\":" + String(pm10);
  jsonString += "}";

  Serial.println(jsonString);

  HTTPClient http;
  http.begin(shopkerApiUrl);
  http.addHeader("Content-Type", "application/json");
  http.addHeader("Accept", "application/json");
  http.addHeader("Content-Length", String(jsonString.length()));
  http.addHeader("X-AUTH-TOKEN", String(shopkerApiKey));
  int httpCode = http.POST(jsonString);
  String response = http.getString();
  Serial.println("Response code: " + String(httpCode));
  Serial.println("Response: " + response);
  http.end();
}

6. Вывод значений на графиках

Чтобы по умолчанию выводились данные с конца (последняя страница), нужно в настройках указать отрицательное число в параметре "Число элементов на странице по умолчанию" (например "-50"), а сортировку указать - "id_asc" (по порядку по ID).

Технические подробности

Для вывода графиков на главной станице используется Twig-функция "contentList":

{{ contentList('sensor_data', 'sensors', {"isActive": true, parentId: 19}, {"_id": "asc"}, -50) }}

Подробнее о ней в документации: https://shopker.org/documentation/content-display

"sensor_data" - это название шаблона, который находится в папке "/templates/iot/catalog" - "sensor_data.html.twig". В этот шаблон передается тип контента, из которого можно взять массив полей, которые отмечены для показа:

{% set fieldsOnPage = contentType.getFieldsByFlag('showOnPage') %}

Для вывода графиков используется JS-библиотека Plotly.

При желании можно выводить данные только для зарегистрированных пользователей:

{% if is_granted('ROLE_USER') %}
    Тут контент для зарегистрированных и авторизованных.
{% endif %}

Подробнее о шаблонизаторе.

Использование Shopker для IoT