【90分钟视频教程】全网最详细的Coze AI应用教学
【90分钟视频教程】全网最详细的Coze AI应用教学
【90分钟视频教程】全网最详细的Coze AI应用教学 【90分钟视频教程】全网最详细的Coze AI应用教学 Audio or video is not supported Please download the file and open it with the appropriate software. 20241130012016 rec .mp4 · 5.16MB 20241130012016 rec 00:00 Audio or video is not supported Please download the file and open it with the appropriate software. 20241130145753 rec .mp4 · 3.85MB 20241130145753 rec 00:00 下面你会发现，我们在构建任何AI应用时，都在解决这三个问题，下面我开始通过多个官方案例来学习如何构建一个完整的Coze AI应用！ 案例1：AI翻译应用 AI翻译应用是官方提供的最基本的AI应用，我们通过这个案例把AI应用的基础打牢！ 这个应用中我们应该掌握以下几点内容： 1. AI应用前端的基本结构： • 页面（Page） ◦ 组件（Component） ▪ Form表单 ▪ Div容器 ▪ 文本框 ▪ ...... ◦ 事件（组件上绑定事件） 2. Form表单的数据提交 3. 表单如何向工作流传递数据 4. 工作流产生的数据如何返回给前端组件展示 案例2：创意写真 创意写真这个案例，主要学习两个能力： • 图片上传组件 • 图片上传组件是如何将参数传递给图像流的 案例3：写作产品化 这个案例主要用来帮助大家看下多页面的情况。这已经是一个比较完整的产品了 附录 页面 承载多个组件的组合，一般是一个完整的功能。 一个AI应用可以有多个页面，页面之间可以相互跳转 Form表单 Form表单是一个前端的专业概念，我先跟你用大白话讲解一下： 💡 想象你去银行办理业务，柜台会给你一张表格要你填写。 这张表格上有很多空格，需要你填写姓名、身份证号、联系方式等信息。 网页中的表单就和这个很像，它就是一个在网页上收集信息的"电子表格" 简单来讲：表单就是一堆的输入框 + 各种按钮，例如下图，你一定不陌生 Div容器 容器在页面上的变现就是一个区块，里面可以盛放一系列的组件 用生活中的例子来讲：你可以把他比作一个收纳盒，用来组织和分类物品 当你想要把一些相关的组件组织在一起，来实现页面布局的时候，你就可以用容器了 div容器就像搭积木一样，可以通过嵌套创建复杂的页面布局 Form事件 onSubmit 就像你： • 仔细填完了所有内容 • 检查过没有错误 • 成功交给了前台小姐姐 • 小姐姐笑着说："好的，我们会处理您的申请" 这就是表单提交成功的情况！ onSubmitError 相当于： • 你以为都填好了，交给前台 • 但前台小姐姐看了一下说： ◦ "不好意思，您的手机号没填哦" ◦ "或者邮箱格式不对" ◦ "要不您再检查一下？" 这就是表单提交时发现错误的情况！ 数据改变时 就像： • 有个特别热心的前台小姐姐 • 在你填表的时候一直在旁边看着 • 你每写一个字，她都在关注 • 随时提醒你： ◦ "这个字写错了" ◦ "这里需要填数字" ◦ "密码强度不够" 这就是表单数据发生变化时的情况。 如果你对Agent感兴趣，欢迎与我联系一起交流： Audio or video is not supported Please download the file and open it with the appropriate software. 20241130012016 rec .mp4 · 5.16MB 20241130012016 rec 00:00 Audio or video is not supported Please download the file and open it with the appropriate software. 20241130012016 rec .mp4 · 5.16MB 20241130012016 rec 00:00 Audio or video is not supported Please download the file and open it with the appropriate software. 20241130145753 rec .mp4 · 3.85MB 20241130145753 rec 00:00 Audio or video is not supported Please download the file and open it with the appropriate software. 20241130145753 rec .mp4 · 3.85MB 20241130145753 rec 00:00 下面你会发现，我们在构建任何AI应用时，都在解决这三个问题，下面我开始通过多个官方案例来学习如何构建一个完整的Coze AI应用！ 案例1：AI翻译应用 AI翻译应用是官方提供的最基本的AI应用，我们通过这个案例把AI应用的基础打牢！ 这个应用中我们应该掌握以下几点内容： 1. AI应用前端的基本结构： • 页面（Page） ◦ 组件（Component） ▪ Form表单 ▪ Div容器 ▪ 文本框 ▪ ...... ◦ 事件（组件上绑定事件） ◦ 组件（Component） ▪ Form表单 ▪ Div容器 ▪ 文本框 ▪ ...... ▪ Form表单 ▪ Div容器 ▪ 文本框 ▪ ...... ◦ 事件（组件上绑定事件） 2. Form表单的数据提交 3. 表单如何向工作流传递数据 4. 工作流产生的数据如何返回给前端组件展示 案例2：创意写真 创意写真这个案例，主要学习两个能力： • 图片上传组件 • 图片上传组件是如何将参数传递给图像流的 案例3：写作产品化 这个案例主要用来帮助大家看下多页面的情况。这已经是一个比较完整的产品了 附录 页面 承载多个组件的组合，一般是一个完整的功能。 一个AI应用可以有多个页面，页面之间可以相互跳转 Form表单 Form表单是一个前端的专业概念，我先跟你用大白话讲解一下： 💡 想象你去银行办理业务，柜台会给你一张表格要你填写。 这张表格上有很多空格，需要你填写姓名、身份证号、联系方式等信息。 网页中的表单就和这个很像，它就是一个在网页上收集信息的"电子表格" 想象你去银行办理业务，柜台会给你一张表格要你填写。 这张表格上有很多空格，需要你填写姓名、身份证号、联系方式等信息。 网页中的表单就和这个很像，它就是一个在网页上收集信息的"电子表格" 简单来讲：表单就是一堆的输入框 + 各种按钮，例如下图，你一定不陌生 Div容器 容器在页面上的变现就是一个区块，里面可以盛放一系列的组件 用生活中的例子来讲：你可以把他比作一个收纳盒，用来组织和分类物品 当你想要把一些相关的组件组织在一起，来实现页面布局的时候，你就可以用容器了 div容器就像搭积木一样，可以通过嵌套创建复杂的页面布局 Form事件 onSubmit 就像你： • 仔细填完了所有内容 • 检查过没有错误 • 成功交给了前台小姐姐 • 小姐姐笑着说："好的，我们会处理您的申请" 这就是表单提交成功的情况！ onSubmitError 相当于： • 你以为都填好了，交给前台 • 但前台小姐姐看了一下说： ◦ "不好意思，您的手机号没填哦" ◦ "或者邮箱格式不对" ◦ "要不您再检查一下？" ◦ "不好意思，您的手机号没填哦" ◦ "或者邮箱格式不对" ◦ "要不您再检查一下？" 这就是表单提交时发现错误的情况！ 数据改变时 就像： • 有个特别热心的前台小姐姐 • 在你填表的时候一直在旁边看着 • 你每写一个字，她都在关注 • 随时提醒你： ◦ "这个字写错了" ◦ "这里需要填数字" ◦ "密码强度不够" ◦ "这个字写错了" ◦ "这里需要填数字" ◦ "密码强度不够" 这就是表单数据发生变化时的情况。 如果你对Agent感兴趣，欢迎与我联系一起交流： 写在前面 💡 大圣的个人介绍： 大圣的个人宝藏 AGI 大圣的个人宝藏 AGI 大圣的个人介绍： 大圣的个人宝藏 AGI 大圣的个人宝藏 AGI 大家好，我是大圣，通往AGI之路共建作者，今天我来给大家分享下Coze AI应用的开发 这个跟大家强调下，Coze平台的官方案例是非常值得拿来学习的，这个优质的资源千万不要错过。 本文就是通过拆解官方的多个案例来让大家学习下AI应用的开发。 在开始之前，我们要说明下听本节课的一个前置条件 起码你已经用过Coze，并且亲自搭建过一些简单的工作流 这个分享我们只讲AI 应用创建相关的内容，不包含Coze的基本操作和工作流搭建。 我们也不会在本文探讨Coze的能力问题，比如长文案怎么生成，图片怎么换背景等 本次分享的核心在于这个视频教程，请主要看视频教程，文档教程为辅： 一个案例演示 Coze的创意写真馆应用： https://www.coze.cn/template/project/7442139374751629323? 演示完案例，我们接下来就来学习下如何搭建这样一个有意思的应用 网页应用的基本组成 在讲Coze的AI应用之前，我们先了解一个普通的网页端应用组成部分： 我们日常在用的淘宝其实就是一个网页端应用，我们最简单的操作流程可以总结如下： 1. 在前端页面上填写一些数据或者选择一些数据，点击某个按钮 2. 页面上的数据被通过某种方式保存到后端 3. 在另一个页面进行数据查询，将数据展示在页面上 我用Claude做了一个教学应用，带大家体验下日常非常熟悉的操作 页面访问（需要魔法）：https://monica.im/share/artifact?id=cYYguyDQYnqdPwxQFebw2B 通过这个案例我想让你先了解一个应用的组成部分，因为在Coze的AI应用创建时，也会包含这几部分 Coze的AI应用 其实Coze的AI应用跟网页应用是非常类似的架构： 1. Coze的AI应用也有一个前端页面：用来让用户进行文字输入或者图片上传等工作。 2. Coze的AI应用也有一个数据处理端，将前端页面用户写入的文字或者上传的图片进行处理。 这个数据处理端就是：工作流 或者 插件 3. 当工作流或者插件将数据处理完成后，有两种路径： • 将处理完成的数据展示在前端页面，供用户查看 • 将处理完成的数据保存在数据库/知识库中，供用户额外查询 所以在搭建Coze的AI应用的时候，我们只需要关注3个方面： 1. Coze AI应用的前端页面怎么构建，布局是怎样？页面有哪些组件构成？以及他们之间的关系 2. Coze AI应用的前端页面应该如何将页面数据（输入的文字或者上传的图片）传递给工作流或插件 3. 工作流/插件处理完成后输出的数据应该如何返回给前端页面展示