Ativar chamadas de vídeo em um aplicativo Next.js usando a Video API da Vonage

Introdução

Uma das maneiras mais eficazes de melhorar a experiência do usuário é habilitar o suporte a videochamadas ao vivo em seu aplicativo, para que os usuários possam sempre contar com esse recurso para resolver os problemas que estiverem enfrentando. No entanto, adicionar suporte a videochamadas ao seu aplicativo exige trabalho, já que é necessário lidar tanto com o suporte do servidor quanto do cliente para interagir com a videochamada. Além disso, dimensionar o suporte a vídeo para milhares de usuários dá muito trabalho. Compreendendo os pontos críticos e as dificuldades de adicionar suporte a vídeo ao seu aplicativo, a Video API da Vonage foi criada.

Neste artigo, você aprenderá como habilitar chamadas de vídeo em um aplicativo Next.js de demonstração, adicionando apenas algumas linhas de código com a Video API da Vonage.

Sobre o framework Next.js

Next.js é um framework de código aberto com uma filosofia definida para a criação de aplicativos web full-stack com base na biblioteca React. É um framework robusto que combina os benefícios do React com a renderização do lado do servidor e a geração de sites estáticos. Além disso, o Next.js oferece recursos e convenções que permitem que você desenvolva a aplicação rapidamente, proporcionando uma excelente experiência ao desenvolvedor.

Sobre o aplicativo de demonstração

Vamos criar um aplicativo de demonstração para entender e praticar na prática como habilitar a funcionalidade de videochamada em um aplicativo Next.js.

Você desenvolverá um aplicativo de terapia que permite aos usuários agendar e realizar uma videochamada com os terapeutas de sua escolha. A disponibilização do recurso de videochamada é uma excelente funcionalidade para usuários que costumam ter dificuldades para se socializar e interagir com outras pessoas. Agora, eles podem participar da sessão de terapia de casa, no horário de sua preferência.

AVISO LEGAL: Esta aplicação tem fins exclusivamente didáticos; em casos de emergência, você deve consultar seu médico.

Pré-requisitos

Para compilar o aplicativo de demonstração, é necessário preparar os seguintes pré-requisitos.

• Um ambiente Node.js com a versão 12.8 ou superior, de acordo com requisitos do Next.js.

• A ambiente de linha de comando do Git para clonar o código do aplicativo de um repositório do GitHub

• Você tem uma conta na Plataforma de Video da Vonage para que você possa criar um novo projeto de Video API e integrar rapidamente o suporte a vídeo ao seu aplicativo Next.js.

• Você tem uma conta no Painel do Desenvolvedor da Vonage para usar a SMS API para enviar mensagens no aplicativo de demonstração.

Agora que você já preparou todos esses pré-requisitos, vamos criar o aplicativo Next.js.

Passo 1: Clonar o código do aplicativo

Como o aplicativo exige a criação de vários diretórios e arquivos para implementar a lógica do aplicativo e a interface do usuário, vamos clonar o código do aplicativo existente a partir deste repositório do GitHub. Abra seu terminal, crie um novo diretório chamado “Projects” e clone o código do aplicativo nesse diretório.

Altere o diretório atual para vonage-therapist-video-embed diretório.

Você deverá ver os diretórios e arquivos listados a seguir:

Code Project Structure

Vamos ver o que são.

Etapa 2: Entenda a estrutura dos arquivos.

No projeto da aplicação Next.js, você deve prestar atenção aos seguintes arquivos, além dos arquivos habituais do ambiente Node.js, tais como package.json ou package-lock.json, no diretório raiz.

1. next.config.js arquivo:

Este arquivo define a configuração comum para o aplicativo Next.js. Por exemplo, você pode definir o caminho das imagens do seu aplicativo; assim, se alguma imagem não corresponder a esses caminhos, o Next.js exibirá uma mensagem de erro.

/** @type {import('next').NextConfig} */

const nextConfig = {
  …
  images: {
	domains: ['images.unsplash.com',],
  },
};

module.exports = nextConfig;

1. pages diretório:

O pages diretório implementa:

• APIs de aplicativos dentro do api subdiretório. Essas APIs podem ser acessadas usando o formato de caminho de API /api/${api-name}. Com o suporte à criação de APIs, é por isso que consideramos o Next.js um framework de aplicativos web full-stack. Você pode saber mais sobre o suporte a APIs web do Next.js nesta documentação sobre rotas de API.

