Владимир Фетисов

Прототипирование

Адаптивная вёрстка

Программирование

SEO продвижение

Реклама, таргет

UX/UI интерфейсы


СКРЫТЬ

ПОКАЗАТЬ
Владимир Фетисов

Прототипирование

Адаптивная вёрстка

Программирование

SEO продвижение

Реклама, таргет

UX/UI интерфейсы

Блог

PHP Telegram bot + Laravel разработка с нуля `Урок – 5`

PHP Telegram bot + Laravel разработка с нуля `Урок – 5`

Статья на ЯндексДзен, подписывайтесь!

В этом уроке создадим нового бота в телеграм, посмотрим что можно в нем настроить, получимм токен для управления ботом, получим вебхук из телеграма в Ngrok и попробуем отправить сообщение от бота в наш телеграм.

Создание бота через BotFather

Новые боты в телеграме создаются через еще одного, официального бота – @botfather, вы можете найти его в поиске или пройти по прямой ссылке.

При отправке ему команды /start, бот возвращает нам все достпные команды с описанием.

Команды, которые возвращает BotFather на нашу команду /start
Команды, которые возвращает BotFather на нашу команду /start

Нас интересует создание нового бота, а именно команда /newbot

Ответ на команду /newbot в телеграм боте BotFather
Ответ на команду /newbot в телеграм боте BotFather

Бот просит нас придумать имя, оно может содержать любые символы, пусть будет My awesome bot🔥

Придумываем название для бота
Придумываем название для бота

Теперь нужно придумать ему username, он должен быть уникальным, а так же обязательно заканчиваться на Bot или _bot, пусть будет YandexDzenLessons_bot

В ответ мы получаем ссылку на нашего ботасекретный токен и ссылку на документацию API

Получение секретного токена telegram api bot
Получение секретного токена telegram api bot

Перейдя в нашего бота мы увидим придуманное раньше название и username, по которому бота можно легко найти

Как выглядит бот после создания
Как выглядит бот после создания

Вернемся пока к BotFather и попробуем поменять нашего бота. Если отправить команду /mybots, мы увидим список наших ботов, давайте зайдем в только что созданного бота

Список ботов в ответ на команду /mybots
Список ботов в ответ на команду /mybots

Зайдя в бота можно увидеть меню управления ботом:

  1. Посмотреть токен этого бота
  2. Редактировать бота
  3. Настройки бота
  4. Настройки принятия платежей через бота
  5. Передача бота другому пользователю
  6. Удаление бота
  7. Вернуться к списку всех ботов

Список меню выбранного бота
Список меню выбранного бота

Нас интересует 2 пункт, Edit Bot, зайдя в него можно увидеть следующие настройки:

  1. Изменить имя бота
  2. Изменить информацию о боте, которое отображается при открытии профиля бота
  3. Изменить описание, которое отображается когда пользователь впервые заходит в бота, на месте чата
  4. Изменить изображение, которое отображается когда пользователь впервые заходит в бота, на месте чата
  5. Изменить аватарку бота
  6. Изменить команды бота
  7. Вернуться в предыдущее меню

Меню редактирования бота
Меню редактирования бота

Имя бота менять не вижу смысла, поэтому изменить информацию о боте Edit About, бот попросит прислать текст, я отправлю ‘Бот, созданный в рамках серии уроков на ЯндексДзен💣💣’

Изменение информации о telegram боте
Изменение информации о telegram боте

Теперь если попробуем зайти в профиль нашего бота, увидим добавленную информацию о нём.

Изменившаяся информация о нашем телеграм боте
Изменившаяся информация о нашем телеграм боте

Теперь попробуем добавить изображение, вернемся назад к боту Back to Bot, зайдем обратно в редактирование бота Edit Bot и нажмем на Edit Botpic. Теперь нас попросят прислать изображение, у меня уже есть сгенерированный ИИ логотип, его и отправим

Изменение изображения телеграм бота
Изменение изображения телеграм бота

Теперь бот не выглядит так уныло👏👏

Бот после изменения изображения
Бот после изменения изображения

Давайте по аналогии отправим ему Изображение описания Edit Description Picture и сам текст описания Edit Description

Теперь посмотрим как выглядит чат бота, при первом заходе на него

Как выглядит бот при первом заходе
Как выглядит бот при первом заходе

Если сейчас запустить бота, ожидаемо ничего не произойдет, мы настрим это позже.

Пробуем запустить созданного бота
Пробуем запустить созданного бота

Сейчас можем опять вернуться к BotFather и разобрать пункт с редактированием команд.
Они позволяют добавить то самое синее меню слева в чате, давайте создадим новую команду.
Заходим в Edit Bot, затем в Edit commands, нас попросят отправить команду и описание в формате command – description, я добавлю команду перезапуска бота:
start – Перезапустить бота

Добавление команды в настройках бота для отображения её в Menu
Добавление команды в настройках бота для отображения её в Menu

Теперь если вернемся к нашему боту, увидим что у него появилось меню, с той самой добавленной командой и её описанием.

