Project introduction

The Mocha project is an H5 activity configuration platform for simple, flexible and fast activity page generation. The operation mode uses drag and drop to quickly generate, making it easier to get the content you want, wySIWYG. At the same time, it also supports online preview, scan code preview, one-click release online and other functions. Significantly lower than the cost of developing an AD campaign. So, let’s talk about the active configuration platform

Project flow chart

Mocha active configuration platform project mainly through simple configuration, fast and stable launch, reduce development costs. The technology and framework of this project involve React, DVA, UMI, React-DND, ANTD, etc. Data is stored in ElasticSearch (ES for short) service and synchronously cached to Redis. Data in Redis is directly read and returned when the cache time has not expired, but the focus of this introduction is not the storage and reading of data, but the generation and implementation of a new activity.

Activities to create

Activities are created according to different types, such as: default category, operational activity, launch activity, R&D test, etc. Generally, activities aimed at the research and development or testing of new component functions will be classified in the research and testing category, and other categories will be configured by operation students. Let’s see how to create a new activity, as shown in the figure below:

Here the activity ID is generated by the front end and the active data can be queried in the ES service through this ID value. Active ID generation rule code is as follows:

Active configuration

Now that an activity has been created, let’s look at how to configure an activity and how to implement it. Let’s take a look at the page structure of the configuration activity:

As can be seen from the figure, the page of configuration activity is mainly divided into three parts, namely component library, canvas display area and component property configuration.

Component library

Each component is composed of index. TSX, schema.ts and template.ts files, as shown in the figure below:

  • Index.tsx: displays component content, including the template in the component library on the left and the component on the canvas after parameters are configured

  • Schema. ts: basic data information of a component

  • Template. ts: Component type, generation style, and component name

Each component in the component library is dynamically generated by DynamicEngine components, and the corresponding parameters are passed to DynamicEngine components to generate different components, the code is as follows:

DynamicEngine: DynamicEngine: DynamicEngine: DynamicEngine

In this code, you can see that there is an isTpl attribute in props, which is used for presentation differentiation. IsTpl is displayed in the component library when it is true, otherwise it is displayed in the canvas display area. So let’s take a look at what’s going on in this part of the canvas.

Canvas display area

When a component is dragged from the component library to the canvas, the default information for the component is displayed. Take the image component as an example, as shown below:

As can be seen from the figure, we simply need to configure the corresponding data information to display the desired results on the canvas. So, to see how this part is implemented, the code is as follows:

The DynamicEngine component also exists in the GridLayout component, which handles drag-and-drop events on the canvas. The DynamicEngine is the same component as the component library. The only difference is that the isTpl property is false, which allows you to display different content when the component is dynamically loaded. The isTpl attribute in the isTpl component is used as an example.

The isTpl property is used to do different display processing. The imageList property is used to handle the image display data, so that we can get the data we want in the component library and the canvas display area. So how are component properties configured and resolved? Let’s look at the configuration of component information.

Component Property Configuration

This part is used to configure the specific attribute data of a component. The corresponding configuration component is parsed according to the component’s schema information, and the data configured by the configuration component is rendered to the corresponding component in the canvas display area. The specific types of components are defined in template.ts and schema.ts files as follows:

Using the above information in the component properties configuration area to distinguish the different types of components to load, let’s see how the different types of components are loaded in the FormEditor component, listing some of the types of code as follows:

As you can see, the different property components are dynamically loaded by type in the component’s schema.ts, and some of the properties of the component are set to display in the canvas display area.

Preview & release live

preview

In addition to displaying the configured information on the canvas, you can also preview the configured page for testing and viewing before launching. And the qr code can be generated on the preview page to view the effect on the mobile phone, as shown in the picture:

Published online

After viewing the test through the preview page, we can directly publish online on the preview page, click the “Submit” button to directly publish online, and an online activity is completed in this way.

conclusion

The Mocha activity configuration platform ensures that new activities come online quickly and reduce development costs while ensuring stable output from the B side. Subsequently, the project performance will be gradually optimized to improve the stability and perfection of the project.

The main functions and partial implementation of Mocha activity configuration platform have been introduced in the previous section. Currently, the components supported in the project include picture list, rotation chart, purchase, login, forms and subscription components. After that, components with different functions will be added according to business requirements to enrich the functions of the platform and improve the configuration of the platform.

The Mocha project references the open source project H5 Dooring implementation.