Exploration and practice of data simulation platform of Dewu App

Guided reading

Mock is an interface editing simulation tool that can quickly create a mock interface to simulate data debugging manually or based on YAPI. It also supports fast switching of scenes and scene groups, which is convenient for testing the UI function logic of different data returns during the development and testing phases.

The Mooncake data simulation platform is a unified tool product for end-side (including front-end, client-side), and the service side to jointly debug mocks. Within the platform, mock multi-scenario data of each project product can be quickly created. This article mainly focuses on the exploration and practice of the Mooncake data simulation platform.

0. Preface

In the process of technology research and development, scenarios such as front-end development on the terminal side, self-testing of UI links, and recurrence of special problems are often encountered. At this time, the data on the server side is often not ready, or it is difficult to provide data for specific scenarios and multiple scenarios. switching, etc. For the server-side data creation, there are problems such as high cost and unstable link length. At this time, the data simulation on the UI side will be used as a necessary means for development and debugging.

Today, in the Dewu Technology Department, with the help of the Mooncake data simulation platform, the creation of interface mock data can be quickly realized, based on type definition generation, based on packet capture creation, based on custom functions, etc., while supporting front-end, client-side students, Quickly simulate data tests, verify pages, business links, and also quickly generate QR codes to facilitate testing and product students, and do product UI testing and acceptance in advance.

From the beginning of the Mooncake data simulation platform to the final implementation, we have summarized some explorations and practices in the process. Here today, the main introduction includes three parts:

• A brief introduction to the product and why?
• How are platform products designed and what are the technical points?
• What is the promotion strategy of technical products and how to implement it?

1. Mooncake Data Simulation Platform

Mooncake data simulation platform is a unified tool product for end-side (including front-end, client-side), and the service side to jointly debug Mock. As shown below, the platform can quickly create Mock multi-scenario data of each project product .

2. What problem was solved?

Before the Mooncake platform, the front-end generally used to modify the local code to fill the mock data, or use the interface path conversion method to replace the request path to complete the mock and test, which often required the transformation of the front-end code. There are multiple scenarios for an interface. It is often necessary to switch back and forth for verification. If there is a scenario link, multiple interfaces are often required to return fixed data, and one interface needs to be replaced for verification. There is no online archive, it is difficult to share, data switching, and link verification is cumbersome.

Based on the above problems, the Mooncake platform focuses on completing the following functions to reduce the cost of joint debugging between the UI side and the service side, as well as the communication cost on the acceptance side. It mainly includes the plug-in-based Mock proxy function and the visual acceptance process.

• Borrow Mock's multi-terminal proxy plug-in, no intrusion for Mock requirements, open and close at any time
• Borrowing the online platform, it is convenient for multiple people to share, open and switch the usage scenarios of Mock data
• Using the scene link function, you can easily test a whole link

3. Overall product design

Mock product as a whole, including online configuration platform, Mock proxy layer, Mock proxy injection (only H5 has injection) three sections.

• The underlying online platform provides spatial information, interfaces, scenarios, scenario links, etc., and the online platform supports the ability to limit current over time, data caching, and the ability to return mock data according to the request path, space, and request method name, etc.
• The Mock proxy layer, including the core request hijacking logic, hijacks different parts according to different ends. For example, H5 generally hijacks the XHR and Fetch objects in the browser, and the HTTPClient, Android, IOS, Flutter, etc. hijacked by the SSR side hijacks the core HTTP request module.
• Product functions and uses support YAPI data generation, automatic matching to generate Mock, Mock packet capture function, interface change notification, link configuration acceptance and other functions
• Finally, it can support a series of functions such as product UI acceptance, test regression, problem scenario reproduction, Mock data research and development, etc.

4. Introduction to Mooncake Platform Technology

The technology of the Mooncake platform itself is not complicated, but compared with the general mock tools, there may be differences in the implementation ideas. Here is a brief introduction to the main process of the Mock plug-in proxy and the packet capture process in the online platform.

4.1 Chrome plug-in Mock proxy process

