Erstellen eines interaktiven SMS-Benachrichtigungssystems mit ExpressJS

Das Erstaunliche an SMS ist, dass sie allgegenwärtig ist. Egal, ob Sie ein Smartphone oder ein altes "dummes" Telefon aus den 90ern haben, Sie können SMS-Nachrichten senden und empfangen. Während viele Unternehmen sie nur als Benachrichtigungsdienst nutzen, werden sie wirklich wirklich leistungsfähig, wenn sie einen zweiseitigen Kommunikationskanal zwischen Unternehmen und Kunden ermöglichen.

Benachrichtigungen für einen Paketzusteller

In diesem Tutorial erstellen wir ein interaktives Benachrichtigungssystem für ein Paketzustellunternehmen. Zu diesem Zweck haben wir ein einfaches "Nexmo Mail" App erstellt, die es einem Mitarbeiter des Zustelldienstes ermöglicht, eine Telefonnummer einzugeben und den Empfänger über die Zustellung eines Pakets zu informieren.

Diese App dient als Ausgangspunkt für diesen Lehrgang. Sie ist eine grundlegende Express App, geschrieben in Javascript mit ein paar zusätzlichen Modulen, um die Dinge zu vereinfachen. Wir haben das body-parser Modul hinzugefügt, um unsere Formular-Eingaben zu analysieren, und wir haben Bootstrap hinzugefügt, um unsere Benutzeroberfläche etwas attraktiver zu gestalten. Schließlich haben wir noch einige babel Module hinzugefügt, damit wir moderne ES2015-angehauchtes Javascript schreiben können.

Sie können den Startpunkt dieses Tutorials von Github herunterladen:

Dann besuchen Sie localhost:3000 in Ihrem Browser und geben Sie eine Telefonnummer im internationalen Format ein, z. B. 447755555555.

Den gesamten Code für diesen Ausgangspunkt finden Sie auf der Seite Zahlenform Zweig auf Github. Der gesamte Code, den wir im Folgenden hinzufügen werden, befindet sich in der Zustell-Benachrichtigungen Zweig. Zu Ihrer Bequemlichkeit können Sie alle Änderungen zwischen unserem Start- und Endpunkt auch auf Github einsehen.

Die Vonage SMS API

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.

Die Vonage SMS API bietet Ihnen niedrige Latenzzeiten und eine hohe Zustellbarkeit. Sie ist der zuverlässigste Weg, um Nutzer rund um den Globus zu erreichen. Obwohl sie viele Funktionen hat, werden wir uns nur mit zwei Kernelementen befassen: dem Senden und Empfangen einfacher Textnachrichten. Wir werden diese API nutzen, um den Nutzern eine Benachrichtigung über ihre Zustellung zu senden, ihnen anzubieten, ihren Zustellungszeitpunkt zu ändern, und alle Änderungen, die sie uns senden, abzuhören. Zu diesem Zweck werden wir die folgenden Änderungen in unsere App einfügen:

• Vonage zu unserer App hinzufügen

• Senden Sie eine SMS-Nachricht an die angegebene Nummer mit dem Zustellungszeitraum und den Anweisungen, wie Sie den Zeitraum ändern können.

• Eingehende Textnachrichten des Benutzers abhören und bestätigen, um seinen Platz zu ändern

Der Einfachheit halber werden wir die Optionen in unserer App fest codieren. In Ihrer App werden Sie natürlich die Optionen des Benutzers auf der Grundlage eines erstaunlichen maschinellen Lernalgorithmus bestimmen, den Sie persönlich erfunden haben.

Hinzufügen von Vonage zu unserer App

Um eine SMS-Nachricht über Vonage zu versenden, müssen wir die Option Vonage Modul zum Projekt hinzufügen.

npm install @vonage/server-sdk dotenv --save

Wie Sie sehen können, haben wir auch die dotenv Modul hinzugefügt. Dies dient nur dazu, dass die App die API-Anmeldeinformationen aus einer .env Datei laden kann. Sie finden Ihre Anmeldedaten auf der der Einstellungsseite deines Nexmo Accounts.

