Приложения
Приложение — инструмент на весь экран со своей страницей на сайте: канбан-доска, конвертер картинок, таблица, дашборд. Код приложения лежит в одном фрейме, страница задает ему адрес, заголовок и SEO-поля, а весь код выполняет браузер посетителя. Восемь готовых приложений собраны в демо, их исходники лежат в репозитории onpress-docs.
Для AI-агента приложение — обычный фрейм и обычная страница. Агент ставит его тремя запросами к API, меняет тексты и цвета правкой файлов фрейма и дает ему данные сайта через /data, поэтому серверный код и отдельный хостинг приложению не нужны.
Во всех примерах API — https://onpress.pro/api/v2, SITE — id сайта (SITE_ID), OP_TOKEN — токен op_XXXX. Эндпоинты фреймов и их файлов — в справочнике «Фреймы», публикация страницы — в справочнике «Страницы».
Зачем они нужны
Допустим, команде нужна доска задач. Агент ставит канбан из демо на страницу со статусом private, и доску видят только администраторы сайта.
Другой пример — SEO-страница. Конвертер в WebP на адресе /webp-converter/ решает задачу человека, который ищет «конвертер в webp», прямо на странице, и такая страница приводит поисковый трафик.
А если нужен дашборд, агент забирает цифры из внешнего сервиса, записывает их в данные сайта, и приложение выводит их графиками.
Как устроено приложение
Приложение собрано из фрейма, его файлов и страницы. Фрейм не печатает шапку и подвал сайта и отдает приложению весь экран, а текст страницы приложение выводит у себя, например в приветственном окне.
| Часть | Где лежит | Что делает |
|---|---|---|
| разметка | фрейм, например demo-kanban | HTML приложения; блок <!-- onpress/content /--> выводит в нем текст страницы |
| стили и скрипт | файлы фрейма style.css и script.js | OnPress ставит стили в <head>, а скрипт — перед </body> |
| страница | свойство frame в POST /pages/markdown | адрес, H1, seo_title и seo_description |
| библиотеки | CDN: jsDelivr, unpkg, cdnjs | React, SortableJS, tesseract.js и другие, с фиксированной версией |
| данные посетителя | localStorage браузера | доска, таблица, история распознаваний |
У фрейма до 16 файлов, каждый до 512 КБ, а разметка — до 2 МБ. Комментарии в разметке и файлах API отклоняет кодом 422 comments_not_allowed, поэтому код приложения пишите без них.
Поставить из репозитория
Скрипт deploy.py из репозитория onpress-docs ставит любое демо на ваш сайт. Он создает фрейм demo-<имя> запросом POST /frames, загружает его стили и скрипт запросами PUT /frames/{ref}/files и публикует page.md запросом POST /pages/markdown с этим фреймом. Например, канбан на адресе /board/:
git clone https://github.com/egmalt/onpress-docs.git && cd onpress-docs
export ONPRESS_TOKEN=op_XXXX ONPRESS_SITE=SITE_ID
python3 deploy.py kanban --dry-run
python3 deploy.py kanban --url /board/ --back-url /--dry-run проверяет разметку и файлы и ничего не записывает. --back-url задает, куда ведут кнопки «Назад» приложения, --draft публикует страницу черновиком. Родительские страницы адреса из --url должны уже существовать. Запросы curl для тех же трех шагов — в README репозитория.
Что дальше
Закрытый доступ рассказывает, как закрыть страницу приложения или весь сайт от посторонних. Данные приложения — где приложение держит данные и как дать ему данные сайта. Внешние данные — как приложение получает цифры из чужих API.
Вопросы и ответы
Чем приложение отличается от фрейма?
Только назначением. Приложение — фрейм, который занимает весь экран и работает как инструмент, поэтому к нему подходят все эндпоинты и правила фреймов.
Как поменять демо под свой сайт?
Тексты интерфейса, цвета и пример данных лежат в frame.html, style.css и script.js. Поправьте их в своей копии репозитория и запустите deploy.py снова, он заменит разметку и файлы фрейма.
Где приложение хранит данные посетителя?
В localStorage его браузера. Другой браузер или другое устройство этих данных не видит, подробно — на странице «Данные приложения».