){kind=small}
Construire un système interactif de notifications par SMS en utilisant ExpressJS
L'un des aspects les plus surprenants des SMS est leur omniprésence. Que vous ayez un smartphone ou un vieux téléphone "muet" des années 90, vous serez en mesure d'envoyer et de recevoir des SMS. Bien que de nombreuses entreprises ne les utilisent que comme service de notification, ils deviennent de véritables outils de communication. vraiment Ils deviennent vraiment puissants lorsqu'ils facilitent un canal de communication bidirectionnel entre les entreprises et les clients.
Pour ce tutoriel, nous allons créer un système de notification interactif pour une société de livraison de colis. Pour ce faire, nous avons créé un simple "Nexmo Mail" qui permet à un employé de la société de livraison de taper un numéro de téléphone et d'avertir le destinataire de la livraison d'un colis.
Cette application nous sert de point de départ pour ce tutoriel. Il s'agit d'une application Express de base, écrite en Javascript avec quelques modules supplémentaires pour faciliter les choses. Nous avons ajouté le module body-parser pour analyser les formulaires soumis, et nous avons ajouté le module Bootstrap pour rendre notre interface utilisateur un peu plus attrayante. Enfin, nous avons ajouté quelques modules babel afin que nous puissions écrire des programmes modernes en ES2015-moderne.
Vous pouvez télécharger le point de départ de ce tutoriel sur Github :
Visitez ensuite localhost:3000 dans votre navigateur et soumettez un numéro de téléphone au format international, par exemple 447755555555.
Tout le code de ce point de départ se trouve sur le site de la forme-nombre sur Github. Tout le code que nous allons ajouter ci-dessous se trouve sur la branche delivery-notifications sur Github. Pour votre commodité, vous pouvez voir tous les changements entre notre point de départ et notre point d'arrivée sur Github.
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.
L'API SMS API de Vonage de Vonage vous offre une faible latence et une grande capacité de livraison. C'est le moyen le plus fiable d'atteindre les utilisateurs du monde entier. Bien qu'elle offre de nombreuses fonctionnalités, nous ne nous intéresserons qu'à deux éléments essentiels : l'envoi et la réception de messages textuels de base. Nous utiliserons cette API pour envoyer aux gens une notification de leur livraison, leur proposer de modifier leur créneau de livraison et écouter les changements qu'ils nous envoient. Pour ce faire, nous allons apporter les modifications suivantes à notre application :
Ajouter Vonage à notre application
Envoi d'un SMS au numéro fourni avec leur créneau de livraison et les instructions sur la façon de changer leur créneau.
Écouter et confirmer les messages textuels entrants de l'utilisateur pour changer de créneau horaire
Pour simplifier les choses, nous coderons les options en dur dans notre application. Dans votre application, vous déterminerez évidemment les options de l'utilisateur sur la base d'un algorithme d'apprentissage automatique que vous avez personnellement inventé.
Afin d'envoyer un SMS via Vonage, nous allons devoir ajouter l'option Vonage au projet.
npm install @vonage/server-sdk dotenv --saveComme vous pouvez le voir, nous avons également ajouté l'option dotenv . C'est juste pour que l'application puisse charger les identifiants de l'API à partir d'un fichier .env fichier. Vous pouvez trouver vos identifiants sur la page des paramètres de votre Account Nexmo.
# .env
KEY='<your_api_key>'
SECRET='<your_api_secret>'
FROM='<phone_number>'Nous avons également ajouté au fichier le numéro de téléphone Vonage à partir duquel nous enverrons un SMS. .env fichier. Vous pouvez acheter un numéro à partir du tableau de bord Vonageou vous pouvez utiliser la bibliothèque vonage-cli et en acheter un directement à partir de la ligne de commande.
Configurez votre CLI Vonage en utilisant ce guide. Vous n'avez besoin que de l'outil Installation et Configuration de l'application de votre configuration.
Choisissez l'un des numéros de téléphone dans la liste des numéros de téléphone répertoriés lors de la commande. Remplacez VONAGE_VIRTUAL_NUMBER dans la commande ci-dessous par le numéro de téléphone choisi et exécutez la commande.
Maintenant que nous avons notre clé API, notre secret et notre numéro de téléphone Nexmo, nous initialisons le client Nexmo.
// app.js - after the other imports
import Vonage from '@nexmo/server-sdk';
import dotenv from 'dotenv';
dotenv.config();
const vonage = new Vonage({
key: process.env.KEY,
secret: process.env.SECRET
});Désormais, nous pouvons utiliser vonage n'importe où dans notre application pour effectuer les appels d'API dont nous avons besoin.
Actuellement, lorsque l'employé soumet un numéro de téléphone, il appelle le point de terminaison POST /notify qui affiche simplement un texte de confirmation dans le navigateur. Nous devrons ajouter du code pour envoyer un SMS indiquant le créneau de livraison prévu, ainsi qu'une liste d'options parmi lesquelles l'employé pourra choisir.
Nous allons coder en dur quelques options permettant à l'utilisateur de modifier son créneau de livraison.
// app.js - after the previous code
const options = [
'this Friday',
'next Monday',
'next Tuesday'
];Nous pouvons utiliser ces options pour générer un joli message texte à envoyer à l'utilisateur.
// app.js - after the previous code
let notification = "Your Vonage Mail delivery is scheduled for tomorrow between " +
"8am and 2pm. If you wish to change the delivery date please " +
"reply by typing 1, 2 or 3:\n\n";
options.forEach((option, index) => {
notification += `${index+1}. for ${option}\n`;
});
Note : Nous n'avons pas codé en dur l'intégralité du message ici : Nous n'avons pas codé en dur l'ensemble du message ici, car nous aurons à nouveau besoin de ces options ultérieurement.
Il ne nous reste plus qu'à envoyer le message au numéro de téléphone qui nous a été communiqué.
// app.js
app.post('/notify', (request, response) => {
send(request.body.number, notification); // adding this line
response.send('Notification sent');
});
Nous avons enveloppé l'appel à l'API Nexmo dans une fonction send pour rendre les choses plus lisibles et réutilisables. La fonction send enveloppe l'API nexmo.sms.sendTextMessage et pré-remplit le numéro de téléphone Nexmo que nous avons acheté auparavant.
// app.js - anywhere outside of an endpoint call
let send = function(number, message) {
vonage.message.sendSms(process.env.FROM, number, message, (err, responseData) => {
if (err) {
console.log(err);
} else {
if(responseData.messages[0]['status'] === "0") {
console.log("Message sent successfully.");
} else {
console.log(`Message failed with error: ${responseData.messages[0]['error-text']}`);
}
}
});
}
Si vous essayez maintenant de soumettre à nouveau votre propre numéro de téléphone portable, vous devriez recevoir un message texte dans les secondes qui suivent.
Notre dernière astuce consiste à recevoir un message entrant de l'utilisateur qui répond à notre message texte envoyé précédemment. Pour ce faire, nous allons devoir rendre notre application publiquement disponible à un webhook Nexmo.
Commençons par ajouter un point de terminaison fictif que le webhook appellera.
// app.js
app.get('/response', (request, response) => {
// TODO: Confirm selection
response.send('Response processed');
});
Vous avez quelques options pour rendre votre application publiquement accessible par les webhooks Nexmo. Si vous avez la chance d'avoir une IP publique sur votre machine, vous devriez être prêt. Pour les autres, nous pouvons soit déployer l'application, soit utiliser un tunnel SSH, ou ma solution préférée : utiliser l'incroyable logiciel ngrok qui est un outil extraordinaire.
Votre nouveau numéro virtuel Vonage et l'URL de votre Webhook doivent être liés afin que Vonage sache où envoyer les SMS entrants.
Comme pour l'étape précédente, vous pouvez ajouter l'URL de votre webhook à votre numéro virtuel Vonage, mais ce tutoriel montrera l'exemple sur la façon d'effectuer ce changement via le portail web.
Avant de procéder à l'installation, prenez note des points suivants :
VONAGE_VIRTUAL_NUMBER: Le numéro que vous essayez d'utiliser.WEBHOOK_URL: Votre URL Ngrok, suivi de/responseet devrait donc ressembler à quelque chose comme :http://<your_url>.ngrok.io/response
Aller à Page Numbers dans votre tableau de bord.
Cliquez sur l'icône "Edit" (qui ressemble à un stylo) sous la colonne "Manage". Dans le pop up sous SMS > Inbound Webhook URL collez votre WEBHOOK_URL et cliquez sur "Enregistrer".
Si vous obtenez des erreurs à ce stade, assurez-vous que vous utilisez le numéro de téléphone Nexmo sur votre Account, et que l'URL est accessible au public.
La dernière étape consiste à étendre notre point d'accès pour qu'il prenne le message entrant, analyse la réponse, vérifie si elle contient l'une de nos options et envoie un autre message texte pour confirmer leur sélection.
// app.js
app.get('/response', (request, response) => {
// TODO: store this selection somewhere in your database
// parse the message the user sent us
const selection = parseInt(request.query.text) - 1;
const day = options[selection];
// by default we will warn them to send us a valid response
let message = "Please select from one of the valid options only.";
// if the response was valid though we confirm the selection
if (day) {
message = `Thank you! Your delivery has been rescheduled for ${day}`;
}
send(request.query.msisdn, message);
response.send('Response processed');
});
Essayez maintenant de répondre au message que vous avez reçu précédemment. Cela peut prendre quelques secondes en fonction de votre connexion Internet, mais vous devriez recevoir une confirmation dans les secondes qui suivent. Essayez également de répondre à des messages aléatoires et voyez ce qui se passe.
L'API SMS API de Vonage a beaucoup beaucoup plus d'options que celles que j'ai présentées ici, notamment Flash Messages, vCard, vCal, et bien plus encore. Personnellement, j'aime beaucoup la facilité avec laquelle les Vonage CLI d'acheter des numéros de téléphone et de les lier à un point de terminaison.
J'aimerais savoir ce que vous ajouteriez ensuite ? N'hésitez pas à m'envoyer un tweet (je suis @cbetta) pour me faire part de vos réflexions et de vos idées.