Aplicación de recordatorio de agua potable con Node, React y Messages API de Vonage

Introducción

En este artículo, crearemos una aplicación web con Node, React y la API Messages API de Vonage para permitir a los usuarios suscribirse al servicio y elegir una frecuencia determinada para los recordatorios. Todos los suscriptores recibirán recordatorios para beber agua a intervalos regulares en función de la frecuencia elegida.

Beber agua es importante porque ayuda a mantener el cuerpo hidratado, lo que es esencial para su correcto funcionamiento. Una hidratación adecuada puede ayudar a mejorar los niveles de energía, estimular el funcionamiento del sistema inmunitario e incluso ayudar a prevenir ciertas enfermedades.

Puede clonar el repositorio repositorio GitHub para este tutorial.

Agenda

En este tutorial, aprenderás a:

• Crear un servidor backend con Node.js

• Agregar remitente de mensajes en Express y Node con la API Messages API de Vonage

• Añadir gestor de frecuencias con node-scheduler

• Crear una interfaz de usuario con React.js

• Conectar el backend y el frontend

• Probar la aplicación

Requisitos previos

• Una cuenta y un número de teléfono de Vonage

• Node y npm instalados

Crear un servidor backend con Node.js

Es hora de empezar con el backend de la aplicación.

Crear un directorio principal de aplicaciones Vonage_Drinking_App.

Vaya a su terminal y escriba mkdir Vonage_Drinking_App.

Entre en este directorio escribiendo cd Vonage_Drinking_App en el terminal.

Cree un directorio dentro de este directorio llamado backend.

A continuación, utilizaremos la API de Messages de Vonage para enviar SMS a los suscriptores.

Añadir remitente de mensajes en Express y Node con la API Messages API de Vonage

Vonage es una plataforma global de comunicaciones en la nube que permite a los usuarios realizar y recibir llamadas telefónicas, enviar y recibir mensajes de texto y mucho más. Ofrece una amplia gama de servicios, como voz sobre IP (VoIP) y comunicaciones unificadas, así como mensajería, chat de vídeo y otras funciones. Vonage también proporciona una serie de API y SDK que permiten a los desarrolladores integrar sus aplicaciones con la plataforma de Vonage. Puedes crear una Account de Vonage desde el panel de control.

Introduzca sus datos y Verify su ID de correo electrónico:

Vonage homepage

Sign up

A continuación, podrás ver la siguiente pantalla, donde eliges si eres un desarrollador. Selecciona los productos de Vonage que planeas usar. Para este tutorial, seleccionaremos SMS.

Let's get started page

Tu Account viene con un crédito de 2€, que puedes usar para una prueba, lo cual es perfecto para este caso de uso. Vaya al panel de control para utilizar la Messages API:

Vonage API Dashboard page

Copie su clave API y secreto de API para su uso posterior. Es hora de crear una nueva aplicación. Vaya a Aplicaciones o a la sección Aplicaciones en la barra lateral izquierda:

Vonage applications page

Haga clic en "Crear una nueva aplicación" para crear una nueva aplicación:

Create a new Vonage application page

Seleccione Mensajes en las capacidades. Añada la URL de entrada y de estado como https://www.google.com/. En este paso, puede generar su clave privada. Se descargará y guardará localmente.

Choose application specifications page

Haga clic en el botón Generar nueva aplicación :

Choose application specifications page scrolled down

Podrá ver esta página de solicitudes:

Drink water POC application page

Guardar el ID de aplicación y la clave privada generada. También puedes comprar un número y vincular tu número de Vonage aquí.

A continuación, debe instalar algunas dependencias. Escribe lo siguiente en tu terminal:

npm install cors@2.8.5 cypress@12.11.0 express@4.18.2 node-schedule@2.1.1 react-dom@18.2.0 react@18.2.0 webpack@5.81.0

Este es el código de ejemplo del Vonage Mensajes SDK para Node.js repositorio GitHub que utilizaremos para probar si podemos enviar sms utilizando la API Messages API de Vonage:

const { Auth } = require("@vonage/auth");
const { Messages } = require("@vonage/messages");
const { SMS } = require("@vonage/messages");

PRIVATE_KEY_PATH = "private.key";
const messagesClient = new Messages(
 new Auth({
   apiKey: API_KEY,
   apiSecret: API_SECRET,
   applicationId: APPLICATION_ID,
   privateKey: PRIVATE_KEY_PATH,
 })
 // options
);
messagesClient
 .send(
   new SMS({
     to: "TO NUMBER",
     from: "Vonage APIs",
     text: "Hi from Python Code Nemesis",
   })
 )
 .then((resp) => console.log(resp))
 .catch((err) => console.error(err));

