https://d226lax1qjow5r.cloudfront.net/blog/blogposts/translating-sms-messages-with-azure-translator-text-dr/TW_Translate-SMS_1200x675.png

Traducir mensajes SMS con Azure Translator Text

Publicado el May 21, 2021

Tiempo de lectura: 10 minutos

En mis entradas anteriores, mostré cómo puedes traducir mensajes de texto con la API de traducción de Google, AWS Translate. e Traductor de idiomas IBM Watson.

Visión general

En este post, te muestro cómo crear un SMS entrantes de Vonage entrante de Vonage y traducir el mensaje al inglés usando el Azure Traductor de Texto.

Para empezar, necesitarás tener configurados los siguientes elementos:

  • Azure

  • Vonage CLI instalado

    Vonage API Account

    To complete this tutorial, you will need a Vonage API account. If you don’t have one already, you can sign up today and start building with free credit. Once you have an account, you can find your API Key and API Secret at the top of the Vonage API Dashboard.

Cree su proyecto

Sólo necesitarás un par de paquetes para ponerte manos a la obra.

Inicialice el proyecto y luego instale los requisitos anteriores utilizando npm o yarn.

npm init && npm install @azure/ms-rest-js @azure/cognitiveservices-translatortext express dotenv body-parser # or yarn init && yarn add @azure/ms-rest-js @azure/cognitiveservices-translatortext express dotenv body-parser

Una vez instalado, cree una cuenta index.js y .env archivo.

touch index.js .env

A continuación, abra el archivo index.js y pon el siguiente código dentro:

'use strict';
require('dotenv').config();

const express = require('express');
const bodyParser = require('body-parser');
const CognitiveServicesCredentials = require("@azure/ms-rest-js");
const { TranslatorTextClient } = require("@azure/cognitiveservices-translatortext");

const app = express();

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));

const server = app.listen(3000, () => {
  console.log(`Express server listening on port ${server.address().port} in ${app.settings.env} mode`);
});

Esto configurará el servidor para ejecutar el ejemplo.

Instalación de ngrok

Se requieren webhooks disponibles públicamente para que Vonage pueda comunicarse con la aplicación para recibir mensajes SMS entrantes. Podrías enviar tu código a un servidor disponible públicamente, o puedes usar ngrok para permitir que el tráfico público llegue a tu aplicación local.

Puede obtener más información sobre la instalación ngrok con este post. Después de que tengas todo listo puedes iniciar ngrok usando el siguiente comando para crear tu túnel.

ngrok http 3000

Anote la dirección ngrok dirección, ya que la necesitará en un paso posterior.

Configuración del texto de Azure Translator

A continuación, puede configurar el servicio Azure Translator Text en el portal Azure. Comience por abrir el portal y haga clic en Create New Resource.

Azure Portal Home PageAzure Portal Home Page

En la siguiente pantalla, busque Translator Text y haga clic en el resultado para acceder a la página de información del texto del traductor. Haga clic en Create para iniciar el proceso.

Translator Text Create Resource ScreenTranslator Text Create Resource Screen

Rellene el nombre, seleccione Pay As You Go y el grupo de recursos y, a continuación, haga clic en Create en la parte inferior de la página.

Translator Text Create Resource DetailsTranslator Text Create Resource Details

El proceso de creación tarda unos instantes, así que relájate un poco hasta que termine.

Abra primero el archivo .env y copia y pega lo siguiente:

TEXT_TRANSLATION_SUBSCRIPTION_KEY=
TEXT_TRANSLATION_ENDPOINT=https://api.cognitive.microsofttranslator.com/translate

Obtenga la clave y el punto final de la página de inicio rápido y actualice el archivo .env con esa información.

Durante mis pruebas, intenté utilizar el punto final de servicios presentado en el panel de control, pero no tuve suerte para que funcionara correctamente. La URL anterior es el punto final global que funcionará si tiene los mismos problemas.

Translator Text Resource QuickstartTranslator Text Resource Quickstart

Cómo configurar los mensajes SMS entrantes de Vonage

Este ejemplo requiere un número de teléfono de Vonage para recibir mensajes entrantes. Podemos hacerlo utilizando la CLI de Vonage directamente desde tu terminal.

Comprar un número de teléfono virtual

En primer lugar, compra un número directamente a Vonage (no dudes en usar otro ISO 3166 alfa-2 según sea necesario).

vonage numbers:search US Country Number Type Cost Features ─────── ─────────── ────────── ──── ───────── US 12017621343 mobile-lvn 0.90 VOICE,SMS US 12017782770 mobile-lvn 0.90 VOICE,SMS US 12018011956 mobile-lvn 0.90 VOICE,SMS US 12018099074 mobile-lvn 0.90 VOICE,SMS US 12018099756 mobile-lvn 0.90 VOICE,SMS vonage numbers:buy 12017621343 US

