Telegram — бот | Полноценное меню
Рано или поздно, в жизни разработчика телеграмм-ботов приходит чёткое осознание, того что всё бренно нужно создавать более-менее полноценные меню для ботов.
А) Это удобно
Б) Удобно для кастомизации*
Суть задачи
Исходя из выше описанного следует не самый приятный вывод — обработка запросов по вебхуку, без хранения дополнительных данных, нам не светит…
Ну что же, умываемся и приступаем к работе.
Написание Изучение кода
В своей практике, специально под эту задачу, был разработан небольшой класс.
NEW! Теперь и на гитхаб)
Если не терпится, то можете сразу переходить на репозиторий, там есть экскурс.
Продолжим
Согласен, концепция, после этого, понятной не стала… Попытаюсь разъяснить. Для понимания нужно перейти на некий уровень абстракции, то есть представьте что вся структура бота состоит из разных меню, между которыми переключается юзер(можно провести аналогию с активити андроида). При активации бота пользователь оказывается в «начальном меню», из которого он может перейти, допустим, в меню «Настройка», «Информация», и тд.
И так, структура бота немного меняется, если вкратце:
В начале проверяем, существует ли запрос:
ДА ) Запускаем «обработчик» запросов
НЕТ) Остаёмся в «начальном меню», сверяем ответ юзера с доступными командами.
*это сильно упрощённый вариант, из-за этого сбивает столку. С примерами станет проще.
Продолжим.
Начнём с установки. Для установки воспользуемся compser-ом(создаём «composer.json», после копируем в него строки ниже, подробнее читайте в офф. доках)
ИЛИ подключаем вручную(скачиваем в папку с проектом)
СОЗДАЁМ ОБЪЕКТ
СОЗДАЁМ ЗАПРОС, ПРОВЕРЯЕМ ЕГО НАЛИЧИЕ И ЗАПУСКАЕМ ОБРАБОТКУ
ПРЯЧЕМ И ДОСТАЁМ ВРЕМЕННЫЕ ДАННЫЕ
РЕЗУЛЬТАТ ФУНКЦИИ
Следует заметить, что каждая[за исключением GetFromTemp(),GetError(),ReqCheck() и конструктора] функция, возвращает массив:
Каждая функция [за исключением GetFromTemp(),GetError(),ReqCheck() и конструктора], устанавливают ошибку, в случае неудачи, которую можно проверить с помощью:
Всё собрали, в путь!
NEW! решение обхода «проблемы» с https).
Воплотим в жизнь, данный пример. Разделим пространство на два файла «botmain.php»(основное меню и обработка) и «varfunc.php»(функции обработки запросов). Для лёгкости примера будем использовать telegram-bot-sdk(хорошо сделанный и оформленный проект, удобно для небольших проектов, спасибо создателю;).
В общем, листинг:
Далее в папке проекта открываем консоль и…
UPD: В рамках Хабра исходный код становится нечитабельным, без глобальной правки. Из-за этого, если вас интересуют примеры, предлагаю вам перейти на гитхаб.
IoBroker. Inline меню для Telegram бота
В этой статье мы с вами по шагам будем создавать меню для telegram бота Умного Дома. Рекомендую изучить минимальные азы по языку программирования JavaSсript, это облегчит понимание того, что тут вообще происходит.
Приготовления
Сначала необходимо установить драйвера Telegram и Script Engine. Вспомнить как это делается, можно в статье ioBroker — устанавливаем первый драйвер. Не забываем подключить своего бота к драйверу Telegram, как описано в начале статьи — ioBroker — уведомления.
Все готово к созданию меню для Умного дома.
Создаем Меню
Предварительно необходимо на листике или в уме подготовить набросок древовидной структуры будущего меню
Набросаем наше дерево в скрипте
В первой строке в квадратных скобках перечисляются основные кнопки (ветки) меню, плюс дополнительно добавляется кнопка Закрыть. Она позволит закрывать меню в чате бота, чтобы у нас не получилось куча сообщений от бота с открытыми менюшками. Ну и в конце текст в кавычках ‘Меню’ тоже обязателен. В этом месте будет указываться название вышестоящей ветки меню, т.к. первая строка уже является верхушкой дерева, то текст в этом месте дублирует начало.
Вторая строка — переход по дереву ниже на ветку Зал. Соответственно в квадратных скобках уже перечислены кнопки меню Зал. К Закрыть, добавилась кнопка Назад, которая позволит подняться на одну ветку выше и в конце укажем куда — ‘Меню’.
Третья строка — переход еще ниже в меню Зал. Сцены. Для корректной работы кнопки Назад, в конце пишем — ‘Зал’.
Отступы для каждой строки сделаны лишь для удобства восприятия структуры меню и никакой функциональности не несут.
Внимательный читатель, надеюсь, обратил внимание что названия веток меню в наброске и в коде отличаются 🙂 Почему так сделано, будет описано дальше.
Дальнейший код будет описан только в объеме, необходимом для оформления своего меню, плюс краткое пояснение функций.
Добавляем в скрипт весь остальной код.
Уже на этом этапе можно проверить работу меню. Для этого сохраняем скрипт, запускаем и в Telegram отправляем боту слово Меню (внимание, слово должно быть с большой буквы) или Кнопки.
Управление
Переходим к следующему шагу. Добавим в скрипт команды управления оборудованием (свет, бойлер, сценарии, насосы, краны, телевизор, кондиционер и т.д.). Для этого создадим виртуальный выключатель (код добавим в самое начало скрипта)
createState(«Test.Switch.command», false); // Тестовый выключатель света
Сохраним и команда createState создаст новый объект, который можно посмотреть на вкладке Объекты — javascript.0
Дальше вставим в скрипт команды управления светом на кухне на примере виртуального выключателя
case «Включить»: //включить свет на кухне setState(«javascript.0.Test.Switch.command»/*Test.Switch.command*/, true); CommandDone(‘Выполнено!’); break; case «Выключить»: //выключить свет на кухне setState(«javascript.0.Test.Switch.command»/*Test.Switch.command*/, false); CommandDone(‘Выполнено!’); break;
Должно получиться так
Ранее в статье был момент, когда названия веток (кнопок) немного менялись и стали отличаться от наброска меню. Весь смысл в том, что названия всех кнопок в меню бота должны быть уникальны, это связано с особенностями API Telegram. Подробнее можно почитать тут. Иначе при нажатии на одинаковые названия кнопок в меню, всегда будут выполняться команды только для какой-то одной кнопки, даже если вы на нее не нажимали.
Разберем подробнее, что же мы сделали:
switch — сравнивает выражение со случаями, перечисленными внутри неё, а затем выполняет соответствующие инструкции. Подробнее тут.
command — будет содержать уникальное имя нажатой кнопки
case «Включить» — сравниваем со всеми описанными в секции switch именами кнопок и ищем команды для нажатой кнопки Выключить.
setState(«javascript.0.Test.Switch.command«/*Test.Switch.command*/, true); — записываем значение True в объект Test.Switch.command. Дополнительно по команде setState можно почитать тут.
CommandDone(‘Выполнено!’); — вызываем функцию CommandDone и передаем ей текст, который хотим отобразить во всплывающем сообщении при нажатии кнопки. В данном случае текст будет Выполнено!
break; — указываем, что выполнение операций для кнопки Включить завершаем. Если не добавить команду break, JS начнет выполнение следующего case.
Для кнопки Выключить все то же самое, только записываемое значение false.
Сохраняем и пробуем! (результат можно увидеть на вкладке Объекты. Будет меняться значение виртуального выключателя).
Для элементарного меню и простых команд этого уже достаточно. А для тех, кто хочет большего, продолжим.
Красивости
Начнем добавлять различные красивости: отображение текущего состояния, обновление состояний при нажатии кнопки, красивый вывод состояний, эмодзи и т.д.
В функцию автоматически через переменную command передается нажатая кнопка дерева (например Меню, Спальня, Кухня. Свет и т.д.), самый нижний уровень дереве меню передать нельзя (например Кино, Бойлер, Бра и т.д.). И уже в самой функции с помощью уже знакомой конструкции switch (command) можно добавить вывод необходимой информации о состоянии оборудования или просто какой-то текст для выбранной ветки меню. В примере выше указана ветка Меню, в ней выводим температуры (пока как простой текст) в комнатах Зал и Спальня.
Как сделать форматирование текста жирным или курсивом, можно почитать тут.
Выведем температуру в зале из реального объекта. Надо выбрать из ваших существующих объектов, иначе будет ошибка.
case ‘Меню’: text = «*Зал*: Температура » + getState(«mysensors.0.70.3_TEMP.V_TEMP»).val + «°C, \n» + «*Спальня*: Температура 23.5 градуса \n»;
Из объекта mysensors.0.70.3_TEMP.V_TEMP считываем значение температуры и подставляем его в строку (подробнее о команде getState тут).
\n – символ новой строки, является эквивалентом символа перевода строки.
Добавим в меню Кухня отображение состояния виртуального выключателя
Состояние false, как-то скучно… Да объясняй потом жене, ребенку, друзьям что за false такой…
Используем функцию stateSelection(state), которая будет вместо false/true возвращать нормальный текст Вкл/Выкл. и дополнительно выводить время подачи команды (или любой другой текст на ваше усмотрение)
Так гораздо лучше и понятней смотрится!
В функцию stateSelection(state) при необходимости можно добавить другие типы состояний, если они будут выводиться в заголовок меню.
Может еще улучшим? Сделаем, чтобы при нажатии кнопки Кухня. Свет сразу в заголовке менялось состояние, для этого воспользуемся функцией
Функция подписывается на переданный объект obj и в течение заданного количества миллисекунд timeout ожидает изменения объекта obj. Если событие произошло и была задана дополнительно (но не обязательно) проверка флага ACK, проверяется на условие ack = true. Если совпало или не была задана проверка флага ACK – отобразится текст Выполнено. Если не совпало – Не выполнено. После этого функция отписывается от объекта, чтобы в будущем снова не реагировать на него.
Внесем изменения в скрипт
case «Включить»: //включить свет на кухне setState(«javascript.0.Test.Switch.command»/*Test.Switch.command*/, true); waitConfirmCommand(«javascript.0.Test.Switch.command», topTextGlobal, 2000, true); break; case «Выключить»: //выключить свет на кухне setState(«javascript.0.Test.Switch.command»/*Test.Switch.command*/, false); waitConfirmCommand(«javascript.0.Test.Switch.command», topTextGlobal, 2000); break;
javascript.0.Test.Switch.command – объект для проверки выполнения команды. Т.к. у нас нет отдельного объекта для обратной связи, используем для этой цели объект-команду.
2000 – время ожидания в миллисекундах
topTextGlobal – эту переменную ставим всегда!
Для кнопки Включить добавили проверку флага ACK, для кнопки Выключить нет. Сохраняем и пробуем что получилось.
Уберем проверку флага ACK для кнопки Включить и снова пробуем.
Не забываем смотреть на всплывающие сообщения!
Надеюсь, суть уловили ?
Эмодзи
Пришла очередь добавить символы Эмодзи. Для этого заходим в библиотеку один или два. Выбираем подходящие символы для меню. Возьмем для кнопки Назад следующий символ
Выделяем, копируем и вставим в наш скрипт.
Внимание! Менять надо во всех местах скрипта, где использовано слово Назад.
Как создать постоянное меню для Telegram чат-бота
Используйте меню бота, чтобы помочь пользователям найти нужную информацию в вашем боте. Создавайте команды, которые запускают определенные цепочки. Открыть меню можно кликнув по иконке со знаком «/» в поле ввода сообщений .
Чтобы создать меню бота, на странице чат-бота откройте вкладку «Меню» и нажмите «Добавить элемент».
Введите название команды. Можно использовать до 30 символов в поле: латинские буквы, цифры и знак «_».
Введите описание — то, для чего можно использовать данную команду. В этом поле можно ввести до 200 различных символов, а также добавить эмодзи.
Выберите цепочку, которая запустится после выбора команды из списка.
Нажмите “Добавить”, чтобы добавить команду в меню.
Расширяйте меню дополнительными командами с помощью кнопки «Добавить элемент». После создания команд нажмите «Сохранить», чтобы сохранить созданные элементы.
Меню с командами готово к работе.
Вы также можете создать клавиатурное меню для пользователя из кнопок «Быстрые ответы». Вы можете добавить до 10 таких кнопок и добавить в них эмодзи.
Они отображаются у пользователя под полем ввода текста, скрываются при нажатии на соответствующий значок и пропадают после отправки следующего сообщения.
Меню. Создаём меню с кнопками в telegram-боте конструктора Fleep.Бизнес
Fleep.бизнес — конструктор ботов для тех, кто хочет зарабатывать больше.
Если перейти по ссылке t.me/FleepBot , то можно создать свой первый бот бесплатно.
Меню в ботах Fleep.Бизнес даёт нам огромные возможности. Более того, без меню бизнес-бот практически теряет свою актуальность. Давайте глянем, как это работает начиная с простых меню и заканчивая сложными. И посмотрим, как их создать и привязать к сообщениям бота, как связывать с товарами, если у вас интернет-магазин. И узнаем, где ещё можно использовать меню с кнопками, для заработка.
Меню — это набор кнопок, которые ведут в другие меню с кнопками, или присылают в ответ на нажатие контент (сообщение, фото, видео, стикер и т.д.), или отправляют по ссылке внутри бота (UTM-метки) или за его пределы (в каналы и чаты, на сайты в интернете).
В первую очередь это может быть простое меню, которое ведёт пользователя по вашему боту и отвечает на его вопросы. Такой пример я показал на картинке в заголовке этой статьи. Мой бот t.me/culturenetbot при старте выдаёт именно это меню. Кнопки такого меню называются: "обычные". Обычные кнопки находятся внизу экрана под строкой для ввода сообщений.
Кнопки в меню, которые прикрепляются к сообщениям бота — называются inline-кнопки. Они выглядят вот так:
В меню может быть минимум одна кнопка и максимум 9 9 кнопок
Меню могут быть "вложенным". Это когда при нажатии какой-то из кнопок в меню бот показывает новое меню. С помощью вложенных меню создают интернет магазины и в оронк и продаж, примерно как на картинке ниже:
Воронка продаж начинается с первого меню, с пары-тройки кнопок. После нажатия одной из кнопок пользователь получает сообщение и с ним новое меню с кнопками. Каждая кнопка ведёт покупателя и пользователя бота в своё новое меню. Так до тех пор пока ваша воронка не заканчивается.
Преимущество такой ветвистости в том, что вы ведёте клиента туда, куда он хочет и в итоге продаёте ему. А ещё можете отследить всех пользователей на любом этапе. Вы увидите какие кнопки нажимали ваши пользователи и сможете разослать предложения только им — тем, кто нажимал конкретные кнопки. Но об этом позже, а сейчас продолжим уточнять, как создать меню с кнопками.
Итак, мы увидели, что меню — это набор кнопок, которые мы в него добавляем. Таких наборов мы можем сделать около сотни. В каждый набор можно добавить до 100 кнопок, если это нам нужно, конечно.
Любое меню, которое вы создадите существует само по себе и поначалу ни к чему не прикреплено. Оно просто существует в разделе "Меню" пока вы сами не укажете, где его показать.
Но "Главного меню" уже есть по умолчанию в боте. В "Главном меню" со старта нет кнопок. Как только вы добавите кнопки в "Главное меню" — это меню будет прикрепляться к первому сообщению, которое получит пользователь.
Давайте глянем как это выглядит в боте для вас, как творца бота, отправляем боту команду — /start:
После старта своего бизнес-бота получаем кнопку "Настройки": жмём её
Видим по умолчанию только
"Главное меню"
"Главное меню" есть всегда. Его нельзя переименовать или удалить. Оно просто есть. Как пустой кувшин для компота. Пока мы кувшин не наполним, то разливать из него нечего. Он просто стоит и ждёт когда его наполнят, чтоб появится на столе.
Так и меню — пока в нём нет кнопок, то оно не может нигде появиться. Оно ждёт, пока вы его наполните кнопками и прикрепите куда вам нужно. Это касается любого меню, не только "главного меню".
Но у "главного меню" есть своя особенность: как только мы добавим в него хотя бы одну кнопку, то его можно не только привязать куда захотите, но также оно появится при первом старте бота пользователем. Вот что написано в нашем конструкторе после того как мы нажмём кнопку "Главное меню" с предыдущей картинки:
Собственно, это то самое место, где мы уже можем создать кнопки в "Главном меню". Но перед тем, как создать кнопки давайте посмотрим как создать наше новое меню, которое понадобится позже.
Представьте, что вы хотите пить и у вас есть компот. Компот не может быть сам по себе, он всегда где-то хранится. Вы хотите пить — наливаете из кувшина. Но перед тем как налить компот в стакан из кувшина вы наполнили этот кувшин. Согласитесь, трудно наливать компот из пустого кувшина, как и без кувшина налить компот в стакан.
С кнопками такая же ситуация. Кнопки это наш компот и есть.
Перед тем как привязать какую-то кнопку к нужному сообщению или товару (налить компот), вам всегда понадобится создать меню (взять пустой кувшин), потом в меню создать кнопку (наполнить кувшин компотом) и только уже после привязать это меню к нужному сообщению или товару (налить из кувшина в стакан).
Вообще, когда собираешь бот, лучше продумать заранее структуру бота и записать всё это отдельно. После чего легко увидеть сколько меню понадобиться, какие в них будут кнопки и как они должны быть расположены (обычные — снизу или inline — под сообщением или под товарами).
Но сейчас мы хотели увидеть процесс рождения меню. И начнём, как обычно: /start -> Настройки -> Меню -> ➕: