SMS en el navegador: Una aventura en WebSockets

Gran parte del trabajo pesado realizado por la API de Nexmo Messages ocurre en el lado del servidor. Los mensajes son enviados, recibidos, procesados y así sucesivamente, pero por lo general toda esta actividad está oculta a los usuarios finales de muchas de las aplicaciones que utilizan la API.

En la mayoría de los casos, la visualización de estos mensajes al usuario final corre a cargo de sus respectivas aplicaciones. También existe la opción de mostrar estos mensajes en un navegador, pero para ello necesitaremos alguna forma de enviar los mensajes desde el servidor al navegador. Y podemos hacerlo con la ayuda de la API WebSockets.

Este es un tutorial bastante largo que no asume ningún conocimiento previo aparte de una comprensión básica de HTML, CSS, Javascript y Node.js. Siéntete libre de saltarte cualquiera de las secciones si ya sabes qué es qué.

Vamos a recorrer el proceso de construcción de un teléfono "virtual" en el navegador que puede enviar y recibir SMS. Utilizaremos Glitch para alojar la aplicación, por lo que algunas de las instrucciones de configuración están orientadas a Glitch.

Glitch es un entorno de desarrollo en línea que permite a los desarrolladores empezar a crear y desplegar sus aplicaciones sin la molestia de tener que configurar un servidor. Todas las aplicaciones de la plataforma pueden remezclarse y personalizarse, lo que la convierte en un lugar perfecto para compartir código y descubrir cómo funcionan las cosas.

También puedes usar cualquier entorno con Node.js instalado, si es lo que prefieres. Todas las dependencias para este proyecto se manejan a través de npm.

Instalación y configuración iniciales

Iniciar una aplicación Koa.js en Glitch

Glitch está mejorando constantemente su interfaz y sus funciones, por lo que, en el momento de escribir estas líneas, puedes crear una nueva cuenta en Glitch haciendo clic en el botón Iniciar sesión en la esquina superior derecha de la página, e iniciar sesión a través de GitHub o Facebook, o registrarte con tu dirección de correo electrónico.

Glitch sign in

A continuación, puede hacer clic en el botón Nuevo proyecto para empezar. Hay 3 opciones, hola-página-web, hola-express y hola-sqlite. Para los propósitos de este tutorial, utilice hello-express ya que esto le da un entorno con Node.js y npm ya instalado.

Glitch hello-express

Para instalar paquetes de nodos adicionales, puede acceder a la línea de comandos pulsando el botón Consola en la ventana de registros.

Console

Puede alternar la ventana de registros haciendo clic en el botón Registros en la parte superior de la barra lateral. Desde ahí, puedes utilizar todos los comandos CLI estándar en un entorno bash. La única diferencia es que en Glitch, usted usaría pnpm en lugar de npm.

Glitch utiliza Express como framework Node.js por defecto, pero al convertir la aplicación a Koa.js no es demasiado complicado. Ten en cuenta que Koa requiere node v7.6.0 o superior para ES2015 y soporte de funciones async.

Dependencies

Elimine express y body-parser del proyecto con el siguiente comando:

Instala Koa.js y koa-bodyparser con el siguiente comando:

La consola y el editor no se sincronizan automáticamente, así que ejecute el comando refresh para actualizar el archivo package.json en el editor.

Koa

También observará que el estado de su aplicación muestra un error. Esto es de esperar porque el archivo server.js sigue haciendo referencia a express.

Para solucionarlo, sustituya el contenido de server.js por el siguiente código:

const Koa = require('koa');
const app = new Koa();

app.use(async ctx => {
  ctx.body = 'Hello Dinosaur';
});

app.listen(3000);

Ahora, cuando intentes ver tu solicitud, debería aparecer una página en blanco con las palabras Hola Dinosaurio.

Servir archivos estáticos con Koa.js

Necesitamos una página HTML básica con campos de entrada para que los usuarios puedan introducir la información necesaria para enviar un SMS, como el número de teléfono del destinatario y el propio mensaje.

koa-static es un middleware para Koa que sirve archivos estáticos. Instálalo en tu proyecto a través de la consola con el siguiente comando:

Para hacer las cosas menos complicadas, coloque todos los archivos necesarios para la página de destino en la carpeta public carpeta. Puede mover el archivo index.html de la carpeta views a la carpeta public carpeta renombrando la ruta del archivo en la barra lateral.

