邯郸做移动网站的地方,外贸高端网站建设,宁波网站制作联系方式,汕头个人网站建设#x1f9d9;♂️ 大家好#xff0c;我是斜杠君#xff0c;手把手教你搭建扣子AI应用。 #x1f4dc; 本教程是《AI应用开发系列教程之扣子(Coze)实战教程》#xff0c;完全免费学习。 #x1f440; 关注斜杠君#xff0c;可获取完整版教程。#x1f44d;#x1f3f… ♂️ 大家好我是斜杠君手把手教你搭建扣子AI应用。 本教程是《AI应用开发系列教程之扣子(Coze)实战教程》完全免费学习。 关注斜杠君可获取完整版教程。 如果想学习AI应用搭建请关注公众号及时获取最新免费教程。
最近有很多同学问扣子中的卡片有什么用怎么很少用到那今天本文就为大家讲解一下扣子中的卡片是做什么的到底有什么妙用
温馨提示本文内容很多涉及贯穿了搭建扣子应用的很多知识。 没看过的教程的同学一定关注后再看不然容易找不到。如果学懂本文你可以完全掌握了扣子卡片的原理话不多说上干货。 本文重点共分五个部分
1、扣子中的卡片是什么
2、卡片的组成
3、卡片使用范围
4、制作卡片
5、使用卡片
接下来让我们详细一一讲解。
一、什么是卡片
扣子平台中的「卡片」简单说就是让输出的格式更好看。例如你在扣子上通过插件或工作流返回一篇新闻如果直接输出就是一行标题一段内容可能有的还会有一个链接。但如果在大模型输出之前你把这些信息按设定好的格式做成一个好看的卡片是不是更能提供应用的用户体验例如下面这样 当然也可以有列表形式的卡片 二、卡片的组成
组成卡片的元素叫做组件。
组件一共分两种
布局组件基础组件
布局组件就是用来划分整体区域的布局组件有如下几种 对于每一个布局都可单独进行参数的设置这样就能组合出很多不同的布局。
例如这个布局 原始的每行展示数目是3个我可以改成4个就变成这样了。 基础组件是具体的展示信息的类型例如是图片还是文本还是按钮等。
基础组件有如下几种 如下这个卡片就由一个图片和两个文本元素组成。 接下来让我们动手制作一个卡片然后再使用这个制作好的卡片。通过本节课学习彻底让大家掌握扣子卡片的使用让你的应用与众不同。
三、卡片的使用范围
目前消息卡片仅在豆包客户端、飞书客户端内生效。
仅工作流和插件功能支持添加消息卡片。
四、制作卡片
接下来我们来通过一个实际的案例来学习卡片的制作。
这个案例的作用是调用知乎热榜插件然后用卡片列表的形式展示给用户。
01 设置布局
形式如下图所示 我们要做上面这种类型的卡片首先要对内容进行分解。从图中可以看出这是一个新闻列表的循环。
所以首先要做出一条新闻的样式再通过循环就可以展示出多条新闻的列表形式了。
也就是先做出这部分 上面的这个结构可以看出是一个两列布局有左右两部分内容。左侧是图片右侧是信息。
那我们首先在画布上添加二列布局组件 然后在这个布局里加入一个图片组件 因为我们想要的图片是正方形这么布局的话比例不对。应该把1的宽度变小。 例如下图这样把这个宽度再多分几份实际是6份 这时让图片的部分占1分让文字的内容占5份这样就能达到我们的效果了。
那该应该如何设置呢
只需要调整信息部分宽度比例即可改为5 这样比例就调整好了。
02 添加组件
先添加图片组件 再添加文本组件。文字部分有上下两行一行是标题给行是摘要。
那么我们需要添加两个文本组件。 这样结构就准备好了。通过点击结构的按钮可以看到当前卡片的结构。如下图 03 新建变量
因为列表是循环的展示的。正常情况下循环的数据是接口返回的。在我们这个例子中就是知乎返回的一个热榜数组。所以在没有调用接口之前我们需要先通过模拟一个数组来展示这循环列表。
通过变量选项卡新建一个变量 这里要注意如下图所示变量类型要选择数组 数组变量的值如下一共有三个元素也就是对应展示出来的新闻列表也应是三条。
大家可以复制以下数组使用
[{ title: 这是一个新闻标题, summary: 新闻摘要的作用很重要它可以决定读者是否阅读一篇新闻并对读者的观点和态度产生影响。, image: https://lf-card-builder.oceancloudapi.com/obj/bot-studio-builder/2272053001466355_1709225232250572891.jpg , url: https://www.coze.cn },{ title: 这是一个新闻标题, summary: 新闻摘要的作用很重要它可以决定读者是否阅读一篇新闻并对读者的观点和态度产生影响。, image: https://lf-card-builder.oceancloudapi.com/obj/bot-studio-builder/2272053001466355_1709225232250572891.jpg , url: https://www.coze.cn },{ title: 这是一个新闻标题, summary: 新闻摘要的作用很重要它可以决定读者是否阅读一篇新闻并对读者的观点和态度产生影响。, image: https://lf-card-builder.oceancloudapi.com/obj/bot-studio-builder/2272053001466355_1709225232250572891.jpg , url: https://www.coze.cn }]
设置好以后接下来我们为卡片元素绑定变量。
04 绑定变量
选中最外层组件打开右侧高级配置中的循环渲染开关。如下图 选择刚才我们创建的列表变量 可以看到列表循环展示出来了。循环的数量(三条数据)和我们设置的变量也是一一对应的。
接下来绑定元素图片、标题、摘要对应的变量。
图片 标题 摘要 设置好以后是这样的 到这里我们的卡片制作工作就完成了。接下来让我使用这个卡片小试牛刀~
05 保存模板
注意这个不是必须的。但为了下次制作卡片时可以直接引用一般会保存为模板。 起一个卡片模板名称 06 发布卡片
卡片只有发布以后才能被插件或工作流使用。
点击发布按钮发布一下如下图 点击确定按钮就发布好了。 五、使用卡片
在第三节我们讲过工作流和插件功能支持添加消息卡片。那么我们就通过插件的方式了使用卡片。
注: 如果有同学对插件的使用不了解可以看第三章的详细教程。
01 创建Bot 02 添加插件
因为我们这个例子是要调用知乎热榜的数据所以这里我们在插件中心搜索知乎热榜插件。 点击添加以后就加好了。 03 配置卡片
点击 绑定卡片数据按钮 绑定卡片。 选择「团队卡片」选项卡并选择刚才我们发布的卡片。 绑定数据源。按以下方式依次绑定插件返回的数据 绑定之后的数据如下图所示 04 测试卡片
卡片设置好了接下来让我们测试一下吧。
输入查询知乎热榜 可以看到消息以卡片的形式展现出来了。
好了到这里我们就把卡片的制作及使用学习完了希望大家多多使用卡片的形式展现更好的的效果。愿大家在本文中能有所收获。 正在快马加鞭准备教程中先关注公众号进群交流会及时收到更新通知 ~ 扣子Coze教程 | 扣子Coze学习 | AI应用搭建教程
