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

Создание PWA и подключение таблиц Метабот

PWA — веб-приложение, которое можно установить на устройство. Интерфейс можно сделать на React, а данные сохранять в кастомных таблицах Метабот через API.

Создать приложение

Для небольшого приложения подойдёт React с Vite. Создать проект можно командой:

npm create vite@latest my-pwa -- --template react-ts
После создания проекта установить зависимости и разработать интерфейс: страницы, формы, расчёты и обработку отправки данных.
Документация: React, создание проекта Vite.

Добавить PWA

Для Vite можно использовать vite-plugin-pwa. В настройках указать название приложения, иконки 192×192 и 512×512, стартовый адрес и режим отображения standalone. Настроить service worker для кеширования файлов приложения и работы без сети.

Разместить приложение на хостинге с HTTPS. Проверить установку на телефон, запуск с иконки и обновление приложения. Запись в Метабот требует подключения к интернету; сохранение и повторную отправку данных без сети нужно реализовывать отдельно.

Документация: подключение PWA к Vite, основы PWA.

Создать таблицу в Метабот

В нужном боте открыть «Таблицы», нажать «Создать» и указать техническое имя таблицы, например bmi.

В разделе «Структура» добавить поля и выбрать их типы. Имена таблиц и полей задаются строчными латинскими буквами, цифрами и подчёркиваниями. После настройки нажать «Обновить все поля в БД».

Названия полей в отправляемом объекте data должны совпадать с техническими именами полей таблицы.

Документация: кастомные таблицы.

4. Создать API-пользователя

В разделе «Пользователи бизнеса» создать пользователя, включить «Пользователь API», указать имя, роль и доступ к нужному боту. Нажать «Сгенерировать API-токен» и скопировать токен.

Для авторизации запросов используется заголовок:

Authorization: Bearer <API_TOKEN>
Документация: конструктор API, раздел о генерации токена.

Настроить запись в таблицу

В настройках бота открыть «Внутреннее API» и создать активную конечную точку. Например алиас wright, метод POST, формат JSON.

Этот обработчик получает calculator, table и data, убирает начальный $ у ключей данных, проверяет таблицу по разрешённому списку и создаёт запись:

var created = table.createItem(tableName, data);

Для новой таблицы нужно добавить её техническое имя в allowedTables. Например, bmi уже есть в списке на скриншоте. Параметр calculator в этом обработчике проверяется на наличие, но отдельно в таблицу не записывается.

Адрес конечной точки: https://<адрес-платформы>/api/v1/bots/<bot_id>/call/wright

Тело запроса для обработчика со скриншота:

{ 
  "script_request_params": { 
      "calculator": "bmi", 
      "table": "bmi", 
      "data": { 
        "user_id": "123", 
        "result": 24.5 
      } 
  } 
}

user_id и result здесь — примеры: заменить их полями своей таблицы. Обёртка script_request_params нужна для доступа к этим данным через request.json в обработчике Метабот.

Отправлять запрос методом POST с заголовками Content-Type: application/json и Authorization. В публичном PWA запрос лучше выполнять через свой сервер: API-токен хранить на сервере, чтобы он не попадал в код браузера.

Документация: вызов внутреннего API.

Проверить подключение

Отправить тестовый запрос через Postman или Swagger платформы по адресу /api/docs. Убедиться, что появилась строка в таблице и обработчик вернул сообщение «Запись успешно добавлена» с metabot_id.

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

Build и размещение на сервере (+настройка домена)

После конца разработки и всех проверок вам нужно сбилдить приложение. После билда у вас в папке dist будут файлы, которые нужно перенести на сервер. Далее есть 2 развития событий:

  1. Размещение на домене заказчика не требуется. Подбираем сервер и заливаем в папку forms/ платформы в папку проекта (допустим forms/testsite) все файлы из dist
  2. Если требуется размещение на домене заказчика. Нужно подобрать сервер, где не установлена платформа или самый свободный. Создать в var/www/ папку проекта. Залить туда файлы из dist. Настроить nginx на домен который предоставил заказчик. После этого передать заказчику IP сервера и попросить создать A/AAA запись в DNS. Подождать пока обновятся DNS сервера (это может занять от 5 минут до 3 суток), нужно переодически проверять доступность сайта по домену. Далее при необходимости получить сертефикат. Сертефикат требуется для https:// соединения (без него будет http:// и вылазить предупреждение о том, что сайт не безопасен)

PS: для того чтобы залить новый билд требуется удалить все файлы в папке проекта и залить новые из билда(dist), иначе могут остаться старые файлы, которые будут мешать работе сайта

Нет комментариев
Наверх