# .env
KEY='<your_api_key>'        
SECRET='<your_api_secret>'        
FROM='<phone_number>'

Wir haben auch die Vonage-Telefonnummer, von der aus wir eine SMS-Nachricht senden werden, in die .env Datei hinzugefügt. Sie können eine Nummer über das Vonage-Dashboardkaufen, oder Sie können die vonage-cli Bibliothek verwenden und eine Nummer direkt über die Befehlszeile kaufen.

Richten Sie Ihr Vonage CLI mithilfe diese Anleitung. Sie benötigen nur die Installation und Einrichten Ihrer Konfiguration Schritt.

Wählen Sie eine der Telefonnummern aus der Liste der Telefonnummern, die bei der Eingabe des Befehls angezeigt werden. Ersetzen Sie VONAGE_VIRTUAL_NUMBER in dem unten stehenden Befehl durch die gewählte Telefonnummer und führen Sie den Befehl aus.

Jetzt, wo wir unseren API-Schlüssel, das Geheimnis und die Nexmo-Telefonnummer haben, initialisieren wir den Nexmo-Client.

// app.js - after the other imports
import Vonage from '@nexmo/server-sdk';        
import dotenv from 'dotenv';        

dotenv.config();

const vonage = new Vonage({        
  key: process.env.KEY,        
  secret: process.env.SECRET        
});

Von nun an können wir mit vonage überall in unserer Anwendung verwenden, um die benötigten API-Aufrufe zu tätigen.

Versenden einer SMS-Nachricht

Wenn der Mitarbeiter eine Telefonnummer eingibt, ruft er derzeit den POST /notify Endpunkt auf, der einfach eine Textbestätigung im Browser ausgibt. Wir müssen etwas Code hinzufügen, um eine SMS-Nachricht mit dem geplanten Zustellungszeitpunkt und einer Liste von Optionen zu senden, aus denen der Mitarbeiter wählen kann.

Lassen Sie uns einige Optionen fest codieren, mit denen der Benutzer seinen Zustellungsschlitz ändern kann.

// app.js - after the previous code
const options = [        
  'this Friday',        
  'next Monday',        
  'next Tuesday'        
];

Wir können diese Optionen verwenden, um eine hübsche Textnachricht zu erstellen, die wir an den Benutzer senden.

// app.js - after the previous code
let notification = "Your Vonage Mail delivery is scheduled for tomorrow between " +        
                   "8am and 2pm. If you wish to change the delivery date please " +        
                   "reply by typing 1, 2 or 3:\n\n";        

options.forEach((option, index) => {        
  notification += `${index+1}. for ${option}\n`;        
});

Anmerkung: Wir haben hier nicht die gesamte Nachricht fest einprogrammiert, da wir diese Optionen später noch einmal brauchen werden.

Als Nächstes müssen wir nur noch die Nachricht an die angegebene Telefonnummer senden.

// app.js         
app.post('/notify', (request, response) => {         
  send(request.body.number, notification); // adding this line
  response.send('Notification sent');
});

Wir haben den eigentlichen Nexmo-API-Aufruf in eine send Funktion verpackt, um die Dinge lesbarer und wiederverwendbar zu machen. Die send Funktion wickelt die nexmo.sms.sendTextMessage API und füllt die Nexmo-Telefonnummer vor, die wir zuvor gekauft haben.

// app.js - anywhere outside of an endpoint call      
let send = function(number, message) {        
     
  vonage.message.sendSms(process.env.FROM, number, message, (err, responseData) => {
    if (err) {
        console.log(err);
    } else {
        if(responseData.messages[0]['status'] === "0") {
            console.log("Message sent successfully.");
        } else {
            console.log(`Message failed with error: ${responseData.messages[0]['error-text']}`);
        }
    }
  });
}

Wenn Sie nun versuchen, Ihre eigene Handynummer erneut zu übermitteln, sollten Sie innerhalb von Sekunden eine Textnachricht erhalten.

Eingehende Nachrichten

