智能基础及搭建应用 5

AI智能体搭建与应用授课教师专业（学科）新媒体教学课题预览调试、发布使用与智能应用搭建学时安排2学时（90分钟）教学年级所选教材《AI智能体搭建与应用（基于Coze）（慕课版）》，乔海晔、杨忠明主编，人民邮电出版社，2026年5月一、学习目标描述1、知识目标

1）掌握预览与调试的核心功能——预览测试对话、调试详情页（调用树、火焰图）、节点输入输出查看。

2）了解智能体的发布流程与发布渠道（扣子商店、豆包、飞书、抖音小程序、微信等）。

3）理解智能应用的概念及其与智能体的区别（智能体=对话型，智能应用=业务逻辑+用户界面）。

4）掌握智能应用的四大核心环节——创建业务逻辑（工作流）、搭建用户界面（组件拖拽）、绑定业务逻辑与用户界面、预览测试与发布。

5）熟悉用户界面搭建中的核心组件——容器组件、文本组件、表单组件、Markdown组件、图片组件。

2、能力目标

1）能够通过调试详情页的调用树和火焰图，排查智能体的运行异常与性能瓶颈。

2）能够完成智能体的发布操作，选择正确的发布渠道并填写版本信息。

3）能够在扣子平台上完成一个智能应用的全流程搭建——从创建业务逻辑到搭建用户界面、绑定数据与事件、预览测试与发布。

4）能够为按钮组件绑定工作流点击事件，实现用户操作与后台逻辑的联动。

3、素养目标

1）培养调试优化思维——“智能体不是一次搭成的，而是不断调试出来的”，引导学生建立迭代优化的工程意识。

2）培养用户体验设计意识——用户界面的设计直接影响使用感受，引导学生理解“技术实现”与“用户体验”的同等重要性。

3）培养全流程交付意识——从需求分析到发布使用是一个完整闭环，引导学生建立“做完≠做好，发布才是交付的开始”的职业认知。二、学习重点及难点学习重点：

调试详情页中调用树的解读方法；智能体的发布流程与渠道选择；智能应用的全流程搭建（业务逻辑→用户界面→绑定→测试→发布）；用户界面中各组件的功能与配置。

学习难点：

理解调用树中各节点（如“知识库Knowledge”）的输出参数含义，并据此定位问题；理解工作流作为“业务逻辑”与用户界面组件之间的数据传递机制（如将工作流的output绑定到Markdown组件）；理解“绑定数据”与“绑定事件”的区别——前者是静态数据关联，后者是动态交互触发。教学问题预测1.学生面对调试详情页的调用树、火焰图等技术信息时，可能感到“信息过载”，不知道看什么。

2.学生容易混淆“预览”和“调试”的区别——以为两者都是“看一下效果”。

3.智能应用涉及“业务逻辑”和“用户界面”两个独立界面，学生可能不清楚两者的关系（后端vs前端）。

4.在搭建用户界面时，学生可能对容器组件的嵌套逻辑感到困惑——不知道什么时候该用容器、什么时候该用其他组件。

5.“绑定业务逻辑与用户界面”中的“绑定数据”和“绑定事件”两个概念容易混淆。四、教学问题解决方案1.

“调试三看”口诀：一看调用树（哪个环节出问题），二看输出参数（具体是什么错误），三看火焰图（哪个环节慢）。以教材中“知识库无初中数学内容”的案例，演示完整的排查路径。

2.

“预览看效果，调试找原因”

：预览是“用户视角”——看智能体表现如何；调试是“开发者视角”——查为什么表现不好。两者配合使用。

3.

“后台vs前台”类比：业务逻辑=后台（服务器端的处理逻辑，用户看不见），用户界面=前台（用户看得见、操作得了的页面）。智能应用=前后台结合。

4.

“容器是画布，组件是画笔”

：容器组件就像画布上的“框”——先画框（容器），再往框里装东西（文本、按钮、图片）。页面布局先确定容器结构，再填充具体内容。

5.

“数据是静态绑定，事件是动态触发”

