Implementar Vonage Video en Appwrite Cloud

Requisitos previos

Crearemos una aplicación de demostración que muestre cómo utilizar nuestra plataforma Vonage Video con Appwrite Cloud como servicio backend.

• A Cuenta API de Video de Vonage. La usaremos para configurar la parte de Video del backend.

• Una cuenta Account de Appwrite Cloud. Vamos a utilizar Appwrite para manejar las porciones de backend de nuestra aplicación.

• La herramienta Appwrite CLI. La utilizaremos para configurar varias partes de nuestro proyecto.

• A ngrok account. La usaremos para acceder a nuestra aplicación de Video en muchos dispositivos.

• El sitio Aplicación de demostración disponible en GitHub.

¿Qué es Appwrite Cloud?

Appwrite Originalmente se ofrecía como un contenedor Docker que un desarrollador podía ejecutar en sus servidores y que proporcionaba varios servicios y era en gran medida un "backend en una caja" Cuando se combinaba con sus SDK, los desarrolladores disponían de autenticación de usuario, una base de datos NoSQL, almacenamiento de archivos, funciones sin servidor, una base de datos en tiempo real y seguridad integrada para el backend de su aplicación.

Appwrite Cloud es una solución alojada para desarrolladores que desean utilizar estas funciones pero quieren evitar el proceso de ejecutar Appwrite localmente. Un desarrollador puede ponerse en marcha inmediatamente dejando que Appwrite Cloud se encargue de algunas de esas preguntas como "¿Cómo manejamos los inicios de sesión de usuario?" o "¿Dónde puedo configurar una base de datos?" Un panel de control le permite configurar los datos para su aplicación, y puede empezar a escribir su aplicación de inmediato.

Appwrite Cloud también elimina la necesidad de que el desarrollador configure y gestione un servidor para ejecutar el software Appwrite. En los primeros días del desarrollo de aplicaciones, especialmente en el nivel de prueba de concepto, centrarse en resolver el problema en cuestión es mucho más importante que todas las opciones DevOps o de alojamiento disponibles. Un único panel de control y un sistema que gestione la autenticación, los datos y algunos despliegues básicos de código ayudan a acelerar el proceso de desarrollo.

Una de las ventajas significativas de Appwrite es la amplia variedad de lenguajes que soportan. Su sistema sin servidor puede funcionar con Node, Ruby, PHP, Python y Kotlin. A falta de .NET, puedes empezar a trabajar con las API de Vonage utilizando nuestros SDK existentes. Esto ayuda a unir el poder de Appwrite Cloud con las API de Vonage. Dado que Appwrite está construido para escalar con tu aplicación, puedes estar tranquilo sabiendo que puedes pasar del desarrollo a la producción sin cambiar nada.

El único inconveniente de Appwrite es que no viene con una solución de alojamiento fuera de las funciones sin servidor para aplicaciones web. Esto significa que necesitarás un servicio para alojar tus archivos HTML estáticos o código frontend para servir a los clientes. Si bien pueden soportar cualquier host, sugieren Vercel, Netlifyo Gitpod durante la configuración de la aplicación. Si está creando una aplicación móvil que se ejecuta en un dispositivo, puede acceder a los backends.

Configuración de Appwrite Cloud

Inicie sesión en el panel de Appwrite Cloud. A continuación, configure un nuevo proyecto, que es una colección de configuraciones y datos para proyectos individuales. Haga clic en Crear un nuevo proyecto y dale un nombre. Llamaremos al nuestro "Vonage Video Demo". Haz clic en Crear una vez que hayas ingresado un nombre.

Appwrite Cloud Dashboard

Puede configurar una aplicación Appwrite de varias maneras, pero como queremos aprovechar el mecanismo de autenticación de Appwrite Cloud, seleccionaremos Aplicación Web. Esto nos permitirá llamar al SDK Web y a Appwrite Cloud directamente desde una página web en lugar de depender de un servidor web back-end.

Adding the Web Platform

Luego debemos darle un nombre a nuestra aplicación y un nombre de dominio que sea válido para las solicitudes. Para la demostración, ingresa "Vonage Client App" y luego un asterisco ("*") para el dominio. En una aplicación de producción, establecerías esto en el dominio desde el cual se llamaría a tu JavaScript, pero permitiremos todos los dominios para fines de demostración. Esto nos permite probar localmente y a través de ngrok más adelante.

Registering a New Web App

Haga clic en Siguientey luego en Omita los pasos opcionales. Todas las dependencias de Appwrite ya estarán configuradas en la aplicación demo, pero esta página te muestra los paquetes a instalar en una aplicación Node.js. Ya hemos terminado de configurar la aplicación, así que sigue haciendo clic en Siguiente hasta llegar al panel de control.

