Shenbi Platform Revealed-Low Code Marketing Integration

The Shine Magic Pen activity platform is a one-stop low-code and no-code platform based on the most cutting-edge services such as new promotion, promotion, and transaction. Through rapid launch, channel attribution, market analysis, and strategic adjustments to reduce customer acquisition costs, increase transaction volume, and help companies maximize marketing revenue.

Xinye Magic Pen supports login and registration, marketing pop-ups, red envelope rain, money tree, guess, shake, New Year's Day, seckill free order, certification increase, donated steps for public welfare, points to receive gifts, and help to receive gifts , New customers receive gifts, share red envelopes, share measurement quotas, interest-free fees, mobile points redemption, gift certificates for relatives and friends, and so on. It has the characteristics of full self-service, high performance, good experience, thousands of people, multi-tenant, out-of-the-box, etc. Within 2 years of Xinye Technology's internal launch, it has been used simultaneously on multiple business lines of the group and has been configured independently 427 Landings, pop-ups, events, etc., which greatly saved labor costs and improved operational efficiency and transaction volume.

Magic Pen Design Platform

The Xinye Magic Pen activity design platform is mainly divided into three parts: "building platform, cloud, and client" in terms of architecture. The whole is realized through a cloud integrated solution, achieving the effectiveness of complex services, extreme performance, and efficient delivery. Unite. The following will focus on the technical solutions for the integration of Shenbi marketing.

Shenbi technical architecture

1. International business use

1. How does international business support multiple languages?

International business needs to support multiple languages, using the i18n component, the use of this component to modify the project is very small, each language is packaged into a separate language pack, because different countries are deployed on servers in different countries, the variables are set by building scripts To distinguish languages.

var language = 'en'
if (process.env.COUNTRY === 'ID') {
  language = 'id'
} else if (process.env.COUNTRY === 'PH') {
  language = 'en'
} else if (process.env.COUNTRY === 'VN') {
  language = 'vi'
}
const i18n = new VueI18n({
  locale: language,
  messages,
})

2. How is internationalization connected?

International business access is relatively complicated. The first is code compatibility. In addition to supporting multiple languages, the front-end also has separate storage services, preview addresses, and OSS, and the back-end JAVA services rely on the company’s middleware DAS, Cache, Cat, and Apollo. , Gateway, Redis, etc., but these middlewares were not used for internationalization. At that time, these middlewares were stripped, only Apollo was retained, and the internationalized Cas permission system was connected. The image storage service was also changed from Qiniu to Alibaba Cloud. OSS. The second is site deployment. The international site release method is still through Jenkins. All construction and packaging are the most traditional methods. The Shenbi platform involves three sites, 1 Corp site at the front end, 1 SSR site, and 1 JAVA for data storage. Site. Before deployment, you need to build a database, a table, and an account, provide build commands and Dockerfile files, and the next step is to access the Shenbi platform for international services. Currently, the internationalized Shenbi platform supports the autonomous configuration and release of Landing, pop-up windows, and regular activities.

2. Fast typesetting

1. What are the configuration contents?

The Shenbi activity design platform is divided into three parts as a whole, component selection area, editing preview area, and component attribute editing area. In the component selection area, you can drag or click to select components to the edit preview area. The component selection area also lists all the selected components, which can be sorted by dragging the list. Right-click on the list to copy, delete and set the alignment of the components; Edit preview area, support drag and drop components and real-time preview page, sort the currently active components by drag and drop, you can also right-click to copy, delete and set component alignment, text components can be directly input; component attribute editing is divided into component configuration and page Configuration and page management,

The component configuration includes attribute configuration and style configuration. Attribute configuration is the configuration of component content, such as text content, pictures, button text, button type, jump link, and text input box content. The style configuration includes the outer container style and the component's own style configuration. Which styles are supported for each component can be freely customized, such as component layout, alignment, background color, gradient color, background image, inner and outer margins, level, width and height , Border style, etc., all CSS styles only need to be configured to support; page configuration includes page background image, background color, gradient color and page title, some page-level attributes; page management is support for multi-page applications.

2. How is it classified?

Here’s an important point to talk about, the style attribute configuration of the component, basically each component is a multi-level nested Dom structure, so we also split the configuration of the style into the container style and its own style. The container style is the parent node of the component. Style, including component positioning method (absolute, relative and responsive Flex), component background color, gradient color and background image, width and height, inner and outer margins, level and border style, etc. The child nodes of the component can also have a single child node And multiple child nodes. The own style is the configuration of the style of a single child node, and the internal style is the configuration of multiple child node styles. The component's own style and internal style are both component content-level styles, that is, the style of the content inside the component is configured, all styles Both can support configuration without distinguishing the type of Dom element.

3. Integrated rendering

1. How are the front-end components reused in the cloud and on the client?

The packaged front-end components support cloud and client reuse. As mentioned earlier, there is an edit preview area on the platform. The components in this preview area and the real rendered components are the same components, including views, logic and styles, so the components only It needs to be developed once, and it can be used on both the cloud and the client. The following code is to introduce components in the cloud and the client, to distinguish different components such as text, pictures, input boxes, etc., through the configuration list of the circular component, through the propertyName, and the configuration properties are passed to the component through props.