Rename file

También puedes hacerlo por línea de comandos a través de la consola.

Una vez hecho esto, modifica el archivo server.js para que use koa-static y sirva los archivos de la carpeta public de la siguiente manera:

const serve = require('koa-static');
const Koa = require('koa');
const app = new Koa();

app.use(serve('./public'));

app.listen(3000);

console.log('listening on port 3000');

Ahora, en lugar de hola mundotu aplicación debería servir el archivo Glitch index.html por defecto. Modificaremos este archivo para imitar la interfaz de un teléfono más adelante en el tutorial.

Introducción a las API 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.

This tutorial also uses a virtual phone number. To purchase one, go to Numbers > Buy Numbers and search for one that meets your needs.

Ready to start building?

Experience seamless connectivity, real-time messaging, and crystal-clear voice and video calls—all at your fingertips.

Dashboard

Vuelve a tu aplicación Glitch e instala el cliente cliente Nexmo REST API para Node.js con el siguiente comando:

Estamos utilizando la versión beta, ya que la Messages API aún está en fase beta. Si actualizas tu proyecto, tu package.json debería tener este aspecto:

Nexmo node

Y ahora hemos terminado con la configuración básica. Este puede ser el punto de partida para cualquier número de aplicaciones Koa que utilizan las API de Nexmo, por lo que siempre se puede mantener este proyecto como un starter-kit en Glitch y remezclar de ella.

¿Qué son los WebSockets?

El protocolo WebSocket fue desarrollado por la Internet Engineering Task Force (IETF) para permitir comunicaciones bidireccionales entre un cliente y un host remoto.

Es un tipo de protocolo de comunicaciones, como HTTP (Protocolo de transferencia de hipertexto), FTP (Protocolo de transferencia de archivos) o SMTP (Protocolo simple de transferencia de correo). Los protocolos de comunicación permiten que las máquinas se comuniquen entre sí. La mayoría de los protocolos de comunicación mantienen una conexión abierta entre dos máquinas a través de Internet.

HTTP, que es sobre lo que funciona la web, es diferente. Se le conoce como protocolo sin conexión, porque se basa en un modo de funcionamiento petición/respuesta. Los navegadores web solicitan al servidor imágenes, fuentes, contenidos, etc., pero una vez satisfecha la petición, se corta la conexión entre el navegador y el servidor.

Es posible actualizar una conexión HTTP existente a un nuevo protocolo incompatible utilizando el encabezado de actualización HTTP. Las solicitudes de conexión siempre iniciadas por el cliente, aunque el servidor puede forzar una actualización respondiendo con una respuesta HTTP al cliente. 426 Upgrade Required respuesta HTTP al cliente.

Una conexión HTTP/1.1 puede actualizarse a una conexión TLS (método no recomendado), a una conexión HTTP/2 o a una conexión WebSocket, que es el caso de uso más común para una actualización. El establecimiento de una conexión WebSocket entre el cliente y el servidor implica una solicitud HTTP/1.1 inicial que incluye las cabeceras de actualización.

Una versión simplificada de la cabecera inicial tiene este aspecto:

GET /chat HTTP/1.1
Host: server.example.com
Origin: http://example.com
Upgrade: websocket
Connection: Upgrade

Si el servidor es compatible con el protocolo WebSocket, aceptará la solicitud de actualización y responderá al intercambio con un código de estado 101 código de estado:

HTTP/1.1 101 Switching Protocols
Upgrade: websocket
Connection: Upgrade

Todo lo que no sea un 101 indica que el protocolo WebSocket no se ha completado. Una vez completado el handshake, la conexión HTTP/1.1 inicial pasa a ser una conexión WebSocket y los datos pueden enviarse de ida y vuelta entre las dos máquinas.

La página API de WebSockets es una interfaz que permite a las aplicaciones web utilizar el protocolo WebSocket para mantener comunicaciones bidireccionales con procesos del lado del servidor. La mayoría de los navegadores lanzados después de 2012 son compatibles con la API WebSockets, por lo que la compatibilidad es razonablemente buena.

El objeto WebSocket proporciona la API para crear y gestionar una conexión WebSocket con un servidor, así como para enviar y recibir datos en la conexión. Podemos crear un nuevo objeto WebSocket con el constructor WebSocket, WebSocket(url[, protocols]). La URL introducida en el constructor WebSocket debe ser del tipo ws o wss para que funcione.

