Кнопки в боте telegram

Кнопки в боте telegram

Последнее время, я заметил, что на мой блог все чаще переходят по запросам связанными с Telegram API. Да и сам я в последнее время увлекся разработкой Telegram-ботов и NodeJS. В данной статье, я хочу рассказать о том, как добавлять inline-keybord к сообщениям. Разница между ReplyKeyboardMarkup, незначительная. Однако, в этой статьи я опишу пример использования первого варианта с inline-keyboards .

Пример данной клавиатуры, вы можете увидеть на скриншоте ниже. Данный бот публикует записи в мою группу Вконтакте с разных IT-сообществ.

Ничего сверхъестественного использовать мы не будем. Хочу отметить, что я работаю с пакетом [node-telegram-bot-api](https://github.com/yagop/node-telegram-bot-api) . И в следующих статьях, как и в предыдущей про то, как создать своего телеграм бота на node.js, мы будем использовать только этот пакет. Советую прочесть данную статью, чтобы вы могли работать с командой npm .

Первым делом, мы создаем файл server.js и устанавливаем пакет node-telegram-bot-api .

После чего, подключаем данный пакет и создаем первую команду. Если у вас еще нету своего бота, заранее создайте его.

Использовать inline-keyboards можно следующим способом:

Я не стал париться над тем, какого бота мы будем делать. В качестве примера решил написать бота для теста знаний JavaScript.

Вопросы я поместил в отдельный массив, который вы можете отредактировать сами. Отмечу, что это простой пример реализации подобного бота. Если вам понравилась идея, вы с уверенностью можете его доделать.

  • title — текст вопроса
  • buttons — варианты ответов (кнопки). В каждом ответе хранится свое значение, которое будет отправляться на сервер.
  • right_answer — номер верного ответа.

Разъясню еще один код.

К примеру, если в вопрос по счету является 2-ым и у него 3 ответа, то варианты нужно прописывать так: 2_1, 2_2, 2_3. Можете сделать свой вариант ответа, но я решил разделять через нижнее подчеркивание.

Так же, я разработал две функции:

  • getRandomQuestion() — случайный вопрос. Возвращает массив.
  • newQuestion — отправляет вопрос пользователю.

Главные функции у меня уже готовы, теперь осталось добавить событие на сообщение /start_test . И еще одно событие, на получение ответа от кнопок.

И вроде все. Теперь бот будет присылать вопросы пользователю, отправив команду /start_test . При клике на кнопку, проверяется правильность варианта и отправляется новый вопрос.

Кстати, вы можете спокойно задавать свои команды. Неважно на русском или английском и не имеет разницы, имеется ли в команде слэш. Можно прописать хоть /дайка быстро мне тест/ и если такое сочетание найдено в сообщении, то выполнится функция генерации вопроса. Эти два слэша, нкжно ставить обязательно, так как это регулярное выражение

Пример нашего бота, вы можете увидеть ниже:

Предполагается, что вы уже ознакомлены с Bot API. В противном случае прочитайте, пожалуйста, описание ботов для разработчиков.

Сегодня мы представляем крупнейшее обновление платформы ботов с июля 2015 года. Была добавлена масса новых возможностей и инструментов, которые позволят создавать простые и удобные интерфейсы для ботов любой сложности.

Сами боты тоже становятся мощнее и функциональнее: теперь они могут отправлять любые файлы и сообщения, которые поддерживаются в Telegram, а также предоставлять гео-сервисы и запрашивать номер телефона пользователя.

Новые инлайн клавиатуры

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

В отличие от привычной клавиатуры для ботов, нажатие на кнопку не приведёт к отправке сообщения боту — вместо этого данные будут переданы в фоновом режиме. О том, как это работает, читайте в разделах кнопки с обратной связью, URL-кнопки и кнопки-переключатели режима.

Кнопки с обратной связью

При нажатии на кнопку с обратной связью никаких сообщений в чат не отправится — вместо этого вашему боту будет отправлен соответствующий запрос. После получения запроса бот может отобразить результат в уведомлении вверху чата или в модальном окне.

Пример: @music. Этот бот использует кнопки с обратной связью для перехода между страницами с результатами поиска.

Это ещё не всё: смотрите раздел обновления сообщений, чтобы узнать про ещё одну очень крутую «фишку».

URL-кнопки

На этих кнопках отображается небольшая стрелочка, чтобы пользователям было понятно, что нажатие на неё откроет внешнюю ссылку. Как обычно, перед открытием ссылки в браузере появится модальное окно с предупреждением.

Переход в инлайн-режим

Нажатие на такую кнопку запросит у пользователя чат, откроет его и вставит имя пользователя бота в поле ввода сообщения. Помимо этого можно передать запрос, который будет вставлен после имени пользователя. Таким образом пользователи могут сразу получить какой-нибудь результат от бота.

Читайте также:  Команда пуск выполнить в windows 7

Пример: @stickers. Этот бот ищет стикеры и предлагает переключиться во встроенный режим, чтобы показать, как им пользоваться.

Обновление сообщений

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

Пример: @music. Обратите внимание, как изменяется сообщение при нажатиях на кнопки переключения страниц.

Местоположения и номера телефонов

Для работы некоторых ботов необходима дополнительная информация о пользователе. Например, знание местоположения позволит предоставить более точные результаты на карте. А номер телефона может быть полезен для интеграции с некоторыми сервисами — например, банками.

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

При нажатии на такую кнопку Telegram отобразит соответствующее модальное окно с описанием того, что запросил бот.

Инлайн-боты тоже могут запрашивать местоположение: для этого нужно отправить команду /setinlinegeo боту @BotFather. Бот будет запрашивать разрешение у пользователя каждый раз при отправлении инлайн-запроса.

Пример: @foursquare. Этот бот спросит разрешение на предоставление геоинформации для поиска мест поблизости.

Инлайн-боты 2.0

Инлайн-боты тоже не остались без изменений.

Новые типы контента

Инлайн-боты теперь могут отправлять любые файлы и сообщения, поддерживаемые в Telegram (19 типов, если быть точным): стикеры, видео, музыку, местоположения, файлы и так далее.

Пример: @stickers. Этот бот ищет стикеры по вашему запросу.

Переключение между инлайн-режимом и личными сообщениями

Некоторым ботам необходима некоторая настройка перед корректной работой — например, для подключения внешнего сервиса (YouTube). Для этого был добавлен механизм переключения между встроенным режимом и чатом, в который пользователь хочет отправить результаты.

Ваш бот теперь может отобразить специальную кнопку «Перейти в личные сообщения» над результатами (или вместо них). Эта кнопка откроет чат с ботом и передаст необходимые параметры для корректной настройки. После успешного выполнения, вы можете отправить пользователя обратно в исходный чат с помощью кнопки switch_inline_query.

Пример: Бот @youtube позволяет привязать ваш аккаунт Telegram к профилю в YouTube.

Улучшенный интерфейс инлайн-режима

Так как общение с ботом в инлайн-режиме отличается от обычной отправки сообщений, пришлось немного изменить интерфейс. Едва ли можно придумать лучший способ обозначить, что не нужно нажимать на кнопку «Отправить», чем скрыть её совсем:

Однократное нажатие на крестик очистит поле поиска, а повторное—выйдет из встроенного режима.

Администрирование групп

Наконец, самое интересное: постепенно в Bot API будут добавляться инструменты для управления группами. В первую очередь это методы удаления участников из групп и супергрупп.

Сайт про Telegram на русском (неофициальный).

Здесь собраны приложения на базе MTProto, переведена некоторая документация с официального сайта, а также работает Webogram.

Взаимодействие пользователя с ботом должно быть интуитивным. Пользователь должен понимать, как общаться с ботом чтобы получить необходимый результат. Давайте рассмотрим какие есть способы взаимодействия с ботом.

При открытии бота по умолчанию сразу доступна кнопка Старт, при нажатии, на которую будет начат диалог и в бот будет отправлена команда /start . Уже здесь мы можем поймать эту команду, обработать и выполнить какие-то действия. Вместе с этой командой в бот отправляется минимальная информация о пользователе:

  1. id — уникальный идентификатор пользователя в Telegram
  2. last_name — значение поля фамилия, может быть пустым
  3. first_name — значение поля имя, может быть пустым
  4. username — уникальное значение текстовый идентификатор, может быть пустым
  5. language_code — кодовое обозначение выбранного языка интерфейса приложения (en, ru . )
  6. is_bot — флаг, определяющий пользователя как бота, в случае с ботом равен 1, в случае с пользователем пустое значение

Полезный инструмент

У каждого бота есть ссылка, которая открывает диалог с ним в Telegram — https://telegram.me/ИМЯ_БОТА. К этой ссылке можно добавить параметры start или startgroup со значениями. Значение может быть длиной от 1 до 64 символов и состоять из букв латинского алфавита (больших — A-Z и маленьких — a-z), цифр — 0-9, нижнего подчеркивания _ и тире -.

Читайте также:  Как изменить параметры страниц документа

Telegram Bot API рекомендует использовать base64url для кодирования параметров с двоичным и другими типами контента.

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

Как только пользователь подтвердит действие (нажмет кнопку Пуск в своем приложении или выберет группу для добавления бота), ваш бот получит сообщение от этого пользователя в таком формате:

Для удобства пользователя, можно через настройки Commands вашего бота у @BotFather, задать список поддерживаемых ботом команд. Тогда при вводе знака слеш / , пользователь увидит все команды и сможет сразу их отправить, просто нажав на одну из них. Каждая команда состоит из собственно командного слова, начинающегося со слеша и короткого описания:

Клавиатуры и их возможности

Для управления ботом вы как создатель бота предполагаете какой-то сценарий. Пользователю чтобы получить от бота желаемый результат нужно отправить команду. Бот, когда получит команду обработает ее и отреагирует по установленному вами сценарию. Но представьте, что пользователь написал команду с ошибкой, бот в этом случае должен предупредить что команда не распознана и попросить попробовать еще раз. Это не совсем удобно пользователю, и он может пойти искать другого бота с аналогичными возможностями. Вы можете потерять потенциального клиента, это не совсем хорошо.

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

С каждым сообщением бот может отправлять разный набор кнопок как по количеству, так и по назначению. Кнопки можно расположить непосредственно под сообщением (InlineKeyboardButton), или зафиксировать под тестовым полем для ввода сообщения (KeyboardButton). Различия в них очень существенные на мой взгляд. Давайте рассмотрим некоторые их возможности.

KeyboardButton

Этот объект представляет одну кнопку клавиатуры, располагающуюся под текстовым полем для отправки сообщения. Поставляется она в интерфейс приложения в наборе с другими аналогичными кнопками через объект ReplyKeyboardMarkup. В качестве параметров с ним можно передать:

  1. text — текст который будет на отображен на кнопке, обязательный параметр, поддерживает текст и смайлики (эмодзи)
  2. request_contact — если параметр установлен в true, пользователь отправит в бот свой номер телефона на который зарегистрирован аккаунт
  3. request_location — если параметр установлен в true, пользователь отправит в бот свое текущее местоположение

Если будет заполнен только обязательный параметр text, то при нажатии на кнопку будет отправлено текстовое сообщение с содержанием из этого параметра. Если будет включено дополнительно одно из необязательных параметров или локация, или контакт, то будет отправлен или контакт, или локация соответственно. Необязательные параметры взаимоисключающие.

Помимо набора кнопок в объект ReplyKeyboardMarkup можно передать еще ряд параметров:

  1. keyboard — массив кнопок (объекты KeyboardButton)
  2. resize_keyboard — если предать true, то клавиатура подгонится по высоте до возможного минимума.
  3. one_time_keyboard — возможность скрывать клавиатуру после ее использования
  4. selective — если надо показать клавиатуру только определенным пользователям

При необходимости удалить клавиатуру используйте объект ReplyKeyboardRemove.

InlineKeyboardButton

Это объект одной кнопки встроенной клавиатуры. Располагается набор таких кнопок сразу под сообщением. С помощью этого объекта можно передать кнопке url, или использовать его для голосования как одним из вариантов. В любом случае можно сделать много интересного и полезного. Рассмотрим его возможности на практике чуть ниже. Передается в наборе с другими аналогичными кнопками через объект InlineKeyboardMarkup. Принимает параметры:

  1. text — текст который будет на отображен на кнопке, обязательный параметр, поддерживает текст и смайлики (эмодзи)
  2. url — адрес на который будет направлен пользователь
  3. callback_data — строка 1-64 символа будет передан боту через объект CallbackQuery
  4. switch_inline_query — после нажатия будет предложен выбор чата где будет использован бот во встроенном режиме, пример @gif dog
  5. switch_inline_query_current_chat — после нажатия вставит команду для использования бота во встроенном режиме в текущем чате
  6. callback_game — описание игры, которая будет запущена при нажатии пользователем кнопки.
  7. pay — кнопка будет использована как кнопка оплаты

Теперь немного практики

Предлагаю рассмотреть поближе возможности клавиатур. Для примера я сделаю 4 кнопки: 2 KeyboardButton и 2 InlineKeyboardButton. Для этого будем работать с теми же инструментами, которые были в предыдущей статье. Добавим только несколько новых методов.

Читайте также:  Интернет магазин дешевых вещей с бесплатной доставкой

Логика скрипта будет простая, при старте бот будет выводить сообщение о готовности и 2 кнопки Голосовать и Помощь. При нажатии на кнопку Помощь — выведется сообщение с небольшой инструкцией, а при нажатии на кнопку Голосовать на экране появиться сообщение и под ним 2 кнопки, при нажатии на которые произойдет увеличения счетчика.

Чтобы обрабатывать команды от всех типов кнопок нам надо составить условия проверки. В моем примере от кнопки KeyboardButton команда приходит в виде обычного текстового сообщения вместе с объектом Message под ключом text, а от кнопки InlineKeyboardButton в объекте CallbackQuery под ключом data.

Кнопки будем отправлять в параметре reply_markup в методе sendMessage. Набор кнопок идет в таком формате:

Создадим два метода для разных клавиатур, на входе принимают массив строк кнопок, на выходе строку в формате JSON.

Сам набор кнопок будет выглядеть вот так.

Во встроенных кнопках (inlineKeyboardButton) в качестве значения параметра callback_data будем передавать служебную информацию в виде action_type_count1_count2 , где

  1. action — действие, в нашем случае это vote
  2. type — тип кнопки: 1 — левая, 0 — правая
  3. count1 — текущее значение левой кнопки
  4. count2 — текущее состояние правой кнопки

В значении параметра text передаем бинарный код эмодзи в кодировке UTF-8 (список эмодзи), которые преобразуются из шестнадцатеричных данных в двоичные данные функцией hex2bin, и еще выведем текущее числовое значение счетчика кнопки.

Теперь нам остается только описать механизм определения команды и механизм ее обработки. Поэтому в методе init() создадим конструкцию оператора switch

Давайте разберемся, что в этом коде происходит. Оператор switch принимает значение $message, которое может быть, как просто текст сообщения (в том числе команды), так и значение объекта callbackQuery.

  1. При получении команды /start — мы выводим приветственное слово и набор кнопок: Голосовать, Помощь.
  2. При получении команды Помощь, выводим простое текстовое сообщение.
  3. При получении команды Голосовать, выводим текстовое сообщение и набор встроенных кнопок с параметром callback_data.
  4. При получении не запланированного значения, выводим текстовое сообщение.
  5. И самое интересное это когда принимаем значение в начале которого стоит action , в нашем случае это vote. Мы формируем новую клавиатуру изменяем в ней текстовое значение, увеличиваем счетчик у нажатой кнопки и подставляем новую служебную информацию в параметрах callback_data.

Для создания новой клавиатуры мы используем метод setParams(), а для отправки изменений мы используем метод changeVote(). Здесь остановим внимание на методах Bot API

  1. editMessageReplyMarkup — меняем клавиатуру у заданного сообщения
  2. answerCallbackQuery — позволяет выводить уведомление о проделанной работе CallbackQuery, мы его используем, уведомляя пользователя что он удачно проголосовал.

Подводим итоги

Мы рассмотрели некоторые способы взаимодействия между пользователем и ботом, в основном это элементы интерфейса бота. Исходный код можно скачать по этой ссылке. Далее нас ждет знакомство с медиа-файлами.

Комментарии

Авторизуйтесь через Telegram, чтобы оставить комментарий.
Откройте бот @SiteAuthBot, нажмите кнопку Старт/Start. Следуйте инструкциям бота.

Внимание!
Убедитесь, что эта страница открыта в браузере, а не в приложении Telegram. В противном случае авторизация пройдет только в приложении Telegram.

30 in лучше выводить с постраничной навигацией по 10 шт например, у Телеграм если не ошибаюсь установлено ограничение. У меня была ситуация, когда на 32 строке кнопок был косяк, но постраничка решила проблему.

А вывести не сложно если из базы получить массив то стандартными функциями (foreach, for, do while . ) php можно спокойно это сделать.

что нужно дописать этому боту сюда-

чтобы он вел лог отдельно для кажлого чайт айди в папке log ?

Например если вы переходите по ссылке https://t.me/your_bot/start=123456789

Значение будет лежать:
1. Если приводить к объекту json_decode(file_get_contents(‘php://input’))->message->text
2. Если приводить к ассоциативному массиву json_decode(file_get_contents(‘php://input’), true)[‘message’][‘text’]

Это значение будет /start 123456789

ТАК я формирую ссылку

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

Старт выглядит также как у вас

1. Просьба оформить топик на форуме все еще актуальна.
2. У вас нет необходимого case поэтому условие проваливается в default, обратите внимание я вам выше писал, какое значение вам будет прилетать /start 123456789, где 123456789 в вашем случае это подставленный $chat_id

/start 123456789 и /start — разные case

Ссылка на основную публикацию
Карта с определением координат широты и долготы
Онлайн сервис определения координат на карте России. Удобный поиск GPS координат (широта, долгота) по адресу в России, определение местоположения по...
Какие российские платежные системы
Международных платежных систем не так много. Но они дополняют друг друга. А благодаря своей универсальности их сервис позволяет переводить деньги...
Какие самсунги поддерживают беспроводную зарядку
Обращаем Ваше внимание на то, что данный интернет-сайт и его содержимое носят исключительно информационный характер и ни при каких условиях...
Карта судов в порту находка
Автоматический поиск расположения судна в море основывается на данных поступающих с АИС. Текущее положение судна, отбытие из порта и прибытие...
Adblock detector