Erstellen eines SMS-Bots auf Glitch mit Hapi.js und der Nexmo Messages API

Die Nexmo Messages API ermöglicht es Ihnen, eine einzige API zu nutzen, um Nachrichten über mehrere Kanäle zu versenden, wie SMS, MMS und verschiedene beliebte soziale Chat-Anwendungen. Sie können eingehende Nachrichten verarbeiten, entscheiden, was mit dem Inhalt der Nachricht geschehen soll, und entsprechend eine Antwort senden. In diesem Blogbeitrag erfahren Sie, wie Sie einen einfachen Bot erstellen, der Ihnen zufällige Fakten über Numbers mitteilen kann.

Glitch ist eine Online-Entwicklungsumgebung, die es Entwicklern ermöglicht, ihre Anwendungen ohne lästige Servereinrichtung zu erstellen und bereitzustellen. Alle Apps auf der Plattform können neu gemischt und personalisiert werden, was sie zu einem perfekten Ort macht, um Code zu teilen und herauszufinden, wie Dinge funktionieren.

Voraussetzungen

Bevor Sie mit diesem Tutorial beginnen, ist es hilfreich, wenn Sie bereits über ein grundlegendes Verständnis von Javascript und Node.js verfügen.

Starten einer Hapi.js-Anwendung auf Glitch

Glitch verbessert ständig seine Benutzeroberfläche und Funktionen. Zum Zeitpunkt der Erstellung dieses Artikels können Sie einen neuen Account auf Glitch erstellen, indem Sie auf die Schaltfläche Anmelden in der oberen rechten Ecke der Seite klicken und entweder Github oder Facebook zur Anmeldung wählen.

Create a new account on Glitch

Danach können Sie auf die Schaltfläche Neues Projekt klicken, um loszulegen. Es gibt 3 Auswahlmöglichkeiten, hallo-webpage, hallo-express und hello-sqlite. Für die Zwecke dieses Tutorials sollten Sie mit hello-express verwenden, da Sie damit eine Umgebung erhalten, in der Node.js und npm bereits installiert sind.

Click New Project button to get started

Um zusätzliche Node-Pakete zu installieren, können Sie auf die Kommandozeile zugreifen, indem Sie auf die Schaltfläche Konsole im Statusfenster klicken.

Click Console button on Glitch status window

Sie können das Statusfenster umschalten, indem Sie auf das Symbol Status oben in der Seitenleiste klicken. Von dort aus können Sie alle Standard-CLI-Befehle in einer Bash-Umgebung verwenden. Der einzige Unterschied ist, dass Sie bei Glitch pnpm anstelle von npm.

Glitch verwendet Express als Standard-Node.js-Framework, aber die Konvertierung der App in Hapi.js ist nicht allzu kompliziert.

Click Status button near the top of the sidebar

Entfernen Sie express und body-parser mit folgendem Befehl aus dem Projekt:

Installieren Sie Hapi.js mit dem folgenden Befehl:

Die Konsole und der Editor synchronisieren sich nicht automatisch, also führen Sie den refresh Befehl aus, um die package.json Datei im Editor zu aktualisieren.

Status of application shows an error

Sie werden auch feststellen, dass der Status Ihrer Anwendung einen Fehler anzeigt. Dies ist zu erwarten, da die Standard server.js Datei immer noch auf express.

Um dies zu beheben, ersetzen Sie den Inhalt von server.js durch den folgenden Code:

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

Wenn Sie nun versuchen, Ihre Anwendung aufzurufen, sollte sie eine leere Seite mit den Worten Hallo Welt.

Bereitstellen statischer Dateien

Auch wenn die Nachrichten größtenteils auf der Serverseite verarbeitet werden, wäre es doch schön, eine einfache Landing Page für Ihren Bot zu haben. Zu diesem Zweck können wir eine einfache HTML-Seite anzeigen, wenn die Benutzer versuchen, über den Browser auf Ihre Anwendung zuzugreifen.

