Данная статья актуальна для frontend разработчиков, которые будут заниматься разработкой WebApp для телеграм с возможностью вернуть данные изWebApp в бота |
Webapp должен использовать протокол https. Это условие самого Telegram. Если сайт с вебапп использует http, то использовать его не выйдет. |
Пример шаблона – https://intgr.twin24.io/webapp.html, код страницы содержит комментарии для разработчиков.
Пример бота с WebApp на этом шаблоне - https://t.me/webapp_twin_sample_bot (инструкция по привязке вебаппа в боте тут)
Для того чтобы адаптировать шаблон под свои нужды, требуется только подменить вызов API с запросом списка позиций. В демонстрации шаблона можно видеть пример того, как произвольные данные из API преобразовываются в формат, требуемый шаблону.
Формат данных для списка позиций представляет собой массив объектов, каждый из которых обязательно содержит идентификатор, название и полную ссылку на изображение:
type Menu = Array<{ id: string, title: string, image: string, price: int, details: string, category: "string"}>
const menu: Menu = [
{id: "103", title: "Pizza", image: "https://images/pizza.png", price: 1000, details: "Очень вкусная пицца", category: "Пиццы"},
{id: "305", title: "Ice Cream", image: "https://images/icecream.png", price: 100, detaeils: "Вкусное мороженное", category: "Дессерты"}
] |
В ответ, в бот возвращается объект, содержащий идентификаторами выбранных позиций и их количество
type Cart = { [id: string]: number }
const cart: Cart = { "103": 2, "305": 3 } |
После адаптации шаблона под API, необходимо разместить страницу с фронтендом на хостинге, и использовать полученный URL в настройках Бота
Также доступна стилизация внешнего вида – в шаблоне используется базовый CSS, который можно менять на своё усмотрение. При этом соблюдая рекомендации Telegram для WebApp.
Документация https://core.telegram.org/bots/webapps#initializing-web-apps