Este es el archivo test_sms.js en el repositorio repositorio GitHub. Este código utiliza la API de Messages API de Vonage para enviar un mensaje SMS a un número de teléfono. Para ejecutar este archivo, escribe node test_sms.js en tu terminal.

He aquí una explicación del test_sms.js código. Las tres primeras líneas importan tres módulos de la @vonage biblioteca: Auth, Messagesy SMS. Auth se utiliza para autenticarse con la API de Vonage, Messages se utiliza para enviar mensajes SMS, y SMS es una subclase de Messages utilizada para construir mensajes SMS.

A continuación, el código define una constante PRIVATE_KEY_PATH con la ruta a un archivo de clave privada. A continuación, se crea una instancia de Messages con la palabra clave new pasando un objeto Auth como argumento con el carácter apiKey, apiSecret, applicationIdy privateKey establecidas. Esta instancia de Messages se almacena en una constante llamada messagesClient.

Por último, el método send() se llama al método messagesClient para enviar un mensaje SMS. El método send() toma como argumento una instancia de SMS como argumento, con el carácter to, fromy text con el número de teléfono del destinatario, el nombre o número del remitente y el texto del mensaje, respectivamente. El método then() en la promesa devuelta para registrar la respuesta de la API de Vonage, y el método catch() para registrar cualquier error que se produzca durante el proceso de envío.

Una vez que esto se ejecuta correctamente, podemos crear nuestra aplicación backend utilizando este código.

Añadir controlador de frecuencia con Node-Scheduler

El siguiente paso es enviar un SMS al número introducido en el frontend en el endpoint sign-up endpoint. Programaremos recordatorios para cada abonado en función de la frecuencia que seleccione desde la interfaz de usuario.

Cree un archivo app.js en la carpeta backend y añade el siguiente código:

const express = require("express");
const app = express();
const cors = require("cors");
const { SMS } = require("@vonage/messages");
const schedule = require("node-schedule");
const { Auth } = require("@vonage/auth");
const { Messages } = require("@vonage/messages");

PRIVATE_KEY_PATH = "private.key";

// A list to store phone numbers and frequency of reminders

const subscribers = [];

const messagesClient = new Messages(
 new Auth({
   apiKey: API_KEY,
   apiSecret: API_SECRET,
   applicationId: APPLICATION_ID,
   privateKey: PRIVATE_KEY_PATH,
 })
 // options
);

function sendReminders(phoneNumber) {
 const from = "Reminder App";
 const to = phoneNumber;
 const text = "This is your reminder to have a glass of water!";

 messagesClient
   .send(
     new SMS({
       to: to,
       from: from,
       text: text,
     })
   )
   .then((resp) => console.log(resp))
   .catch((err) => console.error(err));
}

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

app.post("/sign-up", (req, res) => {
 const phoneNumber = req.body.phoneNumber;
 const frequency = req.body.frequency;

 // Add the phone number and frequency to the subscriber's list
 subscribers.push({ phone_number: phoneNumber, frequency: frequency });

 const from = "Reminder App";
 const to = phoneNumber;
 const text = "Welcome to the Drinking Water Reminder App! You will receive reminders as per your selected frequency.";

 messagesClient
   .send(
     new SMS({
       to: phoneNumber,
       from: from,
       text: text,
     })
   )
   .then((resp) => console.log(resp))
   .catch((err) => console.error(err));

 schedule.scheduleJob(`*/${frequency} * * * *`, () => {
   sendReminders(phoneNumber);
 });

 console.log(
   `Send message to ${phoneNumber} with frequency ${frequency} minute`
 );

 res.status(200).json({ status: "ok" });
});

app.listen(5000, () => {
 console.log("Server started on port 5000");
});

Esta es una aplicación Node.js del lado del servidor que utiliza el framework Express para crear un servidor web. También se integra con la API Messages API de Vonage para enviar recordatorios a los suscriptores.

El código comienza importando los módulos necesarios: express, body-parser, cors, @vonage/messages, node-scheduley @vonage/auth. A continuación, define una variable constante PRIVATE_KEY_PATH con la ruta a la clave privada de la API de Vonage. Luego, crea una lista llamada subscribers para almacenar los números de teléfono y la frecuencia de los recordatorios. A continuación, crea una nueva instancia de la clase Messages de la clase @vonage/messages que se utiliza para enviar mensajes SMS a través de la API de Vonage. Establece la clave de API, el secreto de API, el ID de aplicación y la clave privada requeridos utilizando una instancia de la clase Auth.

La función sendReminders está definida para enviar recordatorios a un número de teléfono concreto. Toma el número de teléfono como argumento, establece los parámetros from y text para el mensaje SMS y, a continuación, envía el mensaje a través del botón messagesClient utilizando el método send método.

A continuación, el código crea una nueva instancia de la aplicación express y configura el middleware para gestionar las peticiones JSON y habilitar la compartición de recursos entre orígenes (CORS) para aplicaciones web.

