Setup for Cordova translations is simple

Cordova is a container for running a web application like it was a native app. So the web app written in HTML, JS and CSS can access the native device functionality like camera or GPS, which otherwise would not be possible.

In Cordova setup, you need to add platforms for which you intend to publish your app. Aditionally, you need to install appropriate Cordova plugins to enable referring to the device resources from your web app.

The technology used for translating the app itself is up to you, however there are "system" strings or push notification messages that are not accessible from your web app level. For translating those you need a Cordova Localisation String plugin.

The typical Cordova folder structure looks like:

MyCordovaApp/
├── hooks/
├── platforms/
├── plugins/
├── translations/app/
├── www/
└── config.xml

Where:

• translations/app/ contains the strings used by the Cordova localisation plugin.
• www/ contains the app files.

The localisation plugin uses JSON format with the structure like in the below example:

{
    "locale": {
        "ios": ["zh-Hans"],
        "android": ["zh-rCN"]
    },
	"config_ios" : {
		"NSCameraUsageDescription": "Take pictures",
		"CFBundleDisplayName": "My App Name",
		"CFBundleName": "My App Name"
	},
	"config_android" : {
		"app_name": "My App Name"
	},
	"app" : {
		"HAVE_MAIL": "You have mail.",
		"HAVE_MSG": "You has you message from %1$@"
	}
}

locale key is optional and needed only when there are inconsistent language codes used the different target platforms. By default the file name indicates the target language (i.e. en.json, de.json, etc.). The config_... keys are particular to each platform. The app key stores the generic push notification messages. However it's possible to overwrite these with a platform specific keys like app_android or app_ios.

With Applanga CLI it's easy to setup the translation process of the files used by Cordova plugin. Start with setting up your project on Applanga Dashboard. Then follow the instructions to set up the CLI.

Below is a sample configuration file for Applanga CLI for localising both: the strings used by the Cordova localisation plugin as well as the app itself.

{
  "app": {
    "access_token": "YOUR_ACCESS_TOKEN", 
    "base_language": "en", 
    "pull": {
      "target": [
        {
            "exclude_languages": [
              "en"
            ],
            "tag":"system:language.json",
            "file_format": "nested_json", 
            "path": "../MyCordovaApp/translations/app/<language>.json"
        },
        {
            "exclude_languages": [
              "en"
            ],
            "tag":"app:language.json",
            "file_format": "node_2_json", 
            "path": "../MyCordovaApp/www/i18n/locale-<language>.json"  
        }
      ]
    }, 
    "push": {
      "source": [
        {
            "language": "en",
            "tag":"system:language.json",
            "file_format": "nested_json", 
            "path": "../MyCordovaApp/translations/app/en.json"
        },
        {
            "language": "en",
            "tag":"app:language.json",
            "file_format": "node_2_json", 
            "path": "../MyCordovaApp/www/i18n/locale-en.json"  
        }
      ]
    }
  }
}

The example app setup with Cordova can be found here: https://github.com/applanga/....

Please note that the translation of the plugin and the app are not dependent of each other. Thus there is no restriction on how you localise your app. The example app uses angular-translate package for localisation functionality and a flat JSON files for storing of the translated strings.

{
    "Title": "Apache Cordova - Applanga sample app",
    "ConnectingToDevice": "Connecting to Device",
    "DeviceIsReady": "Device is Ready",
    "AboutUsButton": "About us",
    "ChangeLangButton": "Deutsch",
    "AboutUs": "About Us",
    "Home": "Home",
    "AboutText": "Everything that you need to make mobile app & game localization lean and professional"

}