Как сделать кнопку в смарт боте

Добавил пользователь Валентин П.
Обновлено: 10.09.2024

После создания канала в Telegram не стоит ограничиваться стандартными возможностями платформы. Оформляйте публикации эффектно, удобно для читателей – пользуйте для этого сторонними ботами, позволяющими реализовать необходимый функционал. Один из вариантов – кнопки-ссылки, голосования-реакции. Посмотреть, как это выглядит можно в нашем Телеграм-канале – t.me/postiumru.

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

Более 2000 рекламных агентств и фрилансеров уже работают с сервисом.
Подключиться можно самому за 1 день.
Зарабатывайте с первого потраченного рубля, без начальных ограничений, без входного барьера.
Выплаты на WebMoney, на карту физическому лицу, реинвестирование в рекламу.
У вас остаются прямые доступы в рекламные кабинеты, рай для бухгалтерии по документообороту и оплатам.

Как добавлять кнопки в Телеграм-канале

Добавление кнопок в Telegram-каналах осуществляется через двух ботов. С помощью первого – @ControllerBot – осуществляется создание постов через браузер и из интерфейса мобильного/компьютерного приложения, добавление канала и отслеживание статистики. С помощью второго – @BotFather – создание бота для постинга. Добавление кнопок и реакцией в Telegram-каналах – дело двух минут и ниже мы познакомим вас с процессом.

Создаём бота для канала: пошаговая инструкция

Отлично. Половина работы успешно проделана, далее – настройка созданного бота.

Настраиваем бота

Через @ControllerBot нужно выполнить предварительную настройку созданного бота:

Готово! Все настройки завершены.

Как сделать пост с url-кнопкой и реакциями в Telegram

Сложности позади, осталось понять логику создания красивых публикаций через нашего бота:

Готово! Пост опубликован с реакциями, ссылками на сайт в виде кнопок и изображением.

Данный раздел касается только Telegram, VK и Viber.

В ботах Facebook Messenger постоянное меню статично, а для описанного в этом разделе используются "Быстрые ответы", которые настраиваются очень просто и не имеют нюансов в использовании.

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

В конструкторе Chatforma они выглядят следующим образом:

Так и должно быть, причем не стоит удалять эти теги - если их не будет, то кнопка просто не сработает. А как быть, если у кнопок одинаковые названия? Об этом далее.

В этой статье мы с вами по шагам будем создавать меню для telegram бота Умного Дома. Рекомендую изучить минимальные азы по языку программирования JavaSсript, это облегчит понимание того, что тут вообще происходит.

Приготовления

Сначала необходимо установить драйвера Telegram и Script Engine. Вспомнить как это делается, можно в статье ioBroker - устанавливаем первый драйвер. Не забываем подключить своего бота к драйверу Telegram, как описано в начале статьи - ioBroker - уведомления.

Все готово к созданию меню для Умного дома.

Создаем Меню

Предварительно необходимо на листике или в уме подготовить набросок древовидной структуры будущего меню

Набросаем наше дерево в скрипте

Отступы для каждой строки сделаны лишь для удобства восприятия структуры меню и никакой функциональности не несут.

Внимательный читатель, надеюсь, обратил внимание что названия веток меню в наброске и в коде отличаются :) Почему так сделано, будет описано дальше.

Дальнейший код будет описан только в объеме, необходимом для оформления своего меню, плюс краткое пояснение функций.

Добавляем в скрипт весь остальной код.

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

Управление

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

createState("Test.Switch.command", false); // Тестовый выключатель света

Сохраним и команда createState создаст новый объект, который можно посмотреть на вкладке Объекты - javascript.0

Дальше вставим в скрипт команды управления светом на кухне на примере виртуального выключателя

Должно получиться так

Ранее в статье был момент, когда названия веток (кнопок) немного менялись и стали отличаться от наброска меню. Весь смысл в том, что названия всех кнопок в меню бота должны быть уникальны, это связано с особенностями API Telegram. Подробнее можно почитать тут. Иначе при нажатии на одинаковые названия кнопок в меню, всегда будут выполняться команды только для какой-то одной кнопки, даже если вы на нее не нажимали.

Разберем подробнее, что же мы сделали:

switch - сравнивает выражение со случаями, перечисленными внутри неё, а затем выполняет соответствующие инструкции. Подробнее тут.

command - будет содержать уникальное имя нажатой кнопки

case "Включить" - сравниваем со всеми описанными в секции switch именами кнопок и ищем команды для нажатой кнопки Выключить.

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;

2000 – время ожидания в миллисекундах

topTextGlobal – эту переменную ставим всегда!

Для кнопки Включить добавили проверку флага ACK, для кнопки Выключить нет. Сохраняем и пробуем что получилось.

Уберем проверку флага ACK для кнопки Включить и снова пробуем.

Надеюсь, суть уловили ?

Эмодзи

Выделяем, копируем и вставим в наш скрипт.

В прошлом коде это было так:

if '/1' in command:

p = subprocess.Popen(cmd1, shell=True)

bot.sendMessage(chat_id, "Комп уйдёт в спящий режим через одну минуту простоя")

А вот в случае с этими кнопками они отправляют в чат то, что на них написано.

То есть в условие мы пишем то же самое, что и в название кнопки.

В данном коде это будет выглядеть вот так:

if 'Одна минута' in command:

p = subprocess.Popen(cmd1, shell=True)

bot.sendMessage(chat_id, "Комп уйдёт в спящий режим через одну минуту простоя")

Получается нам с прошлого раза особо много не нужно переписывать и вникать в суть если вы уже написали себе ботов под ваши задачи.

В предыдущий код нужно добавить только "формирование" кнопок и то чего не хватает где подчеркнуто красным .

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

Каждая строка в блоке это ряд кнопок. В первой и второй строке по две кнопки. В четвёртой одна. Ниже пример с изменениями.

Думаю суть понятна.

ССылка на говнокод с кнопками:

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

Уважаемый автор, вас не затруднит ответить? Было бы неплохо добавить несколько кнопок в декстопную версию телеграма

И снова спасибо за удобный материал =) Кстати, если планируете продолжать развивать серию статей про ботов - уделите внимание авторизации. Вы же не хотите что бы посторонние люди вам звук переключали xD

История повторяется, мы такое делали на ICQ.

Новый тест TelegramTV бота

Доброго времени суток.

Появилось немного свободного времени. И я решил посвятить это время своему хобби. "Говнокодингу". Уверен так назовут мой код, гуру.

А именно доработкой своего TelegramTV бота: @t_tv_bot (текущая версия)

Что я сделал в новой версии на данный момент:

- Взял за основу базы каналов всем нам известный сервис iPTV, чье имя нельзя произносить в слух. Более 1000 каналов.

Ссылка на тестовый TelegramTV bot: @ttvdemo_bot

Приглашаю всех протестить мое творение и высказать свои мнения.

По ограничениям на данный момент.

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

Ссылки на потоки во время теста временные, поэтому копировать, воровать и прочее бесполезно. Не тратьте время.

Читайте также: