Cómo mostrar notificaciones de SMS en el navegador con Angular, Node.JS y Ably

La SMS API de Vonage te permite enviar y recibir mensajes en todo el mundo utilizando un número virtual que puedes alquilar a Vonage. En este tutorial, veremos cómo puedes usar Node.js y Express para recibir un SMS, enviarlo a través de Ably a un navegador web, y luego usar Angular para mostrarlo como una notificación en una Single Page Application.

Antes de empezar

Antes de empezar necesitarás algunas cosas:

• Conocimientos básicos de JavaScript y Angular

• Node.js instalado en su máquina

• ngrok instalado en su máquina

• Un Ably Account

• El código de inicio 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.

Obtener el código de inicio de Github

En primer lugar, vamos a clonar el código fuente del tutorial y cambiar a la rama de inicio

A continuación, vamos a instalar las dependencias que nuestro código necesita. Hay una aplicación Node.js usando Express, body-parser y Ably y una App Angular generada con el CLI de Angular.

Escribir puntos finales Webhook con Express

Para recibir un SMS de Vonage, debes definir un punto final de Webhook (URL) y luego asociarlo con tu número virtual de Vonage. Cada vez que tu número reciba un SMS, Vonage lo enviará al punto final de Webhook. Así que vamos a proceder a crear ese endpoint con Express.

En el código que acaba de descargar, hay un archivo llamado server.jsque viene con un servidor Express boilerplate escuchando en el puerto 3000. Debería verse así:

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

Ahora vamos a crear una ruta HTTP POST para manejar las peticiones al servidor. Al final del archivo, sólo tiene que añadir:

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

El método handleParams aún no está definido, así que lo implementaremos. Vamos a añadir algunas validaciones para ver si hemos recibido un mensaje SMS válido, y si ese es el caso, vamos a mapear los datos entrantes antes de enviarlos. Necesitamos devolver un 200 OK para que el panel de Vonage pueda reconocerlo como una URL de Webhook válida.

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

Ahora puede ejecutar el servidor, que estará disponible en localhost:3000:

$ node server.js

Registrar un punto final Webhook con Vonage

Ahora que has escrito tu punto final Webhook, es hora de asociarlo con tu número de Vonage. Durante el desarrollo, es una molestia tener que volver a implementar el trabajo en curso. Así que usemos ngrok para exponer el punto final de Webhook que acabamos de escribir en nuestra máquina local como una URL pública. Para instrucciones más detalladas ver Aaron de Aaron que explica cómo conectar tu servidor de desarrollo local a la API de Vonage mediante un túnel ngrok.

Una vez instalado ngrok, ejecútelo en el puerto 3000, el mismo puerto que el servidor Express:

start ngrok in terminal

