🚀基于 Trae 的零代码 APP 开发与上架流程研究🧣
摘要
Trae 是一款支持 AI 编程的工具，其海外版本免费接入了 AI 编程能力更强的模型。本文旨在为初学者提供一个详细的分步教程，演示如何利用 Trae 在 “无需编写一行代码” 的前提下，完成一个 iOS To Do APP 的概念构建、原型设计、代码生成、调试，以及最终提交 App Store 审核的全过程。这种方式极大地降低了 APP 开发的成本，使得“人人都是产品经理”成为可能。
1. Trae 环境配置与模式选择
Trae 提供了国内版和国外版，用户可根据自身需求进行安装和下载。它支持 Mac 版和 Windows 版，并且即将推出 Linux 版本。
步骤 1.1：安装与登录
下载并安装 Trae 后，需完成登录。登录完成后，界面通常呈现三栏布局：左侧用于打开不同的文件夹仓库，右侧是一个对话界面，用于提出要求。
步骤 1.2：选择工作模式
Trae 的对话界面包含 Chat 和 Builder 两种核心模式：
- Chat 模式： 适合与 AI 模型对话、沟通需求，或让 AI 帮助了解项目目录。在此模式下，AI 可以写代码，但用户需要手动复制到对应的代码文件中。
- Builder 模式： 这是一种更智能、更自动化的模式。它会直接帮助用户生成文件并写入对应的代码，适用于希望 AI 自动完成项目的场景。
2. 需求梳理与产品原型设计
在实际编写代码之前，必须明确产品的需求和结构。
步骤 2.1：利用 Chat 模式梳理需求
首先切换到 Chat 模式，要求 Trae 扮演产品经理的角色，帮助梳理产品需求。
- 示例需求： 开发一个借鉴《高效能人士的7个习惯》中“以终为始”和“要事第一”理念的 To Do APP。
- 技术要求： APP 需简单、可在本地运行，且不需要联网登录。 Trae 会根据提示完成必要的需求梳理。
步骤 2.2：利用 Builder 模式生成原型
切换到 Builder 模式，使用梳理好的需求来设计产品原型。
- 提示词要求： 表达 APP 的类型和需求，并要求输出高保真的原型图。
- Trae 在开始生成前会先理解需求，并检查当前项目目录是否存在对应文件，然后逐步创建。
- 成果： Trae 会逐步生成不同原型界面的代码文件。成功创建的原型示例包括：主页、创建任务界面、四象限视图、任务详情、每周计划、统计与反思等 6 个界面。这些原型甚至可以被点击。
- 操作： 接受 Trae 的修改，并将完成的原型界面保存下来，用于后续开发。
3. 项目初始化与代码实现
步骤 3.1：创建 Xcode 项目
如果需要开发 iOS APP，需要下载并安装 Xcode。
- 打开 Xcode 并创建一个新项目，例如命名为 7todo。
步骤 3.2：导入项目并启动 Builder 模式
- 回到 Trae，打开一个新的窗口，导入 Xcode 创建的 iOS 项目的根目录（例如 7todo 文件夹）。
- 确保切换到 Builder 模式。
- 上传之前保存的完整的原型图。
- 将 Trae 之前生成的需求文档作为上下文参考信息输入。
- 提示 Trae： 要求它根据原型图和需求信息，完成整个项目的开发。
- 代码生成： Trae 会根据提供的信息，一步步完成不同代码文件的创建、检查以及后续组件的创建。
4. 调试与错误修正
在 Xcode 中首次编译时，出现错误是正常的。
步骤 4.1：处理编译错误
- 在 Xcode 中点击开始编译，将出现的错误信息完整复制下来。
- 回到 Trae，将错误信息粘贴进去。
- Trae（接入 Claude 3.7 模型）会理解报错说明，并通过自主查看代码的方式，确定实现方式并解决代码错误。
- 重复操作： 如果 Trae 修改完成后，Xcode 编译仍出现新的错误，则继续将新的错误信息复制回 Trae 进行修改，直到项目编译成功。
步骤 4.2：调整运行时界面问题
- 如果 APP 能够运行，但界面显示不正确（例如显示错误界面），可以将运行中的界面截图。
- 将图片直接拖拽到 Trae 对话框中，并告知其需要调整的错误。
- Trae 完成调整后，回到 Xcode 再次编译运行，直至项目整体可运行，并实现任务的添加、四象限分类和周计划等功能。
5. APP 上架准备工作
APP 运行成功后，需要进行上架前的配置和打包。
步骤 5.1：Xcode 项目配置优化
- 为简化流程，建议在 Xcode 中去掉 iPad 版本的支持。
- 设定支持的最低 iOS 版本，例如 iOS 17。
- 设置 APP 的 Display Name（例如：小猫todo）。
步骤 5.2：生成与导入 APP 图标
- 许多人认为 Trae 或 Claude 3.7 模型无法生成图片，但实际上，可以通过让 Claude 3.7 Sonnet 模型生成 SVG 格式的图片来创建图标。
- 在 Trae 的 Chat 模式下生成 SVG 代码。
- 使用 SVG 编辑器将代码转换为图片并下载。
- 将下载好的图标导入 Xcode 项目中。
步骤 5.3：项目打包与上传 (Archive)
- 在 Xcode 中选择 Archive，将项目代码进行打包。
- 选择 Distribute APP，进行分发和上传。
6. App Store Connect 提交审核
上传完成后，需要登录 App Store Connect 界面，完成上架信息的填写。
步骤 6.1：基础信息填写与构建版本选择
- 选择刚刚上传的构建版本。
- 填写合规证明，例如选择“不属于上述任意算法”。
步骤 6.2：利用 Trae 填写推广信息
提交审核需要上传截图，并填写推广文本、描述、关键词、技术支持网站、营销网址等信息。
- 重要提示： 所有需要填写的文本信息，都可以让 Trae 来帮助生成。
- 技术支持网址：可以创建一个飞书文档，并将链接复制过来。
- 填写主标题和副标题。
- 选择合适的类别，如“工具”或“效率”。
- 设定年龄分级（通常都选“无”）。
步骤 6.3：隐私和价格设置
- 填写 APP 隐私部分，使用 Trae 生成的隐私协议文档链接。
- 设置价格和供应情况。如果要做免费 APP，价格选取 0 即可。
- 选择发布地区，例如先只发布在中国国内。
步骤 6.4：提交审核
- 完成所有调整和信息填写后，将 APP 添加到供审核状态。
- 随后即可将 APP 提交到 App Store 审核。审核时间通常为两到三个工作日左右。
7. 结论与展望
通过 Trae 这一 AI 编程工具，用户可以充分体验到无需编写一行代码即可完成 APP 开发和上架的流程。APP 开发成本的显著降低，使得个人想法能够非常容易地实现。对于有创意或有开发能力的个人或团队，Trae 和稀土掘金推出的 AI FOR CODE 创意挑战赛是非常值得参与的平台。挑战赛分为创意赛道和应用开发赛道，奖品非常丰富，包括 iPhone 16、PS5、3万元奖金等。