const socket = new WebSocket('ws://localhost:8080')

El objeto WebSocket envía 4 eventos, que podemos escuchar y manejar en consecuencia:

• open

• error

• message

• close

Una vez establecida la conexión WebSocket, se dispara el evento open se dispara el evento. Con referencia al objeto WebSocket creado en el bloque de código anterior, el manejador de eventos correspondiente tendría este aspecto:

socket.onopen = function(evt) {
  // do something
}

Podemos utilizar el evento error para registrar cualquier error en la consola con fines de depuración, y tal vez añadir un controlador de eventos de error también:

socket.onerror = function(evt) {
  console.log('WebSocket error: ', evt)
  // include an error event handler here
}

Lo más habitual es utilizar el evento message que se activa cuando se reciben mensajes del servidor. Por ejemplo, si usted tiene un mensaje de texto enviado desde el servidor, podría registrarlo en la consola de esta manera:

socket.onmessage = function(evt) {
  console.log('Message: ', evt.data)
}

Por último, el evento close se activa cuando se cierra la conexión WebSocket. Una vez que esto ocurre, el cliente y el servidor ya no pueden enviarse mensajes hasta que se establezca una nueva conexión.

socket.onclose = function(evt) {
  console.log('WebSocket connection closed. ', evt)
}

También hay 2 métodos asociados al objeto WebSocket, send() para enviar datos al servidor y close() para terminar una conexión WebSocket existente.

El método send() sólo funciona mientras la conexión está abierta, lo que parece obvio, pero si el código está estructurado incorrectamente, podría terminar disparándose antes de que la conexión esté abierta o después de que la conexión esté cerrada.

// Listen for the open event before triggering the sendMsg() function
socket.onopen = function(evt) {
  console.log('Connection established')
  sendMsg('Hello Nexmo!')
}

// Send a message through the WebSocket connection
function sendMsg(data) {
  socket.send(data)
}

Ahora que entendemos mejor qué son los WebSockets y cómo funciona la API WebSocket, estamos listos para utilizar estos conocimientos para crear una aplicación básica para enviar y recibir SMS directamente a través del navegador con la Nexmo Messages API.

Recibir SMS en el navegador con Nexmo

Obtener un número de teléfono virtual

Para enviar y recibir SMS a través de la Messages API, necesitará un número de teléfono virtualque es como cualquier número de teléfono estándar, salvo que no está vinculado a ninguna línea telefónica o dispositivo físico.

Puede comprar un número virtual en la página Numbers de la barra lateral seleccionando Comprar Numbers. Puede elegir un número local para un país de su elección, las funciones que admite y el tipo de número, ya sea móvil, fijo o gratuito.

Buy numbers

Una vez que tenga su número, aparecerá en la sección Tus Numbers sección. Haga clic en el icono del lápiz situado bajo el extremo derecho Gestionar para configurar la URL de tu webhook de entrada. Esto es necesario para recibir SMS. Cuando se envía un SMS a su número, se envía una solicitud POST se envía una solicitud a esta URL con la carga útil del mensaje.

Inbound webhook URL

Si está utilizando Glitch, la URL de su webhook sería algo así como https://boom-meal.glitch.me/inbound-sms. Sugiero utilizar inbound-sms como ruta, pero puedes usar lo que quieras, siempre que esa ruta sea válida en tu aplicación. Ajusta la URL del webhook dependiendo de dónde esté alojada tu aplicación.

Una cosa más a comprobar es que la configuración por defecto de SMS en su acccount se establece en POST en el método HTTP.

Settings

Recepción de un SMS entrante

Para recibir un SMS entrante, tendrás que añadir una ruta en tu aplicación para gestionar la solicitud entrante que se activa cuando alguien envía un SMS a tu número virtual. POST entrante que se activa cuando alguien envía un SMS a tu número virtual. A diferencia de otros frameworks populares de Node.js como Express o Hapi.js, el enrutamiento se gestiona mediante un módulo independiente, por lo que tendremos que instalarlo primero.

Añada lo siguiente a su archivo server.js archivo:

const bodyParser = require('koa-bodyparser');
const Router = require('koa-router');

const router = new Router();

