Как создать чатбота в React.js?

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

Что такое чатбот?

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

Чат-боты неуклонно набирают популярность с 2010-х годов и являются важной частью практически каждого бизнеса. Боты позволяют компаниям улучшить обслуживание клиентов, повысить их вовлеченность, снизить затраты, улучшить пользовательский опыт и собрать данные о клиентах.

В наши дни чат-ботов можно встретить практически везде – на веб-сайтах, в мобильных приложениях, мобильных мессенджерах и так далее. Скорее всего, на вашем мобильном устройстве даже установлено несколько виртуальных помощников вроде Google Assistant, Siri и Bixby.

Преимущества чатбота

У использования чатбота есть множество преимуществ. Давайте рассмотрим некоторые из них.

Экономическая эффективность

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

Доступность 24/7

Чат-боты удобны тем, что обеспечивают обслуживание и поддержку клиентов 24 часа в сутки 7 дней в неделю, не требуя участия операторов. Это очень удобно, если ваши клиенты разбросаны по разным часовым поясам.

Масштабируемость

Боты могут одновременно обрабатывать большое количество обращений. Это повышает производительность бизнеса и сокращает время ожидания, что приводит к увеличению числа довольных клиентов.

Персонализация

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

Сбор данных

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

Поддержка нескольких языков

Боты не ограничиваются одним языком. Некоторые из лучших ботов могут распознавать, на каком языке был задан вопрос, и отвечать на нем.

Типы чатботов

Существует несколько типов чат-ботов, каждый из которых имеет свои уникальные возможности и сферы применения. Мы можем классифицировать их по различным признакам.

Разведка

Интеллект определяет, является ли бот “умным” или “тупым”. Под “тупыми” мы обычно подразумеваем чат-боты, основанные на правилах, которые имеют жестко закодированные правила и не могут отвечать на вопросы, с которыми они никогда не сталкивались. С другой стороны, под “умными” мы подразумеваем чат-боты на базе ИИ, которые используют NLP (обработку естественного языка) и ML (машинное обучение), чтобы понять вопрос клиента и сгенерировать индивидуальный ответ. Гибридные чат-боты используют функциональность, основанную на правилах, а также ИИ.

• Чат-боты, основанные на правилах
• Чат-боты с искусственным интеллектом
• Гибридные чатботы

Область обслуживания

Область обслуживания определяет, какова цель чатбота. Некоторые из распространенных областей обслуживания включают:

• Поддержка клиентов
• Персональный ассистент (Bixby, Alexa, Amazon Echo)
• Виртуальный ассистент по продажам

Платформа

Чат-боты могут быть развернуты на различных платформах. Выбор места размещения чатбота зависит от конкретного случая использования и целевой аудитории.

• Веб (плавающие пузырьки чата, виджеты)
• Платформы для обмена сообщениями (Facebook Messenger, Whatsapp, Viber)
• Мобильные приложения (Bixby, Siri, Google Assistant)
• IoT-устройства (умные колонки, устройства “умного дома”)

Государство

Существует две архитектуры чатботов:

• Чат-боты с информацией о состоянии дел
• Чат-боты без статических данных

Чат-боты с состоянием хранят записи о предыдущих взаимодействиях с пользователем и учитывают их, когда задают новый вопрос. Это очень удобно, поскольку позволяет им предлагать более персонализированный опыт. Как правило, они более сложны и труднее поддаются кодированию.

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

Решения для чатботов

Платформы для чатботов

Платформы для чатботов с низким кодом или без кода – это решения, которые работают “из коробки”. Они просты в использовании, не требуют развитых навыков кодирования и позволяют запустить чатбота в кратчайшие сроки.

Обычно они поставляются с простым в использовании редактором, позволяющим задавать поведение чатбота. Их можно легко развернуть на различных платформах, включая веб-сайты, Facebook Messenger, Slack, Whatsapp и так далее.

Они предлагают более низкий уровень контроля и настройки, чем пользовательские боты. Самый большой недостаток этих платформ – привязка к поставщику. Выбрав платформу, вы не сможете легко перейти на другую.

Примерами таких платформ являются Tidio, Landbot, ChatBot и AgentBot.

Пользовательский бот

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

Поскольку создание чатбота с нуля – сложная задача, вы можете ожидать, что она займет больше времени и обойдется дороже, чем использование готовой платформы для чатботов. Если ваша цель – создать продвинутого AI-бота, вам, вероятно, понадобится команда специализированных разработчиков.

