Auto-translating User’s Content Using Google Translate API

The Google Translate service offers a REST API which allows you to fetch translations right from your app. In this tutorial you will learn how to build a single-page site that displays user submitted opinions in different languages and allows the visitors to submit new ones. The tutorial is the continuation of the Introduction to the Google Translate API and PHP article.

Introduction

In our app we will have to implement the following functionalities: – adding a new opinion using a web form, – saving the opinion to the database, – fetching the translations and saving them to database, – displaying existing opinions along with their translations.

The technologies that we will use include: – the SQLite database to store user opinions and translations, – the cURL library to connect to the Google Translate API, – the Twitter Bootstrap to get some nice look&feel.

The requests within our site will be made via AJAX calls to save and fetch the opinions just within one page.

The final app is available in a GitHub repo. You can open a live demo to see what we will achieve after going through the tutorial.

The database

The database engine

As we will store the data in an SQLite database, there is not much configuration that has to be done. SQLite describes itself as a zero-configuration and serverless database which is entirely true. The whole database is just a single file on the server. It’s important to note that while SQLite helps us develop our app faster and is perfect for this kind of rapid prototyping, you should use something more secure and robust like MariaDB in production. To connect with the database using the PHP PDO extension we need a single line of code:

<?php
    $db = new PDO('sqlite:opinions.db');
?>

Then, we can just execute some queries using the $db variable as the database connection handler.

The database schema

Our database will contain two tables – one for storing the general information about an opinion and the second one with all the texts and translations:

The opinion_translations.machine field will tell us whether a certain row represents a user submitted text (machine = 0) or a machine translation (machine = 1).

To store the language codes in opinion_translations.language field we will use the same values that Google Translate uses in their API (check the documentation for the full list).

Saving the opinions

We will allow our visitors to add an opinion using a simple form:

To know what the source language of the opinion is, the form contains a hidden field specifying it:

<input type="hidden" name="language" id="inputLanguage" value="en">

If our site will allow a user to switch between different language versions, we will just have to change the inputLanguage value to the language code that is currently displayed.

When a user submits the form, our application saves the opinion to the database and then fetches the necessary translations. All the code responsible for handling the opinions is written in the Opinion class of our app:

<?php
class Opinion {

        private $_languages = array('en', 'fr', 'es');

        public function getAll() {
           ...
        }

        public function addOpinion($nick, $text, $language) {
            ...
        }

        public function addTranslation($opinion_id, $language, $text, $machine) {
        ...
        }

        ...
    }
?>

As you can see, there is a global list of all the languages used in the site stored in the _languages property. We will use it to check which translations to fetch when adding an opinion.

Getting the translations

To connect with the Google Translate API we will use a simple GoogleTranslator class that serves as a wrapper for the methods offered by the API. It offers 3 static methods whose names are the same as the ones available in the API:

<?php
    class GoogleTranslator {
        static function translate($targetLanguage, $text, $sourceLanguage = null, $prettyprint = 'true', $format = 'html') {
            ...
        }

        static function detect($text) {
            ...
        }

        static function languages() {
            ...
        }

    }

?>

Each of the methods builds a proper request URL basing on the values of the passed arguments. Then it sends a request to the API using cURL, just as it’s described in the article about the Google Translate API basics.

So getting a translation using the GoogleTranslate class just looks like this:

<?php
    $translation = GoogleTranslator::translate($targetLanguage, $text, $sourceLanguage);

?>

Then we can save the translation we received from the Google API just by calling Opinion->addTranslation() method. We can add as many translations as we want on the condition that each opinion has no more than one text submitted by user (opinion_translations.machine = 0) and not more than one translation per language.

Displaying the opinions

After an opinion has been saved succesfully, we will be able to display its original content as well as its translations. Opinion->getAll() method will provide us with a list of all the opinions. We can show them nicely by displaying one opinion in a row along with the buttons that allow a visitor to switch between different languages:

When we use the Google Translation API, there are certain regulations that we have to stick to: the attribution requirements and the HTML markup requirements.

The first document states that we have to place the Google Translate logo next to the machine translated text that we display on the site. That’s why a translated by Google image shows up when displaying translated content on our opinion list. We also have to add a disclaimer which is displayed at the bottom of our page.

There are also the requirements regarding the HTML markup. When displaying a translated text we need to add a lang attribute to the element that contains the text (a div, span or any other element). The value of the attribute consists both of the source language and the target language of the translation:

 <language code of the language to which the text was translated>-x-mtfrom-<language code of original language>

So a sample opinion translated from English to French may be inserted into a page using a code like this:

<div lang="fr-x-mtfrom-en">
    J'aime vraiment vos produits.
</div>

As Google explains, adding such HTML attributes allow the search engines to distinguish between original and translated text.

Linking it all together

To connect all the parts of our application we will build a single-page site that saves a new opinion and displays the existing ones using AJAX calls. After submitting an opinion the user will be notified about the result and the opinions list will be reloaded. When something goes wrong, a nice error message will also show up.

See the demo to check how it works. As the Google Translate API is a paid service, our demo app will not fetch the actual translations. To change it after downloading the code, just enter your API key in the GoogleTranslator class and change the test mode to false:

<?php
    class GoogleTranslator {
        private static $_apiKey = '<your API key>';
        private static $_testMode = false;
        ...
    }
?>

Then your app will connect to the Google Translate API each time a new opinion is being added.

Summary

The article described how to make a single-page site that fetches and displays opinions in different languages. As you could see, mixing such technologies as SQLite, Google Translate REST API, Twitter Bootstrap and AJAX allows you to quickly set up a site that is ready to serve your customers.

You can extend the given code and add some more funcionalities like approving the opinions by a site admin or linking the opinions with products in your database.

If you have any questions or comments regarding the article, feel free to post a comment below or contact me through Google+.

Frequently Asked Questions (FAQs) about Auto-Translating User-Submitted Content Using Google Translate API