【新手向】AI 编程从 0 到 3：一套代码开发 Web、iOS、安卓三端 APP & InsForge MCP 后端数据库、用户授权

UP主: 吕立青_JimmyLv · 时长: 37:27 · 🔗 B站原视频

标签: AI编程 · Cursor · Expo · 全栈开发 · 移动应用开发

一套代码实现三端智能记账 APP

AI 编程，一套代码为你实现 Web 版、安卓版、iOS 版三端应用，并且支持一句话文本输入记账，文本语音识别自动记账，以及上传图片自动提取账单日期、金额、时间等等。本期视频将带你使用 Expo、OpenAI Codex CLI 以及 Cursor Plan Mode 和 InsForge AI 后端编程 Agent 共同构建。本期视频绝对值得收藏！一键三连加关注，我会给你发完整的代码库。

Hello 大家好，欢迎回到立青的频道，学习最有用的 AI 技术与产品。现在用 AI 写个前端，基本上都是一句话的事。但是后端怎么办呢？我们今天就来解决这个问题，The backend for AI coding。我们会解决用户授权、数据库以及对象存储（比如说图片），甚至包括 AI 相关功能的集成。我们都会在一个移动端 APP 当中来具体演示和展现。

初始化 Expo 移动端项目

今天我们会用到 Expo 这个移动端开发工具，它其实是一套框架，我们可以用写 React Native（也就是写前端）的方式来创建一个移动端的 App，并且是 iOS 和安卓都可以同时运行的。

我们现在打开命令行来创建这样一个初始化项目。首先创建 Expo 的 App，它会初始化一个模板，询问名字是什么，我们就叫做 Bill Tracker 吧，是一个和 AI 记账的小应用。你可以看到它现在已经安装了依赖，并且提示可以通过进入这个命令直接把它运行起来。

写代码的时候我通常会使用 Cursor，也就是通过我们的 IDE 来打开它。最开始打开的时候非常简单，它是一个 NPM 的项目，里面会有一些示例相关的代码，比如说有几个 Tab。我们打开命令行，直接 npm run iOS 给它运行起来。运行起来之后，它会自动在我们的 iOS 模拟器当中打开一个 Expo 的示例应用，我们可以看到示例的首页已经出来了，并且还会有第二个 Tab 叫探索，里面介绍了一些它的特性。这就是一个非常基础的小的移动端应用了。

配置 Cursor Rules 与版本管理

我们现在来做的事情是新建一个 Cursor Rules。在 Cursor 里面你可以直接斜杠 /generate Cursor Rules，一般来说如果你对项目不熟悉，可以直接创建。当然如果我这边已经有了一套之前写好的预配置的话，就直接 copy 过来了，因为几乎每一个项目我的技术栈都用得差不多，大家可以直接抄作业，我会把相关的配置放到评论区。

这里面大概介绍一下它会是一个什么样的项目，使用什么样的包管理器，用到什么样的状态管理器以及数据请求，以及相关的一些重要文件的位置。这样整个 AI 会根据既定的规则去帮我写这个项目，也就是跟我们开发者真实地对齐起来，共同完成这个项目。

除了 Cursor 的 Agent 以外，我们也可以用 agents.md 这个文件。这个文件是可以被多个工具识别的，包括 Codex、Claude Code，都可以复用这样一个 Agent 的规范。大家共同遵循同一份规范来写代码，相关的代码就不会乱了，架构也会更加靠谱。

在正式写代码之前，我们先直接 commit 一下。对于一个新项目来说，如果没有版本管理，整个代码和相关配置可能不小心搞跪了，就没有办法回退到之前的状态。有了 git init 之后，我们就可以直接让 AI 去帮我们生成一个 commit 的信息，从而自动提交。

使用 Cursor Plan Mode 制定开发计划

下一步我想给大家推荐一下 Cursor 的 Plan Mode。Plan Mode 就是在我们正式开发之前，先跟 AI 聊一聊，看看相关架构是什么，要完成的功能分别拆解成具体的可实施的计划。就像我们在做 PRD 评审，这是软件开发当中经常会用到的需求对齐会议，我们跟设计师、产品经理、老板之间达成共识，规划项目应该做成什么样。

