Coze智能体开发：开发网页应用

扣子编程是一款云端 AI 开发工具帮助你将创意转化为应用。通过与扣子编程对话你可以在浏览器页面中快速开发网页应用。无需编写代码、无需搭建开发环境只需提出明确的开发需求即可从零开始完成应用的代码编写、部署上线。本文档介绍如何使用扣子编程开发网页应用。功能概述扣子编程提供了一个基于 Web 的 AI 编程开发环境你可以直接在网页中与扣子 AI 对话描述你想要开发的应用的功能、界面、逻辑等需求扣子 AI 会自动完成应用的开发、测试、迭代和发布。目前扣子编程支持开发网页类型的应用包含完整前后端逻辑例如产品落地页、业务系统、网页版互动游戏、资讯站点等。费用说明开发、测试、线上使用应用时以下操作将消耗你的扣子积分。编程任务与扣子 AI 的每轮对话。内置集成调用大语言模型、联网搜索、图像生成等内置集成服务。配额与限制开发应用时存在可创建的项目数量、可回滚版本数、可部署的次数等配额限制详细说明请参考配额与限制。开发应用参考以下流程通过 AI 编程开发网页应用。步骤一需求澄清创建应用并输入你的需求。在扣子编程首页单击网页应用选项卡。在文本框输入你的提示词。你需要尽可能清晰且详细地描述应用的功能、界面设计、业务逻辑等方面的要求。例如你可以输入以下提示我希望有个网站我输入一个热点主题它就会自动帮我检索10条当天的相关新闻热点并且并行生成10张 比例 3:4 的4K 信息卡片以图片的形式概述当天的热点新闻我可以用来发布“每日信息差”主题的小红书新闻图片合集。可选进阶配置通过上传附件、选择协作模式、添加技能、选择编程模型让扣子 AI 生成的结果更精准、更符合你的预期。在键盘中敲击回车开始开发你的项目。扣子 AI 会根据你输入的提示词来开始设计应用、创建项目并自动为项目设置应用名称。可选澄清你的需求。扣子 AI 收到你的提示词之后如果判断提示词不明确、缺失关键信息不足以支撑 AI 生成合适的 PRD 和产品原型则会向你发送提示请求补充缺失的关键信息。例如开发者要求“开发一个公司官网”但未提供公司名称、行业、核心业务、品牌材料、参考风格等任何背景信息扣子 AI 会主动追问相关细节。澄清需求时你同样可以上传附件为扣子 AI 提供更丰富的信息。步骤二AI 编程开发应用扣子 AI 收到你的需求之后将立即启动需求分析并规划开发流程和步骤逐步生成应用的前后端代码。代码生成完毕后自动构建并启动服务以提供一个可视化的界面供你预览。如果扣子 AI 判断你的应用需要数据库、存储、身份认证、AI 等能力则会自动添加和配置对应的集成为你的应用设计数据库表、配置存储系统实现相关功能步骤三预览与测试初步生成后端代码后扣子 AI 会自动生成测试用例并完成一轮单元测试。测试通过后扣子 AI 会提供后端代码的预览同时提醒你对后端开发部分进行验收你可以在右侧预览页面查看后端功能的实际运行效果。网页应用预览界面如下在预览与测试的环节中你可以通过以下操作预览并测试扣子 AI 为你生成的应用。操作说明示例预览应用代码生成完毕后系统会显示应用的预览页面。你也可以在右侧开启一个新的标签页并单击预览以进入预览页面。预览页面支持在新标签页中查看、刷新页面或重启应用你可以在预览区域右上角单击对应的图标来执行这些操作。全面测试在预览区全面测试你的应用通常建议关注以下问题功能是否可用验证应用的核心链路是否完整可操作、数据的增删改查是否能成功执行。交互是否完善检查页面元素是否完整显示、布局是否合理、样式是否符合设计要求、各个按钮是否都能正确触发。AI 能力是否正常如果你的应用集成了 AI 能力例如文本生成、图片生成等验证 AI 模型的输出是否符合预期。修复故障通常情况下扣子 AI 会自动识别并提示你修复故障你可以根据页面提示单击一键修复允许扣子 AI 尝试修复这些问题。如果你在体验应用的过程中触发页面报错但扣子 AI 没有提示你修复你也可以主动复制报错信息并粘贴到对话中将其发送给扣子 AI要求它修复故障。迭代应用修复问题和故障之后这个应用的雏形就基本搭建完成了你可以选择直接将其部署为网页站点。但是通常情况下这些应用在功能或交互上仍有可改进之处此时你可以通过自然语言或编写代码的方式和扣子 AI 一起迭代你的应用。调整需求如果之前某次对话中你输入的描述有误或不准确导致扣子 AI 生成的应用无法满足你的需求相对于回滚版本再重新对话生成应用直接修改你发送的历史消息会更加高效。你可以在对话记录中找到该历史消息对其进行修改后敲击回车扣子 AI 会根据新的描述对应用进行调整和优化。同时扣子 AI 的版本记录里也会另起一个分支来记录本次及后续的变更。编辑应用和扣子 AI 一起持续优化应用直到实现预期的效果。你可以在对话区中通过自然语言描述你的修改建议和扣子 AI 一起优化你的应用。例如输入以下提示词banner 的底图改成蓝色渐变调试代码扣子编程提供了一个基于 Web 的 AI 编程开发环境你可以在代码编辑器中修改代码文件、在终端中执行命令调试代码和扣子 AI 一起开始开发你的应用。关于 AI 编程开发环境的使用技巧可参考AI 编程环境。常见操作如下操作说明示例通过扣子 AI 修改代码在页面右上角单击文件树图标进入代码编辑器找到你想修改的前端代码文件或代码片段并单击引用到对话然后通过自然语言描述你的修改建议。手动编写代码在页面右上角单击文件树图标进入代码编辑器你可以在其中查看扣子 AI 生成的所有代码文件并直接修改代码。修改代码之后需要重新构建才能预览项目。你可以在终端中执行命令或者通过对话请扣子 AI 帮你构建、重启服务以供预览项目。调试代码代码编辑器下方是 Web 终端你可以通过终端执行常见的命令来调试并迭代你的应用例如执行npm install安装项目依赖、python app.py启动后端服务等与本地终端操作逻辑一致。回滚开发版本扣子 AI 使用当前的先进模型来完成任务但由于模型生成代码的随机性有时可能无法完全满足你的需求生成了不符合预期的代码或者出现了反复修复失败的故障此时你可以使用回滚版本功能将应用恢复到之前正常的版本状态。在对话区顶部单击版本历史图标找到要恢复的版本在其右侧单击回滚图标。集成能力扣子编程通过技能方式封装了一批常见的集成能力接口方便你快速为应用添加各种功能例如数据库、存储、AI 能力等使应用更好地满足多样化的业务需求。在和扣子 AI 对话添加集成能力之前你需要先在扣子 AI 对话区域单击技能确认扣子 AI 已添加了你想要的技能。存储与数据库扣子编程提供了结构化数据托管方案对于需要集成数据库和存储能力的应用扣子 AI 会根据任务要求自动集成并设置数据库能力和存储能力。例如开发一个电商应用扣子 AI 会自动集成数据库来管理商品信息、订单数据等同时设置存储能力以存储商品图片、用户上传的评价图片等。你也可以在对话区发送自然语言指令为应用集成存储或数据库能力。例如使用数据库记录用户登录、浏览和购买行为数据关于存储和数据库集成的详细说明可参考集成数据库能力、集成对象存储能力。AI 能力为应用程序添加 AI 能力时通常需要开通模型服务并获取 API 密钥、并自行完成模型调用的配置与开发。扣子编程托管了业界先进的各种模型服务无需任何配置扣子 AI 会自动为你的应用添加 AI 能力帮助你开发更为智能的应用程序。例如搭建一个多语言翻译的网页应用通过大模型翻译将用户的输入翻译为指定的语言提供高效、低成本的翻译服务。默认情况下你的项目已开通了大模型集成的权限扣子编程会在收到指令后自动为应用添加 AI 功能。你也可以在对话区发送自然语言指令让扣子 AI 集成大模型能力。例如使用豆包模型总结检索到的资讯并整理为资讯日报关于大模型集成详细说明可参考内置集成。后续操作部署应用完成应用的开发与测试之后你可以在页面右上角单击部署将扣子编程搭建的应用部署成为一个公开可访问的在线项目将你的创意和原型转化为服务于真实用户的产品。详细操作步骤可参考部署网页应用。分享项目在项目搭建页面右上角单击分享按钮可以将部署成功的项目分享给他人。查看线上日志查看已发布的应用、智能体和工作流的前后端运行日志以便在出现问题时进行故障排查和分析。详细说明可参考查看日志和 Trace。《动手学PyTorch建模与应用:从深度学习到大模型》是一本从零基础上手深度学习和大模型的PyTorch实战指南。全书共11章前6章涵盖深度学习基础包括张量运算、神经网络原理、数据预处理及卷积神经网络等后5章进阶探讨图像、文本、音频建模技术并结合Transformer架构解析大语言模型的开发实践。书中通过房价预测、图像分类等案例讲解模型构建方法每章附有动手练习题帮助读者巩固实战能力。内容兼顾数学原理与工程实现适配PyTorch框架最新技术发展趋势。