# Создание PWA и подключение таблиц Метабот
PWA — веб-приложение, которое можно установить на устройство. Интерфейс можно сделать на React, а данные сохранять в кастомных таблицах Метабот через API.
### Создать приложение
Для небольшого приложения подойдёт React с Vite. Создать проект можно командой:
```
npm create vite@latest my-pwa -- --template react-ts
```
### Добавить PWA
Для Vite можно использовать vite-plugin-pwa. В настройках указать название приложения, иконки 192×192 и 512×512, стартовый адрес и режим отображения standalone. Настроить service worker для кеширования файлов приложения и работы без сети.
Разместить приложение на хостинге с HTTPS. Проверить установку на телефон, запуск с иконки и обновление приложения. Запись в Метабот требует подключения к интернету; сохранение и повторную отправку данных без сети нужно реализовывать отдельно.
Документация: [подключение PWA к Vite](https://vite-pwa-org.netlify.app/guide/), [основы PWA](https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps).
## Создать таблицу в Метабот
В нужном боте открыть «Таблицы», нажать «Создать» и указать техническое имя таблицы, например bmi.
В разделе «Структура» добавить поля и выбрать их типы. Имена таблиц и полей задаются строчными латинскими буквами, цифрами и подчёркиваниями. После настройки нажать «Обновить все поля в БД».
Названия полей в отправляемом объекте data должны совпадать с техническими именами полей таблицы.
Документация: [кастомные таблицы](https://docs.metabot24.ru/books/07-kastomnye-tablicy/page/kastomnye-tablicy).
## 4. Создать API-пользователя
В разделе «Пользователи бизнеса» создать пользователя, включить «Пользователь API», указать имя, роль и доступ к нужному боту. Нажать «Сгенерировать 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](https://docs.metabot24.ru/books/08-integracii-i-api/page/konstruktor-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), иначе могут остаться старые файлы, которые будут мешать работе сайта