Créer un robot SMS sur Glitch avec Hapi.js et l'API Messages de Nexmo

L'API Nexmo Messages API vous permet d'utiliser une API unique pour envoyer des messages via plusieurs canaux, tels que les SMS, les MMS et plusieurs applications de chat social populaires. Vous pouvez gérer les messages entrants, décider quoi faire avec le contenu du message et envoyer une réponse en conséquence. Cet article de blog explique comment construire un bot simple qui peut vous dire des faits aléatoires sur les Numbers.

Glitch est un environnement de développement en ligne qui permet aux développeurs de créer et de déployer leurs applications sans avoir à se soucier de l'installation d'un serveur. Toutes les applications de la plateforme peuvent être remixées et personnalisées, ce qui en fait l'endroit idéal pour partager du code et comprendre comment les choses fonctionnent.

Conditions préalables

Avant de commencer ce tutoriel, il serait utile de posséder des connaissances de base en Javascript et Node.js.

Démarrer une application Hapi.js sur Glitch

Glitch améliore constamment son interface et ses fonctionnalités. Au moment où nous écrivons ces lignes, vous pouvez créer un nouveau compte sur Glitch en cliquant sur le bouton S'identifier dans le coin supérieur droit de la page, et choisissez Github ou Facebook pour vous connecter.

Create a new account on Glitch

Ensuite, vous pouvez cliquer sur le bouton Nouveau projet pour commencer. Trois choix s'offrent à vous, bonjour-webpage, hello-express et hello-sqlite. Pour les besoins de ce tutoriel, optez pour hello-express car cela vous donne un environnement avec Node.js et npm déjà installés.

Click New Project button to get started

Pour installer des paquets de nœuds supplémentaires, vous pouvez accéder à la ligne de commande en cliquant sur le bouton Console dans la fenêtre d'état.

Click Console button on Glitch status window

Vous pouvez faire basculer la fenêtre d'état en cliquant sur le bouton Statut en haut de la barre latérale. À partir de là, vous pouvez utiliser toutes les commandes CLI standard dans un environnement bash. La seule différence est que sur Glitch, vous utiliserez pnpm au lieu de npm.

L'erreur utilise Express comme framework Node.js par défaut, mais en convertissant l'application à Hapi.js n'est pas trop compliquée.

Click Status button near the top of the sidebar

Retirer express et body-parser du projet à l'aide de la commande suivante :

Installez Hapi.js avec la commande suivante :

La console et l'éditeur ne se synchronisent pas automatiquement, il faut donc lancer la commande refresh pour mettre à jour le fichier package.json dans l'éditeur.

Status of application shows an error

Vous remarquerez également que l'état de votre application indique une erreur. C'est normal, car le fichier par défaut server.js fait toujours référence à express.

Pour y remédier, remplacez le contenu de server.js par le code suivant :

const Hapi = require('hapi');

// Create a server with a host and port
const server = Hapi.server({
  port: 8000
});

const init = async () => {
  // Add a basic route
  server.route({
    method: 'GET',
    path: '/',
    handler: function(request, h) {
      return 'hello world';
    }
  });
  
  // Start the server
  await server.start();
  console.log('Server running at:', server.info.uri);
};

init();

Maintenant, lorsque vous essayez de visualiser votre application, celle-ci doit afficher une page blanche avec les mots bonjour le monde.

Servir les fichiers statiques

Même si les messages sont en grande partie gérés par le serveur, il serait intéressant d'avoir une sorte de page d'accueil pour votre robot. Pour ce faire, nous pouvons afficher une page HTML de base lorsque les utilisateurs tentent d'accéder à votre application via le navigateur.

inert est un plugin de gestion des fichiers statiques et des répertoires pour hapi.js. Installez-le dans votre projet via la console avec la commande suivante :

pnpm install inert --save

Pour simplifier les choses, placez tous les fichiers nécessaires à la page d'atterrissage dans le dossier public dans le dossier Vous pouvez déplacer le fichier index.html du dossier views vers le dossier public en renommant le chemin d'accès au fichier dans la barre latérale.

Move files into public folder

Vous pouvez également le faire via la ligne de commande de la console.

Une fois que c'est fait, modifiez le fichier server.js pour utiliser Inert et servir les fichiers du dossier public comme suit :

