For any developers that are unaware, Google has an amazing suite of resources for developers and aspiring developers. One of the most useful resources I’ve found is the Google Translate API, allowing instant translations of text between thousands of language pair combinations.
Today, we’ll briefly take a look at how one might use the google translate API to fetch a translation for a language acquisition application built with React.
The first thing we’ll need to do is request an API key from google. An API key is required for several reasons most importantly, providing the API with information in regards to the application making the call and allowing the application to determine whether or not the requesting application has the appropriate permissions to access the API.
Doing this is a relatively painless process that we won’t discuss here as there is a basic setup guide provided by google with step by step instruction here.
Once you’ve acquired an API key via Google cloud, we can now use our key to make fetch requests to the Google Translate API. I’ll be using fetch within a React App I’ve created called Tongue.io
After logging creating and logging into your account we will be redirected to our language dashboard. As you can see below, I’ve already chosen the target language to be French. We’d like to have the phrase “peanut butter” translated so, we’ve included it in our input form.
To fetch our translation, google requires some information to properly analyze your request. To do this first, we’ll need a few variables.
input- The language of the text we would like translated.
target- The language we would like to translate our text.
phrase- The text that we would like to have translated.
API_KEY = the key provided by Google Cloud
let input = "en";
let target = "fr"; //French
let phrase = "peanut butter";
const API_KEY = ["Place your api key here"]
Now that we’ve established the information required, we need to create a URL variable that incorporates each piece of information. Using ES6 template literals, this process is quite easy.
let url = https://translation.googleapis.com/language/translate/v2?key=${API_KEY};
url += "&q=" + encodeURI(phrase);
url += &source=${input};
url += &target=${target};
Now, we can make a “GET” request to the translate API.
fetch(url, {
method: "GET",
headers: {
"Content-Type": "application/json",
Accept: "application/json"
}
})
.then(res => res.json())
.then(res => {
console.log(res)
})
.catch(error => {
console.log("There was an error with the translation request: ", error);
});
If we take a look at our response within our dev tools, you’ll notice that we don’t receive a simple translation as expected, but instead, an object containing our translation tucked in.
By inspecting the returned object, we can use ES6 bracket notation to access our translation. So, instead of console logging our response, we’ll console log the following
console.log(res["data"]["translations"][0]["translatedText"]);
Congrats, you’ve successfully queried the Google Translate API!
Top comments (1)
Awesome tutorial