Telegram bot. Добавим интерактивности

В этой заметке я писал о том, как по команде бота выдаётся случайное фото, а если добавить параметр к команде, то будет целенаправленный выбор темы.
У меня в том боте, который я неспешно сейчас пишу, есть нечто подобное: по команде выбирается случайный…

В этой заметке я писал о том, как по команде бота выдаётся случайное фото, а если добавить параметр к команде, то будет целенаправленный выбор темы.
У меня в том боте, который я неспешно сейчас пишу, есть нечто подобное: по команде выбирается случайный канал и из него достаются картинки. Если указали канал, то выбор идёт из указанного. До какого-то момента это меня устраивало, пока список каналов не стал подходить к 10. И тогда я задумал сделать такую возможность: дать пользователю выбрать канал по нажатию на кнопку.

Вот примерно как это сделано у меня.
Не важно, что вы используете в качестве библиотеки обращения к api, важно понимание этого самого api. Мы будем работать с методом sendMessage

    this.bot.sendMessage(chatId, "Выберите канал:", {
      reply_markup: {
        resize_keyboard: true,
        inline_keyboard: [
          [{ text: "Случайно", callback_data: "random" }],
          [{ text: "Спорт", callback_data: "sport" }],
          [{ text: "Кино", callback_data: "cinema" }],
          [{ text: "Музыка", callback_data: "music" }],
        ],
      },
    });

Результат:
Результат
Здесь у нас каждый массив с объектом- это строка с кнопкой. Можно и по-другому сделать, например так:

    this.bot.sendMessage(chatId, "Выберите канал:", {
      reply_markup: {
        resize_keyboard: true,
        inline_keyboard: [
          [{ text: "Случайно", callback_data: "random" }],
          [
            { text: "Спорт", callback_data: "sport" },
            { text: "Кино", callback_data: "cinema" },
            { text: "Музыка", callback_data: "music" },
          ],
        ],
      },
    });

Alt Text

Осталось добавить обработчик нажатия на кнопку. В библиотеке node-telegram-bot-api можно это сделать используя функцию on – первый параметр задаёт событие бота, на которое реагировать, второй параметр- обработчик этого события.

// После инициализации бота, задать обработчик 
   this.bot.on("callback_query", this.callbackQuery); 
// обработчик нажатия на кнопки
  callbackQuery = (callbackQuery) => {
    const msg = callbackQuery.message;
    // Спрятать клавиатуру (оптимально)
    // await this.removeHisKeyboard(callbackQuery);
    // См. ниже пояснения
    await this.bot.answerCallbackQuery(callbackQuery.id);
    const { data = "" } = callbackQuery;
    //..
  };
  /**
   * Удалить вывод клавиатуры
   */
  removeHisKeyboard = (callbackQuery) => {
    const messageText = callbackQuery.message.text;
    const messageId = callbackQuery.message.message_id;
    return this.bot
      .editMessageText(messageText, {
        message_id: messageId,
        chat_id: callbackQuery.from.id,
        reply_markup: {
          inline_keyboard: [],
        },
      })      
  };

Про callbackQuery написано в документации по api – там же объясняется, почему нужно вызывать answerCallbackQuery . Функция removeHisKeyboard здесь может и не нужна, но если Вы хотите скрыть клавиатуру, после того, как сделан выбор, то можно ей воспользоваться. Здесь бот редактирует своё сообщение с интерактивным выбором,- он просто очищает inline_keyboard.


Print Share Comment Cite Upload Translate
APA
Stanislav Karol | Sciencx (2024-03-29T05:20:54+00:00) » Telegram bot. Добавим интерактивности. Retrieved from https://www.scien.cx/2021/05/19/telegram-bot-%d0%b4%d0%be%d0%b1%d0%b0%d0%b2%d0%b8%d0%bc-%d0%b8%d0%bd%d1%82%d0%b5%d1%80%d0%b0%d0%ba%d1%82%d0%b8%d0%b2%d0%bd%d0%be%d1%81%d1%82%d0%b8/.
MLA
" » Telegram bot. Добавим интерактивности." Stanislav Karol | Sciencx - Wednesday May 19, 2021, https://www.scien.cx/2021/05/19/telegram-bot-%d0%b4%d0%be%d0%b1%d0%b0%d0%b2%d0%b8%d0%bc-%d0%b8%d0%bd%d1%82%d0%b5%d1%80%d0%b0%d0%ba%d1%82%d0%b8%d0%b2%d0%bd%d0%be%d1%81%d1%82%d0%b8/
HARVARD
Stanislav Karol | Sciencx Wednesday May 19, 2021 » Telegram bot. Добавим интерактивности., viewed 2024-03-29T05:20:54+00:00,<https://www.scien.cx/2021/05/19/telegram-bot-%d0%b4%d0%be%d0%b1%d0%b0%d0%b2%d0%b8%d0%bc-%d0%b8%d0%bd%d1%82%d0%b5%d1%80%d0%b0%d0%ba%d1%82%d0%b8%d0%b2%d0%bd%d0%be%d1%81%d1%82%d0%b8/>
VANCOUVER
Stanislav Karol | Sciencx - » Telegram bot. Добавим интерактивности. [Internet]. [Accessed 2024-03-29T05:20:54+00:00]. Available from: https://www.scien.cx/2021/05/19/telegram-bot-%d0%b4%d0%be%d0%b1%d0%b0%d0%b2%d0%b8%d0%bc-%d0%b8%d0%bd%d1%82%d0%b5%d1%80%d0%b0%d0%ba%d1%82%d0%b8%d0%b2%d0%bd%d0%be%d1%81%d1%82%d0%b8/
CHICAGO
" » Telegram bot. Добавим интерактивности." Stanislav Karol | Sciencx - Accessed 2024-03-29T05:20:54+00:00. https://www.scien.cx/2021/05/19/telegram-bot-%d0%b4%d0%be%d0%b1%d0%b0%d0%b2%d0%b8%d0%bc-%d0%b8%d0%bd%d1%82%d0%b5%d1%80%d0%b0%d0%ba%d1%82%d0%b8%d0%b2%d0%bd%d0%be%d1%81%d1%82%d0%b8/
IEEE
" » Telegram bot. Добавим интерактивности." Stanislav Karol | Sciencx [Online]. Available: https://www.scien.cx/2021/05/19/telegram-bot-%d0%b4%d0%be%d0%b1%d0%b0%d0%b2%d0%b8%d0%bc-%d0%b8%d0%bd%d1%82%d0%b5%d1%80%d0%b0%d0%ba%d1%82%d0%b8%d0%b2%d0%bd%d0%be%d1%81%d1%82%d0%b8/. [Accessed: 2024-03-29T05:20:54+00:00]
rf:citation
» Telegram bot. Добавим интерактивности | Stanislav Karol | Sciencx | https://www.scien.cx/2021/05/19/telegram-bot-%d0%b4%d0%be%d0%b1%d0%b0%d0%b2%d0%b8%d0%bc-%d0%b8%d0%bd%d1%82%d0%b5%d1%80%d0%b0%d0%ba%d1%82%d0%b8%d0%b2%d0%bd%d0%be%d1%81%d1%82%d0%b8/ | 2024-03-29T05:20:54+00:00
https://github.com/addpipe/simple-recorderjs-demo