app.use(bodyParser());

// Make sure this is the route you configured for your virtual number
router.post('/inbound-sms', async (ctx, next) => {
  const payload = ctx.request.body;
  console.log(payload);
  ctx.status = 200;
});

app.use(router.routes()).use(router.allowedMethods());

Si ha seguido las instrucciones de instalación anteriores en este tutorial, koa-bodyparser ya debería estar instalado. Se necesita un analizador del cuerpo para manejar el cuerpo de la petición. Para comprobar que todo está conectado correctamente, envíe un SMS a su número virtual. La carga útil del mensaje debería registrarse en la consola.

SMS payload

Creación de un servidor WebSocket

Ahora que hemos verificado que las cosas funcionan, en lugar de registrar la carga útil del mensaje en la consola, vamos a utilizar WebSockets para enviar la información pertinente al navegador.

Pero primero, instalemos una biblioteca de ayuda WebSocket de Node.js llamada ws.

Una vez hecho esto, podemos utilizar ws en nuestro archivo server.js para crear un servidor de sockets web:

const http = require('http');
const WebSocket = require('ws');

// Create a web socket server on top of a regular http server
const server = http.createServer(app.callback());
const wsserver = new WebSocket.Server({ server: server });

Sustituya el original app.listen(3000) por server.listen(3000).

También vamos a añadir una función para manejar la carga útil del mensaje entrante, y luego enviar estos datos al navegador.

function receiveSms(payload) {
  const phone = payload.msisdn;
  const msg = payload.text;
  const timestamp = payload['message-timestamp'];
  
  const smsData = JSON.stringify({ 
    phone: phone,
    msg: msg,
    timestamp: timestamp
  });

  // Broadcast the message to all open clients
  wsserver.clients.forEach(client => {
    if (client.readyState === WebSocket.OPEN) {
      client.send(smsData);
    }
  });
}

Su archivo server.js hasta este punto del tutorial debería tener este aspecto:

const Koa = require('koa');
const bodyParser = require('koa-bodyparser');
const Router = require('koa-router');
const serve = require('koa-static');

const http = require('http');
const WebSocket = require('ws');

const app = new Koa();
const router = new Router();
const server = http.createServer(app.callback());
const wsserver = new WebSocket.Server({ server: server });

app.use(serve('./public'));
app.use(bodyParser());

router.post('/inbound-sms', async (ctx, next) => {
  const payload = ctx.request.body;
  receiveSms(payload);
  ctx.status = 200;
});

app.use(router.routes()).use(router.allowedMethods());

server.listen(3000);
console.log('listening on port 3000');

function receiveSms(payload) {
  const phone = payload.msisdn;
  const msg = payload.text;
  const timestamp = payload['message-timestamp'];
  
  const smsData = JSON.stringify({ 
    phone: phone,
    msg: msg,
    timestamp: timestamp
  });

  // Broadcast the message to all open clients
  wsserver.clients.forEach(client => {
    if (client.readyState === WebSocket.OPEN) {
      client.send(smsData);
    }
  });
}

Visualización de SMS entrantes en el navegador

El siguiente paso es asegurarse de que el navegador está listo para recibir estos datos del servidor, así que es hora de configurar el front-end de las cosas.

Elimine el contenido por defecto del archivo client.js que Glitch proporciona, y sustituye su contenido por el siguiente:

document.addEventListener("DOMContentLoaded", function() {
  let socket = null;
  let connected = false;
  
  function start() {
    socket = new WebSocket('wss://' + location.host);
    
    socket.onopen = function(evt) {
      connected = true;
      console.log('open')
    }
    
    socket.onmessage = function(evt) {
      const reply = JSON.parse(evt.data);
      console.log(reply);
      addMsg(reply.phone, reply.msg, reply.timestamp, 'messages');
    }
    
    socket.onclose = function(evt) {
      connected = false;
      console.log('closed')
      check();
    }
  }

  function check() {
    if(!socket || socket.readyState == 3) start();
  }

  start();
  setInterval(check, 5000);
});

Aquí hay 2 funciones start() para establecer una nueva conexión WebSocket y los correspondientes manejadores de eventos, y check() para comprobar el estado de la conexión y reconectar si se desconecta.

Ahora, si abres la consola del navegador en tu aplicación y la dejas sola durante un rato, deberías ver una serie de mensajes open y close siendo registrados en la consola.

