Compartir:
){kind=small}
Enrico es un antiguo miembro del equipo de Vonage. Trabajó como ingeniero de soluciones, ayudando al equipo de ventas con su experiencia técnica. Es un apasionado de la nube, las startups y las nuevas tecnologías. Es cofundador de una startup WebRTC en Italia. Fuera del trabajo, le gusta viajar y probar tantas comidas raras como sea posible.
Crea una aplicación segura de citas por Video usando la API de Vonage
Tiempo de lectura: 7 minutos
En el mundo actual, el Video es una herramienta esencial y poderosa para muchos casos de uso: ya sea para unirse remotamente a un aula, consultar con su médico, o incluso compartir su paradero en caso de emergencia. Estos son sólo algunos ejemplos de lo que los desarrolladores han construido con nuestra plataforma, y todos tienen al menos una cosa en común: su solución proporciona una experiencia personalizada utilizando el vídeo.
En esta entrada del blog, le guiaremos a través de una aplicación de referencia para citas de vídeo. La construimos para proporcionar una base para diferentes implementaciones. Mostraremos cómo puedes añadirle funciones y cómo puedes aplicarla a diferentes casos de uso.
En unos sencillos pasos, habrás conseguido una solución que te permite crear citas por vídeo, enviar un mensaje con un enlace a la cita a los participantes y, por supuesto, iniciar una conversación por vídeo. También aprenderás a personalizarla desde el punto de vista del aspecto.
Puede encontrar el código completo de la aplicación de ejemplo en GitHub.
Como ingenieros de soluciones, nos enteramos de lo que los desarrolladores crean con nuestras API, ya sea un caso de uso único, una integración interesante o incluso una solución para un error.
Parte de nuestro trabajo consiste en identificar patrones en lo que construyen nuestros clientes y, a partir de ellos, creamos aplicaciones de referencia. Nuestro objetivo es reducir el tiempo de desarrollo y ofrecer un mejor punto de partida.
Cuando pensamos en la aplicación de citas por vídeo, pensamos en tres características esenciales:
Programar las citas con antelación y respetar su hora y fecha.
Envío de mensajes a los participantes con enlaces para unirse a la llamada.
Interfaz básica de videollamada con botones que permiten a los participantes silenciarse y compartir su pantalla.
Nuestra expectativa con este proyecto era proporcionar a nuestros clientes una ventaja en su proyecto de Video.
Hay una gran variedad de casos de uso que podrían implementarse en la parte superior de la aplicación, y vamos a explicar cómo.
Este post te ayudará a personalizar dos componentes: Una aplicación Vue-Web y un servidor de aplicaciones Express-NodeJS. Después de terminar este tutorial tendrás una aplicación de citas de Video básica y configurable.
Nota: Hemos añadido un botón 'deploy to Heroku' en GitHub para tu comodidad.
Supongamos un caso de uso sanitario sencillo para la aplicación que vamos a crear. Normalmente tendríamos los siguientes roles: Un clínico, un médico y un paciente.
El clínico concertará una cita entre el paciente y el médico utilizando la aplicación, que generará dos enlaces. Uno de ellos se enviará al paciente y el otro al médico, o tal vez se incluya en su calendario.
El enlace al paciente podría enviarse por SMS o algún otro canal de mensajería, como WhatsApp. Cuando llegue el momento, el paciente se unirá a la cita y también lo hará el médico utilizando sus enlaces.
Estos enlaces iniciarán una consulta por vídeo en la aplicación. Dependiendo de cómo implemente su solución, cada rol puede tener diferentes privilegios. Por ejemplo, el médico podría incorporarse a la cita en cualquier momento, mientras que el paciente sólo podría hacerlo en el horario programado para él.
API de Video de Vonage Account
Experiencia en NodeJS a nivel principiante
Experiencia en Vue a nivel principiante
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.
La Video API de Vonage es una solución basada en WebRTC. Es compatible con muchas plataformas, incluidos navegadores, Android, iOS, Windows y macOS. Usaremos la API para crear sesiones de video en vivo entre nuestros diferentes roles. Puedes leer más sobre la API en el Centro para desarrolladores de Video de Vonage.
Para esta aplicación, necesitarás un proyecto 'OpenTok API'. Si aún no tienes uno, puedes crear uno nuevo en el panel de Video.
Messages API de Vonage es una puerta de enlace a múltiples canales de mensajería, como SMS, WhatsApp y Viber. Te permite enviar y recibir mensajes a través de uno o más canales. La usaremos para enviar mensajes SMS con los detalles de la cita a nuestros usuarios. Puede obtener más información sobre la API en el portal para desarrolladores.
Necesitará un número de teléfono para utilizar con su solicitud. Utilice el panel de Account para encontrar un número que comprar y utilizar para este proyecto.
Recomendamos utilizar ngrok para exponer su servidor y Visual Studio Code para trabajar en el proyecto.
Clone el repositorio de ejemplo y navegue hasta la carpeta del proyecto:
git clone https://github.com/nexmo-se/opentok-secure-appointment.git
cd opentok-secure-appointmentEl archivo example.env contiene todos los parámetros necesarios para poner en marcha el proyecto. Después de configurarlo, tendrá que copiarlo:
cp example.env .envEchemos un vistazo a lo configurable:
Deberás proporcionar credenciales para Messages API, que puedes encontrar en las API de Vonage Communications tablero. Además de API_KEY y API_SECRETdeberás incluir el número de teléfono que vinculaste a tu Account.
Ese será el número que su aplicación utilizará para enviar mensajes SMS con los detalles de la cita.
De forma similar a la configuración de Messages API, deberá incluir los parámetros API_KEY y API_SECRET de tu proyecto de Video. Estos se pueden encontrar en el panel de Video.
Hay dos tipos de sesiones que puede elegir configurando SESSION_MEDIA_MODE: retransmitidas o enrutadas.
Las sesiones retransmitidas son de igual a igual y los medios no pasan por el servidor de medios de Vonage. Las enrutadas, sin embargo, no son de igual a igual y los medios se transmiten a través del servidor de medios de Vonage.
Las sesiones retransmitidas tienen menor latencia, pero recomendamos que no haya más de tres participantes en ellas. Además no admiten algunas funciones, como el archivado. Las sesiones enrutadas, por su parte, funcionan mal en situaciones de muy poco ancho de banda, pero admiten más funciones y pueden manejar un gran número de participantes.
La aplicación cliente necesita ser configurada con la URL del servidor, que será determinada por usted y por cómo despliegue su servidor. Le recomendamos que utilice ngrok para desarrollar y probar su aplicación.
Además, la aplicación de ejemplo tiene dos componentes de interfaz de usuario configurables: el logotipo y el nombre de su empresa (LOGO_URL & COMPANY_NAME respectivamente).
Las sesiones de Video podrían unirse cuando la cámara está apagada por defecto, con sólo audio. Considere qué es lo más adecuado para su aplicación y defina el indicador AUDIO_ONLY en consecuencia.
Por último, pero no por ello menos importante, puedes crear tu propia plantilla de SMS. Dispone de tres variables que vienen por defecto con la aplicación: fecha de la cita, hora de la cita y enlace de la cita. Este es el mensaje SMS que se enviará cuando se programe una nueva cita si el clínico elige esa opción.
Puede ser algo como:
You have an appointment set for {date} at {time}, please click this link to join! {link}O
An appointment to our clinic has been set for you for {date}, at {time}. To join the video call please use this link: {link}Puede adaptarlo a sus propias necesidades utilizando los parámetros que le hemos dado.
Bono: Añade más parámetros al código editando el método sendAppointmentMessage(appointment, number, shouldSendSMS) en Booking.vue. Podrías añadir el nombre del médico para hacerlo más personal.
Tras la configuración, basta con instalar el proyecto ejecutando npm install. A continuación, puede ejecutarlo utilizando npm run start-dev.
Tu servidor debería ejecutarse ahora localmente, junto con el cliente. Vaya a localhost:3000 (o el puerto que elijas) y reserva tu primera cita. Puedes elegir la hora y si quieres enviar un SMS al "paciente". Una vez creada la cita, puedes copiar la URL del Anfitrión o del Invitado y unirte a la videoconsulta.
Si desea echar un vistazo más de cerca a las rutas del cliente, se pueden encontrar en ./src/client/App.vue. Aquí es también donde puedes añadir más rutas a tu aplicación.
Para una explicación técnicamente detallada, consulte el archivo LÉAME del cliente y el LÉAME del servidor.
Observe que la ruta por defecto conduce a /booking.
Como clínico, su punto de entrada debería ser https://SERVER_ADDRESS/booking (donde SERVER_ADDRESS es donde desplegó la aplicación). Esta es la página que le permite programar citas y ver la lista de citas previamente programadas.
Al programar una cita, también puede enviar un SMS al paciente con el enlace a un número, por ejemplo. También puede simplemente hacer clic en "copiar enlace" en la tabla de citas. Aquí es donde puedes pensar en mejorar la experiencia integrando otro canal, como WhatsApp o incluso un bot de texto a voz que te llame para notificarte la cita.
Cada cita tiene dos enlaces: un enlace de anfitrión y un enlace de invitado. En el caso de uso sanitario, la URL anfitriona se enviará al médico y la URL invitada se enviará al paciente.
Después de programar con éxito una cita, ambas partes de la llamada pueden utilizar el enlace para unirse a la cita. Puede silenciar, anular la publicación de vídeo y compartir la pantalla.
En las secciones anteriores hemos aprendido a crear una sencilla aplicación de videoconsulta, y también hemos hablado de cómo puede aplicarse a la asistencia sanitaria.
Aunque la sanidad es una aplicación clásica, desde luego no es la única. Cuando empezamos a trabajar en este proyecto, teníamos en mente muchos casos de uso: aprendizaje electrónico, finanzas, entrevistas de trabajo y mucho más. Nuestro objetivo era encontrar el máximo común divisor de esos casos de uso, pero sabemos que aún queda trabajo por hacer.
A medida que la comunicación se vuelve más y más multicanal, también lo hace la complejidad de nuestras soluciones. El Video fue el núcleo de este artículo, pero es aún más potente cuando se combina con otros canales como la Mensajería Social, SMS, CRMs y más.
Si deseas obtener más información sobre lo que puedes hacer con nuestras API, visita API de Vonage.
Compartir:
Enrico es un antiguo miembro del equipo de Vonage. Trabajó como ingeniero de soluciones, ayudando al equipo de ventas con su experiencia técnica. Es un apasionado de la nube, las startups y las nuevas tecnologías. Es cofundador de una startup WebRTC en Italia. Fuera del trabajo, le gusta viajar y probar tantas comidas raras como sea posible.