Пользовательские боты могут быть написаны практически на любом языке программирования. Большинство разработчиков выбирают Python, Node.js, JavaScript и Java. Чтобы еще больше упростить процесс создания бота, существует ряд библиотек чатботов с открытым исходным кодом, из которых вы можете выбрать подходящую.

Как создать чатбота?

В этой части руководства мы создадим чатбот, основанный на правилах. Мы будем использовать React для фронтенда и Back4app для бэкенда.

Что такое Back4app?

Back4app – это облачная платформа, которая позволяет разработчикам легко создавать и поддерживать мобильные приложения. Она предоставляет интуитивно понятный пользовательский интерфейс, мощную приборную панель и такие полезные инструменты, как интерфейс командной строки (CLI), push-уведомления, аналитика, хранение данных и многое другое.

Они также предоставляют SDK для всех ваших любимых инструментов, таких как Flutter, React Native, Node.js, Angular, Android, iOS и других!

Основные возможности Back4app включают в себя:

• Интерфейс, похожий на электронную таблицу
• Интерфейсы прикладного программирования REST и GraphQL – API
• Живые запросы
• Аутентификация (включая социальную аутентификацию)
• Масштабируемый хостинг
• Уведомления

Для получения дополнительной информации, пожалуйста, ознакомьтесь с разделом “Особенности Back4app“.

Back4app придерживается предсказуемой и простой для понимания модели ценообразования. Они предлагают щедрый бесплатный план (не требуется кредитная карта), который отлично подходит для создания прототипов и тестирования платформы. Он включает в себя:

• 25 тыс. запросов к API
• Память для хранения данных объемом 250 МБ
• Передача данных 1 ГБ
• Объектное хранилище объемом 1 ГБ

Для получения более подробной информации о ценах на Back4app загляните на страницу “Цены”.

Введение в проект

Мы создадим простой чатбот с предопределенными запросами и ответами. Чатбот сможет отвечать текстом, изображениями и отображать различные варианты в зависимости от последнего запроса. Фронтенд будет построен на React, а для бэкенда мы будем использовать Back4app (с Express).

Пререквизиты:

• Опыт работы с JavaScript
• Опыт работы с React и React Hooks
• Базовое понимание HTTP-запросов и ответов
• Базовое понимание BaaS (Backend as a Service)

Сначала мы поработаем над фронтендом, затем над бэкендом и, наконец, соединим эти две части.

Чатбот Frontend

Создание приложения React

Давайте начнем с создания нового приложения React с помощью Create React App:

$ npx create-react-app react-chatbot
$ cd react-chatbot

Это создаст приложение React с именем react-chatbot и изменит ваш рабочий каталог.

Затем начните работу над проектом:

$ npm start

Наконец, откройте http://localhost:3000/, чтобы увидеть ваше веб-приложение.

Material UI

Чтобы упростить процесс создания пользовательского интерфейса, мы будем использовать Material UI – библиотеку компонентов React с открытым исходным кодом, которая реализует Material Design от Google. Библиотека компонентов включает в себя обширную коллекцию готовых компонентов, которые работают “из коробки”.

Не стесняйтесь заменить Material UI на другой фреймворк пользовательского интерфейса, например React Bootstrap или Ant Design.

Чтобы добавить Material UI в проект, запустите его:

$ npm install @mui/material @emotion/react @emotion/styled

В Material UI по умолчанию используется шрифт Roboto. Давайте установим его с помощью:

$ npm install @fontsource/roboto

Далее перейдите в index.js и добавьте следующие импорты:

// src/index.js

import '@fontsource/roboto/300.css';
import '@fontsource/roboto/400.css';
import '@fontsource/roboto/500.css';
import '@fontsource/roboto/700.css';

Пользовательский интерфейс

Перейдите к файлу App.js в папке src и замените его содержимое на следующее:

// src/App.js

import React, {useEffect, useState} from "react";
import {Box, Button, Card, CardContent, Grid, TextField} from "@mui/material";

