Comment afficher les notifications SMS dans le navigateur avec Angular, Node.JS et Ably ?

L'API SMS API de Vonage vous permet d'envoyer et de recevoir des messages dans le monde entier à l'aide d'un numéro virtuel que vous pouvez louer auprès de Vonage. Dans ce tutoriel, nous verrons comment utiliser Node.js et Express pour recevoir un SMS, l'envoyer via Ably à un navigateur web, puis utiliser Angular pour l'afficher sous forme de notification dans une application à page unique.

Avant de commencer

Avant de commencer, tu auras besoin de quelques éléments :

• La compréhension de base de JavaScript et Angular

• Node.js installé sur votre machine

• ngrok installé sur votre machine

• Un Ably Account

• Le code de départ de Github

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.

This tutorial also uses a virtual phone number. To purchase one, go to Numbers > Buy Numbers and search for one that meets your needs.

Ready to start building?

Experience seamless connectivity, real-time messaging, and crystal-clear voice and video calls—all at your fingertips.

Obtenir le code de démarrage sur Github

Tout d'abord, nous allons cloner le code source du tutoriel et passer à la branche "Getting-started".

Ensuite, nous allons installer les dépendances dont notre code a besoin. Il y a une application Node.js utilisant Express, body-parser et Ably et une App Angular générée avec le CLI Angular.

Écrire des points de terminaison Webhook avec Express

Pour recevoir un SMS de Vonage, vous devez définir un point de terminaison Webhook (URL) et l'associer à votre numéro virtuel de Vonage. Chaque fois que votre numéro recevra un SMS, Vonage l'enverra au point de terminaison Webhook. Nous allons donc créer ce point de terminaison avec Express.

Dans le code que vous venez de télécharger, il y a un fichier appelé server.jsqui contient un serveur Express standard écoutant sur le port 3000. Il devrait ressembler à ceci :

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

Nous allons maintenant créer une route HTTP POST pour gérer les requêtes vers le serveur. A la fin du fichier, ajoutez simplement :

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

La méthode handleParams n'est pas encore définie, nous allons donc l'implémenter. Nous allons ajouter quelques validations pour voir si nous avons reçu un SMS valide, et si c'est le cas, nous allons mapper les données entrantes avant de les envoyer. Nous devons renvoyer un 200 OK pour que le tableau de bord de Vonage puisse reconnaître qu'il s'agit d'une URL Webhook valide.

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

Vous pouvez maintenant lancer le serveur qui sera disponible sur localhost:3000 :

$ node server.js

Enregistrement d'un point de terminaison Webhook avec Vonage

Maintenant que vous avez écrit votre point de terminaison Webhook, il est temps de l'associer à votre numéro Vonage. Pendant le développement, il est pénible d'avoir à redéployer votre travail en cours. Utilisons donc ngrok pour exposer le point de terminaison Webhook que nous venons d'écrire sur notre machine locale en tant qu'URL publique ! Pour des instructions plus détaillées, voir Aaron d'Aaron expliquant comment connecter votre serveur de développement local à l'API Vonage en utilisant un tunnel ngrok.

Une fois que vous avez installé ngrok, exécutez-le sur le port 3000, le même port que le serveur Express :

start ngrok in terminal

