Crea una aplicación familiar con Vonage

Introducción

El Stand Up diario: una breve reunión que muchos equipos ágiles de ingeniería de software emplean como forma de poner al día a los compañeros de equipo sobre el progreso de un individuo y/o sacar a la luz cualquier problema de bloqueo. Cada día, todos se colocan en círculo y responden a las mismas tres preguntas:

1. ¿Qué hice ayer?

2. ¿Qué voy a hacer hoy?

3. ¿Veo algún bloqueo o impedimento que me impida alcanzar mi objetivo y/o el del equipo?

Esto es más o menos un estándar de la industria. Pero mi equipo de DevRel aquí en Vonage está distribuido. Esto significa que, como todos vivimos repartidos por todo el mundo, nos resulta imposible estar en la misma sala todos los días para reunirnos en círculo e informar de nuestros progresos, bloqueos y objetivos diarios. En su lugar, utilizamos un chat-bot en Slack para compartir individualmente nuestros informes, que se canalizan en un canal común #standup para que todo el equipo los vea.

Slack stand up

Este método de informar a distancia de nuestras actualizaciones individuales funciona bastante bien para nuestro equipo. Cada uno de nosotros puede enviar su actualización al comienzo de la jornada laboral y ver las actualizaciones del resto del equipo en un único lugar.

Del trabajo a la familia

No sólo mi equipo de trabajo está distribuido por todo el mundo, sino también los miembros de mi familia. Yo vivo en Seattle, mis padres en Chicago y mi hermano en Florida. Así que pensé que sería divertido aplicar esta idea de "Levántate" también a mi familia.

Podría usar Messages API de Vonage y hacer que todos informen sus altibajos semanales en un lugar consolidado para que cada uno de nosotros los vea cuando le resulte conveniente.

Requisitos previos

Para realizar este tutorial, necesitarás una Account de Vonage. Puedes suscribirte ahora de manera gratis y recibir crédito gratis para comenzar si aún no tienes una cuenta. Además, si quieres saltar a un proyecto de trabajo puedes remezclar la Family Stand Up App directamente en Glitch. Si no, ¡en unos pocos pasos puedes crear la tuya propia desde cero!

Cómo crear la aplicación

Crear una cuenta de Vonage

Si aún no lo has hecho, crea una cuenta de Vonage gratis y, como bonificación adicional, se te abonarán 2 euros en tu cuenta para que empieces a utilizar tu nueva aplicación. Dirígete a Vonage y sigue los pasos de registro. Una vez que hayas terminado, estarás en tu panel de control de Vonage.

Comprar un número de teléfono de Vonage

• Desde el panel de Vonage, haz clic en el elemento de menú Numbers del menú de la izquierda.

• Haga clic en la opción Buy Numbers y accederá a una página en la que podrá elegir el país, las características, el tipo y los cuatro dígitos que desea que tenga el número.

  buy numbers

• Seleccione el país en el que se encuentra para que la llamada sea local. Para las funciones, seleccione Voice y para el tipo, móvil o fijo.

• Haga clic en Search para ver una lista de los números de teléfono disponibles.

• Seleccione un número haciendo clic en el botón naranja Buy y volviendo a pulsar el botón naranja Buy una vez que aparezca el mensaje de confirmación. ¡Ahora tienes un número de teléfono de Vonage! Tu próximo paso es crear una aplicación.

Crear una aplicación de mensajes de Vonage

Desde la CLI de Nexmo:

Introduzca el siguiente comando en el intérprete de comandos:

• Asegúrese de sustituir your_Glitch_URL por su URL real.

Desde elPanel de Vonage:

• En el menú de la izquierda, haga clic en el Messages del menú.

• Seleccione la Create an application opción. Serás dirigido a una página donde podrás configurar una nueva aplicación de Vonage.

• Rellene el formulario con lo siguiente:

  • Application name introducir campo de texto Family Stand Up App

  • Status URL introduzca la URL de su Glitch: https://[your Glitch URL].glitch.me/status

  • Inbound URL introduzca de nuevo su URL de Glitch: https://[your Glitch URL].glitch.me/inbound

• Una vez que esté todo, haga clic en el botón azul Create Application azul.

• Asegúrese de generar un par de claves pública/privada y guárdelo.

Enlazarlo todo

Ahora tienes un número de Vonage y una aplicación de mensajes; todo lo que queda por hacer es vincular ambos.

• En la aplicación Family Stand Up App Mensajes, seleccione la pestaña Numbers junto a Settings.

• Haz clic en el botón Link situado a la derecha del número de teléfono que desea conectar a su aplicación.

Tus nuevos mensajes de Vonage ahora están vinculados a tu nueva aplicación de Vonage y, con ese último paso, ¡estás listo para crear tu aplicación!

Modificar la configuración predeterminada de SMS

En el panel de Vonage, debajo de tu nombre, selecciona la pestaña Settings para actualizar el Default SMS Setting para que todos los mensajes de texto recibidos de cualquiera de los miembros de tu familia estén vinculados a tu aplicación Stand Up.

default sms setting

Crea tu aplicación exprés en Glitch

Editar elpackage.json Archivo

Para empezar, vaya a glitch.com para crear un nuevo proyecto y elija la hello-express plantilla.

En el package.json seleccione el menú desplegable Add a package para buscar y añadir las siguientes dependencias: dotenv y node-schedule.

