Codex App 从 0 到 1 开发 App:小白保姆级实战!
不会写代码,也能用 AI 做出一个真正连接数据库的手机 App 吗?
这次就不做界面演示了,直接以一个“购物商城”为例,完成商品浏览、规格加购、购物车、创建订单、MySQL 数据存储,最后生成 Android 安装包。
整个过程采用 Codex App + Expo + Node.js + MySQL,适合第一次做移动端项目的人。
先明确:本文交付的是学习型 MVP,不包含真实支付、物流和生产级用户系统。
刚好最近刚好建了一个 AI 学习交流群,想把平时看到的 AI 工具、实操案例、Prompt、Agent、AI 编程和一些踩坑经验分享出来。
如果你也在学 ChatGPT、Codex、Claude Code,或者平时关注 AI 工具、AI 副业、出海产品,欢迎进群一起交流~
01|安装环境
一. 安装 Codex App
从 OpenAI 官方页面下载 Codex App,安装并登录支持 Codex 的账号。官方已提供 macOS 和 Windows 版本,具体功能及额度以账号实际显示为准。
官方地址:
openai.com创建或打开一个本地项目目录,例如:
```text
C:\AllProject\FreshMart
```
后续所有任务都在这个项目中进行。
二. 安装 Node.js
进入
nodejs.org 下载 LTS 版本,安装完成后重新打开 PowerShell,检查:
```bash
node --version
npm --version
```
能显示版本号即可。
三. 创建 Expo 项目
在 PowerShell 中进入项目的上级目录,执行:
```bash
npx create-expo-app
@Latest FreshMart
cd FreshMart
npx expo start
```
如果目录已经由 Codex 创建为空文件夹也可以让它在当前目录执行官方创建命令。注意不要把项目重复嵌套成 `FreshMart/FreshMart`。
手机安装 Expo Go,扫描终端二维码进行预览。电脑和手机应连接同一 Wi-Fi;连接失败时可以停止服务后尝试:
```bash
npx expo start --tunnel
```
如果 Expo Go 提示 SDK 不兼容,按当前 Expo 官方教程选择与手机 Expo Go 匹配的 SDK,不要随意复制旧教程版本。2026 年 9 月 7 日更新的官方创建项目文档仍推荐使用 `create-expo-app@latest`。
验收:手机能打开 Expo 默认页面,再进入下一步。
02|先写需求,不要让 AI 直接开工
打开 Codex App,选择 FreshMart 项目,复制下面的提示词:
```text
你是一名产品经理和移动端技术负责人。
我要开发一款学习型购物商城 App,技术栈为 React Native + Expo、Node.js、MySQL。
先不要写代码,请生成 docs/PRD.md。
MVP 包含:
1. 首页
2. 分类与商品列表
3. 商品详情与规格选择
4. 购物车
5. 订单结算
6. 订单列表
7. 订单详情
8. 我的页面
不包含:真实支付、物流、优惠券、商家后台、短信登录、生产级用户认证。
请定义页面字段、跳转关系、购物车规则、订单状态、库存校验、异常场景和验收标准。
对于不明确的业务规则,先提出问题,不要自行编造。
```
阅读生成的 PRD,重点确认三件事:商品有哪些规格、库存不足如何处理、订单提交后处于什么状态。不要让 AI 自行决定这些核心规则。
03|生成界面,先用 Mock 跑通交互
不需要先安装来源不明的插件,直接使用 Codex 生成 Expo 页面即可;如果你已安装可信的设计插件,可以把它作为辅助,但不是教程的必需条件。
```text
读取 docs/PRD.md,先完成前端 MVP。
要求:
- 使用当前 Expo 项目和 TypeScript
- 实现 PRD 中的页面与导航
- 使用集中管理的 Mock 演示数据
- 商品规格、加购、数量修改、删除、结算入口必须有真实交互
- 提供加载、空数据和错误状态
- 不接入真实支付
- 不擅自增加功能
先说明文件结构,再逐步实现。每完成一个阶段,运行项目并检查错误。
```
运行:
```bash
npx expo start
```
在手机上检查首页、分类、详情、购物车和结算页。若 UI 不满意,使用具体描述,例如“购买按钮固定底部”“价格字号增大”“购物车空状态增加返回首页按钮”,不要只说“再高级一点”。
验收:能从首页进入商品详情,选择规格加购,并在购物车修改数量和金额。
04|安装 MySQL,创建开发数据库
从 MySQL 官方下载页安装 MySQL Community Server。Windows 用户可选择官方 MSI 安装方式,并使用安装向导配置服务、端口和管理员密码。
官方地址:
dev.mysql.com安装完成后,通过 MySQL Command Line Client 或其他官方支持的客户端连接本机数据库。使用管理员账号创建专门的开发库和账号:
```sql
CREATE DATABASE freshmart
CHARACTER SET utf8mb4
COLLATE utf8mb4_unicode_ci;
CREATE USER 'freshmart_dev'@'localhost'
IDENTIFIED BY '请替换为你自己的强密码';
GRANT ALL PRIVILEGES ON freshmart.
TO 'freshmart_dev'@'localhost';
```
这里只是本地学习环境的示例。不要把真实的密码提交到 Git,也不要让 AI 使用生产数据库的 root 账号。
验收:开发账号能够连接 freshmart 数据库。
05|让 Codex 先设计后端,再执行建表
把 PRD 交给 Codex,让它先输出数据库设计和 API 方案,不要直接放开所有数据库操作。
```text
读取 docs/PRD.md,为 FreshMart 实现 Node.js + MySQL 后端。
请先生成 docs/API.md、docs/database-design.md 和实施计划,等待我确认后再执行。
要求:
1. 设计分类、商品、规格、购物车、订单、订单明细等必要表
2. 明确主键、外键、索引和字段约束
3. 金额使用精确类型,避免浮点金额误差
4. 服务端重新计算订单金额并校验库存
5. 创建订单使用数据库事务
6. API 输入校验,数据库访问使用参数化查询或安全 ORM
7. 密码使用环境变量,不写入源码
8. 提供迁移、演示数据和回滚脚本
9. 不执行删除数据库、清空数据等破坏性操作
```
确认方案后,再让它实现后端:
```text
按照已确认的实施计划开始开发。
先完成数据库迁移、演示商品数据和商品查询接口。
验证通过后,再实现购物车和创建订单。
请使用维护中的 Node.js Web 框架与 MySQL 驱动,说明选择原因。
每阶段运行检查命令和接口测试,并报告修改文件、测试结果和剩余问题。
不要一次性完成所有模块后才测试。
```
这里不强行指定一套未经项目验证的依赖版本。让 Codex根据当前 Node.js 版本和官方文档选择兼容版本,并保留 `package-lock.json`,避免后续安装结果漂移。
06|验证接口,再替换前端 Mock
先让 Codex 启动后端,并使用实际生成的 API 路径验证商品接口。不要把下面的路径当成任何框架默认自带的接口,具体路径以 `docs/API.md` 为准。
```text
请启动后端服务,确认数据库连接正常。
使用 curl 或项目测试工具验证:
- 商品列表返回演示数据
- 商品详情返回正确规格和库存
- 不存在的商品返回合理错误
- 创建订单时服务端重新计算金额
- 库存不足时拒绝下单
- 重复提交订单有明确处理策略
请输出实际请求、响应状态和测试结果,不要把未执行的测试写成已通过。
```
接口调通过后再替换前端数据:
```text
将前端 Mock 数据逐页替换为真实 API 请求。
先比较前端类型与后端响应字段,列出不一致之处。
要求:
- 建立统一 API 请求层
- API 地址使用环境变量配置
- 实现加载、空数据、网络错误状态
- 商品、购物车和订单使用真实接口
- 不允许请求失败时悄悄回退到 Mock
- 每替换一个页面就运行并验证
- 最后列出所有仍使用 Mock 的位置
```
注意:手机访问的 localhost 是手机自身,不是你的电脑。 真机联调需要使用手机能访问的电脑局域网 IP,或者部署一个可访问的开发 API。
后端监听地址、防火墙和端口也要正确配置;不要为了省事把 MySQL 端口直接暴露到公网。
07|让 AI 测试,但必须留下验证结果
Codex 可以运行项目测试、检查日志、修改代码;是否能自动控制模拟器、截屏或点击,取决于你安装的工具、系统环境及授权。不要假设装了某个插件就一定具备全部能力。
```text
请对 FreshMart 进行测试和排错。
先检查当前项目已有的测试工具、模拟器和设备能力。
测试范围:
1. 启动与商品加载
2. 分类切换、商品详情
3. 规格选择与加购
4. 购物车增减、删除、金额汇总
5. 空购物车、网络失败、库存不足
6. 服务端订单金额计算
7. 订单创建、列表与详情
8. 重复提交订单
优先运行已有自动化测试。
如果可用,再使用模拟器或真机工具验证 UI。
发现错误先复现、查看日志,再修改代码。
每次修复后重新测试相关功能。
输出测试报告:已通过、失败、未执行。
未执行的项目不得标记为通过。
```
最后自己在真机完成一轮关键流程:选商品 → 选规格 → 加购 → 修改数量 → 结算 → 创建订单 → 查看订单。再测试断网、库存不足和快速重复点击。
AI 说“修复完成”不等于验收通过,必须看到实际运行结果。
08|生成 Android 安装包
Expo Go 只是预览工具,不是独立安装包。若要让别人安装测试,可以使用 EAS Build 生成 Android APK。
先注册 Expo 账号并安装 EAS CLI:
```bash
npm install --global eas-cli
```
登录并配置项目:
```bash
eas login
eas build:configure
```
在项目根目录的 `eas.json` 中配置一个内部测试构建,例如:
```json
{
"build": {
"preview": {
"distribution": "internal",
"android": {
"buildType": "apk"
}
}
}
}
```
如果配置文件已存在其他 profile,不要直接覆盖整个文件,而是让 Codex 在现有配置中合并 `preview`。确认 Android 包名等配置后执行:
```bash
eas build --platform android --profile preview
```
构建成功后按照 EAS 提供的链接下载并安装 APK。云端构建需要 Expo 账号及可用的构建额度,实际可用性以当前套餐和服务状态为准。
别把开发包当成正式发布包。 开发构建通常需要连接开发服务器,而这里的 preview APK 是用于内部安装测试的独立构建。正式上架还需要生产构建、签名、商店账号和审核。
iOS 可以通过 EAS 云端构建,但 Windows 无法本地运行 Apple 的 iOS Simulator;iOS 真机分发和正式发布还涉及苹果开发者账号、签名及设备权限。这次先以 Android APK 实操完成闭环。
09|最终交付检查
做到下面这些才算完成本次的 MVP 交付:
```
[ ] 手机能独立安装并打开测试包
[ ] 商品与规格来自真实 MySQL 数据
[ ] 购物车增减和金额计算正确
[ ] 订单由后端创建并写入数据库
[ ] 库存不足、网络失败有明确提示
[ ] 关键测试有实际执行结果
[ ] 密码没有写进客户端或提交到仓库
```
后面就可以考虑接入真实支付、用户认证、服务器部署、备份监控和应用商店审核啦。
其实这套流程操作下来值得学习的不是“AI 帮你完成了多少代码的开发”,而是你能否把需求、实现和验收串成一个可验证的闭环。
先把一个小 App 做完整,再扩展功能,你会发现真正决定项目能不能交付的是清晰的产品规则和每一步的验证。