Как добавить лайки и дизлайки в Telegram-канале с помощью ботов
Статья поможет в создании постов с реакциями при работе со своим каналом в Телеграм и научит использовать 2 простых бота.
Использование реакций
Лайки, дизлайки и реакции очень важны для продвижения Вашего канала в Телеграм.
- Они создают у читателей канала впечатление, что темы, освещаемые на канале, вызывают у аудитории живой интерес, и, в результате, у читателей появляется желание стать подписчиками канала.
- Потенциальные рекламодатели также принимают решение о размещении на канале рекламы, учитывая активность читателей. Обилие лайков и дизлайков свидетельствует о высокой популярности канала.
- Они побуждают читателей самих проявлять активность на канале.
- Реакции служат в качестве альтернативы опросам.
Количество лайков и дизлайков отмечается в правом нижнем углу поста.
Текстовые реакции также размещаются под постом, например: «Это круто – 154» или «Немного страшно – 37»
Как добавить лайки и дизлайки к посту в Телеграм
Для добавления кнопок существует бесплатный набор инструментов в Телеграме; один инструмент служит для создания бота, другой – для управления им.
Как создаются боты на канале
1. Через поиск находим @BotFather с синей галочкой — официальный бот Телеграм
2. Жмем на «Запустить» или на START.
3. В строку для сообщений вставляем команду /newbot и отсылаем сообщение.
4. Придумываем имя для бота. Имя может быть на латинице или на кириллице.
5. Придумываем юзернейм, которое должно обязательно оканчиваться словом bot. Оно пишется на латинице. В качестве юзернейма можно взять название канала, при условии, что оно не занято.
После этого @BotFather дает ссылку на вновь созданного бота и его токен (ссылка выглядит, как длинный набор цифр и букв) – эту ссылку необходимо сохранить для дальнейшей работы.
6. Добавляем бота в администраторы канала. Для того, чтобы это сделать, зайдите на Ваш канал и кликните по иконке с тремя точками и в развернувшемся меню выбираем «Управление каналом».
7. Кликаем на вкладку «Администраторы», затем — на «Добавить Администратора». Вместо имени канала вставляем скопированную ссылку на Вашего бота, полученную от @BotFather. 
8. Кликаем на бота, подтверждая добавление его в Администраторы. Не меняем его возможности по умолчанию и кликаем на «Сохранить».
Сохранить
Настройка бота
Следующий этап – это настройка бота с помощью @ControllerBot, специального бота, предназначенного для управления другими ботами. Необходимо сконнектить его с Вашим ботом-администратором.
Через поиск ищем @ControllerBot обязательно с белым рупором на синем фоне, имеющий юзернейм (внимание!) @ControllerBot.
1. Чтобы запустить бот кликаем на «Запустить» или на START. Выбираем русский язык.
2. Из предложенного списка действий выбираем /addchannel.
3. Появляется предложение создать бота с помощью @BotFather и вставить в чат скопированную ссылку на токен.
ссылка на токен
Поскольку Вами уже создан бот, просто вводим ссылку на токен в диалоговое окно, после чего жмем на Enter.
4. После того, как токен добавлен, Вам предлагается добавить бота в Администраторы канала. Так как Вы уже проделали эту операцию, переходим сразу к следующему шагу №2. Требуется переслать боту @ControllerBot какое-нибудь сообщение с вашего канала (можно также переслать @username или GrouplD).
@username или GrouplD
Проще всего отправить сообщение, что Вы и делаете. Выбираете какое-нибудь сообщение из группы и правой кнопкой мышки кликаем на «Переслать сообщение».
В качестве адресата указываем @ControllerBot. Затем указываем Ваш город для определения временного пояса.
5. Появляется сообщение, что добавление канала заверено. Теперь у Вас появилась возможность размещать посты и начать управлять ими.
канал добавлен
Как разместить пост, содержащий реакции
Вы можете создавать посты в Вашем настроенном боте, либо в общем боте, нажатием на клавишу «Создать новый пост», после чего система перенаправляет Вас на бота — администратора группы.
Создать новый пост
Вам следует запустить Вашего бота нажатием кнопки «Запустить». После запуска Вам предлагается сделать настройку форматирования, установить звуковые уведомления в группе и предварительный просмотр. Уведомления лучше оставить включенными– эта функция отсылает всем новым подписчикам на ваш канал звуковые уведомления о публикации свежих постов, если они захотят отключить уведомления, им придется сделать это вручную. Настроив все функции, кликаем на «Продолжить».
Приступаем к размещению поста. Печатаем текст в диалоговом окне или просто вставляем туда готовый. Чтобы увидеть, как будет выглядеть публикация, жмем на кнопку «Предпросмотр». Убедившись, что все в порядке, жмем Enter.
На этом этапе настало время разместить реакции: это значит вставить лайки, дизлайки или какие-нибудь смайлы. В выпадающем списке находим кнопку «Добавить реакции». Помимо реакций возможно вставлять файлы, кнопки, а также комментарии.
Вводите в диалоговое окно нужный текст с разделительным знаком (слеш) / или смайлики без пробелов. К примеру: класс / фу. В качестве лайков или дизлайков используются 2 смайлика – большой палец вверх или большой палец вниз. Бот содержит инструкции, как следует правильно отправлять смайлики.
палец вверх/палец вниз
Вот что получается. Реакцию при желании можно заменить нажатием кнопки «Удалить реакции», и отослать другую. Имейте в виду, что сменить реакцию можно только прежде, чем пост уже будет опубликован в группе.
Отправляете пост в группу, нажатием кнопки «Далее». Вы можете опубликовать пост немедленно, или отложить публикацию. Нужное действие следует подтвердить.
Итак, пост опубликован в группе. Отслеживать количество реакций можно по числу, расположенному рядом с эмодзи.
В реакцию Вы можете добавить до 6 любых эмодзи.
В случае использования одинаковых реакций, Вы можете не вводить их каждый раз по-новому – в боте заложена функция запоминания последней реакции.
Заключение
Кнопки со смайликами повышают активность читателей канала и позволяют получить интерактивную реакцию Ваших подписчиков на содержимое публикаций. С их помощью Вы можете проводить опросы. Советуем использовать наряду с лайками и дизлайками другие эмодзи, и, конечно, реакции в виде текстовых сообщений.
Urban Bot или как писать чат-ботов для Telegram, Slack, Facebook… на React.js
В этой статье я хочу познакомить с новой библиотекой Urban Bot, которая адаптирует React для написания чат-ботов. Ниже я расскажу, зачем эта библиотека появилась на свет, какие дает преимущества и как написать вашего первого чат-бота.
В отличии от большинства чат-бот библиотек, которые чаще всего просто оборачивают http запросы в функции с готовыми аргументами и предоставляют подписки вида bot.on(‘message’, callback) , иногда позволяя передавать контекст между вызовами, Urban Bot предлагает совершенно иной подход к разработке чат-ботов — через декларативное программирование и компонентный подход. Живой пример, написанный на Urban Bot, вы можете попробовать в Telegram, cсылка на чат-бот, и посмотреть код на GitHub.
Как мы заметили выше, чат-боты это полноценные UI приложения. А какой язык в 2020 и какая библиотека наиболее подходит для разработки UI приложений? Правильно, JavaScript и React. Такая интеграция позволяет легко и непринужденно строить чат-боты любой сложности без единого знания об API мессенджеров. Далее я расскажу, как создавать простые компоненты и на их основе строить сложных чат-ботов, работать с навигацией, создавать диалоги любой вложенности, писать одно приложение и запускать в любых мессенджерах, и многое другое.
Отправка сообщений
Так выглядит самый простой пример на Urban Bot. Для отправки текстового сообщения нам нужно создать функцию и вернуть из него готовый компонент Text с текстом внутри, который мы хотим отправить. Когда компонент отрендериться, все пользователи чат-бота получат сообщение «Hello, world!».
Изображение можно отправить так:
Urban Bot имеет готовый набор компонентов, для каждого вида сообщений, для файлов File, для кнопок ButtonGroup и много других, подробнее можно взглянуть здесь. В каждый из них можно передать определенный набор пропсов, например, имитировать будто бот печатает сообщение 1 секунду <Text simulateTyping=<1000>> .
Получение сообщений
Мы рассмотрели как посылать сообщения, давайте разберемся как подписываться на сообщения от пользователей. За подписки в Urban Bot отвечают React Hooks.
Чтобы подписаться на текстовые сообщения, мы можем использовать хук useText.
Urban Bot предоставляет готовы набор хуков для разных типов сообщений. Например, useImage, если пользователь отправил изображение, useFile и т.д. Полный список здесь. В каждый хук также приходит мета информация, кто отправил сообщение и т.д.
Эхо бот
Теперь, зная базовые концепции, мы можем соединить получение и отправку сообщения. Напишем простой компонент, который после получения сообщения отправит его пользователю обратно.
В этом компоненте мы впервые добавим работу с переменными через React хук useState. Этот хук возвращает переменную и функцию, чтобы ее изменять. React.useState нужен, чтобы изменение переменной приводило к ререндеру и, соответсвенно, отправке нового сообщения. Мы определим начальное значение переменной text как «Привет» и передадим в компонент Text . Также мы подпишемся на сообщения от пользователей с помощью хука useText , и будем изменять text через функцию setText . После вызова setText React перерендерит компонент Echo с новым значением, и пользователь получит новое сообщение с тем что он сам отправил боту.
Кнопки
Давайте также напишем пример с кнопками, сделаем простейший счетчик. Для этого нам понадобятся компоненты ButtonGroup и Button . Каждой кнопке мы определим свой обработчик, который будет менять count на +1 или -1 и будем передавать результат в ButtonGroup в проп title. Мы установим проп isNewMessageEveryRender как false , чтобы при последующих ререндерах отправлялось не новое сообщение с новыми кнопками, а просто изменялось начальное сообщение.
Навигация
Мы написали два простых компонента эхо и счетчик. Давайте представим, что мы хотим чтобы они были у нас в одном чат-боте, но работали независимо. Для этого мы можем подключить компонент Router и разделить компоненты по разным путям. Пути — это обычные сообщения от пользователей.
Теперь, когда пользователь напишет «/echo» — отрендериться компонент Echo , когда «/counter» — управление перейдет в Counter . Роуты также могут принимать path как regexp.
Визуальный пример, чтобы увидеть как будет работать код.
Если вы почувствовали концепцию, то уже поняли, что можно создавать десятки, сотни компонентов, комбинировать их вместе, либо разделять роутером, делиться компонентами между разными чат-ботами и строить действительно сложные SPA внутри мессенджеров.
Форматирование текста
Urban Bot позволяет стилизовать сообщения через привычные HTML теги. Писать жирным <b> , курсивом <i> , зачеркнутым <s> , переносить строки <br /> и так далее, полный список здесь.
Диалоги
Чат-боты могут вести диалоги с пользователем, что-то спрашивать, реагировать на сообщения в зависимости от ответа пользователя. В Urban Bot встроен компонент Dialog , который позволяет легко создавать диалоги любой сложности.
Пример плоского диалога. Бот задаст первый вопрос, после ответа задаст второй, потом третий, потом запустит callback onFinish с готовыми ответами. На каждом шаге можно обрабатывать ответ пользователя через callback onNext .
Можно получать на следующем шаге прошлый ответ через паттерн render-props .
Можно добавить валидацию на каждый шаг.
Также возможно построение более сложных диалогов, когда бот отвечает определенным образом в зависимости от ответа пользователя. Для предопределенных ответов можно использовать кнопки.
Состояние
Что вы можете использовать для управления состоянием? Все то же что и в любом React приложении. Можете использовать React useState и передавать состояние ниже по дереву компонентов через пропсы или React Context. Можно использовать библиотеки для управления состоянием: Redux (пример), MobX (пример), Apollo и любые другие, которые обычно используют вместе с React, вы можете даже переиспользовать готовые части из готовых React Web или React Native приложений, так как Urban Bot использует тот же чистый React, который работает в миллионах приложений.
Сессия
Urban Bot запускается на сервере, соответсвенно, все логика от всех чатов и пользователей обслуживается на одном железе, что кардинально отличается от стандартных React приложений, которые запускаются на стороне каждого клиента. Urban Bot решает эту проблему на своей стороне и отображает приложение уникальным для каждого пользователя, так что, если вы уже писали на React веб или мобильные приложения, вы не почувствуете разницу.
В любом примере на Urban Bot уже вшита работа с сессией. Например, в примере ниже у каждого пользователя, кто зайдет в персональный чат-бот, будет его собственный счетчик.
Если нам понадобится глобальный счетчик, то к этому примеру можно сделать хук, который будет содержать уже общую информацию.
Также, в любом месте приложения мы можем получить данные о конкретном чате, какой пользователь написал, с каким никнеймом и т.д. Если чат-бот персональный, то chat и from будут совпадать.
Типизация
Urban Bot написан на TypeScript, соответсвенно проект полностью типизирован, и если вы пишете на TypeScript, вам будет очень удобно.
Запуск в мессенджерах
Большой плюс Urban Bot, что он не привязан ни к одному мессенджеру. Есть основной пакет @urban-bot/core , который позволяет создавать абстрактных чат-ботов, а уже их подключать к определенным мессенджерам. В данный момент есть поддержка Telegram, Slack, Facebook. В дальнейшем, мы планируем добавлять любые мессенджеры, где есть чат-боты и открытое API. Если вам интересно, и вы хотите писать Urban Bot приложения для других мессенджеров, скажем Viber, Discord или у вас есть свой мессенджер то пишите к нам в группу https://t.me/urbanbotjs, одной просьбы будет достаточно, чтобы появилось большая мотивация реализовать ваш функционал.
Теперь перейдем к практике. Выше мы создавали компоненты и приложение, но не запускали его. Для запуска нам нужно выбрать мессенджер или мессенджеры, в которых мы хотим запустить наше приложение.
Скажем, у нас есть готовое приложение App и мы хотим его запустить его в Telegram. Для этого нам понадобится класс UrbanBotTelegram из пакет @urban-bot/telegram. Функция render из @urban-bot/core подобная ReactDOM.render и компонент Root . Мы создаем экземпляр UrbanBotTelegram и передаем туда бот токен из Telegram, также можно передать isPolling, чтобы не настраивать вебхук, и бот работал локально. Готовый экземпляр мы передаем в компонент Root , и оборачиваем наше готовое приложение и, соответсвенно, передаем все в функцию render, которая запустит все процессы.
Более подробная инструкция с видео как разрабатывать локально и деплоить Telegram бота можно прочитать в инструкции.
Если нам нужно запустить два и более мессенджера, просто используем пакеты других мессенджеров, передаем туда нужные данные и делаем по аналогии с Telegram.
Прямой вызов API
С помощью Urban Bot вы можете создавать чат-ботов просто описывая их через компоненты. А что если вам будет нужно вручную вызвать API? Каждый экземпляр UrbanBot* содержит в себе API клиент для активного мессенджера. Рассмотрим пример для Telegram.
Мы можем получить bot с помощью хука useBotContext. bot содержит client и type c типом мессенджера. client будет представлять собой экземпляр библиотеки node-telegram-bot-api . В любом месте приложения можно получить client и вызвать любой метод на ваше усмотрение, скажем блокировать пользователя, если он написал нецензурное сообщение.
В каждом мессенджере уникальный API. Если вы разрабатываете несколько мессенджеров одновременно, можно отделять функционал сравнивая bot.type .
Как попробовать?
У Urban Bot есть стартер, который позволит вам начать разрабатывать чат-ботов за минуту, сделан по аналогии с create-rect-app . Все что вам нужно, чтобы попробовать Urban Bot — это выполнить команду в терминале для
TypeScript
JavaScript
Команда склонирует шаблон приложения с нужными зависимостями и скриптами на ваш компьютер, и вам останется только открыть проект, передать ваши токены в .env файл и расскоментировать мессенджеры, которые вы хотите разрабатывать. Видео инструкция.
Итого
Несмотря на то что Urban Bot запустился только недавно, на мой взгляд — это библиотека с огромным потенциалом. Только представьте, если у вас есть базовые знания React, вы можете написать чат-бот любой сложности на все возможные платформы, создавать и использовать библиотеки с готовым набором компонентов на манер ui-kit, переиспользовать код между вашими другими UI приложеними на React, будь то web или mobile.
Если вы уже разрабатывали чат-ботов, попробуйте Urban Bot, вы почувствуете как библиотека делает за вас кучу работы. Если никогда не разрабатывали, но имеете представление о React, то напишете вашего первого чат-бота за 5 минут. Если вам понравилась идея и хотите, чтобы проект развивался дальше, вступайте в нашу группу в Telegram, ставьте звезду на гитхабе, будем рады любому фидбеку.
Add the Telegram Messaging API to your React application
Telegram is one of the most popular messaging apps and probably the most loved by developers. By championing privacy in a time where it seems increasingly elusive, Telegram has seen its popularity soar — crossing the 500 million monthly active users mark in the first quarter of 2021. This makes it a viable notification medium for web applications — seeing as it is also available on the app store for android and iOS devices. Additionally, being open source and providing a developer-friendly API, integrating a Telegram-based messaging feature on your application is relatively easier than other popular messaging applications.
In this guide, I will show you how to integrate Telegram messaging into your React application. Using Sanity to provide movie content, we will use Telegram to send ourselves movie information- for further research and possibly an outing to the cinema ��. The app we will build (and its messaging functionality) is shown in the gif below.
The code for the complete project is available on Github should you get stuck at any point.
Since we'll be working with Telegram, you need to be signed up and have a Telegram app (either mobile or desktop) running.
To keep up with the concepts that will be introduced in this article, you will need a fair grasp of Javascript ES6. You will also need to have an understanding of some basic React concepts like hooks and functional components.
You will also need to have the following installed on your workstation:
- An up to date installation of node.js and Node Package Manager (NPM)
- A code editor of your choice
Setting up a Telegram bot
The first thing we need to do is set up a Telegram bot. A ‘bot’ – short for robot – is a software program that performs automated, repetitive, pre-defined tasks. In our case, the bot sends messages with movie content.
Surprise surprise, there's a bot for creating and managing Telegram bots. His name is the botfather. To create a Telegram bot, send /newbot to the botfather. The next thing to do is select a bot name (which has to be unique) and you will receive an API token.
With your API token, you can track updates (i.e. activity related to your bot) including when messages are sent to your bot. To do this, visit the URL https://api.telegram.org/bot[TOKEN]/getUpdates where TOKEN is the token given to you by the botfather.
Getting your unique id
Telegram has a different system for identifying users — deviating from phone numbers or email addresses as a unique identifier. To send messages to a user, we need the user id. The simplest way to get our chat id is by starting a conversation with our bot and checking for the chat id in the getUpdates URL. To start a conversation with your bot, visit the URL https://t.me/[BOT_USERNAME]/start where BOT_USERNAME refers to the username for your Telegram bot. You will be directed to the Telegram app where you will see something similar to the screenshot below.
Click the START button to start a conversation with your bot. Back in the getUpdates URL, you'll see a new update.
In the from node, we can see the id of the message sender. Make a note of the displayed id as we'll use this later on.
Get user id via Deep Linking
It doesn't stop there, however. While this is extracurricular in the context of this article, it is also possible to get our user id or that of others via Telegram's deep linking mechanism. By adding a start query parameter to your bot URL ( https://t.me/[BOT_USERNAME] ), you can identify users on your system and get their Telegram user ID. This can be done via the following steps:
- Assign a unique, random string to the user.
- Present a start URL for the user to click ( https://t.me/[BOT_USERNAME]?start=[UNIQUE_STRING] ) where UNIQUE_STRING represents the string generated in step 1.
- Poll the getUpdates URL and filter the results for a message update with text /start [UNIQUE_STRING] . An implementation in Javascript is shown below.
This id can be saved for the user in the database and used anytime a notification is to be sent via Telegram.
For this article, however, we will not use deep linking as we only want to send messages to ourselves.
Sending a notification
Sending a notification is as simple as sending a GET request to https://api.telegram.org/bot[TOKEN]/sendMessage with chat_id and text as the query parameters. Remember, TOKEN is the token given to you by the botfather. Optionally, you can also include a third query parameter, parse_mode that allows you to send HTML or Markdown content to the recipient.
To see this in action, open the URL https://api.telegram.org/bot[TOKEN]/sendMessage?chat_id=[USER_ID]&text=Hello%20from%20your%20new%20bot in your browser where token is the token given to you by the botfather and USER_ID is the id of the message sender you copied earlier. You will see a response similar to the screenshot below.
Meanwhile, in your Telegram app, you will have received a message from your bot.
Building the movie application
Having understood the process of setting up a telegram bot and sending a notification via Telegram, let's see how we can use this in an application. Let's build an application to display the latest movies, along with actors and upcoming screenings. We'll use Next.js for this tutorial. Next.js is a framework built on React.js which provides several extra features, including server-side rendering and generating static websites. Create a new project using the following command.
For content management, we'll be using Sanity. Let's initialise a new Sanity project. To do this, we'll create a new folder called studio and initialise the project using the sanity init command.