最新扣子(Coze)实战案例:扣子卡片的制作及使用,完全免费教程
🧙♂️ 大家好,我是斜杠君,手把手教你搭建扣子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应用搭建教程
相关文章:

最新扣子(Coze)实战案例:扣子卡片的制作及使用,完全免费教程
🧙♂️ 大家好,我是斜杠君,手把手教你搭建扣子AI应用。 📜 本教程是《AI应用开发系列教程之扣子(Coze)实战教程》,完全免费学习。 👀 关注斜杠君,可获取完整版教程。👍Ἷ…...

Node-red win11安装
文章目录 前言一、安装node.js和npm二、安装Node-red三、 运行Node-red 前言 Node-RED 是一种编程工具,用于以新颖有趣的方式将硬件设备、API 和在线服务连接在一起。 它提供了一个基于浏览器的编辑器,只需单击一下即可将调色板中的各种节点轻松连接在…...
永久更改R包的安装目录
要永久更改 R 包的安装目录,可以通过设置 R 配置文件来实现。以下是步骤说明: 1. 查找和修改 R 配置文件 R 有几个配置文件用于保存用户和系统的设置: 用户级配置文件:通常位于 ~/.Rprofile系统级配置文件:通常位于…...
Webrtc支持FFMPEG硬解码之NVIDA(二)
一、前言 此系列文章分分为三篇, Webrtc支持FFMPEG硬解码之Intel(一)-CSDN博客 Webrtc支持FFMPEG硬解码之NVIDA(二)-CSDN博客 Webrtc支持FFMPEG硬解码之解码实现-CSDN博客 AMD硬解目前还没找到可用解码器,欢迎留言交流 二、环境 Windows平台 VS2019 Cmake 三、下…...
整理好了!2024年最常见 20 道设计模式面试题(九)
上一篇地址:整理好了!2024年最常见 20 道设计模式面试题(八)-CSDN博客 十七、什么是享元模式?它在资源优化中扮演什么角色? 享元模式(Flyweight Pattern)是一种常用的软件设计模式…...

RAG实操教程langchain+Milvus向量数据库创建你的本地知识库 二
Miluvs 向量数据库 关于 Milvui 可以参考我的前两篇文章 • 一篇文章带你学会向量数据库Milvus(一)[1]• 一篇文章带你学会向量数据库Milvus(二)[2] 下面我们安装 pymilvus 库 pip install --upgrade --quiet pymilvus如果你…...

