- Detalles
- Escrito por Jesús Manuel Nieto Carracedo
- Categoría de nivel principal o raíz: Documentación
- Categoría: WebService
Ratio: 4 / 5
Vamos a explicar a través de este pequeño tutorial dos formas fáciles y sencillas para poder hacer uso de uno de los webservicemás utilizados en su interface web, que podéis encontrar a través de la siguiente dirección https://translate.google.es .
Seguramente si estáis leyendo esto, es porque os ha surgido la necesidad o la inquietud, de poder usar toda la potencia que provee este traductor libre integrado con vuestra aplicación web, o bien, poder hacer uso del mismo desde aplicaciones externas a la web, capaces de interactuar a través de objetos preparados para ello.
DHTML (Lenguaje cliente)
La primera opción que vamos a manejar será a través de un archivo .html, el cual, a raíz de un pequeño pero potente script, nos permitirá hacer uso de este servicio. Rápido, potente, limpio, y como podréis observar muy ligero en cuanto a líneas de código se refiere, este script se basa en lenguajes de lado del cliente, con lo cual, no necesitaremos tener instalado en el equipo terminal un servidor php/asp, etc… bastará con un navegador que pueda leer/interpretar, código HTML y javascript. Hoy en día, cualquier navegador está preparado para ello, este es el punto fuerte a tener más en cuenta para decantarnos por la generación de código DHTML para el uso de este webservice.
Antes de mostrar el código fuente vamos a hacer una breve explicación, simplemente vamos a crear 3 variables, que van a recibir los parámetros de idioma(es,it,en,fr…), y el texto que queramos traducir, lo mejor, es que no solo va a traducir palabras, sino que admitirá también frases contextualizadas, este dato bajo mi punto de vista, hay que “cogerlo con pinzas”, ya que, a día de hoy, aunque muy logrado, es francamente difícil poder traducir con precisión y exactitud frases hechas, o interpretar correctamente el contexto para el cual está pensado/escrito. De todas formas, este es un problema de google, ya que nosotros simplemente nos conectaremos a su servicio. Continuando con el código, veréis un botón que ejecutará un código javascript, el cual, una vez revisado que las 3 variables tengan texto, llama al objeto de google, para que este nos devuelva la traducción. Como podéis observar, he optado por mostrarla en una ventana tipo “alert”. Las aplicaciones prácticas de este código son tantas como puedan pasaros por la cabeza. Algo a tener bastante en cuenta, es que deberéis inicializar siempre el objeto google donde se realiza en el código, (fuera de la función) sino, no funcionará. El siguiente código ha sido probado correctamente en Internet Explorer 8.x, Internet Explorer 9.x, Firefox 6.x.x, Google Chrome 14.x.x. “Y dice así”:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript"="text/javascript">
google.load("language","1");
function traducir (){
ok = true;
if (document.getElementById('leng_ori').value==''){
ok = false;
alert ('Código idioma original es requerido');
}
if (document.getElementById('leng_des').value==''){
ok = false;
alert ('Código idioma destino es requerido');
}
if (document.getElementById('valor').value==''){
ok = false;
alert ('Valor a traducir es requerido');
}
if (ok){
google.language.translate(document.getElementById('valor').value, document.getElementById('leng_ori').value, document.getElementById('leng_des').value, function (translated) {
alert(translated.translation);
});
}
}
</script>
</head>
<body>
<table>
<tr>
<td> <label> Introduce código idioma origen: </label> </td>
<td> <input type="text" value="" id="leng_ori"/> </td>
</tr>
<tr>
<td> <label> Introduce código idioma destino: </label> </td>
<td> <input type="text" value="" id="leng_des"/> <td>
</tr>
<tr>
<td> <label> Introduce palabra a traducir : </label> </td>
<td> <input type="text" value="" id="valor"/> </td>
</tr>
</table>
<input type="button" value="Traducir" onclick="traducir();"/>
</body>
</html>
Podéis encontrar este ejemplo en: https://www.etani.es/demo/traducir_DHTML.html
PHP/CURL/JSON
Visto lo anterior vamos a mostrar un ejemplo de código para hacer una llamada con el lenguaje PhP, que como ya sabéis es lenguaje de servidor, con todo lo que ello va a implicar. Para ello vamos a hacer uso de la librería cURL, la cual será la encargada de llevar a cabo la conexión. Por otro lado hay que tener en cuenta que, los datos nos van a ser devueltos como una cadena de tipo array (stdClass) para lo cual usaremos Json, para poder descomponerlo correctamente. Realmente el siguiente código puede servirnos claramente para ver un ejemplo de uso tanto del webservice de google, como del uso de la librería cURL de PhP, como del uso de JSON para datos stdClass. Sin más voy a indicar el código utilizado ya que está comentado. Notar que, está escrito en un archivo con extensión.php. El siguiente código ha sido probado correctamente en Internet Explorer 8.x, Internet Explorer 9.x, Firefox 6.x.x, Google Chrome 14.x.x. “Y dice así”:
Podéis encontrar este ejemplo en: https://www.etani.es/demo/traducir_PHP_JSON.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
</head>
<body>
<?php
echo '<label> Si estás leyendo esto, es que tu servidor PhP está funcionando </label>';
echo '<br>';
echo '<label>La versión de php de tu navegador es-> '.phpversion().' Recuerda que si la versión de tu navegador es inferior a 5.0.0 JSON no funcionará correctamente </label>';
echo '<br>';
echo '<br>';
echo '<label> Vamos a traducir, la palabra, libro de idioma español a francés, revisar código fuente ya que aqui solo se verán literales </label>';
/* Para realizar la conexión vamos a hacer uso de curl_init() que tendremos que configurar debidamente.
* vamos a utilizar una variable myURL donde le indicaremos la url de la api de google, y 3 variables para el lenguaje original, el lenguaje destino y el texto a traducir.
* No vamos a controlar si las variables están rellenas, es absurdo, no hay interacción con el usuario.
*/
$leng_ori = 'es';
$leng_des = 'fr';
$texto = 'libro';
$myURL = 'https://ajax.googleapis.com/ajax/services/language/translate?v=1.8&q='.$texto.'%E9&langpair='.$leng_ori.'|'.$leng_des;
echo '<br>';
echo '<br>';
echo '<label> Esta es la cadena enviada para la conexión -> '.$myURL.'</label>';
$ch = curl_init(); //Esto lo que hace es devolver un handler un manejador de conexión, el cual será eliminado en curl_close.
curl_setopt($ch,CURLOPT_URL, $myURL);
curl_setopt($ch, CURLOPT_HEADER, 0);
//Vamos a enviar de forma muy importante, el "user agent" es decir, desde donde se está ejecutando, ya que, sin esta cabecera nos dará error.
curl_setopt($ch, CURLOPT_USERAGENT,$_SERVER['https_USER_AGENT']);
curl_setopt($ch, CURLOPT_httpsHEADER, array("Accept-Language: es-es,en"));
curl_setopt($ch,CURLOPT_CONNECTTIMEOUT,2);
curl_setopt($ch,CURLOPT_RETURNTRANSFER,1);
$respuesta = curl_exec($ch);
curl_close($ch);
echo '<br>';
echo '<br>';
// Una vez hecha la conexión y creada la respuesta, vamos a hacer uso de JSON, ya que la se devuelve como stdClass para poder descomponerla y extraer la traducción.
$ObjetoJson = json_decode($respuesta);
$CadenaDevuelta = $ObjetoJson->responseData;
if ($CadenaDevuelta==null){
echo '<h2> Hubo un error, puede ser que el servicio se encuentre suspendido o no disponible </h2>';
} else {
$aux= $CadenaDevuelta->translatedText;
$resultado = utf8_decode($aux);
echo '<h2> La palabra->'.$texto.' ha sido traducida por-> '.$resultado.'</h2>';
}
echo '<br>';
?>
</body>
</html>
Espero que estos 2 ejemplos os hayan podido servir en el camino hacia la finalización, ejecución de ese proyecto que tenéis en mente.
Tecnologías empleadas para desarrollo de soluciones
(Hacer click para ampliar información)
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
