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

构建聊天机器人封面综合指南

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

什么是聊天机器人?

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

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

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

聊天机器人的优势

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

聊天机器人的优势

成本效益

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

全天候服务

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

可扩展性

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

个性化

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

数据收集

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

支持多种语言

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

聊天机器人的类型

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

聊天机器人的类型

情报

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

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

服务领域

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

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

平台

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

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

国家

有两种聊天机器人架构:

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

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

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

聊天机器人解决方案

聊天机器人平台

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

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

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

此类平台的几个例子包括TidioLandbotChatBotAgentBot

自定义机器人

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

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

定制机器人几乎可以用任何编程语言编写。大多数开发者选择 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)。

Back4app 聊天机器人预览

先决条件

  • 使用 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/查看网络应用。

React 默认项目

Material UI

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

你可以随意将 Material UI 换成不同的 UI 框架,如React BootstrapAnt 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。尝试发送几条信息。如果一切正常,它们就会被添加到用户界面:

React 聊天机器人测试

聊天机器人后台

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

创建应用程序

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

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

Back4app 创建应用程序

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

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

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

Back4app 应用程序控制面板

数据库

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

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

Back4app 定义模型

添加以下列:

+-----------+------------------+---------------+----------+
| 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 CodeExpress创建一个 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. 研究如何利用人工智能改进聊天机器人。

常见问题

什么是聊天机器人?

聊天机器人是一个计算机程序,旨在通过语音命令、文本聊天或两者结合模拟人类对话。

使用聊天机器人的好处有哪些?

– 成本效益
– 24/7 全天候可用
– 可扩展性
– 个性化
– 数据收集

聊天机器人有哪些类型?

聊天机器人可以根据不同的属性进行分类:
– 智能(基于规则的聊天机器人,AI 驱动的聊天机器人)
– 服务领域(客户支持,个人助理)
– 平台(Web,移动应用,消息传递工具)
– 状态(有状态或无状态)

如何创建聊天机器人?

您可以使用像 AgentBot、Drift、ProProfs 这样的聊天机器人平台,或自己编写代码。

如何编写聊天机器人代码?

1. 选择前端技术(如 JavaScript,React)
2. 编写用户界面代码
3. 选择后端技术(如 Node.js,Python)
4. 编写聊天机器人逻辑(可以包含 AI)
5. 通过 REST 或 WebSockets 将前端与后端连接起来


Leave a reply

Your email address will not be published.