DEV Community

Glaucia Lemos for Microsoft Azure

Posted on • Edited on

Realizando traduções em tempo real com Translator Text & Node.js

microsoft-translator.jpg

Olá meus lindos e minhas lindas! Estamos de volta com mais uma nova série de artigos! E dessa vez será sobre como podemos usar de diferentes maneiras os Serviços Cognitivos da Microsoft, visando deixar a sua aplicação mais inteligente e melhor: fazendo uso da I.A!

Nesse primeiro artigo dessa série irei falar sobre o Translator Text. Mas antes, vamos entender o que seria esse Serviço Cognitivo.

O que seria Translator Text?!

translator-api.png

Translator Text é um serviço de tradução de máquina neural que os desenvolvedores podem interagir de uma maneira muito fácil em: sites, ferramentas ou qualquer tipo de solução que precise de vários idiomas, como localização de sites, suporte ao cliente, aplicativos de mensagens e entre vários cenários.

Com a API do Translator, você pode realizar traduções para mais de 60 idiomas. Podendo realizar traduções para textos em celular, computador e aplicações Web. E o melhor disso tudo é que, API Translator é open source!

Um ponto importante a ser mencionado aqui é que, o Translator Text é um serviço baseado em nuvem.

Esse serviço possuem duas versões:

  • V2 Translator API: essa versão permite realização de uma tradução com uso de sistemas estatísticos, sem nenhum uso de um sistema neural.

  • V3 Translator API: essa versão faz uso de um sistema neural por padrão. Porém, os sistemas estatísticos estarão disponíveis somente quando não houver nenhum sistema neural.

Suporte a mais de 60 idiomas!

Sim, o Translator Text disponibiliza de mais de 60 idiomas, entre eles para mencionar aqui: Árabe, Espanhol, Italiano, Inglês, Português e tantas outras.

Caso desejam saber quais idiomas estão disponíveis para o Translator Text, podem conferir com mais detalhes AQUI.

Bom... depois de toda essa explicação, agora podemos começar a testar esse serviço e desenvolver uma aplicação em Node.js. Vamos nessa?!

Mãos à obra!

Bom... falar é bom, mas vamos codar! Para isso, vamos precisar de alguns recursos necessários. Entre eles:

Caso você seja um(a) estudante de alguma Instituição de Ensino de Faculdade ou Universidade, poderá criar sua conta no Azure for Students. Essa conta te dará o benefício em possuir crédito de USD 100,00 para usar os serviços de maneira gratuita, sem necessidade de possuir um cartão de crédito. Para ativar essa conta, bastam acessar o link ao lado: AQUI

Todo o código desenvolvido desse artigo encontra-se disponível AQUI. Depois de instalar e criar uma conta Azure aí sim poderemos prosseguir com o nosso tutorial.

Criando Recurso do Translator Text

Bom, o primeiro passo que vamos precisar é criar um Recurso do Translator Text no Portal Azure.

Para isso, basta seguir o passo a passo como no gif abaixo: (clique no gif para ver a imagem em ação!)

01-gif-translator-nodejs.md.gif

Notem que, quando concluímos em criar um Recurso do Translator Texto ele nos gera uma key e um endpoint:

01-image.png

Guardem essa key e endpoint, pois durante o desenvolvimento da aplicação, vamos precisar dessas informações!

Criando Chave de Ambiente

Agora que já temos a nossa key é importante agora criarmos uma variável de ambiente. Pois, dessa forma, poderemos armazenar a key do recurso recém criados no Portal Azure. E é justamente isso que iremos fazer agora. Para isso, abre o seu prompt de comando e execute o seguinte comando:

> setx TRANSLATOR_TEXT_SUBSCRIPTION_KEY "sua-key"

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

Enter fullscreen mode Exit fullscreen mode

Notem que, não usaremos o endpoint do Portal Azure. Mas, sim o seguinte endpoint: https://api.cognitive.microsofttranslator.com

Vejam na imagem abaixo:

Screen-Shot-10-05-19-at-12-53-AM.png

Se aparecer a mensagem como acima é porque conseguimos configurar corretamente a nossa chave e endpoint na variável de ambiente localmente. Caso deseja executar esse comando em outro S.O, basta digitar os comandos:

  • Linux
> export TRANSLATOR_TEXT_SUBSCRIPTION_KEY=sua-key

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

> source ~/.bashrc
Enter fullscreen mode Exit fullscreen mode
  • MacOs
> export TRANSLATOR_TEXT_SUBSCRIPTION_KEY=sua-key

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

> source ~/.bashrc
Enter fullscreen mode Exit fullscreen mode

