How to Integrate Salesforce with Google Translate

Introduction

In this article, we will show you how to integrate Salesforce with Google Translate. You will learn how to translate text in Salesforce using a Lightning Web Component and the Google Translation API. 

Here’s a sample of what we will be developing.

You might think of looking for a package on the AppExchange, but it is highly probable they use Google Translation API as well, and it is actually really easy to use.

You can check out the details here https://cloud.google.com/translate and prices here https://cloud.google.com/translate/pricing. Bear in mind that translation usage is calculated in millions of characters, where 1 million = 106 characters.

It might be helpful if you already have some knowledge about: 

  1. Apex and Lightning Web Component development
  2. API requests/responses

What do we need?

A project on Google Cloud to use the Translate API (we will use the API Key that Google provides us). For more information about how to create a project on Google Cloud, click here.

What will be developing?

We will create a simple Lightning Web Component that will only contain an input field where we are going to enter our text that we want to translate, and a button that will call our apex method to translate it.

We’ll create:

  • An Apex class:
    • GoogleTranslateHelper: A Google Translate Helper class that will contain the callout to the Google Translate API.
  • A Lightning Web Component:
    • translate: A simple LWC that will show us the translated text.

You can see the code in the following GitHub repo https://github.com/NadiaRecarey/googleTranslationOnSalesforce.

Ok, let’s dive into it!

1) Store your API Key

“One does not simply” Lord of the Rings meme.

When you get your API Key from Google, you might want to have it stored somewhere in Salesforce rather than hardcoded, so we are going to create a new field called “Google_Translate_API_Key__c” on a custom setting to save it there.

2) Register Google Translation API endpoint in the Remote Site Settings page

To add a remote site setting:

  1. From Setup, enter Remote Site Settings in the Quick Find box, then select Remote Site Settings.
  2. Click New Remote Site.
  3. Enter Google_Translate as Remote Site Name.
  4. Enter https://www.googleapis.com as the URL for the remote site.
  5. Optionally, enter a description of the site.
  6. Click Save.

3) Create an Apex Class: GoogleTranslateHelper

This class will contain two methods: getTranslatedText and googleTranslateCallout.

Method getTranslatedText

This method will be invoked directly from the Lightning Web Component we’ll create soon.

As we see on the comment before the method declaration, the response we should expect from the Google Translation API is a JSON that contains an array within the data object. This array, Translations, will contain all the translated texts we sent in the request, and the detected language of the original text.

This method will be called directly from the LWC and will receive a list of texts we wish to translate. Remember that for us to be able to call Apex methods from LWC js files, we have to denote the method with the @auraEnabled decorator.

In line 37 we call the other method googleTranslateCallout, which will actually make the callout to the google API. 

After we got a response from the callout, we parse it using the JSON Apex class and then return it.

Method googleTranslateCallout

First, we put together our URL. The Google Translate API endpoint should be constructed in the following fashion: 

https://www.googleapis.com/language/translate/v2?ket={your API Key}&target={the code of the language we want to translate TO}&source={the code of the language we want to translate FROM}&format=text&q={the text you want to translate}

Note: if you want to translate several texts separately, you can simply add new q={new text} property to the URL.

In our case, we are going to make it as simple as possible, so we will translate one text at a time.

I decided to make it more scalable and set the parameter to be a list of texts instead of receiving a single one. Here we will then append it to our endpoint, (separating every text between “&q=”, in case we receive several texts).

Notice that we replaced every blank space with “%20”, this is to construct a valid URL.

After we prepared the texts to append to the endpoint, we are ready to construct it and send the request.

Why did I separate this into two different methods? So it would be easier to maintain and test later.

Great! We have developed the Google communication part, on the back end. Next, we will see how we invoke this code from a Lightning Web Component.

4) Create a Lightning Web Component (LWC): translate

translate.html

Here we will only include an input field, and a button to translate what we have typed.

The parameter “translatedText” is a tracked attribute we declared on our script, in order to show our results.

translate.js

First, we need to make the proper imports, especially the import of our GoogleTranslateHelper Apex class like it is done in line 3. Then we have a method to populate our text attribute, every time our input field changes. And lastly, we have our translate method that is called from the onclick event of our button. In this method we call our apex, sending it our “list” (in this case just one) of texts, populated by our input.

5) Testing

We won’t talk about testing on this post, but you can take look at the following article Testing an HTTP Callout in Salesforce. That will help you to test the callouts we have created.

Some Resources to go deeper

And that’s it! Hope you find this post helpful.

Please feel free to comment below if you have any questions or suggestions.

Happy coding!

Thank you!

—————————————————————–

Nadia Recarey: Sofware developer. Computer Engineering Student. Addicted to coffee, cats, and memes. Currently a violinist wannabe.

Leave a Reply

Your email address will not be published. Required fields are marked *