Tutorial - How to automatically translate user-generated content

Hi Adalo Community,

If you are working on building a user-generated content app, you may want to provide automatic language translation if you serve an international audience. This tutorial provides guidance into using Google’s Translation API service to do just that.

In this tutorial, we will take the example of a recent app I published (available in the Apple Store and on Google Play Store in which users can create stories I then automatically translate to several languages.

Note that the Google Translation service charges by the number of characters. Given they provide a free first tier of 500,000 characters, I am sure you will enjoy what this service can offer to your apps. Their pricing is here Pricing  |  Cloud Translation  |  Google Cloud

In this tutorial, we will go over these sections:
1- Database structure.
2- Google Translate API setup
3- Story creation and translation

1- Database structure.
This is the view of a story.

  • The body field captures the text of the current story
  • The language field captures the language of the current story (more on that later)
  • Then, I have many localized fields to capture translations for Indonesian (id), French (fr), Arabic (ar), English (en) … and others

2- Google Translate API Setup:
You will need to set an account on Google’s Platform. You can follow these instructions here, but the bottom line is to enable the Translation service and get an API KEY that we will use in the app. If you have any questions about this process, let me know.


3- Story creation and translation
As users create new stories, I run several actions as soon as users hit the create a story button.

  • 3.a Unmask a Lottie Spinner. If you are translating in several languages, the app will take a bit of time to run all API calls. I decided to add a spinner here to alert users that something is brewing behind the scene and they should wait a bit. If you don’t do this, users may think the app is broken as nothing is happening for a couple of seconds (I am translating to 7 languages right now) …
  • 3.b Detect the language of the current story (API call to Google Translate’s Natural Language detection) - More information below
  • 3.c Now that we know which language the story is, we run several translations (IN, FR, EN, AR, …) - More information below
  • 3.d Create a new story feeding all fields - More below
  • 3.e Send notifications to the current user’s followers
  • 3.f Mask the Lottie Spinner

More info regarding 3.b (language detection)

This API call takes the current story input as an input to the call.

This is how I set up the API call:

This is where I pass the story input to the API

Note that the API Key is added to the URL endpoint - You can get yours as you create your Google Platform account and ask for a Google Translate API key.

The API will send back the detected language of the story.

Let’s move to 3.c
This is where you call the Google Translate API for each of your target languages.

Note that the API call takes 3 fields. The text to translate, the source language (which is the result of the previous call - Thanks Adalo for making that result available), and the target language (fr for French in this case).

Here’s the structure of the API call:

The API call requires these 3 fields at a minimum to be able to work.

The API call send back the translation field, which you can use to store in the DB

Last stop, 3.d.
You can run the Google Translate API call as many times you have target languages. You only need to change the target language to the google code of that language.

Now that you have everything done, all you have to do is create a Story object in the DB (in my case), in which you store all of your data.

Here’s an example of a story being translated and how that looks in the Story Adalo DB.

There are some tips along the way that I haven’t described yet, but I hope at least this will get you going and excited.

I also want to point out that I do the same thing when users:

  • edit existing stories
  • create comments (seme structure)
  • edit existing comments

Let me know what you think.
I may be editing this tutorial as I add more tips along the way.
Best and keep building.