Урок №11. Веб-приложение в Telegram боте

В этом уроке мы добавим полноценное веб-приложение в нашего Telegram бота.

Создание веб-приложения в боте.

Давайте сначала отслеживать команду /start. Именно при команде /start мы будем показывать пользователю кнопку, по нажатию на которую откроется веб-приложение. Чтобы отследить команду /start, мы используем функцию message_handler и указываем, что обрабатываем команду /start. Затем мы создаем асинхронную функцию, например, start, и здесь принимаем один параметр message с типом message. Далее создаем кнопку, создавая объект markup, затем обращаясь к types и вызывая ReplyKeyboardMarkup(). Затем добавляем нашу кнопку с помощью markup.add и types.KeyboardButton. Пишем текст нашей кнопки, например, 'Веб-приложение'. Здесь мы также указываем параметр web_app, передавая ему WebAppInfo в качестве значения. Для подключения этого нам нужно обратиться к библиотеке aiogram.types.web_app_info и импортировать из нее WebAppInfo. В WebAppInfo нужно указать адрес сайта, который откроется при нажатии на кнопку. Мы создадим наш сайт позже, а пока укажем ссылку на канал Дзен.

Урок №11. Веб-приложение в Telegram боте
Урок №11. Веб-приложение в Telegram боте

При нажатии на кнопку открывается мини-веб-приложение, на котором можно нажимать кнопки. Если на сайте есть система оплаты, мы также можем здесь произвести оплату.

Урок №11. Веб-приложение в Telegram боте

Создание своей страницы.

Теперь создадим свою собственную веб-страницу, которая откроется при нажатии на кнопку. Для этого внутри проекта нужно создать HTML-файл, который мы попробуем отобразить в веб-приложении в Telegram боте. Внутри HTML-файла прописываем стандартную HTML-разметку и основное содержимое нашей страницы(данную разметку можно найти в моем Telegram канале:https://t.me/pythotelegram).

Урок №11. Веб-приложение в Telegram боте

Затем, чтобы наша страница отображалась в веб-приложении, нам нужно выгрузить эту страницу на локальный сервер. Если у вас уже есть свой веб-сайт, вы можете добавить файл в папку вашего сайта и просто указать ссылку на этот файл. Если же у вас, как в моем случае, нет своего веб-сайта, мы воспользуемся GitHub. Регистрируемся на сайте, затем нажимаем на свою иконку и выбираем "Your repositories".

Урок №11. Веб-приложение в Telegram боте

Вводим название нашего сайта, затем через точку указываем "github.io". Ставим галочку на "Add a README file" и создаем проект.

Урок №11. Веб-приложение в Telegram боте

После создания нажимаем "Add file" -> "Upload files" и добавляем наш HTML-файл. Затем он появляется в нашем проекте.

Урок №11. Веб-приложение в Telegram боте

Далее заходим в папку "README.md", нажимаем "Edit this file" и добавляем наш HTML-код.

Урок №11. Веб-приложение в Telegram боте

Сохраняем файл. Затем переходим в настройки и нажимаем "Pages". В пункте "Branch" указываем направление, где лежат наши файлы, и нажимаем "Save".

Урок №11. Веб-приложение в Telegram боте

Теперь GitHub отправит ссылку на наш сайт, по которой откроется наша веб-страница.

Урок №11. Веб-приложение в Telegram боте

Копируем ссылку на наш сайт и вставляем ее в Python-файл. Затем запускаем наш проект и заходим в Telegram бота. При нажатии на кнопку откроется наша веб-страница.

Урок №11. Веб-приложение в Telegram боте

В следующем уроке мы сделаем функциональную часть веб-приложения, обработаем данные и передадим их боту.

Стиль веб-приложения я сделаю в telegram канале.

Также вы можете подписаться на telegram канал, где будут выкладываться все коды с моих уроков, сами уроки, а также HTML-разметка: https://t.me/pythotelegram.А также после каждого урока вы можете заходить на моего telegram бота, чтобы посмотреть результат работы, после каждого урока: http://t.me/pythonte1egram_bot.

88
Начать дискуссию
⭐️ Ждет ли нас доллар по 50?
⭐️ Ждет ли нас доллар по 50?

Все знают, что долгосрочно рубль теряет в цене. За последние 20 лет, в среднем, доллар рос на 6% в год. Но многие заметят, что девальвация происходит всплесками. 1998, 1999, 2014. А в среднем 6% 😉

1515
1212
реклама
разместить
Купил мопед и сдаю его в Таиланде, а сам живу в России. И вот что из этого вышло…
***
1111
22
11
11
Продолжение эйфории. Вот и брокеры начали переобуваться
Продолжение эйфории. Вот и брокеры начали переобуваться
День 1098: банки снизили ставки по рублёвым вкладам, австралийским чиновникам запретили пользоваться ПО «Лаборатории Касперского»

Собираем новости, события и мнения о рынках, банках и реакциях компаний.

Источник фото: «РИА Рейтинг»
33
11
11
11
11
11
Как увеличить прибыль без дополнительных вложений

В статье решил разобрать проблему расчета себестоимости. Оказалось, что иногда при хорошем обороте прибыль может не расти, а выгодные товары приносить убытки. Расскажу на примере моего производства.

Это мои первые шаги в мебельном бизнесе
88
22
ЕС утвердил 16 пакет санкций против России — под них попали 13 банков и восемь СМИ

А также поставки PlayStation и Xbox в страну.

Фото «РИА Новости» 
4444
3333
1212
44
11
11
Когда на Санлайт наложат санкции?
Кейс на восемь нулей 😏

Или как я помог Тимуру Тажетдинову сделать запуск на восьмизначную цифру?

Видео-отзыв Тимура Вы можете посмотреть по <a href="https://api.vc.ru/v2.8/redirect?to=https%3A%2F%2Frutube.ru%2Fvideo%2Fprivate%2F4f9845794468f54800da9edd72b5a49b%2F%3Fp%3DuGP_AWcTvjdteR20AF--7A&postId=1831875" rel="nofollow noreferrer noopener" target="_blank">ссылке на RuTube</a>. Это не просто отзыв - это 5 минутное видео наполненное инсайтами и инструментами!  
Как сделать крутой контент-план и посты за 1 час: пошаговое руководство с промтами
Как сделать крутой контент-план и посты за 1 час: пошаговое руководство с промтами
55
[]