如果要做一个实际的应用，我会先把设计稿截图发给它。我们现在其实没有设计稿，但通常我会直接去网上找一些不错的设计稿，直接把截图拖到对应的 Cursor 聊天窗口当中。我们跟它说：“帮我写一个智能记账 APP 的几个 Tab，要简洁，支持图表，右下角有一个添加入口。”

可以看到它会先进行思考，跟我们共同决定要实现哪些功能，并且能够直接识别到我提供的 UI 截图。它说首页要显示总余额、收入、支出概览、最近账单列表等等，统计页要有图表展示以及每年、每周、每月的切换，钱包页要能够支持多个账户的管理。

它说制定详细计划前，需要确认几个关键问题。首先是后端和数据存储，是否要用到后端的数据库，还是暂时先用本地模拟数据稍后再接入后端？这里我更推荐大家先把前端写出来，后面再接入后端。其次是用户认证，能不能实现邮箱注册、登录以及第三方登录等功能？我们现在先选择跳过认证，直接进入主界面。还有功能的完整性（创建、读取、删除等），以及是否需要添加 i18n 国际化配置。这得益于我们有了 Cursor 的 Rules，它能够在约定好的框架下来制定计划，让整个项目更加可靠并符合预期。

我们交由 AI 的任务可以先更细一点、更小一点，逐一去迭代它。因为 AI agent 有上下文大小限制，我们刚刚其实已经花掉了 20% 的上下文了，所以先让它不去动后端部分。我回答它：“先直接用本地的数据库，使用本地的 SQLite。”像 Expo 是有数据库的，我们可以搜索一下 SQLite，把相关的文档直接发给它。以前是我们自己去学习文档，现在让 AI 去学，但关键是你得知道给它的 context 是否准确、是否符合预期。

第二个问题用户认证我们也先跳过，让它实现完整的 CRUD 功能，先用本地数据库操作，国际化先不做。

拆解任务与执行前端代码

有了后续计划，我们就可以让它去具体实施了。思考模型引入之后，对于人类开发者也有一个启发：思考和执行应该拆分成两个部分。

现在它已经有了一个 Plan 的文档，里面包括了状态管理、四个 Tab 的功能、需要安装的依赖包，以及数据库需要写的 schema 设计。在这个阶段它需要的智能推理能力更强，我们可以用比较高级的 AI 来编写。

有了文档之后，我们可以直接修改。Cursor Plan 模式里的文档是可以直接变更的，发现不合时宜的可以直接修改。比如右下角需要的浮动添加按钮，我希望有四种输入方式：常规表单填写、文本输入（输入一句话自动识别金额日期）、语音识别、相机图像识别（处理发票、小票或微信支付截图）。我在这里直接写详细一点。当然我们也可以不直接修改，继续跟它对话也是可以的。

确认好细节之后，它会有一个 to-do list，你也可以添加新的 to-do 描述要干的活。完成计划后，甚至可以直接把它保存到 Cursor 的 plans 文件夹里。有了这个文件夹，我可以在命令行直接打开 Codex，让另外一个善于执行的 AI 来进行整体运行。

我们先让它跑起来，直接 @ 请基于计划执行。然后就可以等待 AI agent 自动帮我们干活了，因为通常运行时间非常长，过程中我们可以去做点其他事情。

修复报错与前端功能测试

我们回来看一下，Codex 吭哧吭哧帮我们做了好多事情。长长的列表生成了代码，最后还有一个总结：集成了 SQLite、zustand 状态管理器、Tailwind 在 React Native 上的 UI 组件，首页、钱包页、个人信息页以及图表页这几个 Tab 都出来了。按照树状显示，可以看到新增的代码一应俱全。

我们去看它具体报了什么错。刚刚报的错应该是一个 plugins 配置项没对，我们让 AI 继续修改，直接把错误贴给它。AI 没有办法解决，我们就上网搜了一下，大概率是因为 NativeWind v2 的 React Native 设置有问题，我们把文档贴给它。

错误解决之后，整个 APP 就可以正常显示了。颜色确实用了我在 Cursor Rules 里面指定的粉蓝色，偏向于使用 pink 和 sky 这两种颜色。

我们看一下几个 Tab 是否正常。export 这个 Tab 应该是之前留的，直接删掉就好。个人中心编辑功能还没实现，这是钱包页，首页有最近的总余额、通知和搜索功能，还能跳转到统计。这里还有一些错误，我们可以接下来修一修，直接把错误贴给运行中的 coding agent。