First, after the Chrome plug-in is enabled, MockProxy.js is injected into the Header of the page, and then the Proxy rewrites the global Fetch and XHR objects in the page, replacing the request initiated by the page with the getMockData request requesting the Mooncake platform, and bringing the request path and request method. , space code, and request parameters and other information, if the data request cannot be queried, the real interface will be requested again.

If the Mock data can be queried, the Proxy plug-in will process the returned configuration data (including executing dynamic JS, etc.), and return the final expected user configuration to the response of Fetch and XHR, then the data directly obtained by the user That is the data part of the configuration.

4.2 Implementation of H5 page Mock packet capture function

As shown in the figure below, click to open the packet capture panel, and then go to the operation business page (the MockProxy script has been injected). The packet capture panel will update the current requested data in real time like Charles, and use the user to check the required interface for Mock. Generation of the scene.

The specific implementation is as follows:

• First, click the capture button on the page to open the capture panel, which will call the background service and set the current space capture switch flag to enable
• After the business page injects the hijacking script, the request logic will go through the Mock service. In the request data returned by the Mock service, the flag information auto is true
• The data that is actually requested on the business page will be reported to the Mock service for the drop-off temporary library.
• Then the packet capture panel will request the latest packet capture data information from the Mock server
• The Mock server will poll and return if there is updated request data, otherwise wait asynchronously
• If there is no data update after the timeout period, the polling will be interrupted and the packet capture will be stopped.

The overall process is as follows:

So far, no need to configure the network port proxy, you can realize the packet capture request of the interface like Charles.

5. Technical product promotion and operation strategy

In addition to the overall design of the above-mentioned products and the design and development of technical solution points, after the technical products are launched, the main work has just begun. It is often necessary to carry out long-term user publicity and iterative improvement of the product until the product is polished and the user can have a certain scale. In this brief introduction, some strategies of the Mooncake platform in the iterative process of promotion.

5.1 Product announcement & improvement

First of all, in the early stage, the Mooncake platform communicated with various teams, organized product and technology sharing, and organized sharing more than 20 times, from the launch of the first phase of functions, to major product iterative changes, to the teammates who synchronized to the big front-end in time. , which is mainly used to collect user experience issues and schedule product improvements.

This stage is still focused on improving the functions and improving the product experience. There may be a lot of Q&A work. It is necessary to maintain the Q&A group and do a good job of writing user documents. The user documents need to be able to do the following.

• Write documentation by user and scenario, not by product menu
• Timely update, timely update and use for new online requirements
• Enough to use, record operation video, etc.

5.2 Expand product influence

In the mid-term, it mainly expands the user side of the product. The Mooncake platform radiates from the inside of the large service front-end to the efficiency front-end, the client, and the test classmates, etc., and greatly upgrades the product functions. to discover potential users.

At the same time, start to make data reports for product usage, and observe bi-weekly usage data. At the same time, we began to issue product use questionnaires to learn about further product experience improvement points and follow-up product development directions.

5.3 Data-based operations

In the later stage, after the product has been pushed to a certain stage, start by day, by person, and make reports to understand the specific product data, including abnormal user usage, user stickiness, and user distribution.

• For example, if a new scene is added, but the abnormal situation that is not called requires manual follow-up, whether there is a problem with the use of the product;
• For example, for the loss of biweekly active users, follow up with specific classmates to understand the reason why the latest iteration has not been used, whether it is a natural reason such as no Mock requirement recently, doing technical iteration, etc., or other reasons, here we need to try to avoid the loss of product use. ;
• For example, pay attention to the proportion of the number of users and the number of users on different terminals according to the section, and determine whether to increase the promotion efforts in a certain user group.

6. Project Summary & Outlook

At present, the Mooncake platform has accumulated hundreds of users, nearly 10,000 data scenarios, and 100+ biweekly active users. Subsequent products will further reduce the labor cost of product UI link acceptance through automated testing, allowing testing to provide core use cases and automation for development students. Perform link regression; then deeply integrate with the data service platform to reduce product fragmentation from interface definition to Mock data generation.

The future Mooncake platform will evolve into a comprehensive R&D and testing tool platform that combines interface documentation, service market, data Mock, and automated testing.

Text/Ling Yao pays attention to Dewu technology and becomes the most fashionable technical person!