原創(chuàng)｜得物技術(shù)-凌遙
導(dǎo)讀
Mock是一個(gè)接口編輯模擬工具世剖，可以快速手動(dòng)或者基于YAPI創(chuàng)建Mock接口模擬數(shù)據(jù)調(diào)試旁瘫，同時(shí)支持場(chǎng)景祖凫，場(chǎng)景組的快速切換，方便在開發(fā)期和測(cè)試階段試驗(yàn)不同數(shù)據(jù)返回的UI功能邏輯惠况。
Mooncake數(shù)據(jù)模擬平臺(tái)是得物統(tǒng)一的針對(duì)端側(cè)（包括前端宁仔，客戶端），與服務(wù)側(cè)聯(lián)調(diào)Mock的一款工具產(chǎn)品权埠，在平臺(tái)內(nèi)部可以快速的創(chuàng)建各個(gè)項(xiàng)目產(chǎn)品的Mock多場(chǎng)景數(shù)據(jù)攘蔽。本文主要聚焦Mooncake數(shù)據(jù)模擬平臺(tái)的探索和實(shí)踐。
0. 前言
在技術(shù)研發(fā)過(guò)程中事哭，經(jīng)常會(huì)遇到端側(cè)前置開發(fā)鳍咱，UI鏈路自測(cè)谤辜，特殊問(wèn)題復(fù)現(xiàn)等場(chǎng)景丑念，此時(shí)往往服務(wù)端側(cè)數(shù)據(jù)未準(zhǔn)備好脯倚，或者難以提供特定場(chǎng)景數(shù)據(jù)推正，以及多場(chǎng)景的切換等植榕。而針對(duì)服務(wù)端造數(shù)尊残，存在成本高夜郁，鏈路長(zhǎng)不穩(wěn)定等問(wèn)題竞端，此時(shí)UI端側(cè)的數(shù)據(jù)模擬事富，則會(huì)作為開發(fā)調(diào)試的必備手段。
現(xiàn)今雕擂，在得物技術(shù)部井赌，借助Mooncake數(shù)據(jù)模擬平臺(tái)仇穗，已經(jīng)可以快速地實(shí)現(xiàn)接口Mock數(shù)據(jù)的創(chuàng)建，基于類型定義生成舞丛，基于抓包創(chuàng)建谷誓，基于自定義函數(shù)等方式片林，同時(shí)支持前端费封，客戶端同學(xué)弓摘，快速模擬數(shù)據(jù)測(cè)試末患，驗(yàn)證頁(yè)面璧针，業(yè)務(wù)鏈路探橱，同時(shí)也能快速生成二維碼方便測(cè)試和產(chǎn)品同學(xué)绘证，前置做產(chǎn)品UI測(cè)試和驗(yàn)收嚷那。
Mooncake數(shù)據(jù)模擬平臺(tái)從立項(xiàng)之初腐泻，到最終落地派桩，在過(guò)程中我們總結(jié)了一些探索和實(shí)踐總結(jié)窄坦。今天在此，主要介紹包括三個(gè)部分：
產(chǎn)品簡(jiǎn)單介紹肠缨，以及為什么<typo id="typo-684" data-origin="要" ignoretag="true">要</typo>做 ？
平臺(tái)產(chǎn)品是如何設(shè)計(jì)的脑慧，有哪些技術(shù)點(diǎn) ？
技術(shù)產(chǎn)品的推廣策略是什么樣的 囊骤，如何落地 也物？
1. Mooncake數(shù)據(jù)模擬平臺(tái)
Mooncake數(shù)據(jù)模擬平臺(tái)是得物統(tǒng)一的針對(duì)端側(cè)（包括前端浪蹂，客戶端），與服務(wù)側(cè)聯(lián)調(diào)Mock的一款工具產(chǎn)品浙踢，如下所示洛波，在平臺(tái)可以快速的創(chuàng)建各個(gè)項(xiàng)目產(chǎn)品的Mock多場(chǎng)景數(shù)據(jù)蹬挤。
2. 解決了什么問(wèn)題 吨悍？
在Mooncake平臺(tái)之前育瓜，前端一般使用修改本地代碼填充Mock數(shù)據(jù)躏仇，或者使用接口路徑轉(zhuǎn)換方式替換請(qǐng)求路徑來(lái)完成Mock，進(jìn)行測(cè)試书妻，這種往往需要對(duì)前端代碼有改造成本驻子，針對(duì)一個(gè)接口存在多個(gè)場(chǎng)景缤剧，往往需要進(jìn)行來(lái)回切換驗(yàn)證域慷，如果一個(gè)場(chǎng)景鏈路中荒辕，往往需要多個(gè)接口返回固定的數(shù)據(jù)，需要一個(gè)個(gè)接口替換驗(yàn)證犹褒，沒(méi)有線上存檔抵窒，難以共享，數(shù)據(jù)切換叠骑，鏈路驗(yàn)證繁瑣李皇。
基于如上問(wèn)題，Mooncake平臺(tái)著力完成了如下功能宙枷，來(lái)降低UI側(cè)與服務(wù)側(cè)聯(lián)調(diào)的造數(shù)成本掉房，以及驗(yàn)收側(cè)的溝通成本哪亿。主要包括苏潜，基于插件的Mock代理功能，以及視覺(jué)驗(yàn)收流程巧鸭。
借用Mock的多端代理插件郑叠，無(wú)侵入進(jìn)行Mock需求沸版，隨時(shí)開啟關(guān)閉
借用線上平臺(tái)蟹腾，可以方便多人共享，開啟和切換Mock數(shù)據(jù)的使用場(chǎng)景
使用場(chǎng)景鏈路功能芬首，可以方便測(cè)試一整條鏈路
3. 產(chǎn)品整體設(shè)計(jì)
Mock產(chǎn)品整體财破，包括線上配置平臺(tái)略步，Mock代理層，Mock代理注入（ 僅H5有注入 ）三個(gè)板塊岔帽。
底層線上平臺(tái)提供空間信息，接口导犹，場(chǎng)景节猿，場(chǎng)景鏈路等先馆，并在線上平臺(tái)中支持包括超時(shí)限流的能力，數(shù)據(jù)緩存能力劣针，以及根據(jù)請(qǐng)求路徑，空間骏融，請(qǐng)求方法名返回Mock數(shù)據(jù)的能力等
Mock代理層，包括核心請(qǐng)求劫持邏輯售葡，按照不同端榨咐，劫持不同部分，如H5一般劫持瀏覽器中的XHR和Fetch對(duì)象萍诱，SSR端劫持的HTTPClient饵蒂，Android，IOS蝌蹂，F(xiàn)lutter等劫持了核心的HTTP請(qǐng)求模塊
產(chǎn)品功能用途上支持YAPI數(shù)據(jù)生成，自動(dòng)匹配生成Mock，Mock抓包功能腻脏，接口變更通知殃饿，鏈路配置驗(yàn)收等功能
最終可以支持如產(chǎn)品UI驗(yàn)收囚巴，測(cè)試回歸秽浇，問(wèn)題場(chǎng)景復(fù)現(xiàn)懂昂，Mock數(shù)據(jù)研發(fā)等一系列功能
4. Mooncake平臺(tái)技術(shù)點(diǎn)介紹
Mooncake平臺(tái)本身技術(shù)并不復(fù)雜循衰，但相對(duì)于一般的Mock工具奸鬓，在實(shí)現(xiàn)思路上更胖，可能有所差異捐下。在此就Mock插件代理的主要流程，以及線上平臺(tái)中的抓包流程做簡(jiǎn)單介紹萌业。
4.1 Chrome插件Mock代理流程
首先Chrome插件開啟后將MockProxy.js注入到頁(yè)面的Header中坷襟，而后Proxy改寫頁(yè)面中全局的Fetch和XHR對(duì)象，將頁(yè)面發(fā)起的請(qǐng)求替換成請(qǐng)求Mooncake平臺(tái)的getMockData請(qǐng)求生年，并帶上請(qǐng)求路徑婴程，請(qǐng)求方法，空間Code抱婉，和請(qǐng)求參數(shù)等信息档叔，如果查詢不到數(shù)據(jù)請(qǐng)求，會(huì)再去請(qǐng)求真實(shí)接口蒸绩。
如果可以查詢到Mock數(shù)據(jù)衙四，Proxy插件會(huì)對(duì)返回的配置數(shù)據(jù)進(jìn)行處理（包括執(zhí)行動(dòng)態(tài)JS等），并將最終經(jīng)用戶配置的預(yù)期返回患亿，返回給Fetch和XHR的response传蹈，那么用戶直接拿到的數(shù)據(jù)即為配置的數(shù)據(jù)部分。
4.2 H5頁(yè)面Mock抓包功能實(shí)現(xiàn)
如下圖所示步藕，點(diǎn)擊開啟抓包面板后惦界，再去操作業(yè)務(wù)頁(yè)面（已注入MockProxy腳本），抓包面板會(huì)類似Charles那樣咙冗，實(shí)時(shí)更新當(dāng)前請(qǐng)求的數(shù)據(jù)沾歪，并用以用戶勾選所需要的接口進(jìn)行Mock場(chǎng)景的生成。
具體實(shí)現(xiàn)如下：
- 首先頁(yè)面點(diǎn)擊抓包按鈕乞娄，打開抓包面板瞬逊，會(huì)調(diào)用后臺(tái)服務(wù)显歧，設(shè)置當(dāng)前空間抓取開關(guān)標(biāo)志位開啟
- 業(yè)務(wù)頁(yè)面在注入劫持腳本后，請(qǐng)求邏輯會(huì)經(jīng)過(guò)Mock服務(wù)确镊，Mock服務(wù)返回的請(qǐng)求數(shù)據(jù)里面士骤，帶有標(biāo)志位信息auto為true
- 則會(huì)在業(yè)務(wù)頁(yè)面進(jìn)行真實(shí)請(qǐng)求的數(shù)據(jù)上報(bào)到Mock服務(wù)進(jìn)行落臨時(shí)庫(kù)
- 而后抓包面板會(huì)去請(qǐng)求Mock服務(wù)端最新的抓包數(shù)據(jù)信息
- Mock服務(wù)端會(huì)輪詢?nèi)绻懈碌恼?qǐng)求數(shù)據(jù)，進(jìn)行返回蕾域，否則異步等待
- 如果超時(shí)時(shí)間過(guò)后拷肌，沒(méi)有數(shù)據(jù)更新，則會(huì)中斷輪詢旨巷，停止抓包
整體流程如下所示：
至此筛璧，無(wú)需配置網(wǎng)絡(luò)端口代理寞蚌，就能類似Charles那樣，實(shí)現(xiàn)接口的抓包請(qǐng)求。
5. 技術(shù)產(chǎn)品推廣運(yùn)營(yíng)策略
除了上述產(chǎn)品整體設(shè)計(jì)乏悄，技術(shù)方案<typo id="typo-2468" data-origin="點(diǎn)" ignoretag="true">點(diǎn)</typo>的設(shè)計(jì)開發(fā)外瞬项，技術(shù)產(chǎn)品在上線后矾缓，才是主要工作的剛剛開始冰寻。往往需要進(jìn)行長(zhǎng)期的用戶宣發(fā)，產(chǎn)品迭代完善煤率，直至產(chǎn)品打磨完整仰冠，<typo id="typo-2527" data-origin="用戶" ignoretag="true">用戶</typo>能有一定規(guī)模。在此簡(jiǎn)單介紹下蝶糯，Mooncake平臺(tái)在推廣的迭代過(guò)程中的一些策略方式洋只。
5.1 產(chǎn)品宣發(fā)&完善
首先，前期Mooncake平臺(tái)通過(guò)與各團(tuán)隊(duì)進(jìn)行溝通昼捍，約會(huì)組織產(chǎn)品和技術(shù)分享识虚，先后組織分享20次以上，從首期功能上線端三，到大的產(chǎn)品迭代變更舷礼，給及時(shí)同步到大前端內(nèi)部的各團(tuán)隊(duì)同學(xué)，主要用以收集用戶體驗(yàn)問(wèn)題郊闯，并排期進(jìn)行產(chǎn)品功能完善妻献。
這個(gè)階段還是以健全功能，完善產(chǎn)品體驗(yàn)為主团赁，可能會(huì)有比較多的答疑工作育拨，需要維護(hù)好答疑群，做好用戶文檔編寫工作欢摄，其中用戶文檔熬丧，需要能做到以下幾點(diǎn)。
- 分用戶和場(chǎng)景寫文檔怀挠，而不是分產(chǎn)品菜單寫
- 及時(shí)更新析蝴，對(duì)新上線需求及時(shí)更新使用
- 足夠易用害捕，錄制操作視頻等
5.2 擴(kuò)大產(chǎn)品影響力
中期時(shí)，主要擴(kuò)寬產(chǎn)品的用戶面闷畸，Mooncake平臺(tái)從服務(wù)大前端內(nèi)部尝盼，輻射到效率前端，客戶端佑菩，測(cè)試同學(xué)等盾沫，在產(chǎn)品功能上進(jìn)行大的升級(jí)，然后期間依舊會(huì)通過(guò)會(huì)議分享殿漠、內(nèi)部宣發(fā)赴精，發(fā)現(xiàn)潛在用戶。
同時(shí)绞幌，針對(duì)產(chǎn)品使用開始制作數(shù)據(jù)報(bào)表蕾哟，觀測(cè)雙周使用數(shù)據(jù)情況。同時(shí)開始發(fā)放產(chǎn)品使用問(wèn)卷啊奄，了解進(jìn)一步的產(chǎn)品體驗(yàn)提升點(diǎn)渐苏，以及后續(xù)的產(chǎn)品發(fā)力方向掀潮。
5.3 基于數(shù)據(jù)運(yùn)營(yíng)
后期在產(chǎn)品推到一定階段后菇夸，開始By天，By人仪吧，制作報(bào)表庄新，了解具體產(chǎn)品數(shù)據(jù)情況，包括用戶使用異常薯鼠，用戶粘性情況择诈，用戶分布情況等。
- 比如新增了場(chǎng)景出皇，但是沒(méi)調(diào)用的異常情況羞芍，需要人為跟進(jìn)，是否產(chǎn)品使用存在問(wèn)題郊艘；
- 比如雙周活躍用戶流失了荷科，跟進(jìn)具體同學(xué)，了解最近迭代未使用的原因纱注，是最近無(wú)Mock需求畏浆，做技術(shù)迭代了等自然原因，還是其他原因狞贱，在此需要盡量避免產(chǎn)品使用層面的可惜流失刻获；
- 比如按板塊關(guān)注不同端側(cè)的人數(shù)與使用數(shù)的占比情況，判斷是否需要在某個(gè)用戶組加大推廣力度等瞎嬉。
6. 項(xiàng)目總結(jié)&展望
目前Mooncake平臺(tái)在內(nèi)部已經(jīng)累計(jì)幾百用戶蝎毡，近萬(wàn)個(gè)數(shù)據(jù)場(chǎng)景厚柳，雙周活躍用戶百+，后續(xù)產(chǎn)品將通過(guò)自動(dòng)化測(cè)試來(lái)進(jìn)一步降低產(chǎn)品UI鏈路驗(yàn)收人工成本沐兵，讓測(cè)試提供核心用例草娜，開發(fā)同學(xué)自動(dòng)化進(jìn)行鏈路回歸；然后與數(shù)據(jù)服務(wù)平臺(tái)進(jìn)行深度融合痒筒，減少?gòu)慕涌诙x宰闰，到Mock數(shù)據(jù)生成中的產(chǎn)品割裂。
未來(lái)的Mooncake平臺(tái)會(huì)將演變成結(jié)合接口文檔簿透、服務(wù)市場(chǎng)移袍、數(shù)據(jù)Mock、自動(dòng)化測(cè)試等為一體的綜合研發(fā)測(cè)試工具平臺(tái)老充。
*文/凌遙
關(guān)注得物技術(shù)葡盗，每周一三五晚18:30更新技術(shù)干貨
要是覺(jué)得文章對(duì)你有幫助的話，歡迎評(píng)論轉(zhuǎn)發(fā)點(diǎn)贊～