我们去看一下具体的功能实现，来添加第一个记录。这个小按钮非常丝滑，还有小动画。我们记第一笔支出，输入金额 12 块，吃早餐。它提示要先添加一个账户，我们先添加一个叫做“合花”，日常花销用 Alipay。输入金额和具体类目，点击保存，这边就直接出现了统计的总余额，也可以查看图表。

前端部分基本上已经全部完成了，整个 APP 的效果非常好。我们可以在这边查看统计，每一笔记录都直接统计到账单当中。

引入 InsForge 与 MCP 模型上下文协议

现在回到最开始的计划，需要处理后端部分了。包括数据存储，应该存到云数据库里，让大家在 APP 或网页端登录都可以进行数据同步。与此同时需要实现用户认证，包括基本的注册和登录。

我们会遇到一个问题：数据应该存在哪？后端数据库的部署应该发生在哪？客户端 APP 可以直接提交到 App Store 或 Google Play，但是对于后端服务，我们需要一个 AI coding agent（后端工程师）来自动处理谷歌登录、AI 集成、文件存储以及云数据库等问题。

之前我使用 Supabase，需要人类去后端点点点配置数据库和对象存储，费劲解决完再回来贴给 Cursor 告诉 AI 怎么用。这个过程破坏了心流和 AI 编程体验，像突然撞上了一堵墙。因为之前的工具是给人类开发者用的，不是给 AI agent 这种智能体作为核心协作者的。AI 协作者不需要人类的图形化界面，它们需要的是标准规范的协议。

一个真正的 AI 原生后端开发工程师应该是什么样的呢？这里介绍 InsForge，它是一种新的开发范式。创建新项目后，它会让我们设置 MCP（模型上下文协议）。通过 MCP，它会告诉 Cursor 的 AI agent 后台有什么样的能力。

比如用户认证，我们可以设置 Google OAuth。数据库方面，用户登录会自动创建一个用户的表。还有对象存储。配置好 MCP 之后，我们不需要做任何操作，AI 可以借由 MCP 自动帮我添加。点击 install by Cursor，它就自动添加进来了，带上了 API token、URL 和 API key。我们可以把这个项目安装到之前创建的 Bill Tracker。

InsForge 安装之后，会提供几个 tool（AI 能够调用的方法），包括获取表格 schema、获取授权信息、创建函数、创建 bucket（对象存储）等。它以标准协议的方式提供给 coding agent。

MCP 带来的四大优势

这里有四个非常典型的好处：

第一，百分百程序化控制。不需要通过图形界面点点点，AI 可以通过一致性、可预测的 API 像调用函数一样去创建数据库、配置认证。

第二，状态感知和上下文持久化。AI 不再是盲人摸象，可以随时调用 get backend metadata 查询当前后端配置，基于完整的上下文进行智能的增删改查。我们 copy 指令问 AI：“我的后端结构现在是什么样的？”它会调用 tool 获取原信息，获得 users 表的详细架构、数据库大小、OAuth 提供商以及 AI 模型集成列表。它甚至会建议下一步操作，比如创建存储桶存收据图片，或创建数据库。

第三，详细的 JSON 格式错误反馈。执行过程中发生错误，MCP 会把详细错误信息返回，告诉 AI 问题出在哪以及修复指令。AI agent 能够获得可操作的、大模型能看懂的程序化反馈，从而自动调试。

第四，安全性。AI 在受保护的环境下进行配置，不用担心造成安全漏洞。

数据库一键迁移至云端

我们可以具体试一下：“请基于当前的数据库操作部署到 InsForge 的云端。”因为当前指定了 database.ts，AI 会自动帮我们创建对应的云数据库字段和表。它有对应的 to-do：创建表结构、安装依赖、更新前端状态管理器。每一个 tool 帮我们执行了 SQL 语句，创建了 bucket 存储发票信息。

以前 InsForge 的 SDK 需要我们自己找文档发给 AI，但 MCP 的好处是可以直接让 AI 进行交互，在协议里告诉它去安装 SDK。这真正实现了“一键把你的 AI 变成全栈工程师”，补齐了 AI 编程的最后一块拼图。

它已经创建了 InsForge 的数据库操作层。我们去后台看一下，刷新后 database 里已经有了 account 和 transaction（账单），bucket 里也有了发票文件夹。这里还有 MCP 的调用历史记录。

