Google Translate Integration Template

About this Configuration Guide

This guide covers setting up the Google Translate application template. Using this guide, you'll explore how the Google Translate template works. You'll learn how to install the template to your environment and how to build an application from it. Plus, you'll see how to customize the application to fit your needs.

Here’s a high-level overview of the elements:

Title Element Type Description

Google Translate Template

Module

A user-facing module that translates text from any of Google Translate's supported languages. It also automatically detects the language of the original text.

Google Translate

Service

Google Translate is a multilingual translation service that translates content from one language into another. This service works in any application.

All images used in this guide are for illustrative purposes only. Images are subject to change without notice. All images are correct at the time of publication.

Overview

Google Translate is one of the best-known online translation services. This single-module template lets you enter or paste any text and select from over 100 languages to translate it into. Then, it presents the translated text in a separate text box.

This is a great tool for multi-lingual applications, providing real-time translations.

Features

With this template, you can:

  • Translate text from one language to another.

  • Automatically detect a text's original language.

Requirements

To use this template, you must have:

  • Administrator-level access to an Unqork environment.

What You'll Learn

In this article, you'll learn:

Adding the Template

Before you can build an application from this template, you must install the template in your environment. Then, you can visit your Library and build an application from your new template.

Adding the Template to Your Environment

To add the template to your environment:

1. At the top right of the Unqork Designer Platform, click Library.
2. Click Templates.
3. Click Marketplace.

You can also access the Marketplace at any time by visiting https://marketplace.unqork.io.

4. In the Search the Listings Directory field, enter Google Translate.
5. Click the Google Translate tile.
6. Click Install to Environment.
7. Click Install Template.

If you aren't logged in, you'll see a field for Environment URL and a Login button. Enter your environment's URL where you want to install the template. For example: [environmentname.unqork.io]. Click the Login button. Then, return to step 4 and click Install to Environment again. Follow the remaining steps as listed.

Now, you can use your newly installed template to create an application.

Creating an Application from the Template

After you add the template to your environment from Marketplace, you can use it to create an application. This template creates a module-type application.

1. At the top right of the Unqork Designer Platform, click Library.
2. Click Templates.
3. Find the Google Translate template tile.
4. Click Create App from Template.
5. From the Workspace drop-down, select the destination workspace. This is where your application lives once created.
6. Enter your unique App Name. The App Path autofills as you type your App Name.
7. If you want a different App Path, enter it in the App Path field.
8. From the Style drop-down, select a preview style. A style specifies your application’s appearance in Express View. If left blank, your application uses your environment's default style.

You'll notice the App Type and App Entrypoint are grayed out. The template automatically takes care of these for you.

9. Click Create App.

The application opens in the workspace you specified. You land on the Modules tab of your application.

Your new application looks something like this:

When you create an application from the template, your module names automatically include the template ID and a time stamp. This is to prevent any duplicate module paths. You can change module names and module paths at any time. Any service or workflow you create with your template also has a template ID and time stamp.

Here's an example of a Google Translate service in Services Administration:

How the Template Works

This is a Module Integration template. As the name suggests, a module integration template has modules and an integration. An integration is a service external to Unqork. Here, the service is a Google Translate API that translates text in your application. You need to set up your Google Translate account directly through Google Translate. Your API keys generate automatically after creating your account.

How the Google Translate Service Works

Google Translate is a service that transcribes content from one language into another. It supports over 100 languages, and works in any Unqork application. In real-time, end-users can translate text into a language that they prefer.

Unqork uses an API call to connect with Google Translate. When you download this template, Google Translate provides language translations for the Google Translate Template module through an API call.

How the Google Translate Template Module Works

The Google Translate Template module starts working as soon as you open it in Express View. All the initial logic actions live in panelInitModule. As the page loads, the initModule Initializer triggers. This tells pluginGetLanguageList to populate the Translate To drop-down with all available languages. Those languages are stored in the languageList Hidden component.

After selecting a translation language and entering text, click the Translate button. The button component fires the pluginTranslate component. From here, a few things happen. The Plug-In component takes the source text and automatically detects its original language. Then, it converts the text to the selected translation in the Translated Text box.

Google's auto detection can sometimes cause unexpected translations, occasionally recognizing English numbers as different words in other languages. We're currently working to resolve this!

Here's how the Google Translate Template module looks in the Module Builder:

And here's how it looks in Express View:

Configuring the Google Translate Template

Once you create an application from this template, you'll update some configurations. To use the template, update your Google Translate service in Services Administration. You also need a Google Client ID (username) and Shared/Private Key (password) to make the service work. Let's look at the configuration in more detail.

Configuring the Google Translate Service in Services Administration

To access Services Administration:

1. At the top right of the Unqork Designer Platform, click the Settings drop-down.
2. Click Administration.
3. Under Integration, select Services Administration.

Next, you need to find and update the Google Translate service with your Google Client ID and Shared/Private Key:

1. Scroll to the bottom of your Active Services list.
2. Click your Google Translate service.

What if your environment has more than one Google Translate service? Look for the service with the same template ID and time stamp as the template's modules.

3. Scroll to the top of the page.
4. In the Issuer field, enter your Google username.
5. In the Shared/Private Key field, enter your Google password.

6. Click Save Changes.

Testing the Google Translate Template

Now, test your template.

1. Open the Google Translate Templatemodule in Express View.
2. From the Translate To drop-down, select the language you want to translate your text to.
3. In the Enter Your Text text box, enter the text to translate.
4. Click Translate.

The Google Translate module automatically detects the language you entered, and your translated text displays in the Translated Text text box.

Removing the Google Translate Template

There are 3 steps to removing the template, and these can happen in any order:

  • Uninstall the template from your environment.
  • Delete the application you created from the template.
  • Remove the Google Translate template from your environment.

Remove the Template from Your Environment

You might need to clean your environment and remove unused templates. The Unqork Library makes this easy. To uninstall a template from your environment:

1. At the top right of the Unqork Designer Platform, click Library.
2. Find the template to uninstall.
3. In the template tile header, click the ellipsis (...).
4. Click Uninstall Template.
5. In the confirmation modal, click Yes, Uninstall.

You can visit the Marketplace and reinstall the template at any time.

What if you have an existing application built from this template and then uninstall the template from your environment? Your existing application remains unaffected. Also, it no longer has any ties to the template. So, let's say you reinstall a newer version of the template in the future. You can rest assured that the installation doesn't impact your existing application.

Delete Your Google Translate Template Application

If you no longer need the application you created from your template, you can delete it. To delete your application:

1. Navigate to the Apps tab from an open workspace.
2. Find the application to delete.
3. Click the ellipsis (...) in the app tile header.
4. Click Delete.
5. Retype the provided text.
6. Click Yes, Delete.

Remove the Google Translate Service from Your Environment

To remove your Google Translate service from your environment:

1. At the top right of the Unqork Designer Platform, click the Settings drop-down.
2. Click Administration.
3. Under Integration, select Services Administration.
4. From the Active Services list, select the Google Translate service to delete.
5. Click the Delete link. You’ll find this above the Active Services list.
6. At the Delete message, click OK.
7. At the Success message, click OK.