Airtable es una herramienta de base de datos en línea que permite crear conjuntos de datos vinculados con una interfaz amigable. En lugar de tener que crear cuadros de mando administrativos para tus datos, Airtable te permite consultarlos, ordenarlos y filtrarlos a través de su interfaz accesible, colaborativa y (me atrevería a decir) divertida.

Al finalizar este tutorial, podrás almacenar los mensajes SMS enviados por tus usuarios en una base de Airtable y responderles utilizando la Mensajes API de Vonage.

El código de este tutorial está en GitHub.

Requisitos previos

• Un Account

• Node.js instalado en su máquina

• ngrok para que el código de su máquina local sea accesible al mundo exterior

• La CLI de Vonage: npm install @vonage/cli -g

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.

Ready to start building?

Experience seamless connectivity, real-time messaging, and crystal-clear voice and video calls—all at your fingertips.

Configurar una base Airtable

Las bases de datos en Airtable se conocen como bases y constan de varias tablas. Como todas las bases de datos relacionales, estas tablas pueden enlazarse utilizando campos comunes. Mientras que usted va a interactuar con Airtable a través de su API, primero debe configurar la base en su sitio web.

Como puede ver arriba, cree una tabla Messages y una tabla Numbers. La tabla Messages debe tener un enlace a la tabla Numbers, que creará un nuevo campo en Numbers en su nombre. Tenga en cuenta que los nombres de tablas y campos distinguen entre mayúsculas y minúsculas. Agrega tu número de teléfono a la tabla Numbers usando el formato de número estándar de Vonage (por ejemplo, un número de EE. UU. tendría el formato 14155550101, mientras que un número del Reino Unido tendría el formato 447700900123).

En su cuenta Airtable también debe generar y tomar nota de su clave de API.

Ejecutar ngrok

Nuestra aplicación de Vonage requiere una URL pública, y ngrok te permite tomar aplicaciones que se ejecutan en localhost y hacerlas públicas. Para más información, echa un vistazo a nuestro post sobre desarrollo local con ngrok. Una vez configurado, necesitarás ejecutarlo apuntando al puerto 3000 - el puerto en el que más tarde construiremos nuestra aplicación Express.js:

$ ngrok http 3000

Cuando ejecutes ngrok, verás que localhost:3000 recibe una URL de reenvío que puedes utilizar para proporcionar acceso público a tu aplicación local. Será algo parecido a https://qwertyui.ngrok.io. La necesitarás de nuevo más adelante, así que anótala.

Crear una aplicación de Vonage

Para comenzar con Messages API, necesitarás comprar un número de teléfono virtual y configurar una nueva aplicación de Vonage. Si bien solo usarás la Messages API para SMS, puedes extenderla fácilmente a WhatsApp, Facebook Messenger, Viber y más. Crea un directorio para tu nuevo proyecto, navega hasta él en tu terminal y ejecuta los siguientes comandos:

# Search numbers that can send/receive SMS (replace GB for other regions)
$ vonage numbers:search GB

# Buy a number from the list
$ vonage numbers:buy [NUMBER_FROM_LIST] [COUNTRYCODE]

# Create a new Vonage messages application
$ vonage apps:create "Application Name" --messages_inbound_url=https://7YOUR_NGROK_URL/inbound --messages_status_url=YOUR_NGROK_URL/status 

# Link your number to your application
$ vonage link:app --number=VONAGE_NUMBER APPLICATION_ID

Instalar dependencias

El último paso antes de escribir código es instalar las dependencias:

# Create package.json (you may leave all answers as default)
$ npm init

# Install dependencies
$ npm install @vonage/server-sdk@beta express body-parser airtable

Configurar una aplicación Express.js

Cree un index.js y configure una aplicación Express.js estándar:

const app = require('express')();
const bodyParser = require('body-parser');
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));

// Other code will go in here

app.listen(3000);

Crear un gestor de webhooks de entrada

Cuando configuraste tu aplicación de Vonage, proporcionaste una URL de mensajes entrantes, basada en la dirección ngrok. A continuación, crearás la ruta que maneja estos datos entrantes:

