Technologie

Créer un traducteur grace à l’API de Google

Posté le 4 juin 2009 dans: Technologie

Dans la lancé d’article informative que je suis entrain de vivre, aujourd’hui nous verrons comment créer un simple traducteur à l’aide de l’API de Google. Le concept est simple et sera créer en un fichier seulement.

Étape 1: Structure HTML

Tout d’abord, nous allons créer une structure HTML très simple. Quoi peu attrayante visuellement, elle sera fonctionnel.
Voici une structure bien simple et commune à tout les projets d’aujourd’hui.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	<title>Mini Traducteur</title>
</head>

<body>
</body>

</html>

Étape 2: Structure HTML du traducteur

Mais qu’est-ce que cette structure contiendra-t-elle? Et bien ce sera les boîtes de textes, le bouton, et les boîtes déroulantes! Voici le code qui ne pourra pas bien bien être plus simple:

	<div id="translator">
		<table>
			<tr>
				<td colspan="2">
					<textarea class="text" rows="5" cols="25"></textarea><br />
					<input type="submit" class="send" value="Traduire!" />
				</td>
			</tr>
			<tr>
				<td>
					<select class="from">
						<option>De...</option>
						<option value="en">Anglais</option>
						<option value="fr">Français</option>
						<option value="es">Espagnol</option>
					</select>
				</td>
				<td>
					<select class="to">
						<option>À...</option>
						<option value="en">Anglais</option>
						<option value="fr">Français</option>
						<option value="es">Espagnol</option>
					</select>
				</td>
			</tr>
		</table>
		<h3>Résultat:</h3>
		<div class="result"></div>
	</div>

Étape 3: Inclure les librairies requises

Les librairies que nous nous servirons seront l’API de google, et jQuery. Pour la simple raison que nous ne voulons pas télécharger rien et que je vous ai promis de faire cet exemple en un fichier.

Alors incluons nos deux librairies!

	<script type="text/javascript" src="http://www.google.com/jsapi"></script>
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script>

Étape 4: Le javascript!

Le code javascript a utilisé est très court, j’ai été bien surpris de voir que nous pouvions utiliser la traduction d’une aussi pure et simple façon. Le code sera bien documenté afin que vous vous retrouviez un coup rendu à l’interieur.

Remarque: J’utilise jQuery pour tout les besoins de javascript, alors ne vous surprenez pas à voir la syntaxe. N’oubliez pas d’utiliser le tag « script » pour éxécuter ce code!

		//Chargement l'api de langage de Google.
		google.load("language", "1");
 
		//Fonction qui nous permet de traduire d'un language à l'autre.
		function translate(text, from, to) {
			//On appel l'API de Google avec nos paramètres.
		  google.language.translate(text, from, to, function(result) {
				//Si on reçoit un résultat, on fait l'action.
		    if (result.translation) {
					//Dans ce cas, on met le résultat dans l'élément .result
		      $('#translator .result').html(result.translation);
		    }
		  });
		}
 
		//On attend que la page soit complètement chargé.
		$(function() {
			//Quand l'utilisateur clique sur traduire on utilise notre fonction.
			$('#translator .send').click(function() {
				translate($('#translator .text').attr('value'), $('#translator .from :selected').val(), $('#translator .to :selected').val());
			});
		});