Nachrichtenübermittlung überall mit Node.js

Die Vonage Messages API Sandbox eignet sich hervorragend, um Kommunikationskanäle auszuprobieren, die Ihr Unternehmen vielleicht noch nicht hat. Sobald Sie sehen, wie nützlich WhatsApp, Viber und Facebook Messenger Chats sein können, werden Sie vielleicht dazu inspiriert, sie in die Produktion aufzunehmen.

Es gibt leichte Unterschiede zwischen der Sandbox und der regulären Vonage Messages API. Auch zwischen den einzelnen Kanälen gibt es leichte Unterschiede. In diesem Beispiel werden Sie einen Server erstellen, um Nachrichten von jedem beliebigen Kanal aus zu senden, sei es aus der Sandbox oder der Produktion. Sie können auch den Code auf Glitch nachbauen nachbauen, um Dinge in der Sandbox zu testen und dann schneller in die Produktion zu wechseln.

Voraussetzungen

Sie brauchen nicht viel mehr als Node.js und das Nexmo Node SDK für diesen Code. Allerdings benötigen Sie eine korrekt konfigurierte Anwendung, damit sie funktioniert. Wir werden das im Detail durchgehen, also erstellen Sie erst einmal ein neues Projektverzeichnis und stellen Sie sicher, dass es das hat:

• Node und npm

• Das Beta Nexmo Node.js SDK

• Express.js

• body-parser

• dotenv

In der Befehlszeile können Sie npm init ausführen, um Ihr Projekt vorzubereiten. Dann können Sie die Pakete mit installieren:

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

Vonage API-Konto

Um dieses Tutorial durchzuführen, benötigen Sie ein Vonage API-Konto. Wenn Sie noch keines haben, können Sie sich noch heute anmelden und mit einem kostenlosen Guthaben beginnen. Sobald Sie ein Konto haben, finden Sie Ihren API-Schlüssel und Ihr API-Geheimnis oben auf dem Vonage-API-Dashboard.

Sind Sie bereit, mit dem Bau zu beginnen?

Erleben Sie nahtlose Konnektivität, Echtzeit-Messaging und kristallklare Sprach- und Videoanrufe - alles auf Knopfdruck.

Einrichten

Bevor Sie mit der Programmierung beginnen, gehen Sie zu Ihrem Vonage Entwickler Dashboard. Erstellen Sie zunächst eine neue Anwendung und weisen Sie ihr eine Ihrer Telefonnummern zu. Dies ist ein guter Zeitpunkt, um eine .env Datei in Ihrem Projektverzeichnis zu erstellen. Sie können einige Variablen erstellen und Ihre neue Application ID und Ihren privaten Schlüssel direkt in die Datei einfügen:

Sie finden Ihre API_KEY und API_SECRET auf der Seite Erste Schritte Seite in Ihrem Dashboard. Die SMS_NUM ist die Nummer, die Sie Ihrer Anwendung zugewiesen haben. WHATSAPP_NUM, VIBER_ID, UND FB_ID finden Sie auf der Seite Messages API Sandbox Seite, in den cURL-Beispielbefehlen für die jeweiligen Kanäle. In diesem Beispiel wird davon ausgegangen, dass Sie die Sandbox für alle drei Kanäle nutzen und nicht bereits eigene Accounts haben.

Erstellen Sie nun eine server.js Datei, damit Sie mit der Codierung beginnen können. Der Code in diesem Beispiel verwendet die standardmäßige Express-Server-Einrichtung von Glitch, die ziemlich unkompliziert ist. Sie benötigen Express und die body-parser Middleware und konfigurieren Ihren Server so, dass er statische Seiten aus dem /public Verzeichnis. Sie können ein paar Endpunkte hinzufügen, um eine statische Landing Page zu bedienen und Webhook-Endpunkte für Ihre Anwendung bereitzustellen. Am Ende der Datei können Sie den Server starten:

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

Zwei Mandanten anlegen

Da Sie über die Vonage Messages Sandbox API keine SMS-Nachrichten versenden können, benötigen Sie zwei Clients, wenn Ihre Anwendung sowohl die Kommunikation über SMS als auch über andere Messaging-Kanäle zulässt. Sie können beide unter Ihrer /event Hörer-Funktion hinzufügen:

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

Zunächst benötigen Sie das nexmo Paket, um das SDK zu verwenden. Dann können Sie zwei fast identische Clients erstellen. Der einzige Unterschied zwischen ihnen ist, dass der sandbox Client einen bestimmten Messages Sandbox apiHost Schlüssel verwendet: messages-sandbox.nexmo.com.

Um die Kanäle von der Sandbox zur Produktion an einem Ort zu wechseln, können Sie die Produktionskanäle in einem Array speichern. Wir werden dieses Array im nächsten Schritt überprüfen, um festzustellen, welchen Client wir verwenden sollten.

Bearbeitung von clientseitigen Anfragen

Als Nächstes können Sie Ihren Server so einrichten, dass er Anfragen von einem Formular auf dem Frontend verarbeitet. Mit diesem Formular können Sie einen Kontakt oder Benutzer auswählen, den Kanal, über den die Nachricht gesendet werden soll, und einen Text, der an den Benutzer gesendet werden soll. Der Beispielcode speichert ein Array von Benutzern und deren Kontaktdetails in .data/contacts. Sie sollten Ihre Numbers und Accounts auf der Whitelist in diesem Format angeben:

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

Nachdem Sie Ihre Datendatei angefordert haben, können Sie POST-Anfragen an /send. Sie erhalten die contact, method, und message aus dem Anforderungskörper und verwenden die Kontakt-ID, um das entsprechende Benutzerobjekt zu finden. Sie setzen den Standardmandanten auf sandboxein, prüfen dann, ob method in Ihrem Array von Produktionskanälen ist und ändern Sie den Client zu nexmo wenn ja.

Sie werden bauen auf und von Objekte in separaten Funktionen und übergeben sie zusammen mit dem messagean die Methode des Clients channel.send Methode. Diese Methode gibt einen Fehler zurück, wenn es ein Problem gab, und einige Daten über die gesendete Nachricht. Vergessen Sie nicht, eine Antwort an den Client zurückzuschicken, um die Anfrage abzuschließen.

Das letzte, was dem Server hinzugefügt werden muss, sind die getFrom und getTo Funktionen. Diese sorgen dafür, dass die auf und von Objekte für den gewählten Kanal korrekt strukturiert sind:

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

Eine UI erstellen

Sie benötigen eine Art Schnittstelle, um Ihre Nachrichten zu versenden. In diesem Beispiel wird ein minimales Formular auf der Client-Seite verwendet. Die Beispielwerte sind fest codiert und entsprechen den Objekten, die das Beispiel in .data/contacts.js. Sie könnten noch einen Schritt weiter gehen und die Optionen dynamisch ausfüllen, je nachdem, wie viele Daten Sie haben:

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

Das Skript zum Absenden des Formulars reagiert auf den Klick auf eine allgemeine Schaltfläche. Es holt sich die Werte aus dem Formular und erstellt daraus einen Request Body, den es an Ihren /send Endpunkt. Sobald es Daten zurückerhält, löscht es das Formular:

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

Einige Nachrichten senden

Wenn Sie das Gerät oder die Geräte Ihrer auf der Whitelist stehenden Accounts und SMS-Nummern zur Hand haben, können Sie versuchen, einige Nachrichten über Ihr Formular zu versenden. Sobald Sie sichergestellt haben, dass es funktioniert, können Sie diesen Code anpassen, um Tests mit der Vonage Messages API Sandbox für die Logik Ihrer Anwendung einzurichten.