从前端到全栈:Supabase+Reac+Qoder一人打造公司级应用与 Agent
如果无法正常显示,请先停止浏览器的去广告插件。
1. AI CODING
APP
TECHNOLOGY
AI POWERED
TESTING
AI AGENT
FRAMEWORK
AI POWERED
PRODUCTION
INNOVATIVE
EXPERIENCE
03.21
ONE-PERSON COMPANY
2. ADB Supabase + React + Qoder打造完整项 应
与Agent
打造公司级应
法论和实践
从前端到全栈:
技术选型
3. 主会场演讲嘉宾
王旭琦(清都)
阿
云
级技术专家
4. https://www.dingtalk.com/wukong
5. 1
BMAD Method
2 OPC-Starter
3
项
实战
6. 1
BMAD Method
7. 多智能体分
设计
声明式
规范驱动开发
作流
作流遵循模式,保证执
的
专业skill,做到专业精深
多种
专业领域使
状态持久化管理,随时暂停恢复
致性
上下 隔离,确保不被其他Agent信息污
染,Agent间信息通过 件共享
职责边界清晰,专注领域不越界
Why BMAD Method
作流,
适应项
不同阶段
从先写再救
,到先规划再迭代
档代码同步,项
进展易把控
Checkpoint&Review机制,保证不偏离
预期 标
8. BMAD Agent Team
PM(产品经理)
Architect(架构师)
职责:编写需求 档 (PRD)、定义史诗 (Epics) 和 户故事 (Stories)
核 指令: prd create-epics-and-stories
TEA(测试架构师)
Dev(开发者)
职责:编写代码、代码审查 (Code Review)
核 指令: dev-story code-review
职责:技术选型、系统设计、实施可 性检查
核 指令: create-architecture implementation-readiness
职责:负责 动化测试与质量 禁
核 指令: automate-test test-design
UX-Designer(体验设计师)
职责:界
设计规范、交互流程(仅限有 UI 的项
Analyst(分析师)
职责:项 初始化、头脑 暴、编写产品简报
核 指令: work ow-init brainstorm-project
)
9. 2
OPC-Starter
10. Why OPC-Starter
预置AI亲和的技术栈
丰富的内置skills
确定性执
,
具调
,减少幻觉
节约token和上下
专家经验沉淀,更容易达成
标
从开发到上线,全
命周期托管
前端React 19UI 组件严格的Schema变更管理机制
后端ADB Supabase(BaaS平台)内置Agent & Skill, 部署前后端服务
Github热度内置Agent Studio框架,极速构建Agent应
,
态好,
档完善的技术栈
11. Why OPC-Starter
预置核
RULES
多种Skills
动态感知上下
的开发Skill
DBA经验Skill
强约束的技术栈
12. Why ADB Supabase
前端亲和&AI亲和
AI Native & 能
Code Agent平台
100% 兼容
Database(数据库)
Edge Function(边缘函数)
AI+服务
阿
云管控
RAG(知识库)
极速创建
完备
前端&移动应
Auth(
类Claw
户认证&管理)
Realtime(消息通知)
Memory(
记忆)
闲时休眠
具
Storage(OSS存储)
Emails & Addon(邮件..)
LLM(
模型调
)
ManageAPI For Agent
13. 3
项
实战
SkillsHub
14. BMAD Master规划&全局管理
> /bmad-help or
> /bmad-master
-主
& 调度器
- 按需选择work ow
- 按需选择SubAgents
- 追踪项 进展
15. BMAD Master规划&全局管理
产PRD
1. 基于需求
2. 基于PRD
成架构设计
3. 基于PRD&架构
成epics & stories
4.完成plan和solution阶段后引导下
步
16. Dev Agent基于规划的开发模式
> /bmad-agent-bmm-dev
- 严格遵守epics & stories执 开发
- 测试驱动,质量优先,100%通过测试才能提交
- 完整的开发追溯流程
- 严格的Schema变更管理
17. TEA(QA) Agent执
> /bmad-agent-bmm-qa
- 为现有功能 成 API 和 E2E 测试
- 使 标准测试框架模式(简单可维护)
- 专注主流程 + 关键边界情况
- 成测试( 代码审查 CR 做审查/验证)
- 测试驱动开发迭代,保证项 稳定性
测试
E2E测试
真实环境联调
Cypress本地测试
Mocks
覆盖核
主
,回归测试
Playwright
Lint 具
单测
回归补完,功能集成最
最快验证
Cypress/MSWLint/Vitest
18.
19. OPS Agent部署服务到ESA
> /bmad:bmm:ops
- 校验Supabase Schema变更
- 部署前端代码到阿 云 ESA Pages
- 配置 定义域名
- 检查服务状态
- 智能运维(Future Work)
#此处为视频图
可替换
遮罩
20.
21. One More Thing
22. ADB Supabase Branch AI Native Feature
为AI编码兜底,让AI编码迭代变得安全可控
23. OPC-Starter已开源,欢迎试
https://github.com/alibaba/opc-starter
&共建
24. THANKS