Implementar o Vonage Video na Appwrite Cloud

Pré-requisitos

Vamos criar um aplicativo de demonstração que mostre como usar nossa plataforma Vonage Video com o Appwrite Cloud como serviço de back-end.

• A Conta da Video API da Vonage. Vamos usá-la para configurar a parte de Video do back-end.

• Uma Account in Appwrite Cloud. Usaremos o Appwrite para gerenciar as partes de back-end do nosso aplicativo.

• A ferramenta Appwrite CLI. Vamos usá-la para configurar várias partes do nosso projeto.

• A Account no ngrok. Vamos usá-la para acessar nosso aplicativo de vídeo em vários dispositivos.

• O Aplicativo de demonstração disponível no GitHub.

O que é o Appwrite Cloud?

Appwrite se descreve como “uma plataforma de back-end para o desenvolvimento de aplicativos web, móveis e Flutter”. Originalmente, ela era oferecida como um contêiner Docker que os desenvolvedores podiam executar em seus servidores, fornecendo diversos serviços e funcionando basicamente como um “back-end pronto para uso”. Quando combinada com seus SDKs, os desenvolvedores tinham acesso à autenticação de usuários, um banco de dados NoSQL, armazenamento de arquivos, funções sem servidor, um banco de dados em tempo real e segurança integrada para o back-end de suas aplicações.

O Appwrite Cloud é uma solução hospedada para desenvolvedores que desejam utilizar esses recursos, mas querem evitar o processo de executar o Appwrite localmente. Assim, o desenvolvedor pode começar a trabalhar imediatamente, deixando que o Appwrite Cloud cuide de algumas dessas questões secundárias, como “Como lidamos com os logins dos usuários?” ou “Onde posso configurar um banco de dados?”. Um painel permite que você configure os dados do seu aplicativo, e você pode começar a desenvolvê-lo imediatamente.

O Appwrite Cloud também elimina a necessidade de o desenvolvedor configurar e gerenciar um servidor para executar o software Appwrite. Nos estágios iniciais do desenvolvimento de aplicativos, especialmente na fase de prova de conceito, concentrar-se na resolução do problema em questão é muito mais importante do que todas as opções de DevOps ou hospedagem disponíveis. Um único painel e um sistema que lida com autenticação, dados e algumas implantações básicas de código ajudam a acelerar o processo de desenvolvimento.

Uma das principais vantagens do Appwrite é a ampla variedade de linguagens de programação compatíveis. Seu sistema sem servidor é compatível com Node, Ruby, PHP, Python e Kotlin. Com exceção do .NET, você pode começar a trabalhar com as APIs da Vonage usando nossos SDKs existentes. Isso ajuda a unir o poder do Appwrite Cloud às APIs da Vonage. Como o Appwrite foi desenvolvido para se adaptar ao tamanho da sua aplicação, você pode ficar tranquilo, sabendo que é possível passar do ambiente de desenvolvimento para o de produção sem precisar trocar nada.

A única desvantagem do Appwrite é que ele não oferece uma solução de hospedagem além das funções sem servidor para aplicativos web. Isso significa que você precisará de um serviço para hospedar seus arquivos HTML estáticos ou código front-end para atender aos clientes. Embora seja compatível com qualquer provedor de hospedagem, eles sugerem o Vercel, Netlifyou Gitpod durante a configuração do aplicativo. Se você estiver desenvolvendo um aplicativo móvel que seja executado em um dispositivo, poderá acessar os back-ends.

Configurando o Appwrite Cloud

Faça login no painel do Appwrite Cloud. Em seguida, você configurará um novo projeto, que é um conjunto de configurações e dados para projetos individuais. Clique em “Criar um novo projeto” e dê um nome a ele. Vamos chamar o nosso de “Vonage Video Demo”. Clique em “Criar” assim que preencher o nome.

Appwrite Cloud Dashboard

É possível configurar um aplicativo do Appwrite de várias maneiras, mas, como queremos aproveitar o mecanismo de autenticação do Appwrite Cloud, vamos selecionar Aplicativo Web. Isso nos permitirá chamar o Web SDK e o Appwrite Cloud diretamente de uma página da web, em vez de depender de um servidor web back-end.

