В этой статье мы разберемся, как создать чат-бота с помощью React через библиотеку Urban Bot. Мы создадим простого бота Telegram, как на этой гифке.

Русский перевод.

Предварительные условия:

Для создания чат-ботов с помощью React мы будем использовать свежую библиотеку Urban Bot. Он настраивает React на написание чат-ботов, которых можно запускать в разных мессенджерах. В настоящее время поддерживаются Telegram, Facebook и Slack.

Основное преимущество Urban Botв том, что вам не нужно ничего знать об API мессенджеров, о том, как работают чат-боты под капотом. Все, что вам нужно, — это базовые знания React. Вы просто описываете свое приложение, используя готовые компоненты и хуки. Для управления разными экранами можно использовать компонент Маршрутизатор. Кроме того, вы можете интегрировать что-либо из экосистемы React, например, использовать Mobx или Redux в качестве менеджера состояний или просто делиться частями из своего React Web или React Native. Программы.

Установка

Самый простой способ запустить его — использовать стартер Urban Bot. Он имеет версии TypeScript и JavaScript.

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

TypeScript

npx create-urban-bot my-app

JavaScript

npx create-urban-bot my-app --template js

После установки стартер будет находиться внутри каталога my-app, где вы запускаете create-urban-bot.

Настроить Телеграмм

Откройте my-app в своем любимом редакторе, откройте файл .env и вставьте свой токен Telegram.

Кроме того, нам нужно активировать визуализацию Telegram. Раскомментируйте // import ‘./render/telegram’; внутри src/index.ts или src/index.js.

Все готово для разработки вашего бота Telegram! Запустите скрипт npm run dev и напишите своему боту что-то связанное с токеном Telegram. Оно должно работать как приложение по умолчанию с двумя командами /echo и /logo.

Если вы видите ошибку вида error: [polling_error] {"code":"EFATAL","message":"EFATAL: Error: connect ECONNREFUSED 127.0.0.1:9150"}, вероятно, интернет-провайдер блокирует подключение Telegram. Вам нужно использовать VPN, или вы можете использовать браузер Tor, см. пример.

Разработка

Сначала откройте src/App.js или src/App.ts , удалите весь код по умолчанию, за исключением того, что функция App возвращает null;

Во-вторых, добавим исходное пустое значение todos и действия addTodo и toggleTodo. Мы будем использовать хук useState из React для привязки значения todos и рендеринга. Будьте осторожны, если мы изменим todos, мы не должны его мутировать, мы всегда должны передавать новый массив в setTodos.

Теперь мы хотим, чтобы после того, как пользователь отправит текст в чат, мы добавили новую задачу к нашему значению todos. Urban Bot предоставляет хуки React для подписки на действия пользователя. Для этой цели мы можем использовать useText хук React из @urban-bot/core.

Все готово для отображения нашего todos . Urban Bot предоставляет синтаксис HTML для форматирования текста. Давайте создадим новый массив с форматированным текстом. <s>...</s> означает зачеркивание, <br /> следующая строка.

Кроме того, создайте массив кнопок для изменения статуса завершено каждой задачи. Для использования кнопок мы должны использовать компонент Button. Чтобы иметь действие переключения после щелчка, мы должны вызвать функцию toggleTodo с идентификатором, по которому выполняется щелчок.

В настоящее время функция App возвращает значение null, поэтому наш бот ничего не отображает. Чтобы исправить это, мы должны вставить наши готовые значения в компонент ButtonGroup и вернуть его. Мы передаем отформатированный текст в ButtonGroup title prop и кнопки в ButtonGroup children. maxColumns является необязательным параметром для разделения всех кнопок максимум на три в ряд.

Кроме того, если todos пусто, отобразим соответствующий текст.

Давайте проверим вашего бота! Например, если вы введете боту «добавить задачу», он должен вернуть задачу и кнопку для переключения своего статуса.

Если вы введете что-то еще, он вернет новое сообщение с двумя задачами. Сделаем так, чтобы каждый раз было одно сообщение и оно редактировалось после изменения todos . Чтобы включить это, добавьте реквизит isNewMessageEveryRender={false} в ButtonGroup. Вы можете сделать это поведение для всех компонентов, если передадите это свойство компоненту Root внутри src/render/telegram.js .

<ButtonGroup title={title} maxColumns={3} isNewMessageEveryRender={false}>

Окончательный код src/App.js

Функционал удаления мы оставили, но я не буду его описывать, потому что он не открывает новых концепций, это просто улучшения, вы можете увидеть это в финальном примере на github.

И последнее, что важно, а что, если в наш чат-бот начнут писать два пользователя или больше, не будут ли это пересечениями? Нет. Urban Bot делает каждый экземпляр приложения уникальным для каждого пользователя, поэтому вам вообще не нужно думать об управлении сеансом, у каждого пользователя будет свой todos. Несмотря на то, что это серверное приложение, вы не почувствуете разницы, как если бы вы писали обычное клиентское приложение React.

Резюме

Мы рассмотрели, как написать простое приложение Todo List с помощью React. Основная цель статьи — показать базовую концепцию Urban Bot. Мы использовали только один компонент приложения, но можно создать десятки и сотни компонентов и создать действительно сложный SPA внутри любого чат-бота. Кроме того, мы запускаем только мессенджер Telegram, но мы можем запустить этот пример на Facebook и Slack, а в будущем и на любом мессенджере, поддерживающем чат-боты.

Если вам понравилась идея, ставьте звездочку на Репозиторий Urban Bot, это будет лучшей мотивацией для дальнейшего развития проекта.

Ссылки