const Hapi = require('hapi');
const Path = require('path');
const Inert = require('inert');

// Create a server with a host and port
const server = Hapi.server({
  port: 8000,
  routes: {
    files: {
      relativeTo: Path.join(__dirname, 'public')
    }
  }
});

const init = async () => {
  await server.register(Inert);

  // Add the route
  server.route({
    method: 'GET',
    path: '/{param*}',
    handler: {
      directory: {
        path: '.',
        redirectToSlash: true,
        index: true
      }
    }
  });
  
  // Start the server
  await server.start();
  console.log('Server running at:', server.info.uri);
};

init();

Maintenant, au lieu de bonjour le mondevotre application devrait servir le fichier Glitch index.html par défaut. Vous êtes libre de personnaliser ce fichier comme bon vous semble.

Démarrer avec les API Nexmo

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.

This tutorial also uses a virtual phone number. To purchase one, go to Numbers > Buy Numbers and search for one that meets your needs.

Ready to start building?

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

API credentials on the dashboard

Retournez dans votre application Glitch et installez le client Nexmo REST API client pour Node.js avec la commande suivante :

pnpm install nexmo@beta --save

Et si vous rafraîchissez votre projet, votre package.json devrait maintenant ressembler à ceci :

Glitch status window

Vous êtes maintenant prêt à construire votre propre robot. Ce tutoriel décrit comment construire un robot qui renvoie des informations aléatoires sur les nombres, en utilisant l'API NumbersAPIqui est une API qui renvoie des informations intéressantes sur les nombres. Mais vous êtes libre d'utiliser d'autres API pour générer les réponses de votre robot.

Envoi et réception de messages par SMS

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

Pour envoyer et recevoir des SMS via l'API Messages, vous aurez également besoin d'un numéro de téléphone virtuelqui ressemble à n'importe quel numéro de téléphone standard, sauf qu'il n'est pas lié à une ligne téléphonique physique ou à un appareil.

Vous pouvez choisir un numéro local pour le pays de votre choix, les fonctions prises en charge et le type de numéro, qu'il s'agisse d'un numéro mobile, d'un numéro fixe ou d'un numéro vert.

Buy numbers

Une fois que vous aurez obtenu votre numéro, il apparaîtra dans la rubrique Vos Numbers dans la section Vos numéros. Cliquez sur l'icône représentant un crayon sous l'élément le plus à droite de l'écran. Gérer pour configurer l'URL de votre webhook entrant. Cette URL est nécessaire pour recevoir des SMS. Lorsqu'un SMS est envoyé à votre numéro, une demande est envoyée à cette URL avec la charge utile du message. POST est envoyée à cette URL avec la charge utile du message.

inbound webhook URL

Création d'une application Messages

Ensuite, naviguez jusqu'à la page Créer une application sous la rubrique Messages et répartition dans la barre latérale. Renseignez le nom de votre application et les URL des webhooks avec l'URL de votre application Glitch en tant qu'hôte. Vous devrez également générer une paire de clés publiques/privées, ce qui vous invitera à télécharger le fichier private.key fichier.

Generate key

Cliquez ensuite sur le bouton orange Créer une application orange. L'écran suivant vous permet de lier votre numéro virtuel à votre demande en cliquant sur le bouton lier sous le bouton Gérer dans la colonne Gérer.

Create application

Enfin, il vous sera demandé si vous souhaitez lier des comptes externes, mais vous pouvez laisser cette option pour l'instant.

Link any external accounts

Pour télécharger le fichier private.key Glitch et le garder secret, vous pouvez créer le fichier dans un dossier. .data dossier. Le contenu de ce dossier ne sera visible que par vous et par les collaborateurs de confiance que vous ajoutez au projet. Copiez le contenu du fichier private.key que vous avez téléchargé plus tôt dans ce nouveau fichier.

Private Key

Configuration des informations d'identification

Glitch prend en charge les variables d'environnement via le fichier .env qui est un moyen sûr de stocker vos identifiants API et d'autres données privées pour votre projet. Configurez votre clé API, votre secret, votre numéro virtuel Numbers, l'ID de l'application Messages et le chemin d'accès à la clé privée dans le fichier .env dans le fichier