• Applications pages within other subdirectories, such as meeting ou therapies. Os usuários finais podem acessar as páginas do aplicativo nos caminhos /meeting ou /therapies. O Next.js oferece suporte a rotas aninhadas e roteamento dinâmico. Isso significa que você pode definir o nome do arquivo da página usando uma variável, como [id].js dentro do therapies/[detail] diretório, e os usuários podem obter mais informações sobre todos os terapeutas disponíveis em /therapies/{therapyCategory}/{therapyId}. Você pode saber mais sobre as páginas do Next.js nesta esta documentação.

1. src/components diretório:

Este diretório define todos os componentes web que você utilizará no aplicativo, como o cabeçalho, o rodapé ou o botão personalizado da página do aplicativo. Os componentes de interface do usuário do Next.js são semelhantes aos componentes do React, mas contam com suporte personalizado para componentes de interface do usuário, como Link ou Imagem.

1. utils diretório:

Este diretório implementa as funções dos utilitários que o aplicativo de terapia utilizará. Atualmente, há um arquivo chamado phone.js, que permite que o aplicativo envie uma mensagem SMS ao terapeuta, notificando-o de que um usuário criou um evento de reunião em um horário específico e incluindo um link de Video da reunião para que o terapeuta possa conversar com o usuário.

1. data diretório:

Esse diretório armazena todos os dados que o aplicativo utilizará. Atualmente, você tem um data.json arquivo que armazena dados sobre as informações dos terapeutas, como os nomes e os horários disponíveis, para que os usuários possam agendar consultas.

Por fim, há outros arquivos, como imagens para o logotipo do aplicativo e os arquivos CSS para aprimorar a GUI (interface gráfica do usuário) do aplicativo.

Etapa 3: Ativar a chamada de vídeo no aplicativo

Para ativar as chamadas de vídeo no aplicativo, você tem as três opções a seguir:

• Use o SDK de vídeo da Vonage

• Use o Vídeo-chat incorporado da Vonage

  • Usar a opção Iframe

  • Opção “Usar JavaScript”

No ambiente de produção, você deve usar a opção Vonage Video SDK, que permite configurar os SDKs do servidor e do cliente separadamente para ter mais controle sobre como deseja que o suporte a vídeo seja executado. Para manter o aplicativo de demonstração simples, vamos usar a opção “Iframe” para habilitar o recurso de chamada de vídeo.

Faça login na página da conta do Vonage Video e selecione a opção “Projetos” no painel à esquerda.

Video Projects

Selecione “Criar novo projeto” e clique no botão “Criar projeto incorporado”.

Create Embed Project

Em seguida, defina o nome do seu projeto e a URL do site. Em um ambiente de produção, você deve fornecer a URL do site que corresponda ao domínio registrado do seu aplicativo. Como vamos compilar o aplicativo apenas no ambiente local, vamos definir a URL do site como http://localhost:3000.

Configure Setting

Clique no botão “Avançar” e copie o código gerado pelo Iframe para um local seguro.

Crie um novo arquivo chamado embedCode.json dentro do data diretório. Dentro do embedCode.json, adicione o seguinte conteúdo a ele:

{
"embedCode":""
}

Dentro do valor em branco, insira o conteúdo gerado pelo iframe. Lembre-se de escapar os caracteres especiais do conteúdo gerado pelo iframe para que estejam em conformidade com as regras do arquivo JSON.

O conteúdo do embedCode.json arquivo é semelhante ao que se segue:

{
	"embedCode": "<iframe src='https://tokbox.com/embed/embed/ot-embed.js?embedId=YOUR_EMBED_ID&room=DEFAULT_ROOM&iframe=true' width='800px' height='640px' scrolling='auto' allow='microphone; camera'></iframe>"
}

Veja o index.js arquivo dentro do pages/meetings diretório. Esse arquivo implementa a página de consulta para que o usuário e o terapeuta possam se comunicar.

const meetingData = data.replace('DEFAULT_ROOM', `meeting${meetingId}`);

O código acima substituirá o DEFAULT_ROOM valor do código incorporado no iframe pelo valor gerado aleatoriamente meetingId, de modo que cada reunião será diferente. Isso permite que cada reunião seja independente das outras, para que você não acabe tendo um monte de usuários na mesma reunião.

<div id="ot_embed_demo_container" dangerouslySetInnerHTML={{__html: meetingData}}>
</div>

Neste código, o meetingData valor está incluído dentro do dangerouslySetInnerHTML campo para permitir que a página da reunião exiba a tela com o Video incorporado. Você pode saber mais sobre como o Next.js lida com scripts incorporados em esta página.

