React bot telegram что это
Обновлено: 19.09.2024
Для работы понадобятся
- Редактор кода, чтобы писать код. Если не знаете, какой выбрать — мы уже рассказывали. Если не умеете писать код, то вот инструкция, как его написать и запустить.
- Node.js любой версии, выше 0.12. Нужно, чтобы библиотека для ботов заработала. Как установить Node.js.
- Консоль. Или встроенный в систему вариант, или какой-нибудь другой.
- VPN. Возможно но не факт, потому что Телеграм работает не везде.
Шаг 1. Регистрируем бота
Находим в поиске Телеграма бота @botFather — это главный инструмент для создания ботов. Набираем в нём /newbot .
Придумываем название и имя боту. Название — то, как он будет подписан в списке контактов. Имя — строка, по которой его можно будет найти. Обратите внимание, что имя должно оканчиваться на bot . В ответ мы получим токен — длинную последовательность символов, которая пригодится нам в будущем. Мы назвали бота echoKeksBot , но вам придётся придумать другое название, потому что это уже занято. Извините.
Шаг 2. Создаём проект
Создаем папку в любом месте и открываем её в консоли. Там пишем npm init -y — эта команда создаст файл package.json , который выглядит примерно так:
Теперь установим node-telegram-bot-api — это библиотека для создания телеграм-ботов на Node.js. Введём команду:
Шаг 3. Запускаем бота
Тут всё просто, в консоли пишем node index.js , заходим к нашему боту в телеграм и начинаем с ним общаться. Не закрывайте консоль — бот работает только на вашем компьютере, и без консоли он не станет отвечать.
Как видим, бот успешно отвечает. Но бот-повторяха — не интересно, усложним задачу. Пусть бот присылает нам картинку.
Шаг 4. Отсылаем картинку
Добавим картинку с Кексом в папку с проектом. Для отправки изображения используем метод .sendPhoto() — передадим в него id чата и путь до картинки. Получится такой код:
Запускаем бота, проверяем, работает:
Шаг 5. Добавим клавиатуру. И пёсика
Добавим фотографию милого пёсика в корень проекта. Теперь там две картинки.
Создадим конфигурацию для клавиатуры в боте, пусть у нас будет 3 кнопки: «Хочу кота», «Хочу пёсика» и «Пойти учиться».
Чтобы отличить первые 2 кнопки, воспользуемся полем callback_data , где будем передавать тип кнопки. Для обработки нажатий добавим слушателя на событие callback_query , и в зависимости от значения query.data отправим нужную картинку к пользователю.
Не забудем про возможные ошибки и предложим пользователю попробовать снова, если он ввёл что-то не то. Перезапустим бота и проверим — всё работает. Главное — не закрывать консоль, иначе бот перестанет отвечать.
Полный файл с кодом: index.js.
В следующей части как раз разберёмся, как загрузить и запустить бота на сервере, чтобы он работал, даже если ваш компьютер выключен.
Познакомьтесь с JavaScript бесплатно
На интерактивных тренажёрах. А вместе с JavaScript — бесплатное знакомство с HTML и CSS.
В этой статье я хочу познакомить с новой библиотекой Urban Bot, которая адаптирует React для написания чат-ботов. Ниже я расскажу, зачем эта библиотека появилась на свет, какие дает преимущества и как написать вашего первого чат-бота.
Как мы заметили выше, чат-боты это полноценные UI приложения. А какой язык в 2020 и какая библиотека наиболее подходит для разработки UI приложений? Правильно, JavaScript и React. Такая интеграция позволяет легко и непринужденно строить чат-боты любой сложности без единого знания об API мессенджеров. Далее я расскажу, как создавать простые компоненты и на их основе строить сложных чат-ботов, работать с навигацией, создавать диалоги любой вложенности, писать одно приложение и запускать в любых мессенджерах, и многое другое.
Эхо бот
Кнопки
Навигация
Теперь, когда пользователь напишет "/echo" — отрендериться компонент Echo , когда "/counter" — управление перейдет в Counter . Роуты также могут принимать path как regexp.
Визуальный пример, чтобы увидеть как будет работать код.
Если вы почувствовали концепцию, то уже поняли, что можно создавать десятки, сотни компонентов, комбинировать их вместе, либо разделять роутером, делиться компонентами между разными чат-ботами и строить действительно сложные SPA внутри мессенджеров.
Форматирование текста
Диалоги
Пример плоского диалога. Бот задаст первый вопрос, после ответа задаст второй, потом третий, потом запустит 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, вам будет очень удобно.
Запуск в мессенджерах
Теперь перейдем к практике. Выше мы создавали компоненты и приложение, но не запускали его. Для запуска нам нужно выбрать мессенджер или мессенджеры, в которых мы хотим запустить наше приложение.
Скажем, у нас есть готовое приложение 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.
В каждом мессенджере уникальный 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, ставьте звезду на гитхабе, будем рады любому фидбеку.
Как оказывается, написать бота для telegram, как два пальца об асфальт.
Легко в общем!
Для чего можно использовать бота:
- Социальные боты в электронной коммерции. Боты-продажники;
- Боты напоминалки;
- Проводить обучение;
- Использоваться для управления умным домом и многое другое, все на что способна фантазия!
Итак, чтобы написать бота нам потребуется:
Кувалда!
Вначале опишу какой простой бот получился в Telegram
Кстати можете посмотреть возможности ботов, на примере моего бота в телеграм, который позволяет вести список задач.
И так описание бота, который будем разрабатывать:
Начинаем писать бота в Telegram
В телеграм находим BotFather.
Придумываем название боту. И имя юзера. Он нам выдаст токен, который будем использовать.
Также у него есть и другие команды, для задания описания бота, команд и прочего:
Начинаем разработку бота на Node.js
В консоли пишем:
для создания package.json и управления зависимостями.
Файл index.js получился такой самый простой:
Вставляем свой токен, который получили от BotFather и можно его разместить на бесплатном хостинге Heroku, и все сразу заработает, самый простой ботик!
Но лучше токен, поместить в переменную окружения, также можно на Heroku.
Полезные ссылки по ботам Телеграм
Описываю какой код бота для Телеграм получился
Подключаем библиотеку для работы с файлами
И также остальные текстовые фразы обрабатывает.
Этим кодом создается клавиатура инлайновая.
Здесь обрабатывается команда /start
Здесь создаем клавиатуру.
Этот код отправляет классическую музыку, случайно выбранную из папки ./klasik/
Telegram API vs Telegram Bot API
Рассказываю по порядку.
Телеграм использует собственный протокол шифрования MTProto. MTProto API (он же Telegram API) — это API, через который ваше приложение Телеграм связывается с сервером. Telegram API полностью открыт, так что любой разработчик может написать свой клиент мессенджера.
Для написания ботов был создан Telegram Bot API — надстройка над Telegram API. Перевод с официального сайта:
Почему-то мало кто знает о том, что Телеграм боты могут работать напрямую через Telegram API. Более того, таким образом можно даже обойти некоторые ограничения, которые даёт Bot API.
Вся информация ниже будет по умолчанию относиться и к Bot API, и к Telegram API. О различиях я буду упоминать. От некоторых ограничений Bot API можно избавиться с помощью локального сервера, об этом в конце статьи.
На чём пишут Телеграм-ботоы
Бот должен уметь отправлять запросы Телеграм-серверу и получать от него апдейты (updates, обновления).
Как получать апдейты в Bot API
Получать апдейты можно одним из двух способов:
Поллинг — просто регулярно отправлять запрос к серверу Телеграма для получения обновлений,
Вебхук — сделать так, чтобы Телеграм сам отправлял запросы по нужному URL.
Если вы попробуете загуглить, как написать Телеграм-бота на Python, вам предложат воспользоваться библиотеками python-telegram-bot и telebot. Но не стоит.
Ну, если вы только хотите познакомиться с разработкой ботов и написать своего hello-world-бота, то можете, конечно использовать и их. Но эти библиотеки могут далеко не всё. Среди разработчиков ботов лучшей библиотекой для ботов на Python считается aiogram. Она асинхронная, использует декораторы и содержит удобные инструменты для разработки. Ещё был хороший Rocketgram, но он давно не обновлялся.
Также ботов часто пишут на JavaScript, для этого обычно используется Telegraf. Библиотеки есть и для многих других языков, но используют их реже.
Пример кода бота
Если вы хотите получить какое-то представление о том, как вообще выглядит код бота, вот вам пример использования на aiogram с его странички на GitHub:
Этот бот будет отвечать на команды /start и и /restart.
Создание бота
Единственная информация о Телеграм-ботах, которой в интернете полным-полно: как создать бота. Это делается через специального бота BotFather. Когда вы создадите бота, BotFather даст вам его токен. Токен выглядит примерно так: 110201543:AAHdqTcvCH1vGWJxfSeofSAs0K5PALDsaw . Именно с помощью токена вы сможете управлять ботом.
Один пользователь может создать до 20 ботов.
В BotFather удобно управлять ботами своими командой /mybots .
Юзернеймы
При создании бота нужно выбрать юзернейм. После этого поменять его будет очень сложно.
Как поменять юзернейм бота
Если у вас есть бот, и вы хотите дать ему более короткий юзернейм (который может быть занят неработающим ботом), то вы, теоретически, можете это сделать через @BotSupport.
Для этого бот должен (внезапно) быть рабочим, а также поддерживать английский язык.
Принято использовать такой формат обращения в поддержку:
Если вы везунчик 9999 lvl — вам ответят.
Оформление бота
Открыв бота, пользователи могут увидеть его профиль.
Оформление бота настраивается в BotFather: меню /mybots → Edit Bot . Там можно изменить:
Информация (About) — это текст, который будет виден в профиле бота.
Аватарка. Аватарки ботов, в отличие от аватарок пользователей и чатов, не могут быть анимированными. Только картинки.
Команды — тут имеются ввиду подсказки команд в боте. Подробнее о командах ниже.
Inline Placeholder — об инлайн-режиме см. ниже.
Стандартный совет: Потратьте свое время и заполните описание и информацию бота, чтобы пользователям было понятнее и проще его использовать. Можете оставить там свои контакты. И поставьте аватарку, чтобы бота было проще отличать от других чатов в списке.
Запуск бота пользователем
В Телеграме можно делиться файлами до 2 ГБ, но в Bot API более жесткие лимиты: боты могут скачивать файлы до 20 МБ и отправлять файлы до 50 МБ.
Работа с файлами в Bot API
Если бот уже загрузил файл на сервер Телеграма, то он может использовать file_id, чтобы отправлять этот файл.
Загружать файл на сервер можно в том числе и по URL файла.
Куда может писать бот
Бот может писать в личку только тем пользователям, которые его запустили. Пользователь может заблокировать бота, и тогда бот снова не сможет ему писать.
Боты не могут писать другим ботам.
В группе боту можно дать права администратора, чтобы он мог выполнять действия админов.
В одной группе может быть до 20 ботов. В публичные группы (группы с юзернеймом) ботов могут добавлять только админы.
Как боты добавляют кнопки
Подробнее о кнопках тоже
Супергруппы
На самом деле многие группы в Телеграме являются супергруппами.
Почему так? Раньше было четкое разделение на группы и супергруппы. По задумке, супергруппы — это группы для сообществ. Супергруппы могут иметь больше участников, публичные ссылки и другие плюшки.
Со временем, видимо, решили, что это неудобная концепция. Теперь обычная группа становится супергруппой, когда у группы меняются какие-нибудь настройки (подробнее тут). Вот такой костыль.
В этой статье под группами я подразумеваю и супергруппы, и обычные группы.
id пользователей и чатов
У каждого пользователя, бота, группы, канала в Телеграме есть собственный id. Различать чаты в коде бота следует именно по id, потому что он никогда не меняется.
В токене бота первая часть — это его id. Например, токен 110201874:AAHdqTcvCH1vGWJxfSeofSAs0K5PALDsaw принадлежит боту с id 110201874 .
В Bot API перед id супергрупп и каналов пишется -100. Так, id 1356415630 превращается в -1001356415630 . Осторожно: вы не сможете сохранить это значение в 32-битный тип числа.
Команды — о них в следующем пункте.
Я включил Privacy mode, а он не работает
Нужно удалить бота из группы и добавить заново.
Это могло нарушить работу антиспам- и других ботов.
Сейчас баг уже исправлен.
Команды
Команды подсвечиваются как ссылки: нажатие отправляет команду в чат.
Разметка в Telegram API (Телеграм боты)
Способы выделения текста:
Жирный текст
Моноширинный текст ("в строке" и "блоком")
Кнопки
Инлайн-кнопки
URL button — кнопка с ссылкой.
Switch to inline button. Кнопка для переключения в инлайн-режим (об инлайн-режиме см. ниже). Кнопка может открывать инлайн в том же чате или открывать меню для выбора чата. Можно указать в кнопке запрос, который появится рядом с никнеймом бота при нажатии на кнопку.
Дополнительные виды кнопок
Login URL button — специальная кнопка для авторизации пользователей на сайте. Использовалась, например, в официальном боте @discussbot (до добавления нативных комментариев в Телеграм).
Клавиатурные кнопки
Есть другой тип кнопок: keyboard buttons. Они отображаются вместо клавиатуры как подсказки. При нажатии на такую кнопку пользователь просто отправит этот текст.
При этом в личных чатах с помощью кнопки можно:
Запросить номер телефона пользователя,
Запросить геолокацию пользователя,
Открыть у пользователя меню создания опроса.
По умолчанию, если показать кнопки в группе, они будут видны всем пользователям. Вместо этого можно отобразить кнопки одновременно для этих пользователей:
Ещё о кнопках
Показать клавиатурные кнопки,
Убрать все клавиатурные кнопки,
Таким образом, нельзя показать оба типа кнопок одновременно.
Взаимодействие с ботом
Ссылки на Телеграм боты.
Юзернеймы ботов работают так же, как и любые другие юзернеймы в Телеграме: бота @examplebot можно открыть по ссылке t.me/examplebot.
Также существует прямая ссылка: tg://resolve?domain=examplebot
Подробнее о ссылках tg://
Такие ссылки могут не только заменять ссылки t.me, но и задавать свои действия. Например, tg://settings открывает настройки.
Список известных таких ссылок есть канале @DeepLink.
Ссылка на добавление в группу
По ссылке t.me/examplebot?startgroup=true у пользователя откроется меню: выбор группы для добавления бота.
Прямая ссылка: tg://resolve?domain=examplebot&startgroup=true
Диплинки
По ссылке t.me/examplebot?start=<ваш текст> пользователь может запустить бота с каким-то стартовым параметром ( <ваш текст> ).
Как это выглядит:
При переходе по ссылке бот открывается как обычно.
Часто диплинки используются для реферальных программ (в качестве параметра можно передавать id пользователя, который поделился ссылкой). Есть и другие применения. Телеграм боты.
Прямая ссылка: tg://resolve?domain=examplebot&start=<ваш текст>
Инлайн-режим. Телеграм боты.
Инлайн-режим (inline mode) — это специальный режим работы бота, с помощью которого пользователь может использовать бота во всех чатах.
В группе можно запретить использовать инлайн всем или некоторым участникам. В официальных приложениях Телеграм это ограничение объединено с ограничением на отправку стикеров и GIF.
Результаты инлайн-режима
Результаты можно отображать двумя способами:
Сеткой. Удобно для выдачи картинок.
- Вертикальным списком. Удобно для выдачи текста.
Можно совмещать два типа, но корректно отображается это только на Telegram Desktop.
Приватность и геопозиция в инлайне
Inline feedback
Inline feedback — это апдейты о выбранных инлайн-результатах. Включаются через BotFather.
Создание наборов стикеров для телеграм ботов
Боты (и только боты!) могут создавать наборы стикеров. При этом каждый набор стикеров должен принадлежать какому-то пользователю. Посмотреть свои наборы стикеров пользователь может с помощью бота @Stickers.
Телеграм боты. Платежи
Телеграм предоставляет ботам возможность принимать платежи от пользователей. Это делается через провайдеров ЮMoney, Сбербанк, Stripe и ещё 7.
Эта возможность используются редко, потому что для использования провайдеров нужно юридическое лицо.
Платежи, к тому же, не работают на iOS из-за ограничений Apple.
HTML-игры в ботах
Telegram Login Widget
Вы можете добавить на свой сайт авторизацию через Телеграм. Процесс авторизации будет проходить так:
Пользователь должен будет ввести свой номер телефона.
Бот Telegram попросит подтвердить вход.
Telegram Login Widget не связан с Login URL button (см. раздел про кнопки выше), а является его альтернативой.
Разработка Телеграм ботов
Какие апдейты можно получать
Получение апдейтов: Bot API vs Telegram API
Если вы получили апдейт в Bot API, то второй раз вы его уже не получите.
В Telegram API это не так: пользователь может пользоваться мессенджером через несколько клиентов, каждый из которых должен получать апдейты.
Если запустить для одного бота несколько программ на Telegram API, то каждая из них будет получать все апдейты.
Ограничения Bot API не позволяют сделать то же самое.
Лимиты
Конечно, на запросы к серверу существуют лимиты. В Bots FAQ на сайте Telegram названы следующие:
Эти лимиты не строгие, а примерные. Лимиты могут быть увеличены для больших ботов через поддержку.
Другие известные ограничения в Telegram собраны на limits.tginfo.me — см. раздел про ботов.
Рассылка по пользователям
30 пользователям в секунду.
Смена владельца бота
Осенью 2020 года появилась возможность передавать ботов другому человеку. Это можно сделать в настройках бота в BotFather. Для этого на вашем аккаунте должна быть включена двухфакторная авторизация — не менее, чем за 7 дней до передачи. Передать бота можно только пользователю, который что-либо ему писал.
Локальный сервер Bot API
Также осенью 2020 года исходники Bot API выложили на GitHub. Теперь вы можете поднять собственный сервер Bot API. На GitHub перечислены следующие преимущества:
Скачивание файлов с сервера без ограничения (ограничение на отправку файлов пользователями в Телеграме — 2 ГБ),
Загрузка файлов на сервер до 2000 МБ,
Загрузка файлов на сервер с помощью локального пути и URI файла,
Использование любого локального IP-адреса для вебхука,
Использование любого порта для вебхука,
Возможность увеличить максимальное число соединений до 100000,
Получение локального пути файла вместо загрузки файла с сервера.
Юзерботы
В начале статьи я рассказывал о том, что такое Telegram API и Telegram Bot API.
Юзерботов следует использовать аккуратно: за большую подозрительную активность аккаунт могут ограничить или забанить.
Заключение. Телеграм боты
Я постарался собрать в одном месте и структурировать информацию о всех возможностях Телеграм-ботов. Большое спасибо vanutp, NToneE и Grinrill за помощь с фактами. Если мы что-то забыли — пишите, исправлю.
Я специально не разделял большую статью на несколько постов, чтобы можно было быстро найти нужную информацию. К тому же, в начале статьи есть её содержание. Так что можете сохранить её к себе и использовать как справочник 🙂
Вообще интерфейс бота (то есть интерфейс чата) имеет много ограничений. Но плохо ли это? Действительно удобнее использовать инструмент, когда это часть привычной среды. Я часто прямо в переписке нахожу нужную картинку или информацию с помощью инлайн-ботов. Как заядлый пользователь Телеграма, я люблю использовать ботов. И создаю ботов. И вы создавайте.
Читайте также: