从一个简单的任务入手，在扣子编程开发你的第一个 AI 编程项目。本教程以开发儿童绘本生成网站为例，演示如何使用扣子编程开发并部署一个网页应用。

在本教程中，你将使用自然语言提示生成一个 Next.js 应用，用户输入主题之后，应用会自动制作对应主题的儿童绘本。此应用生成的绘本图片保存在对象存储中，同时数据库自动保存用户的绘本生成记录。

生成应用之后，你可以在线调试和体验，最终将其公开发布为在线网页应用，以供其他用户浏览使用。

步骤一：开发应用

和扣子编程一起，利用大模型生成应用。关于开发网页应用的详细操作步骤，可参考通过 AI 编程开发应用。

1. 登录扣子编程。

2. 在扣子编程首页文本框中输入以下提示，创建一个儿童绘本制作工具。

   请帮我开发一个儿童绘本生成器，网页形式。用户输入一个主题，模型自动生成绘本的脚本，然后根据绘本脚本的内容，生成4张画面连续的绘本画面。要求必须使用 seedream 4.5 的 sequential image generation 模式，以保证画风一致、主体形象一致。
   

   你需要尽可能清晰且详细地描述应用的功能、界面设计、业务流程等方面的要求，详尽的提示词能让 AI 精准理解你的需求，避免生成的代码偏离你的目标。

   输入提示词时，你也可以同时上传一张图片，帮助模型理解你想要的样式和效果。例如上传一张你想参考的界面设计图片，让扣子编程参考图片上的功能布局和交互来开发你的应用。

   

3. 扣子编程收到你的需求，开始编写应用代码。

   1. 扣子编程会根据你输入的提示词来开始设计应用、创建项目，并自动为项目设置应用名称。
   2. 创建项目后，将立即启动需求分析，并规划开发流程和步骤，逐步生成应用的前后端代码。
   3. 扣子 AI 会自动生成测试用例并完成一轮单元测试，测试通过后再向你交付成果。
      需要注意的是，如果你的提示词不明确、缺失关键信息，扣子编程则主动追问，请求补充缺失的关键信息。澄清需求时，你同样可以上传附件，为扣子编程提供更丰富的信息。

步骤二：预览与测试

扣子 AI 编写代码完毕后，会自动构建并启动服务，以提供一个可视化的界面供你预览。你可以在右侧预览页面查看应用的实际运行效果。
对于上文中我们搭建的儿童绘本生成器，其预览效果如下：

你可以在预览区全面测试你的应用，查看其功能是否可用、交互是否完善、AI 能力是否正常。如果发现应用存在问题或有新的需求，你可以随时反馈给扣子 AI，它会根据你的反馈对代码进行调整和优化，并重新构建、部署，以供你审查修复结果。

预览和测试完成之后，即可开始部署应用。

步骤三：（可选）调优

修复问题和故障之后，这个应用的雏形就基本搭建完成了，你可以选择直接将其部署为网页站点。但是通常情况下，这些应用在功能或交互上仍有可改进之处，此时你可以通过自然语言或编写代码的方式，和扣子 AI 一起迭代你的应用。

优化应用

对于借助 AI 进行的开发流程，最有效的方式是通过迭代来完成开发，你可以持续和扣子 AI 对话，通过多轮交互来不断完善和优化你的应用，使其功能更加丰富、界面更加友好、业务流程更加顺畅。
例如，对于较为复杂的故事场景，4 张图片数量明显不足，我们可以要求扣子 AI 增加图片生成的数量，以满足复杂故事场景对于丰富画面展示的需求。

将 4 张图片改为 10 张图片。

扣子编程提供了一个基于 Web 的 AI 编程开发环境，你可以在代码编辑器中修改代码文件、在终端中执行命令调试代码，或者将代码文件和内容引用到对话区，通过对话和扣子 AI 一起开始优化代码和应用。关于 AI 编程开发环境的使用技巧，可参考AI 编程环境。

为应用添加功能

扣子编程封装了一批常见的集成能力接口，方便你快速为应用添加各种功能，例如数据库、存储、AI 能力等，使应用更好地满足多样化的业务需求。

• 添加 AI 能力：扣子编程托管了业界先进的各种模型服务，无需任何配置，扣子 AI 会自动为你的应用添加 AI 能力，帮助你开发更为智能的应用程序。例如，当前的儿童绘本制作工具已经集成了文本大模型和生图大模型，用于生成脚本和绘本图片。

• 存储与数据库：扣子编程提供了结构化数据托管方案，对于需要集成数据库和存储能力的应用，扣子 AI 会根据任务要求自动集成并设置数据库能力和存储能力。你也可以在对话区发送自然语言指令，为应用集成存储或数据库能力。

  输入以下提示词，将此应用生成的绘本图片保存在对象存储中，同时数据库自动保存用户的绘本生成记录。

  1. 所有绘本图片默认保存在对象存储中
  2. 数据库自动记录每个用户的绘本生成记录，包括生成时间、绘本主题、图片地址等关键信息。
  

目前网页应用仅支持接入内置集成服务，关于内置集成服务的详细说明，可参考内置集成。

步骤四：部署应用

完成应用的开发与测试之后，你可以在页面右上角单击部署，将扣子编程搭建的应用部署成为一个公开可访问的在线项目，将你的创意和原型，转化为服务于真实用户的产品。

1. 在页面右上角单击部署。

2. （可选）添加部署配置。配置方式可参考部署网页应用。

   • 网页应用默认部署在扣子提供的统一域名中，格式为 xxx.coze.site 。你也可以选择部署到一个已备案的自定义域名下。

   • 当前仅支持公开部署，即发布后所有用户都可以访问该网页。

3. 单击开始部署。

   扣子编程将自动进行部署相关操作。你可以在部署页面查看部署的进展和部署日志。部署过程可能需要几分钟，请耐心等待。部署过程中，你可以随时取消部署。

   

部署成功之后，你的应用已正式上线！你可以通过访问部署域名来访问这个儿童绘本制作工具，将网页地址分享给你的好友，或者发布到社交平台，让更多用户来体验使用吧！

继续探索扣子编程

在开发过程中，扣子编程提供一系列功能特性提升你的开发体验、提高开发效率，你可以按需灵活使用这些特性，探索更丰富的开发场景，创造出更具创意和实用性的应用。

• AI 编程环境

• 内置集成

• 回滚开发版本、回滚部署版本

• 管理环境变量

• 配置自定义域名

• 查看运行日志