Создаем бота в Telegram
В этом статье я покажу как создать Telegram бота с помощью Python, поскольку не нашел хорошей русскоязычной статьи по этой теме.
Создание бота
Бот создается с помощью BotFather через Telegram. После команды /newbot надо просто следовать инструкции.
В конце мы получаем токен для управления ботом и работы с Telegram API.
pyTelegramBotApi
Ссылки на документации всех библиотек будут в конце.
Создадим простого бота, отвечающего на команду /start , с помощью этой библиотеки:
import telebot bot = telebot.TeleBot('1408700689:AAGVqcqscWWK7DnuNHahd0w1eNklfjPEVxE') @bot.message_handler(commands=['start']) def start(message): bot.send_message(message.chat.id, 'It works!') bot.polling()pyTelegramBotApi является просто обёрткой для всего Telegram Bot API, но здесь разберутся только основные составляющие.
Взаимодействие с ботом происходит через переменную bot (токен надо вставить свой).
Декоратор @message_handler реагирует на входящие сообщение.
Message – это объект из Bot API, содержащий в себе информацию о сообщении. Полезные поля:
message.chat.id – идентификатор чата
message.from.id – идентификатор пользователя
message.text – текст сообщения
Функция send_message принимает идентификатор чата (берем его из сообщения) и текст для отправки.
Примеры функций
Отправка изображений
Можно отправлять фото из локального хранилища, но удобнее это делать по ссылке. Код аналогичен предыдущему:
@bot.message_handler(commands=['start']) def start(message): bot.send_photo(message.chat.id, photo=photo_url, caption='It works!')Замена клавиатуры
У ботов есть функция замены стандартной клавиатуры на кнопочную. Для этого у всех функций есть опциональный аргумент reply_markup:
from telebot import types @bot.message_handler(commands=['start']) def start(message): markup = types.ReplyKeyboardMarkup() buttonA = types.KeyboardButton('A') buttonB = types.KeyboardButton('B') buttonC = types.KeyboardButton('C') markup.row(buttonA, buttonB) markup.row(buttonC) bot.send_message(message.chat.id, 'It works!', reply_markup=markup)ReplyKeyboardMarkup – и есть та самая клавиатура. Метод row() создает ряд (максимум 12) из кнопок, передаваемых в качестве аргумента.
Также есть особенная клавиатура types.ReplyMarkupRemove(), которая меняет клавиатуру на стандартную.
Клавиатура для сообщений
Можно создавать клавиатуру для отдельного сообщения. Передавать его нужно так же в аргумент reply_markup:
from telebot import types @bot.message_handler(commands=['start']) def start(message): markup = types.InlineKeyboardMarkup() buttonA = types.InlineKeyboardButton('A', callback_data='a') buttonB = types.InlineKeyboardButton('B', callback_data='b') buttonC = types.InlineKeyboardButton('C', callback_data='c') markup.row(buttonA, buttonB) markup.row(buttonC) bot.send_message(message.chat.id, 'It works!', reply_markup=markup)У кнопок есть несколько режимов, в зависимости от второго аргумента. Подробнее можно прочитать в официальной документации, но я остановлюсь только на callback_data.
При нажатии на такую кнопку боту придет отдельный CallbackQuery, который нужно обрабатывать подобно сообщению:
@bot.callback_query_handler(func=lambda call: True) def handle(call): bot.send_message(call.message.chat.id, 'Data: <>'.format(str(call.data))) bot.answer_callback_query(call.id)Для обработки обязательно указать аргумент func для «отсеивания» Callback запросов.
После обработки каждого запроса нужно выполнить команду answer_callback_query, чтобы Telegram понял, что запрос обработан. В поле callback.data хранится информация из callback_data нажатой кнопки.
Изменение сообщений
У ботов есть функция изменения своих сообщений (можно использовать, чтобы сделать перелистывание страниц, например). Для этого нужно воспользоваться методом edit_message_text (edit_message_caption для картинок):
@bot.callback_query_handler(lambda call: True) def handle(call): bot.send_message(chat_id=call.message.chat.id, message_id=call.message.id, text='It works!') bot.answer_callback_query(call.id)Смысл аргументов понятен из их названия.
Flask
Если запустить бота, то через какое-то время он упадет с ошибкой Connection to api.telegram.org timed out. Чтобы это исправить нужно использовать вебхук:
from flask import Flask, request import telebot token = '1408700689:AAGVqcqscWWK7DnuNHahd0w1eNklfjPEVxE' bot = telebot.TeleBot(token) app = Flask(__name__) @bot.message_handler(commands=['start']) def start(message): bot.send_message(message.chat.id, 'It works!') @app.route("/" + token, methods=['POST']) def getMessage(): bot.process_new_updates([telebot.types.Update.de_json(request.stream.read().decode("utf-8"))]) return "!", 200 bot.remove_webhook() bot.set_webhook('https://test.com/' + token) app.run()Этот код при запуске сначала удалит вебхук, если такой был, и установит его на желаемый. Все запросы, которые приходят в функцию getMessage будут направляться в bot с помощью метода process_new_updates. Этот код уже можно использовать для запуска, например, на Heroku.
P.S. Чтобы работать с длинными диалогами, я хранил для каждого пользователя в базе данных его текущее состояние.
Чат-бот в Telegram
Создайте нового бота через @BotFather командой /newbot. Если у вас уже есть бот, получите его токен командой /token. Полученный токен нужно добавить в SendPulse.
Ваш Telegram бот подключен. Самое время настроить цепочки сообщений!
Визуальный конструктор бота
Создавайте Telegram ботов, которые информируют, консультируют и продают товары. Для этого укажите ключевые слова, в ответ на которые будут отправляться автоматические ответы.
Отправка массовых рассылок подписчикам в Telegram
Добавляйте текст, изображения, файлы и кнопки к рассылке. Когда сообщение будет готово, вы можете запланировать его отправку на нужную дату и время. После отправки смотрите статистику: сколько сообщений было доставлено и сколько подписчиков взаимодействовало с рассылкой.
Принимайте оплату
Превратите чат-бота в эффективный канал продаж для вашего бизнеса. Настройте интеграцию с платежными системами и добавляйте кнопки оплаты в цепочки сообщений бота, чтобы покупатели могли быстро и безопасно оформить заказ прямо в чате.
Подключите искусственный интеллект к своему чат-боту
Благодаря прямой интеграции с языковой моделью ChatGPT от OpenAI ваш бот может взаимодействовать с подписчиками языком живого общения.
Сегментация и управление аудиторией
Делайте рассылку по всей базе подписчиков или выборочно по группам. Отправить сообщение нужной аудитории поможет сегментация с помощью тегов и переменных.
Управляйте чат-ботами со своего смартфона
Установите приложение, чтобы оперативно отвечать на сообщения из Telegram, Instagram, WhatsApp и Facebook, работать с данными подписчиков и анализировать статистику.
Собирайте подписчиков бота в Telegram прямо на сайте
Разместите виджет на вашем сайте, и посетители смогут мгновенно подписаться на вашего бота. Если у вас есть чат-боты в нескольких мессенджерах, создавайте для них единый виджет подписки. Пусть пользователи выбирают наиболее удобный для них канал связи: Telegram, Instagram, WhatsApp и Facebook.
Зачем внедрять бота в Telegram
Большой охват аудитории
Общее число пользователей Telegram достигло 200 миллионов, отправляется в среднем 12 миллиардов сообщений каждый день.
Высокая открываемость
Процент открываемости сообщений в мессенджере достигает 80%.
Конфиденциальность данных
Telegram входит в тройку самых безопасных мессенджеров в мире.
Создавайте чат-бота в Instagram, WhatsApp и Facebook
Отправка рассылок и конструктор чат-бота для Instagram, Whatsapp и Facebook Messenger.
FAQ
�� Что такое чат-бот в Telegram?
Это программа, которая упрощает жизнь маркетологу. Ее задача — дать автоматический ответ на команду пользователя в мессенджере. Чем больше таких команд «знает» чат-бот, тем более живой и эффективной станет беседа с ним.
❓ Зачем чат-бот нужен вашему бизнесу?
Он поможет автоматизировать рутинные процессы, собрать информацию о клиентах и пополнить аудиторию бренда. Чат-бот работает 24/7 и без выходных, отвечая на часто задаваемые вопросы клиентов, помогая сделать заказ, выбрать тур и записать клиента на прием к врачу.
⚙️ Как работает чат-бот в Telegram?
Для начала нужно прописать как можно больше команд, которые может задать пользователь. Их количество определяет качество работы бота. Попадая в чат с вашим ботом, пользователь общается с ним по сценарию, который вы заранее пропишете с помощью триггеров и ключевых слов.
�� Как подключить Telegram чат-бот?
Создайте бота через @BotFather, скопируйте токен и введите его как ключ доступа в личном кабинете в SendPulse.
✔️ Как подписать пользователей на бот в Telegram?
Вы можете разместить виджет подписки на чат-бот на вашем сайте, а также добавить прямую ссылку на чат-бота в Telegram или поделиться ею в соцсетях.
�� Сколько стоит разработка чат-бота?
Вы можете заказать разработку чат-бота у программиста, начиная от $200, но стоит понимать, что его «интеллект» будет влиять на окончательную стоимость и длительность разработки. А с помощью SendPulse вы можете сами создать умного бота совершенно бесплатно и без технического бэкграунда.
✉️ Сколько сообщений можно отправлять на бесплатном тарифе?
До 10 000 сообщений в месяц, если вы планируете отправлять больше сообщений, выбирайте платный тариф.
��️ Как включить Telegram бот в свою мультиканальную стратегию?
Вариантов много: в email рассылке вы можете предложить читателю подписаться на вашего бота в Telegram, чтобы он смог первым узнать о выгодном предложении; во время общения с клиентом в мессенджере вы можете попросить его номер телефона, чтобы отправить номер ТТН или информацию о брони; выступая на конференции, достаточно будет вывести на экран и озвучить имя вашего бота, и связаться с брендом станет проще. С помощью SendPulse вы можете общаться с аудиторией через Telegram, email, SMS, Viber, web push уведомления, Facebook, Instagram и WhatsApp.
Создание telegram web apps и взаимодействие с ними в телеграм ботах
В обновлении Bot API 6.0 телеграм-боты получили много новых функций. Из них для разработчиков самая примечательная — Telegram Web Apps (Веб-приложения внутри телеграм). С этим нововведением разработчики могут подключать к своим ботам web-приложения, которые открываются в дополнительном окне, что сильно расширяет инструментарий, а, следовательно и функционал ботов в телеграм.
Приложения Telegram известны своей скоростью, плавностью и кросс-платформенным дизайном. Ваше веб-приложение в идеале должно соответствовать этим принципам.
— Все элементы должны быть отзывчивыми и спроектированы с учетом мобильной ориентации устройств.
— Интерактивные элементы должны имитировать стиль, поведение и назначение уже существующих компонентов пользовательского интерфейса.
— Все анимации должны быть плавными, в идеале 60 кадров в секунду.
— Все input и изображения должны содержать label для доступности.
— Приложение должно обеспечивать бесшовную работу, отслеживая изменение цветов темы с помощью API, и используя их соответствующим образом.
Давайте же опробуем это на практике!
Создание кнопки
Первое, что нам нужно сделать — создать кнопку запуска веб-приложения. Это можно сделать двумя способами:
1. При помощи @botfather — кнопка слева снизу
1.1. Идем в @botfather и пишем команду: /setmenubutton
1.2. Далее выбираем бота, которому нужна кнопка веб приложения
1.3. Отправляем ссылку по которой доступно наше веб-приложение
1.4. Пишем имя кнопки — будет отображаться внизу слева
Вот и все. В целом, если у вас есть адаптивный сайт и вы хотели просто добавить его в бота, тут можете остановиться.
Только при добавлении кнопки этим способом мы можем получить информацию о пользователе.
2. В коде бота — клавиатурные кнопки.
Запуск бота с inline-кнопки даёт суть тоже самое, что и предидущий вариант. Однако, запуск с keyboard button дает возможность отправлять данные из веб-приложения в бота.
Покажу на примере pytelegrambotapi — я понимаю, что это не самая популярная библиотека для написания телеграмм-ботов, но так получилось, что я пишу именно на ней. Если вы пользуетесь другой библиотекой/языком, думаю, вам не составит труда действовать по аналогии. Вы можете сразу посмотреть пример или перейти в репозиторий и посмотреть код с комментариями:
2.1. Делаем все стандартные штуки для запуска бота — импорт библиотеки, ввод токена, infinity_polling, обработчик команды start. Если вы не понимаете о чем я, вам сюда.
2.2. Создаем функцию, которая вернет нам клавиатуру с нужной кнопкой.
Для того, чтобы создать кнопку, нужно сначала создать WebAppInfo-объект внутри которого будет url на наш сайт.
def webAppKeyboard(): #создание клавиатуры с webapp кнопкой keyboard = types.ReplyKeyboardMarkup(row_width=1) #создаем клавиатуру webAppTest = types.WebAppInfo("https://telegram.mihailgok.ru") #создаем webappinfo - формат хранения url one_butt = types.KeyboardButton(text="Тестовая страница", web_app=webAppTest) #создаем кнопку типа webapp keyboard.add(one_butt) #добавляем кнопки в клавиатуру return keyboard #возвращаем клавиатуру2.3. Отправляем сообщение с нашей клавиатурой при отправке команды или любом другом действии:
bot.send_message( message.chat.id, 'Привет, я бот для проверки телеграмм webapps!)', reply_markup=webAppKeyboard()) Готово. Кнопки у нас есть.
Тут можно вообще закончить, если вы просто хотели, чтобы пользователь мог открыть ваш сайт из бота (зачем-то). Работать это будет вот так:
Работа с веб-приложением
Теперь идем в наше веб-приложение. На момент написания статьи открывается любая ссылка, даже на codepen.
Инициализация
Чтобы взаимодействовать с телеграм подключаем скрипт:
После этого нам будет доступен объект: window.Telegram.WebApp
Записываем его в переменную и начинаем нашу работу.
let tg = window.Telegram.WebApp;
Что же мы теперь можем? Не так много, как хотелось бы, но и не мало. Приложение состоит из: основной кнопки (telegram-объект) и самой страницы, которая загрузилась по ссылке. Остальные элементы telegram-интерфейса нам не доступны. Однако, доступны цвета темы пользователя:
Цвета
Они доступны в формате hex как css-переменные:
var(—tg-theme-bg-color)
var(—tg-theme-text-color)
var(—tg-theme-hint-color)
var(—tg-theme-link-color)
var(—tg-theme-button-color)
var(—tg-theme-button-text-color)
Или как объект ThemeParams в js (вместо window.Telegram.WebApp я использую переменную tg):
Но будьте осторожны, цвета — необязательный параметр, поэтому стоит проверять, есть ли они, перед тем как использовать.
Также имеется обработчик события изменения цветовой схемы:
При изменении цветовой схемы или размеров окна можно поменять что-то и в нашем веб-приложении.
Основные возможности
С цветами разобрались — теперь к другим основным параметрам:
tg.initData //получаем данные от пользователя в виде строки (работает только при запуске из меню команд бота). tg.initDataUnsafe // получаем данные от пользователя в виде объекта (работает только при запуске из меню команд бота). tg.isExpanded // возвращает true, если приложение открыто на всю высоту, false - если нет. tg.viewportHeight // вернёт ширину окна. tg.sendData(data) // отправляет данные боту в строковом виде, после чего закрывает приложение (работает только если приложение запущено с keyboard button). tg.ready() // метод позволяет отследить, когда приложение готово к отображению. tg.expand() // метод позволяет растянуть окно на всю высоту. tg.close() // метод закрывает приложение.Main button
Мы можем взаимодействовать с кнопкой внизу приложения. Изменять ее текст, цвет фона и текста, показывать/скрывать, делать активной и деактивировать:
tg.MainButton.text // текст кнопки, по умолчанию: "Continue" tg.MainButton.color // цвет текста tg.MainButton.textColor // цвет подложки tg.MainButton.isVisible // видна ли кнопка (по умолчанию false) tg.MainButton.isActive // активна ли кнопка (по умолчанию true) tg.MainButton.setText(text) // метод для задания текста tg.MainButton.onClick(callback) // метод при нажатии на кнопку tg.MainButton.show() // показать кнопку tg.MainButton.hide() // скрыть кнопку tg.MainButton.enable() // сделать активной tg.MainButton.disable() // сделать неактивной tg.MainButton.setParams(params) // задает параметры в виде объекта 
Web App User
И еще информация о пользователе, мы можем разобрать строку tg.initData или использовать tg.initDataUnsafe объект:
tg.initDataUnsafe.user.id // уникальный идентификатор пользователя tg.initDataUnsafe.user.isBot // бот ли пользователь (true/false) tg.initDataUnsafe.user.first_name // имя пользователя tg.initDataUnsafe.user.last_name // "фамилия" пользователя tg.initDataUnsafe.user.username // username пользователя tg.initDataUnsafe.user.language_code // код языка пользователяПишем веб-приложение
С этой информацией мы можем написать небольшое приложение, которое наглядно отобразит основные возможности.
1. Создадим небольшую html-основу:
Just text
Link Some little hint
2. Пропишем изменения текста основной кнопки и изменение цвета:
let tg = window.Telegram.WebApp; //получаем объект webapp телеграма tg.expand(); //расширяем на все окно tg.MainButton.text = "Changed Text"; //изменяем текст кнопки tg.MainButton.setText("Changed Text1"); //изменяем текст кнопки иначе tg.MainButton.textColor = "#F55353"; //изменяем цвет текста кнопки tg.MainButton.color = "#143F6B"; //изменяем цвет бэкграунда кнопки tg.MainButton.setParams(); //так изменяются все параметры 3. Далее повесим обработчик события на первую html-кнопку и при нажатии будем показывать/скрывать основную telegram-кнопку:
btn.addEventListener('click', function() < //вешаем событие на нажатие html-кнопки if (tg.MainButton.isVisible)< //если кнопка показана tg.MainButton.hide() //скрываем кнопку >else < //иначе tg.MainButton.show() //показываем >>);4. Еще один обработчик события на вторую html-кнопку, при нажатии которой будем активировать/деактивировать основную telegram-кнопку:
let btnED = document.getElementById("btnED"); //получаем кнопку активировать/деактивировать btnED.addEventListener('click', function()< //вешаем событие на нажатие html-кнопки if (tg.MainButton.isActive)< //если кнопка показана tg.MainButton.setParams(); //меняем цвет tg.MainButton.disable() //скрываем кнопку > else< //иначе tg.MainButton.setParams(); //меняем цвет tg.MainButton.enable() //показываем > >);5. В итоге отправляем данные при нажатии на основную telegram-кнопку:
Telegram.WebApp.onEvent('mainButtonClicked', function()< tg.sendData("some string that we need to send"); //при клике на основную кнопку отправляем данные в строковом виде >);Благодаря этому методу мы можем получить данные из веб-приложения в боте.
6. Также выведем всю информацию о пользователе (будет доступна только при запуске с кнопки, добавленной с помощью @botfather).
Нам доступно: id / isBot / first_name / last_name / username / language_code
let usercard = document.getElementById("usercard"); //получаем блок usercard let profName = document.createElement('p'); //создаем параграф profName.innerText = `$ $ $ ($)`; //выдем имя, "фамилию", через тире username и код языка usercard.appendChild(profName); //добавляем let userid = document.createElement('p'); //создаем еще параграф userid.innerText = `$`; //показываем user_id usercard.appendChild(userid); //добавляем7. И добавляем стили, используя telegram-css переменные:
body < color: var(--tg-theme-text-color); background: var(--tg-theme-bg-color); display: flex; flex-direction: column; align-items: center; font-size: 18px; >.hint < color: var(--tg-theme-hint-color); >.link < color: var(--tg-theme-link-color); >.button < background: var(--tg-theme-button-color); color: var(--tg-theme-button-text-color); border: none; font-size: 18px; >.button:not(:last-child) < margin-bottom: 20px >#usercard
В итоге получаем такое веб-приложение:
Оно отображает основные возможности — получение информации о пользователе, задействование цветов его темы и управление главной кнопкой приложения.
Получаем данные от веб-приложения в боте
Теперь вешаем обработчик событий на сообщение, которое посылает веб-приложение в методе send (работать будет только с keyboard button):
@bot.message_handler(content_types="web_app_data") #получаем отправленные данные def answer(webAppMes): print(webAppMes) #вся информация о сообщении print(webAppMes.web_app_data.data) #конкретно то что мы передали в бота bot.send_message(webAppMes.chat.id, f"получили инофрмацию из веб-приложения: ") #отправляем сообщение в ответ на отправку данных из веб-приложения И все — теперь мы можем получать информацию с сайта и отвечать на нее.
Есть и другие способы — но это уже немного другая история.
Разработка Web Apps в Telegram: инструкция
Telegram Web Apps – это Telegram Bot + Web App, интернет-магазин или сайт в Телеграмме. Технология является аналогом VK Mini Apps ВКонтакте.
Официальный релиз Веб Апп Телеграмма состоялся 16 апреля 2022 (Bot API 6.0). На момент написания статьи ТГ предлагает работать с Bot API 6.7 от 21 апреля 2023 (добавлены метод switchInlineQuery и возможность открыть веб-приложения по прямой ссылке).
Что такое Web App Telegram: примеры, как выглядит, как работает
Если коротко – как сайт (интернет-магазин, витрина), только в Телеграмме.
WebApp боты – это PWA, т.е. Progressive Web Apps, которые запускаются внутри WebView.
Официальный пример Telegram Web App bot example – @DurgerKingBot. Вот как он выглядит после перехода и запуска (клик на start).
Веб-приложение в Телеграмме выглядит как сайт (интернет-магазин) и позволяет:
- разместить витрину товаров или услуг;
- внедрить корзину и форму заказа с заполнением данных;
- подключить системы оплаты (в том числе с использованием Google Pay and Apple Pay);
- настроить пуш-уведомления;
- интегрировать веб-приложения Телеграмма с учетной системой или CRM (iiko, RetailCRM, Битрикс24, VirtualPOS, Workabox, amoCRM, ClientBase или прочими);
- подключить поиск по каталогу и сделать многое другое.
Мы в ChatLabs протестировали разработку WebApp в Телеграмм буквально через несколько недель после того, как в ТГ анонсировали функционал. Пример реального веб-бота, разработанного для интернет-магазина доставки еды, ниже.
Но на самом деле веб-ботов в Телеграмме можно заказать не только для служб доставки. Telegram WebApp используют для:
- интернет-магазинов;
- онлайн-школ;
- курсов и марафонов;
- ресторанов и кафе;
- отелей, хостелов, усадеб и многих других бизнесов.
Разработку Telegram Web App bot заказывают для квизов, онлайн-бронирования, геймификации, проведения акций и розыгрышей, запуска опросов или любых других задач.
ChatLabs разрабатывает Web App bot с нуля без использования конструкторов. О том, какие подводные камни имеют боты на конструкторах, рассказывали в отдельном материале. Если коротко: бот на конструкторе – это ежемесячная плата за использование (около 3000 рублей в зависимости от тарифа и количества контактов), хранение бота на «чужом хостинге», невозможность масштабирования и внедрения нетиповых настроек.
Создание бота Telegram Web App: как сделать веб-приложение для Телеграмм самостоятельно
Пошаговая инструкция, как создать Telegram bot WebApp, подразумевает действия:
- Создать бота через @BotFather (/newbot). Нужно задать ему имя и получить токен (API-ключ) для доступа к HTTP API Telegram. Не передавайте Token третьим лицам!
- Создать новое приложение с использованием команды /newapp. BotFather попросит указать название и короткое описание (description), загрузить фото и выставить настройки.
- Разработать клиентское приложение Telegram Web App js, используя любые frontend-технологии (HTML, CSS, JavaScript (ES6), Vue.js, React). Back end можно писать на Питоне (Python), node js или других.
Создать веб-приложение в Телеграмм через @BotFather
О том, как создать чат-бота в Телеграмме с использованием @BotFather, мы рассказывали в отдельной инструкции. Поэтому перейдем сразу к тому, как сделать веб-бота через команду /newapp.
- /newapp – BotFather спрашивает, к какому чат-боту нужно привязать веб-приложение (указываем через @);
- title for the web app – название веб-бота (к примеру, ChatLabsWebApp);
- short description of the web app – короткое описание (в нашем примере это «ChatLabsWebApp – веб-приложение, как создавать»);
- upload a photo, 640×360 pixels – загрузка логотипа (дальше система предложит загрузить gif, но командой /empty можно пропустить этот шаг и вернуться к нему позже, используя /editapp);
- выбрать Web App URL – прямая ссылка, по которой будет открываться приложение (к примеру, мы указали https://chatlabs.ru/);
- short name for your web app – параметр, который будет использоваться в short_name Bot API (нужно для разработки).
BotFather выдаст ссылку, по которой нужно перейти для старта разработки веб-бота для Телеграмм.
Чтобы найти нужного веб-бота, используйте команду /myapps. После ее ввода BotFather предложит список созданных Web Apps в Telegram.
В примере с ChatLabsWebApp это:
- Edit Title – редактировать тайтл;
- Edit Description – редактировать дескрипшн (описание);
- Edit Photo – редактировать фото;
- Edit Web App URL – редактировать урл (ссылку);
- Delete Web App – удалить веб-приложение.
Поздравляем! Вы создали веб-бота (сайт) в Телеграмм самостоятельно и без навыков программирования. Правда, пока он полноценно работать не сможет. При клике по ссылке появляется ошибка: «Не удалось найти IP-адрес сервера».
В Телеграмме веб-приложение не работает, т.к. нам нужен хостинг, домен, бэкенд (Web Apps Telegram Python) и база данных (MySQL, MariaDB, PostgreSQL, SQLite, MongoDB, RethinkDB), а также frontend-часть.
Чтобы после создания бота Web App Telegram bot Python, node js начал работать и выглядел так, как было задумано, нужны навыки программирования.
Разработка веб-бота (интернет-магазина) для Телеграм с Web Apps на JS
Для разработки веб апс в Телеге нужно изучить API. Application Programming Interface Телеграм находится по ссылке: методы, сущности, параметры, функции.
На основе API можно вывести, какие опции можно подключить к веб-боту Webapp TG (промокоды, оповещения, история заказов, рассылка по пользователям, загрузка товаров в веббот, перевод заказов в различные состояния, статистика новых юзеров web-app, подключение ЮКассы, рассылка по пользователям и так далее).
Чтобы упростить для Telegram WebApp создание бота, используют библиотеки. К примеру:
- pyTelegramBotAPI (Питон);
- Node.js Telegram Bot API (Нод Джс);
- Nutgram или Telegraph (PHP);
- Golang Telegram Bot library, Telegrambot, Telego (Go);
- Frankenstein, Ferrisgram, tgbotapi (Rust);
- TelegramBotAPI, Telegram Bot API in Kotlin Multiplatform, Kotlin Telegram Bot (для Kotlin)
- Telegram Vapor Bot, Telegrammer (Web Apps Telegram бот на Swift);
- TelegramBots или ReBot (Java), а также многие другие.
Список с примерами библиотек для Телеграм-бота Bot API Library Examples находится на сайте Телеграмма.
Чтобы создать Telegram bot интернет-магазин (веб-приложение) с минимальным функционалом – карточками товара и характеристиками на node.js – нужно сделать проект (используем IDE вроде Microsoft Visual Studio, Xcode, Webstorm для удобства), настроить окружение и установить зависимости.
Node.js скачивается с официального сайта. Поскольку мы разрабатываем Телеграм WebApp на node.js, используем библиотеку node-telegram-bot-api (она появится в зависимостях – dependencies). Чтобы установить зависимости проекта Telegram Bot API, заходим в папку и используем команду:
Для запуска проекта используем команду:
yarn run start
Если используете пакет npm, то команда будет npm install node-telegram-bot-api + изменится команда для старта.
В папке проекта нужно создать минимум 2 файла:
- index.js – входной файл с кодом WebApp Телеграмм;
- package.json – пакет с зависимостями.
В файле package.json должен быть код:
< "name": "webapp", // название веб-приложения – может быть любым: webAppTG, WebAppTelegram // "version": "0.0.1", // название веб-приложения – версия// "license": "MIT", // лицензия // "scripts": < "start" : "node index.js" >, "dependencies": < "node-telegram-bot-api": "^0.61.0" >> // зависимости – библиотека, которая должна быть установлена для работы проекта
Обратите внимание, что комментарии указаны справочно (для отображения, что происходит в коде и понимания). В реальном проекте в package.json комментарии нужно убирать, т.к. будет показывать ошибку.
В файле index.js должен быть код:
const TelegramBot = require('node-telegram-bot-api'); // подключаем (инициализируем) библиотеку, которую установили ранее const token = 'Указываем в кавычках токен, который выдал Телеграм' // задаем токен, сам API-ключ храним в отдельном файле // const bot = new TelegramBot('token', ); // создаем bot, polling в значении true необходим для получения обновлений с серверов ТГ, чтобы бот работал корректно// function formatProductCaption(product) < return `*$*\nPrice: $\nDescription: $`; > // функция formatProductCaption принимает переменную product и возвращает название, цену, описание, но вы можете добавлять другие необходимые поля// const products = [ < id: 1, name: 'Product 1', price: '$10', description: 'Description of Product 1', imageUrl: 'https://plus.unsplash.com/premium_photo-1684534125661-614f59f16f2e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80' >, < id: 2, name: 'Product 2', price: '$20', description: 'Description of Product 2', imageUrl: 'https://images.unsplash.com/photo-1594212699903-ec8a3eca50f5?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1171&q=80' >, ]; // создаем массив products, в котором лежат товары с нужными нам переменными: id, name, price, description, imageUrl // bot.onText(/\/start/, async (msg) => < const chatId = msg.chat.id; const response = 'Привет! Добро пожаловать в Telegram Bot web app!\n\nЗдесь есть вот такие товары:'; // Проходимся по массиву products методом map и создаем сами карточки // const messageOptions = products.map((product) =>< return < chat_id: chatId, photo: product.imageUrl, caption: formatProductCaption(product), parse_mode: 'Markdown' >; >); await bot.sendMessage(chatId, response); // Отправляем сообщение с карточками продуктов await Promise.all(messageOptions.map((options, index) => < return bot.sendMessage(options.chat_id, options.caption, < parse_mode: options.parse_mode, reply_markup: < inline_keyboard: [[`>]] > >); >)); >); bot.on('callback_query', async (query) => < console.log('Здесь сообщение'); const chatId = query.message.chat.id; const data = query.data; if (data === 'back') < // Отправляем карточки продуктов при запросе через inline keyboard return sendProductList(chatId, 'Посмотрите, вот здесь есть продукты:'); >const productId = data.split('_')[1]; const selectedProduct = products[productId]; if (selectedProduct) < await bot.sendPhoto(chatId, selectedProduct.imageUrl, < caption: formatProductCaption(selectedProduct), parse_mode: 'Markdown', reply_markup: < inline_keyboard: [[]] > >); > >); async function sendProductList(chatId, response) < await bot.sendMessage(chatId, response); const messageOptions = products.map((product, index) =>< return < chat_id: chatId, photo: product.imageUrl, caption: formatProductCaption(product), parse_mode: 'Markdown', callback_data: `product_$` // Изменяем значение callback_data value >; >); await Promise.all(messageOptions.map((options, index) => < return bot.sendMessage(options.chat_id, options.caption, < parse_mode: options.parse_mode, reply_markup: < inline_keyboard: [[]] > >); >)); > console.log('Бот запускается. '); После запуска простейший Telegram Web App example выглядит таким образом и работает локально:
Работа со статикой в веб-приложении Телеграмма
Веб-приложение Телеграмм разрешает указывать ссылки на свои источники. К примеру, мы можем добавить на кнопку тест ссылку https://telegram/chatlabs.ru/, а пользователь увидит наш контент внутри попапа. По сути, как будто бы работает браузер поверх мессенджера.
В каждой точке входа статики нужно указать:
Чтобы передать данные со нашего статического сайта в Телеграмм-бот и обеспечить двустороннее сообщение, используются методы (sendMessage, deleteMessage, sendData и другие с передачей нужных параметров).
В index.html необходимо указать:
Telegram WebApps API от ChatLabs После того, как подключили скрипт через , становится доступен объект window.Telegram.WebApp со следующими полями:
Подробнее про Initializing Web Apps в веб-приложении Телеграмма в API.
Дальше в тегах и задаем дизайн карточек и кнопок, указываем расположение элементов и т.д. – в общем, работаем с визуальной частью и версткой:
body < display: flex; color: var(--tg-theme-text-color); background: var(--tg-theme-bg-color); align-items: center; flex-direction: column; font-size: 20px; >.hint < color: var(--tg-theme-hint-color); >.link < color: var(--tg-theme-link-color); >.button < background: var(--tg-theme-button-color); color: var(--tg-theme-button-text-color); border: none; font-size: 20px; >.button:not(:last-child) < margin-bottom: 15px >#usercard Здесь текст о компании ChatLabs
Ссылка на ChatLabs Текст подсказки от ChatLabs
Если проект большой, то стили обычно выносят в отдельный файл .css, а затем подключают к index.html.
На этом заканчивается «дизайновая часть». Начинается фронтенд-код на Javascript. Сложностей с ним не должно возникнуть, т.к. работа с объектами классическая: слушатель событий addEventListener, метод getElementById, API Телеграмма и другие.
Чтобы создать приложение-аналог @DurgerKingBot, нужно использовать в web_app тип Inline KeyboardButton. Всего есть варианты:
inline button – инлайн-кнопка веб-бота в Телеграмме;
bot menu button – кнопка меню бота (голубая, надпись «Order Food», можно изменять);
keyboard button – клавиатурная;
inline mode – инлайновый режим;
direct link – по прямой ссылке.