inert ist ein Plugin für statische Datei- und Verzeichnis-Handler für hapi.js. Installieren Sie es in Ihr Projekt über die Konsole mit dem folgenden Befehl:

pnpm install inert --save

Um die Dinge weniger kompliziert zu machen, legen Sie alle erforderlichen Dateien für die Landing Page in den Ordner public Ordner. Sie können die index.html Datei aus dem Ordner views Ordner in den Ordner public Ordner verschieben, indem Sie den Dateipfad in der Seitenleiste umbenennen.

Move files into public folder

Sie können dies auch über die Befehlszeile in der Konsole tun.

Sobald das erledigt ist, modifizieren Sie die server.js Datei so, dass sie Inert verwendet und die Dateien aus dem public Ordner wie folgt:

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

Jetzt wird anstelle von Hallo Weltsollte Ihre Anwendung die Standard-Glitch index.html Datei. Es steht Ihnen frei, diese Datei nach Belieben anzupassen.

Erste Schritte mit Nexmo APIs

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.

In diesem Lernprogramm wird auch eine virtuelle Telefonnummer verwendet. Um eine zu erwerben, gehen Sie zu Rufnummern > Rufnummern kaufen und suchen Sie nach einer Nummer, die Ihren Anforderungen entspricht.

Sind Sie bereit, mit dem Bau zu beginnen?

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

API credentials on the dashboard

Gehen Sie zurück zu Ihrer Glitch-App und installieren Sie den Nexmo REST API-Client für Node.js mit dem folgenden Befehl:

pnpm install nexmo@beta --save

Und wenn Sie Ihr Projekt aktualisieren, sollte Ihr package.json sollte jetzt so aussehen:

Glitch status window

Jetzt sind Sie bereit, einen eigenen Bot zu erstellen. In diesem Tutorial wird beschrieben, wie man einen Bot erstellt, der zufällige Informationen über Numbers zurückgibt, indem man NumbersAPIdie eine API ist, die interessante Fakten über Zahlen zurückgibt. Sie können aber auch andere APIs verwenden, um die Antworten Ihres Bots zu generieren.

Versenden und Empfangen von Nachrichten per SMS

Eine virtuelle Rufnummer erhalten

Um SMS über die Messages API zu senden und zu empfangen, benötigen Sie außerdem eine virtuelle Telefonnummerdie wie eine normale Telefonnummer ist, nur dass sie nicht an eine physische Telefonleitung oder ein Gerät gebunden ist.

Sie können eine lokale Nummer in einem Land Ihrer Wahl wählen, die unterstützten Funktionen und die Art der Nummer, sei es eine Mobilfunknummer, eine Festnetznummer oder eine gebührenfreie Nummer.

Buy numbers

Sobald Sie Ihre Nummer haben, erscheint sie in der Rubrik Ihre Numbers Abschnitt. Klicken Sie auf das Bleistift-Symbol unter dem ganz rechten Verwalten Spalte, um Ihre eingehende Webhook-URL zu konfigurieren. Dies ist für den Empfang von SMS erforderlich. Wenn eine SMS an Ihre Nummer gesendet wird, wird eine POST Anfrage an diese URL mit der Nutzlast der Nachricht gesendet.

inbound webhook URL

Erstellen einer Anwendung "Nachrichten

Navigieren Sie dann zur Seite Erstellen einer Anwendung Seite unter dem Menüpunkt Nachrichten und Versendung in der Seitenleiste. Geben Sie den Namen Ihrer Anwendung und die Webhook-URLs mit der URL Ihrer Glitch-App als Host ein. Außerdem müssen Sie ein öffentliches/privates Schlüsselpaar generieren, das Sie zum Herunterladen der private.key Datei herunterzuladen.

Generate key