Appwrite Project Dashboard

Autenticación de usuarios con Appwrite Cloud Authentication

Appwrite permite una variedad de mecanismos de autenticación incorporados. Los desarrolladores pueden elegir desde la verificación básica de nombre de usuario y contraseña, que utilizaremos, hasta varios proveedores externos de OAuth como Discord, Apple y Google. Nuestros usuarios se conectarán con un nombre de usuario y una contraseña para autenticarse. Aún así, como Appwrite soporta muchos proveedores OAuth, podrías cambiar la autenticación de nombre de usuario y contraseña por un servicio completamente diferente.

En el panel de control de Appwrite, haga clic en Aut en el menú de navegación de la izquierda y, a continuación, vaya a Configuración. Desactiva todo excepto "Email/Contraseña" y "JWT". Siempre puedes volver a activarlos más tarde.

Appwrite Auth Settings

Aunque podemos crear usuarios mediante programación a través del SDK de Appwrite, por ahora crearemos un usuario a través de la interfaz de usuario. Haga clic en Usuariosy luego en + Crear usuario. Rellene por ahora las opciones Nombre, Correo electrónico, Teléfono y Contraseña. Haga clic en el botón Crear para guardar el usuario.

Creating an Appwrite User

En nuestra aplicación web, podemos impedir que los usuarios accedan a la reunión real asegurándonos de que han iniciado sesión a través de Appwrite. El Appwrite Web SDK le permite tomar las credenciales de usuario de un formulario y crear una nueva sesión de inicio de sesión, por lo que vamos a utilizar para iniciar la sesión del usuario. Luego usaremos un paquete llamado zustandque persistirá nuestra información de usuario de página a página.

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

El hook tiene un método de login y logout, que hablará con Appwrite cuando nos logueemos. Nuestro formulario en el componente Login llamará a un manejador que invocará al método userStore.login() para iniciar la sesión del usuario.

Vamos a crear rutas en nuestra aplicación utilizando el componente RequireAuth . Este componente comprueba si el usuario ha iniciado sesión, y si no lo ha hecho, lo redirige a la página de inicio de sesión.

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 />
}

Esto nos permite envolver cualquier componente dentro de este componente RequireAuth para asegurarnos de que los usuarios inician sesión antes de poder acceder a la reunión.

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

Uso de la base de datos Appwrite para nuestro backend

Appwrite Cloud da acceso a una base de datos NoSQL basada en documentos. La utilizaremos para almacenar información sobre la sesión de Video que crearemos para generar las credenciales adecuadas cuando un usuario inicie sesión.

Appwrite Cloud te permite crear bases de datos y colecciones a través de la interfaz de usuario web o utilizar su herramienta CLI. Vamos a crear la base de datos y el esquema de la colección desde la línea de comandos para acelerar las cosas.

Podemos utilizar el comando appwrite databases create para crear una nueva base de datos. Le daremos un ID y un nombre fáciles de recordar:

A continuación, tenemos que definir una colección dentro de la base de datos. Las colecciones son como una tabla de una base de datos relacional. La colección tendrá un esquema definido, y cada documento (como una fila en una base de datos relacional) tendrá la siguiente información. Por ahora, almacenaremos el identificador de sesión que nos devuelve la plataforma Tokbox y lo almacenaremos como un campo llamado "session_id".

Utilizamos el comando appwrite databases createCollection para crear una nueva colección llamada "video-demo" y, a continuación, definimos un único atributo (o campo) llamado "session_id" que deben tener los documentos:

Usaremos la base de datos cuando alguien vaya a crear credenciales para la sesión de Video. Aquí no hay nada destacable, ya que los SDKs de Appwrite se encargan de acceder a la base de datos y proporcionan interfaces en varios idiomas. En nuestro caso, buscaremos un documento que almacene el ID de la sesión de video, y si no existe, crearemos un nuevo 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);
}

Encontrará documentación completa sobre el uso de la base de datos Appwrite a través de los SDK en https://appwrite.io/docs/getting-started-for-server.

Funciones de Appwrite

Dado que nuestro front-end se ocupará de gestionar la visualización de una sala de videoconferencia, necesitamos cierta lógica que se ejecute en segundo plano. Appwrite permite funciones desplegadas en varios lenguajes para manejar tareas programadas o ad-hoc según sea necesario. Utilizaremos la capacidad de la función para generar credenciales para nuestra sesión de video.

Hasta ahora, hemos utilizado la GUI web para configurar el proyecto y la CLI de Appwrite para configurar la base de datos. También podemos generar un archivo de configuración con todos nuestros ajustes, llamado appwrite.json. Si estás usando la aplicación demo, copia appwrite.json.dist en appwrite.jsony puedes usarlo para desplegar el código del backend.

