导读
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、自动化测试等为一体的综合研发测试工具平台。
文 / 凌瑶
关注得物技术,做最潮技术人!