Adding the Web Platform

Em seguida, precisamos dar um nome ao nosso aplicativo e definir um nome de domínio válido para que as solicitações sejam enviadas a partir dele. Para a demonstração, digite “Vonage Client App” e, em seguida, um asterisco (“*”) como domínio. Em um aplicativo de produção, você definiria isso como o domínio a partir do qual seu JavaScript seria chamado, mas, para fins de demonstração, permitiremos todos os domínios. Isso nos permite testar localmente e, posteriormente, por meio do ngrok.

Registering a New Web App

Clique em “Próximo”e, em seguida, em Ignorar etapas opcionais. Todas as dependências do Appwrite já estarão configuradas no aplicativo de demonstração, mas esta página mostra os pacotes a serem instalados em um aplicativo Node.js. Concluímos a configuração do aplicativo; portanto, continue clicando em qualquer Próximo até chegar ao painel de controle.

Appwrite Project Dashboard

Autenticação de usuários com o Appwrite Cloud Authentication

O Appwrite oferece diversos mecanismos de autenticação integrados. Os desenvolvedores podem escolher entre a verificação básica por nome de usuário e senha — que é a que vamos usar — e vários provedores externos de OAuth, como Discord, Apple e Google. Nossos usuários farão login com um nome de usuário e uma senha para se autenticar. No entanto, como o Appwrite oferece suporte a diversos provedores OAuth, você poderia substituir a autenticação por nome de usuário e senha por um serviço completamente diferente.

No seu painel do Appwrite, clique em “Auth” no menu de navegação à esquerda e, em seguida, acesse Configurações. Desative todas as opções, exceto “E-mail/Senha” e “JWT”. Você sempre poderá reativá-las mais tarde.

Appwrite Auth Settings

Embora possamos criar usuários programaticamente por meio do SDK do Appwrite, vamos criar um usuário pela interface do usuário por enquanto. Clique em Usuáriose, em seguida, em + Criar usuário. Preencha os campos Nome, E-mail, Telefone e Senha por enquanto. Clique no Criar para salvar o usuário.

Creating an Appwrite User

Em nosso aplicativo web, podemos restringir o acesso dos usuários à reunião propriamente dita, garantindo que eles tenham feito login por meio do Appwrite. O Appwrite Web SDK permite que você obtenha as credenciais do usuário a partir de um formulário e crie uma nova sessão de login; portanto, vamos usar isso para fazer o login do usuário. Em seguida, usaremos um pacote chamado zustand, que manterá nossas informações de usuário de uma página para outra.

const userStore = (set: any, get: any) => ({
	user: null,
	isLoggedIn: false,
	login: async (email: string, password: string) => {
		await account.createEmailSession(email, password)
			.then((resp: any) => {
				set(() => ({ user: resp, isLoggedIn: true}));
		})
	},
	logout: async () => {
		await account.deleteSession('current')
			.then(() => {
				set(() => ({ user: null, isLoggedIn: false}));
		})
	},
})

O hook possui métodos de login e logout, que se comunicarão com o Appwrite quando fizermos o login. Nosso formulário no Login componente chamará um manipulador que invocará o userStore.login() método para fazer o login do usuário.

Vamos controlar o acesso às rotas em nosso aplicativo usando o RequireAuth componente. Esse componente verifica se o usuário está conectado e, caso não esteja, o redireciona para a página de login.

import { Navigate } from "react-router-dom";
import { useUserStore } from "../hooks/userStore";

export default function RequireAuth({ children }) {
	const isLoggedIn = useUserStore((state) => state.isLoggedIn);
	return isLoggedIn === true ? children : <Navigate to="/login" replace />
}

Isso nos permite envolver qualquer componente dentro deste RequireAuth componente para garantir que os usuários façam login antes de poderem acessar a reunião!

const router = createBrowserRouter(
	createRoutesFromElements(
		<Route path="/" element={<Root />}>
			<Route index element={<RequireAuth><Home /></RequireAuth>}></Route>
			<Route path="/login" element={<Login />}></Route>
			<Route path="/logout" element={<Logout />}></Route>
		</Route>
	)
)

function App() {
	return (
		<RouterProvider router={router}></RouterProvider>
	)
}