function App() {

  const messagesListRef = React.createRef();
  const [messageInput, setMessageInput] = useState("");
  const [messages, setMessages] = useState([]);

  const sendMessage = (content) => {
    // add the message to the state
    setMessages([
      ...messages,
      {
        content: content,
        isCustomer: true,
      }
    ]);

    // TODO: post the request to Back4app
  }

  const handleSubmit = (event) => {
    event.preventDefault();

    sendMessage(messageInput);
    setMessageInput("");
  }

  return (
    <Grid
      container
      direction="row"
      justifyContent="center"
      alignItems="center"
    >
      <Card sx={{maxWidth: 420}}>
        <CardContent>
          <Box
            ref={messagesListRef}
            sx={{
              height: 420,
              overflow: "scroll",
              overflowX: "hidden",
            }}
          >
            <Box sx={{m: 1, mr: 2}}>
              {/* TODO: messages will be displayed here */}
            </Box>
          </Box>
          <Box
            component="form"
            sx={{
              mt: 2,
              display: "flex",
              flexFlow: "row",
              gap: 1,
            }}
          >
            <TextField
              variant="outlined"
              size="small"
              value={messageInput}
              onChange={(event) => setMessageInput(event.target.value)}
              fullWidth
            />
            <Button
              variant="contained"
              onClick={handleSubmit}
              type="submit"
            >
              Send
            </Button>
          </Box>
        </CardContent>
      </Card>
    </Grid>
  );
}

export default App;

1. Мы определили простую форму с вводом сообщения, которая вызывает handleSubmit() при отправке.
2. Для обработки состояния мы использовали хук React useState().
   • messageInput – текущее сообщение
   • messages – список сообщений
3. handleSubmit() очищает вход сообщения и вызывает sendMessage(), которая добавляет сообщение в состояние.

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

Создайте новую папку с именем components в папке src и в ней создайте новый файл Message.js со следующим содержимым:

// src/components/Message.js

import avatar from "../assets/bot.png";
import {Avatar, Box, Chip, Typography} from "@mui/material";

export default function Message(props) {
  return (
    <div>
      <Box
        sx={{
          my: 2,
          display: "flex",
          flexFlow: "row",
          justifyContent: props.isCustomer ? "right" : "left",
        }}
      >
        {!props.isCustomer && (
          <Avatar sx={{mr: 1, bgcolor: "primary.main"}}>
            <img src={avatar} alt="Chatbot avatar" width={32}/>
          </Avatar>
        )}
        <Box>
          <Typography gutterBottom variant="body2" component="div" sx={{mt: 1.5}}>
            {props.content}
          </Typography>
          {props.image && (
            <img src={props.image} alt="Bot response" style={{width: "100%"}}/>
          )}
          {!props.isCustomer && props.choices && (
            <Box sx={{mt: 1}}>
              {props.choices.map((choice, index) => (
                <Chip
                  key={index}
                  label={choice}
                  onClick={() => props.handleChoice(choice)}
                  sx={{mr: 0.5, mb: 0.5}}
                />
              ))}
            </Box>
          )}
        </Box>
      </Box>
    </div>
  );
}

Этот компонент принимает несколько произвольных входных данных(реквизитов), а затем выводит сообщение.

• content — содержание сообщения
• image — изображение сообщения
• isCustomer — true, если сообщение отправлено пользователем
• выбор – варианты, из которых пользователь может выбирать
• handleChoice – функция, которая вызывается при выборе варианта

Далее создайте папку с именем assets в папке src и поместите в нее изображение, которое вы хотели бы использовать в качестве аватара вашего чатбота. Не стесняйтесь использовать это.

Не забудьте назвать изображение аватара bot.png или изменить импорт в Message.js.

Наконец, чтобы использовать только что созданный компонент, замените TODO в App.js следующим образом:

// App.js

{messages.map((message, index) => (
  <Message
    key={index}
    content={message.content}
    image={message.image}
    isCustomer={message.isCustomer}
    choices={message.choices}
    handleChoice={sendMessage}
  />
))}

Не забудьте добавить импорт в верхней части файла:

import Message from "./components/Message";

Чтобы убедиться, что все работает хорошо, откройте свой любимый веб-браузер и перейдите на сайт http://localhost:3000. Попробуйте отправить несколько сообщений. Если все работает нормально, они должны быть добавлены в пользовательский интерфейс:

Чатбот Backend

Двигаясь дальше, давайте реализуем бэкэнд.

Создать приложение

Следующие шаги потребуют от вас наличия учетной записи Back4app. Если он у вас уже есть, войдите в него, в противном случае зарегистрируйтесь в бесплатном аккаунте.

Для работы с Back4app нам сначала нужно создать приложение. Когда вы войдете в свою панель управления, вы увидите список ваших приложений. Нажмите на “Создать новое приложение”, чтобы создать новое приложение.

Дайте ему пользовательское имя, выберите “NoSQL Database” в качестве базы данных и нажмите “Continue”.

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

Как только приложение будет готово, вы будете перенаправлены на панель приложений.

База данных

Давайте определим модели баз данных для чатбота.

Перейдите на приборную панель Back4app и выберите “База данных” в левой части экрана. После этого нажмите на “Создать класс”, назовите его BotSettings, отметьте “Public Read and Write Enabled” и нажмите “Create class & add columns”.