Check

Sustituya el marcado por defecto del elemento the index.html por lo siguiente:

<main>
  <h1>V-mobile</h1>
  <ul id="messages"></ul>
</main>

Podemos añadir más elementos y estilos para que se parezca más a un teléfono móvil más adelante. Por ahora, primero vamos a hacer que todos los datos se muestren en el lugar correcto. Añadiremos 2 funciones más al archivo client.js que analizarán los datos enviados desde el servidor y los añadirán al DOM.

function addMsg(sender, content, time, parent) {
  const messages = document.getElementById(parent); 
  const newMsg = document.createElement('li');
  messages.appendChild(newMsg);
  
  appendData(newMsg, sender);
  appendData(newMsg, content);
  appendData(newMsg, time);
}

function appendData(newMsg, data) {
  const textSpan = document.createElement('span');
  const textContent = document.createTextNode(data);
  textSpan.appendChild(textContent);
  newMsg.appendChild(textSpan);
}

Añade esta nueva función al controlador de eventos onmessage y cuando envíes un SMS a tu número virtual, ese SMS se mostrará en tu página, aunque con un poco de estilo y un aspecto no demasiado bonito.

socket.onmessage = function(evt) {
  const reply = JSON.parse(evt.data);
  console.log(reply);
  addMsg(reply.phone, reply.msg, reply.timestamp, 'messages');
}

First Inbound

Envío de SMS desde el navegador con Messages API de Nexmo

Creación de una aplicación de mensajes

A continuación, vuelva a su panel de control Nexmo y navegue hasta la sección Crear una aplicación en la sección Mensajes y envío en la barra lateral. Introduce el nombre de tu aplicación y las URL de los webhooks con la URL de tu aplicación Glitch como host. También tendrás que generar un par de claves pública/privada, lo que te pedirá que descargues el archivo private.key archivo.

Generate key

Es importante que ambas URLs de webhooks estén configuradas, y que su aplicación tenga rutas configuradas para estos dos puntos finales para aceptar POST con el fin de evitar una acumulación no deseada en la cola de mensajes.

A continuación, haga clic en el botón naranja Crear aplicación naranja. La siguiente pantalla le permitirá vincular su número virtual a su solicitud haciendo clic en el botón Vincular debajo del botón Gestionar Gestionar.

Create a message application

Por último, se le preguntará si desea vincular alguna cuenta externa, pero puede dejarlo por ahora.

External accounts

Para subir el archivo private.key archivo a Glitch y mantenerlo en secreto, puede crear el archivo en una .data carpeta. El contenido de esta carpeta sólo será visible para ti y para los colaboradores de confianza que añadas al proyecto. Copia el contenido del archivo private.key que descargaste anteriormente en este nuevo archivo.

Private key

Configuración de credenciales

Glitch admite variables de entorno a través del archivo .env que es una forma segura de almacenar tus credenciales API y otros datos privados para tu proyecto. Configura tu clave API, secreto, número virtual Nexmo, ID de la aplicación Messages y ruta de la clave privada en el archivo .env archivo.

Asegúrese de encerrarlos entre comillas, ya que cada valor debe ser una cadena. Haremos referencia a ellos para inicializar una nueva instancia de Nexmo, que utilizaremos para enviar mensajes SMS.

env file

Añade tus credenciales API al archivo server.js e inicialice una nueva instancia de Nexmo.

const NEXMO_API_KEY = process.env.NEXMO_API_KEY;
const NEXMO_API_SECRET = process.env.NEXMO_API_SECRET;
const NEXMO_APPLICATION_ID = process.env.NEXMO_APPLICATION_ID;
const NEXMO_APPLICATION_PRIVATE_KEY_PATH = process.env.NEXMO_APPLICATION_PRIVATE_KEY_PATH;
const NEXMO_NUMBER = process.env.NEXMO_NUMBER;

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

Enviar un SMS desde el navegador

Necesitaremos algún método para que los usuarios introduzcan el número de teléfono del destinatario y el mensaje que quieren enviar, así que vamos a añadir algunos campos de entrada para que puedan hacerlo.

<input type="tel" name="phone" placeholder="Send SMS to…?" required>
<input type="text" name="msg">
<button id="send" type="button">Send</button>

Inputs

