){kind=small}
Creación de un sistema interactivo de notificaciones por SMS con ExpressJS
Uno de los aspectos más sorprendentes de los SMS es su ubicuidad. Tanto si tienes un smartphone como un viejo teléfono "tonto" de los 90, podrás enviar y recibir mensajes SMS. Aunque muchas empresas sólo los utilizan como servicio de notificación, llegan a ser realmente poderosos cuando facilitan un canal de comunicación bidireccional entre empresas y clientes.
En este tutorial crearemos un sistema de notificaciones interactivo para una empresa de paquetería. Para ello hemos creado un sencillo "Nexmo Mail que permite a un empleado de la empresa de reparto teclear un número de teléfono y notificar al destinatario de un paquete que va a ser entregado.
Esta aplicación nos sirve de punto de partida para este tutorial. Se trata de una aplicación Express básica, escrita en Javascript con algunos módulos adicionales para facilitar las cosas. Hemos añadido el módulo body-parser para analizar los formularios enviados, y hemos añadido el módulo Bootstrap para hacer que nuestra interfaz de usuario se vea un poco más atractiva. Por último, hemos añadido algunos módulos babel para que podamos escribir en ES2015-moderno.
Puede descargar el punto de partida de este tutorial desde Github:
A continuación, visite localhost:3000 en su navegador y envíe un número de teléfono en formato internacional, por ejemplo 447755555555.
Todo el código de este punto de partida se encuentra en la página forma-numérica en Github. Todo el código que añadiremos a continuación se encuentra en la rama entrega-notificaciones rama. Para su comodidad, puede ver todos los cambios entre nuestro punto inicial y final en Github también.
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.
La SMS API de Vonage te ofrece baja latencia y alta capacidad de entrega. Es la manera más confiable de llegar a usuarios de todo el mundo. Si bien tiene muchas funciones, sólo veremos dos elementos principales: enviar y recibir mensajes de texto básicos. Vamos a utilizar esta API para enviar a la gente una notificación de su entrega, ofreciéndoles cambiar su franja horaria de entrega, y escuchar cualquier cambio que nos envíen. Para ello vamos a añadir los siguientes cambios a nuestra aplicación:
Añade Vonage a nuestra aplicación
Envíe un mensaje SMS al número indicado con su franja horaria de entrega y las instrucciones para cambiarla
Escuchar y confirmar los mensajes de texto entrantes del usuario para cambiar de franja horaria
Codificaremos las opciones en nuestra aplicación para simplificar las cosas. En tu aplicación, obviamente, determinarás las opciones del usuario basándote en algún asombroso algoritmo de aprendizaje automático que hayas inventado personalmente.
Para enviar un mensaje SMS a través de Vonage vamos a tener que añadir la función Vonage al proyecto.
npm install @vonage/server-sdk dotenv --saveComo puede ver, también hemos añadido el parámetro dotenv módulo. Esto es sólo para que la aplicación puede cargar las credenciales de la API de un .env archivo. Puedes encontrar tus credenciales en la página de configuración de su cuenta Nexmo.
# .env
KEY='<your_api_key>'
SECRET='<your_api_secret>'
FROM='<phone_number>'También agregamos el número de teléfono de Vonage desde el cual enviaremos un mensaje SMS al archivo .env archivo. Puedes comprar un número desde el Panel de Vonageo puedes usar la biblioteca vonage-cli y comprar uno directamente desde la línea de comandos.
Configura tu CLI de Vonage con esta guía. Sólo necesitas la Instalación y Configuración paso.
Elija uno de los números de teléfono de la lista de números de teléfono que aparecen al realizar el comando. Sustituya VONAGE_VIRTUAL_NUMBER en el comando siguiente por el número de teléfono elegido y ejecute el comando.
Ahora que tenemos nuestra clave API, el secreto y el número de teléfono Nexmo, inicializamos el cliente Nexmo.
// 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
});A partir de ahora podemos utilizar vonage en cualquier parte de nuestra aplicación para realizar las llamadas a la API que necesitemos.
Actualmente, cuando el empleado envía un número de teléfono, se llama al endpoint POST /notify que simplemente muestra un texto de confirmación en el navegador. Tendremos que añadir algo de código para enviar un mensaje SMS con la franja horaria de entrega prevista, y una lista de opciones para que puedan elegir.
Vamos a codificar algunas opciones para que el usuario cambie su ranura de entrega.
// app.js - after the previous code
const options = [
'this Friday',
'next Monday',
'next Tuesday'
];Podemos utilizar estas opciones para generar un bonito mensaje de texto para enviar al usuario.
// 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`;
});
Nota: No hemos codificado todo el mensaje aquí, ya que volveremos a necesitar estas opciones más adelante.
Lo siguiente que tenemos que hacer es enviar el mensaje al número de teléfono enviado.
// app.js
app.post('/notify', (request, response) => {
send(request.body.number, notification); // adding this line
response.send('Notification sent');
});
Hemos envuelto la llamada a la API Nexmo en una función send para hacer las cosas más legibles y reutilizables. La función send envuelve la API nexmo.sms.sendTextMessage API y rellena previamente el número de teléfono Nexmo que compramos antes.
// 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']}`);
}
}
});
}
Si ahora intenta volver a enviar su propio número de móvil, debería recibir un mensaje de texto en cuestión de segundos.
Nuestro truco final es recibir un mensaje entrante del usuario respondiendo a nuestro mensaje de texto enviado anteriormente. Para ello, vamos a tener que hacer que nuestra aplicación disponible públicamente a un webhook Nexmo.
Vamos a empezar por añadir un punto final ficticio para el webhook para llamar.
// app.js
app.get('/response', (request, response) => {
// TODO: Confirm selection
response.send('Response processed');
});
Usted tiene algunas opciones para hacer su aplicación públicamente accesible por los webhooks Nexmo. Si usted tiene la suerte de tener una IP pública en su máquina, usted debe estar listo para ir. Para el resto de nosotros, podríamos desplegar la aplicación, utilizar un túnel SSH, o mi solución favorita: utilizar el increíble ngrok herramienta.
Tu nuevo número virtual de Vonage y tu URL de Webhook deben estar vinculados para que Vonage sepa dónde enviar los mensajes SMS entrantes.
Al igual que en el paso anterior, podrías agregar tu URL de webhook a tu número virtual de Vonage, pero este tutorial mostrará el ejemplo de cómo realizar este cambio a través del portal web.
Antes de proceder a la instalación, ten en cuenta lo siguiente:
VONAGE_VIRTUAL_NUMBER: El número que intentas utilizar.WEBHOOK_URL: Tu URL de Ngrok, seguido de/responsepor lo que debería ser algo comohttp://<your_url>.ngrok.io/response
Ir a la página Página Numbers en tu panel de control.
Haga clic en el icono "Editar" (parece un bolígrafo) bajo la columna "Gestionar". En la ventana emergente bajo SMS > Inbound Webhook URL pega tu WEBHOOK_URL y haz clic en "Guardar".
Si obtiene algún error en este estado, por favor asegúrese de que está utilizando el número de teléfono Nexmo en su Account, y que la URL es de acceso público.
Nuestro último paso es ampliar nuestro endpoint para que tome el mensaje entrante, analice la respuesta, compruebe si contiene una de nuestras opciones y envíe otro mensaje de texto para confirmar su selección.
// 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');
});
Ahora intenta responder al mensaje que has recibido antes. Puede tardar unos segundos dependiendo de tu conexión a Internet, pero deberías recibir una confirmación en unos segundos. Prueba también a responder con mensajes de texto aleatorios a ver qué pasa.
La SMS API de Vonage tiene muchas más opciones de las que mostré aquí, incluyendo Flash Messages, vCard, vCal y mucho más. Personalmente, me gusta mucho lo fácil que Vonage CLI comprar números de teléfono y vincularlos a un punto final.
Me encantaría saber qué añadirías a continuación. Envíame un tuit (soy @cbetta) con tus pensamientos e ideas.