Comment faire de la voix et des SMS sortants avec Vonage sur Glitch

Dans ce tutoriel, nous allons vous montrer comment intégrer et passer des appels vocaux sortants et envoyer des SMS sortants en utilisant les API de Vonage avec Glitch et Node.js. L'ajout de fonctionnalités vocales et SMS sortants permet à votre application de gérer des interactions proactives, telles que l'envoi de notifications ou l'émission d'appels. Cette intégration améliore l'engagement des utilisateurs en permettant une communication automatisée et en temps réel à partir de votre application.

Prêt à créer une application encore plus interactive ? C'est parti !

Conditions préalables

• Un compte de développeur Vonage

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

Mise en place et configuration du projet

En supposant que vous avez déjà intégré un webhook pour les appels vocaux entrants et les SMS entrants dans votre application Vonage, nous allons passer à la mise en œuvre des fonctionnalités sortantes. Si vous avez besoin d'aide pour configurer votre webhook et votre application Vonage, vous pouvez suivre le tutoriel suivant Comment configurer les Webhooks pour les SMS et les appels vocaux entrants sur Glitch.

Pour mettre en œuvre l'application, vous pouvez appliquer les connaissances acquises dans le didacticiel pour définir les éléments suivants :

• private.key fichier

• Numéro de téléphone de Vonage

• Clé et secret de l'API Vonage

• ID de l'application Vonage

• Réponse URL

Nous allons vous guider à travers les étapes suivantes :

1. Ajouter un code client pour les appels vocaux sortants et les SMS

2. Installer les dépendances

3. Définir les variables d'environnement

4. Testez vos nouvelles fonctionnalités

Étape 1 : Ajouter un code client pour les appels vocaux et les SMS sortants

Connectez-vous à votre Account Glitch.

Dans votre projet Glitch, cliquez sur le "+" à côté de Fichiers.

Nommez le fichier private.key et cliquez sur Ajouter ce fichier.

add fileDans votre éditeur de texte préféré, ouvrez le fichier private.key que vous avez téléchargé précédemment. Copiez le contenu de votre éditeur de texte et collez-le dans le fichier nouvellement créé dans Glitch. private.key nouvellement créé dans Glitch.

De même, créez un nouveau fichier nommé makecall.js.

Ajoutez le code suivant au fichier nouvellement créé makecall.js nouvellement créé :

require('dotenv').config({ path: __dirname + '/../.env' });

const { Vonage } = require('@vonage/server-sdk');
const { NCCOBuilder, Talk, OutboundCallWithNCCO } = require('@vonage/voice')

const TO_NUMBER = process.env.TO_NUMBER;
const VONAGE_NUMBER = process.env.VONAGE_NUMBER;

const VONAGE_API_KEY = process.env.VONAGE_API_KEY;
const VONAGE_API_SECRET = process.env.VONAGE_API_SECRET;
const VONAGE_APPLICATION_ID = process.env.VONAGE_APPLICATION_ID;
const VONAGE_APPLICATION_PRIVATE_KEY_PATH = __dirname + "/" + process.env.VONAGE_APPLICATION_PRIVATE_KEY_PATH;

const vonage = new Vonage({
  apiKey: VONAGE_API_KEY,
  apiSecret: VONAGE_API_SECRET,
  applicationId: VONAGE_APPLICATION_ID,
  privateKey: VONAGE_APPLICATION_PRIVATE_KEY_PATH
});


async function makeCall() {
  const builder = new NCCOBuilder();
  builder.addAction(new Talk('This is a text to speech call from Vonage'));
  const resp = await vonage.voice.createOutboundCall(
    new OutboundCallWithNCCO(
      builder.build(),
      { type: 'phone', number: TO_NUMBER },
      { type: 'phone', number: VONAGE_NUMBER}
    )
  );
  console.log(resp);
}
makeCall();

Ensuite, créez un nouveau fichier nommé sendsms.js.

Ajoutez le code suivant au fichier nouvellement créé sendsms.js nouvellement créé :

require('dotenv').config({ path: __dirname + '/../.env' });

const VONAGE_API_KEY = process.env.VONAGE_API_KEY;

const VONAGE_API_SECRET = process.env.VONAGE_API_SECRET;

const TO_NUMBER = process.env.TO_NUMBER;

const VONAGE_NUMBER = process.env.VONAGE_NUMBER;

const { Vonage } = require('@vonage/server-sdk');

const vonage = new Vonage({

  apiKey: VONAGE_API_KEY,

  apiSecret: VONAGE_API_SECRET

});

const from = VONAGE_NUMBER;

const to = TO_NUMBER;

const text = 'Test message using the Vonage SMS API';

vonage.sms.send({ to, from, text })

  .then(resp => { console.log('Message sent successfully'); console.log(resp); })

  .catch(err => { console.log('Error sending message'); console.error(err); });

Étape 2 :Installer les dépendances

Ouvrez un terminal dans votre projet Glitch.

Exé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 commande refresh pour appliquer les modifications :

refresh

Étape 3 : Définir les variables d'environnement

Maintenant, ouvrez le fichier .env qui se trouve dans le panneau de gauche de Glitch.

Ajoutez les noms de variables suivants :

TO_NUMBER
VONAGE_NUMBER
VONAGE_API_KEY
VONAGE_APPLICATION_ID
VONAGE_API_SECRET
VONAGE_APPLICATION_PRIVATE_KEY_PATH

Complétez ensuite les valeurs suivantes pour ces variables :

• TO_NUMBER: Le numéro pour recevoir des appels et des SMS (par exemple, 14567891234).

• VONAGE_NUMBER: Le numéro attribué à votre Applications Vonage (par exemple, 14567891234).

• VONAGE_API_KEY et VONAGE_API_SECRET: À partir du tableau de bord de Vonage.

• VONAGE_APPLICATION_ID: À partir des paramètres de l'application Vonage.

• VONAGE_APPLICATION_PRIVATE_KEY_PATH: Défini comme private.key.

Environment variables

Étape 4 : Testez vos nouvelles fonctionnalités

Tester les appels vocaux sortants

Ouvrez un terminal dans votre projet Glitch.

Exécutez cette commande :

node makecall.js

Vérifiez les journaux du Tableau de bord Vonage pour confirmer que l'appel a été passé avec succès ainsi que ses détails.

Outbound Call LogTester les SMS sortants

Maintenant que vous avez ajouté le code client pour les SMS sortants, testons-le !

Exécutez cette commande :

node makecall.js

Vérifiez les journaux du tableau de bord de Vonage pour confirmer que le SMS a été envoyé avec succès ainsi que ses détails.

Text Log DeliveredVous verrez les mêmes informations dans votre terminal.

Conclusion

Et le tour est joué ! Vous venez d'intégrer à Glitch des appels vocaux sortants et des SMS à l'aide des API de Vonage. En ajoutant ces fonctionnalités de communication, vous avez étendu la capacité de votre application à engager les utilisateurs par le biais de la voix et de la messagerie. 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 X.