1️⃣: TRANSLATE TEXT (BACK-END) ====================

📋 ACTION DESCRIPTION
--------------------------------
TRANSLATE TEXT (BACK-END) translates the input text to the target language supported by GOOGLE CLOUD - TRANSLATION API, the source language being automatically detected.

🔧 STEP-BY-STEP SETUP
--------------------------------
ℹ️ The steps from 0) to 1) can be automatically performed by logging in into your Google Cloud Console, opening the Cloud Shell (top right corner of your page) and copy pasting this command and press enter:

wget -q https://storage.googleapis.com/bubblegcpdemo/demo-assets/wiseable-gcp-translate.py && python3 wiseable-gcp-translate.py

Otherwise, follow these manual steps:

0) Set-up a project from Google Cloud Console: https://cloud.google.com/vision/docs/setup
- Create or select a project
- Enable the CLOUD TRANSLATION API for that project
- Create a service account
- Download a private key as JSON.

1) Open the private key JSON file with a text editor, copy/paste the following parameters from your file to the Plugin settings:
- CLIENT_EMAIL
- PROJECT_ID
- PRIVATE_KEY, including the -----BEGIN PRIVATE KEY-----\\n prefix and \\n-----END PRIVATE KEY-----\\n suffix.

2) Set up the "TRANSLATE TEXT (BACK-END)" action in the workflow.

Inputs Fields:
 - TEXT: Text to translate. We recommend the total content be less than 30k characters.
 - TARGET LANGUAGE CODE: BCP-47 language code to use for translation of the input text, set to one of the language codes listed in Language Support. You can find the list here: https://cloud.google.com/translate/docs/languages.
 
Output Fields:
 - TRANSLATED TEXT: Returns the translated text.
 - SOURCE LANGUAGE CODE: The language code for the language of the source text detected by GOOGLE CLOUD TRANSLATION API in BCP-47 format. You can find the list here: https://cloud.google.com/translate/docs/languages

2️⃣: GOOGLE CLOUD - TRANSLATION API (FRONT-END)
==================================

📋 ELEMENT DESCRIPTION
--------------------------------
GOOGLE CLOUD - TRANSLATION API (FRONT-END) provides a visual element with the TRANSLATE TEXT (FRONT-END) action to translate text to the target language, with the source language being automatically detected.

🔧 STEP-BY-STEP SETUP
--------------------------------
ℹ️ The steps from 0) to 1) can be automatically performed by logging in into your Google Cloud Console, opening the Cloud Shell (top right corner of your page) and copy pasting this command and press enter:

wget -q https://storage.googleapis.com/bubblegcpdemo/demo-assets/wiseable-gcp-translate.py && python3 wiseable-gcp-translate.py

0) Set-up a project from Google Cloud Console: https://cloud.google.com/vision/docs/setup
- Create or select a project
- Enable the CLOUD TRANSLATION API for that project
- Create a service account
- Download a private key as JSON.

1) Open the private key JSON file with a text editor, copy/paste the following parameters from your file to the Plugin settings:
- CLIENT_EMAIL
- PROJECT_ID
- PRIVATE_KEY, including the -----BEGIN PRIVATE KEY-----\\n prefix and \\n-----END PRIVATE KEY-----\\n suffix.

2) Register on plugins.wiseable.io. Create a new Credential which associates your BUBBLE APP URL, GCP PROJECT_ID, CLIENT_EMAIL & PRIVATE_KEY.
The registration service will generate your PUBLIC ACCESS KEY. This key serves as a secure proxy for your real API key. It allows your application to communicate with the service without exposing your real API key. Since this PUBLIC ACCESS KEY is explicitly tied to your registered BUBBLE APP URL, it can only be used from that domain, ensuring that even if the key is publicly visible, it remains safe and cannot be misused by unauthorized sources.

3) Enter in the PLUGIN SETTINGS your PUBLIC ACCESS KEY (used for front-end element only).

4) Add the GOOGLE CLOUD - TRANSLATION API (FRONT-END) element to the page on which the translation feature must be integrated.

5) Integrate the logic into your application using the following GOOGLE CLOUD - TRANSLATION API (FRONT-END) element's states and actions:

EVENTS:
- SUCCESS: Event triggered upon success
- ERROR: Event triggered upon error

EXPOSED STATES:
Use any element able to show/process the data of interest (such as a Group with a Text field) stored within the result of the following states of the GOOGLE CLOUD - TRANSLATION API (FRONT-END) element:
- TRANSLATED TEXT: Populated upon SUCCESS event. Returns the translated text.
- SOURCE LANGUAGE CODE: Populated upon SUCCESS event. Returns the detected source language code.
- ERROR MESSAGE: Populated upon ERROR event.
- IS PROCESSING: Set to true when processing is in progress, false otherwise.

ELEMENT ACTIONS - TRIGGERED IN WORKFLOW:
- TRANSLATE TEXT (FRONT-END): Translate the input text to the target language. Populates TRANSLATED TEXT and SOURCE LANGUAGE CODE states upon completion.

Inputs Fields:
 - TEXT: Text to translate. We recommend the total content be less than 30k characters.
 - TARGET LANGUAGE CODE: BCP-47 language code to use for translation of the input text, set to one of the language codes listed in Language Support. You can find the list here: https://cloud.google.com/translate/docs/languages.

🔍 IMPLEMENTATION EXAMPLE
======================
Feel free to browse the app editor in the Service URL for an implementation example.

ℹ️ ADDITIONAL INFORMATION
======================
> Supported languages: https://cloud.google.com/translate/docs/languages
> GOOGLE CLOUD TRANSLATION API service limits: https://cloud.google.com/translate/quotas

⚠️ TROUBLESHOOTING
================
Any plugin related error will be posted to the Logs tab, "Server logs" section of your App Editor.
Make sure that "Plugin server side output" and "Plugin client side output" is selected in "Show Advanced".

For front-end actions, you can also open your browser's developer console (F12 or Ctrl+Shift+I in most browsers) to view detailed error messages and logs.

Always check the ERROR MESSAGE state of the element and implement error handling using the ERROR event to provide a better user experience.

> Server Logs Details: https://manual.bubble.io/core-resources/bubbles-interface/logs-tab#server-logs

⚡ PERFORMANCE CONSIDERATIONS
===========================

GENERAL
-------------
The largest retrievable result-set from back-end actions is capped at 30 seconds duration time - this does not apply to front-end actions.

⏱️ BACK-END ACTION START DELAY
-----------------------------------------------
Each time a server-side action is called, Bubble initializes a small virtual machine to execute the action. If the same action is called shortly after, the caching mechanism kicks in, resulting in faster execution on subsequent calls.

A useful workaround is to fire a dummy execution at page load, which pre-warms the Bubble engine for the next few minutes, reducing the impact of cold starts for your users.

❓ QUESTIONS?
===========
Contact us at [email protected] for any additional feature you would require or support question.