点击上方卡片关注 不要错过精彩文章
持续更新有关Agent的最新搭建思路和工作流分享，希望能给您带来帮助，点一点上方的🔵蓝色小字关注，你的支持是我最大的动力！🙏谢谢啦！🌟"
大家好！我是舰长
离国庆越来越近，在去年舰长用Coze手搓一个国庆头像框的智能体，很受大家喜欢。
发布到bot商店的智能体也有较多的人使用
实现的原理很简单，就是通过一张头像框和一张头像进行叠加，使得头像框在头像上
为了能让大家更方便的使用，舰长用Coze应用重新搭建了这款国庆微信头像框应用
使用地址：https://www.coze.cn/s/twUfF8S4P14/
手机扫码可以使用：
相信很多小伙伴对应用这个词比较陌生，但肯定见过；舰长也很少分享有关应用的教程，碍于之前的coze应用交互不佳，所以一直没有拿出来分享。
现在Coze推出了AI生成应用，舰长的测试下来看，还算是刚刚起步。上传的图像也识别不到，在等Coze一波，相信coze这款AI生成，可以领先其他。大家看下面这张图就理解了：
通过一步一步地去设计应用，可以由开发者详细说明需求、单独设计UI、构建前后端逻辑代码、以及自行选择发布网站。这一条流程下来，设计的网站是更为个性化，不再是通用智能体那般，直接生成，无法做到控制效果。
这就是一个小插曲，舰长就不多往下延伸，等优化不错之后舰长会专门写一期coze这个AI生成应用，回到本次的主题。
相信很多小伙伴对这个低代码搭建应用很是好奇，但无论是官方的文档还是网络上的教程，很少有专门分享Coze应用的细节和搭建过程的。
看到Coze商店其他作者做出来的AI应用很炫酷，自己想尝试就会遇到很多卡点。
没关系，舰长将本次的国庆头像框这款应用的搭建细节分享出来。
先通过一个案例上手，才能有更多的拓展思路。
创建一个应用，选择"低代码搭建"
编辑好基本信息，随意填写就行
在应用中有【业务逻辑】和【用户界面】
业务逻辑：就是一个应用的后端，在coze中可以通过工作流+数据库快速实现后端的构建，就需要考验每个开发者对工作流的熟悉程度。
用户界面：就是一个前端显示，通过一个个的处理好的组件来构建前端；大部分都是输入输出，需要通过有很强的设计感才能做出效果不错的前端出来。
同样用户界面有小程序和H5以及桌面网页，新手建议先选择小程序和H5，因为页面较小，构建快。制作出来的效果也比较赞。而网页的布局就比较大，设计不好很容易一团遭。
基础的页面解释，舰长就不过多分享，在Coze文档中是有详细的说明。具体如何实现高效率的前后端交互，才是重点。
先来搭建一下，实现图叠图的工作流功能
整个流程就用了两个节点：裁剪和画板
其实裁剪节点是一个虚设，通过前端传递进来的链接，画板节点无法使用，在用裁剪节点做一个链接的修改。最终由画板节点做叠加。
开始节点
设置两个变量
qian：指的是放在前面的图片，也就是图像框
hou：指的是微信头像
插件：裁剪
是官方插件在插件商店可以直接搜到
在原图变量处引用开始节点的"qian"即可
运行效果：
下面的短链接，画板节点是可以接受到的
画板节点
想要运行快，就先自行上传一张正方形的图片，在对这个图片进行变量的引用，
注意尺寸是1:1，以及图片的位置即可
结束节点
一定要选择"返回文本"，然后在回答内容处放置"{{output}}"变量
核心的逻辑就搭建完成了，接下来就是设计前端，在上面舰长有提到用小程序和h5页面来入手，因为布局少，好搭建
同样小程序页面的模版也比较丰富
有了这些模版就可以快速的构建
先在空白的页面拉取一个容器，关于这个容器，在舰长的视角中，其实就是一个方便管理的块
把想要放的组件，放置在一个区域里，方便管理和调整UI
从上往下，依次为
在这个容器中的组件排列方式是什么，选择中间置顶的就是：置顶居中布局
整个页面不需要其他容器，就可以把这个容器的高度拉到最大，也就是填充容器
背景颜色也是可以进行修改，或者剔除
我们平常在用小程序的时候，会发现页面过长是会进行滚动页面的，这一块就可以在下面的容器样式中进行调整
直接在模版中找到一个可以展示头像框的UI组件块，这样我们只需要进行修改，不需要在去调整布局和设计
可以把一些不需要的元素全给删除
提前上传好头像框，这里舰长收集了140个头像框，已经打包压缩好，有需要的可以到文章底部进行领取
点中每一个图片，会在右侧跳出编辑面板，删除原有的图片，在上传头像框
为了使UI更好看，可以调整尺寸大小和边框
这个调整没有什么技巧，用舰长的就照搬，自己想要换就调整数字直到达到自己满意为止
在容器样式中还可以设计一个边框
文字内容也是如此，在右侧的编辑框中，可以修改内容和文字样式
在容器布局处可以设置一个边框
先设置好四个，后面可以直接复制粘贴，不需要再设置
在舰长搭建出来的应用中，点击某个头像框，会自动的跳到下一页，并且页面上会显示选择的那个头像框
这个是通过页面变量来控制，为什么要变量控制呢？
因为在UI搭建的时候，在另一个页面中是无法接收到其他页面的值，
比如在另一个页面中想要用第一个页面中的图片，是无法直接使用，要通过变量的方式进行传递
设置一个变量
变量名可以随意写上字母
添加一个新的页面用作生成页面
在左侧的图层中，可以点击div，在查看布局中的蓝色框在哪，如图显示的就是我们要设置的地方，每一个都有单独的显示。这个容器中就有图和文字
选中好这个容器之后在事件中选择新建
点击界面变量赋值
选择好上述创建的页面变量
在变量值处插入 {x}（变量）——将鼠标拖拽到中间的图片上——左侧就会出现对应变量的名称——当前为image1-再回到右侧，找到image1——下拉箭头选中src
最终呈现效果：
在添加一个事件，选择页面跳转（这样点击的时候就可以跳转到生成的页面）
在选择页面处选择你选择需要跳转的页面，跳转方式选择自动跳转即可
每一个容器都需要设置2个事件
舰长再分享第二个同样的找到包含图片和文字的那个div，这个时候图片的图层名就变为image5，所以这里的变量值就需要变为{{ Image5.src }}
就这样重复的做好每一个头像框，这是一个很煎熬的过程，也是低代码平台的缺点
同样在新的页面中添加一个容器，将布局和高度以及容器样式都进行调整
别忘记将容器设置为滚动
在左侧添加一个图片组件，设置尺寸为比例：1:1
点击图片，在绑定数据处找到页面变量，如图所示点击即可
这样，当我们点击对应的头像框后可以直接在新的页面显示
在左侧添加文件上传，在右侧改一下标签内容即可
添加一个按钮用于调用工作流，先来进行一个基础的设置：内容、颜色、图标
为了防止运行时遭到破坏，在状态中找到何时禁用，并设置禁用条件
在点击按钮后在事件中选择调用工作流，对应输入参数qian处选择页面变量；在hou参数选择lamgeuploupload1.value
继续添加一个图片，作为图片的展示图
绑定数据要绑定工作流的输出参数，具体引用如图所示：
因为，在未运行的时候会显示一个灰色的图片，效果十分难看
所以也可以设置一个隐藏条件：
两个状态：一个为工作流尚未调用，另一个为加载中
搭建好前面的头像框后就可以进行发布
搭建应用比搭建智能体花费的时间要多得多，但应用的交互页面是智能体比不了的，相信体验了很多应用的小伙伴对这点是比较了解的。
搭建时会遇到各种各样的问题，别放弃。有问题就在舰长的交流群即使输出，会有小伙伴帮助大家完成搭建
｜·｜ 作者：杰克船长的AIGC｜·｜
没有评论:
发表评论