Utilizando o Appwrite Database para nosso backend

O Appwrite Cloud oferece acesso a um banco de dados NoSQL baseado em documentos. Vamos usá-lo para armazenar informações sobre a sessão de Video que criaremos, a fim de gerar as credenciais adequadas quando um usuário fizer login.

O Appwrite Cloud permite criar bancos de dados e coleções por meio da interface do usuário na web ou usando a ferramenta de linha de comando. Vamos criar o esquema do banco de dados e da coleção a partir da linha de comando para agilizar o processo.

Podemos usar o appwrite databases create para criar um novo banco de dados. Vamos atribuir a ele um ID e um nome fáceis de lembrar:

Em seguida, precisamos definir uma coleção dentro do banco de dados. As coleções são semelhantes a uma tabela em um banco de dados relacional. A coleção terá um esquema definido, e cada documento (como uma linha em um banco de dados relacional) conterá as seguintes informações. Por enquanto, vamos armazenar o ID da sessão que a plataforma Tokbox nos retorna e salvá-lo como um campo chamado “session_id”.

Usamos o appwrite databases createCollection para criar uma nova coleção chamada “video-demo” e, em seguida, definimos um único atributo (ou campo) chamado “session_id” que os documentos devem conter:

Usaremos o banco de dados quando alguém for criar credenciais para a sessão de Video. Não há nada digno de destaque aqui, já que os SDKs do Appwrite cuidam do acesso ao banco de dados e oferecem interfaces em várias linguagens. No nosso caso, buscaremos um documento que armazene o ID da sessão de Video e, caso ele não exista, criaremos um novo documento.

try {
	$document = $appwriteDatabases->getDocument('video-demo', 'sessions', 'video-session');
} catch (AppwriteException $e) {
	$session = $opentok->createSession();
	$document = ['session_id' => $session->getSessionId()];
	
	$appwriteDatabases->createDocument('video-demo', 'sessions', 'video-session', $document);
}

A documentação completa sobre como usar o banco de dados do Appwrite por meio dos SDKs pode ser encontrada em https://appwrite.io/docs/getting-started-for-server.

Funções do Appwrite

Como nosso front-end se encarregará de exibir uma sala de videoconferência, precisamos de uma lógica para ser executada em segundo plano. O Appwrite permite que funções implantadas em várias linguagens de programação realizem tarefas agendadas ou pontuais, conforme necessário. Utilizaremos essa funcionalidade para gerar credenciais para nossa sessão de vídeo.

Até agora, usamos a interface gráfica da web para configurar o projeto e a CLI do Appwrite para configurar o banco de dados. Também podemos gerar um arquivo de configuração com todas as nossas definições, chamado appwrite.json. Se você estiver usando o aplicativo de demonstração, copie appwrite.json.dist para appwrite.json, e você poderá usá-lo para implantar o código do backend.

Uma vantagem de usar appwrite.json e da CLI do Appwrite é a capacidade de fazer a implantação de vários itens ao mesmo tempo. Como temos três funções, podemos usar a CLI do Appwrite para implantá-las conforme definido no arquivo de configuração.

Se você abrir appwrite.json, você encontrará uma seção chamada “funções”. Nela, definimos um objeto que detalha todas as informações sobre nossa função. Como nosso backend está desacoplado do front-end, optei por escrever as funções em PHP em vez de Node.js. Você pode usar uma variedade de linguagens compatíveis com o Appwrite, incluindo Python, .NET e até mesmo Deno.

A função `config` especifica os ambientes de execução, o caminho para o código, quaisquer arquivos que desejamos ignorar, as permissões para quem pode executar as verificações e muito mais. Também fornecemos uma lista de variáveis que precisam ser passadas à função para que ela funcione, como nossa chave e segredo da API da Vonage. Preencha as variáveis com as informações da sua conta.

Podemos implantar a função com uma única chamada:

Nosso código será compactado e enviado para os servidores do Appwrite, ficando disponível para uso após alguns segundos.