Etapa 4: Ativar a funcionalidade de envio de SMS

Para habilitar o envio de SMS, é necessário definir as seguintes variáveis de ambiente na sessão atual do terminal:

• VONAGE_SMS_BRAND: a variável “Vonage SMS Brand” serve para registrar o nome do remetente na mensagem SMS. No ambiente de produção, você deve registrar a variável VONAGE_SMS_BRAND para o seu aplicativo. Para fins deste tutorial, você pode definir a VONAGE_SMS_BRAND variável como “Vonage Sample App”. Você pode saber mais sobre como usar a SMS API da Vonage e registrar a VONAGE_SMS_BRAND na página de orientações da SMS API.

• THERAPIST_PHONE_NUMBER: este é o número de telefone do destinatário para o qual você enviará a mensagem SMS. Em uma situação real, cada terapeuta deveria ter seu próprio número de telefone. Para simplificar o tutorial, defina o THERAPIST_PHONE_NUMBER para qualquer número de telefone no qual você possa receber mensagens.

• VONAGE_API_KEY`` andVONAGE_API_SECRET: para poder enviar a mensagem SMS usando a SMS API da Vonage, é necessário fornecer a chave da API da Vonage. Você pode obter os valores de VONAGE_API_KEY e VONAGE_API_SECRET na página de introdução à SMS API da Vonage.

No Windows, é possível definir os valores usando o PowerShell com os seguintes comandos:

$env:VONAGE_SMS_BRAND = "Vonage Sample App"
$env:THERAPIST_PHONE_NUMBER = "your_therapist_phone_number"
$env:VONAGE_API_KEY = "your_vonage_api_key"
$env:VONAGE_API_SECRET = "your_vonage_api_secret"

Etapa 5: Abrir o aplicativo

Você precisa instalar as dependências necessárias para o aplicativo executando o seguinte comando:

Em seguida, para abrir o aplicativo no computador local, execute o seguinte comando:

O servidor será iniciado na porta 3000, conforme mostrado abaixo.

> therapist-mental-health-app@0.1.0 dev
> next dev
ready - started server on 0.0.0.0:3000, url: http://localhost:3000

Abra seu navegador e acesse este URL: http://localhost:3000. Você deverá conseguir ver a página inicial do aplicativo.

Therapist Home Page

Clique no botão “Terapias” no menu para ver todos os tipos de terapias.

Therapies Page

Clique na opção “Terapia Cognitiva” para ver todos os terapeutas disponíveis na categoria “Terapia Cognitiva”.

Therapy Cognitive Page

Aqui você pode ver três terapeutas chamadas “Anna Maria”, “Jennifer Great” e “Jessica Tart”. Vamos escolher “Anna Maria” para agendar uma Videochamada com ela.

Book a Meeting Form

Aqui você pode ver várias opções de horários disponíveis. Vamos escolher o horário “02/05/2023 10h” e inserir seu e-mail junto com seu número de telefone. Clique no botão “Enviar”.

Book a Meeting Successfully

Você verá que se inscreveu com sucesso na reunião com o therapist-1. Além disso, será enviada uma mensagem SMS com o seguinte conteúdo:

A user has booked a meeting with you. The meeting time is : ${therapyTime}. The meeting link is : http://localhost:3000/meetings?meetingId=${meetingId}

NOTA: Se você se cadastrou usando o mesmo número de telefone que já existia e recebeu a mensagem de erro “Este número de telefone xxx já foi cadastrado”, remova o número de telefone da seguinte forma:

• Acesse o arquivo chamado data.json dentro do data diretório

• Pesquise seu número de telefone

• Remova-o da lista “phoneNumbers_registered”.

• Salve o arquivo

O terapeuta pode salvar o link da reunião e participar da videoconferência no horário agendado.

Vamos supor que a reunião esteja acontecendo neste momento. Você pode clicar no botão “Participar da reunião” para acessar o Video da reunião.

Meeting Therapist

Clique em “Clique para iniciar o chat por Video”; assim, você poderá participar da videoconferência com o terapeuta.

Conclusão

Este artigo explicou o que é o framework Next.js e por que você deve considerá-lo para desenvolver suas futuras Applications. Você também aprendeu como habilitar a videochamada no aplicativo Next.js adicionando algumas linhas de código, graças ao suporte da Video API da Vonage, e como aplicar o recurso de notificação por SMS usando a SMS API da Vonage. Se quiser saber mais sobre as outras tecnologias da plataforma Vonage, acesse a página inicial para desenvolvedores da Vonage.