《扣子开发AI Agent智能体应用（人工智能技术丛书）》(宋立桓，王东健，陈铭毅，程东升)【摘要 书评 试读】- 京东图书

本节将通过一个实际案例来学习卡片的制作过程。这个案例的作用是调用“头条新闻”插件，然后用卡片列表的形式展示给用户。后面的插件相关信息可以都改成与“头条新闻”相关，反正就是做一个卡片使用的练习。

我们要做的卡片示意如图3-38所示，这相当于一个新闻列表的循环。首先要做出一条新闻的样式，再通过循环以列表的形式展示出多条新闻。这个结构可以看作一个两列布局，分为左右两部分内容，左侧是图片，右侧是文本信息。

图3-38  新闻列表

登录扣子官网，依次单击“个人空间”→“资源库”，打开资源库页面，如图3-39所示。单击页面右上角的“资源”按钮，再单击“卡片”菜单项，打开卡片设置页面。

图3-39  创建卡片

在卡片设置界面，单击“组件”选项，布局组件主要用于调整卡片的整体布局，如图3-40所示。单击“多列布局1:1:1”，我们把列调整为两列。因为我们想要的图片是正方形的，按1:1:1布局的话，比例不对，为了能达到我们设计的效果，需要调整信息部分的宽度比例（注意界面中间的虚线框），将其改为5，这样比例就调整好了。

图3-40  添加布局组件

接着添加基础组件，基础组件用于具体展示信息。如图3-41所示，先添加图片组件，再添加两个文本组件。文字部分有上下两行，第一行是标题，第二行是摘要。

图3-41  添加基础组件

这样整个卡片结构就准备好了。单击“结构”按钮，如图3-42所示，可以看到当前卡片的结构有两列（Column），Column 1包括一个图片组件，Column 2包括两个文本组件。

图3-42  卡片结构

在这个案例中，列表是循环展示的，相当于知乎返回的一个排行榜数组。在没有调用知乎排行榜接口之前，我们先通过模拟一个数组来展示这个循环列表。

通过“变量”选项卡新建一个变量，如图3-43所示。变量名称为“列表变量”，变量类型选择Array，变量默认值部分涉及3个变量，完整代码如下：

[{"title": "新闻标题1","summary": "新闻摘要的作用很重要。",
   "image": "https://www.cloudssss.com/images/common/footer-logo.png",
   "url":" https://www.cloudssss.com"  },
   {"title": "新闻标题2","summary": "新闻摘要的作用很重要。",
   "image": "https://www.cloudssss.com/images/common/footer-logo.png",
   "url":" https://www.cloudssss.com"  },
   { "title": "新闻标题3","summary": "新闻摘要的作用很重要。",
   "image": "https://www.cloudssss.com/images/common/footer-logo.png",
   "url": "www.cloudssss.com "  }]

图3-43  新建变量

数组变量一共有3个元素，对应展示出来的新闻列表也应该是3条。数组变量设置好以后，接下来为卡片元素绑定变量。如图3-44所示，选中最外层的组件，打开页面右下角“高级配置”中的“循环渲染”开关，选择刚才我们创建的列表变量。

图3-44  绑定变量

可以看到，列表循环展示出来了，循环的数量（3条数据）和我们设置的变量也是一一对应的。接下来，依次绑定元素（图片、标题和摘要）对应的变量。

如图3-45所示，单击图片组件，然后依次单击“资源”→“列表变量”→item→image，资源配置框中将会出现item.image。

图3-45  绑定图片组件对应的变量

如图3-46所示，单击文本组件（标题），然后单击“内容”，在“列表变量”中单击item，再单击title变量，内容配置框中将会出现item.title。

图3-46  绑定标题文本组件对应的变量

如图3-47所示，单击文本组件（摘要），然后单击“内容”，在“列表变量”中单击item，再单击summary变量，内容配置框中将会出现item.summary。

图3-47  绑定摘要文本组件对应的变量

至此，本节案例的卡片制作工作就完成了。如图3-48所示，我们将该卡片保存为模板，模板名称为“知乎热榜卡片”。

图3-48  保存为模板

卡片只有发布以后才能被插件或工作流使用。单击页面右上角的“发布”按钮，弹出发布配置页面，如图3-49所示。输入版本号、版本描述，勾选封面，单击“确定”按钮，即可发布卡片。

图3-49  发布卡片

在项目开发页面，单击右上角的“+ 创建”按钮，然后在弹出的页面（见图3-50）中，选择创建智能体，智能体名称填写“知乎排行榜-卡片演示”。

图3-50  创建智能体

因为我们这个案例想要调用知乎热榜的数据，所以这里需要在智能体编排页面中间的插件区域添加“知乎热榜”插件，如图3-51所示。搜索“头条新闻”插件，添加getToutiaoNews这个API以获取最新头条新闻列表。注意，这里的插件与书中不一样，书中的插件已经失效，改用这个。

图3-51  添加“头条新闻”插件

如图3-52所示，单击“头条新闻”插件的“绑定卡片数据”按钮，插件功能支持添加消息卡片。

图3-52  为插件绑定卡片数据

如图3-53所示，单击“我的卡片”选项，选择刚才我们发布的卡片，为卡片绑定数据源，依次单击下拉框，选择绑定插件返回的数据。

图3-53  为卡片绑定数据源

卡片设置好了，接下来测试一下。如图3-54所示，在页面右侧的“预览与调试”区域输入“给我5条头条新闻”。可以看到，消息以卡片的形式展示出来了，效果符合我们的预期。

图3-54  消息以卡片形式展示