The evolution of the globalization of vivo global mall - multilingual solution

1. Background

With the deepening of economic globalization, many Chinese brands have begun to expand their territories in overseas markets. Achieving globalization means that your products or applications need to be able to be used in language environments all over the world. When we promote overseas business, the biggest challenge we need to face is multilingualism. Realizing the localization of many language systems, and modifying multilingual copywriting more conveniently and quickly can make your products have stronger product competitiveness, better user experience and lower maintenance costs in various countries and regions. With this as the goal, we have gone through many iterations during the development of vivo's export project, and finally realized a complete set of multi-language solutions combined with the company's middleware capabilities.

2. Advantages of Multilingual Copywriting System

2.1 The traditional multilingual solution is based on Spring

Although the i18n solution can solve the basic multi-language problem, each multi-language update and maintenance needs to be released, and the project maintenance cost is very high. The birth of vivo multi-language copywriting system has solved this problem very well. The system combines the actual situation of the company and is based on the company's existing platform-configuration center, which minimizes the access cost, optimizes the project process, and standardizes the proposal of copywriting requirements. The centralized and systematic management of multilingual copywriting has greatly improved the publishing efficiency and copywriting quality. It supports traditional web projects and front-end and back-end separation projects, so it can be used as a basic capability to support localization solutions for many systems.

(Figure 2-1 Comparison of multilingual copywriting system and traditional multilingual scheme)

3. Overall design scheme of multilingual copywriting system

(Figure 3-1: Overall design of the system)

The overall solution of the multilingual copywriting system can be divided into 3 parts:

1) MCMS management system

It provides functions such as the creation of multilingual projects, the creation of languages, the addition, modification, deletion and synchronization of multilingual copywriting in various languages, providing a systematic management platform for multilingual copywriting.

2) Configuration Center

Combined with the actual situation of the company, based on the company's middleware - configuration center (vivo cfg), the access cost is greatly reduced. The configuration center can be regarded as an interactive bridge between the MCMS multilingual copy management system and the business system. After the MCMS system configures the multilingual copy according to certain naming rules, the copy will be synchronized to the configuration center for the subsequent business system according to its own. Project and language information for the acquisition of multilingual copy.

3) Business System

Interact with the configuration center by introducing the jar package provided by the Multilingual Copywriting System (MCMS). The connected business system, where multiple languages are needed, only needs to use the same naming rules as the MCMS system to occupy the place of the multi-language key. When the project is running, it can be pulled from the configuration center according to the language code of the current environment. Go to the multilingual copy of the corresponding project-language and replace the multilingual key in the project, so as to realize the localization of the language.

Fourth, the specific processing flow of multi-language

After the business system is connected to the multi-language system, the overall architecture of multi-language adaptation is shown in the figure below, and the process is as follows:

(Figure 4-1: Overall System Architecture)

1) The user requests the business system, and the carried information includes:

• The available country/language buttons in the interface;
• country information carried in the route;
• Country information carried in the cookie.

2) Information initialization after the server starts:

• Configure the current default country/language/time zone;
• Configure the default language required by the mcms system.

3) According to the information carried when the user requests, according to the following flowchart logic, determine the country and language information that is finally fed back to the user.

(Figure 4-2: Multilingual processing flow)

4) Set the system locale according to requestCountry and requestLocale. The system locale will affect the time zone setting and the suffix of multilingual copywriting.

5) Obtain the corresponding language copy from the configuration center according to the system locale. In this way, in the basic multilingual processing, we have added the corresponding relationship between the country, locale, and time zone.

Through the above process, an export system in different regions and different language environments can pull the multi-language configuration of the corresponding region from the configuration center when the system is running, and replace the multi-language key in the code with the actual multi-language copy. Realize the display of different multilingual copywriting in different language environments.

V. Use of Multilingual Copywriting System

5.1 System Introduction

(Figure 5-1 Introduction to the basic functions of MCMS)

• Project management: To create a project, to create a new project in the MCMS background requires a corresponding project in the configuration center.
• Language management: Create a language version under the corresponding project.
• Content management: Under the corresponding item, configure multilingual information according to the specific language version.
• User management: manage user rights, different users view different items.

5.2.1 Usage process

Project Creation

1) Log in to the MCMS system and create a new project

(Figure 5-2 New Multilingual Project)

2) Application for AppKey and appSecret (used when creating language versions)

Apply for APPKey and APPSecret in the "Open Interface" of the configuration center.

(Figure 5-3: Configuration Center - Open Interface)