<div class="editor-preview" :style="pageStyle" :key="pageKey">
    <div  v-for="item in componentList" :key="item.id" :id="`id_component_${item.id}`" :class="generateContainerClass(item)" :style="generateStyleByObj(item.containerStyle,true)">
      <Child v-for="innerItem in item.children" :obj="innerItem" :key="innerItem.id"></Child>
      <CText v-if="item.propertyName == 'text'" :content="item.property.html"  :styleStr="generateStyleByObj(item.selfStyle, true)" :id="item.id"/>
      <CImage v-else-if="item.propertyName == 'image'" :url="item.property.url"  :styleStr="generateStyleByObj(item.selfStyle, true)"/>
      <CInput v-else-if="item.propertyName == 'input'" :placeholder="item.property.placeholder"  :styleStr="generateStyleByObj(item.selfStyle, true)"/>
      <CButton v-else-if="item.propertyName == 'button'" :propery="item.property"  :styleStr="generateStyleByObj(item.selfStyle, true)"/>
      <Popup v-else-if="item.propertyName == 'popup'" :itemConfig="item"/>
    </div>
  </div>

2. How are Vue-SSR components rendered?

Vue-SSR is to render a component on the server side as an HTML string, send it directly to the browser side, and finally "activate" these static tags as a fully interactive application on the client side, so Vue-SSR has a Server side and a Client side, the server side renders the data returned from the back-end server into HTML strings, so compared to CSR, the server load becomes heavier, so monitoring needs to be added, and the memory and CPU usage are too high. Downgrade to CSR, and cache the server side to determine whether the current user has expired, and cache the result if it has not expired.

3. When do you choose to use Handlebars?

Handlebars is a JS template engine, not a framework, so Handlebars is lightweight, convenient and simple to use, and can quickly create templates. It is more suitable for scenarios with simple templates and not too complicated interactions, such as Landing and news articles. Generate static pages to maximize performance. However, because Handlebars generates static HTML by filling data, its code is less readable. The data type of the filled content is not intuitive and needs to be converted. Assuming that the interaction of the page is very complicated, it will be difficult to maintain the logic code. It is recommended to use Vue-SRR isomorphic rendering.

{{!-- 组件区 --}}
{{#each components}}
  {{!-- 图片组件 --}}
  {{#if_eq propertyName 'img'}}
    <div class="component-container" style="{{style}}" onclick="onPictureClick(this,'{{inProp.content}}')">
      <img src="{{inProp.content}}" />
    </div>
  {{/if_eq}}
  {{!-- 输入组件 --}}
  {{#if_eq propertyName 'textarea'}}
    <div style="{{style}}" class="component-input" data-name='{{inProp.name}}'>
      <input type="text" name="{{inProp.name}}" placeholder="{{inProp.content}}">
    </div>
  {{/if_eq}}
{{/each}}

4. Activity template development

1. How is the activity template accessed?

At present, the component types are divided into basic and activity. Basic components include text, pictures, input boxes, buttons, containers, and pop-up windows. This type of component is more versatile and meets the configuration of simple pages. Activity components are relatively easy to customize. For some conventional activities, the activity components that need to be customized are separated. Components that do not require customization can be assembled from basic components. When the activity is connected, the activity in the component selection area is first Add active component options to the class, including the name and ICon, and then introduce the active component Vue in the edit preview area. Here is the complete component, including view, logic and style, and then add the attributes that need to be edited in the component attribute editing area. When editing, the edit preview area can preview the effect in real time, without switching windows to preview the effect, which is simple and convenient.

When accessing activities, you must first split the components, which components need to be customized, which components can be assembled through the basics, what attributes configuration is required for customized components, and how the components communicate with each other. These are before access Need to think and design well, as long as these are designed in the early stage, the efficiency of access will be twice the result with half the effort.

2. How to improve the efficiency of the allocation of activities?

If you want to improve the configuration efficiency of the activity, first of all, in the design of the activity template, try to simplify the attribute configuration as much as possible, and at the same time, it can meet the business needs of the generality of the activity. , We should design this activity from the perspective of the activity template. The simpler the user’s understanding and operation, the better. The second is templating. The configured activities are all templates. To clone the template, you only need to make minor adjustments to the configuration on the cloned template to generate a new activity link, that is, to generate a new activity template.

5. Event ID opens up the whole delivery process

When an activity is created, a unique activity ID is generated, which serves as a unique identifier for the activity throughout the life cycle of the activity. When invoking the back-end JAVA service, the event ID is used to obtain the winning result. The event ID is connected with the Offer platform to issue prizes, as well as post-release channel classification, scheduling management and revenue market analysis. The event ID runs through the transmission link of the entire business. middle.

With the advent of the digital age, digital transformation and upgrading has become the consensus of enterprises, and Xinye Technology will also spare no effort to always uphold the mission of "Technology, Better Finance", devote itself to the research and development of more efficient and smarter digital tools, and actively explore Digital empowerment will continue to create greater value for partners, and work together to create a new ecology in the financial technology industry.

---

Author introduction

HH, the front-end expert of Xinye Technology, responsible for the front-end research and development of the loan market, and the construction of the loan buying volume platform
CC, senior front-end expert of Xinye Technology, responsible for loan front-end team, big front-end technical committee