Para gestionar las entradas del usuario, añada lo siguiente a su archivo client.js archivo:

const msgField = document.querySelector('input[name="msg"]');
const phoneField = document.querySelector('input[name="phone"]');
const sendBtn = document.getElementById('send');

msgField.addEventListener('keypress', (evt) => {
  if (evt.keyCode === 13) {
    const passed = phoneCheck(phoneField);

    if (passed) {
      send(socket, phoneField, msgField);
    } else {
      console.log('Phone field was not filled. To do: add error handling UI here.');
    }
  }
}, false);

sendBtn.addEventListener('click', (evt) => {
  const passed = phoneCheck(phoneField);

  if (passed) {
    send(socket, phoneField, msgField);
  } else {
    console.log('Phone field was not filled. To do: add error handling UI here.');
  }
}, false);

function phoneCheck(phoneField) {
  return phoneField.value !== '' && /^\d+$/.test(phoneField.value);
}

function send(socket, phoneField, msgField) {
  const phone = phoneField.value.replace(/\D/g,'');
  const msg = msgField.value;
  const payload = JSON.stringify({
    phone: phone,
    message: msg
  });

  socket.send(payload);

  const date = new Date();
  const time = date.toLocaleTimeString();

  addMsg('YOUR_APP_NAME', msg, time, 'messages');
  msgField.value= '';
}

Lo que hacemos aquí es activar la función send() cuando el usuario hace clic en el botón Enviar o el botón Intro . También hay una comprobación muy rudimentaria en el campo del número de teléfono, para asegurarse de que sólo se introducen dígitos. El mensaje también se mostrará en el navegador, como una aplicación de mensajería típica.

Hay mucho mucho Hay mucho más que hacer para la validación de campos desde un punto de vista de seguridad y UX que está fuera del alcance de este tutorial, pero la validación es importante y siempre es una buena práctica dedicar esfuerzo y pruebas para asegurarse de que se hace bien.

En el lado del servidor, tenemos que tomar los datos enviados desde el navegador y reenviar el mensaje al número de teléfono del destinatario.

Añada las siguientes rutas a su archivo server.js archivo:

router.post('/webhooks/inbound-message', async (ctx, next) => {
  ctx.status = 200;
});

router.post('/webhooks/message-status', async (ctx, next) => {
  ctx.status = 200;
});

Esto es para asegurarse de que POST las solicitudes de Nexmo tienen puntos finales adecuados para ser enviados y recibir 200 respuestas a la entrega con éxito.

Añadiremos un gestor de mensajes y una función forwardSMS() que utilizará la Messages API de Nexmo para enviar un SMS al destinatario una vez recibidos los datos del navegador.

wsserver.on('connection', function connection(socket) {
  socket.on('message', data => {
    forwardSms(JSON.parse(data));
  });
});

function forwardSms(payload) {
  const phone = payload.phone;
  const msg = payload.message;

  nexmo.channel.send(
    { "type": "sms", "number": phone },
    { "type": "sms", "number": NEXMO_NUMBER },
    {
      "content": {
        "type": "text",
        "text": msg
      }
    },
    (err, data) => {
      if (err) { console.log(err) }
      if (data) { console.log('Outbound message successful: ', data.message_uuid) }
    }
  )
}

Para comprobar que todo funciona como es debido, introduce el número de teléfono de un móvil al que tengas acceso y envía un mensaje de prueba. El destinatario debería recibir el SMS en unos segundos.

Forward SMS

Si el destinatario responde al SMS, el mensaje se reenviará al navegador.

Reply

Ahora que el sistema subyacente está funcionando, hay varias cosas que puedes hacer si quieres continuar con este proyecto, como hacer la interfaz más bonita, añadir comprobaciones de validación más fuertes tanto en el cliente como en el servidor, manejo de casos extremos, etc.

Mi versión de este proyecto se llama V-mobile y puedes verlo en Glitch. Si te gusta cómo queda, no dudes en remezclar mi proyecto y hacerlo tuyo.

End result

¿Y ahora qué?

Si quieres saber más sobre estas API, aquí tienes algunos enlaces que pueden resultarte útiles:

• Documentación de la Messages API en el portal para desarrolladores

• Serie de tutoriales para varias API de Nexmo

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

• Háganos saber lo que piensa tuiteando en @NexmoDev