Wie man SMS-Benachrichtigungen im Browser mit Angular, Node.JS und Ably anzeigt

Die Vonage SMS API ermöglicht es Ihnen, über eine virtuelle Nummer, die Sie bei Vonage mieten können, weltweit Nachrichten zu senden und zu empfangen. In diesem Tutorial sehen wir, wie Sie Node.js und Express verwenden können, um eine SMS zu empfangen, sie über Ably an einen Webbrowser zu senden und dann Angular zu verwenden, um sie als Benachrichtigung in einer Single Page Application anzuzeigen.

Bevor Sie beginnen

Bevor wir beginnen, brauchen Sie ein paar Dinge:

• Das grundlegende Verständnis von JavaScript und Angular

• Node.js auf Ihrem Rechner installiert

• ngrok auf Ihrem Rechner installiert

• An Geschickt Konto

• Der Einstiegscode von Github

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.

Den Startcode von Github herunterladen

Als erstes klonen wir den Quellcode des Tutorials und wechseln in den Getting-Started-Zweig

Als Nächstes werden wir die Abhängigkeiten installieren, die unser Code benötigt. Es gibt eine Node.js-Anwendung mit Express, body-parser und Ably und eine Angular-App, die mit der Angular-CLI generiert wurde.

Schreiben von Webhook-Endpunkten mit Express

Um eine SMS von Vonage zu erhalten, müssen Sie einen Webhook-Endpunkt (URL) definieren und diesen dann mit Ihrer virtuellen Nummer von Vonage verknüpfen. Immer wenn Ihre Nummer eine SMS erhält, wird Vonage diese an den Webhook-Endpunkt senden. Also erstellen wir diesen Endpunkt mit Express.

In dem Code, den Sie gerade heruntergeladen haben, gibt es eine Datei namens server.jsdie einen Standard-Express-Server enthält, der auf Port 3000 lauscht. Er sollte wie folgt aussehen:

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

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({extended: true}));

const server = app.listen(3000, () => {
	console.log('Express server listening on port %d in %s mode', server.address().port, app.settings.env);
});

Jetzt erstellen wir eine HTTP-POST-Route für die Bearbeitung von Anfragen an den Server. Fügen Sie am Ende der Datei einfach hinzu:

app.post('/inbound', (req, res) => {
	handleParams(req.body, res);
});

Die Methode handleParams Methode ist noch nicht definiert, also werden wir sie implementieren. Wir fügen einige Validierungen hinzu, um festzustellen, ob wir eine gültige SMS-Nachricht erhalten haben, und wenn das der Fall ist, werden wir die eingehenden Daten vor dem Senden zuordnen. Wir müssen einen 200 OK Statuscode zurückgeben, damit das Vonage-Dashboard ihn als gültige Webhook-URL erkennen kann.

function handleParams(params, res) {
	if (!params.to || !params.msisdn) {
    		console.log('This is not a valid inbound SMS message!');
	} else {
    		console.log('Success');
    		let incomingData = {
        		messageId: params.messageId,
        		from: params.msisdn,
        		text: params.text,
        		type: params.type,
        		timestamp: params['message-timestamp']
    	};
    	res.send(incomingData);
	}

	res.status(200).end();
}

Sie können nun den Server starten, der auf localhost:3000 verfügbar wird:

$ node server.js

Registrieren eines Webhook-Endpunkts bei Vonage

Nun, da Sie Ihren Webhook-Endpunkt geschrieben haben, ist es an der Zeit, ihn mit Ihrer Vonage-Nummer zu verknüpfen. Während der Entwicklung ist es allerdings mühsam, die laufende Arbeit immer wieder neu zu verteilen. Verwenden wir also ngrok um den Webhook-Endpunkt, den wir gerade auf unserem lokalen Rechner geschrieben haben, als öffentliche URL bereitzustellen! Für detailliertere Anweisungen siehe Aaron's Beitrag, der erklärt wie man seinen lokalen Entwicklungsserver mit der Vonage API über einen ngrok Tunnel verbindet.

Sobald Sie ngrok installiert haben, führen Sie es auf Port 3000 aus, demselben Port wie der Express-Server:

start ngrok in terminal

