得物 App 数据模拟平台的探索和实践

导读

Mock 是一个接口编辑模拟工具，可以快速手动或者基于 YAPI 创建 Mock 接口模拟数据调试，同时支持场景，场景组的快速切换，方便在开发期和测试阶段试验不同数据返回的 UI 功能逻辑。

Mooncake 数据模拟平台是得物统一的针对端侧（包括前端，客户端），与服务侧联调 Mock 的一款工具产品，在平台内部可以快速的创建各个项目产品的 Mock 多场景数据。本文主要聚焦 Mooncake 数据模拟平台的探索和实践。

0. 前言

在技术研发过程中，经常会遇到端侧前置开发，UI 链路自测，特殊问题复现等场景，此时往往服务端侧数据未准备好，或者难以提供特定场景数据，以及多场景的切换等。而针对服务端造数，存在成本高，链路长不稳定等问题，此时 UI 端侧的数据模拟，则会作为开发调试的必备手段。

现今，在得物技术部，借助 Mooncake 数据模拟平台，已经可以快速地实现接口 Mock 数据的创建，基于类型定义生成，基于抓包创建，基于自定义函数等方式，同时支持前端，客户端同学，快速模拟数据测试，验证页面，业务链路，同时也能快速生成二维码方便测试和产品同学，前置做产品 UI 测试和验收。

Mooncake 数据模拟平台从立项之初，到最终落地，在过程中我们总结了一些探索和实践总结。今天在此，主要介绍包括三个部分：

• 产品简单介绍，以及为什么要做 ？

• 平台产品是如何设计的，有哪些技术点 ？

• 技术产品的推广策略是什么样的 ，如何落地 ？

1. Mooncake 数据模拟平台

Mooncake 数据模拟平台是得物统一的针对端侧（包括前端，客户端），与服务侧联调 Mock 的一款工具产品，如下所示，在平台可以快速的创建各个项目产品的 Mock 多场景数据。

2. 解决了什么问题？

在 Mooncake 平台之前，前端一般使用修改本地代码填充 Mock 数据，或者使用接口路径转换方式替换请求路径来完成 Mock，进行测试，这种往往需要对前端代码有改造成本，针对一个接口存在多个场景，往往需要进行来回切换验证，如果一个场景链路中，往往需要多个接口返回固定的数据，需要一个个接口替换验证，没有线上存档，难以共享，数据切换，链路验证繁琐。

基于如上问题，Mooncake 平台着力完成了如下功能，来降低 UI 侧与服务侧联调的造数成本，以及验收侧的沟通成本。主要包括，基于插件的 Mock 代理功能，以及视觉验收流程。

• 借用 Mock 的多端代理插件，无侵入进行 Mock 需求，随时开启关闭

• 借用线上平台，可以方便多人共享，开启和切换 Mock 数据的使用场景

• 使用场景链路功能，可以方便测试一整条链路

3. 产品整体设计

Mock 产品整体，包括线上配置平台，Mock 代理层，Mock 代理注入（ 仅 H5 有注入 ）三个板块。

• 底层线上平台提供空间信息，接口，场景，场景链路等，并在线上平台中支持包括超时限流的能力，数据缓存能力，以及根据请求路径，空间，请求方法名返回 Mock 数据的能力等

• Mock 代理层，包括核心请求劫持逻辑，按照不同端，劫持不同部分，如 H5 一般劫持浏览器中的 XHR 和 Fetch 对象，SSR 端劫持的 HTTPClient，Android，IOS，Flutter 等劫持了核心的 HTTP 请求模块

• 产品功能用途上支持 YAPI 数据生成，自动匹配生成 Mock，Mock 抓包功能，接口变更通知，链路配置验收等功能

• 最终可以支持如产品 UI 验收，测试回归，问题场景复现，Mock 数据研发等一系列功能

4. Mooncake 平台技术点介绍

Mooncake 平台本身技术并不复杂，但相对于一般的 Mock 工具，在实现思路上，可能有所差异。在此就 Mock 插件代理的主要流程，以及线上平台中的抓包流程做简单介绍。

4.1 Chrome 插件 Mock 代理流程

