1️⃣: AWS TRANSLATE - TRANSLATE TEXT (FRONT-END)
===========================================
📋 ELEMENT DESCRIPTION
--------------------------------
AWS TRANSLATE - TRANSLATE TEXT (FRONT-END) provides the TRANSLATE TEXT action to translate the input text to the target language supported by Amazon Translate, with the source language being automatically detected. The front-end element is suitable for applications when reactivity is desired, such as but not limited to, mobile applications. It supports multiple text formats and automatically optimizes content to meet AWS requirements.
🔧 STEP-BY-STEP SETUP
--------------------------------
ℹ️ The steps from 0) to 1) can be automatically performed by using this deployment template:
https://console.aws.amazon.com/cloudformation/home?#/stacks/create/review?stackName=BubbleTranslateSyncOnly&templateURL=https://bubble-resources.s3.amazonaws.com/deployment-assets/CloudFormation-AWSTranslateSyncOnly.yaml You will find the required parameters values used across the plugin in the "OUTPUT" tab of the created stack.
0) Sign-up for AWS TRANSLATE:
https://console.aws.amazon.com/translate?p=tsl&cp=bn&ad=c 1) Create your AWS TRANSLATE ACCESS KEY & ACCESS KEY SECRET, then add to the credentials the AWS TRANSLATE FULL-ACCESS policy:
https://docs.aws.amazon.com/general/latest/gr/aws-sec-cred-types.html#access-keys-and-secret-access-keys 2) Register on plugins.wiseable.io. Create a new Credential which associates your BUBBLE APP URL, AWS TRANSLATE ACCESS KEY & ACCESS KEY SECRET.
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 this element only), AWS SERVICE ENDPOINT REGION (if not provided, the default endpoint is "us-east-1").
4) Add the AWS TRANSLATE - TRANSLATE TEXT (FRONT-END) element to the page on which the translation feature must be integrated.
5) Integrate the logic into your application using the following AWS TRANSLATE - TRANSLATE TEXT (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 stored within the following states of the AWS TRANSLATE - TRANSLATE TEXT (FRONT-END) element:
- TRANSLATED TEXT: Populated upon SUCCESS event. Returns the translated text.
- SOURCE LANGUAGE CODE: Populated upon SUCCESS event. Returns the language code of the source text detected by AWS TRANSLATE.
- 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): Translates the input text to the target language. Populate states upon completion.
Inputs Fields:
- TEXT TO TRANSLATE: A UTF-8 text string. Each string should contain at least 20 characters and must contain fewer that 5,000 bytes of UTF-8 encoded characters.
- TARGET LANGUAGE CODE: The language code requested for the language of the target text. The language must be a language supported by AWS TRANSLATE. You can find the list here:
https://docs.aws.amazon.com/translate/latest/dg/what-is-languages.html - TERMINOLOGY NAMES: A list of names of a terminology list file to add to the translation job. This file provides source terms and the desired translation for each term. A terminology list can contain a maximum of 256 terms. You can use one custom terminology resource in your translation request.
2️⃣: TRANSLATE TEXT (BACK-END)
==================================
📋 ACTION DESCRIPTION
--------------------------------
TRANSLATE TEXT (BACK-END) translates the input text to the target language supported by Amazon Translate, the source language being automatically detected.
The back-end action is suitable for applications when volume or asynchronous processing is desired.
🔧 STEP-BY-STEP SETUP
--------------------------------
ℹ️ If not already done, perform steps 0, 1, and 3 of the first element setup. The back-end action does not require the PUBLIC ACCESS KEY.
1) Set up the "TRANSLATE TEXT (BACK-END)" action in the workflow.
Input Fields:
- TEXT TO TRANSLATE: A UTF-8 text string. Each string should contain at least 20 characters and must contain fewer that 5,000 bytes of UTF-8 encoded characters.
- TARGET LANGUAGE CODE: The language code requested for the language of the target text. The language must be a language supported by AWS TRANSLATE. You can find the list here:
https://docs.aws.amazon.com/translate/latest/dg/what-is-languages.html - TERMINOLOGY NAMES: A list of names of a terminology list file to add to the translation job. This file provides source terms and the desired translation for each term. A terminology list can contain a maximum of 256 terms. You can use one custom terminology resource in your translation request.
Output Fields:
- TRANSLATED TEXT: Returns the translated text
- SOURCE LANGUAGE CODE: The language code for the language of the source text detected by AWS TRANSLATE. You can find the list here:
https://docs.aws.amazon.com/translate/latest/dg/what-is-languages.html🔍 IMPLEMENTATION EXAMPLE
======================
Feel free to browse the app editor in the Service URL for an implementation example.
ℹ️ ADDITIONAL INFORMATION
======================
> Supported languages and language codes:
https://docs.aws.amazon.com/translate/latest/dg/what-is-languages.html> Limitations in language support:
https://docs.aws.amazon.com/translate/latest/dg/what-is-languages.html#what-is-languages-by-feature> AWS TRANSLATE service limits:
https://docs.aws.amazon.com/translate/latest/dg/what-is-limits.html> AWS services availability per region:
https://aws.amazon.com/about-aws/global-infrastructure/regional-product-services/> AWS Service endpoints list:
https://docs.aws.amazon.com/general/latest/gr/rande.html⚠️ 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 logging" and "Plugin client side logging" are 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
-------------
For back-end actions, the maximum processing duration of this action is capped at 30 seconds as per Bubble.io design. This time limitation 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.