Добавленная команда start
Добавленная команда start

Настройка Laravel для принятия хуков от Telegram bot

У нас уже есть адрес от Ngrok, куда мы можем отправлять хуки, но телеграм будет спамить пока не получит ответ, что хук был доставлен, за это отвечает код 200, он говорит что все ОК.

Поэтому нужно создать новый Route /webhook, почитать можно в официальной документации, он будет просто возвращать ответ 200 при обращении на него методом POST.

В конце статьи будет ссылка на коммит с этого урока, где можно будет посмотреть все правки, которые были внесены в рамках него)

Добавляем новый роут /webhook, принимающий запросы методом POST
Добавляем новый роут /webhook, принимающий запросы методом POST

Так же по умолчанию в Laravel POST методы требуют верификацию по CSRF токену, но т.к. мы не можем указать боту дополнительный параметр в виде токена, который он нам присылал бы вместе в хуком, мы можем его просто исключить в VerifyCsrfToken.php. Ссылка на документацию

Исключаем CSRF верификацию для роута /webhook
Исключаем CSRF верификацию для роута /webhook

Теперь мы можем попробовать зайти на наш сайт на новый роут через локальный домен, у меня это http://my-telegram-bot.loc/webhook
Или через домен, выданный Ngrok, не забудье дописать в url /webhook

Пробуем зайти на созданный Роут
Пробуем зайти на созданный Роут

Мы увидим ошибку, что данный роут принимает только метод POST, все правильно, ведь при заходе на сайт браузер делает GET запрос, а вебхук будет приходить методом POST, главное мы убедились что роут работает и можно двигаться дальше.

Настройка Ngrok

Сейчас у вас уже должен быть запущен локальный сервер, у нас это OpenServer и запущен Ngrok, настраивали мы его в предыдущем уроке.

Как вы помните что бы получить вебхук от телеграма нам нужен какой то адрес, домен с установленным SSL сертификатом для работы https соединения, у нас все это уже есть.

——ОБРАТИТЕ ВНИМАНИЕ——
Ссылка Ngrok выдается разово, каждый раз после запуска программы и ввода команды ngrok http 80 вы будете получать новую ссылку, поэтому после закрытия, перезапуска ngrok, бот работать перестанет.
В конце мы разместим бота на хостинг, где он будет работать 24/7👌

Осталось указать боту, куда он будет присылать хуки, это можно сделать просто пройдя по специальной ссылке:
https://api.telegram.org/bot%7BTOKEN%7D/setWebhook?url={DOMAIN}/webhook

В ней нужно заменить {TOKEN} на токен вышего бота, который выдал BotFather, а вместо {DOMAIN} указать адрес, который вам выдал Ngrok, должно получиться примерно так:
https://api.telegram.org/bot6336621474:ABG7nuq9y8KQV3XlvDE_slLAQnII34sKzpY/setWebhook?url=https://8a8e-46-138-76-71.eu.ngrok.io/webhook

Перейдя по этой ссылке, мы должен получить ответ, что адрес для вебхуков установлен:

Ответ при успешной установке адреса для вебхуков телеграм бота
Ответ при успешной установке адреса для вебхуков телеграм бота

Теперь можно перейти в Ngrok Inspect и попробовать отправить нашему боту команду /start

Бот по прежнему ничего не ответит, т.к. мы еще не научились обрабатывать вебхуки

Пробуем еще раз отправить команду /start после установки адрес для вебхуков
Пробуем еще раз отправить команду /start после установки адрес для вебхуков

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

  1. Id чата, откуда пришел вебхук
  2. Информацию о пользователе
  3. Текст, который он нам отправил

Пример того, что приходит в вебхуке от телеграма на команду /start
Пример того, что приходит в вебхуке от телеграма на команду /start

Отправка первого сообщения через телеграм бота

Теперь у нас есть id чата, в который мы можем отправить какое-нибудь сообщение.

Давайте создадим еще один Route, который будет принимать метод GET, назовем его /send и поместим небольшой код внутрь функции

Создаем новый роут /send с функцией, отправки сообщения в чат пользователю
Создаем новый роут /send с функцией, отправки сообщения в чат пользователю

В переменную $token – запишем токен нашего бота, в $chatId – полученный в вебхуке id чата, а в $text любое сообщение.

После чего попробуем зайти на наше сайт, уже по адресу /send, у меня это http://my-telegram-bot.loc/send

Нам отобразится ответ ОК, а в чат от бота должно прийти сообщение

Заходим на созданный роут
Заходим на созданный роут

Проверяем пришло ли сообщение!
Проверяем пришло ли сообщение!

Отлично, значит все работает!🥳🥳

Конечно таким способом создавать бота мы не будем😁
Все это можно было сделать за пару минут, создав файлик index.php и поместив в него код отправки сообщения)

Но мы подготовили базу, с которой будем работать дальше!

Ссылка на commit из 5 урока

Полезные ссылки

Taggs:
Написать комментарий