Enviar SMS cuando Typeform es enviado usando Node.js y Messages API

En este tutorial vamos a aprender cómo enviar un SMS cuando su Typeform es enviado usando la Nexmo Messages API y el framework Node.js Hapi.

Este ejemplo va a crear un webhook que puedes conectar a tu Typeform que te notificará cada vez que alguien complete el formulario. Utilizaremos el Messages API de Nexmo para enviar un mensaje SMS con la fecha y el enlace para ver la respuesta.

Puede descargar y ejecutar este código por sí mismo desde la página nexmo-community/nexmo-typeform-sms en GitHub.

Requisitos previos

Necesitarás crear cuentas para ejecutar esto por ti mismo, así que asegúrate de tener configurado lo siguiente:

• A Typeform Account

• Ngrok (para que el mundo exterior pueda acceder a la aplicación en tu máquina local)

• El sitio Interfaz de línea de comandos de 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.

El código de este ejemplo se ha creado con Node.js y el framework framework hapi. Funcionará en Node.js versión 8.9.0 o superior.

Puedes comprobar tu versión de Node ejecutando node -v en la línea de comandos. Si el número es 8.9.0 o superior, entonces estás listo. Si no es así, por favor, utilice una versión anterior de hapi.

Crear el esqueleto de la aplicación

Para recibir un webhook entrante desde Typeform, necesita tener una aplicación configurada con al menos una POST ruta. Comenzaremos construyendo una aplicación básica con una ruta POST ruta.

En una nueva carpeta, inicializa una nueva aplicación Node.js ejecutando

A continuación, instale las dependencias del proyecto:

Crear el servidor hapi

Hapi es un framework centrado en la configuración fácil de usar. Permite a los desarrolladores centrarse en escribir lógica de aplicación reutilizable en lugar de dedicar tiempo a crear infraestructura. Me gusta porque incorpora funciones de validación de entradas, almacenamiento en caché, autenticación y otras facilidades esenciales para crear aplicaciones web y de servicios.

Crearemos el archivo principal de la aplicación añadiendo un nuevo archivo en el directorio raíz llamado index.js. Este será nuestro servidor webhook.

En este nuevo archivo, añada el siguiente código:

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();

Crear una aplicación de mensajes y envío

Configure una nueva aplicación de Mensajes y Despacho a través del Panel Nexmo.

Usted no necesita un webhook de entrada o de estado para el propósito de esta entrada de blog, por lo que puede utilizar http://example.com en esos campos.

Create Application

Recuerde también hacer clic en el botón Generar par de claves pública/privada enlace. Esto descargará un archivo llamado private.key.

Localice el archivo private.key en su sistema y muévalo a la carpeta raíz de su aplicación.

Finalice la configuración de la aplicación haciendo clic en el botón Crear aplicación y habrás terminado con la configuración.

Anote su ID de solicitud, lo necesitará en el siguiente paso.

Envío de SMS mediante la API de Messages

La parte final de esta entrada del blog es tomar la solicitud que hace Typeform y enviar un mensaje SMS con los datos dentro.

El sitio API de Mensajes de Nexmo se encargará de todo esto por nosotros. Usaremos la Biblioteca Cliente Nexmo Node JS para enviar el SMS.

Si nos estás siguiendo, instalaste la librería cuando creamos la aplicación esqueleto, ahora tienes que requerirla en el archivo index.js e inicializar la instancia Nexmo con tu clave y secreto de la API, el ID de la aplicación de los pasos anteriores y la ruta al archivo private.key que descargaste cuando creaste tu Aplicación de Mensajes y Despacho.

En la parte superior de index.js añada el siguiente código, asegurándose de sustituir NEXMO_API_KEY, NEXMO_API_SECRET, NEXMO_APPLICATION_ID y NEXMO_APPLICATION_PRIVATE_KEY_PATH por sus propias credenciales:

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"
})

También tendremos que actualizar el manejador de ruta que creamos para que le envíe un mensaje SMS cuando se envíe el Typeform. No olvide sustituir YOUR_NUMBER por su número de teléfono. No utilice + o 00 cuando introduzcas el número de teléfono, empieza por el código del país, por ejemplo 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)
  }
});

Una vez hecho esto, ejecute el siguiente comando para iniciar el servidor:

La aplicación se lanzará en el puerto 3000.

Utiliza Ngrok para abrir este puerto al mundo y toma nota de las URL que produce para ti.

ngrok output

Aquí tienes una guía práctica para trabajar con Ngrok si no la has utilizado antes.

¿RESUMEN? Puede iniciar Ngrok (si está instalado) ejecutando este comando:

Conecte el webhook a Typeform

Hemos terminado nuestro webhook, así que ahora es el momento de conectarlo a un Typeform. Si necesitas ayuda para hacer esto, hay un artículo muy bueno en su sección de ayuda que te muestra cómo conectar un webhook a tu typeform. Utilice la URL ngrok que acaba de obtener del comando anterior en lugar de pastebin para la URL de destino en la guía de typeform.

En cuanto pulses Test Webhook para comprobar que funciona, recibirás un SMS con los detalles.

Webhook

Conclusión

Hemos utilizado un servidor hapi para configurar un webhook que está conectado a un Typeform, que envía un mensaje SMS utilizando el Nexmo Messages API cada vez que un usuario completa el formulario. Podrías hacer aún más, por ejemplo enviar cada respuesta en el formulario a través de SMS o incluso utilizar Facebook Messenger para completar el Typeform.

Si quieres hacer más cosas con las API Nexmo, aquí tienes algunas lecturas esenciales para ponerte en marcha:

• La documentación de la Messages API y de la Dispatch API en el portal para desarrolladores

• Tutorial detallado para utilizar el Messages API para enviar y recibir mensajes de Facebook

• Si nos necesitas, prueba el canal Slack de la Comunidad Nexmo