Skip to main content

创作 – 一句话生成前端代码,现已支持数据库!AI工作流接入!

一句话生成前端代码: 这是创作的核心能力,只需用自然语言描述你的需求_(例如:“我需要一个带有搜索框和导航菜单的响应式电商产品列表页面”)_,将立即为您生成结构清晰、语义化且可高度定制的前端代码。 一键部署: 代码生成后,无需复杂的环境配置和命令行操作,一键即可将您的应用部署到云端,快速上线,实现从创意到发布的极速。 支持连接数据库: 打破前端与后端的界限,支持与主流数据库(如MySQL, PostgreSQL, MongoDB等)连接,让您的前端应用能够轻松实现数据的增删改查,构建完整的全栈应用。 多人实时协作: 团队成员可以在同一项目空间内共同编辑代码,无论身处何地,都能保持高效同步。代码版本控制、权限管理一应俱全。 演示文档:一键生成前端代码&接入AI服务

步骤一:描述功能需求(以下过程以桌面端为demo展示)

  1. 创建应用并描述需求 a. 进入秒悟网站首页,选择-创作-根据需求选择应用类型(桌面端/移动端)
    Image
    b. 在文本框中用自然语言描述需求提示词 输入提示词时需要尽可能详细、准确地描述你期望开发的应用的功能、界面、交互等方面的要求。 需求阐述tips: 提示词(Prompt)的质量直接决定了代码的质量和可用性,为了让 AI 更好地理解你的需求并生成高质量代码,建议遵循 “角色设定 + 背景上下文 + 核心功能 + 技术约束 + 输出规范” 的结构化描述方法。
  • ❌ 差:做一个减脂规划助手。
  • ✅ 好:请帮我生成一个减脂期间每日每餐的餐普规划助手,支持用户输入身高、体重、年龄、性别后生成一份详细的减脂规划。
  • ❌ 差:做一个计算出用户每日热量的功能。
  • ✅ 好:首先计算出用户每天最低需要多少热量,减脂期间推荐摄入多少热量,其次自动规划每日餐食的热量分配、荤素搭配、菜的热量计算,最后自动计算每日的热量缺口有多少,预计减重多少斤。
  • ❌ 差:界面风格要好看的。
  • ✅ 好:界面风格应简洁现代),主色调为深蓝色,按钮要有圆角和轻微的悬停阴影效果。移动端必须完全适配。
    Image
    c. 选择模型 待补充模型推荐及原因 (一句话)等 d. 点击回车键或者右方箭头,开始开发项目。
秒悟会根据您输入的提示词来开始设计应用,并自动为项目设置名称。
  1. (可选择)重新多次澄清描述你的需求。
AI 收到你的提示词之后,如果判断提示词不明确、缺失关键信息,不足以支撑 AI 生成合适的 PRD 和产品原型,则会向你发送提示,请求补充缺失的关键信息。

步骤二:AI 编程开发应用

收到你的需求之后,将立即启动需求分析,并规划开发流程和步骤,逐步生成应用的前后端代码。代码生成完毕后,自动构建并启动服务,以提供一个可视化的界面供你预览。
Image
  1. 应用开发配置 a. 一键链接数据库 数据库的使用场景:应用中的数据需要长久记录保存、反复使用时需要使用数据库。 点击应用-存储-连接数据库-创建并链接数据库,秒悟开始自动创建数据库链接
    Image
    a1. 创建新数据库 首次使用秒悟开发应用、没有使用中的数据库、没有历史数据时,应选择创建新数据库。
    Image
    (可选择)a2. 选择已有数据库 已有使用中的数据库、已有存量数据时,可选择链接已有数据库。
    Image
    b. 基础信息修改 点击 应用配置-基础配置 可对项目的基础信息进行修改 应用标题:设置应用的显示名称,便于识别和管理。 应用收藏:更方便寻找该应用。 远程代码仓库:拉取远程代码仓库的代码,并覆盖本地代码。
    Image
    c. 域名配置 点击 应用配置-域名配置可进行配置子域名,配置后可通过网址链接直接访问助手。 c1. OneDay 子域名 使用 OneDay 提供的子域名,即开即用
    Image
    c2. 独立域名 如果已经拥有自有域名(需自行购买并做域名备案),可选择绑定业务自有域名(支持多个)
    Image
    d. (可选择)支持配置AI服务 d1. 点击 应用管理-服务 可以添加AI服务或大模型 (AI服务:具备专业垂直能力的AI技能,参考功能介绍-技能构建和应用
Image
d2. 可选择添加已有的AI服务或创建AI服务,参考功能介绍-技能构建和应用
ImageImage

步骤三:预览与测试

  1. 点击 应用预览 可进行应用开发预览和效果测试 初步生成后端代码后会自动生成测试用例并完成一轮单元测试。测试通过后会可进行应用预览,你可以在右侧预览页面查看后端功能的实际运行效果。
    Image
    Image
  2. 调整需求 (可选择)如果之前某次对话中你输入的描述有误或不准确,导致生成的应用无法满足你的需求,在左下方对话框可以在当前版本的基础下进行调整需求。
    Image
    Image
  3. 版本回滚 (可选择)如果某次需求调整的开发效果不及预期,可进行版本回滚,点击左侧栏目中的 版本-点击需要恢复的版本。
    Image
  4. 版本对比
(可选择)点击 应用管理-对比-查看改动,可进行对比多个版本之间的代码差异。
Image

步骤四:应用发布

  1. 右上角点击 发布-立即发布,发布成功后会生成网址链接,可通过网页直接访问 https://healthy-meal-tracker.1d.alibaba-inc.com/
    Image
  2. 为应用添加安全水印 开启该选项阔以保护你的 1D 应用内容和数据安全
    Image
  3. 应用链接预览 (可选择)该区域可以复制预览应用发布后的网页访问链接,如需修改可点击右侧修改按钮。
    Image
  4. 远程代码仓库
(可选择)拉取远程代码仓库的代码,并覆盖本地代码。
Image