首先 Chrome 插件开启后将 MockProxy.js 注入到页面的 Header 中，而后 Proxy 改写页面中全局的 Fetch 和 XHR 对象，将页面发起的请求替换成请求 Mooncake 平台的 getMockData 请求，并带上请求路径，请求方法，空间 Code，和请求参数等信息，如果查询不到数据请求，会再去请求真实接口。

如果可以查询到 Mock 数据，Proxy 插件会对返回的配置数据进行处理（包括执行动态 JS 等），并将最终经用户配置的预期返回，返回给 Fetch 和 XHR 的 response，那么用户直接拿到的数据即为配置的数据部分。

4.2 H5 页面 Mock 抓包功能实现

如下图所示，点击开启抓包面板后，再去操作业务页面（已注入 MockProxy 脚本），抓包面板会类似 Charles 那样，实时更新当前请求的数据，并用以用户勾选所需要的接口进行 Mock 场景的生成。

具体实现如下：

• 首先页面点击抓包按钮，打开抓包面板，会调用后台服务，设置当前空间抓取开关标志位开启

• 业务页面在注入劫持脚本后，请求逻辑会经过 Mock 服务，Mock 服务返回的请求数据里面，带有标志位信息 auto 为 true

• 则会在业务页面进行真实请求的数据上报到 Mock 服务进行落临时库

• 而后抓包面板会去请求 Mock 服务端最新的抓包数据信息

• Mock 服务端会轮询如果有更新的请求数据，进行返回，否则异步等待

• 如果超时时间过后，没有数据更新，则会中断轮询，停止抓包

整体流程如下所示：

至此，无需配置网络端口代理，就能类似 Charles 那样，实现接口的抓包请求。

5. 技术产品推广运营策略

除了上述产品整体设计，技术方案点的设计开发外，技术产品在上线后，才是主要工作的刚刚开始。往往需要进行长期的用户宣发，产品迭代完善，直至产品打磨完整，用户能有一定规模。在此简单介绍下，Mooncake 平台在推广的迭代过程中的一些策略方式。

5.1 产品宣发 &完善

首先，前期 Mooncake 平台通过与各团队进行沟通，约会组织产品和技术分享，先后组织分享 20 次以上，从首期功能上线，到大的产品迭代变更，给及时同步到大前端内部的各团队同学，主要用以收集用户体验问题，并排期进行产品功能完善。

这个阶段还是以健全功能，完善产品体验为主，可能会有比较多的答疑工作，需要维护好答疑群，做好用户文档编写工作，其中用户文档，需要能做到以下几点。

• 分用户和场景写文档，而不是分产品菜单写

• 及时更新，对新上线需求及时更新使用

• 足够易用，录制操作视频等

5.2 扩大产品影响力

中期时，主要扩宽产品的用户面，Mooncake 平台从服务大前端内部，辐射到效率前端，客户端，测试同学等，在产品功能上进行大的升级，然后期间依旧会通过会议分享、内部宣发，发现潜在用户。

同时，针对产品使用开始制作数据报表，观测双周使用数据情况。同时开始发放产品使用问卷，了解进一步的产品体验提升点，以及后续的产品发力方向。

5.3 基于数据运营

后期在产品推到一定阶段后，开始 By 天，By 人，制作报表，了解具体产品数据情况，包括用户使用异常，用户粘性情况，用户分布情况等。

• 比如新增了场景，但是没调用的异常情况，需要人为跟进，是否产品使用存在问题；

• 比如双周活跃用户流失了，跟进具体同学，了解最近迭代未使用的原因，是最近无 Mock 需求，做技术迭代了等自然原因，还是其他原因，在此需要尽量避免产品使用层面的可惜流失；

• 比如按板块关注不同端侧的人数与使用数的占比情况，判断是否需要在某个用户组加大推广力度等。
  

6. 项目总结 &展望

目前 Mooncake 平台在内部已经累计几百用户，近万个数据场景，双周活跃用户百+，后续产品将通过自动化测试来进一步降低产品 UI 链路验收人工成本，让测试提供核心用例，开发同学自动化进行链路回归；然后与数据服务平台进行深度融合，减少从接口定义，到 Mock 数据生成中的产品割裂。

未来的 Mooncake 平台会将演变成结合接口文档、服务市场、数据 Mock、自动化测试等为一体的综合研发测试工具平台。

*文/凌瑶

关注得物技术 @得物技术公众号