Comment configurer les Webhooks pour les SMS et la Voice entrants sur Glitch

Dans ce tutoriel, vous apprendrez à configurer des webhooks pour gérer les appels vocaux et les SMS entrants à l'aide de Glitch et d'un serveur Node.js, avec Vonage comme plateforme de communication. Un webhook est un moyen pour une application d'envoyer des données en temps réel à une autre lorsqu'un événement spécifique se produit. Il agit comme un auditeur, attendant un événement - comme un appel ou un SMS entrant - et déclenche une action prédéfinie lorsque cet événement se produit. Cela permet à votre serveur de réagir instantanément à des déclencheurs externes, garantissant ainsi des réponses opportunes aux interactions des utilisateurs.

La mise en œuvre de webhooks offre des avantages significatifs pour votre application. En permettant le traitement en temps réel des appels vocaux et des SMS, vous pouvez créer des expériences de communication plus interactives et réactives pour vos utilisateurs. Par exemple, vous pouvez automatiser les réponses de l'assistance clientèle, intégrer les systèmes CRM pour enregistrer les interactions ou déclencher des flux de travail en fonction des messages entrants. Cela peut améliorer l'engagement et l'efficacité des utilisateurs en réduisant les tâches manuelles.

À la fin de ce guide, vous aurez un serveur web entièrement fonctionnel qui écoute et traite les appels entrants et les SMS par l'intermédiaire de Vonage. Commençons !

Conditions préalables

• A Compte de développeur Vonage

• A Glitch Account

  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.

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 et configuration du projet

Nous allons suivre les étapes suivantes :

1. Créer un nouveau projet.

2. Configurez votre serveur.

3. Installer les dépendances.

4. Partagez et configurez votre projet.

5. Intégrez les webhooks dans votre application Vonage.

6. Testez vos nouvelles fonctionnalités.

Étape 1 : Créer un nouveau projet

Connectez-vous à votre Account Glitch.

Cliquez sur "Nouveau projet en haut à droite, puis cliquez sur "glitch-hello-node".

Une fois cela fait, vous verrez le nouveau projet créé.

Glitch Hello Node

Étape 2 : Configuration du serveur

Pour configurer votre serveur afin qu'il traite les appels entrants et sortants ainsi que les SMS, procédez comme suit :

1. Dans le volet gauchelocalisez et cliquez sur server.js.

   serverjs file

2. Dans le volet de droitesélectionnez tout le contenu de server.js et le supprimer.

3. Copiez et collez l'extrait de code fourni dans server.js. Ce code configurera un serveur web capable de traiter les requêtes web pour gérer les appels entrants et sortants et les SMS.

const path = require("path");
const app = require('express')();
const bodyParser = require('body-parser');
const fastify = require("fastify")({ logger: true });

fastify.register(require("@fastify/static"), {
  root: path.join(__dirname, "public"),
  prefix: "/",
});

fastify.register(require("@fastify/formbody"));

fastify.register(require('@fastify/express')).after(() => {
  fastify.use(bodyParser.urlencoded({ extended: false })); // for Postman x-www-form-urlencoded
  fastify.use(bodyParser.json());
  fastify.use(app);
});

app.get("/webhooks/answer", function (request, reply) {
  const from = request.query.from;
  const fromSplitIntoCharacters = from.split('').join(' ');
  const ncco = [{
    action: 'talk',
    text: `Thank you for calling from ${fromSplitIntoCharacters}`,
    loop: 10
  }];
  console.log(`logging call from ${fromSplitIntoCharacters}`);
  reply.json(ncco);
});

app.get("/webhooks/inbound-sms", function (request, reply) {
  console.log(`logging incoming sms`);
  const params = Object.assign(request.query, request.body);
  console.log(params);
  reply.status(200).end();
});

app.post("/webhooks/inbound-sms", function (request, reply) {
  console.log(`logging incoming sms`);
  console.log(request.body);
  reply.status(200).end();
});

fastify.listen(
  { port: process.env.PORT, host: "0.0.0.0" },
  function (err, address) {
    if (err) {
      console.error(err);
      process.exit(1);
    }
    console.log(`Your app is listening on ${address}`);
  }
);

Si vous souhaitez augmenter la durée de l'appel, recherchez le paramètre loop dans l'extrait de code et ajustez sa valeur.

const ncco = [{
  action: 'talk',
  text: `Thank you for calling from ${fromSplitIntoCharacters}`,
  loop: 10
}];
console.log(`logging call from ${fromSplitIntoCharacters}`);
reply.json(ncco);

Verify que vous utilisez la bonne version de Node.js dans votre fichier package.json dans votre fichier

1. Cliquez sur package.json dans le volet gauche.

