Construire un planificateur de messages avec Node et Vonage

Chez Vonage, nous avons écrit de nombreux articles sur la façon d'envoyer un SMS. Cependant, il arrive parfois que vous ne souhaitiez pas envoyer un SMS à l'instant même : vous voulez l'envoyer à l'avenir. Dans ce tutoriel, vous apprendrez à programmer l'envoi futur d'un SMS à l'aide de l'API Messages de Vonage et de Node.

Êtes-vous prêt à commencer ?

Construisons-le !

Conditions préalables

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.

This tutorial also uses a virtual phone number. To purchase one, go to Numbers > Buy Numbers and search for one that meets your needs.

Ready to start building?

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

Pour suivre ce tutoriel, vous avez besoin d'un Account Vonage. Vous avez également besoin de Node, que vous pouvez télécharger ici.

Mise en place initiale

Pour commencer, la première chose à faire est d'installer les modules suivants :

node install express @vonage/server-sdk node-cron @vonage/cli -g

Express est le framework web que nous utiliserons pour construire notre application. Nous utiliserons la bibliothèque Vonage pour envoyer notre message SMS, nous utiliserons node-cron pour créer un job cron pour l'envoyer dans le futur, et le CLI Vonage pour créer une application Vonage.

Utilisez le CLI de Vonage pour entrer la commande suivante avec votre clé et votre secret API de Vonage. Vous pouvez trouver ces informations dans le tableau de bord du développeur.

vonage config:set --apiKey=VONAGE_API_KEY --apiSecret=VONAGE_API_SECRET

Ensuite, créez un nouveau répertoire pour votre projet et placez-y un CD :

mkdir my_project
CD my_project

Maintenant, utilisez le CLI pour créer une application Vonage.

vonage apps:create
✔ Application Name ... new_app
✔ Select App Capabilities > Messages
✔ Create messages webhooks? ... No
✔ Allow use of data for AI training? Read data collection disclosure  ... yes

Application created: 34abcd12-ef12-40e3-9c6c-4274b3633761

Enregistrez l'identifiant de l'Application : vous en aurez besoin plus tard.

Vous avez maintenant besoin d'un numéro pour pouvoir recevoir des appels. Vous pouvez en louer un en utilisant la commande suivante (en remplaçant le code du pays par votre code). Par exemple, si vous êtes en Grande-Bretagne, remplacez US par GB :

vonage numbers:search US
vonage numbers:buy [NUMBER] [COUNTRYCODE]

Reliez maintenant le numéro à votre application :

vonage apps:link --number=VONAGE_NUMBER APP_ID

Construire le back-end

Nous sommes maintenant prêts à écrire le code de notre application.

CD dans le répertoire où vous avez créé votre application Vonage et créez un fichier .env fichier.

Ajouter les informations suivantes :

FROM=<your_vonage_number>
API_KEY=<your_vonage_API_key>
API_SECRET=<your_vonage_API_secret>
APPLICATION_ID=<your_vonage_application_ID>
PRIVATE_KEY=<your_vonage_private_key_file_name>

Ensuite, créez un nouveau fichier JavaScript et importez les bibliothèques dont vous avez besoin pour ce projet.

express = require('express')
const Vonage = require('@vonage/server-sdk')
cron = require('node-cron')
const bodyParser = require('body-parser')
const path = require('path');

Créez une application Express comme celle-ci :

app = express()

Maintenant, ajoutez l'intergiciel dont votre application a besoin pour traiter les requêtes POST :

app.use(bodyParser.json())
app.use(bodyParser.urlencoded({
    extended: true
}))
app.use(express.static('public'))

Ajoutez ce code pour configurer l'API Messages de Vonage :

const vonage = new Vonage({
    apiKey: process.env.API_KEY,
    apiSecret: process.env.API_SECRET,
    applicationId: process.env.APPLICATION_ID,
    privateKey: process.env.PRIVATE_KEY
})

Ensuite, définissez une fonction qui servira index.html lorsque vous accéderez à la page d'accueil de votre application web.

app.get('/', (req, res) => {
    res.sendFile(path.join(__dirname, '/index.html'))
})

Nous avons maintenant besoin d'un point de terminaison pour envoyer nos SMS.

Ajoutez le code suivant à votre application :

app.post('/api/sms', (req, res) => {
    res.send(200)
    const triggerTime = new Date(req.body['meeting-time'])
    let task = cron.schedule('* * * * * *', () => {
        if (new Date() > triggerTime) {
            vonage.message.sendSms(process.env.FROM, req.body['number'], req.body['message'], (err, responseData) => {
                if (err) {
                    console.log(err);
                } else {
                    if (responseData.messages[0] === "0") {
                        console.log("Message sent successfully.");
                    } else {
                        console.log(`Message failed with error: ${responseData.messages[0]['error-text']}`);
                    }
                }
            })
            task.stop()
        }
    });
})

Ce code accepte une requête POST avec une heure (quand envoyer le SMS), le numéro auquel envoyer le message, et le message à envoyer et l'envoie au destinataire à l'heure programmée en utilisant node-cron pour programmer le message.

Node-chron accepte deux paramètres : l'heure à laquelle il faut faire quelque chose et une fonction contenant le code de ce qu'il faut faire.

Le code ci-dessus envoie un SMS en utilisant l'API de messagerie de Vonage et les données de la demande POST.

Enfin, ajoutez cette ligne de code à la fin de votre fichier pour que votre serveur écoute sur le port 5000.

app.listen('5000')

Vous pouvez maintenant faire fonctionner votre serveur en exécutant le code contenu dans ce fichier.

Mais rien ne se passe encore, car nous devons créer notre interface.

Construire le Front-End

Créez un nouveau fichier appelé index.html et ajoutez-y ce qui suit :

<meta charset="UTF-8">
    <title>Message Scheduler</title>
    <link rel="stylesheet" href="style.css">
  
  
    <h1>Message Scheduler </h1>
    <form action="/api/sms" method="POST">
      <label for="time">Start date:</label>
      <br>
      <input type="datetime-local" id="time" name="meeting-time" value="2022-03-03sT00:00" min="2022-03-03sT00:00" max="2023-06-14T00:00">
      <br>
      <label for="number">Number:</label>
      <br>
      <input id="number" name="number">
      <br>
      <label for="message">Message:</label>
      <br>
      <input id="message" name="message">
      <br>
      <input type="submit" value="Submit" id="submit">
    </form>

En haut de votre fichier HTML, vous importez style.css, qui contient des feuilles de style CSS pour améliorer l'aspect de cette page.

<link rel="stylesheet" href="style.css">

Le reste de ce code HTML crée un formulaire qui recueille une date et une heure (quand envoyer le texte), un numéro de téléphone (à qui l'envoyer) et un message (le message à envoyer).

Ce code est simple parce que nous avons tiré parti du calendrier intégré de JavaScript.

Lorsque vous soumettez le formulaire, il envoie toutes les informations recueillies auprès de l'utilisateur au back-end, qui planifie l'envoi du message texte.

Lorsque vous exécutez le fichier JavaScript que vous avez créé précédemment et que vous naviguez sur votre serveur local à l'adresse http://127.0.0.1:5000, vous devriez voir le formulaire que nous avons créé.

Lorsque vous remplissez le formulaire et que vous appuyez sur "Envoyer", votre message texte devrait être envoyé à l'heure prévue.

Réflexions finales

J'espère que ce tutoriel vous a permis d'en savoir plus sur l'API Messages de Vonage et sur la façon de programmer des SMS.

N'oubliez pas de nous suivre sur Twitter et de rejoindre notre canal Slack pour plus d'informations.

Merci de votre lecture !