форма в телеграм боте
Как связать форму на сайте с Telegram
Это актуализированная статья, в которой решены такие проблемы, как отправка файла и пропадающий символ «+», который не приходил в сообщение и из-за этого номер телефона был некликабельным.
Как связать форму на сайте с Telegram
Итак, давайте приступим. Первое что нам нужно, это создать своего бота. Делается это достаточно просто. В поиске наберите @botfather, откройте родительского бота и нажмите «Start»:
Если все прошло успешно, то увидите поздравления и токен вашего бота, в моем случае это:
Теперь нужно найти своего бота в поиске, указав его ник и нажать «Start», чтобы активировать его. В моем случае ник @DWS_MESSAGE_bot.
После этого нужно создать групповой чат, в который будут приходить заявки и пригласить туда нашего бота. Давайте займемся этим.
Зайдите в меню, нажмите «New Group» и задайте имя вашему чату.
Не забываем пригласить своего бота в чат.
На данный момент у нас есть бот, мы знаем его токен, есть чат, в который будут приходить заявки, и нам осталось узнать только id чата. Для этого, напишем в чате:
А затем, в браузере введем:
Если все сделали правильно, то перед вами откроется подобная страница:
Разметка формы
Не стал выдумывать что-то сверхсложное, а просто 2 поля и возможность прикрепить файл. Оставил телефон, ведь у многих возникала проблема с символом «+», а файл добавил, так как меня просили разобраться с этой темой.
Не забывайте, что форма отправляется без перезагрузки страницы, а значит используется ajax, и, для упрощения, jQuery. Поэтому подключаем сам jQuery, если не подключен, а после, и сам скрипт. Я сделал специальную папку telegramform, которую нужно поместить в корень сайта.
Во многом он повторяет обработчик из других форм на блоге. Например, в статье «Создание формы обратной связи» используется аналогичный подход, и вы легко сможете осуществить отправку данных как на почту, так и в мессенджер одновременно.
Вот так выглядит отправка текстового сообщения:
Вот так, средствами PHP можно отправлять в Telegram сообщения и файлы. Если вы используете CMS MODX, то на блоге igamov.ru есть отличная инструкция по интеграции формы с мессенджером.
Исходник для отправки данных формы в Телеграм
Telegram Bots vs Google Forms
Интро
Google forms отличный инструмент для решения простых организационных задач, например, сбор информации для регистрации людей на небольшое мероприятие. Но что если мы попытаемся решить эту задачу по другому? Например через telegram.
Итак, что за задачу мы будем решать? У нас есть ежегодное мероприятие: танцевальный выезд на день рождение студии танцев. Необходимо собрать следующую информацию от участников для организации расселения и планирования разных шумных активностей:
Номер телефона для связи
Адрес электронной почты
Пол (пригодится для расселения участников в большие номера)
Категория номера (2-х местный, 3-местный и тд)
Исповедуемое танцевальное направление
Для того чтобы не сломать существующий процесс регистрации заполненную заявку мы будем выгружать в гугл таблицы
Технические приготовления
Сразу оговорюсь, что предложенную задачу даже с использованием ботов можно решать различными способами, тут я расскажу про свой вариант, который был использован некоторое время назад и отлично зарегистрировал всех желающих.
Полностью рабочий бот лежит вот тут. Вы можете использовать его как угодно в своих целях, буду рад если решение кому-то принесёт пользу.
А для сохранения данных в гугл таблицу необходимо будет создать сервисный аккаунт в cloud google platform и предоставить ему доступ к нужной таблице.
А наше приложение будет написано на kotlin + spring-boot + postgresql.
Архитектура решения
Для хранения данных, как уже упоминалось выше, мы будем использовать самую обычную postgresql со следующей схемой:
Пробежимся по полям таблицы:
В нашей задаче будут следующие статусы:
Начнём по порядку. Первый контакт участника с ботом случается в тот момент, когда новый человек отправляет команду /start нашему боту на что бот отвечает приветственным сообщением и рассказываем что тут вообще происходит.
Тут мы имеем возможность сохранить публично доступную информацию о пользователе(в нашем случае tg_user_id и telegram_login) в свою бд, как минимум для статистики конверсии.
Статусы с PHONE_STATE по NEIGHBORS_STATE покрывают заполнение соответствующих шагов начиная с номера телефона до выбора соседей по комнате.
Промежуточный статус REQUEST_READY будет полезен нам для того чтобы показать пользователю его ответы все вместе и дать возможность принять решение отправить заявку либо удалить черновик и заполнить все заново. Кстати возможность удалить черновик на мой взгляд будет полезна на любом из промежуточных вопросов просто потому что удаление черновика и заполнение заново реализовать будет гораздо проще чем редактирование.
После того как пользователь окончательно одобрил заполненную заявку в нашей модели есть ещё один статус REQUEST_APPROVED, который будет полезен если случится какая-нибудь нескладуха при выгрузке данных в гугл таблицу и позволит нам в ручном или автоматическом режиме довыгрузить застрявшие заявки.
И окончательный статус EXPORTED проставляется в тот момент когда заявка улетела в гугл таблицу.
Последние два статуса являются техническими, т.е. пользователь на них повлиять никак не может и мы можем дать ему возможность заполнить ещё одну заявку за кого-нибудь ещё.
Модель черновика реализуем следующим образом: будем сбрасывать статус заполняемой заявки до PHONE_STATE.
Архитектура кода
Какая же архитектура кода нас ждёт? Тут для меня был интересный челенж. Хотелось выстроить структуру кода приложения в простом и понятном виде, которую легко можно будет расширять и тестировать. Ну в общем ничего нового, простое программистское счастье.
Как можно понять из названий
Ненадолго остановимся на параметрах методов:
Таким образом на каждый из шагов статусной модели нам необходимо создать отдельный класс имплементирующий интерфейс State.
Для примера давайте рассмотрим заполнение номера телефона.
И опять начнём с параметров конструктора:
Перед тем как задать пользователю вопрос мы устанавливаем соответствующий статус для заявки пользователя и только после этого отправляем сообщение с вопросом.
После того как мы получаем ответ от пользователя и перед тем как сохранить его в базу мы делаем минимальную проверку того, что мы получили в ответе. После успешной валидации сохраняем ответ и переходим на следующий шаг. Если же мы получили в ответе что-то неожиданное, мы можем попросить пользователя подкорректировать свой ответ.
Тут у читателя может возникнуть справедливый вопрос: а как же мы понимаем какой именно обработчик нужно вызвать для конкретного ответа?
Для этого взглянем на конфигурацию. Полностью шаги выполнения сконфигурированны в классе FlowConfiguration. А вот фрагмент конкретно для нашего шага с номером телефона:
А вот фабрика, которая позволяет по userId получить нужный нам бин для обработки
Ну а как сама фабрика контактирует с библиотекой-оберткой (уже спринговой) можно наблюдать в классе RegistrationBot
Работа с базой данных
По задумке приложение должно получиться достаточно легковесным для того чтобы запускать его на разных площадках (heroku, aws, google cloud) без выделение значительных ресурсов. Но при этом приложение основано на spring-boot. Поэтому нужно не затаскивать ничего лишнего. И в данном варианте я решил использовать тонкую самописную обертку над спринговым NamedJdbcTemplate, чтобы отказаться от толстых абстракций при работе с базой.
Для взаимодействия с базой у нас есть два метода:
Каждый из методов в качестве параметров принимает тип содержащий информацию о запросе.
Это позволяет нам собрать в конкретном классе все что может относить к какому-то запросу
Вот как выглядит запрос на установку статуса из примера выше
На мой взгляд у ботов есть значительное преимущество по сравнению с гугл формами в части возможной автоматизации.
Например, в будущем мы можем добавить фичу оплаты как отдельный шаг регистрации или возможность коммуницировать с участниками по разным организационным вопросам уже после завершения регистрации.
Также новые горизонты открываются при работе с постоянными участниками, которые могут регистрироваться на другие мероприятие без однотипного заполнения данных и «в один клик».
И как можно заметить разработка бота требует заметно меньше ресурсов по сравнению например с мобильным приложением.
Блог вебмастера
создание сайтов, заработок в сети, раскрутка, программирование
Заявки с формы обратной связи в telegram
Идеальная замена обычных уведомлений на почту — это telegram. Заявка сразу прилетает в месенджер, не нужно постоянно проверять почту. Кроме того, избавляемся от проблем исходящей почты на сервере.
Часто на хостинге отключена возможность рассылки почты. Также, из-за спама могут закрыть порты на сервере. Поэтому будем использовать уведомления в телеграм!
Как настроить отправку уведомлений с сайта в телеграм на php
Создаем бота в телеграм
Для начала нам понадобится бот. Создаем его через botfather, сохраняем токен. Сложностей возникнуть не должно, инструкций много. Далее идем на сайт.
Форма обратной связи — пример
Возьмем для примера простую форму обратной связи:
Поля: имя (необязательно), контакт (обязательно, эмейл или телеграм) и сам текст сообщения (обязательный). Дальше нужен обработчик формы.
Напишем обработчик на php
Выкладываю код обработчика с комментариями:
Самое главное тут file_get_contents, через него и делаем отсылку заявку на телеграм. Если нужны дополнительные данные (ошибка или вывод «ответа» от сервера телеграм), поместите file_get_contents в переменную и выводите ее или сохраняйте в логи.
Куда это все разместить
Смотря где у Вас форма и где обработчик (куда уходят данные, action). У меня все на одной странице.
Как отправить заявку нескольким аккаунтам
Способов много. Создайте еще один file_get_contents, или массив с id аккаунтов и используйте цикл (например, foreach).
Не приходят уведомления с формы — что делать
В самом начале нужно со своего аккаунта написать боту. Можно нажать стандартный /start, чтобы аккаунт стал «доверенным» и бот мог слать ему сообщения. Дальше главное правильно прописать id. Как узнать свой телеграм ID — напишите боту @my_id_bot.
Как узнать свой id телеграм
Если это не помогло, нужно смотреть ответ после запроса.
Как заменить отправку на эмейл отправкой в телеграм
Уберите mail() с его данными и используйте file_get_contents. Адаптируйте поле с сообщением ($msg), добавьте туда все данные с формы.
Результат отправки заявки в телеграм с сайта
Вот как это примерно выглядит в телеграме:
Пример полученного сообщения в телеграм через бота. Заявка с сайта
Форма простая, обработчик тоже; «почтовые» порты на хостинге или сервере не нужны. И заявки моментально прилетают в телеграм. Удобно.
Форма обратной связи с отправкой письма в Телеграм. Отправка формы в телеграм
В новой записи я вам расскажу как создать форму обратной связи с отправкой письма в телеграмм. Для отправки письма мы будем использовать стандартные методы API от Telegram. Подробную информацию о методах вы можете посмотреть в официальной документации Telegram
Для того чтобы отправить письмо в телеграмм, нам необходимо сделать несколько последовательных действий.
1) Вам нужно авторизоваться в Telegram аккаунте
2) В поиске найти пользователя @BotFather
3) Отправить сообщение боту – /newbot
5) После этого дублировать название бота, но только суффиксом _bot
6) После успешной регистрации бота, @BotFather пришлёт вам сообщение с токеном, который вам нужно сохранить, в дальнейшем он нам понадобится.
7) Теперь нам нужно создать чат в который мы добавим нашего бота
8) Далее нам нужно получить id нашего бота. Для этого нужно перейти по следующей ссылке, где за место символов X нужно подставить ваш токен:
https://api.telegram.org/botXXXXXXXXXXXXXXXXXX/getUpdates
Не закрывайте эту страницу, после 9 пункта, её нужно будет обновить.
9) Теперь вам необходимо отправить команду /join в чат для активации бота. После отправки команды, вам нужно обновить страницу, чтобы сделать повторный запрос.
Здесь вам нужно записать следующий фрагмент кода – id вашего бота. Эту информацию тоже нужно записать.
Вам нужен id со знаком минус.
Теперь вам нужно создать форму обратной связи и отправить полученные данные по следующему URL:
https://api.telegram.org/bot /sendMessage?chat_id= &text=
Для отправки запроса, воспользуемся библиотекой Curl. Информацию по использованию данной библиотеке, вы можете получить в следующей записи – https://prog-time.ru/parsing-php-biblioteka-curl/
Создаём форму
Для примера я создал самую простую форму из 3 полей и кнопки. В качестве обработчика использую файл sendTelegram.php
Для примера давайте создадим простую форму из 3 полей: имя, email, телефон.
Делаем телеграм бота за 5 минут: быстрый старт с продвинутым шаблоном
В последнее время я сделал настолько много ботов для телеграмма, что крайне преисполнился в том, как их писать, как хостить, да и в принципе выработал красивый шаблон для быстрого их создания.
Сразу могу предложить посмотреть на то, что получиться в конце этого туториала. Для этого я запустил бота с идентичном шаблону кодом.
Также стоит отметить, что хостинг в этом примере бесплатный, но его хватает для разумной нагрузки.
А еще сразу скажу, что далее будет все на питоне. Вот. Сказал. Не буду больше ходить вокруг да около, у нас всего 5 минут (помните, да?). Приступим!
Пошаговая инструкция
1) Создаем репозиторий на гитхабе из моего шаблона
2) Регистрируемся на Heroku
3) Создаем новое приложение
4) Привязываем наш репозиторий к проекту на Heroku
5) Настраиваем автоматический deployment
6) Смотрим на адрес, где будет висеть наш бот
7) Настраиваем переменные среды
VALUE
Рандомная строка из букв для безопастности
Еще одна рандомная строка из букв для безопастности
Адрес полученный в пункте 6 (например fancy-panda.herokuapp.com). Обратите внимание на формат!
Токен для бота, куда будут отправляться логи (оставьте пустым, если хотите отключить логирование в телеграм)
user_id, куда будут отправляться логи (получить в боте @userinfobot)
8) Собираем наше приложение и ждем пока оно запустится
9) Заходим по адресу из пункта 6 и добавляем к ссылке пароль. Получиться что-то такое: fancy-panda.herokuapp.com/?password=
10) Устанавливаем webhook, переходя по ссылке на подобие fancy-panda.herokuapp.com/set_webhook?password=
Тестируем
Теперь, когда мы закончили все настраивать, пора посмотреть, что же мы «натворили».
Пример работы из коробки Пример работы логирования
Добавляем функционал
Теперь, когда у вас есть рабочий бот, который сам разворачивается и запускается в облаке, пришло время добавить свои функции. Для примера такую:
Думаю, дальше ограничивает вас только воображение. (ну почти)
Применение в проектах
Все любят, когда есть примеры работы. На основе этого шаблона я сделал бота wifi_qr_bot, который генерирует QR-коды для подключения к WiFi. Это упрощает жизнь, ведь пароль у вас длинный (безопасность, все дела), а вводить его на каждом новом устройстве вам лень.
Выводы
Вот мы и сделали нашего бота, который хостится в облаке. Он уже многое умеет в плане логирования. Для логирования я написал отдельную библиотеку, tg-logger. Если интересно, как она работает, то потыкайте в демо бота. Если все еще интересно, прочитайте мою статью. Такие пироги с котятками.