：绑定数据=“把工作流的输出结果显示在页面上”（一次性的）；绑定事件=“当用户点击按钮时，触发工作流运行”（交互式的）。两者缺一不可。五、学习者特征分析（教师填写）学习特点：学习习惯：交往特点：六、教学资源教材和参考书籍：

1.《AI智能体搭建与应用（基于Coze）（慕课版）》，乔海晔、杨忠明主编，人民邮电出版社，2026年5月，项目三“任务二”的预览调试与发布部分，及“任务三搭建智能应用”。

2.扣子开发平台官方文档（/docs/guides/welcome）。

在线课程和平台：

1.扣子开发平台（用于课堂演示与学生同步操作）。

2.教师准备的中英文对照词汇表（用于翻译应用演示）。七、预习成果展示八、教学项目（任务）设计项目名称：

“智能体调试发布与智能应用搭建实战”

项目目标

1.学生能够运用调试工具排查智能体的运行异常，并完成发布操作。

2.学生能够在扣子平台上完成一个智能应用的全流程搭建——从业务逻辑到用户界面再到绑定与发布。

项目任务及要求

任务一：调试与发布实战

任务内容

请每位学生独立完成以下操作：

（1）对上节课搭建的“校园生活助手”进行至少3轮预览测试，覆盖正常问答和边界情况（如输入无关内容）。

（2）打开调试详情页，查看调用树，找到其中一次对话的完整调用路径。

（3）在调试详情页中，至少查看一个节点的输入参数和输出参数，理解数据流转。

（4）完成调试后，将智能体发布到扣子商店（版本号自定），记录版本描述。

要求

（1）记录测试过程中发现的至少1个问题及调试过程。

（2）发布后复制智能体链接，提交给教师。

任务二：智能应用搭建

任务内容

请每位学生独立完成一个“英文单词翻译并生成对应图片”的智能应用（即教材中的完整示例）：

（1）在业务逻辑界面中，创建一个工作流，实现“接收英文单词→翻译为中文→生成对应图片”的逻辑。

（2）在用户界面中，搭建包含标题区、翻译内容区（输入框+下拉菜单+按钮）、结果展示区（Markdown+图片）的页面。

（3）为“开始翻译”按钮绑定工作流点击事件。

（4）将工作流的返回数据（翻译结果和图片）绑定到对应的展示组件。

（5）完成预览测试，确认功能正常后发布。

要求

（1）每个组件的配置需参照教材图3-74至图3-89的步骤。

（2）记录搭建过程中遇到的任何问题及解决方法。九、教学结构流程的设计教学环节学习目标参考导语教学内容项目任务教法学法设计意图教学资源时间导入【参考导语】同学们，上节课我们完成了智能体的核心配置——人设、模型、插件、知识库、记忆。但这些配置有没有生效？效果怎么样？如果出了问题怎么排查？

更重要的是——配置好的智能体，怎么让其他人用？

今天我们就来解决这两个问题：预览与调试（验证质量）和发布与使用（对外交付）。

同时，我们还将学习一种更高级的项目形式——智能应用。它不仅有智能体的对话能力，还有完整的用户界面，更像一个“真正的App”。衔接上节课内容，引出本节课的两大主题——“验证质量”和“对外交付”，以及更高级的“智能应用”。5本课介绍【参考导语】本节课分为两大板块：

第一板块：预览、调试与发布——如何验证智能体的质量，并将它发布出去让更多人使用。

第二板块：搭建智能应用——一种比智能体更复杂的项目形式，包含业务逻辑（后端）和用户界面（前端）。

学完今天的内容，你将具备从需求分析到搭建、调试、发布的全流程能力。明确本节课的完整框架——“验证→交付→进阶”。5输入知识目标1

能力目标1【参考导语】

首先进入第一板块——预览与调试。请大家把目光移到右侧面板——“预览与调试”。

【教学内容】

预览与调试是两个不同但互补的功能：

①预览——“用户视角”，模拟真实对话，测试功能完整性与交互体验。

②调试——“开发者视角”，查看完整请求处理路径，定位问题环节。

调试的核心工具是调用树——展示智能体从接收输入到输出结果的完整调用路径。每个节点代表一个处理环节（如“知识库Knowledge”“大模型LLM”等）。