Добавьте следующие столбцы:

+-----------+------------------+---------------+----------+
| Data type | Name             | Default value | Required |
+-----------+------------------+---------------+----------+
| String    | welcomeContent   | <leave blank> | yes      |
+-----------+------------------+---------------+----------+
| Array     | welcomeChoices   | <leave blank> | no       |
+-----------+------------------+---------------+----------+
| String    | responseUnknown  | <leave blank> | yes      |
+-----------+------------------+---------------+----------+

1. Содержание welcomeContent будет отображаться, когда пользователь откроет чат
2. welcomeChoices – это варианты по умолчанию, которые пользователь может выбрать без ввода сообщения.
3. responseUnknown возвращается, если чатбот не может найти ответ на сообщение

После этого создайте строку с пользовательскими настройками. Пример:

+----------------+---------------------------+----------------------------------+
| welcomeContent | welcomeChoices            | responseUnknown                  |
+----------------+---------------------------+----------------------------------+
| Hi there!      | ["Shipping","Size guide"] | I don't understand this message. |
+----------------+---------------------------+----------------------------------+

Затем создайте еще один класс с именем BotResponse со следующими колонками:

+-----------+------------------+---------------+----------+
| Data type | Name             | Default value | Required |
+-----------+------------------+---------------+----------+
| String    | requestExact     | <leave blank> | yes      |
+-----------+------------------+---------------+----------+
| Array     | requestKeywords  | <leave blank> | no       |
+-----------+------------------+---------------+----------+
| String    | responseContent  | <leave blank> | yes      |
+-----------+------------------+---------------+----------+
| String    | responseImage    | <leave blank> | no       |
+-----------+------------------+---------------+----------+
| Array     | responseChoices  | <leave blank> | no       |
+-----------+------------------+---------------+----------+

Чатбот будет использовать эту модель для поиска правильного ответа на конкретный запрос. В первую очередь он проверит, соответствует ли сообщение какому-либо столбцу requestExact, и если нет, то содержит ли оно какие-либо requestKeywords. Если ни один из ответов не соответствует запросу, будет возвращено резервное сообщение.

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

Веб-хостинг

Поскольку мы собираемся создать Express API (с помощью Cloud Code), нам нужно включить веб-хостинг для Back4app, чтобы разместить наше приложение и сделать его общедоступным в интернете.

Чтобы включить функцию веб-хостинга, перейдите на приборную панель Back4app, выберите свое приложение, нажмите “Настройки приложения” в левой части экрана, а затем “Настройки сервера”. Найдите пункт “Веб-хостинг и пользовательские домены” и снова нажмите на “Настройки”.

Нажмите “Активировать хостинг Back4app” и выберите имя поддомена. Я буду использовать чатбот:

И наконец, нажмите “Сохранить”.

Теперь ваше приложение будет доступно по адресу:

https://<your_subdomain>.b4a.app/

Express with Cloud Code

В этой части урока мы используем Cloud Code и Express для создания API, который будет использоваться нашим фронтендом. API будет иметь следующие конечные точки:

1. / возвращает настройки чатбота
2. /ask/ ищет запрос в базе данных и возвращает ответ

В правой части экрана выберите “Cloud Code” > “Functions & Web Hosting” и с помощью веб-интерфейса создайте следующую структуру каталогов:

./
├── cloud/
│   ├── app.js
│   ├── package.json
│   └── routes.js
└── public/
    └── index.html

Поместите следующее содержимое в файл package.json:

// cloud/package.json

{
  "dependencies": {
    "body-parser": "*"
  }
}

Back4app использует этот файл для загрузки модулей через npm. Мы добавили body-parser, так как он понадобится нам позже для разбора запросов.

Поместите следующее в файл app.js, чтобы инициализировать сервер Express:

const express = require("express");
const bodyParser = require("body-parser");
const path = require("path");

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({extended: true}));

require("./routes");

Наконец, определите маршруты в файле routes.js следующим образом:

app.get("/", async (req, res) => {
  // fetch the settings and the default choices
  const query = new Parse.Query("BotSettings");
  const settings = await query.first();
  res.send({
    content: settings.get('welcomeContent'),
    choices: settings.get('welcomeChoices'),
  });
})

