Build a multi-language app in Appery.io

Posted: March 12th, 2014Author:

An app that has multi-language support is always better than the same app that supports just one language.  Appery.io app can be easily upgraded with multi-language support by using the i18next plug-in. This post will show you how to do it.

i18n_blog_en_de_app

There are few steps to add the multi-language support:

  1. Download i18next.js from the i18next web-site and upload it to WEB_RESOURCES folder in Appery.io app builder.
  2. Create folder structure that corresponds to i18next structure and upload translation files in JSON format:
    i18n_translation_files
  3. UI components that should be translated must be marked with special attributes: data-i18n, and data-i18n-target. Read more about it in our detailed tutorial.
  4. Initialize the plug-in via JavaScript specifying needed options as initialize language (can be retrieved from the browser or device language) and fallback language. Fallback language is very handy feature and it’s define what language should be used in case of missing language or translation.

Downloading of translation files will take some time on initial app start up. There is no need to create any preloaders as all the files will be loaded automatically. It’s a good idea to use launch images to show that the app launching/loading. Once the translation files are loaded, properly marked components will be automatically translated accordingly to the initialized language.

To build an app with multi-language support, try the multi-language tutorial and read the i18next documentation.