Вы просматриваете старую версию данной страницы. Смотрите текущую версию.

Сравнить с текущим просмотр истории страницы

« Предыдущий Версия 3 Текущий »

Данная статья актуальна для 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

  • Нет меток