Implementación de un Traductor en tiempo real con Translator Text & Node.js
Tags: node, tutorial, javascript, azure
Published: 2019-10-29 04:56:37

---
title: Implementación de un Traductor en tiempo real con Translator Text & Node.js
published: true
description: En este artículo aprenderá a realizar traducciones en tiempo real con Translator Text & Node.js
tags: nodejs, tutorial, javascript, azure
series: Aprenda los Servicios Cognitivos y I.A con Node.js
---

[![microsoft-translator.jpg](https://i.postimg.cc/3xXpCF0z/microsoft-translator.jpg)](https://postimg.cc/5Xt6fv3m)

¡Hola a todos! ¡Regresamos con otra nueva serie de artículos! ¡Y esta vez se trata de cómo podemos usar los **[Servicios Cognitivos](http://bit.ly/30MCcTN)** de Microsoft  para hacer que su aplicación sea más inteligente y mejor haciendo uso de I.A!

En este primer artículo de esta serie hablaré sobre **[Translator Text](https://aka.ms/AA66irq)**. Pero primero comprendamos qué es este Servicio Cognitivo.

## ¿Qué es Translator Text?

[![translator-api.png](https://i.postimg.cc/y817TvF3/translator-api.png)](https://postimg.cc/SJP0SL1m)

**[Translator Text](http://bit.ly/2OlOjo4)** es un servicio de traducción automática neuronal que permite a los desarrolladores pueden interactuar de una manera muy simples y fácil: sitios, herramientas o cualquier tipo de solución que necesita varios idiomas, como los sitios de ubicación, atención al cliente, aplicaciones de mensajería y en múltiples escenarios.

Con la API de Translator, puede realizar traducciones para más de 60 idiomas. Ser capaz de realizar traducciones de textos en aplicaciones móviles, computadoras y aplicaciones Web. ¡Y lo mejor de todo es que API Translator es **[open source](https://github.com/microsofttranslator)**!

Algo muy importante aquí es que Translator Text es un servicio basado en la nube.

Este servicio tiene dos versiones:

* **[V2 Translator API](http://bit.ly/2OhcLah)**: esta versión permite una traducción utilizando sistemas estadísticos, sin ningún uso de un sistema neuronal.

* **[V3 Translator API](http://bit.ly/2OhcLah)**: esta versión hace uso de un sistema neuronal por defecto. Sin embargo, los sistemas estadísticos solo están disponibles cuando no hay un sistema neural.

## ¡Soporte para más de 60 idiomas!

Sí, **[Translator Text](http://bit.ly/2OlOjo4)** ofrece más de 60 idiomas, entre ellos podemos mencionar aquí: árabe, español, italiano, inglés, portugués y muchos otros.

Si desea saber qué idiomas están disponibles para Translator Text, puede verificar con más detalle **[AQUÍ](http://bit.ly/352AUHr)**.

Bueno ... después de toda esta explicación, ahora podemos comenzar a probar este servicio y desarrollar una aplicación en Node.js. ¡Vamos!

## ¡Codifiquemos!

Okay... hablar es bueno. ¡Pero vamos a codificar! Para esto necesitaremos algunos recursos necesarios. Entre ellos:

* **[Node.js](https://nodejs.org/en/)**
* **[Visual Studio Code](http://bit.ly/2AEfJ0q)**
* **[Cuenta gratuita - Azure](http://bit.ly/35bF1RR)**

Si es estudiante en cualquier colegio o universidad, puede crear su cuenta de Azure for Students **[Azure for Students](https://azure.microsoft.com/es-es/free/students/?WT.mc_id=devto-blog-gllemos)**. Esta cuenta le dará el beneficio de tener un crédito de $ 100 para usar los servicios de forma gratuita, sin tener una tarjeta de crédito. Para activar esta cuenta, haga clic **[AQUÍ](https://azure.microsoft.com/es-es/free/students/?WT.mc_id=devto-blog-gllemos)**

Todo el código desarrollado a partir de este artículo ya está disponible **[AQUI](https://github.com/glaucia86/translatortext-nodejs-demo)**. Después de instalar los programas necesarios y crear una cuenta de Azure, podemos continuar con nuestro tutorial.

## Creando el Recurso del Translator Text

El primer paso que necesitaremos es crear un **[Recurso del Translator Text](http://bit.ly/2Okpkl6)** en el **[Portal Azure](https://azure.microsoft.com/?WT.mc_id=devto-blog-gllemos)**.

Para hacer esto, solo siga paso a paso como se muestra en gif: **(¡haga clic en el gif para ver la imagen en acción!)**

[![01-gif-translator-nodejs.md.gif](https://s3.gifyu.com/images/01-gif-translator-nodejs.md.gif)](https://gifyu.com/image/k96E)

Tenga en cuenta que cuando terminamos de crear un recurso del Translator Text, se genera una **key** y **enpoint** para nosotros:

[![01-image.png](https://i.postimg.cc/Hn7vYQGt/01-image.png)](https://postimg.cc/n9pGT9hs)

Guarda esta **key** y **endpoint**, porque durante el desarrollo de la aplicación más adelante vamos a necesitar esta información de nuevo!

## Creando Clave de Entorno

Ahora que tenemos nuestra **key** es importante ahora crear una variable de entorno. Porque así podemos almacenar la `key` del recurso recién creado en el Portal de Azure. Y eso es exactamente lo que haremos ahora. Para hacer esto, abra su command prompt y ejecute el siguiente comando:

```bash
> setx TRANSLATOR_TEXT_SUBSCRIPTION_KEY "sua-key"

> setx TRANSLATOR_TEXT_ENDPOINT https://api.cognitive.microsofttranslator.com

```

Tenga en cuenta que no utilizaremos el `endpoint` del Portal Azure. Pero sí, el siguiente endpoint: `https://api.cognitive.microsofttranslator.com`

Mira la imagen de abajo:

[![Screen-Shot-10-05-19-at-12-53-AM.png](https://i.postimg.cc/L6LXd0s0/Screen-Shot-10-05-19-at-12-53-AM.png)](https://postimg.cc/9rXVZbZG)

Si el mensaje aparece como arriba es porque podemos establecer correctamente nuestra key y endpoint en la variable de entorno localmente. Si desea ejecutar este comando en otro Sistema Operativo, simplemente ejecute los comandos:

* **Linux**

```bash
> export TRANSLATOR_TEXT_SUBSCRIPTION_KEY=your-key

> export TRANSLATOR_TEXT_ENDPOINT https://api.cognitive.microsofttranslator.com

> source ~/.bashrc
```

* **MacOs**

```bash
> export TRANSLATOR_TEXT_SUBSCRIPTION_KEY=your-key

> export TRANSLATOR_TEXT_ENDPOINT https://api.cognitive.microsofttranslator.com

> source ~/.bashrc
```

**tip**: cuando haya terminado, sería bueno cerrar el command prompt y abrir de nuevo.

Bueno, ahora todo está configurado. Ahora vamos a crear nuestra aplicación en Node.js.

## Coding Time!

Ahora abre tu **[Visual Studio Code](http://bit.ly/2AEfJ0q)** y escriba el siguiente comando:

```bash
> npm init -y
```

Este comando creará un archivo llamado ** package.json **. Ábralo e incluya el siguiente bloque de código:

**arquivo: package.json**

```json
{
  "name": "demo-api-translator-nodejs",
  "version": "1.0.0",
  "description": "Demo responsável por ",
  "main": "src/tradutor-texto.js",
  "scripts": {
    "dev": "node src/tradutor-texto.js"
  },
  "repository": {
    "type": "git",
    "url": "https://github.com/glaucia86/translatortext-nodejs-demo.git"
  },
  "keywords": [
    "nodejs",
    "javascript",
    "azure",
    "cognitive-services",
    "translator-text"
  ],
  "author": "Glaucia Lemos",
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/glaucia86/demo-api-translator-nodejs/issues"
  },
  "homepage": "https://github.com/glaucia86/demo-api-translator-nodejs#readme"
}
```

## Creando la estructura del proyecto

Construyamos la siguiente estructura del proyecto como la imagen: 

[![Screen-Shot-10-04-19-at-06-54-PM.png](https://i.postimg.cc/TP3gzrvK/Screen-Shot-10-04-19-at-06-54-PM.png)](https://postimg.cc/BjRjDP63)

Tenga en cuenta que el archivo `tradutor-texto.js` dentro de la carpeta `src`. Es en este archivo es donde desarrollaremos la lógica de nuestra aplicación.

## Desarrollando el proyecto

En primer lugar, instalemos algunos paquetes que deben estar presentes en nuestro proyecto. Para hacer esto, abra el command prompt y escriba el siguiente comando:

```bash
> npm install request uuidv4
```

Ahora tenga en cuenta que nuestro archivo `package.json` cambiará y y se incluirá  en el bloque `dependencies` los dos paquetes anteriores: `request` y `uuidv4`.

* **archivo: package.json**

```json
{
  "name": "demo-api-translator-nodejs",
  "version": "1.0.0",
  "description": "Demo responsável por ",
  "main": "src/tradutor-texto.js",
  "scripts": {
    "dev": "node src/tradutor-texto.js"
  },
  "repository": {
    "type": "git",
    "url": "https://github.com/glaucia86/translatortext-nodejs-demo.git"
  },
  "keywords": [
    "nodejs",
    "javascript",
    "azure",
    "cognitive-services",
    "translator-text"
  ],
  "author": "Glaucia Lemos",
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/glaucia86/demo-api-translator-nodejs/issues"
  },
  "homepage": "https://github.com/glaucia86/demo-api-translator-nodejs#readme",
  "dependencies": {
    "request": "^2.88.0",
    "uuidv4": "^5.0.1"
  }
}
```

Ahora, abra el `tradutor-texto.js` y agrega el siguiente bloque de código:

```javascript
/**
 * 
 * Arquivo: src/tradutor-texto.js
 * Descrição: arquivo responsável por traduzir textos usando o Translator Text API.
 * Data: 03/10/2019
 * Author: Glaucia Lemos
 * 
 */

const request = require('request');
const uuidv4 = require('uuid/v4');

```

Bien, ahora continuemos nuestro desarrollo. Incluya el siguiente bloque de código:

```javascript
/**
 * 
 * Arquivo: src/tradutor-texto.js
 * Descrição: arquivo responsável por traduzir textos usando o Translator Text API.
 * Data: 03/10/2019
 * Author: Glaucia Lemos
 * 
 */

const request = require('request');
const uuidv4 = require('uuid/v4');

let chave_translator = 'TRANSLATOR_TEXT_SUBSCRIPTION_KEY';

//==> Se não encontrar uma variável de ambiente' enviar mensagem de erro!
if (!process.env[chave_translator]) {
  throw new Error('Por favor, configure a sua variável de ambiente: ' + chave_translator);
}

let subscriptionKey = process.env[chave_translator];

let endpoint_translator = 'TRANSLATOR_TEXT_ENDPOINT';

if (!process.env[endpoint_translator]) {
  throw new Error('Por favor, configure a sua variável de ambiente: ' + endpoint_translator);
}

let endpoint = process.env[endpoint_translator];

```

¡Tenga en cuenta la importancia de establecer nuestras variables de entorno localmente para que cuando ejecute la aplicación no reciba un error!

¡Vamos!

## Configurando la Solicitud

¡Estamos casi al final del desarrollo de nuestro código! Finalmente, configuremos la solicitud para realizar la llamada a la API de Translator Text. Para hacer esto, incluya el siguiente bloque de código:

* **archivo: tradutor-texto.js**

```javascript
(...)

function traduzirTexto() {
  // ==> Aqui vamos configurar os requests
  let options = {
    method: 'POST',
    baseUrl: endpoint,
    url: 'translate',
    qs: {
      'api-version': '3.0',
      'to': ['en', 'es']
    },
    headers: {
      'Ocp-Apim-Subscription-Key': subscriptionKey,
      'Content-type': 'application/json',
      'X-ClientTraceId': uuidv4().toString()
    },
    body: [{
      'text': 'Olá Desenvolvedor!'
    }],
    json: true,
  }
};
```

Perfecto! ¡Ahora imprimamos nuestra solicitud! Para hacer esto, incluya el siguiente bloque de código:

* **archivo: tradutor-texto.js**

```javascript
(...)

function traduzirTexto() {
  // ==> Aquí vamos configurar la solicitud
  let options = {
    method: 'POST',
    baseUrl: endpoint,
    url: 'translate',
    qs: {
      'api-version': '3.0',
      'to': ['en', 'es']
    },
    headers: {
      'Ocp-Apim-Subscription-Key': subscriptionKey,
      'Content-type': 'application/json',
      'X-ClientTraceId': uuidv4().toString()
    },
    body: [{
      'text': 'Olá Desenvolvedor!'
    }],
    json: true,
  }

  // ==> Aquí vamos realizar la solicitud y impresión de la respuesta
  request(options, (err, res, body) => {
    console.log(JSON.stringify(body, null, 4));
  })
};

// Aquí llamaremos la función a realizar la traducción
// a tradução via API
traduzirTexto();

```

¡Ahora ya está todo listo! ¡Ejecutemos nuestra aplicación y veamos si realmente traducirá la frase: **Hello Developer** a `inglés` y `español`?!

Ejecute el comando:

```bash
> npm run dev
```

[![Screen-Shot-10-05-19-at-01-05-AM.png](https://i.postimg.cc/5yZSXkcR/Screen-Shot-10-05-19-at-01-05-AM.png)](https://postimg.cc/vxtVjhZr)

Solo para que lo veas en acción, mira ahora con otra frase: `¡Hola! ¿Cuál es su nombre?` traduciendo del `portugués` al `inglés` y `español`:

![02-gif-translator-nodejs.gif](https://s3.gifyu.com/images/02-gif-translator-nodejs.gif)

Genial, no?

Todo el código desarrollado durante este artículo está **[AQUÍ](https://github.com/glaucia86/translatortext-nodejs-demo)**.

## Conclusión

¡Hoy aprendimos un poco sobre **[Translator Text](http://bit.ly/2OlOjo4)**! Una gran cantidad de idiomas que podemos usar para traducir a aplicaciones y una demostración que podría aprender lo fácil que es usar esta API.
Un punto que no mencioné es que esta API, además de Node.js/JavaScript, también está disponible para desarrollarse en:

* **C#**
* **Java**
* **Python**
* **Go**
* **PHP**
* **Ruby**

Hay más cosas interesantes que hacer aquí en esta API, por ejemplo: en chino lees ideogramas, ¿verdad? Pero si queremos entender cómo leer estos ideogramas? (en este caso es el piyin ban). Bueno, tengo noticias para ti! Siempre después de salir un artículo de esta serie, voy a estar haciendo una serie de videos en que explican paso a paso cómo hacer el tutorial y hacer preguntas en tiempo real.

Y ya tenemos un video sobre Translator Text **[AQUÍ](https://youtu.be/IzSVw1e2AxI)**

Y para saber esta y otras novedades, ¡sígueme en twitter!

[![Twitter](https://code4coders.files.wordpress.com/2019/05/image-12.png)](https://twitter.com/glaucia_lemos86)

¡Hasta muy pronto! ❤️ ❤️ ❤️