app.post("/ask", async (req, res) => {
  let content = req.body.content.trim().toLowerCase();
  content = content.replace(/[.,?!]/, "");  // remove punctuation

  // check for exact matches
  const exactQuery = new Parse.Query("BotResponse");
  exactQuery.equalTo("requestExact", content);
  const exactResult = await exactQuery.first();

  if (exactResult != null) {
    return res.send({
      content: exactResult.get('responseContent'),
      image: exactResult.get('responseImage'),
      choices: exactResult.get('responseChoices'),
    })
  }

  // split the messsage and check for keyword matches
  const words = content.split(" ");
  for (let i = 0; i < words.length; i++) {
    const keywordQuery = new Parse.Query("BotResponse");
    keywordQuery.equalTo('requestKeywords', words[i]);
    const keywordResult = await keywordQuery.first();

    if (keywordResult != null) {
      return res.send({
        content: keywordResult.get('responseContent'),
        image: keywordResult.get('responseImage'),
        choices: keywordResult.get('responseChoices'),
      })
    }
  }

  // fallback message if the request wasn't understood
  const query = new Parse.Query("BotSettings");
  const settings = await query.first();

  res.send({
    content: settings.get('responseUnknown'),
    choices: settings.get('welcomeChoices'),
  });
})

Этот код определяет ранее упомянутые конечные точки и логику чатбота для поиска правильных ответов.

После этого нажмите кнопку “Развернуть” в правой нижней части экрана. Если все прошло успешно, вы должны увидеть зеленое сообщение “Success in deploying your changes!”.

Убедитесь, что API работает, отправив GET-запрос на индекс API:

$ curl <your_webhost_url>

# Example: 
# curl https://chatbot.b4a.app/

{
  "content": "Hi there! 👋 I'm your digital assistant. Feel free to ask me anything!",
  "choices": [
    "Shipping",
    "Size guide",
    "Contact Us"
  ]
}

Подключение фронтенда к бэкенду

Чтобы немного упростить работу с HTTP-запросами и ответами, мы установим axios – расширяемый и простой в использовании HTTP-клиент на основе обещаний для браузера и Node.js.

Чтобы установить его, выполните следующие действия:

$ npm install axios

Добавьте импорт в верхнюю часть App.js:

import axios from "axios";

Затем определите базовый URL в верхней части App.js следующим образом:

// src/App.js

const baseURL = "https://<url_to_your_web_hosting>/";  // make sure to replace me

Мы будем передавать baseURL в Axios при каждом запросе.

Чтобы загрузить приветственное сообщение, когда пользователь открывает сайт, мы можем использовать хук useEffect(). Вставьте следующий код в App.js:

// src/App.js

useEffect(() => {
  axios.get(baseURL).then(res => {
    setMessages([
      res.data,
    ])
  })
}, []);

Этот код отправляет GET-запрос к нашему Express API и добавляет ответ в сообщения.

Последнее, что нам нужно сделать, это изменить sendMessage(), чтобы отправить POST-запрос на бэкенд и добавить ответ к сообщениям. Для этого измените sendMessage() следующим образом:

// src/App.js

const sendMessage = (content) => {
  // add the message to the state
  setMessages([
    ...messages,
    {
      content: content,
      isCustomer: true,
    }
  ]);

  // post the request and add the bot response to the state
  axios.post(baseURL + "ask", {
    content: content
  }).then(res => {
    console.log(res);
    setMessages(prevState => [
      ...prevState,
      res.data,
    ]);
  });
}

Для улучшения UX вы можете вставить следующий код в App.js, чтобы автоматически прокручивать страницу вниз при каждом ответе:

// src/App.js

useEffect(() => {
  messagesListRef.current.scrollTop = messagesListRef.current.scrollHeight;
}, [messagesListRef, messages]);

Отлично, вот и все!

Запустите сервер разработки и проверьте, все ли работает.

Заключение

Неудивительно, что чат-боты становятся все более популярными. Их потрясающие возможности позволяют компаниям улучшить обслуживание клиентов, повысить их вовлеченность, снизить затраты и так далее. Эксперты утверждают, что эра чатботов только начинается и что в будущем они станут еще популярнее!

На протяжении всего урока мы объясняли, что такое чатбот, рассматривали различные типы чатботов, платформы для чатботов и учили вас, как создать свой собственный чатбот. Созданный нами чатбот будет отлично работать в службе поддержки клиентов, отвечая на простые вопросы.

Возьмите финальный исходный код из репозитория GitHub.

Будущие шаги:

1. Сделайте бота “умнее”, добавив в базу данных больше ответов.
2. Интегрируйте чатбота с вашим сайтом.
3. Изучите, как улучшить чатбота с помощью искусственного интеллекта.

ЧАСТО ЗАДАВАЕМЫЕ ВОПРОСЫ