Ihr Express-Server (localhost:3000) hat nun eine ngrok-URL (https://3be084f6.ngrok.io), die während dieses Tutorials als öffentlicher Webhook-Endpunkt verwendet werden kann.

Einrichten des Webhook-Endpunkts mit Vonage

Damit das Vonage Dashboard die URL als Webhook-Endpunkt erkennt, muss es einen 200 OK-Statuscode zurückgeben, also stellen Sie sicher, dass Ihr Server läuft. Ist dies nicht der Fall, können Sie zum Stammverzeichnis des Codes gehen, den Sie von Github heruntergeladen haben, und ihn über das Terminal ausführen:

Melden Sie sich bei Ihrem Vonage-Konto an und gehen Sie zu Ihre Nummern. Klicken Sie im Abschnitt "Verwalten" Ihrer Nummer auf "Bearbeiten". In dem daraufhin angezeigten Modal legen wir den soeben erstellten Webhook fest. Geben Sie im Abschnitt "SMS" die ngrok-URL mit der eingehenden Route (https://3be084f6.ngrok.io/inbound) in das Feld "Webhook-URL" ein.

set webhook

Jetzt werden alle Ihre eingehenden Nachrichten an die Webhook-URL weitergeleitet. Lassen Sie uns weitermachen und sie über Ably an einen modernen Webbrowser in Ihrer Nähe senden!

Hinweis: Bei dieser Methode wird der SMS-Webhook auf Nummernebene eingerichtet. Sie können dies aber auch auf Kontoebene einrichten, so dass Sie SMS von allen Nummern in Ihrem Konto lesen können.

Senden der SMS an das Web mit Ably

Wenn Sie ein Ably-Konto erstellen, erhalten Sie einen API-Schlüssel. Wenn Sie bereits ein Konto haben, melden Sie sich bei Ably an und erhalten Sie zuerst den API-Schlüssel. Wir müssen ihn später an den Express-Server und die Angular-Anwendung weitergeben.

Jetzt werden wir unseren Express-Server so aktualisieren, dass er, wenn er eine SMS von der Vonage-API erhält, diese über Ably an einen Kanal sendet.

Noch in server.jsimportieren Sie zuerst das Ably-Paket und holen sich den sms-notification Kanal

var ably = new require('ably').Realtime('ABLY_KEY');

var channel = ably.channels.get('sms-notification');

Und dann modifizieren wir die handleParams Methode so, dass sie auf diesem Ably-Kanal veröffentlicht wird, wenn eine SMS eingeht.

function handleParams(params, res) {
	if (!params.to || !params.msisdn) {
    	console.log('This is not a valid inbound SMS message!');
	} else {
    	console.log('Success');
    	let incomingData = {
        	messageId: params.messageId,
        	from: params.msisdn,
        	text: params.text,
        	type: params.type,
        	timestamp: params['message-timestamp']
    	};

    	channel.publish('new-sms', incomingData);

    	res.send(incomingData);
	}

	res.status(200).end();

}

Ausführen der Angular-App mit der Angular-CLI

Wenn Sie die Angular CLI nicht installiert haben, müssen Sie diese zuerst installieren:

Starten Sie nun die Angular App

ng serve

Die App läuft jetzt auf http://localhost:4200und Sie können sie in einem Browser laden. Sie wurde mit dem Angular CLI generiert, aber ich habe auch Materialize.css und Branding hinzugefügt. Sie sollte wie folgt aussehen:

booilerplate app

Erstellen einer Angular-Komponente zur Anzeige eingehender SMS-Benachrichtigungen

Jetzt ist es an der Zeit, unsere Angular-Komponente zu erstellen, mit der wir eingehende SMS-Benachrichtigungen anzeigen werden. Wir werden die CLI verwenden, um sie zu erzeugen

Die CLI hat vier Dateien für uns erstellt: die TypeScript-Datei der Komponente, die HTML-Vorlage, den CSS-Stil und die Testspezifikation.

generated files

Wir werden die TypeScript-Datei der Komponente aktualisieren (src/app/sms-notifications/sms-notifications.component.ts), um Ably zu importieren.

import * as Ably from 'ably';

ngOnInit ist eine Lifecycle-Hook-Funktion in Angular, die ausgeführt wird, wenn eine Komponente gestartet wird. Wir werden die Funktion ngOnInit um die Ably Benachrichtigung zu erhalten. Wir werden Ably instanziieren und dann in den sms-notification Kanal, abonniert für new-sms Ereignisse. Wenn eine neue SMS eintrifft, werden wir diese an unser Komponentenmodell weiterleiten, smsNotifications.

ngOnInit() {
	let options: Ably.Types.ClientOptions = { key: 'ABLY_KEY' };
  let client = new Ably.Realtime(options);
  let channel = client.channels.get('sms-notification');

	channel.subscribe('new-sms', data => {
  	this.smsNotifications.push(data.data);
	});
}

smsNotifications :Object[] = []

Jetzt, wo wir die smsNotifications auf dem Komponentenmodell haben, werden wir alles in der Vorlagendatei ersetzen (src/app/sms-notifications/sms-notifications.component.html), um die eingehende SMS-Benachrichtigung anzuzeigen. Wir wollen eine Liste von SMS-Benachrichtigungen erstellen, also müssen wir die Angular *ngFor Direktive verwenden, um über die smsNotifications. Das Design ist minimalistisch; wir werden ein Material Card Panel verwenden, um die eingehende Nummer, die SMS-Benachrichtigung und den Zeitstempel anzuzeigen.

<div class="row">
  <div *ngFor="let sms of smsNotifications" class="col s12">
		<div class="row">
	  	<div class="col s12 m6 offset-m3">
	    	<div class="white-text card-panel blue">
	      	<p class="left-align valign-wrapper"><i class="small material-icons">perm_phone_msg</i>	{{sms.from}}</p>
	      	<p class="center-align">{{sms.text}}</p>
	      	<p class="right-align"><i>{{sms.timestamp}}</i></p>
	    	</div>
	  	</div>
		</div>
  </div>
</div>

Damit die Komponente auf dem Bildschirm dargestellt werden kann, müssen wir auch die App-Vorlage aktualisieren, um die sms-notifications Komponente hinzuzufügen. Fügen Sie also am Ende der Datei (src/app/app.component.html), hinzufügen

<app-sms-notifications></app-sms-notifications>

Nun, da alles eingerichtet ist und läuft, können wir eine Nachricht an die Vonage-Nummer senden und sehen, wie sie in der Angular Single Page Application angezeigt wird:

demo

Wenn Sie mit ngrok tunneln, können Sie die Anfragen auch im Browser sehen unter http://127.0.0.1:4040/

ngrok requests

Wir haben es also geschafft, eine SMS-Benachrichtigung an eine Vonage-Nummer zu senden, die unser Express-Server dann über einen Webhook empfängt, der wiederum die Nachricht über Ably an unsere Angular-Anwendung sendet, und wir erhalten die Benachrichtigung im Browser.

Sie können einen Blick auf das Codebeispiel auf GitHub ansehen, wenn Sie das fertige Produkt sehen möchten.

Ich hoffe, Sie fanden dies nützlich. Du kannst mir Bescheid geben auf Twitter mitteilen, ich bin @lakatos88.

Weitere Lektüre

• Wenn Sie mehr über die Vonage SMS-API erfahren möchten, schauen Sie unter /api/sms

• Wenn Sie den Webhook anders konfigurieren wollen, sehen Sie sich /getting-started/konzepte/webhooks

• Wenn Sie mehr über die Vonage APIs erfahren möchten, finden Sie hier einen Blogbeitrag von Phil der auf SMS und Sprache eingeht https://developer.vonage.com/en/blog/sms-voice-programmable-communications-dr/

• Wenn Sie mehr über Ably erfahren möchten, wie Sie Veranstaltungen veröffentlichen und abonnieren können, finden Sie alles in der Schnellstartanleitung https://www.ably.io/documentation/quick-start-guide

• Wenn Sie das Angular CLI näher kennenlernen möchten, finden Sie hier die Dokumentation https://cli.angular.io/

• Wenn Sie mit Angular nicht vertraut sind, finden Sie eine hervorragende Anleitung unter https://angular.io/guide/quickstart