Klicken Sie dann auf das orangefarbene Anwendung erstellen Schaltfläche. Auf dem nächsten Bildschirm können Sie Ihre virtuelle Nummer mit Ihrem Antrag verknüpfen, indem Sie auf die Schaltfläche verknüpfen. Schaltfläche unter dem Menüpunkt Verwalten Spalte klicken.

Create application

Schließlich werden Sie gefragt, ob Sie externe Konten verknüpfen möchten, aber das können Sie vorerst lassen.

Link any external accounts

Zum Hochladen der private.key Datei in Glitch hochzuladen und sie geheim zu halten, können Sie die Datei in einem .data Ordner ablegen. Der Inhalt dieses Ordners ist nur für Sie und alle vertrauenswürdigen Mitarbeiter, die Sie dem Projekt hinzufügen, sichtbar. Kopieren Sie den Inhalt der Datei private.key den Sie zuvor heruntergeladen haben, in diese neue Datei.

Private Key

Einrichtung der Anmeldeinformationen

Glitch unterstützt Umgebungsvariablen über die .env Datei, die eine sichere Möglichkeit bietet, Ihre API-Anmeldeinformationen und andere private Daten für Ihr Projekt zu speichern. Legen Sie Ihren API-Schlüssel, Ihr Geheimnis, die virtuelle Nexmo-Nummer, die ID der Nachrichtenanwendung und den Pfad für den privaten Schlüssel in der .env Datei ein.

Achten Sie darauf, sie in Anführungszeichen einzuschließen, da jeder Wert eine Zeichenkette sein muss. Wir werden auf sie verweisen, um eine neue Nexmo-Instanz zu initialisieren, die wir zum Senden von SMS-Nachrichten verwenden.

Set up .env file

Fügen Sie Ihre API-Anmeldedaten in die server.js Datei hinzu und initialisieren Sie eine neue Nexmo-Instanz.

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

Empfangen einer eingehenden SMS

Um eine eingehende SMS zu empfangen, müssen Sie eine Route hinzufügen, die die eingehende POST Anfrage, die ausgelöst wird, wenn jemand eine SMS an Ihre virtuelle Nummer sendet. Fügen Sie die folgende Route zu Ihrer server.js Datei hinzu:

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

Beachten Sie, dass der path mit der URL des eingehenden Webhooks für Ihre virtuelle Nummer übereinstimmen muss, die Sie zuvor eingerichtet haben. Um sicherzustellen, dass alles richtig angeschlossen ist, senden Sie eine SMS an Ihre virtuelle Nummer. Sie sollten die Nutzlast der Nachricht im Statusfenster sehen.

Message payload printed in the status window

Versenden einer ausgehenden SMS-Antwort

Nun müssen Sie die Nutzlast der Nachricht verarbeiten, indem Sie den Inhalt der Nachricht extrahieren und damit einen zufälligen Fakt aus NumbersAPI. Sie können eine Funktion schreiben, die prüft, ob der Inhalt der SMS eine Zahl ist. Wenn nicht, können Sie eine Antwort zurückgeben, die nach einer Zahl fragt.

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

Ersetzen Sie die Zeile, in der console.log(payload) durch einen Aufruf Ihrer neuen parseSms() Funktion. Sie werden feststellen, dass ich, wenn der Inhalt der Nachricht eine Zahl ist, eine andere Funktion aufrufe, die getFactSms(). Dies wird die Funktion sein, die die Numbers-API für die zufällige Zahl aufruft, die Sie an den Benutzer zurücksenden werden.

Hierfür müssen Sie eine grundlegende GET Anfrage stellen. Es gibt eine Reihe von Bibliotheken, die dies tun können, aber da dies eine relativ einfache Anfrage ist, können Sie das native Node.js http Modul verwenden.

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

Die letzte Funktion smsResponse() löst das Senden des Zufallsfaktors an den Benutzer aus.

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

Und das war's. Sie haben jetzt einen einfachen SMS-Bot, der mit zufälligen Fakten über die Nummer antwortet, die Sie ihm senden.