How to effectively translate your app

Hey!
In this tutorial I will teach you how to best and effectively translate your application!
All you need to translate your application is to add the translation file to Assets and that’s it!

1.The first thing we need to do is create the translation files (in json file),
I created two sample translation files:
in English: { "string1": "one", "string2": "two", "string3": "three", "string4": "Hello {username}, Welcome to the app!" }

And in Hebrew: { "string1": "אחד", "string2": "שתיים", "string3": "שלוש", "string4": "שלום {username}, ברוך הבא ליישום!" }
If you want to translate your file to a company that doesn’t work with json files, you can convert your file to csv at this site: https://json-csv.com/
And after you get the translated csv file, convert it back to the json file at this site: https://www.csvjson.com/csv2json
Then rename the file to the following name: “(app-name)-(Translation language code)-Translation”
*Note that you do not use spaces in the file name!

  1. After we put the translation files into the application, the translation needs to be activated in the application, the following image will explain what each block does:

  2. And that’s it! From now on your application is translated!
    translation.aia (35.9 KB)
    translation.apk (5.2 MB)
    You will need to add this extension to your project for the translation to work: App Inventor Extensions: File | Pura Vida Apps

Notes for optimal translation:

  1. If there are variables in the translation (such as the use of the username), you should write the translation as follows: “Hello {Username}, welcome to the app!” And then when receiving the translation use the replacement component as follows:
    blocks

  2. Hide the screen until the translation is complete: Medium to large applications usually do a lot of processes when launching the application or opening a screen, so the translation may only be displayed after a few hundredths of a second to a few seconds (until then the original text will be displayed and not the translation). Of course it also depends on the speed of the device, but still we do not want to show any user a translation in another language - it shows a poor quality application.
    So what we will do is put all the components in the vertical arrangement and hide it, we will display this layout only after completing all the processes that are done after the screen opens.
    blocks (1)

24 Likes

thank you so much

1 Like

I do it with dictionaries

1 Like

Hi,

I made changes to your blocks, now it also works through companion thanks to FileTools by @vknow360 (Thank you vknow360).

Blocks

translation3.aia (64.1 KB)

6 Likes

Hi @DevYB
Thank you for using FileTools :heart_eyes:
But instead of using FilesList you can use FileListFromAssets.
Also both file extensions will work similarly in apk (both can get file list from assets in apk) but TaifunFile can’t get file list from assets during live test.

2 Likes

Thank you very much, I didn’t know about this thing.
I edited my first post.

1 Like

@Point
thanks for this excelent TUT :+1:
it work well on first attempt.
I have two questions:

  • on “Button” although html is is checked >br> is accepted in designer, but using “json file”
    is not considered. How can i solve this?

  • how can i add text notifications to translation string?

1 Like

Hey! Glad to see you love my explanation!
Regarding the first question: I didn’t quite understand what the question was
For the second question: The number is the number of each string, you can change the names of the strings to the text you want them to be translated.

thanks for your answer,
and sorry for my my bad description.

first question is solved, it was my fault…

second question, i´ll try to describe it better,
for “labels” and “text boxes” i find a “set block” linkage with a selecting list of all available texts to assign them to a string for translation :grinning:
Auswahl
but since now for “Notifier text” i couldn´t find a “set block” with my notifier messages.
How can i add my 3 different messages to my blocks?
notifier

Sorry guys I’m unable to make this work, I’ve done the same and I get the message “There was a problem to get the string ‘String1’. Make sure on your side is all correct.”
Can anyone help me please ?

Are you testing on Companion?

yes with companion…
If it’s not the good way, please tell me how to test.
I use FileTools extension

If not with companion then last way is with apk :joy:

Well, we’ve already talked about it


Did you try to install the application on the device and test?

It’s ok, I succeed to make it work. Actually I haven’t seen the hidden picture in the “Blocks” container in the above post :confused:

Thanks again :grinning:

1 Like

How? ,…

i checked whole site, where is link to extension?

If you searched it you would have found it. Scroll to the end of the page App Inventor Extensions: File | Pura Vida Apps

2 Likes

how to “put the translation files into the application”

You need to add them to assets