点击调用树中的任一节点，可查看该节点的输入参数和输出参数。以教材中“知识库无初中数学内容”的案例为例：点击“知识库Knowledge”节点，查看输出参数，发现没有检索到结果——问题定位成功。

火焰图展示各环节耗时，用于性能优化——哪个环节最慢，优先优化哪里。【教法学法】

1.对比讲解：预览（用户视角）vs调试（开发者视角）。

2.案例演示：以教材中“调用知识库输出初中函数知识点”为例，演示完整的调试路径。

3.口诀教学：“调试三看”——看调用树、看输出参数、看火焰图。【设计意图】

通过对比讲解和案例演示，建立预览与调试的清晰区分，掌握调试的核心方法。

【教学资源】

教材“预览与调试”部分、图3-61至图3-6612输出好，现在我提问：

（1）预览和调试有什么本质区别？

（2）如果智能体回复内容不符合预期，你会怎么排查？先看哪里？

（3）“火焰图”是干什么用的？

（学生回答）

（总结）预览看效果，调试找原因；调用树看路径，火焰图看耗时。【教法学法】

问答互动+排查思路分享。【设计意图】

检验对预览与调试的理解，强化排查思路。。8反馈调试时有一个常见误区：只看结果，不看路径。但真正的问题是——结果不对，往往是因为路径上某一步出了问题。调试不是看“答案错了”，而是看“哪一步开始错了”

。【设计意图】

强调调试的核心思维——路径追踪。3反思你遇到过智能体“答非所问”的情况吗？如果让你调试，你会从哪个节点开始排查？【设计意图】引导学生将调试思维与实际问题联系起来。2输入知识目标2

能力目标2【参考导语】

调试完成后，下一步就是发布与使用。请大家阅读“发布与使用”部分。

【教学内容】

扣子支持将智能体发布到多个渠道：

①扣子商店——最常用，汇聚众多用户，提升曝光率；

②豆包、飞书、抖音小程序、微信——适配不同平台场景。

发布流程：

①单击“发布”按钮；

②输入版本记录（说明本次修改内容）；

③选择发布平台；

④单击“发布”，等待审核。

发布后，可立即对话体验，也可复制链接分享给他人。【项目任务】

请完成以下操作：

（1）将“校园生活助手”发布到扣子商店。

（2）在“发布记录”中输入版本描述。

（3）发布后复制智能体链接。

【教法学法】

同步操作：教师演示发布流程+学生跟做。【设计意图】

通过同步操作，让学生掌握发布流程。

【教学资源】

教材“发布与使用”部分、图3-67至图3-688输出好，提问：

（1）发布到扣子商店之前需要做什么准备工作？

（2）版本记录的作用是什么？

（学生回答）

版本记录就像“更新日志”——方便自己和用户了解每次更新改了什么。【教法学法】问答互动。【设计意图】

强化发布流程的关键环节。5反馈注意：发布后需要等待官方审核。审核期间，智能体状态为“审核中”，审核通过后才会在商店中展示。【设计意图】让学了解发布流程的完整时间线。2反思你觉得除了扣子商店之外，把智能体发布到微信或抖音小程序有什么优势？【设计意图】

引导学生思考不同发布渠道的适用场景。3输入知识目标3

知识目标4【参考导语】

接下来进入第二板块——搭建智能应用。智能体是对话型的，而智能应用是“对话+界面”型的——它有完整的用户界面，更像一个真正的App。

【教学内容】

智能应用=业务逻辑（后端）+用户界面（前端）。

四大环节：

①创建业务逻辑——本质是编排工作流，规定应用如何响应用户、处理数据、输出结果。

②搭建用户界面——通过拖拽组件搭建页面，包括容器、文本、表单、按钮、Markdown、图片等。

③绑定业务逻辑与用户界面——“数据绑定”（显示结果）和“事件绑定”（触发操作）。

④预览测试与发布使用——验证功能后发布到扣子商店。

核心概念：业务逻辑=应用的“大脑”（看不见但决定一切）；用户界面=应用的“脸”（看得见、摸得着）。【教法学法】

1.对比教学：智能体（纯对话）vs智能应用（对话+界面）。

2.类比教学：业务逻辑=后台，用户界面=前台。

