如何用 React.js 构建聊天机器人？

在本文中，我们将向您传授关于聊天机器人的所有知识。我们将了解使用聊天机器人的好处、聊天机器人的类型、无代码聊天机器人平台和自定义聊天机器人解决方案。最后，我们将使用React和Back4app 实现自己基于规则的自定义聊天机器人。

什么是聊天机器人？

聊天机器人是一种计算机程序，旨在通过语音指令、文本信息或两者模拟人类对话。它可以是简单的基于规则的机器人，也可以是高级的人工智能聊天机器人，能理解客户的问题并生成自定义回复。

自 2010 年代以来，聊天机器人一直在稳步普及，几乎成为每家企业的重要组成部分。机器人使企业能够改善客户服务、提高客户参与度、降低成本、改善用户体验并收集客户数据。

如今，聊天机器人几乎随处可见–网站、移动应用程序、移动聊天工具等等。您甚至很可能在移动设备上安装了Google Assistant、Siri 和 Bixby 等虚拟助手。

聊天机器人的优势

使用聊天机器人有很多好处。让我们来看看其中的一些。

成本效益

聊天机器人擅长处理简单的任务。它们可以通过编程来处理简单的询问，同时将复杂的询问转给人工客服代表。这样，您的企业就可以大大降低人力成本，同时还能提供出色的客户支持。

全天候服务

聊天机器人可全天候提供客户服务和支持，无需人工操作，非常方便。如果您的客户分散在不同的时区，这就非常好。

可扩展性

机器人可以同时处理大量的互动。这就提高了企业生产率，消除了等待时间，从而使客户更加满意。

个性化

数字助理可以根据用户的个人特征或行为进行编程，为其提供个性化的建议或回应。这可以大大改善用户体验，提高销售额，建立信任，甚至提高客户保留率。

数据收集

聊天机器人可以收集客户数据，这对企业改进产品和服务非常有用。此外，基于人工智能的聊天机器人可以从以前的对话中学习，并随着时间的推移提供更好的支持。

支持多种语言

机器人并不局限于一种语言。一些较好的机器人可以识别提问的语言，并用该语言做出回应。

聊天机器人的类型

聊天机器人有多种类型，每种类型都有自己独特的功能和用途。我们可以根据不同的属性对它们进行分类。

情报

智能决定了机器人是 “聪明 “还是 “笨”。我们所说的 “笨 “通常是指基于规则的聊天机器人，它们有硬编码的规则，无法回答从未见过的问题。另一方面，”智能 “指的是人工智能聊天机器人，它使用 NLP（自然语言处理）和 ML（机器学习）来理解客户的问题并生成自定义回复。混合型聊天机器人使用基于规则的功能和人工智能。

• 基于规则的聊天机器人
• 人工智能驱动的聊天机器人
• 混合聊天机器人

服务领域

服务领域决定了聊天机器人的用途。一些常见的服务领域包括

• 客户支持
• 个人助理（Bixby、Alexa、Amazon Echo）
• 虚拟销售助理

平台

聊天机器人可以部署在各种平台上。选择在哪里部署聊天机器人取决于具体的使用案例和目标受众。

• 网络（浮动聊天气泡、小工具）
• 信息平台（Facebook Messenger、Whatsapp、Viber）
• 移动应用程序（Bixby、Siri、Google Assistant）
• 物联网设备（智能扬声器、智能家居设备）

国家

有两种聊天机器人架构：

• 有状态聊天机器人
• 无状态聊天机器人

有状态聊天机器人会保留以前与用户互动的记录，并在用户提出新问题时将其考虑在内。这非常好，因为它可以让聊天机器人提供更个性化的体验。它们通常更复杂，更难编码。

无状态聊天机器人则不考虑之前的交互。它们将每条信息都视为一个独立请求。它们更简单，不能提供个性化体验，也不能根据上下文做出回答。

聊天机器人解决方案

聊天机器人平台

低代码或无代码聊天机器人平台是开箱即用的解决方案。它们易于使用，不需要高级编码技能，能让您立即启动并运行聊天机器人。

它们通常带有一个简单易用的拖放编辑器，允许您定义聊天机器人的行为。它们可以轻松部署到不同的平台，包括网站、Facebook Messenger、Slack、Whatsapp 等。

与定制机器人相比，它们提供的控制和定制水平较低。这些平台的最大缺点是锁定供应商。一旦选择了平台，就不能轻易迁移到其他平台。

此类平台的几个例子包括Tidio、Landbot、ChatBot和AgentBot。

自定义机器人

定制机器人是高度定制化和灵活的解决方案，可根据任何企业的具体需求量身定制。它们可以与现有系统和数据库无缝集成。

由于从头开始创建聊天机器人是一项艰巨的任务，因此与使用现成的聊天机器人平台相比，您可能需要花费更长的时间和更高的成本。如果您的目标是创建高级人工智能机器人，您可能还需要一个专业开发团队。

定制机器人几乎可以用任何编程语言编写。大多数开发者选择 Python、Node.js、JavaScript 和 Java。为了进一步简化机器人创建过程，您可以选择许多开源聊天机器人库。

如何构建聊天机器人？

在本部分教程中，我们将创建一个基于规则的自定义聊天机器人。前台使用React，后台使用Back4app。

什么是 Back4app？

Back4app 是一个云托管后端即服务（BaaS）平台，可让开发人员轻松构建和维护自定义移动应用程序。它提供直观的用户界面、功能强大的仪表板以及命令行界面（CLI）、推送通知、分析、数据存储等实用工具。

他们还为您喜爱的所有工具提供 SDK，如 Flutter、React Native、Node.js、Angular、Android、iOS 等！

Back4app 的主要功能包括

