Crear un programador de mensajes con Node y Vonage

Aquí en Vonage, hemos escrito muchos artículos sobre cómo enviar un mensaje SMS. Sin embargo, a veces no quieres enviar un mensaje SMS en este instante: quieres enviarlo en el futuro. En este tutorial, aprenderás a programar un mensaje SMS para enviarlo en el futuro usando el API de Messages de Vonage y Node.

¿Estás listo para empezar?

¡Construyámoslo!

Requisitos previos

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.

Para seguir este tutorial, necesitas una Account de Vonage. También necesitas Node, que puedes descargar aquí.

Configuración inicial

Para empezar, lo primero que tienes que hacer es instalar los siguientes módulos:

node install express @vonage/server-sdk node-cron @vonage/cli -g

Express es el framework web que usaremos para construir nuestra aplicación. Usaremos la librería de Vonage para enviar nuestro mensaje SMS, usaremos node-cron para crear un cron job para enviarlo en el futuro, y la CLI de Vonage para crear una app de Vonage.

Usa la CLI de Vonage para ingresar el siguiente comando con tu clave y secreto de API de Vonage. Puedes encontrar esta información en el panel para desarrolladores.

vonage config:set --apiKey=VONAGE_API_KEY --apiSecret=VONAGE_API_SECRET

A continuación, cree un nuevo directorio para su proyecto y CD en él:

mkdir my_project
CD my_project

Ahora, utiliza la CLI para crear una aplicación de Vonage.

vonage apps:create
✔ Application Name ... new_app
✔ Select App Capabilities > Messages
✔ Create messages webhooks? ... No
✔ Allow use of data for AI training? Read data collection disclosure  ... yes

Application created: 34abcd12-ef12-40e3-9c6c-4274b3633761

Guarde el ID de la solicitud: lo necesitará más adelante.

Ahora necesitas un número para poder recibir llamadas. Puedes alquilar uno utilizando el siguiente comando (sustituyendo el código del país por tu código). Por ejemplo, si estás en Gran Bretaña, sustituye US por GB:

vonage numbers:search US
vonage numbers:buy [NUMBER] [COUNTRYCODE]

Ahora vincula el número a tu aplicación:

vonage apps:link --number=VONAGE_NUMBER APP_ID

Construir el back-end

Ahora, estamos listos para empezar a escribir el código de nuestra aplicación.

CD en el directorio en el que creaste tu aplicación de Vonage y crea un archivo .env archivo.

Añade la siguiente información:

FROM=<your_vonage_number>
API_KEY=<your_vonage_API_key>
API_SECRET=<your_vonage_API_secret>
APPLICATION_ID=<your_vonage_application_ID>
PRIVATE_KEY=<your_vonage_private_key_file_name>

A continuación, crea un nuevo archivo JavaScript e importa las librerías que necesites para este proyecto.

express = require('express')
const Vonage = require('@vonage/server-sdk')
cron = require('node-cron')
const bodyParser = require('body-parser')
const path = require('path');

Crea una aplicación Express como ésta:

app = express()

Ahora, añade el middleware que tu aplicación necesita para gestionar las peticiones POST:

app.use(bodyParser.json())
app.use(bodyParser.urlencoded({
    extended: true
}))
app.use(express.static('public'))

Agrega este código para configurar la API Messages API de Vonage:

const vonage = new Vonage({
    apiKey: process.env.API_KEY,
    apiSecret: process.env.API_SECRET,
    applicationId: process.env.APPLICATION_ID,
    privateKey: process.env.PRIVATE_KEY
})

A continuación, define una función que sirva index.html cuando vayas a la página de inicio de tu aplicación web.

app.get('/', (req, res) => {
    res.sendFile(path.join(__dirname, '/index.html'))
})

Ahora, necesitamos un endpoint para enviar nuestros mensajes SMS.

Añade el siguiente código a tu aplicación:

app.post('/api/sms', (req, res) => {
    res.send(200)
    const triggerTime = new Date(req.body['meeting-time'])
    let task = cron.schedule('* * * * * *', () => {
        if (new Date() > triggerTime) {
            vonage.message.sendSms(process.env.FROM, req.body['number'], req.body['message'], (err, responseData) => {
                if (err) {
                    console.log(err);
                } else {
                    if (responseData.messages[0] === "0") {
                        console.log("Message sent successfully.");
                    } else {
                        console.log(`Message failed with error: ${responseData.messages[0]['error-text']}`);
                    }
                }
            })
            task.stop()
        }
    });
})

Este código acepta una solicitud POST con una hora (cuándo enviar el mensaje SMS), el número al que enviar el mensaje y el mensaje a enviar, y lo envía al destinatario a la hora programada utilizando node-cron para programar el mensaje.

Node-chron acepta dos parámetros: el tiempo para hacer algo y una función que contiene el código de lo que hay que hacer.

El código anterior envía un mensaje SMS utilizando la API de mensajería de Vonage y los datos de la solicitud POST.

Por último, añada esta línea de código al final del archivo para que el servidor escuche en el puerto 5000.

app.listen('5000')

Ahora puede ejecutar su servidor ejecutando el código de este archivo.

Sin embargo, todavía no pasa nada, porque tenemos que crear nuestro front-end.

Construir el front-end

Crea un nuevo archivo llamado index.html y añade lo siguiente:

<meta charset="UTF-8">
    <title>Message Scheduler</title>
    <link rel="stylesheet" href="style.css">
  
  
    <h1>Message Scheduler </h1>
    <form action="/api/sms" method="POST">
      <label for="time">Start date:</label>
      <br>
      <input type="datetime-local" id="time" name="meeting-time" value="2022-03-03sT00:00" min="2022-03-03sT00:00" max="2023-06-14T00:00">
      <br>
      <label for="number">Number:</label>
      <br>
      <input id="number" name="number">
      <br>
      <label for="message">Message:</label>
      <br>
      <input id="message" name="message">
      <br>
      <input type="submit" value="Submit" id="submit">
    </form>

En la parte superior de su archivo HTML, importa style.css, que contiene CSS para que esta página tenga mejor aspecto.

<link rel="stylesheet" href="style.css">

El resto de este HTML crea un formulario que recoge una fecha y hora (cuándo enviar el texto), un número de teléfono (a quién enviarlo) y un mensaje (el mensaje a enviar).

Este código es sencillo porque aprovechamos el calendario incorporado de JavaScript.

Cuando el usuario envía el formulario, éste envía toda la información recopilada al back-end, que programa el envío del mensaje de texto.

Cuando ejecute el archivo JavaScript que creó anteriormente y navegue por su servidor local en http://127.0.0.1:5000, debería ver el formulario que creamos.

Cuando rellenes el formulario y pulses enviar, tu SMS debería enviarse a la hora programada.

Reflexiones finales

Espero que este tutorial te haya ayudado a obtener más información sobre Messages API de Vonage y cómo programar mensajes SMS.

Para más información, síganos en Twitter y únase a nuestro canal de Slack.

Gracias por leerme.