как создать меню в боте телеграм
IoBroker. Inline меню для Telegram бота
В этой статье мы с вами по шагам будем создавать меню для telegram бота Умного Дома. Рекомендую изучить минимальные азы по языку программирования JavaSсript, это облегчит понимание того, что тут вообще происходит.
Приготовления
При увеличении количества написанных скриптов, будет нарастать бардак в дереве, поэтому рекомендую сразу приучать себя разбивать скрипты по группам.
Добавим новую группу в папку common
И назовем ее например Telegram. В этой группе в дальнейшем можно будет создавать все скрипты, которые будут относиться к работе с драйвером Telegram.
Вот теперь можно добавить наш будущий скрипт для меню. Для этого надо выделить созданную группу Telegram и нажать кнопку Новый скрипт
Поменяем имя на Телеграм бот, и сохраним изменения.
Все готово к созданию меню для Умного дома.
Создаем Меню
Предварительно необходимо на листике или в уме подготовить набросок древовидной структуры будущего меню
В этой статье попробуем реализовать подобную структуру меню.
Не обязательно придерживаться разбиения по комнатам, рекомендую в основные ветки выносить управление тем, что чаще всего используется, т.к. допустим для запуска Сцены 3 в зале надо сделать целых 4 нажатия!
Ежедневно запускать сценарий по такому длинному пути быстро надоест 🙂
Набросаем наше дерево в скрипте
В первой строке в квадратных скобках перечисляются основные кнопки (ветки) меню, плюс дополнительно добавляется кнопка Закрыть. Она позволит закрывать меню в чате бота, чтобы у нас не получилось куча сообщений от бота с открытыми менюшками. Ну и в конце текст в кавычках ‘Меню’ тоже обязателен. В этом месте будет указываться название вышестоящей ветки меню, т.к. первая строка уже является верхушкой дерева, то текст в этом месте дублирует начало.
Отступы для каждой строки сделаны лишь для удобства восприятия структуры меню и никакой функциональности не несут.
Внимательный читатель, надеюсь, обратил внимание что названия веток меню в наброске и в коде отличаются 🙂 Почему так сделано, будет описано дальше.
Дальнейший код будет описан только в объеме, необходимом для оформления своего меню, плюс краткое пояснение функций.
Добавляем в скрипт весь остальной код.
Уже на этом этапе можно проверить работу меню. Для этого сохраняем скрипт, запускаем и в Telegram отправляем боту слово Меню (внимание, слово должно быть с большой буквы) или Кнопки.
Inline меню для Telegram бота
IoBroker. Inline меню для Telegram бота
IoBroker. Inline меню для Telegram бота
В этой статье мы с вами по шагам будем создавать меню для telegram бота Умного Дома. Рекомендую изучить минимальные азы по языку программирования JavaSсript, это облегчит понимание того, что тут вообще происходит.
Приготовления
При увеличении количества написанных скриптов, будет нарастать бардак в дереве, поэтому рекомендую сразу приучать себя разбивать скрипты по группам. 
Добавим новую группу в папку common и назовем ее например Telegram. В этой группе в дальнейшем можно будет создавать все скрипты, которые будут относиться к работе с драйвером Telegram.
Вот теперь можно добавить наш будущий скрипт для меню. Для этого надо выделить созданную группу Telegram и нажать кнопку Новый скрипт
Поменяем имя на Телеграм бот и сохраним изменения.
Все готово к созданию меню для Умного дома.
Создаем Меню
Предварительно необходимо на листике или в уме подготовить набросок древовидной структуры будущего меню
В этой статье попробуем реализовать подобную структуру меню.
Не обязательно придерживаться разбиения по комнатам, рекомендую в основные ветки выносить управление тем, что чаще всего используется, т.к. допустим для запуска Сцены 3 в зале надо сделать целых 4 нажатия!
Ежедневно запускать сценарий по такому длинному пути быстро надоест 🙂
Набросаем наше дерево в скрипте
В первой строке в квадратных скобках перечисляются основные кнопки (ветки) меню, плюс дополнительно добавляется кнопка Закрыть. Она позволит закрывать меню в чате бота, чтобы у нас не получилось куча сообщений от бота с открытыми менюшками. Ну и в конце текст в кавычках ‘Меню’ тоже обязателен. В этом месте будет указываться название вышестоящей ветки меню, т.к. первая строка уже является верхушкой дерева, то текст в этом месте дублирует начало.
Отступы для каждой строки сделаны лишь для удобства восприятия структуры меню и никакой функциональности не несут.
Внимательный читатель, надеюсь, обратил внимание что названия веток меню в наброске и в коде отличаются 🙂 Почему так сделано, будет описано дальше.
Дальнейший код будет описан только в объеме, необходимом для оформления своего меню, плюс краткое пояснение функций.
Добавляем в скрипт весь остальной код.
Уже на этом этапе можно проверить работу меню. Для этого сохраняем скрипт, запускаем и в Telegramотправляем боту слово Меню(внимание, слово должно быть с большой буквы) или Кнопки.
Управление
Переходим к следующему шагу. Добавим в скрипт команды управления оборудованием (свет, бойлер, сценарии, насосы, краны, телевизор, кондиционер и т.д.). Для этого создадим виртуальный выключатель (код добавим в самое начало скрипта)
Дальше вставим в скрипт команды управления светом на кухне на примере виртуального выключателя
должно получиться так
Ранее в статье был момент, когда названия веток (кнопок) немного менялись и стали отличаться от наброска меню. Весь смысл в том, что названия всех кнопок в меню бота должны бытьуникальны, это связано с особенностями API Telegram. Подробнее можно почитать тут. Иначе при нажатии на одинаковые названия кнопок в меню, всегда будут выполняться команды только для какой-то одной кнопки, даже если вы на нее не нажимали.
Разберем подробнее, что же мы сделали:
switch— сравнивает выражение со случаями, перечисленными внутри неё, а затем выполняет соответствующие инструкции. Подробнее тут.
command— будет содержать уникальное имя нажатой кнопки
Для кнопки Выключить все тоже самое, только записываемое значение false.
Сохраняем и пробуем! (результат можно увидеть на вкладке Объекты. Будет меняться значение виртуального выключателя).
Для элементарного меню и простых команд этого уже достаточно. А для тех, кто хочет большего, продолжим.
Красивости
Начнем добавлять различные красивости: отображение текущего состояния, обновление состояний при нажатии кнопки, красивый вывод состояний, эмодзи и т.д.
За вывод подобной информации отвечает функция funcTopText
В функцию автоматически через переменную command передается нажатая кнопка дерева (например Меню, Спальня, Кухня. Свет и т.д.), самый нижний уровень дереве меню передать нельзя (например Кино, Бойлер, Бра и т.д.). И уже в самой функции с помощью уже знакомой конструкции switch (command) можно добавить вывод необходимой информации о состоянии оборудования или просто какой-то текст для выбранной ветки меню. В примере выше указана ветка Меню, в ней выводим температуры (пока как простой текст) в комнатах Зал и Спальня.
Как сделать форматирование текста жирным или курсивом, можно почитать тут.
Выведем температуру в зале из реального объекта. Надо выбрать из ваших существующих объектов, иначе будет ошибка.
Из объекта mysensors.0.70.3_TEMP.V_TEMP считываем значение температуры и подставляем его в строку (подробнее о команде getState тут).
n – символ новой строки, является эквивалентом символа перевода строки.
Добавим в меню Кухняотображение состояния виртуального выключателя
Состояние false, как-то скучно… да объясняй потом жене, ребенку, друзьям что за false такой…
Используем функцию stateSelection(state), которая будет вместо false/true возвращать нормальный текст Вкл/Выкл. и дополнительно выводить время подачи команды (или любой другой текст на ваше усмотрение)
Так гораздо лучше и понятней смотрится!
В функцию stateSelection(state) при необходимости можно добавить другие типы состояний, если они будут выводиться в заголовок меню.
Может еще улучшим? Сделаем, чтобы при нажатии кнопки Кухня. Свет сразу в заголовке менялось состояние, для этого воспользуемся функцией
Функция подписывается на переданный объект obj и в течение заданного количества миллисекунд timeout ожидает изменения объекта obj. Если событие произошло и была задана дополнительно (но не обязательно) проверка флага ACK, проверяется на условие ack=true. Если совпало или не была задана проверка флага ACK – отобразится текст Выполнено. Если не совпало – Не выполнено. После этого функция отписывается от объекта, чтобы в будущем снова не реагировать на него.
Внесем изменения в скрипт
javascript.0.Test.Switch.command – объект для проверки выполнения команды. Т.к. у нас нет отдельного объекта для обратной связи, используем для этой цели объект-команду.
2000– время ожидания в миллисекундах
topTextGlobal – эту переменную ставим всегда!
Для кнопки Включитьдобавили проверку флага ACK, для кнопки Выключить нет. Сохраняем и пробуем что получилось.
Уберем проверку флага ACK для кнопки Включить и снова пробуем.
Не забываем смотреть на всплывающие сообщения!
Эмодзи
Пришла очередь добавить символы Эмодзи. Для этого заходим в библиотеку один или два. Выбираем подходящие символы для меню. Возьмем для кнопки Назад следующий символ
Выделяем, копируем и вставим в наш скрипт.
Внимание!Менять надо во всех местах скрипта, где использовано словоНазад.
Замену лучше делать через Поисккомбинацией клавиш ctrl+H
Сохраняем и любуемся результатом
Итоговый скрипт меню
Лайфхак
Через @botFather можно добавить команду вызова меню
Тогда для вызова меню будет достаточно ввести символ / и в выпадающем меню выбрать /buttons. В результате появится кнопочка вызова меню рядом с меню смайликов. Роман Б. (Haba) Россия, ст-ца. Динская@Habaaaa Отблагодарить автора
Как создать меню для Telegram бота
Чтобы создать меню бота, на странице чат-бота откройте вкладку «Меню» и нажмите «Добавить элемент».
Введите название команды. Можно использовать до 30 символов в поле: латинские буквы, цифры и знак «_».
Введите описание — то, для чего можно использовать данную команду. В этом поле можно ввести до 200 различных символов, а также добавить эмодзи.
Выберите цепочку, которая запустится после выбора команды из списка.
Нажмите “Добавить”, чтобы добавить команду в меню.
Расширяйте меню дополнительными командами с помощью кнопки «Добавить элемент». После создания команд нажмите «Сохранить», чтобы сохранить созданные элементы.
Меню с командами готово к работе.
Вы также можете создать клавиатурное меню для пользователя из кнопок «Быстрые ответы». Вы можете добавить до 10 таких кнопок и добавить в них эмодзи.
Они отображаются у пользователя под полем ввода текста, скрываются при нажатии на соответствующий значок и пропадают после отправки следующего сообщения.
Оценка: 4 / 5 (22)
Пример создания своего чат-бота для Телеграм
На самом деле, здесь нет ничего сложного. Главное продумать действия (команды) для бота.
Для своего я сделала небольшое меню из 3 пунктов — где можно забрать полезный подарок, получить доступ к моему бесплатному курсу по партнеркам и связаться со мной в личке.
Выглядит эта менюшка следующим образом:
Самого бота я создала через платформу Manybot. Сделать это можно бесплатно, однако в диалоге с вашим ботом пользователи будут видеть ссылку на разработчика.
Какие возможности есть у бота?
1) Создание пользовательских команд и ответов на них.
2) Создание меню из команд. Это удобно, так как пользователям не надо вводить команды, а можно использовать для навигации готовое меню.
3) Возможность отправлять сообщения подписчикам (в том числе отложенные), просматривать количество подписчиков в боте.
4) Несколько языков интерфейса, в том числе русский.
5) Можно настроить автопостинг в бота из rss блога или сайта, а также с YouTube-канала, ВК, Твиттер.
Как создать своего Телеграм-бота?
Я записала пошаговую видеоинструкцию — пример создания простого бота с меню:
Итак, для начала создания своего Телеграм-бота, зайдите на сайт manybot.io, там нажмите по кнопке «Создать бота». Вас перебросит на первоначальные инструкции.
Нужно перейти на Manybot в Телеграме и нажать «Начать» (Start) в чате с ботом, чтобы получить дальнейшие инструкции.
Вы увидите описание возможностей бота на английском, а также вам предложат выбрать язык.
После выбора русского языка вы сможете приступить к созданию бота, все инструкции будут даваться в диалоге (чате).
Первым делом вводим команду /addbot или просто жмем по ней в полученном от бота сообщении.
Далее получаем инструкцию по созданию своего бота в BotFather. Опять же, нам нужно кликнуть по логину из сообщения и перейти на диалог с BotFather.
Следующим шагом нужно напечатать в диалоге с BotFather команду /newbot и следовать дальнейшим подсказкам. А именно:
1) На английском нам предлагают указать название (имя) своего будущего бота. Я его назвала ViktoriaHelps и отправила это название в диалоге BotFather.
2) Далее указываем логин для бота. Обязательное условие, чтобы логин оканчивался на bot. Можно написать концовку слитно или через нижнее подчеркивание: _bot.
3) После этого получила сообщение с поздравлением, что мой бот создан, ссылку на него в Телеграм, а также токен, который мне нужно скопировать.
Далее возвращаюсь к диалогу с Manybot (выбираю его в контактах слева) и отправляю в чат сообщение со скопированным токеном.
В ответ получаю сообщение о том, что мне нужно добавить описание (приветственное сообщение) для своего бота. Это описание пользователь будет видеть в чате с ботом, когда перейдет на него.
Отправив Manybot описание, вижу сообщение, что мой бот успешно создан. Чтобы он появился в контактах слева, перейдите по ссылке на него и нажмите в чате «Начать».
Кстати, описание бота в любое время можно отредактировать. Делается это через команду /setdescription в диалоге с Manybot.
Настраиваем команды и меню в боте
Далее переходим к настройкам нашего бота и переключаемся на диалог с ним. Жмем внизу чата «Начать».
В ответ получаем сообщение с описанием нашего бота (то, что мы указали на предыдущем шаге). Его же будут видеть и подписчики вашего бота.
В сообщении ниже отобразится меню для управления вашим ботом (его видите только вы, как владелец бота). Если это сообщение не появилось, вы можете вызвать его сами, введя в чат команду /help или выбрав раздел «Помощь» в меню бота.
В этом сообщении отображаются команды, которые вы можете использовать для управления ботом. Например, чтобы отправить новое сообщение подписчикам, воспользуйтесь командой /newpost. Просто кликните по ней, либо отправьте в диалог боту и следуйте дальнейшим подсказкам. То же и с другими командами.
Давайте для примера создадим несколько своих команд в боте и затем встроим их в меню, чтобы новые подписчики могли взаимодействовать с вашим ботом.
Для этого в меню под полем ввода сообщения кликаем по пункту «Пользовательские команды».
Выбираем «Создать команду».
Указываем название нашей команды – оно должно быть латиницей и без пробелов. Название может содержать цифры и нижнее подчеркивание (для разделения слов). Перед командой используем значок слеш (косую черту) /.
Вводим команду в поле сообщения и жмем Enter.
Следующим шагом нужно задать ответ бота на команду. То есть, подписчик вводит в чат команду и получает на нее заготовленный ответ. Так это работает.
Мой пример ответа ниже, чтобы его сохранить, жмем «Enter», а затем кнопку «Сохранить».
Получаем сообщение, что команда успешно создана, видим ее в меню бота ниже. Таким же образом создаем и другие команды. В частности, команду, при нажатии на которую пользователь будет получать сообщение со ссылкой на скачивание подарка.
Кстати, при создании команды мы можем добавить вопрос – обычный, развернутый, с вариантами ответа. Чтобы добавить вопрос, следуйте подсказкам бота.
Если вы хотите отредактировать или удалить команду, кликните по ней в меню.
Откроется новое меню, в котором вы сможете выбрать желаемое действие.
Например, выбираем редактирование. Здесь действия будут следующими:
1) Сначала нам нужно удалить предыдущий ответ на команду и подтвердить действие.
2) Затем нажать «Добавить сообщения к команде».
3) Вводим новый ответ, отправляем боту, сохраняем.
4) Получаем сообщение, что команда успешно отредактирована.
Чтобы вернуться к предыдущему меню, нажимаем «Назад».
Как добавить команду в меню бота?
Теперь покажу, как добавить команду в меню. Это меню делается для удобства пользователя в диалоге с ботом, чтобы ему не приходилось вбивать команды вручную.
Нажимаем по кнопке «Настроить главное меню».
Выбираем «Добавить пункт меню».
Выбираем нашу ранее созданную команду.
Вводим название для данного пункта меню и отправляем боту. Например, я назову «Перейти в блог».
Видим, что новый пункт добавился в меню!
Далее, если проскроллим эту менюшку вниз, увидим кнопки для добавления нового пункта меню. Все точно также – сначала создаем команду, затем добавляем ее в меню.
А также кнопку возврата на предыдущее меню.
Как удалить команду из меню?
Если вы хотите удалить пункт меню или поменять его название, просто кликните по нему.
У вас откроется другое меню с доступными действиями. Здесь много настроек, в частности можно менять расположение пунктов, создавать многоуровневые меню. Но сейчас не об этом…
Опять же, проскроллив менюшку вниз, вы увидите кнопки «Переименовать» и «Убрать пункт из меню». Выбираете нужное действие и следуете подсказкам бота.
Например, я просто удалю пункт «Перейти в блог» из меню.
Вернуться к главному меню и настройкам бота
Для этого кликаем на кнопку «Назад» в открывающихся меню, пока не выйдем на главное.
Здесь, кстати, есть еще один интересный пункт «Ответы на формы». Он работает в паре с вопросами, которые можно добавлять к командам. То есть, эти формы нужны, чтобы получать обратную связь от подписчиков. Поэтому сначала нужно добавить вопрос к команде, а затем в этом разделе вы найдете ответы пользователей на ваши вопросы. Там же будет и логин пользователя, поэтому вы сможете связаться с ним в личке.
Ну а в пункте «Настройки» главного меню можно подключать Телеграм-каналы для постинга из бота, настроить автопостинг из RSS, Twitter, YouTube, VK. А также настроить часовой пояс.
Как увидеть меню своего бота и покликать по нему в качестве нового пользователя?
Здесь вам понадобится другой аккаунт Телеграм. Вы можете создать его на другой номер телефона. Выйти из аккаунта под одним логином и зайти уже под новым. Далее переходите по ссылке на своего бота и тестируете его, как новый пользователь.
Итак, в этой статье с видеоуроком мы разобрали процесс создания своего бота в Телеграм, научились задавать команды для нашего бота и ответы на них, а также сделали меню из этих команд для удобства пользователей.
С уважением, Виктория Карпова
ТАКЖЕ РЕКОМЕНДУЮ ЭТИ МАТЕРИАЛЫ: