Bakery 产品演示平台的探索与实践

1. Bakery 产品演示平台的探索与实践徐奇昊（念响 | Maqic）蚂蚁集团 RichLab 团队前端工程师

2. 目录 01 02 为什么要做产品演示平台怎样做一款产品演示平台 03 未来计划做的一些事情

3. /01 为什么要做产品演示平台

4. 支付宝 H5 产品研发过程中存在的问题（以借呗首⻚改版为例）迭代开始提测需求评审开发联调 - 首⻚超过 20 个状态 - 老旧的产品文档、 - Hybrid 容器环境， - 走真实链路，难以 - - 视觉稿过期、无法交互调试难环境不稳定，造账号繁琐视觉验收覆盖所有场景交付截图、录屏，无法交互兼容测试 - 机型多、版本杂 - 反复造账号、操作⻚面、对比结果，效率低下发布数据分析 - 找不到埋点点位 - 数据展示不直观迭代结束

5. 支付宝 H5 产品研发过程中存在的问题（以借呗首⻚改版为例）迭代开始提测需求评审开发联调 - 首⻚超过 20 个状态 - 老旧的产品文档、 - Hybrid 容器环境， - 走真实链路，难以 - - 视觉稿过期、无法交互调试难环境不稳定，造账号繁琐视觉验收覆盖所有场景交付截图、录屏，无法交互兼容测试 - 机型多、版本杂 - 反复造账号、操作发布数据分析迭代结束 - 找不到埋点点位 - 数据展示不直观⻚面、对比结果，效率低下引发的思考：在产品迭代演进中，如何让不同岗位的参与者实时对焦产品交付产物，提升交付质量？产品交付不顺畅可能引发的问题

6. Bakery 一站式产品演示平台支持应用类型小程序 Hybrid H5 PC Web 站点服务场景需求分析视觉验收开发联调兼容测试核心模块 Bakery UI 本地研发套件 Bakery Web 中心化演示平台旨在提升产品研发过程中的协作效能

7. /02 怎样做一款产品演示平台

8. 产品演示的三大构成要素接口数据 MOCK 数据如何管理？容器能力 Hybrid 容器如何模拟？静态资源⻚面、css、js 在浏览器内演示借呗首⻚状态关键要素

9. 使用 Bakery UI 本地研发套件管理 MOCK 数据可视化管理提供 GUI 界面用于 MOCK 数据管理和场景切换场景聚合能力支持按业务语义将多个接口返回值归类一键切换复杂业务场景轻量、去中心沉淀的标准化 MOCK 资产可在各类预览场景中使用 Bakery UI 主界面特点

10. 使用 Bakery UI 本地研发套件管理 MOCK 数据可视化管理提供 GUI 界面用于 MOCK 数据管理和场景切换场景聚合能力支持按业务语义将多个接口返回值归类一键切换复杂业务场景轻量、去中心沉淀的标准化 MOCK 资产可在各类预览场景中使用 Bakery UI 主界面特点

11. Bakery UI - 技术实现 Bakery UI（本地研发套件） plugins bakery-core mock-server cli mock-script bakery-sdk egg umi node/fs antd 使用「文件树」存储 mock 数据

12. Hybrid 容器如何模拟容器模拟拦截接口类调用 H5 业务逻辑环境监测 UA 替换沙盒初始化调用代理 mock 数据源 JSBridge bakery-mock.js （拦截、代理脚本）降级交互类调用 web 端实现（antd-mobile）

13. 基于产品演示能做哪些事？

14. 前端开发阿强视觉验收提效传统的视觉验收流程完成⻚面改巴改巴 ? 如何改进这些问题？ ? 对比图片，标注问题珍啊，改完了再瞧瞧（发送⻚面截图 x 30） ?? 截图、录屏无法完整体现交互细节难以覆盖所有⻚面状态珍珍，可以验收了（发送⻚面截图 x 20）强强，问题有点多这几个⻚面状态漏了无法异步协作，沟通成本高设计师阿珍继续改强呐，这几个地方的字体不对点击按钮后的交互能录个屏给我么（难受住）阿珍，要不来我工位这边来验收吧 <待续未完...> 重新对比图片，标注问题

15. 视觉验收提效基于产品演示的自助视觉验收前端开发阿强完成⻚面开发创建演示场景 Bakery 设计师阿珍上传视觉稿触发验收任务返回《验收报告》按报告提示调整样式自动触发验收任务直至报告显示通过发送验收通过报告视觉验收报告 ? 牛啊，阿强！

16. 埋点资产服务 Before 根据描述推测按点位查询点位映射表界面元素和埋点点位的映射关系埋点数据表 a1.b2.c3.d4 After 点击率 20% Bakery 可视化新建埋点拦截点击事件对接埋点数据表界面元素和埋点数据的映射关系

17. 产品大图快速了解产品全貌直观展示⻚面完整状态按迭代回溯产品功能支持业务流程编排

18. 产品大图快速了解产品全貌直观展示⻚面完整状态按迭代回溯产品功能支持业务流程编排

19. 整体回顾（2019-2022）一站式产品演示平台视觉验收 H5 产品研发存在问题容器调试难环境不稳定优先解决开发者的问题 Bakery UI 本地研发套件数据管理容器模拟尝试服务非研发人群 Bakery Web 产品演示平台反向代理场景管理基于产品演示能做哪些事？兼容测试埋点资产开放能力

20. /03 未来计划做的一些事情

21. 降低演示录入成本，提升产品演示价值适配更多应用类型探索更多使用场景回馈开源社区其他小程序、普通 H5 产品手册、舆情回放 Bakery UI、产品演示方案

22. 谢谢观看欢迎钉钉扫码加入「Bakery - 产品演示沟通交流群」