El servidor establece una ruta para la POST solicitud a /sign-up. Cuando un cliente envía una solicitud a este punto final con un número de teléfono y una frecuencia en el cuerpo de la solicitud, el servidor añade el número de teléfono y la frecuencia a la lista subscribers lista. A continuación, envía un mensaje de bienvenida al número de teléfono del abonado a través de la carpeta messagesClient y programa recordatorios con la frecuencia especificada mediante el módulo node-schedule módulo.

Por último, el servidor devuelve una respuesta JSON que indica que la solicitud se ha realizado correctamente.

¿Por qué hemos habilitado CORS?

CORS (Cross-Origin Resource Sharing) es un mecanismo que permite solicitar recursos (como scripts, imágenes o estilos) desde un dominio distinto al que sirvió la página web.

Los errores CORS se producen cuando una página web intenta realizar una petición (por ejemplo, a través de JavaScript) a un dominio distinto del que sirvió la página web, y el servidor que aloja el recurso solicitado no devuelve las cabeceras CORS adecuadas.

El propósito de CORS es evitar que una página web maliciosa realice peticiones no autorizadas a otro dominio. Los navegadores aplican las restricciones CORS comprobando la presencia de cabeceras HTTP específicas en la respuesta del servidor, como Access-Control-Allow-Origin.

Ejecute este archivo con node app.js. Podrá ver "Server started on port 5000" una vez que el servidor esté funcionando:

Console log

El servidor comienza a escuchar en el puerto 5000, y se imprime un mensaje en la consola indicando que el servidor se ha iniciado. Al pasar alguna entrada en el frontend de la aplicación, los registros se imprimirán en la consola con los UUID de los mensajes.

¡Magnífico! El backend está hecho, y está en marcha y funcionando. Ahora es el momento de añadir el código frontend.

Crear una interfaz de usuario front-end con React.JS

El frontend de esta aplicación utilizará el framework React.js.

Algunos prerrequisitos son que debes tener Node.js y npm instalados en tu sistema. Asegúrese de que está utilizando la versión más adecuada.

nvm install <version>
nvm use <version>

Si es necesario, también puede actualizar Node. Dentro del directorio raíz del proyecto, cree una carpeta llamada frontend. Dentro de esta carpeta, cambia al directorio frontend e inicializa un nuevo proyecto React:

npx create-react-app .

Ejecuta la aplicación React:

npm start

Verify the app is running by visiting http://localhost:3000 en tu navegador. Deberías ver la aplicación React por defecto.

Cree un nuevo componente DrinkingWaterForm en el directorio frontend/src con el siguiente código para permitir que los usuarios se suscriban a los recordatorios:

import React, { useState } from "react";
import { Form, Button } from "react-bootstrap";
import { responsivePropType } from "react-bootstrap/esm/createUtilityClasses";
import drinkwater from './drinkwater.jpg';

const DrinkingWaterForm = () => {
 const [phoneNumber, setPhoneNumber] = useState("");
 const [frequency, setFrequency] = useState("");

 const handleSubmit = async (event) => {
   event.preventDefault();

   console.log(
     JSON.stringify({
       phoneNumber: phoneNumber,
       frequency: frequency,
     })
   );

   let res;

   try {
     res = await fetch("http://127.0.0.1:5000/sign-up", {
       method: "POST",
       headers: {
         Accept: "application/json",
         "Content-Type": "application/json",
       },
       body: JSON.stringify({
         phoneNumber: phoneNumber,
         frequency: frequency,
       }),
     });
   } catch (error) {
     console.log(error);
   }

   if (res.ok) {
     await res.json();
   } else {
     window.alert(res.status());
   }
 };

 return (
   <div style={containerStyle}>
     <img src={drinkwater} alt="this is a car image" width={"400px"} height={"220px"}/>
     <h1 style={titleStyle}>Drinking Water Reminder Service</h1>
     <Form onSubmit={handleSubmit} style={formStyle}>
       <Form.Group>
         <Form.Label style={formLabelStyle}>Phone Number</Form.Label>
         <Form.Control
           type="tel"
           value={phoneNumber}
           onChange={(event) => setPhoneNumber(event.target.value)}
           required
           style={formControlStyle}
         />
       </Form.Group>
       <Form.Group>
         <Form.Label style={formLabelStyle}>Frequency (mins)</Form.Label>
         <Form.Control
           type="number"
           value={frequency}
           onChange={(event) => setFrequency(event.target.value)}
           required
           style={formControlStyle}
         />
       </Form.Group>
       <Button type="submit" style={submitButtonStyle}>
         Sign Up
       </Button>
     </Form>
   </div>
 );
};

const containerStyle = {
 display: "flex",
 flexDirection: "column",
 alignItems: "center",
 padding: "50px",
 backgroundColor: "#7DCE82",
};

