2024年12月6日星期五

一篇就讲清楚 :如何创建一套企业级用户的预约AI应用,Coze AI应用的界面与工作流、无授权的飞书储存技术 手把手教学



点击上方卡片关注 不要错过精彩文章  

  

       大家好!我是舰长🙏 实际上"飞书多维表格"这一个功能,舰长写了很多篇文章去介绍这些插件和使用方法(关注舰长查看历史文章列表),也在积极收集用户的反馈.


目前大家遇到的很多问题:


     1.使用官方"飞书多维表格"插件时,只能把表格当做个人的知识库或者云盘一使用;

  

     2.每个人使用都需要授权或开发人员也看不到用户的使用痕迹; 

 

     3.如果想记录客户信息等内容不知道怎么去做; 

  

针对这几种问题,舰长今天几个案例来跟大家讲清楚这些问题:

 

案例1:预约助手场景,可以直接把用户预约信息存储到拥有者的多维表格中 

 

案例2:客服服务场景,将用户提问和回答内容整理到拥有者的多维表格中,方便及时去优化对话  


首先带着大家先创建一个"舰长智能体数据记录"的企业自建应用,这是一套不需要授权的飞书多维表格使用方法!  


流程详情:自建应用→设置权限→创建版本→创建多维表格→添加文档应用  


1.登入飞书开放后台  

网址:https://open.feishu.cn/  


2.点击右上角的【开发者后台】  

  

3.点击创建企业自建应用  

  

4.输入名称和描述并创建  

  

5.左侧菜单下拉找到【权限管理】  

  

6.在【权限配置】下方搜索词"查看、评论"并勾选第一个  

  

7.在搜索"新增记录"并勾选  

  

8.勾选后点击【批量开通】  

  

9.点击最上方的【创建版本】  

  

10.输入版本号和更新说明  

  

11.下拉进行保存和发布  

  

12.在飞书上创建一个多维表格,并输入几个需要的字段(文本类型)  

  

13.点击右上方的【···】找到更多,并选择【添加文档应用】  

  

14.搜索自建应用的名字

  至此智能体数据记录的自建企业应用步骤全部完成.  

  

接下来带大家实操:用AI应用界面搭建预约助手全流程工作流,重点在于用户交互界面,引导用户填写一些基本信息预约到店时间. 

在流程之前呢,舰长先带搭建了解一下【AI 智能体】和【AI 应用】的区别  

【AI 智能体】AI 智能体更注重于交互和任务执行  

【AI 应用】 AI 应用则更侧重于业务逻辑的实现和界面交互。  

  

由图中的两个"+"均可进行AI 智能体和AI 应用的创建

  

AI 智能体】创建窗口


【AI 应用】创建窗口 

 

AI 智能体】编排  

整体页面为:人设提示词和技能模块   

【AI 应用】编排  

导入工作流或创建工作流,整体页面分为:业务逻辑和用户界面  


AI 智能体】发布  

【AI 应用】发布  

AI 智能体】使用界面  

重于交互和任务执行  

【AI 应用】使用界面  

业务逻辑的实现和界面交互  

  

根据需求选择AI应用还是智能体  

AI 应用的使用→业务逻辑(workflow)


重点一:资源是支持在这里直接新建"工作流、插件(自建类)、数据(变量,数据库,知识库)


重点二:导航栏类似于网页导航一样可以快捷跳转另一个页面 

 

重点三:工作流式编排节点  


重点四:原工作流的左侧节点栏全部缩小整合到左下的"添加节点"  

  

AI 应用的使用→用户界面(Ul Builder)

由展示布局+输出组件+输入组件构成UI组件  

  

页面为主图层为辅  

页面是多数页面,图层为每页中的元素排顺  

  

想要搭建好一个应用UI,需要对页面和图层有清晰的认知,后续会基于图层对每一个组件进行设置和管理 

点击用户界面后找到【导航】查看一下图层"Home Page"为主页面,当预览或者使用时,都会优先展示此页面

体验官方组件  

官方有提供多种组件模版可以直接用来体验  

  

直接点击


默认是置顶的状态,可以对位置进行修改  

点击导航——找到Div1(Div1是容器)——选择Div1原因是最大的容器(包含这三个卡片)  

  

找到位置修改为绝对定位  

  

对【B值】进行更改,越接近"0"越靠近底部  

这样可以通过数值进行控制组件的的位置修改  

  

位置确定后可以对内容进行修改:图片和文字还有阴影选择,图片:对图层进行点击然后会在右边栏出现设置栏

  

  

上传图片(图片模版已经固定好)或者绑定工作流的输出都可以 


文字:文字的设置较多,可以进行:内容修改、字号调整、字体粗细、对齐、行高、颜色的调整  

  

阴影:颜色、圆角、边距、边框、阴影的调整,结合设计自由调整(此步骤是对容器进行设置)  

  

事件设置  

事件就是一个动作,点击或者加载时的一个动作(可以看做点击后开始执行、或者点击后跳转)  


以点击为例,可以执行调用工作流、打开页面、展示信息、控制组件  

  

打开页面:可以设置打开下一个页面或者打开某个网址  

  

调用workflow相对复杂一些,需要将一些内容传输给工作流。(这里在实操部分会重点)

举例:使用快捷指令填写信息,最后的动作是一个箭头发送;而给按钮添加一个事件为调用workflow,这个按钮代表的就是快捷指令的发送按钮。  

  

输出设置  

