Crie um aplicativo seguro para consultas por vídeo usando a API da Vonage

No mundo de hoje, o Video é uma ferramenta essencial e poderosa para diversos cenários de uso: seja para participar remotamente de uma aula, consultar um médico ou até mesmo compartilhar sua localização em caso de emergência. Esses são apenas alguns exemplos do que os desenvolvedores criaram com nossa plataforma, e todos eles têm pelo menos uma coisa em comum: suas soluções oferecem uma experiência personalizada por meio do Video.

Nesta postagem do blog, vamos apresentar a você um aplicativo de referência para agendamento de consultas por Video. Nós o desenvolvemos para servir de base para diferentes implementações. Mostraremos como você pode adicionar funcionalidades a ele e como aplicá-lo a diferentes casos de uso.

Em poucos passos simples, você terá uma solução que permite criar agendamentos por Video, enviar uma mensagem com o link do agendamento aos participantes e, é claro, iniciar uma conversa por Video. Você também aprenderá a personalizá-la em termos de aparência e usabilidade.

Você pode encontrar o código completo do aplicativo de exemplo no GitHub.

Contexto

Como engenheiros de soluções, temos a oportunidade de descobrir o que os desenvolvedores criam com nossas APIs — seja um caso de uso exclusivo, uma integração interessante ou até mesmo uma solução alternativa para um bug.

Parte do nosso trabalho consiste em identificar padrões no que nossos clientes desenvolvem e, a partir deles, criamos Applications de referência. Nosso objetivo é reduzir o tempo de desenvolvimento e oferecer um ponto de partida melhor.

Ao analisarmos o aplicativo de consultas por Video, pensamos em três recursos essenciais:

1. Agendar consultas com antecedência e garantir o cumprimento da data e do horário marcados.

2. Enviar mensagens aos participantes com links para participarem da chamada.

3. Interface de usuário básica para videochamadas, com botões que permitem aos participantes silenciar o próprio microfone e compartilhar a tela.

Nossa expectativa com esse projeto era oferecer aos nossos clientes uma vantagem inicial em seus projetos de Video.

Há uma variedade de casos de uso que poderiam ser implementados com base no aplicativo, e vamos explicar como.

Conceito

Este post vai te ajudar a personalizar dois componentes: um aplicativo Vue-Web e um servidor de aplicativos Express-NodeJS. Ao concluir este passo a passo, você terá um aplicativo básico e configurável para agendamento de consultas por Video.

Observação: Adicionamos um botão “Implantar no Heroku” no GitHub para sua conveniência.

Exemplo na área da saúde

Vamos supor um caso de uso simples na área da saúde para o aplicativo que estamos prestes a desenvolver. Normalmente, teríamos as seguintes funções: um profissional de saúde, um médico e um paciente.

O profissional de saúde agendará uma consulta entre o paciente e o médico por meio do aplicativo, que gerará dois links. Um link será enviado ao paciente, e o outro será enviado ao médico ou, talvez, adicionado à agenda dele.

O link para o paciente pode ser enviado por SMS ou por algum outro canal de mensagens, como o WhatsApp. Quando chegar a hora, o paciente entrará na consulta, assim como o médico, usando seus respectivos links.

Esses links abrirão uma consulta por Video no aplicativo. Dependendo de como você implementar sua solução, cada função poderá ter privilégios diferentes. Por exemplo, o médico poderia entrar na consulta a qualquer momento, enquanto o paciente só poderia entrar no horário agendado para ele.

Pré-requisitos

• Video API da Vonage conta

• Experiência básica com Node.js

• Experiência básica com Vue

Video API

A Video API da Vonage é uma solução baseada em WebRTC. Ela é compatível com diversas plataformas, incluindo navegadores, Android, iOS, Windows e macOS. Usaremos a API para criar sessões de vídeo ao vivo entre nossas diferentes funções. Você pode ler mais sobre a API no Centro de Desenvolvedores do Vonage Video.

Para esta aplicação, você precisará de um projeto da “API do OpenTok”. Caso ainda não tenha um, você pode criar um novo no painel de vídeo.

Messages API

A Messages API do Vonage é um gateway para diversos canais de mensagens, como SMS, WhatsApp e Viber. Ela permite enviar e receber mensagens por meio de um ou mais canais. Vamos usá-la para enviar mensagens SMS com os detalhes do agendamento aos nossos usuários. Você pode ler mais sobre a API no Portal do Desenvolvedor.

Você precisará de um número de telefone para usar com seu aplicativo. Use o painel da conta para encontrar um número para comprar e usar neste projeto.

Ferramentas

Recomendamos usar o ngrok para disponibilizar seu servidor e o Visual Studio Code para trabalhar no projeto.

Configuração

Clone o repositório de exemplo e acesse a pasta do projeto:

git clone https://github.com/nexmo-se/opentok-secure-appointment.git
cd opentok-secure-appointment

O example.env arquivo contém todos os parâmetros necessários para que o projeto funcione. Após configurá-lo, você precisará copiá-lo:

cp example.env .env

Vamos dar uma olhada nos itens configuráveis:

Messages API

Você precisará fornecer as credenciais para a Messages API, que podem ser encontradas no painel de controle das APIs de Comunicação da Vonage painel de controle. Além de API_KEY e API_SECRET, você deve incluir o número de telefone vinculado à sua conta.