Veillez à les mettre entre guillemets, car chaque valeur doit être une chaîne de caractères. Nous y ferons référence pour initialiser une nouvelle instance Nexmo, que nous utiliserons pour envoyer des SMS.

Set up .env file

Ajoutez vos identifiants API au fichier server.js et initialiser une nouvelle instance Nexmo.

const NEXMO_API_KEY = process.env.NEXMO_API_KEY;
const NEXMO_API_SECRET = process.env.NEXMO_API_SECRET;
const NEXMO_APPLICATION_ID = process.env.NEXMO_APPLICATION_ID;
const NEXMO_APPLICATION_PRIVATE_KEY_PATH = process.env.NEXMO_APPLICATION_PRIVATE_KEY_PATH;
const NEXMO_NUMBER = process.env.NEXMO_NUMBER;

const Nexmo = require('nexmo');

const nexmo = new Nexmo({
  apiKey: NEXMO_API_KEY,
  apiSecret: NEXMO_API_SECRET,
  applicationId: NEXMO_APPLICATION_ID,
  privateKey: NEXMO_APPLICATION_PRIVATE_KEY_PATH
});

Réception d'un SMS entrant

Pour recevoir un SMS entrant, vous devez ajouter une route pour gérer la demande entrante qui est déclenchée lorsque quelqu'un envoie un SMS à votre numéro virtuel. POST qui est déclenchée lorsque quelqu'un envoie un SMS à votre numéro virtuel. Ajoutez la route suivante à votre fichier server.js la route suivante :

server.route({
  method: 'POST',
  path: '/inbound-sms',
  handler: (request, h) => {
    const payload = request.payload;
    console.log(payload);
    return h.response().code(200); 
  }
});

Notez que le paramètre path doit correspondre à l'URL du webhook entrant pour votre numéro virtuel, que vous avez configuré précédemment. Pour vous assurer que tout est bien branché, envoyez un SMS à votre numéro virtuel. Le contenu du message doit s'afficher dans la fenêtre d'état.

Message payload printed in the status window

Envoi d'une réponse SMS sortante

Vous devez maintenant traiter les données utiles du message en extrayant le contenu du message et en l'utilisant pour extraire un fait aléatoire de l'interface NumbersAPI. Vous pouvez écrire une fonction qui vérifie si le contenu du SMS est un nombre. Si ce n'est pas le cas, vous pouvez renvoyer une réponse qui demande un nombre.

function parseSms(payload) {
  const message = payload.text;
  const phone = payload.msisdn;
  
  const isNum = /^\d+$/.test(message);
  console.log(isNum);
  
  if (isNum) {
    getFactSms(message, phone);
  } else {
    smsResponse("Sorry, but Numbot can only give you facts about whole numbers. Try something like 42.", phone);
  }
}

Remplacez la ligne qui dit console.log(payload) par un appel à votre nouvelle fonction parseSms() fonction. Vous remarquerez que si le contenu du message est un nombre, j'appelle une autre fonction appelée getFactSms(). C'est cette fonction qui appellera l'API Numbers pour le fait aléatoire que vous renverrez à votre utilisateur.

Pour ce faire, vous devez effectuer une GET de base. Il existe un certain nombre de bibliothèques qui peuvent le faire, mais étant donné qu'il s'agit d'une requête relativement simple, vous pouvez utiliser le module natif Node.js http module .

const http = require('http');

function getFactSms(number, phone) {
  return http.get(
    {
      host: 'numbersapi.com',
      path: '/' + number
    },
    function(response) {
      let fact = '';
      response.on('data', function(d) {
        fact += d;
      });
      response.on('end', function() {
        smsResponse(fact, phone);
      });
    }
  );
}

La dernière fonction smsResponse() déclenche l'envoi du fait aléatoire à l'utilisateur.

function smsResponse(fact, phone) {
  nexmo.channel.send(
    { "type": "sms", "number": phone },
    { "type": "sms", "number": NEXMO_NUMBER },
    {
      "content": {
        "type": "text",
        "text": fact
      }
    },
    (err, data) => { console.log(data.message_uuid); }
  )
}

Et le tour est joué. Vous avez maintenant un robot SMS de base qui répond avec des faits aléatoires sur le numéro que vous lui envoyez.