前端方面，它帮我们更新了 store，包含增删改查逻辑。添加依赖后 Expo 需要重新运行，InsForge 的环境变量也自动添加进来了，因为 MCP 里包含了后端数据库的相关信息。全程交给后端工程师就把事情搞定了。

最后 AI 还写了一个迁移指南。遇到小报错，直接贴给 AI 让它修，大概率是 tsconfig 里的路径没处理好。AI 创建的迁移文档里记录了数据库创建、存储桶、依赖安装以及更新的代码。最终它恭喜应用已经迁移到了云端。

遇到报错直接让 AI 修复，这就是 MCP 的优势：提供具体的报错和调试信息，AI 有了充足的错误上下文就能自主推理执行。其本质上是一个上下文管理的工程，给到的上下文越足、越有效，AI 越能有的放矢地执行操作。

集成用户授权与登录

我们按住 R 让应用重载一下。目前用户没有登录，所以报错了。我们继续让 AI 添加用户授权：“请继续添加用户授权，基于 InsForge 来做。”

数据库跟用户授权息息相关，有了数据库肯定要基于注册登录的用户做数据管理。Cursor 基于 to-do 创建页面，并使用 InsForge 的用户认证系统编写代码。使用的字段直接来自于后台的 users 表，授权信息也来自我们配置的 OAuth。

这个 OAuth 的好处是，在调试开发阶段可以使用共享的 key，不用自己去配置。未来如果所有服务提供商都支持 MCP 让 AI 自动调用，几乎所有的软件开发工作都可以被取代了。

InsForge 帮我们完成了用户授权部分。刷新一下，有了注册登录界面，包括邮箱密码、Google 和 GitHub 登录。

测试账号注册与数据同步

Google 这个按钮样式有点奇怪，我们截图告诉它优化一下样式和间距。这些优化先不管，我们先测试核心工作。

点击登录，显示的确实是 insforge.dev 的授权信息。因为 OAuth 会走回调唤起网页端，而不是 APP 端，我们手动输入创建一个账号测试。输入 test 注册，注册后自动登录进来了。

创建钱包，初始余额 2000，储蓄卡，账户创建成功。创建一个初始账单，昨天吃饭花了 23，点击保存。可以看到具体的统计、账户和钱包预览。数据真正存起来了，余额、名称以及刚添加的 23 块钱账单都在。

集成 AI 文本与图像识别功能

接下来做 AI 部分。首页预留了四个入口：拍照、语音识别、快速输入。目前代码里只是提醒“即将上线”。

我新起一个 chat 跟 AI 说：“请使用 InsForge 的 AI 集成功能帮我完成文本识别账单、语音识别记账、拍照识别三种输入方式，识别成 JSON object 之后预填到创建表单里让用户确认。”

Cursor 开始调用 InsForge 的 MCP，了解了 AI 功能，制定了计划。这跟我们人为去后台看文档是一样的。InsForge 的架构很清晰，通过 SDK 调用 AI API（如 OpenRouter 集成 Claude、GPT、Gemini）。我们不需要读文档，MCP 告诉 AI agent，它就会自己写代码。

它正在写代码，调用了 InsForge client。目前使用的是 GPT-4o mini，不需要开发者操心 API key，直接内置消耗 credit。里面还有 Gemini 1.5 Pro、Claude 等模型。记账场景 GPT-4o 已经够用了。

它的 prompt 帮我们直接识别 JSON 格式，可能需要手动 JSON parse 一下。语音识别暂时没实现，可以使用客户端本机的语音识别模块。

修复登录状态持久化与三端同步测试

依赖安装完后重启应用。AI 把最近实现的功能写了报告文档，里面还写了注意事项（请求相册、麦克风权限）和短期计划。

再次打开应用，发现没有维持登录状态。我们让 AI 修一下：“现在每次应用刷新或退出后都需要重新登录，请做一个维持本地的登录状态。”

添加了 React Native 的 Async Storage 依赖后，重启 Expo 服务。用户状态持久化设置好了。

我趁机把安卓端也启动了，因为一套代码可以同时运行三端。网页端打开 localhost:8082，应用可以直接打开。登录 test 账号，所有数据直接获取，URL 来自 InsForge。界面 UI 和数据都是共通的，iOS 端刷新数据都在，安卓端登录后数据也是同步的。iOS 重新加载，初始化登录状态也恢复了。