Ao terminar, seria bom fechar o seu prompt de comando e abrir novamente! #ficaadica

Bom, agora está tudo configurado. Vamos agora criar a nossa aplicação em Node.js

Coding Time!

Abre agora o seu Visual Studio Code e digite o seguinte comando abaixo:

> npm init -y
Enter fullscreen mode Exit fullscreen mode

Esse comando irá criar um arquivo chamado package.json padrão para nós! Abre ele e inclua o seguinte bloco de código abaixo:

arquivo: package.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"
}
Enter fullscreen mode Exit fullscreen mode

Criando a estrutura do projeto

Vamos montar a seguinte estrutura do projeto conforme a imagem abaixo:

Screen-Shot-10-04-19-at-06-54-PM.png

Notem que, o arquivo tradutor-texto.js dentro da pasta src. É nesse arquivo que iremos desenvolver a lógica da nossa aplicação.

Desenvolvendo o projeto

Antes de mais nada, vamos instalar alguns pacotes que precisam instalar no nosso projeto. Para isso, abram o prompt de comando e digitam o seguinte comando:

> npm install request uuidv4
Enter fullscreen mode Exit fullscreen mode

Agora notem que, o nosso package.json sofrerá mudanças e incluirá no bloco dependencies os dois pacotes acima: request e uuidv4.

  • arquivo: package.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"
  }
}
Enter fullscreen mode Exit fullscreen mode

Agora, abram o arquivo tradutor-texto.js e inclua o seguinte bloco de código abaixo:

/**
 * 
 * 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');

Enter fullscreen mode Exit fullscreen mode

Beleza, agora vamos continuar o nosso desenvolvimento. Inclua o seguinte bloco abaixo:

/**
 * 
 * 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];

Enter fullscreen mode Exit fullscreen mode

Observem a importância de configurarmos localmente as nossas variáveis de ambiente para que, quando se execute a aplicação não venha a dar erro!

Vamos dar continuidade!

Configurando as Requisições

Estamos quase chegando ao final do desenvolvimento do nosso código! Para isso, vamos configurar as requisições para realizar a chamada da API do Translator Text. Para isso, inclua o seguinte bloco de código abaixo:

  • arquivo: tradutor-texto.js
(...)

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,
  }
};
Enter fullscreen mode Exit fullscreen mode

Perfeito! Agora vamos fazer imprimir a nossa requisição! Para isso, inclua o seguinte bloco de código abaixo:

  • arquivo: tradutor-texto.js
(...)

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,
  }

  // ==> Aqui vamos imprimir a nossa requisição
  request(options, (err, res, body) => {
    console.log(JSON.stringify(body, null, 4));
  })
};

// Aqui vamos chamar a função para que possa realizar
// a tradução via API
traduzirTexto();

Enter fullscreen mode Exit fullscreen mode

Agora está tudo pronto! Vamos executar a nossa aplicação e ver se vai realmente traduzir a frase: Olá Desenvolvedor para inglês e espanhol?!

Para isso, abre o prompt e vamos executar o comando:

> npm run dev
Enter fullscreen mode Exit fullscreen mode

Screen-Shot-10-05-19-at-01-05-AM.png

Só para vocês verem em ação, vejam agora com uma outra frase: Oi! Como você se chama? traduzindo do português para o inglês e espanhol:

02-gif-translator-nodejs.gif

Legal, não é mesmo?!

Todo o código desenvolvido durante esse post encontra-se AQUI

Palavras Finais

Hoje aprendemos um pouco o que é o Translator Text, a grande quantidade de idiomas que podemos fazer uso para realizar traduções em aplicações e uma demonstração a qual puderam aprender como é fácil usar essa API.
Um ponto que não mencionei é que, essa API, além do Node.js/JavaScript, também está disponível para ser desenvolvido nas seguintes linguagens:

  • C#
  • Java
  • Python
  • Go
  • PHP
  • Ruby

Há mais coisas legais para fazermos aqui ainda nessa API, como por exemplo: em chinês se lê ideogramas, certo? Mas, caso queiramos entender como ler esses ideogramas? (nesse caso: o piyin ban)? Bom, tenho uma novidade para vocês! Sempre depois de sair um artigo dessa série, estarei fazendo uma série de vídeo aulas explicando passo a passo como fazer o tutorial e tirando dúvidas em tempo real.

E já temos um vídeo sobre esse projeto do Translator Text AQUÍ

Fiquem ligados porque teremos vídeos explicando esse tutorial e como podemos traduzir idiomas orientais!

E para ficarem por dentro de várias outras novidades, não deixem de me seguir lá no twitter!

Twitter

Nos vemos! Até a próxima série pessoal! 😍

Top comments (0)