Spring+SpringMVC介绍+bean实例化+依赖注入实战
Spring介绍 Spring是一个轻量级的Java 开发框架,核心是IOC(控制反转)和AOP(面向切面编程) Spring解决了业务层(Service包)与其他各层(表现层,包括Model,Vie…...

【安装笔记-20240616-Linux-为 OpenWrt 自动挂载 Windows 主机共享目录】
安装笔记-系列文章目录 安装笔记-20240616-Linux-为 OpenWrt 自动挂载 Windows 主机共享目录 文章目录 安装笔记-系列文章目录安装笔记-20240616-Linux-为 OpenWrt 自动挂载 Windows 主机共享目录 前言一、软件介绍名称:cifsutils主页官方介绍特点 二、安装步骤测试…...

61.WEB渗透测试-信息收集- WAF、框架组件识别(1)
免责声明:内容仅供学习参考,请合法利用知识,禁止进行违法犯罪活动! 内容参考于: 易锦网校会员专享课 上一个内容:60.WEB渗透测试-信息收集- 端口、目录扫描、源码泄露(8) WAF的识…...

qmt量化交易策略小白学习笔记第45期【qmt编程之期货行情数据--如何获取日线行情、tick行情】
qmt编程之获取期货行情数据 qmt更加详细的教程方法,会持续慢慢梳理。 也可找寻博主的历史文章,搜索关键词查看解决方案 ! 感谢关注,咨询免费开通量化回测与获取实盘权限,欢迎和博主联系! 获取日线行情数…...
c#default 运算符
值类型默认值boolfalsebyte0char‘\0’decimal0.0Mdouble0.0Denum表达式 (E)0 产生的值,其中 E 为 enum 标识符。float0.0Fint0long0Lsbyte0short0struct将所有的值类型字段设置为默认值并将所有的引用类型字段设置为 null 时产生的值。uint0ulong0ushort0引用类型n…...

25计算机考研,这所985有机会!
吉林大学的计算机学科评估是A-,软件是B 实力还是很强的! 考研的专科课代码分别是941和966 其实就是自命题,941是四合一:数据结构,计算机组成与设计,操作系统和计算机网络,这个和408统考的科目…...
SQL 基础入门教程
目录 什么是 SQL? SQL 的基本操作 数据库的创建和删除 表的创建和删除 数据的插入 数据的查询 数据的更新 数据的删除 SQL 的高级操作 表的连接 聚合函数 分组和排序 子查询 视图 索引 SQL 的数据完整性和约束 总结 SQL(Structured Que…...
<Python><paddleocr>基于python使用百度paddleocr实现图片文字识别与替换
前言 本文是使用百度的开源库paddleocr来实现对图片文字的识别,准确度还不错,对图片文字的替换,则利用opencv来完成。 环境配置 系统:windows 平台:visual studio code 语言:python 库:paddleocr、opencv、pyqt5 依赖库安装 本例所需要的库可以直接用pip来安装。 安装…...
小程序开发的费用简介篇
小程序的价格跟很多因素有关系,比如你想要的复杂度、功能多不多等等 今天我就来具体说说开发一款APP/小程序到底需要多少 ❶功能复杂度:功能越多越复杂,开发时间和费用就越高,费用就会高 ❷设计要求:高级的…...
torch.unflod与torch.nn.functional.pad用法
PyTorch 中的两个函数:torch.unfold 和 torch.nn.unfold。它们分别用于不同的目的,让我们分别来理解一下: torch.nn.Unfold 类功能: 类似于函数 torch.unfold,torch.nn.Unfold 类也用于沿着指定维度滑动提取窗口并将每个窗口展平。与函数不同的是,torch.nn.Unfold 是一个…...
江苏 服务器性能监控包含哪些方面?
服务器的性能监控主要是为了确保服务器能够正常运行工作和性能优化的重要手段,接下来就来看一下服务器性能监控所包含的内容有哪些吧! 首先对于服务器的系统资源进行一定的监控,CPU作为服务器的核心组件之一,所以我们要监控CPU的使…...

卓越的 App UI 风格引领潮流
卓越的 App UI 风格引领潮流...

BirdTalk IM集群中消息流转策略讨论
BirdTalk IM集群中消息流转策略讨论 目前群聊的存储策略是1写多读方案;每个群组一个队列,按时间顺序排列,不区分用户; 私聊的存储是写扩散的,每个人都有自己的消息队列,按时间顺序 保存所有的消息&#x…...

重磅!2024年最新影响因子正式发布,附Excel下载
大家好,这里是专注表观组学十余年,领跑多组学科研服务的易基因。 激动人心的时刻终于来了,2024年影响因子已全面发布!废话不多说,大家一起来看看最新的发布的结果吧! 神刊:CA-A CANCER JOURNA…...
谷歌浏览器插件
项目中有时候会用到插件 sync-cookie-extension1.0.0:开发环境同步测试 cookie 至 localhost,便于本地请求服务携带 cookie 参考地址:https://juejin.cn/post/7139354571712757767 里面有源码下载下来,加在到扩展即可使用FeHelp…...

VB.net复制Ntag213卡写入UID
本示例使用的发卡器:https://item.taobao.com/item.htm?ftt&id615391857885 一、读取旧Ntag卡的UID和数据 Private Sub Button15_Click(sender As Object, e As EventArgs) Handles Button15.Click轻松读卡技术支持:网站:Dim i, j As IntegerDim cardidhex, …...

【入坑系列】TiDB 强制索引在不同库下不生效问题
文章目录 背景SQL 优化情况线上SQL运行情况分析怀疑1:执行计划绑定问题?尝试:SHOW WARNINGS 查看警告探索 TiDB 的 USE_INDEX 写法Hint 不生效问题排查解决参考背景 项目中使用 TiDB 数据库,并对 SQL 进行优化了,添加了强制索引。 UAT 环境已经生效,但 PROD 环境强制索…...
【位运算】消失的两个数字(hard)
消失的两个数字(hard) 题⽬描述:解法(位运算):Java 算法代码:更简便代码 题⽬链接:⾯试题 17.19. 消失的两个数字 题⽬描述: 给定⼀个数组,包含从 1 到 N 所有…...
作为测试我们应该关注redis哪些方面
1、功能测试 数据结构操作:验证字符串、列表、哈希、集合和有序的基本操作是否正确 持久化:测试aof和aof持久化机制,确保数据在开启后正确恢复。 事务:检查事务的原子性和回滚机制。 发布订阅:确保消息正确传递。 2、性…...
vue3 daterange正则踩坑
<el-form-item label"空置时间" prop"vacantTime"> <el-date-picker v-model"form.vacantTime" type"daterange" start-placeholder"开始日期" end-placeholder"结束日期" clearable :editable"fal…...
规则与人性的天平——由高考迟到事件引发的思考
当那位身着校服的考生在考场关闭1分钟后狂奔而至,他涨红的脸上写满绝望。铁门内秒针划过的弧度,成为改变人生的残酷抛物线。家长声嘶力竭的哀求与考务人员机械的"这是规定",构成当代中国教育最尖锐的隐喻。 一、刚性规则的必要性 …...
【HarmonyOS 5】鸿蒙中Stage模型与FA模型详解
一、前言 在HarmonyOS 5的应用开发模型中,featureAbility是旧版FA模型(Feature Ability)的用法,Stage模型已采用全新的应用架构,推荐使用组件化的上下文获取方式,而非依赖featureAbility。 FA大概是API7之…...
土建施工员考试:建筑施工技术重点知识有哪些?
《管理实务》是土建施工员考试中侧重实操应用与管理能力的科目,核心考查施工组织、质量安全、进度成本等现场管理要点。以下是结合考试大纲与高频考点整理的重点内容,附学习方向和应试技巧: 一、施工组织与进度管理 核心目标: 规…...
raid存储技术
1. 存储技术概念 数据存储架构是对数据存储方式、存储设备及相关组件的组织和规划,涵盖存储系统的布局、数据存储策略等,它明确数据如何存储、管理与访问,为数据的安全、高效使用提供支撑。 由计算机中一组存储设备、控制部件和管理信息调度的…...