TUTORIAL: Add Text Language Translation To Your App
Tags: webdev, beginners, programming, tutorial
Published: 2021-11-10 19:47:07

In this article, we show how easy it is to integrate a translation service into a [Backendless](https://backendless.com/) app using our Zapier integration.

Backendless is incredibly feature rich, but no platform can cover every niche use case. That’s why we have a [Zapier](https://zapier.com/) integration, allowing you to access thousands of third-party tools and quickly integrate them into your Backendless app.

For this demo, we will be building a simple translation app. The purpose of the app is to take user-entered text and translate it into the user’s selected language.

##Backendless Setup
We will start on the Backendless side of the equation. Here, we will set up a single-function [UI Builder](https://backendless.com/developers/#ui-builder) app with a database. You can easily integrate the functionality we show here into another application.

The demo application’s database table is very simple and consists of two fields: `demoText` and `language`. The `demoText` field will store the text that needs to be translated as well as any text that has already been translated.

The `language` field will store the value of the language to which you want to translate the text.

![Create primary table in Backendless](https://backendless.com/wp-content/uploads/2021/10/01-Create-primary-table-in-Backendless-600x172.jpg)

The app user interface consists of a **Select** element, an **Input** element, and “Reset” and “Save and translate” **Buttons**.

![Basic online translator app UI](https://backendless.com/wp-content/uploads/2021/10/02-Basic-online-translator-app-UI.jpg)

When you click on the “Save and translate” button, the following actions are performed in the logic below:

1. An object with data from the form elements is created and written to the `formData` variable.
2. The created object is saved in the database table. Saving an object to a table will be a signal (trigger) for Zapier to initiate an action. On this trigger, Zapier will receive the saved object with data and transfer it to the “Translate by Zapier” app. “Translate by Zapier” will translate the text and then the object will be updated in the Backendless database table.
3. When the object is updated in the database table, the logic that is in the “RT Data Update Listener” will be executed and the translated text will be displayed in the user interface.

![Save and Translate button Codeless logic](https://backendless.com/wp-content/uploads/2021/10/03-Save-and-Translate-button-Codeless-logic.jpg)

Note that we also include logic to disable the “Save and translate” button while the translation is in progress.

##Zapier Setup
Now let’s move to the Zapier side. If you don’t have an account with Zapier, you will first need to register and log into your Zapier account. A free account is all you will need for this demo.

Creating the automation with Zapier will consist of three steps.

###Step 1 – Define a trigger
The first thing we need to do is to define a Trigger. Triggers are actions Zapier uses to start performing an action. In our case, saving the object to the database will act as a trigger.

Click on the button “Create Zap”.

![Create new zap in Zapier](https://backendless.com/wp-content/uploads/2021/10/04-Create-new-zap-in-Zapier-1200x359.jpg)

In the “App Event” field, select Backendless.

![Select Backendless in App Event field in Zapier](https://backendless.com/wp-content/uploads/2021/10/05-Select-Backendless-in-App-Event-field-in-Zapier-600x281.jpg)

In the “Trigger Event” drop-down list, select “Object Created” and click the “Continue” button.

![Assign Object Created as event trigger in Zapier](https://backendless.com/wp-content/uploads/2021/10/06-Assign-Object-Created-as-event-trigger-in-Zapier-600x300.jpg)

Next, you will need to enter your credentials with which you log into Backendless Console and click the continue button.

![Add Backendless credentials in Zapier](https://backendless.com/wp-content/uploads/2021/10/07-Add-Backendless-credentials-in-Zapier-582x533.jpg)

If you used a social account to register with Backendless, you will need to add a password for your account. To add a password, visit your developer profile here:

![Add Password in Backendless](https://backendless.com/wp-content/uploads/2021/10/07a-Add-Password-in-Backendless-600x299.png)

In the trigger settings, you need to select the name of your Backendless app and the name of the table into which the object is saved. Then, click the continue button.

![Select app name and table name from Backendless in Zapier](https://backendless.com/wp-content/uploads/2021/10/08-Select-app-name-and-table-name-from-Backendless-in-Zapier-600x253.jpg)

Then you need to test your trigger.

![Test trigger in Zapier](https://backendless.com/wp-content/uploads/2021/10/09-Test-trigger-in-Zapier-600x287.jpg)

If the test is successful, the object with the data that was saved to the table will be displayed.

![Zapier trigger test response from Backendless](https://backendless.com/wp-content/uploads/2021/10/10-Zapier-trigger-test-response-from-Backendless-600x350.jpg)

###Step 2 – Set up a trigger action
In the next step, we will choose what action should be performed after the trigger is fired.

Select the “Translate by Zapier” application from the drop-down list and select “Translate Text” from the “Action Event” list. Click the continue button.

![Select Translate by Zapier as app and Translate Text as action event](https://backendless.com/wp-content/uploads/2021/10/11-Select-Translate-by-Zapier-as-app-and-Translate-Text-as-action-event-768x386.jpg)

Configure the action as shown below. The “Source Language” field is intentionally left blank to automatically detect the language. The “Text” and “Target Language” fields will contain data from the Backendless database table fields: `demoText` and `language`. Click the continue button.

![Configure Zapier translate action](https://backendless.com/wp-content/uploads/2021/10/12-Configure-Zapier-translate-action-768x481.jpg)

Now let’s test again. If you haven’t already, enter some text in the database and a target language. In our case, we used `Happy codeless coding` and `fr` (for French).

![Test translation by Zapier action](https://backendless.com/wp-content/uploads/2021/10/13-Test-translation-by-Zapier-action-768x408.jpg)

If the test is successful, you will see the translated text and you can proceed to the third step.

![Successful translation test in Zapier](https://backendless.com/wp-content/uploads/2021/10/14-Successful-translation-test-in-Zapier-768x393.jpg)

To go to the third step, press the “Plus” `+` button and then the “Back to setup” button.

###Step 3 – Define an action to update the database
In the final step, we will define one more action to be performed after the text is translated. In our case, this will be updating the data in the Backendless database table.

Select the action settings as shown below.

![Add Update Object in Backendless action in Zapier](https://backendless.com/wp-content/uploads/2021/10/15-Add-Update-Object-in-Backendless-action-in-Zapier-768x420.jpg)

You will again select your Backendless account or enter your credentials (as in the first step). Click the continue button.

Configure the action settings as shown below.

![Configure Update in Backendless action in Zapier](https://backendless.com/wp-content/uploads/2021/10/16-Configure-Update-in-Backendless-action-in-Zapier-768x686.jpg)

Note, you need to select “Object id” on the “Custom” tab as shown below.

![Select Object Id from Custom as object to update in Zapier](https://backendless.com/wp-content/uploads/2021/10/17-Select-Object-Id-from-Custom-as-object-to-update-in-Zapier-768x467.jpg)

After that, we will do one final test. If the test is successful, then the object that was sent to the Backendless database will be displayed.

![Successful test of object update action in Zapier](https://backendless.com/wp-content/uploads/2021/10/18-Successful-test-of-object-update-action-in-Zapier-768x478.jpg)

Click the “Turn on Zap” button, and you’re all set! Our translation Zap is now up and running.

[Live demo](https://lovelyguitar.backendless.app/index.html)

Be sure to check out our other Zapier demo articles:
*[Send An Automated SMS Message When Registering A New User](https://backendless.com/sending-automated-sms-when-registering-a-new-user/)
*More coming soon!

Thanks for reading, and as always, Bon Codage Sans Code!