Su servidor Express (localhost:3000) tiene ahora una URL ngrok (https://3be084f6.ngrok.io), que puede ser utilizada como un punto final Webhook público durante este tutorial.

Configuración del punto final de Webhook con Vonage

Para que el panel de Vonage reconozca la URL como un punto final de Webhook, debe devolver un código de estado 200 OK, así que asegúrate de que tu servidor esté funcionando. Si no lo está, puedes ir a la raíz del código que descargaste de Github y usar la terminal para ejecutarlo:

Inicia sesión en tu Account de Vonage y ve a tus Numbers. En la sección Administrar de tu Numbers, haz clic en Editar. En el modal que aparece, configuraremos el Webhook que acabamos de crear. En la sección SMS, ingresa la URL de ngrok con la ruta de entrada (https://3be084f6.ngrok.io/inbound) en el campo "Webhook URL".

set webhook

Ahora todos sus mensajes entrantes irán a la URL Webhook. ¡Vamos a seguir adelante y enviarlos a través de Ably a un navegador web moderno cerca de usted!

Nota: este método configura el Webhook de SMS a nivel de Numbers. Pero también puedes configurarlo a nivel de Account, para poder leer los SMS de todos los Numbers de tu cuenta.

Envío de SMS a la web con Ably

Cuando crees una Account en Ably, obtendrás una API Key. Si ya tienes una Account, inicia sesión en Ably y obtén primero la API Key. Necesitaremos pasarla al servidor Express y a la aplicación Angular más adelante.

Ahora vamos a actualizar nuestro servidor Express para que cuando reciba un SMS de la API de Vonage, lo envíe a través de Ably a un canal.

Todavía en server.jsimporte primero el paquete Ably y obtenga el sms-notification canal

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

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

Y luego modificaremos el método handleParams para que se publique en ese canal de Ably cuando haya un SMS entrante.

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

}

Ejecutar la aplicación Angular utilizando la CLI de Angular

Si no tienes instalado Angular CLI, tendrás que instalarlo primero:

Ahora ejecuta la aplicación Angular

ng serve

La aplicación ya funciona en http://localhost:4200y puedes cargarla en un navegador. Ha sido generada usando el CLI de Angular, pero también le he añadido Materialize.css y branding. Debería verse así:

booilerplate app

Creación de un componente Angular para mostrar notificaciones de SMS entrantes

Ahora es el momento de crear nuestro componente Angular, que utilizaremos para mostrar las notificaciones de SMS entrantes. Usaremos el CLI para generarlo

La CLI creó cuatro archivos para nosotros: el archivo TypeScript del componente, la plantilla HTML, el estilo CSS y la especificación de prueba.

generated files

Vamos a actualizar el archivo TypeScript del componente (src/app/sms-notifications/sms-notifications.component.ts) para importar Ably.

import * as Ably from 'ably';

ngOnInit es una función gancho del ciclo de vida en Angular, y se ejecuta cuando un componente se está iniciando. Vamos a actualizar ngOnInit para recibir la notificación de Ably. Vamos a instanciar Ably y luego llegar al sms-notification suscribiéndonos a new-sms eventos. Cuando llegue un nuevo SMS, vamos a empujarlo a nuestro modelo de componentes, 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[] = []

Ahora que tenemos el smsNotifications en el modelo del componente, vamos a reemplazar todo en el archivo de plantilla (src/app/sms-notifications/sms-notifications.component.html) para mostrar la notificación SMS entrante. Queremos crear una lista de notificaciones SMS, así que vamos a tener que utilizar la directiva Angular *ngFor para que se ejecute sobre la directiva smsNotifications. El diseño es minimalista; vamos a utilizar un panel de tarjeta de material para mostrar el número entrante, la notificación de SMS y la marca de tiempo.

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

Para que el componente se muestre en la pantalla, tendremos que actualizar también la plantilla de la aplicación para añadirle el componente sms-notifications componente. Así que al final del archivo (src/app/app.component.html), añade

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

Ahora que todo está funcionando, enviemos un mensaje al número de Vonage y veámoslo en la aplicación de página única de Angular:

demo

Cuando está haciendo un túnel con ngrok, también puede ver las peticiones en el navegador en http://127.0.0.1:4040/

ngrok requests

Así conseguimos enviar una notificación SMS a un número de Vonage, que nuestro servidor Express recibió a través de un Webhook, que a su vez envió el mensaje a través de Ably a nuestra aplicación Angular, y recibimos la notificación en el navegador.

Puede echar un vistazo al ejemplo de código en GitHub si quieres ver el producto final.

Espero que le haya resultado útil. Puedes hacérmelo saber en twitter, soy @lakatos88.

Para saber más

• Si quieres saber más sobre la SMS API de Vonage, echa un vistazo a /api/sms

• Si desea configurar el Webhook de forma diferente, eche un vistazo a /comenzando/concepts/webhooks

• Si quieres jugar un poco más con las API de Vonage, aquí tienes una entrada de blog de Phil sobre SMS y Voice https://developer.vonage.com/en/blog/sms-voice-programmable-communications-dr/

• Si quieres saber más sobre Ably, cómo publicar eventos y suscribirte a eventos, está todo en su guía de inicio rápido https://www.ably.io/documentation/quick-start-guide

• Si quieres usar el CLI de Angular un poco más, aquí está la documentación https://cli.angular.io/

• Si no estás familiarizado con Angular, hay una gran guía disponible en https://angular.io/guide/quickstart