Unser letzter Trick besteht darin, eine eingehende Nachricht von dem Benutzer zu erhalten, der auf unsere zuvor gesendete Textnachricht antwortet. Dazu müssen wir unsere App öffentlich für einen Nexmo-Webhook verfügbar machen.

Fügen wir zunächst einen Dummy-Endpunkt hinzu, den der Webhook aufrufen soll.

// app.js
app.get('/response', (request, response) => {        
  // TODO: Confirm selection
  response.send('Response processed');        
});

Sie haben einige Optionen, um Ihre App für die Nexmo Webhooks öffentlich erreichbar zu machen. Wenn Sie das Glück haben, eine öffentliche IP-Adresse auf Ihrem Rechner zu haben, sollten Sie bereit sein, loszulegen. Für den Rest von uns gibt es die Möglichkeit, die App zu verteilen, einen SSH-Tunnel zu verwenden, oder meine Lieblingslösung: die Verwendung des erstaunlichen ngrok Werkzeug.

Ihre neue virtuelle Vonage-Nummer und Ihre Webhook-URL müssen miteinander verknüpft werden, damit Vonage weiß, wohin die eingehenden SMS-Nachrichten zu senden sind.

Wie im vorherigen Schritt können Sie Ihre Webhook-URL zu Ihrer virtuellen Vonage-Rufnummer hinzufügen, aber in dieser Anleitung wird gezeigt, wie Sie diese Änderung über das Webportal vornehmen.

Bevor Sie mit der Einrichtung beginnen, sollten Sie Folgendes beachten:

• VONAGE_VIRTUAL_NUMBER: Die Nummer, die Sie zu verwenden versuchen.

• WEBHOOK_URL: Ihre Ngrok-URL, gefolgt von /responseso dass sie etwa so aussehen sollte: http://<your_url>.ngrok.io/response

Gehe zu Numbers-Seite in Ihrem Dashboard.

Klicken Sie auf das Symbol "Bearbeiten" (sieht aus wie ein Stift) in der Spalte "Verwalten". Fügen Sie in das Popup-Fenster unter SMS > Eingehende Webhook-URL Ihre WEBHOOK_URL ein und klicken Sie auf "Speichern".

Wenn Sie hier Fehler erhalten, vergewissern Sie sich bitte, dass Sie die Nexmo-Telefonnummer in Ihrem Account verwenden und dass die URL öffentlich zugänglich ist.

Unser letzter Schritt besteht darin, unseren Endpunkt so zu erweitern, dass er die eingehende Nachricht entgegennimmt, die Antwort analysiert, prüft, ob sie eine unserer Optionen enthält, und eine weitere Textnachricht zur Bestätigung ihrer Auswahl sendet.

// app.js
app.get('/response', (request, response) => {        
  // TODO: store this selection somewhere in your database

  // parse the message the user sent us
  const selection = parseInt(request.query.text) - 1;        
  const day = options[selection];    

  // by default we will warn them to send us a valid response
  let message = "Please select from one of the valid options only.";   

  // if the response was valid though we confirm the selection
  if (day) {        
    message = `Thank you! Your delivery has been rescheduled for ${day}`;        
  }        

  send(request.query.msisdn, message);        
  response.send('Response processed');        
});

Versuchen Sie nun, die Nachricht zu beantworten, die Sie zuvor erhalten haben. Je nach Internetverbindung kann das ein paar Sekunden dauern, aber Sie sollten innerhalb weniger Sekunden eine Bestätigung erhalten. Versuchen Sie auch, mit einigen zufälligen Textnachrichten zu antworten und sehen Sie, was passiert.

Nächste Schritte

Die Vonage SMS API hat eine Menge mehr Optionen als ich hier gezeigt habe, einschließlich Flash Messages, vCard, vCal und vieles mehr. Mir persönlich gefällt es sehr, wie einfach die Vonage CLI Telefonnummern zu kaufen und sie mit einem Endpunkt zu verbinden.

Ich würde gerne wissen, was Sie als nächstes hinzufügen würden? Bitte schreiben Sie mir einen Tweet (ich bin @cbetta) mit Ihren Gedanken und Ideen.