代码成功后提交一下，继续来霍霍测试功能。

测试 AI 文本与发票图像识别

测试文本识别：“今天早餐花了 12 块。”

网页端报错提示 GPT-4o mini 没有 enable。我们后台开启的是 GPT-4o，那就直接用 4o。点击识别，结果出来了：早餐 12 块。但时间识别成了 2023 年，这是一个 bug。

系统 prompt 里没有告诉它今天的日期。我们修改 prompt，把今天的日期作为上下文给它。现在时间正确了，10 月 20 号，餐饮，保存账单，数据直接存入。AI 集成非常丝滑。

测试图像识别。在 Web 端上传一张网上下载的发票图片。AI 自动执行并返回结果：金额 2680，时间 2024 年，备注软件。账单分类识别不对，应该是其他支出，我们手动修改保存。修改成功，总金额更新。

语音识别功能与原生权限处理

看一下语音识别。Web 端没有本机语音模块，我们看 APP 端。

因为添加了原生模块，不能用单纯的 Expo Go，需要运行 npm run iOS 打包一个真正的 iOS 项目安装到模拟器上。

打开打包后的应用，重新登录，数据同步。点击语音识别，立刻报错闪退。应该是需要申请权限。告诉 AI：“点击语音识别后闪退，是否因为没有请求音频录制权限？请做兼容处理。”

AI 修改了代码并在 app.json 添加了权限配置。重新打包运行，还是闪退。告诉 AI：“请做好 try-catch 兼容处理并打出日志。”

有了日志后，发现这个模块在 iOS 模拟器上可能有问题。但我发现这个模块在网页端是支持的，Web 上有相关的 API 可以直接用。

在 Web 端点击语音识别，请求麦克风权限。我说：“昨天花了 38 吃早餐。”识别出来了：早餐 38，时间是 10 月 19 号（昨天）。保存账单，完美！Web 版的语音识别模块搞定了。

最后让 AI 把样式问题修一下，iOS 版入口文字精简一下。

总结：AI 原生后端与 Vibe Coding 新范式

在短短两个小时内，我们完成了一个完整功能的应用。后端可用，包含用户登录、第三方登录、数据库存储同步，甚至 AI 功能集成。所有数据都不需要去后台点点点，直接存储同步。同时支持 Web 端、iOS 端和安卓端，数据完全同步。

这样一个 Vibe Coding 项目就搞定了。通过 AI agent 互相配合，我只需要跟 agent 聊天，它会通过 InsForge 的 MCP 服务自动调试、创建数据库、集成 AI 功能。全程非常心流，沉浸在创造的快乐中。

你的 APP 不再是纯前端应用，而是完全云同步。AI agent 也不再是只会画页面的前端，而是真正的全栈工程师，把 backend 全部搞定。

InsForge 是一个原生设计的后端工程师 agent，它不仅是工具，更是开发范式的演进。它依然有 SDK 和文档，但这些不是给人看的，而是交由 MCP 服务让 AI 去读。我们可以把它看作 Supabase 的替代方案，但它是 Agent Native 的。如果 Supabase 是为人类开发者时代而生，那么 InsForge 就是为 AI 智能体时代而来。它不是替代品，而是继任者。

它帮助我们搞定授权、数据库、云存储、Serverless 函数以及 AI 集成。你最终会认可它的终极定位：智能体软件开发的操作系统。作为 Vibe Coder，我们真正关心的是快速把想法变成能赚钱的 SaaS 工具，而不是深陷云基础设施的泥潭。

InsForge 把后端复杂环节交由编程智能体。像 Cursor、Codex 已经支持 MCP，后端基础设施通过协议把知识喂给 agent，真正解放了人类。如果你也是 AI 原生 IDE 的重度用户，应该多多使用 MCP 服务，让智能体协同构建。

正如云计算普及离不开 AWS 这样的基础设施，智能体计算时代也迫切需要专属的原生基础设施。InsForge 就是这块关键拼图，让人类指挥 agent 自主构建软件，把想象力变成现实。

今天的分享就到这里。InsForge 是开源的，目前有 700 多个 star，大家可以在 GitHub 上点个星尝试一下，只需要配置一个 MCP，剩下的交给 InsForge。记得一键三连，这个应用稍后我会尝试上架应用商店，感兴趣请点个关注，我会分享踩坑过程。下期再见，拜拜！