La messagerie partout avec Node.js

L'API Sandbox de Vonage Messages API Sandbox de Vonage est idéal pour essayer des canaux de communication que votre organisation n'a peut-être pas encore. Une fois que vous aurez constaté l'utilité de WhatsApp, Viber et Facebook Messenger, vous aurez peut-être envie de les ajouter à votre production.

Il existe de légères différences entre le bac à sable et la version normale de l'API Messages de Vonage. API Messages Vonage. Il existe également de légères différences entre les différents canaux. Dans cet exemple, vous créerez un serveur pour envoyer des messages à partir de n'importe quel canal, du bac à sable ou de la production. Vous pouvez également remixer le code sur Glitch pour commencer à tester des choses dans le bac à sable, puis passer à la production plus rapidement.

Conditions préalables

Vous n'avez pas besoin de beaucoup plus que Node.js et le Nexmo Node SDK pour ce code. Cependant, vous aurez besoin d'une application correctement configurée pour qu'elle fonctionne. Nous verrons cela en détail, mais pour l'instant, créez un nouveau répertoire de projet et assurez-vous qu'il est bien configuré :

• Node et npm

• Le SDK Nexmo Node.js en version bêta

• Express.js

• analyseur de corps

• dotenv

À partir de la ligne de commande, vous pouvez exécuter npm init pour préparer votre projet. Vous pouvez ensuite installer les paquets avec :

> npm install nexmo@beta express body-parser dotenv -s

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.

S'installer

Avant de commencer à coder, allez dans votre tableau de bord du développeur de Vonage. Tout d'abord, créez une nouvelle application et veillez à lui attribuer l'un de vos numéros de téléphone. C'est le bon moment pour créer un fichier .env dans le répertoire de votre projet. Vous pouvez créer quelques variables et coller votre nouvel ID d'application et votre clé privée directement dans le fichier :

Vous pouvez trouver votre API_KEY et API_SECRET sur la page Commencer dans votre tableau de bord. Le numéro SMS_NUM est le numéro que vous avez attribué à votre application. WHATSAPP_NUM, VIBER_ID, , ET FB_ID peuvent être trouvés sur la page Bac à sable de l'API Messages dans les exemples de commandes cURL pour les canaux respectifs. Cet exemple suppose que vous utilisez le bac à sable pour les trois canaux et que vous n'avez pas déjà vos propres Account.

Créez maintenant un fichier server.js afin de pouvoir commencer à coder. Le code de cet exemple utilise la configuration par défaut du serveur Express de Glitch, qui est assez simple. Vous aurez besoin d'Express et de l'intergiciel body-parser, et vous configurerez votre serveur pour qu'il serve des pages statiques depuis le répertoire /public . Vous pouvez ajouter quelques points de terminaison pour servir une page d'atterrissage statique et fournir des points de terminaison webhook pour votre application. À la fin du fichier, vous pouvez démarrer le serveur :

const express = require("express");
const app = express();
const bodyParser = require('body-parser');

app.use(express.static('public'));
app.use(bodyParser.json());

// https://expressjs.com/en/starter/basic-routing.html
app.get("/", (request, response) => {
  response.sendFile(__dirname + "/views/index.html");
});

app.post('/answer', function(req, res) {
  // this is where contacts could send you new communication info
  res.status(204).end();
});

// this endpoint receives information about events in the app
app.post('/event', function(req, res) {
  res.status(204).end();
});

// TODO: Add some messaging logic here!

// listen for requests :)
const listener = app.listen(process.env.PORT, () => {
  console.log("Your app is listening on port " + listener.address().port);
});

Créer deux clients

Comme vous ne pouvez pas envoyer de messages SMS à partir de l'API Messages Sandbox de Vonage, vous aurez besoin de deux clients si votre application permet de communiquer par SMS ainsi que par d'autres canaux de messagerie. Vous pouvez ajouter les deux sous votre fonction /event listener :

// create Nexmo clients
const Nexmo = require('nexmo');

// this client uses your real SMS, WhatsApp, Viber, and Messenger accounts
const nexmo = new Nexmo({
  apiKey: process.env.API_KEY,
  apiSecret: process.env.API_SECRET,
  applicationId: process.env.APP_ID,
  privateKey: process.env.PRIVATE_KEY 
});
// this client uses the Message API Sandbox, for testing only
const sandbox = new Nexmo({
  apiKey: process.env.API_KEY,
  apiSecret: process.env.API_SECRET,
  applicationId: process.env.APP_ID,
  privateKey: process.env.PRIVATE_KEY 
}, {
  apiHost: 'messages-sandbox.nexmo.com'
});

// add channels to this array to use a production account
// in this example, only SMS is a "real" channel, the rest use the sandbox
const prodChannels = ['SMS'];

Tout d'abord, vous aurez besoin du paquet nexmo pour utiliser le SDK. Ensuite, vous pouvez créer deux clients presque identiques. La seule différence entre eux est que le client sandbox utilise une clé spécifique de l'Environnement de test des messages apiHost spécifique : messages-sandbox.nexmo.com.

Pour passer du bac à sable à la production en un seul endroit, vous pouvez stocker les canaux de production dans un tableau. Nous vérifierons ce tableau à l'étape suivante pour déterminer quel client nous devons utiliser.

