Envoyer un SMS lorsque le formulaire de type est soumis à l'aide de Node.js et de l'API Messages

Dans ce tutoriel, nous allons apprendre à envoyer un SMS lorsque votre Typeform est soumise à l'aide de l'API Nexmo Messages API et le framework Node.js Hapi.

Cet exemple va créer un webhook que vous pouvez connecter à votre Typeform et qui vous notifiera chaque fois que quelqu'un remplira le formulaire. Nous utiliserons l'API Nexmo Messages pour envoyer un SMS avec la date et le lien pour voir la réponse.

Vous pouvez télécharger et exécuter ce code par vous-même à partir du site nexmo-community/nexmo-typeform-sms sur GitHub.

Conditions préalables

Vous devrez créer des Account pour gérer cela vous-même, assurez-vous donc d'avoir mis en place les éléments suivants :

• A Typeform Account

• Ngrok (pour que le monde extérieur puisse accéder à l'application sur votre machine locale)

• L'interface de ligne de commande Interface de ligne de commande Nexmo

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.

Le code de cet exemple est construit en utilisant Node.js et le framework hapi framework. Il fonctionnera avec la version 8.9.0 ou supérieure de Node.js.

Vous pouvez vérifier votre version de Node en lançant node -v sur votre ligne de commande. Si le numéro est 8.9.0 ou plus, alors vous êtes prêt à partir. Si ce n'est pas le cas, utilisez une version plus ancienne de hapi.

Créer l'application squelette

Afin de recevoir un webhook entrant de Typeform, vous devez avoir une application configurée avec au moins une POST route. Nous commencerons par construire une application de base avec une route POST route.

Dans un nouveau dossier, initalisez une nouvelle application Node.js en exécutant

Ensuite, installez les dépendances du projet :

Créer le serveur hapi

Hapi est un cadre de travail simple à utiliser, centré sur la configuration. Il permet aux développeurs de se concentrer sur l'écriture d'une logique applicative réutilisable au lieu de passer du temps à construire une infrastructure. Je l'aime parce qu'il prend en charge la validation des entrées, la mise en cache, l'authentification et d'autres fonctions essentielles pour la création d'applications web et de services.

Nous allons créer le fichier principal de l'application en ajoutant un nouveau fichier dans votre répertoire racine appelé index.js. Ce fichier sera notre serveur webhook.

Dans ce nouveau fichier, ajoutez le code suivant :

const Hapi = require('hapi');

// create the hapi server and listen on port 3000
const server = Hapi.server({
  port: 3000,
  host: 'localhost'
});

// create a POST route for http://localhost:3000/
server.route({
  method: 'POST',
  path: '/',
  handler: (request, h) => {

    // return a 200 OK HTTP status code
    return h.response().code(200)
  }
});

// initialize the server using async/await
const init = async () => {
  await server.start();
  console.log(`Server running at: ${server.info.uri}`);
};

// log any error and exit
process.on('unhandledRejection', (err) => {
  console.log(err);
  process.exit(1);
});

// run the server
init();

Créer une application Messages & Dispatch

Créez une nouvelle application Applications & Dispatch via le Nexmo Dashboard.

Vous n'avez pas besoin d'un webhook de réception ou d'état pour les besoins de cet article de blog, vous pouvez donc utiliser http://example.com dans ces champs.

Create Application

N'oubliez pas de cliquer également sur le bouton Générer une paire de clés publiques/privées lien. Cela téléchargera un fichier appelé private.key.

Localisez le fichier private.key sur votre système et déplacez-le dans le dossier racine de votre application.

Finaliser la configuration de l'application en cliquant sur le bouton Créer une application et vous avez terminé la configuration.

Notez votre identifiant d'application, vous en aurez besoin à l'étape suivante.

Envoyer le SMS à l'aide de l'API Messages

La dernière partie de ce billet de blog consiste à prendre la requête que Typeform fait et à envoyer un SMS avec les données à l'intérieur.

L'API Nexmo Messages API s'occupera de tout cela pour nous. Nous utiliserons la bibliothèque client Bibliothèque client Nexmo Node JS pour envoyer le SMS.

Si vous suivez bien, vous avez installé la bibliothèque lorsque nous avons créé l'application squelette, maintenant vous devez la requérir dans le fichier index.js et initialiser l'instance Nexmo avec votre clé et votre secret d'API, l'ID de l'Applications des étapes précédentes et le chemin d'accès à l'instance de l'API. private.key que vous avez téléchargé lorsque vous avez créé votre application Messages & Dispatch.

En haut de index.js ajoutez le code suivant, en veillant à remplacer NEXMO_API_KEY, NEXMO_API_SECRET, NEXMO_APPLICATION_ID et NEXMO_APPLICATION_PRIVATE_KEY_PATH par vos propres informations d'identification :

const Nexmo = require('nexmo')

const nexmo = new Nexmo({
  apiKey: "NEXMO_API_KEY",
  apiSecret: "NEXMO_API_SECRET",
  applicationId: "NEXMO_APPLICATION_ID",
  privateKey: "NEXMO_APPLICATION_PRIVATE_KEY_PATH"
})

Nous devrons également mettre à jour le gestionnaire de route que nous avons créé afin qu'il vous envoie un SMS lorsque le formulaire de type est soumis. N'oubliez pas de remplacer YOUR_NUMBER par votre numéro de téléphone. N'utilisez pas de + ou 00 lors de la saisie du numéro de téléphone, commencez par l'indicatif du pays, par exemple 447700900000. :

server.route({
  method: 'POST',
  path: '/',
  handler: (request, h) => {
    nexmo.channel.send(
      { "type": "sms", "number": "YOUR_NUMBER" },
      { "type": "sms", "number": "NEXMO" },
      {
        "content": {
          "type": "text",
          "text": `New submission in Typeform ${request.payload.form_response.definition.title} on ${new Date(request.payload.form_response.submitted_at).toDateString()}. You can view it at https://admin.typeform.com/form/${request.payload.form_response.form_id}/results#responses`
        }
      },
      (err, data) => { console.log(data.message_uuid); }
    );

    return h.response().code(200)
  }
});

Une fois ces éléments en place, exécutez la commande suivante pour démarrer le serveur :

L'application sera lancée sur le port 3000.

Utilisez Ngrok pour ouvrir ce port au monde et notez les URL qu'il produit pour vous.

ngrok output

Voici un guide pratique pour travailler avec Ngrok si vous ne l'avez jamais utilisé.

TLDR ? Vous pouvez démarrer Ngrok (s'il est installé) en lançant cette commande :

Connecter le webhook à Typeform

Nous avons terminé notre webhook, il est maintenant temps de le connecter à un Typeform. Si vous avez besoin d'aide, il y a un très bon article dans leur section d'aide qui vous montre comment connecter un webhook à votre typeform. Utilisez l'URL ngrok que vous venez d'obtenir par la commande ci-dessus au lieu de pastebin pour l'URL de destination dans le guide Typeform.

Dès que vous aurez cliqué sur Test Webhook pour vérifier qu'il fonctionne, vous recevrez un SMS contenant les détails.

Webhook

Conclusion

Nous avons utilisé un serveur hapi pour configurer un webhook connecté à un Typeform, qui envoie un SMS à l'aide de l'API Messages de Nexmo chaque fois qu'un utilisateur remplit le formulaire. Vous pourriez faire encore plus, par exemple envoyer chaque réponse dans le formulaire par SMS ou même utiliser Facebook Messenger pour compléter le formulaire.

Si vous voulez en faire plus avec les API Nexmo, voici quelques lectures essentielles pour vous aider à avancer :

• La documentation de l'API Messages API et de l Dispatch API sur le portail des développeurs

• Tutoriel approfondi pour l'utilisation de l'API Messages pour envoyer et recevoir des messages Facebook

• Si vous avez besoin de nous, essayez le canal Slack de la canal Slack de la communauté Nexmo