dependencies

Vamos a utilizar una versión Beta de Vonage así que teclea manualmente esta versión en particular: ^2.5.1-beta-1.

Editar el.env Archivo

En el archivo .env ingresa las credenciales específicas de Vonage que acabamos de crear en el panel de Vonage:

API_KEY=******
API_SECRET=******
APP_ID=******
PRIVATE_KEY_PATH=.data/private.key
NEXMO_NUMBER=******

Reemplaza la clave de API, el secreto de API, el ID de la aplicación y tu número de Vonage. Para incluir la clave privada, selecciona el botón New File en la esquina superior izquierda y llámala .data/private.key. En ese archivo, pega la clave privada que generaste cuando creaste tu aplicación de voz. Este archivo se volverá invisible dentro de Glitch si vuelves a mezclar tu código por razones de seguridad.

Editar elserver.js Archivo

Configuración de dependencias, credenciales y variables constantes

En la parte superior de tu archivo server.js vamos a configurar nuestro servidor Express, requerir nuestras dependencias e incrustar nuestras credenciales de Vonage:

// server.js 
require('dotenv').config();
const express = require('express');
const app = express();
const Nexmo = require('nexmo')
const schedule = require('node-schedule');

// Vonage credentials 
const nexmo = new Nexmo({
  apiKey: process.env.API_KEY,
  apiSecret: process.env.API_SECRET,
  applicationId: process.env.APP_ID,
  privateKey: process.env.PRIVATE_KEY_PATH
});

// array of family members' numbers (be sure to change and include the numbers of your *own* family 
const familyNumbers = [18479623979, 18478402296]
// content of SMS (feel free to personalize!)
const standupText = "It's time for family stand up! What have you been up to this week? What were your highs? What were your lows?"
// Array of messages received 
let messages_received = [];

Utilice Node-Schedule para enviar el texto una vez a la semana

Node Schedule es un programador de trabajos flexible para Node.js. Te permite programar trabajos (funciones arbitrarias) para su ejecución en fechas específicas, con reglas de recurrencia opcionales. Usaremos ese RecurrenceRule() y lo enviaremos todos los domingos a las 5pm. A continuación, mapeará el array de números de teléfono de la familia y pasará la variable standupText variable.

// server.js 
// node-schedule will call the nexmoSend() function and send the text every Sunday at 5pm 
const rule = new schedule.RecurrenceRule();
rule.dayOfWeek = 0;
rule.hour = 17;
rule.minute = 0;
const scheduler = schedule.scheduleJob(rule, function(){
   // mapping through those numbers and sending them each a text with nexmo 
  familyNumbers.map(number => {
    nexmoSend(number, standupText); 
  });
});

Enviar el SMS semanal solicitando un informe de Stand Up

Utilicemos Vonage y la nexmo.channel.send() función. Vamos a pasar en el TO y FROM el cuerpo del mensaje y la lógica para manejar los errores.

// server.js 
// function to send text with Vonage Messages API 
const nexmoSend = (number, text) => { nexmo.channel.send(
  { "type": "sms", "number": number },
  { "type": "sms", "number": process.env.NEXMO_NUMBER },
  {
    "content": {
      "type": "text",
      "text": text
    }
  },
  (err, data) => { console.log("message_uuid: ", data.message_uuid); }
)};   

Recibe los SMS de tus familiares

Ahora tienes el código para enviar el SMS de Stand-Up desde tu número de Vonage. Pero, ¿qué hacer con las respuestas de tu familia? Yo elegí recibir los mensajes y mostrarlos en la interfaz de la aplicación dentro de Glitch. Pero aquí el mundo es realmente tuyo. Puedes optar por esperar a que todas las partes respondan y enviar un mensaje agrupado con todas ellas en una actualización consolidada. O puedes utilizar una base de datos como MongoDB y guardar los datos para hacer algo con ellos más tarde.

logging

Por el momento, la solución que se me ha ocurrido es introducir tanto el número de origen como el texto del mensaje recibido en una matriz que se enviará al frontend de la aplicación. De esta forma, los mensajes serán visibles cuando se reciba un mensaje.

front end

// server.js 
// function to receive message responses 
const handleInboundSms = (req, res) => {
  const params = Object.assign(req.query, req.body);

  messages_received.push({
    from: params.msisdn,
    standup_report: params.text
  });
  
  // send messages for family members to see on website 
  app.get('/', (req, res) => {
    res.send(messages_received);
  });
  
  // send OK status
  res.status(204).send();
}

Piezas finales exprés

Por último, vamos a rellenar los componentes Express necesarios para poner en marcha nuestra aplicación. Y para propósitos de depuración, nos aseguraremos de registrar en qué puerto está escuchando la aplicación.

// server.js 
app
.route('/webhooks/inbound-sms')
.get(handleInboundSms)
.post(handleInboundSms)

const listener = app.listen(process.env.PORT, () => {
  console.log('Your express app is listening on port ' + listener.address().port);
});

Obtener ayuda

Nos encanta saber de ti, así que si tienes preguntas, comentarios o encuentras algún fallo en el proyecto, ¡háznoslo saber! Puedes hacerlo:

• Tweetéanos Somos @VonageDev en Twitter

• O únete al Slack de la Comunidad de Vonage

Lecturas complementarias

• Consulte la documentación para desarrolladores en https://developer.nexmo.com