Traiter les demandes du côté du client

Ensuite, vous pouvez configurer votre serveur pour qu'il traite les demandes provenant d'un formulaire sur le front-end. Ce formulaire vous permettra de sélectionner un contact ou un utilisateur, le canal sur lequel lui envoyer un message et un texte à lui envoyer. Le code de l'exemple stocke un tableau d'utilisateurs et leurs coordonnées dans le fichier .data/contacts. Vous devez fournir vos numéros et vos Account sur liste blanche au format :

module.exports = [
  {
    id: 1, 
    name: 'Template McTemplateypants',
    sms: '441234567890',
    viber: '441234567890',
    whatsapp: '441234567890',
    messenger: '1234567890123456'
  }
];

Après avoir demandé votre fichier de données, vous pouvez traiter les requêtes POST vers /send. Vous obtiendrez le fichier contact, method, et message à partir du corps de la requête, et vous utiliserez l'ID du contact pour trouver l'objet utilisateur correspondant. Vous définirez le client par défaut comme étant sandboxpuis vous vérifierez si method se trouve dans votre tableau de canaux de production et changez le client en nexmo si c'est le cas.

Vous construirez à et de dans des fonctions séparées et les transmettre, ainsi que l'objet messageà la méthode channel.send du client. Cette méthode renverra une erreur en cas de problème, ainsi que des données sur le message envoyé. N'oubliez pas de renvoyer une réponse au client pour clore la demande.

La dernière chose à ajouter au serveur sont les éléments getFrom et getTo sont la dernière chose à ajouter au serveur. Elles permettent de s'assurer que les à et de sont structurés correctement pour le canal sélectionné :

const users = require('./.data/contacts');

// handle the form submission from the client
app.post("/send", function(req, res) {
  var contact = req.body.contact;
  var user = users.find(u => u.id == contact);
  var method = req.body.method;
  var message = req.body.message;
  var client = sandbox;
  
  if (prodChannels.includes(method)) {
    client = nexmo;
  }
  
  client.channel.send(getTo(user, method), getFrom(method), {
    content: {
      type: 'text',
      text: message
    }
  }, (e, data) => {
    if (e) {
      console.error(e);
    }
    console.log(data);
  });
  
  res.send({data: 'sent'});
});

function getFrom(method) {
  if (method == 'SMS') {
    return { "type": 'sms', "number": process.env.SMS_NUM };
  }
  if (method == 'WhatsApp') {
    return { "type": 'whatsapp', "number": process.env.WHATSAPP_NUM };
  }
  if (method == 'Viber') {
    return { "type": 'viber_service_msg', "id": process.env.VIBER_ID };
  }
  if (method == 'FB') {
    return { "type": 'messenger', "id": process.env.FB_ID };
  }
}

function getTo(user, method) {
  if (method == 'SMS') {
    return { "type": 'sms', "number": user.sms };
  }
  if (method == 'WhatsApp') {
    return { "type": 'whatsapp', "number": user.whatsapp };
  }
  if (method == 'Viber') {
    return { "type": 'viber_service_msg', "number": user.viber };
  }
  if (method == 'FB') {
    return { "type": 'messenger', "id": user.messenger };
  }
}

Construire une interface utilisateur

Vous aurez besoin d'une interface pour envoyer vos messages. Cet exemple utilise un formulaire minimal côté client. Les valeurs de l'exemple sont codées en dur et correspondent aux objets que l'exemple a dans .data/contacts.js. Vous pourriez aller plus loin et remplir les options dynamiquement, en fonction de la quantité de données dont vous disposez :

<form>
      <label>Contact:
        <select id="contact">
          <option value="1">Angie</option>
          <option value="2">Benji</option>
          <option value="3">CJ</option>
          <option value="4">Digby</option>
        </select>
      </label>
      <label>Method:
        <select id="method">
          <option>SMS</option>
          <option>WhatsApp</option>
          <option>Viber</option>
          <option value="FB">Facebook Messenger</option>
        </select>
      </label>
      <section>
        <label for="message">Message:</label>
        <textarea id="message"></textarea>
        <button>Send</button>
      </section>
    </form>

Le script qui soumet le formulaire répond au clic d'un bouton générique. Il récupère les valeurs du formulaire et construit un corps de requête avec celles-ci, qu'il soumet à votre point de terminaison /send point de terminaison. Dès qu'il reçoit des données en retour, il efface le formulaire :

<script>
      const contact = document.querySelector('#contact');
      const method = document.querySelector('#method');
      const message = document.querySelector('#message');

      document.querySelector('button').onclick = function(e) {
        let body = JSON.stringify({
            contact: contact.value,
            method: method.value,
            message: message.value
          });

        fetch('/send', {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json'
          },
          body: body
        })
        .then(response => response.json())
        .then(data => {
          contact.value = '';
          method.value = '';
          message.value = '';
        });
        return false;
      };
    </script>

Envoyer des messages

Avec l'appareil ou les appareils de vos comptes et numéros de SMS sur liste blanche à portée de main, vous pouvez essayer d'envoyer quelques messages via votre formulaire. Une fois que vous avez vérifié que cela fonctionnait, vous pouvez adapter ce code pour mettre en place des tests avec l'API Sandbox de Vonage Messages pour la logique de votre application.