If you find any errors, typos or have general feedback, select the text and click CTRL+ALT+ENTER.

What are we going to build?

In this tutorial, you’ll learn how to build an app that provides UI in several languages, using the i18next plugin.

The app will have two pages:
FinalEn

Before you begin

Tutorial level: intermediate.

Note: To learn more about the i18next plugin, and other settings and options, please go to the i18next site.

Creating a new app

Create a new app in the Appery.io app builder; from the Apps page, enter an app name and click “Create.” You’ll see a start page.

Creating the UI

Theme used: flat-ui. Swatch used: B.

Note: To change your theme and swatch settings, you need to import the available default themes via plug-ins first: CREATE NEW > From Plug-in (or click “Add more Themes” from App settings > General), which will open a window with the list of available themes for importing. Select the theme(s) to import and click “Import selected plug-ins”.

The first page:

1stPage

  1. You need a Button component; name it next_page_button and change its text to “Next page.”
  2. You also need an Input component; name it input and clear its Text property.

The second page:

From Projects view, select CREATE NEW > Page, enter the name second_page, and click “Create Page”:
2ndPage

You need a single Input component; name it second_input, and clear its Text property.

Adding the i18next plugin

Go to the i18next website, and download the latest version of the plugin. The downloaded archive contains two JavaScript files; one of them is a mini version. We need to work with the full version, so add it to the project:

  1. From Project view, select CREATE NEW > JavaScript.
  2. Enter name i18next and select “Upload from file.”
  3. Click “Upload a file,” and choose the just-downloaded i18next JavaScript file.
  4. Click “Create JavaScript.”

The file will be listed under the JavaScript folder:
Tree

Adding translation files

The i18next plugin only retrieves translation files in JSON format.

1. Go to the Source tab (to the right of the project tab).

2. To the right of the WEB_RESOURCES folder, click the “gear” icon and select “Create folder”:

3. Type locales as the name, and click “Create.”

4. Inside the locales folder, create de-DE and en-US subfolders:
Tree1

5. To the right of the en-US folder, click the “gear” icon, and select “Create file” from the drop-down menu:

6. Type translation.json and click “Create.” This will be the file that contains key-value translations for the English (en-US) language.

7. Paste the following JSON to the created translation file:

8. Repeat steps 5 and 6 for de-DE folder, and paste the following JSON to the translation.json file:

9. The folder tree should look like:
Tree3

There are now two translation files for two different languages in this project. Components that should be translated must be marked with a special attribute.

Marking components

To properly mark the components, you need to know how to access inner component values and elements:

1. Go to startScreen, and select the Header component.

2. At the bottom of the component properties, click “More properties.”

3. Add the following properties:
MoreProperties

Where: data-i18n-target specifies a class where a value must be translated, and data-i18n is the translation key, according to the translations files created above. Header will be replaced with English header.

4. Click “Save options.”

5. Select the next_page_button and click “More properties.”

6. If you’re using the 1.2 libraries version, add the following properties:
MoreProperties2

7. If you’re using the 1.7.0 libraries version and higher, add the following properties:
MoreProperties3

8. Click “Save options.”

9. Select the Input component, and click “More properties.”

10. Add the following property:
MoreProperties4

The input component does not need the data-i18n-target property. However, the attribute name, where the value must be changed, is different from text (text – name of a default attribute that changes via the i18n plugin). [value] means that translated text will be placed to the value attribute.

11. Click “Save options.”

12. There are two elements left to mark on the second page. Go to the second_page.

13. Select the Header component, and click “More properties.”

14. Add the following properties:
MoreProperties

15. Click “Save options.”

16. Select the second_input component, and click “More properties.”

17. Add the following property:
MoreProperties5

Configuring i18next plugin

  1. Go to startScreen.
  2. From the bottom of the page, expand the EVENTS panel, and add the following event:
  3. startScreen > Load > Run JavaScript. Add the following code, and click “Save”:

Note: To have this work on the device, choose the device ready event, instead of load.

The fallbackLng property is useful when there is no translation for the user’s language. In this case, the fallback language will be used.

The button should navigate to the second page:

  1. Select the next_page_button and add the following event:
  2. next_page_button > Click > Navigate to page > second_page.

The above code will translate only the current page. An i18n() function must be called for every newly opened page.

  1. Go to the second_page and add the following event:
  2. second_page > Load > Run JavaScript. Add the following code, and click “Save”.

Testing the app

The app can be tested on the device, and in the browser. If the user’s language is German (de-DE), the final app will look like:
FinalDe

In all other cases, English will be used:
FinalEn

Android

Android testing options:

  1. Use the Appery.io Mobile Tester app. It’s an app that allows you to launch any app created in Appery.io as a hybrid app.
  2. Build the Android binary and install it your device. When the build is completed, you’ll see a QR code. Scan the QR code to download the app to your phone, or you can email the app to your device.

iOS

iOS options:

  1. Use the Appery.io Mobile Tester app. It’s an app that allows you to launch any app created in Appery.io as a hybrid app.
  2. Build the app and install it on your device.