Generate appKey and appSecret in the "Open Interface" of the configuration center.

(Figure 5-4 Application for AppKey and appSecret)

5.2 Creation of language versions

Add language versions to the project in the background of the multilingual copywriting system (mcms), which can be added individually or in batches.

1) Single added

(Figure 5-6 How to create language version)

(Figure 5-7 New language version)

2) Added

(Figure 5-8 Adding language versions in batches)

5.3 Content Management

After creating a project and adding several language versions to the project, configure specific language information in the content management.

It can be added/edited/approved individually, or imported in batches;

1) Added configuration item

(Figure 5-9 New configuration item content)

2) Review of configuration item content

Approved/Rejected --\> Configuration item valid/invalid

(Figure 5-10 New Content Review)

3) Content management supports the functions of query, new addition, import, review, modification and export. The state transition of configuration item content is shown in Figure 5-11:

(Figure 5-11 Configuration item content state transition diagram)

4) Batch import multilingual copywriting

Get import template

(Figure 5-12 Batch import and export of configuration items)

Fill in the configuration key, configuration scene, Chinese copywriting, foreign language translation

(Figure 5-13 Import file template)

Import configuration file takes effect

5.4 User management (authority management)

Apply for an account and bind the project for the project-related personnel:

• Administrator -- the highest authority, manage all projects;
• Ordinary user -- the right to maintain multilingual content of related projects;

(Figure 5-14 New user and project rights management)

6. Access to the multilingual copywriting system

6.1 Introducing jar package

(Figure 6-1: Import jar package)

6.2 Associate configuration between configuration center and multi-language system

The multi-language system is strongly associated with the configuration center. Different language versions can be configured in the configuration center to achieve the purpose of distinguishing different languages.

The language configuration information is obtained when the project starts.

locale.config

env.list.config

(Figure 6-2: Language configuration)

@Configuration
public class WebConfiguration {

@Bean
public VivoPropertyExtendConfigurer vivoPropertyExtendConfigurer(){
VivoPropertyExtendConfigurer vivoPropertyExtendConfigurer = new VivoPropertyExtendConfigurer();
vivoPropertyExtendConfigurer.setLocations(
new ClassPathResource("config/vivo.properties"));
vivoPropertyExtendConfigurer.setEnvListConfigKey("env.list.config");
return vivoPropertyExtendConfigurer;
}
@Bean
public FilterRegistrationBean mcmsFilterRegistration() {
FilterRegistrationBean registration = new FilterRegistrationBean();
registration.setFilter(new VivoMcmsPropsFilter());
registration.addUrlPatterns("/mcms/props");
registration.setName("vivo-mcms-filter");
registration.setOrder(1);
return registration;
}
}

6.3 Create Multilingual Versions in Configuration Center

Create a language version corresponding to the multi-language system in the configuration center, and the multi-language copy configured in the multi-language system will be synchronized to the corresponding language version in the configuration center.

(Figure 6-3: Language version of the current project)

(Figure 6-4: Multilingual copy synchronized from a multilingual system)

6.4 Switching between multiple languages

The multi-language created in the multi-language copywriting system will be synchronized to the configuration center, and the configuration center is strongly associated with the project. When the project starts, several configuration items will be pulled from the configuration. After the language version of the project is created, the multilingual copy corresponding to the configuration center will be pulled according to the current language environment when the project is started, and the key in the project will be replaced according to its key-value data structure, so as to realize different languages. The environment displays different languages.

Seven, multi-language switching

Another advantage of the multilingual copywriting system is the realization of front-end visualization, what you see is what you get. By means of a browser plug-in, when debugging the page in the foreground, the text of the current tab of the page can be modified in multiple languages in real time. While the front-end text is displayed and modified, the modified content can be updated in real time by calling the interface provided by the MCMS system. To the database and synchronization to the configuration center, so as to achieve the consistency of front-end page modification and back-end server data. The visualization of multilingual copywriting greatly improves the user experience of the system and improves the development efficiency of the access party.

(Figure 7-1 Multilingual front-end visualization)

8. Conclusion

This article mainly introduces the background, scheme design, access to the business system, and visualization of the vivo export multilingual copywriting system. With the advantages of simple access, systematic management, visualization, and immediate effect, more and more export projects have been connected to the multilingual copywriting system. Next, in order to adapt to the rapidly developing export business, the system will continue to be iteratively optimized to become a more convenient, faster and more intuitive multi-language solution platform.

Author: Vivo official website mall development team - Sun Yanwu