app.post('/inbound', async (req, res) => {
  console.log(req.body);
  res.status(200).end();
}

¡Punto de control! Pruebe su aplicación. Ejecuta tu aplicación con node index.jsy luego envía un mensaje SMS a tu número de Vonage. Deberías ver los datos de esa llamada aparecer en tu terminal.

Registrar mensajes SMS en Airtable

Genial. Usted tiene un servidor Express.js capaz de aceptar mensajes SMS entrantes. Ahora vamos a enviarlos a Airtable dentro del manejador de mensajes entrantes. Antes de utilizar este fragmento, sólo una nota que cuando se hace referencia a los campos vinculados, Airtable requiere que usted proporcione Airtable ID de ese campo, no su valor. Por ejemplo, si usted tiene un registro de Numbers para 4412345678900 ese registro también tendrá un ID. Cuando cree un registro de Mensaje, necesitará el ID del registro, no 4412345678900.

const Airtable = require('airtable');
const base = new Airtable({ apiKey: config.AIRTABLE_KEY }).base('YOUR_AIRTABLE_BASE_ID');

app.post('/inbound', async (req, res) => {
  const { from, text } = req.body;

  base('Messages').select({
		filterByFormula: `Number=${from}`
	}).eachPage(records => {
		createMessage(text, records[0].fields.Number[0])
	});

	function createMessage(message, numberId) {
		base('Messages').create({
			Message: message,
			Number: [numberId]
		}, err => {
			if (err) { console.error(err); return; }
			console.log('Message saved to Airtable')
			res.status(200).end();
		})
	}

  res.status(200).end();
}

En la parte superior, se requiere que el cliente Airtable JavaScript y inicializarlo con su ID de base. Si 'https://airtable.com/tblAuZ8qFuP2I8mDh/viwVyLmBMW772S9sd' es la URL de su página web Airtable, entonces tblAuZ8qFuP2I8mDh es el ID base (la segunda cadena larga es la vista, que no requerimos).

En la primera sección, se seleccionan todos los mensajes donde el valor Number es igual al MSISDN entrante (número de teléfono), luego se obtiene el ID de Airtable de ese campo Number y se pasa a nuestra función createMessage función.

La función createMessage crea una nueva fila de Airtable y registra un mensaje de éxito o error en la consola cuando se completa.

¡Punto de control! Pruebe su aplicación. Reinicie su aplicación y envíe un mensaje SMS a su número de teléfono virtual. Debería ver aparecer un nuevo mensaje en la tabla Mensajes.

Registrar nuevos Numbers en Airtable

Si envía un mensaje SMS desde un número que no está ya en su tabla Numbers, recibirá un error de Airtable. Debe comprobar cuando reciba un mensaje si ya tiene un registro Numbers. Si no lo tiene, cree uno primero, y si lo tiene, debe crear un Mensaje normalmente. Vamos a modificar la selección de mensajes y crear una nueva función para crear un Numbers:

app.post('/inbound', async (req, res) => {
  const { from, text } = req.body;

  base('Messages').select({
		filterByFormula: `Number=${from}`
	}).eachPage(records => {
		if (records.length == 0) {
			createNumber(text, from)
		} else {
			createMessage(text, records[0].fields.Number[0])
		}
	});

	function createNumber(message, from) {
			base('Numbers').create({
				Number: from
			}, (err, record) => {
				if (err) { console.error(err); return; }
				createMessage(message, record.getId())
			})
    }

	function createMessage(message, numberId) {
		// ...
	}

  res.status(200).end();
}

Ahora, si no hay ningún registro asociado al número de teléfono entrante, crearemos primero un registro de Números y después un registro de Mensajes. Si existe alguno, pasaremos directamente a crear un Mensaje.

Punto de control Borre todos los Mensajes y Numbers de su base Airtable. Reinicie su aplicación y envíe un mensaje SMS a su número de teléfono virtual. Usted debe ver un nuevo número y mensaje en Airtable.

Enviar confirmación al usuario

El hecho de que ahora registres correctamente los datos es brillante, pero tus usuarios no tienen ni idea de que su mensaje ha sido recibido. Vamos a solucionarlo.

Antes de tu controlador de mensajes entrantes, incluye el cliente JavaScript Node.js de Vonage e inicialízalo:

const Vonage = require('@vonage/server-sdk');
const vonage = new Vonage({
  apiKey: config.VONAGE_KEY,
  apiSecret: config.VONAGE_SECRET,
  applicationId: config.VONAGE_APPLICATION_ID,
  privateKey: './private.key'
});

El archivo private.key debería haberse generado en este directorio cuando creaste una nueva aplicación de Vonage. Asegúrate de que esté allí (muévelo a este directorio si no es así) y estarás listo.

Ahora que su cliente está incluido e inicializado, actualice la función createMessage para que envíe un SMS como respuesta una vez que haya guardado el registro de Airtable:

function createMessage(message, numberId) {
	base('Messages').create({
		Message: message,
		Number: [numberId]
	}, err => {
		if (err) { console.error(err); return; }
		vonage.channel.send(
			{ "type": "sms", "number": req.body.from },
			{ "type": "sms", "number": YOUR_VONAGE_NUMBER },
			{ "content": { "type": "text", "text": "Thank you for getting in touch. We will ring you back as soon as possible." } },
			vonageErr => {
					if(vonageErr) { console.error(err); return; } 
			}
		), 
		res.status(200).end();
	})
}

Y con eso, la demo está completa. Reinicia tu aplicación una vez más y pruébala. Cuando envíes un mensaje, ahora deberías recibir una respuesta a través de la nueva Messages API de Vonage.

¿Y ahora qué?

Hay muchas formas de desarrollar esta aplicación: desde una gestión de errores más robusta hasta preguntar el nombre del usuario y registrarlo en un número, pasando por un registro completo de todas las interacciones recibidas y enviadas. No dudes en ser creativo.

Pero por ahora, siéntate y espera a que lleguen los mensajes.

El ejemplo de código completo está disponible en https://github.com/nexmo-community/save-sms-airtable-express