Una ventaja de usar appwrite.json y la Appwrite CLI es la capacidad de desplegar muchas cosas al mismo tiempo. Dado que tenemos tres funciones, podemos utilizar la Appwrite CLI para desplegarlos como se define en el archivo de configuración.

Si abre appwrite.jsonhabrá una sección de "funciones". Definimos un objeto que detalla toda la información sobre nuestra función. Dado que nuestro backend está desacoplado de nuestro front end, he optado por escribir las funciones en PHP en lugar de Nodejs. Puede utilizar una variedad de lenguajes que Appwrite soporta, incluyendo Python, .NET, e incluso Deno.

La configuración de la función detalla los tiempos de ejecución, la ruta al código, cualquier archivo que queramos ignorar, los permisos para quién puede ejecutar las verificaciones y más. También proporcionamos una lista de variables que deben pasarse a la función para que funcione, como nuestra clave y secreto de API de Vonage. Completa las variables con la información de tu Account.

Podemos desplegar la función con una sola llamada:

Nuestro código será empaquetado y enviado a los servidores de Appwrite y estará disponible para su uso después de unos segundos.

Puede consultar el código de ejemplo de las funciones en la carpeta functions/ carpeta. Para la función de credenciales, buscamos una sesión de Video existente en la colección video-demo.sessions colección. Si falta alguna, creamos una nueva sesión de Video utilizando el SDK PHP de OpenTok y la guardamos en la colección. A continuación, devolvemos el ID de la sesión de Video, la clave de la API de Video y un token generado del lado del cliente.

Como nota al margen, nuestra aplicación de demostración también proporciona nuestra información de base de datos como parte de la configuración. Puedes desplegarla con la CLI de Appwrite como nuestras funciones:

Compositor de experiencias de Video de Vonage

Ahora que podemos iniciar sesión en nuestra aplicación, creemos la interfaz para la videoconferencia. Vonage ofrece tres niveles de Video API que te permiten decidir cuánto control deseas sobre el producto de video final.

• API de Video de Vonage - Una experiencia personalizable de bajo nivel en la que tú te encargas de todo

• Vonage Video Express - Usted se encarga del diseño y nosotros de las prácticas recomendadas

• Reuniones de Vonage - Nosotros nos encargamos de todo. Visitas un sitio web como anfitrión o invitado

Necesitaremos una aplicación de vídeo ya creada. Acceda a su cuenta de Video en https://tokbox.com/account. Haz clic en "Proyectos" en el panel de control y luego en "Crear nuevo proyecto". No vamos a crear un proyecto integrado, así que haz clic en "Crear proyecto personalizado", ingresa "Vonage Appwrite Demo" como nombre y haz clic en "Crear". appwrite.json e implementa la función con las credenciales actualizadas.

Para esta demostración, utilizaremos Vonage Video Express. Esto reduce la cantidad de código que necesitamos agregar a nuestra aplicación para crear y mantener la sala en comparación con la Video API completa, pero aún nos permite controlar el diseño de la 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

Video Express se encarga de la configuración de todos los divs de diseño real y el código para nosotros, así que tenemos que crear un contenedor para la habitación. Nuestro componente devuelve un <div> llamado "roomContainer", que pasamos como la roomContainer para la sala que creamos.

Necesitamos obtener algunas credenciales válidas para nuestra aplicación. Vonage Video requiere una clave de API para nuestro proyecto backend, un ID de sesión para conectarnos y un token de conexión especial que actúa como nuestras credenciales. Podemos utilizar la función functions de nuestro objeto de configuración Appwrite para generar una nueva "ejecución" de nuestra función. A continuación, leemos la respuesta que contiene toda la información de conexión necesaria y la pasamos al objeto room.

Ahora, si ejecutamos nuestra aplicación y dos personas inician sesión (o, en mi caso, inician sesión con la misma cuenta en dos navegadores), ¡tenemos a dos personas en una reunión por vídeo!

The Video Conference

Próximos pasos

Esta demo muestra una parte de las características de Appwrite. Puedes expandir el código de la demo para usar diferentes métodos de login, soportar muchas salas, e incluso alojar y servir archivos con el servicio de almacenamiento de Appwrite. Si quieres más control sobre la salida de vídeo, cambia Video Express por las APIs de nivel inferior, o juega con el CSS para cambiar las partes visuales.

Echa un vistazo a Appwrite y comprueba si te ayuda a acelerar tu desarrollo, y cuéntanos qué cosas geniales estás construyendo con Appwrite y las API de comunicación de Vonage.