Aunque la ruta real a utilizar en la aplicación no está configurada, le darás un nombre /message. Es necesario vincular el número de teléfono a esta ruta para que los mensajes entrantes sepan a dónde dirigirse. Obtenga el ngrok nombre de host de la configuración anterior y utilícelo aquí:

vonage number:update 12017621343 US --url=https://my-ngrok-hostname/message

Ahora el webhook de Vonage está configurado para enrutar los mensajes SMS entrantes.

Finalizar la solicitud

El único paso ahora es crear la ruta Express y las funciones para gestionar el mensaje SMS entrante y las traducciones.

Crear el Webhook

Primero podemos configurar el controlador de ruta. Vonage permite configurar un comportamiento de webhook de SMS predeterminado. En el panel de configuración puedes cambiar el método HTTP por defecto. El mío está configurado en POST-JSONy recomiendo usar esta configuración. Si no puedes modificar tu configuración, el código utilizado aquí manejará las tres opciones.

Default Vonage SMS HTTP MethodDefault Vonage SMS HTTP Method

Abra el archivo index.js y, en la parte inferior, pegue el siguiente código:

// Reading the inbound SMS messages
const handleRoute = (req, res) => {

  let params = req.body;

  if (req.method === "GET") {
    params = req.query
  }

  if (!params.to || !params.msisdn) {
    res.status(400).send({'error': 'This is not a valid inbound SMS message!'});
  } else {
    translateText(params);
    res.status(200).end();
  }

};

Este manejador se pasará directamente a la /message ruta. Si el método HTTP del mensaje entrante es POSTel manejador utiliza req.bodyy utiliza req.query para la opción GET opción. A continuación, comprueba la carga útil entrante asegurándose de que contiene la información correcta y envía el objeto al método translateText para mostrar la traducción.

Ahora puede añadir la ruta y los métodos HTTP a la aplicación.

app.route('/message')
  .get(handleRoute)
  .post(handleRoute)
  .all((req, res) => res.status(405).send());

El código anterior creará los archivos GET y POST para gestionar cualquiera de los mensajes SMS entrantes. Si se utiliza cualquier otro método, se devolverá una 405 - Method Not Allowed se devolverá una respuesta.

El webhook está listo y la pieza final son las traducciones propiamente dichas.

Método de traducción

En el paso anterior, llamamos translateText. Este paso creará ese método.

Inicialmente obtendrá sus credenciales utilizando CognitiveServicesCredentials.ApiKeyCredentials. Esto tendrá que ser pasado como primer parámetro al constructor TranslatorTextClient constructor.

Después de crear el clientutilice el método translate para traducir el texto. El primer argumento es una matriz de idiomas a los que desea traducir el texto, lo que le permite traducir a varios idiomas. El servicio detectará automáticamente el idioma entrante si puede. El segundo argumento es una matriz de objetos para el texto que desea traducir.

function translateText(params) {
  const creds = new CognitiveServicesCredentials.ApiKeyCredentials({ inHeader: { 'Ocp-Apim-Subscription-Key': process.env.TEXT_TRANSLATION_SUBSCRIPTION_KEY } });
  const client = new TranslatorTextClient(creds, process.env.TEXT_TRANSLATION_ENDPOINT);

  client.translator
    .translate(["en"], [{text:params.text}])
    .then(result => {
      console.log(`Original Text: ${params.text}`);
      console.log(`Translation: ${result[0].translations[0].text}`)
    })
    .catch(err => {
      console.error("error:", err);
    });
}

Ahora puedes probar la funcionalidad iniciando el servidor y enviando un mensaje de texto al número que compraste anteriormente.

node index.js # Text "Hola" to your phone number # expected response Original Text: Hola Translation: Hello

El objeto Azure Translator Text full response también tiene muchos detalles, por lo que puede cambiar la respuesta para incluir console.dir(translationResult, {depth: null}) para ver la carga útil completa.

Recapitulemos

Azure Translator Text es una gran herramienta para traducir tus mensajes entrantes de Vonage. Este ejemplo solo araña la superficie pero debería ser un buen comienzo. Puedes aventurarte en varias direcciones desde aquí usando esto como punto de partida. Déjame saber qué ideas tienes para usar estos dos servicios juntos.

Puede encontrar una versión completa de este tutorial en https://github.com/nexmo-community/sms-azure-translate-js.

Si quieres saber más sobre los proyectos Extend que tenemos, puedes visitar https://developer.vonage.com/extend para obtener más información.

Compartir:

https://a.storyblok.com/f/270183/384x384/444c073b5e/kellyjandrews.png
Kelly J AndrewsAntiguo miembro del equipo

Kelly J Andrews es desarrolladora de Nexmo y lleva más de 30 años jugando con los ordenadores. Utilizó BASIC por primera vez a los 5 años.

No fue hasta que creó su primera página web en 1997 y probó JavaScript por primera vez cuando encontró su verdadera vocación. Kelly lucha ahora por JavaScript, el código comprobable y la entrega rápida.

Se le puede encontrar cantando karaoke, haciendo magia o animando a los Cubs y a los Fighting Irish.