微搭低代码xChatGPT，五步搭建AI聊天机器人小程序

enimo • 2023-01-02 • 云技术社区 • 286 阅读

通过应用界面可以看到，它主要由如下几个部分组成：

一个对话聊天界面
一个API数据查询接口
界面UI与后端数据的联动渲染

那现在，我们就参照上面的几个模块，正式开始通过微搭低代码工具，分5个步骤来依次拆解搭建：

1.对应用界面进行样式配置

我们先拖入一个滚动容器和一个普通容器，一个用来展示聊天的上下文对话，一个用来展示输入框和发送按钮。然后依次拖入图中大纲树所示的组件，组件相应的层级关系可以参考上图中的大纲树结构。

接下来针对上述的组件分别进行样式的配置，我们默认使用样式面板的弹性（Flex）布局，包含接收消息和发送消息两个普通容器，可以分别选择样式面板中的弹性布局中的左对齐，如下图所示：

接着可以分别配置图片和文本两个组件的高度和宽度大小以及内外间距，以达到想要的视觉效果。

完成聊天上下文对话框的样式配置之后，可以进行底部多行输入框和按钮这个普通容器的样式配置，样式配置方式与上面的发送消息容器一样使用弹性布局并选择“平分”的方式布局，如下图所示：

完成布局配置之后，由于底部输入框按钮等是固定位置的，故需要额外配置一下定位属性，选中底部的“普通容器”，在样式面板底部，做如下配置即可：

以上，通过进一步微调一些样式细节如组件背景色以及间距等后，即可达到上文提到的应用界面效果了。

可以看到整个页面的配置过程是完全可视化操作的，不需要写一行代码。当然，如果样式配置不是很熟悉，或者有疑问的朋友，也可以等我们的视频教程，手把手教你用微搭低代码来配置AI聊天应用。

2. 配置数据变量和数据源API

第2步，开始进行数据的绑定和数据源的配置：

a. 新建一个数组对象变量chatList，用于存储聊天记录

首先配置一个变量，如命名为chatLlist聊天记录这么一个变量，一个对象数组，默认值为如下所示，当然大家也可以基于这个结构任意修改。

[
    {
        "res": "你好，欢迎体验ChatGPT聊天机器人，你可以直接输入你感兴趣的任何问题向我提问",
        "req": "红孩儿是牛魔王的亲儿子吗？",
        "index": 1
    },
    {
        "res": "不是，红孩儿是牛魔王的养子。据西游记中的记载，牛魔王是一个孤独的怪物，他在深山里住了很久，没有子女，却有一个养子——红孩儿，红孩儿的父母去世时，牛魔王便收养了他。",
        "req": "那谁教他的三味真火",
        "index": 2
    }
]

接着把这个数组变量的初始值跟我们的这个页面的内容分别进行绑定。首先我们选择一个父级的普通容器，在属性配置的循环展示绑定为刚刚新建的数组变量。然后在里面的子节点中，如文本组件，分别绑定这个数组中的成员变量，他们的配置如下图所示：

这一步数据绑定完成之后，接下来就可以去配置请求远程数据的数据源API了。

b. 配置一个数据源APIs（用于请求Chat GPT接口）

API的配置相对比较简单，主要参考OPENAI的官方文档，文档中可以看到文本对话接口对应的请求参数信息如下：

curl https://api.openai.com/v1/completions \\
-H "Content-Type: application/json" \\
-H "Authorization: Bearer YOUR_API_KEY" \\
-d '{"model": "text-davinci-003", "prompt": "Say this is a test", "temperature": 0, "max_tokens": 7}'

分别把上方的CURL请求头信息对应到HTTP的请求中即可，配置项参考如下：

我们通过数据源中的【方法测试】，得到API的返回结果如下，点击【出参映射】即可完成出参结构的配置：

{
    "id": "cmpl-GERzeJQ4lvqPk8SkZu4XMIuR",
    "object": "text_completion",
    "created": 1586839808,
    "model": "text-davinci:003",
    "choices": [
        {
            "text": "\\n\\nThis is indeed a test",
            "index": 0,
            "logprobs": null,
            "finish_reason": "length"
        }
    ],
    "usage": {
        "prompt_tokens": 5,
        "completion_tokens": 7,
        "total_tokens": 12
    }
}

其中的API_KEY是在完成OPENAI账号注册之后，在其个人中心中获取即可，至于OPENAI的账号注册方式，大家动动手搜索一下，网上教程很多就不啰嗦了。

3. 给发送按钮绑定请求事件

我们在第1步中已经在页面中放置了输入框、按钮和文本展示等组件。接下来，我们需要给输入框配置相关的事件响应逻辑，来获取用户输入的消息内容，参考的关键配置如下:

然后，给按钮绑定事件来处理输入框中用户发送的消息，选择按钮组件，在右侧事件面板中配置如下逻辑，即点击按钮时触发API请求，并将获取到的API返回结果渲染在页面中。

4. 将API返回数据与在页面中进行渲染展示

第4步，将返回值用“变量赋值”方法加入到chatList数组中

这里我们需要在数据中增加一条新的消息，采用表达式绑定的方式进行原有的ChatList变量进行解构后再赋值，表达式参考如下：

[
    ...$page.dataset.state.chatList,
    {
        req: $page.dataset.state.text,
        res: ""
    }
]

5. 完成开发，进行应用发布

前端界面和后端数据逻辑都配置开发完成后，可在应用编辑器的右上角点击“发布”按钮，我们可以选择发布到已绑定的小程序，也可以直接发布移动端的H5应用，如下所示：

至此，一个基础的AI聊天机器人应用搭建就完成了。

三、进一步完善

基于上述步骤搭建完聊天机器人小程序后，你还可以进一步完善它的功能。

例如，您可以在小程序中添加聊天记录功能，让用户可以查看过往的聊天记录。您也可以使用其他自然语言处理技术；例如语音识别和文本分类，来使聊天机器人更加智能。

如需要存储聊天历史记录的话，可以在数据源中配置一个“聊天历史记录”数据模型，参考模型配置如下：

总之，使用微搭低代码搭建聊天机器人小程序，对于熟悉低代码或者喜欢钻研能力的朋友来说，确实是一件非常简单而有趣的事情。当然如果确实对界面样式配置不是很熟悉，或者其他有疑问的朋友，也可以等我们的视频教程，手把手教你用微搭低代码来配置AI聊天机器人应用。

通过本教程的介绍，你已经基本熟悉了如何使用微搭低代码快速搭建基于 ChatGPT 的聊天机器人了，不如现在动手试试吧！

四、附录Q/A

在搭建聊天机器人应用过程中，你可能会遇到一些问题，下面是常见问题的解决方法：

i. 机器人无法回复：这可能是因为 ChatGPT 机器人模型无法理解用户的问题。可以尝试使用更加具体的问题，或者尝试使用不同的自然语言处理模型。
ii. 机器人回复不流畅：这可能是因为 ChatGPT 机器人模型生成的回复不够流畅或在服务器在境外所致。可以尝试调整模型的temperature参数，使生成的回复更加流畅。
iii. 机器人回复内容不准确：这可能是因为 ChatGPT 机器人模型无法理解用户的问题，或者因为模型没有学习到足够的知识。可以尝试使用更加具体的问题，或者尝试使用不同的自然语言处理模型。
iv. 如果遇到其他低代码配置问题，可以尝试在微搭社区或通过网上搜索中寻求帮助。