Você pode consultar o código de exemplo das funções na functions/ pasta. Para a função de credenciais, procuramos uma sessão de Video existente na video-demo.sessions coleção. Caso não haja nenhuma, criamos uma nova sessão de vídeo usando o SDK do OpenTok para PHP e a salvamos na coleção. Em seguida, retornamos o ID da sessão de vídeo, a chave da Video API e um token gerado no lado do cliente.

A título de observação, nosso aplicativo de demonstração também fornece as informações do nosso banco de dados como parte da configuração. Você pode implantá-lo com a CLI do Appwrite, da mesma forma que nossas funções:

Vonage Video Experience Composer

Agora que já conseguimos fazer login em nosso aplicativo, vamos criar a interface do usuário para a videoconferência. A Vonage oferece três níveis de Video API que permitem que você decida o grau de controle que deseja sobre o produto de vídeo final.

• Video API da Vonage - Uma experiência personalizável de baixo nível, na qual você controla tudo

• Vonage Video Express - Você cuida do layout, e nós cuidamos de todas as melhores práticas

• Vonage Meetings - Nós cuidamos de tudo. Você acessa um site como anfitrião ou convidado

Precisaremos de uma aplicação de vídeo já criada. Faça login na sua conta de vídeo em https://tokbox.com/account. Clique em “Projetos” no painel e, em seguida, em “Criar novo projeto”. Como não estamos criando um projeto incorporado, clique em “Criar projeto personalizado”. Digite “Vonage Appwrite Demo” como nome e clique em “Criar”. Você receberá uma chave de API e um segredo; insira-os no seu appwrite.json arquivo e implante a função com as credenciais atualizadas.

Para esta demonstração, utilizaremos o Vonage Video Express. Isso reduz a quantidade de código que precisamos adicionar ao nosso aplicativo para criar e manter a sala, em comparação com a Video API completa, mas ainda nos permite controlar o layout da sala.

import { useEffect, useRef } from "react";
import { functions } from "../appwrite/config";
import { Room, getDevices } from "@vonage/video-express"
  
const Home = () => {
	let room = useRef(null)
	const getCredentials = async () => {
		const execution = await functions.createExecution('generate-creds')
		const log = await functions.getExecution('generate-creds', execution['$id'])
		return JSON.parse(log.response);
	}

	useEffect(() => {
		const boot = async () => {
			const creds = await getCredentials();
			room.current = new Room({
				apiKey: creds.apiKey,
				sessionId: creds.session_id,
				token: creds.token,
				roomContainer: 'roomContainer'
			});
			room.current.join()
		}
		boot();
	})

return (
	<>
		<div className="grid grid-cols-1 gap-4" id="roomContainer"></div>
		<button onClick={cycleVideo} className="btn btn-primary">Cycle Video</button>
	</>
	)
}

export default Home

O Video Express se encarrega de configurar todas as divs de layout e o código para nós, então precisamos criar um contêiner para a sala. Nosso componente retorna um <div> chamado “roomContainer”, que passamos como roomContainer chave para o Room que criamos.

Precisamos obter algumas credenciais válidas para nosso aplicativo. O Vonage Video exige uma chave de API para nosso projeto de back-end, um ID de sessão para conexão e um token de conexão especial que funciona como nossas credenciais. Podemos usar o functions export do nosso objeto de configuração do Appwrite para gerar uma nova “execução” da nossa função. Em seguida, lemos a resposta contendo todas as informações de conexão necessárias e a passamos para o objeto da sala.

Agora, se executarmos nosso aplicativo e duas pessoas fizerem login (ou, no meu caso, fizerem login com a mesma Account em dois navegadores), teremos duas pessoas em uma videoconferência!

The Video Conference

Próximos passos

Esta demonstração apresenta uma parte dos recursos do Appwrite. Você pode ampliar o código da demonstração para usar diferentes métodos de login, oferecer suporte a várias salas e até mesmo hospedar e disponibilizar arquivos com o serviço de armazenamento do Appwrite. Se quiser ter mais controle sobre a saída de vídeo, substitua o Video Express pelas APIs de nível mais baixo ou experimente ajustar o CSS para alterar os aspectos visuais.

Dê uma olhada no Appwrite e veja se ele ajuda a acelerar seu desenvolvimento; e conte para a gente quais projetos legais você está criando usando o Appwrite e as APIs de comunicação da Vonage.