2. Dans le volet de droite, repérez les lignes spécifiant la version de Node.js.

3. Vérifier si la version de Node.js est définie sur 16.x. Si ce n'est pas le cas, mettez-la à jour avec 16.x.

"engines": {

  "node": "16.x"

}

Étape 3 : Installation des dépendances

Cliquez sur le bouton "Terminal en bas de l'écran.

buttonExécutez la commande suivante pour mettre à jour les paquets existants :

npm update

Installez les dépendances requises à l'aide de la commande suivante :

npm i express @fastify/express body-parser dotenv @vonage/server-sdk @vonage/voice

Exécutez la fonction rafraîchir pour appliquer les modifications :

refresh

Étape 4 : Partager et configurer votre projet

Cliquez sur le bouton bleu "Partager en haut à droite et copiez le lien vers le site.

Ouvrez votre éditeur de texte préféré et collez le lien que vous venez de copier. Ensuite, collez les URL suivantes :

• URL de la réponse : {votre lien}/webhooks/réponse

• URL entrant : {votre lien}/webhooks/inbound-sms

Share Project

Étape 5 : Intégrer les Webhooks dans votre application Vonage

Connectez-vous à votre compte de développeur Vonage.

Pour acheter un numéro de téléphone Vonage, allez dans le menu du volet gauche et sélectionnez "Numbers"puis "Acheter des Numbers". Sélectionnez le pays dans lequel vous souhaitez acheter le numéro. Sous Caractéristiques, sélectionnez SMS et Voice.

Cliquez sur "Recherche et "Acheter" pour le numéro que vous souhaitez acheter.

Dans le menu du volet gauche, cliquez sur "Applications"puis sur "Créer une nouvelle application" dans le volet de droite.

Mettez à jour votre application avec les informations suivantes :

• Donnez à votre application un nom convivial.

• Cliquez sur le bouton "Générer une clé publique et privée". Un fichier de clé privée nommé private.key sur votre bureau. Enregistrez ce fichier dans un dossier sécurisé, car vous en aurez besoin ultérieurement.

• Dans la section "Capacités", activez la case à cocher :

  • Voice

  • Messages

• Configurer les capacités Voice :

  • URL de la réponse : Collez l'URL de la réponse que vous avez copiée précédemment.

  • URL de l'événement : Collez la même URL de réponse.

  • URL de repli : Collez la même URL de réponse.

• Configurer les capacités de messages :

  • URL entrante : Collez l'URL entrante que vous avez copiée précédemment.

  • Status URL : Collez la même URL entrante.

• Cliquez sur "Générer une nouvelle application" en bas à droite.

capabilitiesUne fois la demande créée, liez le numéro que vous avez acheté à la demande en cliquant sur le bouton "lier bouton "Lier". Copiez le numéro Vonage lié et enregistrez-le car vous aurez besoin de l'appeler plus tard.

link numberDans le volet gauche, cliquez sur "Paramètres de l'API"sélectionnez "Messages API" dans la liste déroulante, et enregistrez vos modifications.

Étape 6 : Testez vos nouvelles fonctionnalités.

Maintenant que vous avez intégré un webhook pour les appels vocaux entrantstestons-le !

1. Passez un appel vocal depuis votre téléphone vers le numéro de Vonage.

2. Lors de la connexion, vous devriez entendre un message du type "Merci d'avoir appelé de...".

3. Allez sur le tableau de bord de Vonage, et sur le panneau de gauche, cliquez sur Journaux. Ici, vous pouvez confirmer que l'appel a été reçu avec succès.

Inbound Call LogSi vous souhaitez augmenter la durée de l'appel, modifiez la valeur du paramètre "loop".

Maintenant que vous avez intégré un webhook pour les SMS entrantentrants, testons-le !

1. Envoyez un SMS depuis n'importe quel numéro vers le numéro de Vonage.

2. Allez sur le tableau de bord de Vonage, et sur le panneau de gauche, cliquez sur Journaux. Ici, vous pouvez confirmer que le test a été reçu avec succès.

SMS log

Conclusion

Et c'est tout ! Vous venez de mettre en place des webhooks pour gérer ces communications en temps réel. Votre application peut désormais répondre aux événements entrants au fur et à mesure qu'ils se produisent. Vous pouvez même développer davantage cette application en suivant notre tutoriel sur l'ajout de code client pour les appels vocaux sortants et les SMS sortants et sur la façon de passer un appel vocal sortant et d'envoyer un SMS sortant. Si vous avez suivi ce tutoriel pour vos propres projets, nous serions ravis d'en entendre parler ! Rejoignez la conversation sur notre Communauté Vonage Slack ou envoyez-nous un message sur Xanciennement connu sous le nom de Twitter.