Votre serveur Express (localhost:3000) a maintenant une URL ngrok (https://3be084f6.ngrok.io), qui peut être utilisée comme point de terminaison du crochet Web public au cours de ce tutoriel.

Configurer le point de terminaison Webhook avec Vonage

Pour que le tableau de bord de Vonage reconnaisse l'URL comme un point de terminaison Webhook, il doit renvoyer un code d'état 200 OK, donc assurez-vous que votre serveur est en cours d'exécution. Si ce n'est pas le cas, vous pouvez aller à la racine du code que vous avez téléchargé sur Github et utiliser le terminal pour l'exécuter :

Ouvrez une session dans votre Account Vonage et allez à vos Numbers. Dans la section Gérer de votre numéro, cliquez sur Modifier. Dans la fenêtre modale qui s'affiche, nous allons définir le Webhook que nous venons de créer. Dans la section SMS, entrez l'URL ngrok avec la route entrante (https://3be084f6.ngrok.io/inbound) dans le champ "Webhook URL".

set webhook

Désormais, tous vos messages entrants seront dirigés vers l'URL Webhook. Continuons et envoyons-les via Ably à un navigateur web moderne près de chez vous !

Remarque : cette méthode permet de configurer le Webhook SMS au niveau du numéro. Mais vous pouvez également le configurer au niveau d'un Account, afin de pouvoir lire les SMS de tous les numéros de votre compte.

Envoi du SMS sur le web avec Ably

Lorsque vous créez un compte Ably, vous obtenez une clé API. Si vous avez déjà un Account, connectez-vous à Ably et obtenez d'abord la clé API. Nous aurons besoin de la transmettre au serveur Express et à l'application Angular par la suite.

Nous allons maintenant mettre à jour notre serveur Express pour que, lorsqu'il reçoit un SMS de l'API Vonage, il l'envoie via Ably à un canal.

Toujours dans server.js, importez d'abord le paquet Ably et obtenez le canal sms-notification canal

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

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

Puis nous modifierons la méthode handleParams pour publier sur ce canal Ably lorsqu'il y a un SMS entrant.

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

}

Exécuter l'application Angular à l'aide de l'interface de programmation Angular

Si vous n'avez pas installé le CLI Angular, vous devrez d'abord l'installer :

Exécutez maintenant l'application Angular

ng serve

L'application fonctionne maintenant sur http://localhost:4200et vous pouvez la charger dans un navigateur. Elle a été générée à l'aide du CLI Angular, mais j'y ai également ajouté Materialize.css et l'image de marque. Elle devrait ressembler à ceci :

booilerplate app

Création d'un composant Angular pour afficher les notifications de SMS entrants.

Il est maintenant temps de créer notre composant Angular, que nous utiliserons pour afficher les notifications SMS entrantes. Nous allons utiliser le CLI pour le générer

L'interface CLI a créé quatre fichiers pour nous : le fichier TypeScript du composant, le modèle HTML, le style CSS et la spécification de test.

generated files

Nous allons mettre à jour le fichier TypeScript du composant (src/app/sms-notifications/sms-notifications.component.ts) pour importer Ably.

import * as Ably from 'ably';

ngOnInit est une fonction de crochet de cycle de vie dans Angular, et elle s'exécute lorsqu'un composant est initié. Nous allons mettre à jour ngOnInit pour recevoir la notification d'Ably. Nous allons instancier Ably et nous rendre sur le canal sms-notification en s'abonnant aux new-sms événements. Lorsqu'un nouveau SMS arrive, nous allons l'envoyer à notre modèle de composant, 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[] = []

Maintenant que nous avons le smsNotifications sur le modèle du composant, nous allons remplacer tout ce qui se trouve dans le fichier modèle (src/app/sms-notifications/sms-notifications.component.html) pour afficher la notification SMS entrante. Nous voulons créer une liste de notifications SMS, nous allons donc devoir utiliser la directive Angular *ngFor pour passer par-dessus la directive smsNotifications. Le design est minimaliste, nous allons utiliser un panneau de carte matérielle pour afficher le numéro entrant, la notification SMS et l'horodatage.

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

Pour que le composant s'affiche à l'écran, nous allons devoir mettre à jour le modèle d'application afin d'y ajouter le composant sms-notifications à ce dernier. Ainsi, à la fin du fichier (src/app/app.component.html), ajoutez

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

Maintenant que tout est opérationnel, envoyons un message au numéro de Vonage, et voyons-le s'afficher dans l'application à page unique Angular :

demo

Lorsque vous utilisez un tunnel avec ngrok, vous pouvez également voir les requêtes dans le navigateur à l'adresse suivante http://127.0.0.1:4040/

ngrok requests

Nous avons donc réussi à envoyer une notification SMS à un numéro Vonage, que notre serveur Express a ensuite reçu via un Webhook, qui a à son tour envoyé le message via Ably à notre application Angular, et nous recevons la notification dans le navigateur.

Vous pouvez consulter l'exemple de code exemple de code sur GitHub si vous voulez voir le produit fini.

J'espère que vous avez trouvé cela utile. Vous pouvez me le faire savoir sur twitter, je suis @lakatos88.

Pour en savoir plus

• Si vous voulez en savoir plus sur l'API SMS de Vonage, jetez un coup d'œil à /api/sms

• Si vous souhaitez configurer le Webhook différemment, consultez les pages suivantes /getting-started/concepts/webhooks

• Si vous voulez jouer avec les API de Vonage un peu plus, voici un article de blog de Phil qui traite des SMS et de la Voice https://developer.vonage.com/en/blog/sms-voice-programmable-communications-dr/

• Si vous souhaitez en savoir plus sur Ably, sur la manière de publier des événements et de s'abonner à des événements, vous trouverez tout cela dans leur guide de démarrage rapide. https://www.ably.io/documentation/quick-start-guide

• Si vous souhaitez utiliser l'interface de programmation d'Angular, voici la documentation. https://cli.angular.io/

• Si vous n'êtes pas familier avec Angular, un excellent guide est disponible à l'adresse suivante https://angular.io/guide/quickstart