3.全流程预览：先带学生快速看一遍应用搭建的四个环节，建立整体印象。【设计意图】

建立智能应用的整体认知框架，理解“四大环节”的完整闭环。

【教学资源】

教材“任务三搭建智能应用”的引言部分8输出提问：

（1）智能体和智能应用最大的区别是什么？

（2）智能应用的“四大环节”是哪四个？

（学生回答）

智能体=对话型，智能应用=对话+界面；四大环节=业务逻辑→用户界面→绑定→测试发布。【教法学法】问答互动。【设计意图】检验对智能应用基本概念的理解。5反馈注意：智能应用的搭建比智能体更复杂，涉及前后端协同。但正因为更复杂，它能实现的功能也更强大——不是所有需求都能用对话解决，有些需求需要界面。【设计意图】

说明智能应用的价值所在。3反思你能想到哪些场景适合用智能体，哪些场景适合用智能应用？【设计意图】引导学生思考智能体与智能应用的适用场景差异2输入知识目标4

知识目标5

能力目标3【教学内容】

第一步：创建业务逻辑。

①登录扣子平台，单击“创建应用”→选择“低代码搭建”。

②在业务逻辑界面中，创建工作流：开始节点（接收用户输入的英文单词）→大模型节点（翻译为中文）→图像生成节点（生成对应图片）→结束节点（输出结果）。

③配置每个节点的参数，保存工作流。

第二步：搭建用户界面。

①切换到“用户界面”页签，选择“桌面网页”。

②拖拽容器组件，搭建页面结构：标题区（Div1）、功能区（Div2，拆分为左Div3+右Div4）。

③在Div1中拖入文本组件，输入标题文字。

④在Div3中拖入表单组件，配置输入框（“请输入翻译内容”）、下拉菜单（“目标语言”）、按钮（“开始翻译”）。

⑤在Div4中拖入Markdown组件（展示翻译结果）和图片组件（展示生成的图片）。

第三步：绑定业务逻辑与用户界面。

①为“开始翻译”按钮绑定“点击时”事件→调用工作流。

②将工作流的输入参数与输入框、下拉菜单的值关联。

③将工作流的输出结果绑定到Markdown组件和图片组件。

第四步：预览测试与发布。

①单击“预览”按钮，输入英文单词，选择目标语言，单击“开始翻译”。

②确认翻译结果和图片正常显示。

③发布到扣子商店。【项目任务】

请完成以下操作：

（1）在业务逻辑界面中创建工作流。

（2）在用户界面中搭建完整页面。

（3）完成按钮事件绑定和数据绑定。

（4）预览测试，确认功能正常。

【教法学法】

1.分步演示：教师按步骤演示，每完成一步，学生跟做。

2.关键节点暂停检查：在“绑定数据”和“绑定事件”两个关键环节，暂停并确认学生理解。【设计意图】

通过分步演示和同步操作，让学生完成第一个完整的智能应用。

【教学资源】

教材“创建业务逻辑”“搭建用户界面”“绑定业务逻辑与用户界面”“预览与测试”“发布与使用”部分、图3-69至图3-93、扣子开发平台18输出好，大家操作到哪一步了？

（1）谁已经完成了用户界面搭建？

（2）“开始翻译”按钮的事件绑定中，选择“调用工作流”后，需要关联什么？

（3）Markdown组件中，如何将工作流的翻译结果展示出来？（选择“绑定数据”→选择工作流的output变量）

（学生回答）

大家注意：绑定的本质是数据传递——用户输入→工作流输入参数→工作流运行→工作流输出结果→页面展示组件。【教法学法】进度确认+关键步骤问答。【设计意图】确认全班进度一致，巩固“数据传递”的核心逻辑。8反馈搭建用户界面时容易忽略一个问题：组件的“层次结构”——容器套容器、容器套组件。如果结果不显示，先检查组件是否放在了正确的容器里。【设计意图】补充分层结构这一容易出错的地方。3反思你觉得搭建用户界面和编写代码相比，拖拽式搭建有什么优势和局限性？【设计意图】引导学生思考低代码开发的特点。2课后作业实训任务：

1.完成“英文