Esse será o número que seu aplicativo usará para enviar mensagens SMS com os detalhes do agendamento.

Video API

Da mesma forma que na configuração da Messages API, você precisará incluir o API_KEY e API_SECRET do seu projeto de Video. Eles podem ser encontrados no painel de controle de vídeo.

Existem dois tipos de sessões entre os quais você pode escolher ao definir SESSION_MEDIA_MODE: retransmitidas ou roteadas.

As sessões retransmitidas são ponto a ponto, e a mídia não passa pelo servidor de mídia da Vonage. Já as sessões roteadas não são ponto a ponto, e a mídia é transmitida pelo servidor de mídia da Vonage.

As sessões retransmitidas apresentam menor latência, mas recomendamos que não haja mais do que três participantes nelas. Além disso, elas não oferecem suporte a algumas funcionalidades, como o arquivamento. As sessões roteadas, por outro lado, apresentam baixo desempenho em situações de largura de banda muito baixa, mas oferecem mais funcionalidades e podem acomodar um grande número de participantes.

Front-end

O aplicativo cliente precisa ser configurado com a URL do servidor, que será determinada por você e pela forma como você implantar o servidor. Recomendamos que você use o ngrok para desenvolver e testar seu aplicativo.

Além disso, o aplicativo de exemplo possui dois componentes da interface do usuário configuráveis: o logotipo da sua empresa e o nome da sua empresa (LOGO_URL & COMPANY_NAME respectivamente).

Por padrão, é possível participar de sessões de Video com a câmera desligada, apenas com áudio. Avalie o que é mais adequado para sua aplicação e defina o AUDIO_ONLY sinalizador de acordo com isso.

Por último, mas não menos importante — talvez você queira criar seu próprio modelo de SMS. Você tem três variáveis que vêm com o aplicativo por padrão: data do agendamento, horário do agendamento e link do agendamento. Essa é a mensagem de SMS que será enviada quando um novo agendamento for marcado, caso o profissional de saúde escolha essa opção.

Pode ser algo como:

You have an appointment set for {date} at {time}, please click this link to join! {link}

Ou

An appointment to our clinic has been set for you for {date}, at {time}. To join the video call please use this link: {link}

Você pode personalizá-lo de acordo com suas necessidades usando os parâmetros que fornecemos.

Bônus: Adicione mais parâmetros ao código editando o sendAppointmentMessage(appointment, number, shouldSendSMS) método em Booking.vue. Você poderia adicionar o nome do médico para torná-lo mais pessoal.

Scripts e Execução

Após a configuração, basta instalar o projeto executando npm install. Em seguida, você pode executá-lo usando npm run start-dev.

Seu servidor já deve estar em execução localmente, junto com o cliente. Acesse localhost:3000 (ou qualquer porta que você escolher) e marque sua primeira consulta! Você pode escolher o horário e decidir se deseja enviar um SMS para o “paciente”. Assim que a consulta for criada, você pode copiar a URL do Anfitrião ou do Convidado e participar da videoconsulta.

Referência Técnica

Se você quiser examinar mais detalhadamente as rotas do cliente, elas podem ser encontradas em ./src/client/App.vue. É também aqui que você pode adicionar mais rotas ao seu aplicativo.

Para uma explicação técnica detalhada, consulte o arquivo README do cliente e o README do servidor.

Observe que a rota padrão leva a /booking.

Guia do usuário

Como profissional de saúde, seu ponto de acesso deve ser https://SERVER_ADDRESS/booking (onde SERVER_ADDRESS é o endereço onde você implantou o aplicativo). Essa é a página que permite agendar consultas e visualizar a lista de consultas agendadas anteriormente.

Ao agendar uma consulta, você também pode enviar um SMS ao paciente — com o link para um número, por exemplo. Você também pode simplesmente clicar em “copiar link” na tabela de consultas. É aqui que você pode pensar em melhorar a experiência integrando outro canal, como o WhatsApp ou até mesmo um bot de conversão de texto em fala que ligue para você para notificá-lo sobre a consulta.

Cada agendamento tem dois links: um link do anfitrião e um link do convidado. No caso de uso da área da saúde, a URL do anfitrião será enviada ao médico e a URL do convidado será enviada ao paciente.

Após agendar uma reunião com sucesso, ambas as partes da chamada podem usar o link para participar da reunião. Você pode silenciar o microfone, desativar o Video e compartilhar sua tela.

Resumo

Nas seções anteriores, aprendemos como criar uma aplicação simples de consulta por Video e também discutimos como ela pode ser aplicada à área da saúde.

Embora a área da saúde seja uma aplicação clássica, certamente não é a única. Quando começamos a trabalhar neste projeto, tínhamos muitos casos de uso em mente: e-learning, finanças, entrevistas de emprego e muito mais. Nosso objetivo era encontrar o maior divisor comum desses casos de uso, mas sabemos que ainda há muito trabalho a ser feito.

À medida que a comunicação se torna cada vez mais multicanal, o mesmo ocorre com a complexidade de nossas soluções. O Video foi o ponto central deste artigo, mas se torna ainda mais eficaz quando combinado com outros canais, como mensagens em redes sociais, SMS, CRMs e outros.

Se você quiser saber mais sobre o que pode fazer com nossas APIs, acesse APIs da Vonage.