Traduire des SMS avec Azure Translator Text

Dans mes articles précédents, j'ai montré comment vous pouvez traduire des messages texte à l'aide de l Google Translation API, AWS Translateet IBM Watson Language Translator.

Vue d'ensemble

Dans ce billet, je vous montre comment créer un SMS entrant de Vonage entrant de Vonage et traduire le message en anglais à l'aide de l'outil Azure Translator Text.

Pour commencer, vous aurez besoin des éléments suivants :

• L'azur

• Vonage CLI installé

  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.

  

  Ready to start building?

  Experience seamless connectivity, real-time messaging, and crystal-clear voice and video calls—all at your fingertips.

Créez votre projet

Vous n'aurez besoin que de quelques paquets pour démarrer.

• @azure/ms-rest-js-Il s'agit du SDK Azure qui vous aidera à obtenir les informations d'identification.

• @azure/cognitiveservices-translatortext-Il s'agit du SDK Azure Translator Text.

• express-Cadre web pour servir le webhook

• dotenv-un paquet pour charger les variables d'environnement

• body-parser-middleware pour Express afin de gérer l'objet webhook entrant

Initialiser le projet et installer les exigences ci-dessus en utilisant npm ou yarn.

Une fois installé, créez un index.js et .env fichier.

Ensuite, ouvrez le fichier index.js et placez le code suivant à l'intérieur :

'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`);
});

Cela permet de configurer le serveur pour qu'il exécute l'exemple.

Installation de ngrok

Des webhooks accessibles au public sont nécessaires pour que Vonage puisse communiquer avec l'application afin de recevoir des SMS entrants. Vous pouvez pousser votre code vers un serveur accessible au public, ou vous pouvez utiliser ngrok pour permettre au trafic public d'atteindre votre application locale.

Vous pouvez en savoir plus sur l'installation ngrok avec ce billet. Une fois que tout est prêt, vous pouvez démarrer ngrok en utilisant la commande suivante pour créer votre tunnel.

Notez l'adresse, car vous en aurez besoin dans une étape ultérieure. ngrok car vous en aurez besoin dans une étape ultérieure.

Configuration d'Azure Translator Text

Ensuite, vous pouvez configurer le service Azure Translator Text dans le portail Azure. Commencez par ouvrir le portail et cliquez sur Create New Resource.

Azure Portal Home Page

Sur l'écran suivant, recherchez Translator Text et cliquez sur le résultat pour accéder à la page d'information sur le texte du traducteur. Cliquez sur Create pour lancer le processus.

Translator Text Create Resource Screen

Complétez le nom, sélectionnez Pay As You Go et le groupe de ressources, puis cliquez sur Create en bas de la page.

Translator Text Create Resource Details

Le processus de création prend quelques instants, alors détendez-vous un peu jusqu'à ce qu'il soit terminé.

Ouvrez d'abord le fichier .env et copier-coller ce qui suit :

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

Récupérez la clé et le point d'arrivée sur la page de démarrage rapide et mettez à jour le fichier .env avec ces informations.

Lors de mes essais, j'ai tenté d'utiliser le point de terminaison des services présenté dans le tableau de bord, mais je n'ai pas réussi à le faire fonctionner correctement. L'URL ci-dessus est le point de terminaison global qui fonctionnera si vous rencontrez les mêmes problèmes.

Translator Text Resource Quickstart

Configuration des messages SMS entrants de Vonage

Cet exemple nécessite un numéro de téléphone de Vonage pour recevoir les messages entrants. Nous pouvons le faire en utilisant le CLI de Vonage de Vonage à partir de votre terminal.

Acheter un numéro de téléphone virtuel

Tout d'abord, achetez un numéro directement auprès de Vonage (n'hésitez pas à utiliser un numéro différent de celui de Vonage). ISO 3166 alpha-2 si nécessaire).

Bien que l'itinéraire à utiliser dans l'application ne soit pas encore défini, vous le nommerez /message. Le numéro de téléphone doit être lié à cet itinéraire pour que les messages entrants sachent où aller. Récupérez le ngrok de la configuration précédente et utilisez-le ici :

Le webhook de Vonage est maintenant configuré pour acheminer les SMS entrants.

Terminer l'application

Il ne reste plus qu'à créer la route Express et les fonctions pour gérer le message SMS entrant et les traductions.

Construire le Webhook

Nous pouvons d'abord configurer le gestionnaire de route. Vonage permet de définir un comportement par défaut du webhook SMS. Dans le panneau des paramètres vous pouvez modifier la méthode HTTP utilisée par défaut. La mienne est réglée sur POST-JSONet je recommande d'utiliser ce paramètre. Si vous ne pouvez pas modifier vos paramètres, le code utilisé ici traitera les trois options.

Default Vonage SMS HTTP Method

Ouvrez le fichier index.js et, en bas, collez le code suivant :

// 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();
  }

};

Ce gestionnaire sera transmis directement à la /message route. Si la méthode HTTP du message entrant est POSTle gestionnaire utilise req.bodyet utilise req.query pour l'option GET et utilise l'option Il vérifie ensuite la charge utile entrante en s'assurant qu'elle contient les informations correctes, puis envoie l'objet à la méthode translateText pour afficher la traduction.

Vous pouvez maintenant ajouter l'itinéraire et les méthodes HTTP à l'application.

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

Le code ci-dessus créera les fichiers GET et POST pour traiter les messages entrants du webhook SMS. Si une autre méthode est utilisée, une réponse 405 - Method Not Allowed sera renvoyée.

Le webhook est prêt à être utilisé et la dernière étape est la traduction proprement dite.

Méthode de traduction

Dans l'étape précédente, nous appelons translateText. Cette étape créera cette méthode.

Vous obtiendrez d'abord vos informations d'identification en utilisant CognitiveServicesCredentials.ApiKeyCredentials. Celui-ci devra être passé en tant que premier paramètre du constructeur TranslatorTextClient comme premier paramètre.

Après avoir créé le client, utilisez la méthode translate pour traduire le texte. Le premier argument est un tableau de langues dans lesquelles vous souhaitez traduire le texte, ce qui vous permet de traduire dans plusieurs langues. Le service détectera automatiquement la langue d'arrivée s'il le peut. Le deuxième argument est un tableau d'objets pour le texte à traduire.

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);
    });
}

Vous pouvez maintenant tester la fonctionnalité en démarrant le serveur et en envoyant un message texte au numéro que vous avez acheté précédemment.

L'objet de réponse complet d'Azure Translator Text contient également de nombreux détails, vous pouvez donc modifier la réponse pour inclure console.dir(translationResult, {depth: null}) pour voir le contenu complet de la réponse.

Récapitulation

Azure Translator Text est un excellent outil pour traduire les messages entrants de Vonage. Cet exemple ne fait qu'effleurer la surface, mais il devrait constituer un bon point de départ. Vous pouvez vous aventurer dans plusieurs directions à partir de là en utilisant cet exemple comme point de départ. Faites-moi part de vos idées pour utiliser ces deux services ensemble.

Vous trouverez une version complète de ce tutoriel à l'adresse suivante https://github.com/nexmo-community/sms-azure-translate-js.

Si vous souhaitez en savoir plus sur les projets Extend que nous avons, vous pouvez consulter le site suivant https://developer.vonage.com/extend pour en savoir plus.