• 类似电子表格的界面
• REST 和 GraphQL 应用程序编程接口 – API
• 实时查询
• 身份验证（包括社交身份验证）
• 可扩展托管
• 通知

如需了解更多信息，请查看Back4app 功能。

Back4app 采用可预测且易于理解的定价模式。他们提供慷慨的免费计划（无需信用卡），非常适合原型设计和平台测试。它包括

• 25k 个应用程序接口请求
• 250 MB 数据存储空间
• 1 GB 数据传输
• 1 GB 目标存储空间

有关 Back4app 定价的更多信息，请访问定价页面。

项目介绍

我们将用预定义的请求和回复构建一个简单的聊天机器人。聊天机器人将能以文本、图片进行回复，并根据上次请求显示不同的选项。前台将使用 React 构建，后台将使用 Back4app（Express）。

先决条件

• 使用 JavaScript 的经验
• 具有使用 React 和 React 挂钩的经验
• 基本了解 HTTP 请求和响应
• 对 BaaS（后台即服务）有基本了解

我们首先要做的是前台，然后是后台，最后将两部分连接起来。

聊天机器人前端

创建 React 应用程序

首先，让我们通过创建 React 应用程序来创建一个新的React 应用程序：

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

这将创建一个名为react-chatbot的 React 应用程序，并更改工作目录。

接下来，启动项目：

$ npm start

最后，打开http://localhost:3000/查看网络应用。

Material UI

为了简化用户界面的构建过程，我们将使用Material UI— 一个实现了 Google Material Design 的开源 React 组件库。该组件库包含大量开箱即用的预构建组件。

你可以随意将 Material UI 换成不同的 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';

用户界面

导航至src文件夹中的App.js，并将其内容替换为以下内容：

// 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. 我们使用 ReactuseState()钩子来处理状态。
   • messageInput是当前消息
   • messages是消息列表
3. handleSubmit()会清除信息输入，并调用sendMessage()将信息添加到状态中。

接下来，让我们创建一个用于显示消息的组件。

在src文件夹中新建一个名为components的文件夹，并在该文件夹中新建一个名为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—选择时调用的函数

接下来，在src文件夹中创建一个名为assets的文件夹，并放入一张你希望聊天机器人使用的头像图片。请随意使用这张图片。

确保将头像命名为bot.png或更改Message.js 中的导入。

最后，要使用新创建的组件，请像这样替换App.js中的 TODO：

// 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。尝试发送几条信息。如果一切正常，它们就会被添加到用户界面：

聊天机器人后台

接下来，我们来实现后台。

创建应用程序

以下步骤需要您拥有 Back4app 帐户。如果您已经拥有该帐户，请登录，否则请注册免费帐户。

要使用 Back4app，我们首先需要创建一个应用程序。登录仪表板后，您将看到应用程序列表。点击 “创建新应用程序 “创建新应用程序。

给它起一个自定义名称，选择 “NoSQL 数据库 “作为数据库，然后单击 “继续”。

Back4app 会花一些时间准备应用程序所需的一切，如数据库、应用层、扩展、备份和安全。

应用程序准备就绪后，您将被重定向到应用程序的控制面板。

数据库

让我们为聊天机器人定义数据库模型。

导航至 Back4app 面板，选择屏幕左侧的 “数据库”。然后点击 “创建类”，将其命名为BotSettings，勾选 “已启用公共读写 “并点击 “创建类并添加列”。

添加以下列：

+-----------+------------------+---------------+----------+
| 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（使用云代码），因此我们需要启用 Back4app 的虚拟主机来托管我们的应用程序，并使其可以在互联网上公开访问。

要启用虚拟主机功能，请访问 Back4app 面板，选择您的应用程序，点击屏幕左侧的 “应用程序设置”，然后点击 “服务器设置”。搜索 “虚拟主机和自定义域名”，再次点击 “设置”。

点击 “激活 Back4app 托管”，然后选择一个子域名。我将使用聊天机器人：

最后，点击 “保存”。

现在，您可以在以下网址访问您的应用程序：

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

Express with Cloud Code

在本部分教程中，我们将使用Cloud Code和Express创建一个 API 供前端使用。API 将包含以下端点：

1. /返回聊天机器人设置
2. /ask/在数据库中查找请求并返回响应

在屏幕右侧选择 “云代码”>”功能和虚拟主机”，然后使用网络界面创建以下目录结构：

./
├── 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'),
  });
})

这段代码定义了前面提到的端点和聊天机器人逻辑，以查找正确的回复。

完成后，点击屏幕右下方的 “部署”。如果一切顺利，你会看到一条绿色信息 “成功部署更改！”。

向 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";

接下来，在App.js的顶部像这样定义baseURL：

// 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,
    ])
  })
}, []);

这段代码会向我们的 Express API 提交 GET 请求，并将响应附加到消息中。

我们最后要做的是修改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,
    ]);
  });
}

为了改善用户体验，您可以在App.js中粘贴以下代码，使每次回复都能自动向下滚动到底部：

// src/App.js

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

很好，就是这样！

启动开发服务器，检查是否一切正常。

结论

难怪聊天机器人越来越受欢迎。聊天机器人的超赞功能让企业可以改善客户服务、提高客户参与度、降低成本等等。专家表示，聊天机器人时代才刚刚开始，未来机器人将变得更加流行！

在整个教程中，我们解释了什么是聊天机器人，介绍了不同的聊天机器人类型和聊天机器人平台，并教您如何构建自己的聊天机器人。我们创建的聊天机器人在客户支持环境中非常适合回答简单的问题。

从GitHub 代码库中获取最终源代码。

未来步骤：

1. 在数据库中添加更多回复，让机器人更 “聪明”。
2. 将聊天机器人与您的网站整合。
3. 研究如何利用人工智能改进聊天机器人。

常见问题