How to use Bubble.io's API Connector to integrate with Google Translate: Step-by

Go to console.cloud.google.com and create a new project (or select an existing one). In the left sidebar, click APIs & Services then Library. Search for Cloud Translation API and click Enable. Next, go to APIs & Services then Credentials, click Create Credentials, and select API key. Copy the generated key. For security, click Restrict key and limit it to the Cloud Translation API only.

In your Bubble editor, go to the Plugins tab and install the API Connector plugin if not already installed. Click Add another API and name it GoogleTranslate. Set Authentication to None (we will pass the key as a parameter). Click Add another call and name it TranslateText. Set Use as to Action. Set the method to POST and the URL to: https://translation.googleapis.com/language/translate/v2?key=[api_key]. Add a URL parameter called api_key, paste your Google API key, and check the Private checkbox so it stays server-side.

In the TranslateText call, set the Content-Type header to application/json. In the Body section, enter the following JSON structure. Add body parameters for q (the text to translate), target (the target language code like es, fr, de), and source (optional source language code). Mark q and target as dynamic (uncheck Private) so they can be set from workflows. The JSON body should look like: {"q": "<q>", "target": "<target>", "source": "<source>"}.

1{
2  "q": "<q>",
3  "target": "<target>",
4  "source": "<source>"
5}

Click Initialize call in the API Connector. In the parameter fields, enter a test value for q (e.g., Hello world), target (e.g., es for Spanish), and source (e.g., en for English). Click Initialize. Bubble will make the API call and show the response structure. You should see data.translations as an array with translatedText. Click Save to lock in the response mapping. If you get an error, double-check your API key and that the Translation API is enabled in Google Cloud.

Go to the Design tab and add an input field for the source text, a Dropdown for target language (populate with language codes like en, es, fr, de, ja), and a Translate button. Go to the Workflow tab and create: When Button Translate is clicked. Add the action Plugins then GoogleTranslate - TranslateText. Set q = Input Source Text's value, target = Dropdown Language's value. Then add a second action to display the result: set a Text element or custom state to Result of step 1's body data translations first item translatedText.

Create a new data type called Translation with fields: source_text (text), target_language (text), translated_text (text), and created_date (date). Before calling the API, add a search at the beginning of the workflow: Do a search for Translations where source_text = Input's value and target_language = Dropdown's value. Add an Only when condition to the API call action: Only when the search count is 0. After the API call, create a new Translation record to store the result. On the display step, show either the cached result or the fresh API result depending on which path executed.