){kind=small}
Construir un tablero interactivo: WhatsApp, SMS y MMS a un sitio web (Parte 1)
Tiempo de lectura: 11 minutos
¿Estás interesado en crear un tablón interactivo para mostrar mensajes en eventos? Este tutorial sobre cómo crear una aplicación web Node.js Express te guiará para recibir mensajes SMS, MMS y WhatsApp, guardarlos en una base de datos y mostrarlos en un sitio web. Además, compartiré consejos para una mensajería segura para la familia. En Parte 2 te mostraré cómo crear la aplicación web utilizando AI Studio, ¡así que permanece atento!
El código del proyecto código del proyecto está en GitHub. Clónalo y vamos con el tutorial a continuación. He preparado para usted para explicar todos los bits paso a paso.
Se esperan algunas cosas de ti antes de empezar con este proyecto. Las enumero a continuación:
Una cuenta de Vonage - para usar las API de comunicación para recibir mensajes SMS, MMS y WhatsApp.
Una Account de Airtable - para almacenar el número de teléfono, los mensajes de texto y las imágenes
ngrok - es un túnel para exponer el código local a Internet
La interacción comienza cuando un usuario envía un mensaje SMS, MMS o WhatsApp a un número. La estructura del proyecto que crearemos paso a paso debería tener este aspecto al final del tutorial.
Utilizamos Express.js y las siguientes rutas (puntos finales que exponen diferentes funcionalidades de una aplicación web) que la aplicación expone para los mensajes entrantes, enviándolos a un sitio web mediante la obtención de datos en Airtable.
/inbound: Ruta POST para mensajes entrantes, interactuando con Airtable para su almacenamiento./messages/:messageId/:status: Ruta POST para actualizar el estado de los mensajes en Airtable./messages: Ruta GET para obtener mensajes de Airtable filtrados por estado.
Iremos añadiendo todos los bloques de construcción a medida que avancemos en este tutorial; por ahora, vamos a exponer a Internet el proyecto que tendremos ejecutándose localmente; utilizaremos ngrok.
Ejecute ngrok http 3001 desde tu terminal, en este caso, porque se ejecuta en el puerto 3001. Luego agregaremos el punto final del webhook generado a nuestro Panel de Vonage utilizando la Messages API en la siguiente subsección.
Como se indicó al comienzo de este artículo, tener una Account de Vonage es un requisito previo para este tutorial. Puedes seguir los pasos a continuación para registrarte y crear una nueva 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.
Ingresa a tu panel de Vonage
Vaya a "Numbers" y haga clic en "Comprar Numbers" en el menú de la izquierda.
Buscar y comprar un número de teléfono en su país
Vaya a "Applications" (Aplicaciones) en el menú de la izquierda y haga clic en "Create a new application" (Crear una nueva aplicación).
Dale a la aplicación un nombre como "Pizarra interactiva".
En Capacidades, active Mensajes
En Inbound SMS Webhook, establezca la URL en la URL de su servidor + la ruta '/inbound
En Status Webhook, establezca la URL a la URL de su servidor + la ruta '/status
Messages Inbound and Status URLs.Haga clic para guardar la solicitud en la parte inferior derecha de la página
Vincule su número adquirido en la parte inferior de la página de solicitud haciendo clic en "Vincular" delante del mismo.
Cualquier SMS o MMS enviado a ese número llegará a la ruta /inbound y será procesado. Hay algunos requisitos para que el número tenga la capacidad de enviar mensajes MMS; los he enumerado en esta entrada del blog, Cómo enviar mensajes MMS con Node.js.
A continuación te explicamos cómo configurar tu sandbox de mensajes de WhatsApp para probarlo. También puedes configurarlo con números de teléfono virtuales y de WhatsApp para empresas.
Ingresa a tu panel de Vonage
Haga clic en "Messages Sandbox" en "Herramientas para desarrolladores" en el menú de la izquierda "Messages API" y haga clic en "Crear un nuevo WhatsApp Sandbox"
Elija el Sandbox de WhatsApp. Puedes conectarte a ese sandbox enviando un mensaje de WhatsApp al número de teléfono permitido escaneando el código QR proporcionado.
En Webhooks, establezca la URL del mensaje entrante en la URL de su servidor + la ruta '/inbound'.
Tu número de teléfono puede enviar y recibir mensajes de WhatsApp con el sandbox de Messages API de Vonage.
Si ha clonado el enlace del repositorio GitHub proporcionado o estés creando la carpeta del proyecto ahora, asegúrate de que tienes una carpeta principal para este proyecto; podemos llamarla 'interactive-board'. Después, asegúrate de que hay un archivo .env que contenga nuestras variables de entorno para este proyecto, añadiremos las siguientes variables:
Crear un Token de Acceso Airtabley añada los ámbitos que utilizaremos para este proyecto: data.records:read to Ver los datos en los registros y data.records:write to crear, editar y borrar registros. Por último, darle acceso al espacio de trabajo que actualmente utilizamos para este proyecto. Haga clic para crear y añadir el token a la variable de entorno 'AIRTABLE_ACCESS_TOKEN'. También necesitaremos nuestro Airtable Base ID. Puede consultar su documentación para obtener ayuda Encontrando IDs en la API de Airtable. Su URL base debería parecerse a https://airtable.com/AIRTABLE_BASE/string-of-characters. El AIRTABLE_BASE es el primer conjunto de caracteres después de airtable.com/ y antes del segundo /.
Utilizaremos HTML y CSS para mostrar los mensajes que el archivo main.js obtiene de nuestra API y se encarga de la lógica javascript. Cree una carpeta public seguida de un archivo index.html para mostrar la interfaz de usuario del tablón de anuncios e importar el archivo main.js para acceder a los datos de los mensajes.
Añade el estilo CSS que presenta tres clases fundamentales: .message-record para los mensajes individuales, con un fondo degradado y relleno; .event-title para el título principal, también con un degradado para darle énfasis, y .message-grid para organizar los mensajes en una cuadrícula adaptable. En este código utilizo una etiqueta <style> en este código, pero si lo prefieres, puedes crear un archivo CSS e importarlo a tu archivo HTML.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Interactive Board</title>
<style>
.message-record {
background: linear-gradient(135deg,#871fff,#7ec9f4);
padding: 10px;
box-sizing: border-box;
}
.event-title {
background: linear-gradient(135deg,#d41f9c,#ffa78c);
}
.message-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
grid-gap: 10px;
}
</style>
</head>
<body>
<h1 class="event-title">Vonage ♥s <Event Name></h1>
<div id="messages"></div>
<script type="module" src="/main.js"></script>
</body>
</html>
Es hora de crear el main.js archivo bajo la carpeta public que hemos importado en nuestro HTML y añadir el código para obtener los mensajes del servidor Express y mostrarlos en una cuadrícula.
Cree el main.js archivo en la carpeta public y añada los siguientes fragmentos de código:
const messagesDiv = document.getElementById("messages");
messagesDiv.className = "message-grid";Obtener mensajes del servidor:
function fetchMessages() {
fetch("http://localhost:3001/messages?status=Accepted")
.then(response => response.json())
.then(data => {
// Process data...
})
.catch(error => console.error(error));
}
Actualiza los mensajes cada 60 segundos:
setInterval(fetchMessages, 60000);
Veamos como el servidor Express maneja los mensajes entrantes y los guarda en Airtable. Añade el siguiente código dentro del archivo 'index.js'.
Importamos la dependencia dotenv para cargar variables de entorno de .envExpress para manejar las solicitudes web, y el SDK Airtable para integrarse con la API Airtable.
const dotenv = require('dotenv').config(); // loads environment variables
const express = require('express') // web framework
const Airtable = require('airtable') // Airtable SDK
const base = new Airtable({apiKey: process.env.AIRTABLE_ACCESS_TOKEN})
.base(process.env.AIRTABLE_BASE)Utilice el token de acceso Airtable y el ID de la base almacenados en .env para inicializar la base de Airtable. (Verifique el paso Variables de Entorno de este tutorial). Esta base contiene las tablas Numbers y Messages.
/inbound Solicitudes
app.post('/inbound', (req, res) => {
// ... handle incoming messages
const { from, text, channel, message_type } = req.body;
console.log(JSON.stringify(req.body));
res.send('Message received!');
})
Definimos una ruta POST en /inbound para recibir mensajes entrantes. Esto mostraría "¡Mensaje recibido!" en la pantalla cuando una petición llegue a la ruta /inbound ruta. Reemplazaremos esto más tarde por guardar en la base de datos, pero es una forma rápida de verificar que los mensajes están llegando.
base('Numbers').select({
filterByFormula: `Number=${from}`
}).eachPage(records => {
if(records.length == 0) {
// create a new user
} else {
// existing user, get ID
}
})
Busque el número del remitente en la tabla Numbers. Si no hay ninguna coincidencia, cree un nuevo usuario. En caso contrario, obtenga el ID de registro del usuario existente.
let status = 'Pending'
base('Messages').create({
Message: text,
Number: [numberId],
Status: status,
ImageUrl: imageUrl
})Cree un nuevo registro de mensaje en Airtable con el contenido del mensaje, el ID del remitente, el estado y la URL de la imagen.
Nuestra aplicación utiliza un archivo editable manualmente blocklist.txt para la moderación de mensajes, permitiéndole añadir cualquier palabra o frase que considere inapropiada o irrelevante.
Cargar la lista de bloqueos: El archivo
blocklist.txtse lee inicialmente utilizando el módulo de sistema de archivos fs de Node.js. Cada línea de este archivo representa una palabra o frase a bloquear. Esto se logra con el siguiente código:let blocklist = fs.readFileSync('blocklist.txt', 'utf8').split(/\s+/);Copia
Esta línea lee el contenido del archivo, dividiéndolo en una serie de palabras/frases basadas en espacios y saltos de línea.
Comprobación de mensajes: Cuando la aplicación recibe un nuevo mensaje en la ruta ' /inbound', comprueba si el texto contiene palabras bloqueadas. La comprobación compara el texto del mensaje con cada palabra bloqueada, sin tener en cuenta las mayúsculas o minúsculas. Esto garantiza que el filtro funcione incluso si alguien escribe una palabra incorrecta con mayúsculas raras.
if (blocklist.some(word => message.toLowerCase().includes(word.toLowerCase()))) { // actions to reject the message }CopiaEmpuñadura Partidos: Si un mensaje contiene alguna palabra de la lista de bloqueo, su estado pasa inmediatamente a "Rechazado". Por defecto, el estado de cada mensaje es "Pendiente", lo que indica que está a la espera de moderación.
let status = "Pending"; if (blocklist match) { status = "Rejected"; } // Code to save the message with its updated statusCopiaActualizar la lista de bloqueo: Para añadir nuevas palabras o frases, abra
blocklist.txtintroduzca las nuevas entradas (una por línea) y guarde el archivo. Puede ser necesario reiniciar el servidor para que los cambios surtan efecto.
Este mecanismo de listas de bloqueo es una capa fundamental de la moderación de contenidos, que permite filtrar los mensajes no deseados en función de criterios específicos. Aunque se trata de un proceso manual, ofrece una forma sencilla y eficaz de mantener la calidad y relevancia de los mensajes que se muestran en tu tablón.
Integrar la IA en el sistema de listas de bloqueo podría mejorar significativamente el filtrado de mensajes. La IA puede entender el contexto y el sentimiento, mejorando la detección de spam o contenido inapropiado. Este enfoque avanzado permite una moderación más precisa y adaptable.
Como se indica en los requisitos previos, debe crear una Account en Airtable. Una vez iniciada la sesión, siga los siguientes pasos desde el panel de Airtable.
Cree una base llamada "Mensajes" haciendo clic en "+ Crear una base", y elija un color de tema y un icono opcionalmente; me he saltado el resto de la configuración, pero siéntase libre de rellenarlo si lo desea, y fui hasta el final de la creación de la base donde me lleva a la base Mensajes.
Ahora puede ver algunas filas numeradas vacías. Vamos a crear dos tablas: Numbers para almacenar los números de teléfono de los usuarios y Messages para almacenar los mensajes entrantes.
Añade una columna "Number" a la tabla Numbers.
La tabla Mensajes debe tener las siguientes columnas 'Mensaje', 'Número' (vinculada a la tabla Numbers), y 'Estado' de tipo 'Selección única' y añadir las opciones 'Aceptado', 'Pendiente' y 'Rechazado'. Y, por último, 'ImageUrl'.
Crear vistas como "Vista de cuadrícula" para filtrar mensajes
En los siguientes pasos, le mostraré cómo hacer coincidir la base de Airtable con el código, utilizar las tablas Numbers y Messages, y realizar operaciones CRUD como crear, seleccionar, actualizar y utilizar filtros para consultar los estados de los mensajes, siga adelante y añada los siguientes pasos a su archivo 'index.js'.
Es hora de inicializar 'Base'; añadiremos la Clave API de Airtable y Base en nuestro código JavaScript.
const base = new Airtable({apiKey: process.ENV.AIRTABLE_KEY}).base(process.ENV.ACCESS_TOKEN);La tabla Numbers se utiliza para buscar o crear nuevos usuarios:
base('Numbers').create({Number: phoneNum})
base('Numbers').select({filterByFormula: `Number=${phoneNum}`})La tabla Mensajes se utiliza para crear nuevos mensajes entrantes:
base('Messages').create({
Message: text,
Number: [numberId],
Status: status,
ImageUrl: imageUrl
})Los mensajes se seleccionan mediante filtros:
base('Messages').select({
filterByFormula: `Status="${statusFilterValue}"`
})Se actualizan los estados de los mensajes:
base('Messages').update(messageId, {
Status: status
})
Ahora que tenemos el código y la base de datos en su lugar, es el momento de probar todo. Asegúrate de que todas las dependencias están instaladas ejecutando npm install. Ejecuta el proyecto escribiendo el comando node index.js desde tu terminal, y asegúrate de que tienes una instancia de ngrok ejecutándose.
Ve a localhost:3001 en tu navegador. Envía un mensaje SMS, MMS o WhatsApp al número de teléfono virtual de Vonage asociado con tu aplicación web. Ve a tu base de Airtable y cambia el estado del mensaje que recibiste. Si es aceptado, verás la salida del mensaje en el sitio web que se ejecuta en localhost:3001.
Hoy has aprendido a construir un tablero interactivo que recibe mensajes SMS, MMS o WhatsApp y los emite. He utilizado Airtable para este ejemplo, pero puedes utilizar cualquier otra base de datos de tu elección (por ejemplo, MongoDB / Firebase) para almacenar y recuperar información. Para la siguiente serie de este tutorial, aprenderás cómo hacer la misma funcionalidad utilizando nuestro AI Studio.
No dudes en chatear con nosotros y compartir lo que te ha parecido este tutorial en nuestra cuenta de X, antes Twitter o Comunidad Slack¡!