loading...

How to Use Google Translate API

robghchen profile image Robert Chen Originally published at Medium on ・3 min read

An easy follow-along tutorial

Prerequisites: Knowledge of React.js will be required for this tutorial.

We’re going to use google-translate library to help connect your app with Google Translate API, the library also provides methods to initiate the translating. We’ll also use react-cookies library to store a user’s chosen language in the browser for the user’s convenience and we’ll store some translated text in a cookie so that the same sentence doesn’t have to be re-translated every time the user loads the app (you have to pay per translation, try to avoid redundant translating).

1) Let’s get started, in terminal:

create-react-app google-translate-demo
cd google-translate-demo
npm i google-translate
npm i react-cookies
Enter fullscreen mode Exit fullscreen mode

2) Get ready to create your API key and hide the key so that it doesn’t get pushed onto the internet. In terminal:

touch .env
open .env
Enter fullscreen mode Exit fullscreen mode

3) Sign into Google API Console with your Gmail then create your API key:

1

2

3

4

5

6

4) After creating the key, DO NOT share it with anyone and ABSOLUTELY DO NOT push that key to GitHub or anywhere online. Any fees accrued using that key will be charged to your account. I know someone who knows someone who owes Amazon $50,000+ because he unknowingly pushed his key to GitHub for only 3 days and someone went on a shopping spree with his key. With that said, now I’ll show you how to safely use and protect your key.

5) In terminal:

open .gitignore
Enter fullscreen mode Exit fullscreen mode

6) Add .env to line 25, this tells GitHub to ignore pushing your .env file online.

7) Create .env on the top level of the app, Copy your key from Google Console and replace the string “PASTE YOUR KEY HERE”:

8) In terminal:

mkdir src/utils
touch src/utils/googleTranslate.js
open src/utils/googleTranslate.js
Enter fullscreen mode Exit fullscreen mode

9) We use your API key through the variable that we created in .env so that your actual key is safe from the public’s eye. In googleTranslate.js:

  • If you already have a server running, restart it so that process.env.BLAH_BLAH_BLAH captures the most recent change.

10) Preparation is done, we can now build the app. In terminal:

open App.js
Enter fullscreen mode Exit fullscreen mode

11) We’re going to create a simple select field and translate some text with the google-translate library that’s now connected to your Google Translate API key. In App.js:

12) Run the app. In terminal:

npm start
Enter fullscreen mode Exit fullscreen mode

demo

  • Change the language, refresh the page and verify that it loads with the language you last selected.

Congrats! Now that you’ve seen how to set up Google Translate API and use the google-translate + react-cookies libraries, let’s clean up. Go back to Google Console and delete your API key, that’ll guarantee no one else can use your key without your knowledge.


I'll be coding live Saturdays 11am-3pm EST, ask questions! https://www.youtube.com/channel/UCHXw3WolW7kEZvExoA3P3VQ
https://www.twitch.tv/gameincode

Discussion

pic
Editor guide
Collapse
wanzulfikri profile image
wanzulfikri

That’s a great warning haha:

5) After creating the key, DO NOT share it with anyone and ABSOLUTELY DO NOT push that key to GitHub or anywhere online. Any fees accrued using that key will be charged to your account. I know someone who knows someone who owes Amazon $50,000+ because he unknowingly pushed his key to GitHub for only 3 days and someone went on a shopping spree with his key.

Thank you for the reminders.

I didn’t know that there is a quota when using the Google Translate API. Good to know.

Collapse
jucasoft profile image
jucasoft

maybe you inverted the source code of point 3 with the one at point 7?

Collapse
robghchen profile image
Robert Chen Author

thanks for catching that! ⭐️ i've corrected the order of things now