const imageStyle = {
 width: "150px",
 marginBottom: "25px",
};

const titleStyle = {
 marginBottom: "25px",
 color: "#FFFFFF",
};

const formStyle = {
 width: "50%",
 marginTop: "25px",
};

const formLabelStyle = {
 color: "#FFFFFF",
};

const formControlStyle = {
 backgroundColor: "#FFFFFF",
};

const submitButtonStyle = {
 backgroundColor: "#048C03",
 color: "#FFFFFF",
};

export default DrinkingWaterForm;

Este componente React representa un formulario para que los usuarios se suscriban a un servicio de recordatorio de beber agua. El formulario permite al usuario introducir su número de teléfono y la frecuencia con la que desea recibir recordatorios para beber agua.

El componente importa los módulos necesarios, incluidos los componentes de React Bootstrap para los elementos del formulario y una imagen para la visualización. Define varios estilos para el contenedor, la imagen, el título, el formulario, las etiquetas de formulario, los controles de formulario y el botón de envío.

El componente utiliza el useState para gestionar el estado de los hooks phoneNumber y frequency del formulario. Define una función handleSubmit que se ejecuta cuando el usuario envía el formulario. La función registra los datos del formulario en la consola y, a continuación, realiza una solicitud POST al punto final de la API de backend /sign-up con los datos del formulario.

Si la solicitud tiene éxito, la función devuelve la respuesta JSON. En caso contrario, muestra una ventana de alerta con el código de estado de la respuesta.

El componente renderiza el formulario con las etiquetas Form y Button de React Bootstrap. El formulario incluye dos campos de entrada para el número de teléfono y la frecuencia y un botón de envío.

Cuando el usuario introduce datos en los campos de entrada y pulsa el botón de envío, se llama a la función handleSubmit para enviar los datos del formulario al punto final de la API. El componente también muestra una imagen y un título para el formulario y aplica los estilos definidos anteriormente a los distintos elementos del formulario.

Añada cualquier imagen al directorio que desee mostrar en la interfaz de usuario y sustituya la ruta de la imagen por la ruta correcta.

Actualice el frontend/src/App.js para incluir el componente DrinkingWaterForm componente:

import React from "react";
import DrinkingWaterForm from "./DrinkingWaterForm";
function App() {
 return (
   <div>
     <h1>Drinking Water Reminder Service</h1>
     <DrinkingWaterForm />
   </div>
 );
}
export default App;

Conectar el backend y el frontend

Es hora de ejecutar el frontend y el backend juntos.

Navega a un terminal y entra en el directorio backend desde la raíz del proyecto.

Escriba node app.js para ejecutar el backend. A continuación, en un terminal separado, cd en frontend y escribe:

npm start

Genial, ¡ya tienes el frontend y el backend funcionando simultáneamente! Abre http://localhost:3000 en tu navegador para ver la aplicación Recordatorio de agua potable.

Drinking water Reminder Service home page

Perfecto. Has creado una aplicación de recordatorio de agua potable con Node, Vonage y React. Ahora puedes probarla con la entrada que desees.

Primero, debes agregarlo a los números de prueba, ya que en las cuentas de prueba del panel de Vonage sólo puedes usar números de prueba preverificados, lo cual puedes hacer yendo a tus números y verificándolos. Obtén más información sobre números de teléfono aquí.

Vaya a localhost:3000 e introduzca su número de teléfono en el formato [COUNTRYCODE], por ejemplo, si es un número de Gran Bretaña sería 44xxxxxxxxxx, y la frecuencia que desea que se le recuerde como abonado. Aquí, para la entrada 1 y un número determinado, inicialmente, se envía un mensaje a ese número. A partir de ese momento, cada 1 minuto, se enviará un mensaje recordatorio por SMS para que bebas agua.

Conclusión

Este artículo muestra cómo crear una aplicación web de recordatorio de agua potable basada en suscripción usando Node, React y la API Messages API de Vonage. Este tutorial te ha introducido al uso de las API de Vonage en tus proyectos.

Si estás interesado en obtener más información sobre las API de Vonage y lo que pueden hacer, consulta el Portal para desarrolladores de API de Vonage. Puedes encontrar documentación, ejemplos de códigos y tutoriales para una amplia variedad de API, que incluyen SMS, voz, video y más.

También puedes mantenerte al tanto de las últimas noticias y actualizaciones de Vonage siguiéndolos en Twitter (@VonageDev) y uniéndote a su comunidad Slack. Estos canales son excelentes lugares para conectarte con otros desarrolladores, hacer preguntas y obtener más información sobre Vonage y sus API.

Te alentamos a que sigas explorando diferentes API y marcos con Vonage. Hay muchas posibilidades de crear aplicaciones innovadoras y útiles. Salud.