• Target environment: iOS, Android, REST API

• Basic Requirements: Add the multi-language support to the existing Cordova app.

Project Background

Eaton Secure Connect App is a mobile app to give a user ability to connect to one or more intruder alarm panels and able to controlling and monitoring their installed intruder alarm (the logs report and output from the alarm panels)
 
We finished the frontend development of the mobile Cordova app and integrated it with the backend API (The API server is remote and hosted by the client).
 
Currently, the text in the Cordova app is in English, the client wants to add multi-language support to the mobile Cordova app so that it will display text in multiple languages.
 

Technology Stack

• Cordova
• Angular 6
• REST API
• Swagger

Individual requirements

 
We will provide a spreadsheet (Excel xlsx) that contains the same content in all languages. The spreadsheet is shared in the forum.
 

01 Convert the spreadsheet into JSON

 
You need to convert the spreadsheet into JSON then Cordova app will be able to use it. We have converted it to JSON via http://beautifytools.com/excel-to-json-converter.php, the JSON is attached to the forum. But you are not mandatory to use this JSON if you don't like the hierarchy.
 
 

02 Language selection

 
Currently, there are 7 languages in the spreadsheet.

• ENGLISH
• DUTCH
• FRENCH
• ITALIAN
• GERMAN
• PORTUGUESE
• GREEK

 
The language of the app should be selected based on the language of the mobile device. Both iOS and Android support to change the device language in Settings.
 
Here are some important notes

• All language dialects should be considered the same language. Like “Portugues (Brazil)“ and “Portugues (Portugal)” are both Portuguese, so if we set the device language to either of it, the Cordova app should display contents in PORTUGUESE. Similarly, “English”, “English (Australia)”, “English (Canada)”, “English (India)” etc are all English.
• You can use the Cordova plugin cordova-plugin-globalization to get the current language of the mobile device. The function returns the BCP-47 compliant language identifier tag. Here is a list of all BCP-47 language identifier tag for your reference.
• If the device language is one of the 7 supported languages, then the Cordova app should display ENGLISH by default. For example, if I set the language of my device to Chinese, then the Cordova app should display contents in ENGLISH. 

03 Language text type

 We have two types of language texts

• Static: it means the text is from the frontend UI (Cordova app)
• API: it means the text is from the API response.

 
For the static language text, you can simply replace it with the content in the selected language.
 
For the language text from API, usually, the text is the API error message. Note the text in the API response is in English, but mostly you can distinguish them by the state field. For example, pinCode.IsNotValid is mapping to the text “Pairing code not valid”.
 

 
If the API error message text is not displayed in the existing Cordova app UI, you are not required to support multi-language to it.
 
We attached the API swagger spec and Postman collection to the forum for your reference.

04 The way to support multi-language

 
To support multi-language, we can assign a unique identifier to texts in the same content but in different languages.
 
We put a REFERENCE column in the spreadsheet, it is the unique identifier.
 
Then you can write a function
 
getTextByReference(reference, language)
 
For example, we assigned a unique identifier password to the password content in different languages. Then

• getTextByReference(reference, config.ENGLISH) returns password
• getTextByReference(reference, config.DUTCH) returns Wachtwoord
• getTextByReference(reference, config.FRENCH) returns Mot de Passe
• ...

 
You can create a global variable config.CURRENT_LANGUAGE to indicate the current language of the Cordova app, then you just need to replace all the text with the function getTextByReference(reference, config.CURRENT_LANGUAGE).
 
Note you are free to name your functions and variables, the pseudo code above is just for reference.
 

05 Mark color of newly added/non-existent texts in the Excel spreadsheet

 
Some texts in the UI but is not in the spreadsheet, please add the texts in the spreadsheet. For the other language (not English), you can use Google Translate to get the translated text for now. Please mark the row of the text in YELLOW.
 
Some texts in the spreadsheet but is not existent in the Cordova app. Please mark the row of the text in RED.
 
Then it will be much helpful for us to track which texts are newly added, which are non-existent. Just mark the color like below

 
 

Codebase

The code base is https://gitlab.com/tc-eaton-app/tc-eaton-mobile-app mobile-dev branch, commit hash 4da38025d403debe0ff3b25849ef54b6b5179836
 
If you don't have access, you can grant yourself access via the Topcoder-X link (provided in the forum).

Important notes

• Both iPhone and Android phones are in scope.
• If you have any doubts, please feel free to ask questions in the forum. Any assumptions without approval won't be accepted.

Final Submission Guidelines

• The patch against https://gitlab.com/tc-eaton-app/tc-eaton-mobile-app mobile-dev branch, commit hash 4da38025d403debe0ff3b25849ef54b6b5179836
• Update the existing README if necessary
• A separate doc to describe how to apply your patch.
• The updated spreadsheet with added text and marked colors.
• A video to verify your submission meets all the requirements