输出就是将工作流的输出导出到Ul Builder用户界面上,使用智能体工作流绑定卡片的,对这一个步骤不陌生。就是将工作流的输出和我们提前设置的文字或者图片进行变量绑定。  

  

点击这个扩展按钮,即可出现:  

  

以上是用户界面的中的重要组成部分,还有细节会在下面继续说明  

  

业务逻辑(workflow)的搭建


本次也是以案例来呈现重点在于自建企业应用和Coze前段用户界面使用;  

共计用到四个节点:开始——代码——插件——结束  

  

开始节点  

分别为:姓名、性别、电话、时间(name、gender、phone、time)  

类型选择:string  

  

代码节点  

输入:是把开始节点的四个输入全部导入到代码节点中;参数名就跟随开始节点来设置  

代码:选择Python代码  

async def main(args: Args) -> Output: params = args.params ret: Output = {"records": [{"fields":{"姓名":params["name"],"性别":params["gender"],"联系方式":params["phone"],"预约时间":params["time"]}}] }return ret

  

输出:先把默认的删除到只剩下一个输出  

别设置变量名为:records  

变量类型为:Array

  

  

插件:飞书多维表格(不是官方插件  

需要4个输入:已经在图中标出:1、2、3、4 

   

解决1和3(appsecret和appid  

获取appsecret和appid的地方为:

  

飞书开放后台→开发者后台→点击创建好的应用→点击凭证与基础信息(即可找到)  

  

"2"为创建的飞书多维表格的URL分享链接,自行复制即可(是已经配置过文档应用的)  

"4"是需要新增的记录,这里直接引用代码节点的输出即可  

  

结束节点  

这是一个预约的系统,不需要输出什么内容,客户的预约数据都已经存入到飞书多维表格中了。  

  

用户界面(Ul Builder)的搭建

👍 

在搭建用户界面(Ul Builder)需要有清晰的思路,本次预约应用界面搭建思路为。  

需要设置三个页面进行跳转:首页——预约输入信息页面——结束页面  

首页需要用到的组件:容器、文字、按钮  

预约页面需要用到的组件:表单  

结束页面:文字  

首页——容器  

  

到导航栏的图层中选择这个容器【Div1】并进行设置  

宽度设置为100%  

高度选择填充容器  

颜色自由选择  

  

首页——文字  

文字起到的作用就是醒目,主题的呈现;选择"绝对定位"方便我们去调整文字  

  

选中图层【text】进行文字的设置  

输入文字内容:欢迎光临博大中医馆  

字号:120  

字重:粗体  

颜色:白色  

  

首页——按钮  

按钮的作用就是可以点击并跳转到下一个页面  

 

 

找到按钮的图层,进行内容的设置  

内容设置:点击预约  

设置尺寸:宽度235,高度43  

  

为按钮设置一个事件  

这个事件就是为了打开第二个界面:  

  

预约页面  

由于是一个新的页面,依旧是一个空白页,还需要我们重新添加一些内容进来  

  

拖动组件——表单  

找到图层先对容器进行位置,宽度更改  

  

先删除一些不需要的内容,在复制几个文本框(选择一个text图层然后复制粘贴即可)  

  

修改表单的这些文字内容  

  

性别这一个图层是选项图层,需要去右边设置一下选项:"男"和"女" 

 

  

按钮部分需要进行事件的设置,这次事件设置就相对复杂一些:需要打开最后一页和调用workflow两种事件组合  

  

调用workflow事件  

点击按钮图层——打开事件——新增事件——点击时——调用workflow  

  

选择刚刚搭建好的工作流则会跳出四个参数:  

name(姓名)、gender(性别)、phone(电话)、time(预约时间)  

Textareal1、Textareal2、Textareal3、分别对应的是:姓名、电话、预约时间。  

Select1则对应的是:性别。  

  

需要对这个四个参数进行入参配置,也就是把Textareal1、Textareal2、Textareal3、Select1这四个表单的填写内容和工作流的开始节点进行连接。  

  

name(姓名)  

Textareal1的value(表单项值)  

  

gendr(姓别)  

Select1的value(表单项值)  

  

phone(电话)  

Textareal2的value(表单项值)  

  

time(预约时间)  

Textareal3的value(表单项值)  

  

完成后再新建一个事件为:打开第三个页面  

  

第三个页面——结束问候页面  

这个页面相对简单,就是放置一个文本告知使用者已经成功完成预约即可。将字号、字重、颜色都设置好(简单示例) 

 

  

最后就是发布了  

版本号是必须要填写的,目前支持api和商店的发布,模版展示还需要申请  

  

当这一步搭建完后,是不是很好奇为什么没有输出的配置,因为本次的案例只是一个预约的前端页面,用户输入完信息后回自动存储到飞书多维表格中,方便拥有者可以及时查看每日的预约信息。  

    关注公众号并添加舰长微信,领取智能体学习资料,并参与Coze技术直播讲解  

      舰长积极创建智能体交流群,让我们在AI时代一起进步互相学习!每天会在群里分享智能体的搭建,欢迎各位小伙伴加入~ 

 

船长团队创作智能体专栏小册,里面有最新进阶的Coze智能体文章,在文章有收获的同时,可以分销而获取60%的小册费用,聚财成多  

  

  







没有评论:

发表评论

低代码平台百分百开源!专为企业打造的低代码开发框架

专为企业打造的低代码开发框架 源代码 https://www.gitpp.com/images/project082608-lowcode 👍 👍 👍 国内首个全开源的 低 代 码 开发平台 👍 👍 👍  一款专为企业打造的低代码开发框架 ,以低代码为核心,实现快...