Airtable est un outil de base de données en ligne qui vous permet de créer des ensembles de données liés avec une interface conviviale. Au lieu de devoir créer des tableaux de bord administratifs pour vos données, Airtable vous permet d'interroger, de trier et de filtrer les données grâce à son interface accessible, collaborative et (si j'ose dire) amusante.

À la fin de ce tutoriel, vous serez en mesure de stocker les messages SMS envoyés par vos utilisateurs dans une base Airtable et d'y répondre à l'aide de l Vonage Messages API.

Le code de ce tutoriel se trouve sur GitHub.

Conditions préalables

• Un compte Compte Airtable

• Node.js installé sur votre machine

• ngrok pour rendre le code de votre machine locale accessible au monde extérieur

• Le 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.

Mise en place d'une base de table aérienne

Les bases de données dans Airtable sont connues sous le nom de bases et consistent en plusieurs tables. Comme toutes les bases de données relationnelles, ces tables peuvent être liées en utilisant des champs communs. Bien que vous interagissiez avec Airtable via leur API, vous devez d'abord configurer la base sur leur site Web.

Comme vous pouvez le voir ci-dessus, créez un tableau Messages et un tableau Numbers. La table Messages doit avoir un lien avec la table Numbers, qui créera un nouveau champ dans Numbers en votre nom. Notez que les noms des tables et des champs sont sensibles à la casse. Ajoutez votre numéro de téléphone à la table Numbers en utilisant le format de numéro standard de Vonage (par exemple, un numéro américain aurait le format 14155550101, tandis qu'un numéro britannique aurait le format 447700900123).

Dans votre Account Airtable vous devez également générer et noter votre clé API.

Exécuter ngrok

Notre application Vonage nécessite une URL publique, et ngrok vous permet de prendre des applications fonctionnant sur localhost et de les rendre publiques. Pour plus d'informations, consultez notre article sur le développement local avec ngrok. Une fois configuré, vous devrez l'exécuter en ciblant le port 3000 - le port sur lequel nous construirons plus tard notre application Express.js :

$ ngrok http 3000

Lorsque vous lancez ngrok, vous verrez que localhost:3000 reçoit une URL de redirection que vous pouvez utiliser pour fournir un accès public à votre application locale. Cela ressemblera à quelque chose comme https://qwertyui.ngrok.io. Vous en aurez encore besoin plus tard, alors prenez-en note.

Créer une application Vonage

Pour commencer à utiliser l'API Messages, vous devrez acheter un numéro de téléphone virtuel et configurer une nouvelle application Vonage. Bien que vous n'utilisiez l'API Messages que pour les SMS, vous pouvez facilement l'étendre à WhatsApp, Facebook Messenger, Viber, etc. Créez un répertoire pour votre nouveau projet, accédez-y dans votre terminal et exécutez les commandes suivantes :

# 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

Installer les dépendances

La dernière étape avant d'écrire du code est d'installer les dépendances :

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

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

Mise en place de l'application Express.js

Créer un fichier index.js et mettez en place une application Express.js standard :

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);

Créer un gestionnaire de webhook entrant

Lorsque vous avez configuré votre application Vonage, vous avez fourni une URL pour les messages entrants, basée sur l'adresse ngrok. Ensuite, vous allez créer la route qui gère ces données entrantes :

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

Point de contrôle ! Testez votre application. Exécutez votre application en utilisant node index.jspuis envoyez un SMS à votre numéro Vonage. Vous devriez voir les données de cet appel apparaître dans votre terminal.

Enregistrer les SMS dans Airtable

C'est génial ! Vous avez un serveur Express.js fonctionnel capable d'accepter des messages SMS entrants. Maintenant, poussons-les vers Airtable à l'intérieur du gestionnaire de messages entrants. Avant d'utiliser cet extrait, notez que lorsque vous vous référez à des champs liés, Airtable vous demande de fournir l'ID Airtable de ce champ, et non sa valeur. Par exemple, si vous avez un enregistrement Numbers pour 4412345678900, cet enregistrement aura également un ID. Lorsque vous créez un enregistrement Message, vous avez besoin de l'ID de l'enregistrement - et non de 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 haut, vous demandez le client JavaScript Airtable et l'initialisez avec votre ID de base. Si 'https://airtable.com/tblAuZ8qFuP2I8mDh/viwVyLmBMW772S9sd' est l'URL de votre page web Airtable, alors tblAuZ8qFuP2I8mDh est l'ID de base (la deuxième longue chaîne est la vue, dont nous n'avons pas besoin).

Dans la première section, vous sélectionnez tous les messages dont la valeur Number est égale au MSISDN (numéro de téléphone) entrant, puis vous obtenez l'Airtable ID de ce champ Number et vous le transmettez à notre fonction createMessage fonction.

La fonction createMessage crée une nouvelle ligne Airtable et affiche un message de réussite ou d'erreur dans la console lorsqu'elle est terminée.

Point de contrôle ! Testez votre application. Redémarrez votre application et envoyez un SMS à votre numéro de téléphone virtuel. Vous devriez voir un nouveau message apparaître dans le tableau Messages.

Enregistrer de nouveaux Numbers dans Airtable

Si vous envoyez un SMS à partir d'un numéro qui ne figure pas dans votre tableau Numbers, vous recevrez une erreur de la part d'Airtable. Vous devez vérifier lorsque vous recevez un message si vous avez déjà un enregistrement Numbers. Si ce n'est pas le cas, créez-en un d'abord, et si c'est le cas, vous devez créer un message comme d'habitude. Modifions la sélection du message et créons une nouvelle fonction pour créer 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();
}

Maintenant, si aucun enregistrement n'est associé au numéro de téléphone entrant, vous allez d'abord créer un enregistrement Numbers, puis un enregistrement Message. S'il y en a un, nous allons directement créer un message.

Point de contrôle ! Supprimez tous les messages et tous les Numbers de votre base Airtable. Redémarrez votre application et envoyez un SMS à votre numéro de téléphone virtuel. Vous devriez voir un nouveau numéro et un nouveau message dans Airtable.

Envoyer une confirmation à l'utilisateur

Le fait que vous enregistriez correctement les données est une bonne chose, mais vos utilisateurs n'ont aucune idée de la réception de leur message. Corrigeons cela.

Avant votre gestionnaire de messages entrants, incluez le client JavaScript Node.js de Vonage et initialisez-le :

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'
});

Le fichier private.key devrait avoir été généré dans ce répertoire lorsque vous avez créé une nouvelle application Vonage. Assurez-vous qu'il s'y trouve (déplacez-le dans ce répertoire si ce n'est pas le cas), et vous serez prêt à partir.

Maintenant que votre client est inclus et initialisé, mettez à jour la fonction createMessage pour envoyer un SMS en réponse une fois que vous avez sauvegardé l'enregistrement 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();
	})
}

Et voilà, la démo est terminée. Redémarrez votre application une fois de plus et essayez-la. Lorsque vous envoyez un message, vous devriez maintenant recevoir une réponse via la nouvelle API Messages de Vonage.

Quelle est la prochaine étape ?

Il existe de nombreuses possibilités de développer cette application, qu'il s'agisse d'une gestion plus robuste des erreurs, de la demande du nom de l'utilisateur et de son enregistrement par rapport à un numéro, ou d'un journal complet de toutes les interactions reçues et envoyées. N'hésitez pas à faire preuve de créativité !

Mais pour l'instant, restez assis et attendez que les textes arrivent.

L'exemple de code complet est disponible à l'adresse suivante https://github.com/nexmo-community/save-sms-airtable-express