当前位置: 首页 > Web前端 > HTML

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

时间:2023-03-28 12:34:34 HTML

GuideMock是一款界面编辑模拟工具,可以快速创建手动或基于YAPI的Mock界面模拟数据调试,支持场景和场景组快速切换,方便使用时开发期和测试期,测试不同数据返回的UI功能逻辑。月饼数据模拟平台是一款端侧(含前端、客户端)和服务端联调Mock的统一工具产品,可快速创建平台内各项目产品的Mock多场景数据。本文主要围绕月饼数据模拟平台的探索与实践展开。0.前言在技术研发过程中,经常会遇到端侧前端开发、UI链接自测、特殊问题复现等场景。这个时候服务器端的数据往往还没有准备好,或者很难提供具体的场景数据。以及多场景切换等。对于服务器端数据创建,存在成本高、链接长度不稳定等问题。这时候UI端的数据模拟就会作为开发调试的必要手段。今天,在得物技术部,借助月饼数据模拟平台,可以快速实现接口Mock数据的创建,基于类型定义生成、抓包创建、自定义函数等,同时支持前端-端,客户端同学,快速模拟数据测试,验证页面,业务链接。同时也可以为测试和产品同学快速生成二维码,提前做好产品UI测试验收。从立项到最终实现月饼数据模拟平台,过程中我们总结了一些探索和实践总结。今天在这里,主要介绍包括三个部分:产品简介,我们为什么要做?平台产品是如何设计的,有哪些技术要点?科技产品的推广策略是什么,如何实施?1.月饼数据模拟平台月饼数据模拟平台是端侧(包括前端、客户端)和服务端联调Mock的统一工具产品。如下图,可以在平台上快速创建各种项目Mock产品的多场景数据。2.解决了什么问题?在Mooncake平台之前,前端一般采用修改本地代码填充Mock数据,或者使用接口路径转换的方式替换请求路径来完成Mock和测试。这往往需要前端代码的修改成本,而且一个接口有多种场景。经常需要来回切换验证。如果一个场景链接中需要多个接口返回固定数据,则需要对每个接口进行替换验证。没有在线存档,难以共享,数据切换、链接验证繁琐。基于以上问题,月饼平台着重完成了以下功能,以降低UI端和服务端联调的做号成本,以及验收端的沟通成本。主要包括基于插件的Mock代理功能和可视化验收流程。借用Mock的多端代理插件,无入侵Mock需要,随时开启关闭借用在线平台,使用场景链接功能可以方便多人分享、开启和切换Mock数据的使用场景,您可以轻松测试整个链接3。产品整体设计Mock产品整体,包括在线配置平台、Mock代理层、Mock代理注入(只有H5有注入)三个部分。底层线上平台提供空间信息、接口、场景、场景链接等,支持限流超时能力、数据缓存,支持根据请求路径、空间、请求方法名返回Mock数据,etc.Mock代理层,包含核心请求劫持逻辑,根据不同端劫持不同部分,如H5一般劫持浏览器中的XHR和Fetch对象,SSR劫持HTTPClient,Android、IOS、Flutter等劫持核心HTTP请求模块在产品功能和使用方面,支持YAPI数据生成、自动匹配生成Mock、Mock抓包功能、接口变更通知、链接配置验收等功能,最终可以支持产品UI验收、测试回归、问题场景复现、Mock数据研发等系列功能4.月饼平台技术介绍月饼技术platform本身并不复杂,但是和一般的mock工具相比,在实现思路上可能会有差异。这里简单介绍一下Mock插件代理的主要流程和线上平台的抓包流程。4.1Chrome插件Mock代理流程首先,启用Chrome插件后,在页面的Header中注入MockProxy.js,然后Proxy重写页面中的全局Fetch和XHR对象,替换发起的请求通过mooncake平台getMockData请求的页面,并带上请求路径,请求方法,空间编码,以及请求参数等信息,如果找不到数据请求,会重新请求真正的接口。如果可以查询到Mock数据,Proxy插件会对返回的配置数据进行处理(包括执行动态JS等),将用户配置的预期返回返回给Fetch和XHR的响应,然后直接将数据返回用户获取的是配置的数据部分。4.2H5页面Mock抓包功能实现如下图所示。点击打开抓包面板后,进入业务页面(已经注入了MockProxy脚本),抓包面板会像Charles一样实时更新当前请求的数据,供用户查看生成模拟场景所需的接口。具体实现如下:首先,点击页面上的抓包按钮,打开抓包面板,调用后台服务,设置当前空间抓包开关标志,打开业务页面。注入劫持脚本后,请求逻辑会经过Mock服务,Mock服务返回的请求数据中,如果标志位信息auto为true,则将真正请求的数据上报给Mock服务上业务页面暂存,之后抓包面板会向Mock服务器请求最新的抓包数据信息。Mock服务器将轮流进行。如果有更新的请求数据,则返回,否则异步等待。如果超时后没有数据更新,则轮询中断,停止抓包。整体流程如下:至此,可以在不配置网口代理的情况下,类似于Charles那样,实现接口的抓包请求。5、科技产品推广及运营策略除上述整体产品设计和技术方案点的设计开发外,主要工作在科技产品推出后才刚刚开始。往往需要长期的用户宣传,迭代完善产品,直到产品打磨完善,用户达到一定规模。这里简单介绍一下月饼平台在推广迭代过程中的一些策略。5.1产品发布与改进一是月饼平台前期与各团队沟通,预约组织产品和技术分享,先后组织分享20余次。从一期功能的上线到主要产品的迭代变更,同步到大前端各团队的同学,主要用于收集用户体验问题和改进产品功能的进度表。现阶段,我们还是以完善功能和提升产品体验为主。可能会有更多的问答工作。需要维护好问答群,写好用户文档。其中,用户文档需要能够做到以下几点。根据用户和场景来写文档,而不是根据产品菜单来写和更新。好用好用,录制操作视频等。内部服务前端辐射到效率前端、客户端、测试同学等,在产品功能上进行重大升级,然后期间仍会通过会议分享、内部宣传等方式寻找潜在用户。同时开始做产品使用数据报表,观察双周使用数据。同时开始发放产品使用问卷,进一步了解产品体验改进点和后续产品开发方向。5.3后期数据化运营,产品推到一定阶段后,开始按天,按人,做报表,了解具体的产品数据,包括用户使用异常,用户粘性,用户分布.比如新增了一个场景,但没有调用异常,需要人工跟进,看产品使用是否有问题;比如两周的活跃用户流失了,跟进具体的同学,了解最新迭代没有用到的原因,因为不需要mock最近的技术迭代等自然原因,或者其他原因,需要尽可能避免产品使用上的损失;例如,根据不同终端的人数比例和按行业划分的用户数量,判断是否有必要在某个用户群体中加大宣传力度等。6.项目总结&展望目前,月饼平台已在两周内积累了数百个内部用户,近万个数据场景,超过100个活跃用户。后续产品会通过自动化测试进一步降低产品UI链接验收的人工成本,让测试提供给核心用例,开发同学自动进行链接回归;进而与数据服务平台深度融合,减少从接口定义到Mock数据生成的产品碎片化。未来月饼平台将发展成为集接口文档、服务市场、数据mock、自动化测试于一体的综合研发测试工具平台。文/凌遥关注得物科技,做最时尚的科技人!