Web Apps: Новая функция Telegram
Web Apps – это функция Telegram, позволяющая встраивать приложения прямо в бота. Веб-приложение может быть страницей, интернет-магазином и т.д. API позволяет настраивать взаимодействие кнопок приложения с ботом.
Создание веб-приложения с использованием библиотеки iogram
Для создания веб-приложения используется библиотека iogram.
Отслеживание команды /start и создание кнопки
Отследим команду /start. При вводе этой команды покажем пользователю кнопку, открывающую веб-приложение. Используем обработчик для команды /start:
@dp.message_handler(commands=['start'])
async def start(message: types.Message):
markup = types.ReplyKeyboardMarkup()
button = types.KeyboardButton(text='Открыть веб-страницу', web_app=types.WebAppInfo(url='https://it-proger.com'))
markup.add(button)
await message.answer('Привет, мой друг!', reply_markup=markup)Функция start принимает объект message и создаёт кнопку с помощью types.ReplyKeyboardMarkup. types.WebAppInfo указывает URL веб-приложения. Изначально используется https://it-proger.com, позже его заменят.
Создание и размещение HTML-страницы
Создадим HTML-файл (например, shop.html) с заголовком, изображением, текстом и кнопкой «Купить». Для отображения страницы в веб-приложении её необходимо выгрузить на удалённый сервер (локальный сервер не подходит). Можно использовать собственный веб-сайт или GitHub. В примере файл размещён на it-proger.com. Обновим URL в коде Python:
button = types.KeyboardButton(text='Открыть веб-страницу', web_app=types.WebAppInfo(url='https://it-proger.com/telegram.html'))Поддержка Web Apps и стилизация CSS
Для поддержки Web Apps добавим скрипт из документации перед закрывающим тегом <body>. В примере стили CSS прописаны в HTML-файле для краткости, но лучше создать отдельный CSS-файл. Используем переменные из документации для настройки цветов под светлую/тёмную темы Telegram.
Взаимодействие с API Telegram и JavaScript
Добавим в HTML форму с полями для имени, email и телефона, а также кнопками «Купить» и «Оформить». Добавим JavaScript-код для обработки событий. Создадим объект tg для работы с API Telegram:
let tg = new TelegramWebApps();При нажатии на «Купить» покажем форму, а при нажатии на «Оформить» отправим данные в бот с помощью tg.sendData(). Для работы с данными пользователя используем tg.initDataUnsafe.user. Обработка ошибок включает проверку длины полей и отображение сообщений об ошибках.
Обработка данных в боте
Добавим в Python-код декоратор для обработки данных из веб-приложения:
@dp.message_handler(content_types=['web_app_data'])
async def web_app_data(message: types.Message):
# ... обработка данных ...Обработчик получит данные из message.web_app_data.data, преобразует их в JSON-объект и выведет нужные значения.
Теперь можно добавлять веб-приложения в Telegram-бот, используя HTML, CSS и JavaScript для создания интерфейса и обработки данных, передавая эти данные обратно в бот.