Mise en œuvre de Vonage Video sur Appwrite Cloud

Conditions préalables

Nous construirons une application de démonstration montrant comment utiliser notre plateforme Vonage Video avec Appwrite Cloud comme service backend.

• A Video API Account de Vonage. Nous l'utiliserons pour configurer la partie vidéo du backend.

• Un Compte Appwrite Cloud. Nous allons utiliser Appwrite pour gérer les parties backend de notre application.

• L'outil Appwrite CLI. Nous l'utiliserons pour mettre en place différentes parties de notre projet.

• A ngrok Account. Nous l'utiliserons pour accéder à notre application Video sur de nombreux appareils.

• L'application Demo Applications est disponible sur GitHub.

Qu'est-ce que Appwrite Cloud ?

Appwrite se décrit comme "une plateforme backend pour le développement d'applications Web, mobiles et Flutter". à l'origine, il s'agissait d'un conteneur Docker qu'un développeur pouvait exécuter sur ses serveurs et qui fournissait divers services et était en quelque sorte un "backend dans une boîte". lorsqu'il était couplé à ses SDK, les développeurs disposaient d'une authentification utilisateur, d'une base de données NoSQL, d'un stockage de fichiers, d'une fonction sans serveur, d'une base de données en temps réel et d'une sécurité intégrée pour le backend de leur application.

Appwrite Cloud est une solution hébergée pour les développeurs qui souhaitent utiliser ces fonctionnalités mais qui veulent éviter de passer par le processus d'exécution locale d'Appwrite. Un développeur peut alors être immédiatement opérationnel en laissant Appwrite Cloud s'occuper de certaines de ces questions qui font trembler les yaks, comme "Comment gérer les connexions des utilisateurs ?" ou "Où puis-je configurer une base de données ?" Un tableau de bord vous permet de configurer les données pour votre application, et vous pouvez commencer à écrire votre application tout de suite.

Appwrite Cloud supprime également la nécessité pour le développeur de mettre en place et de gérer un serveur pour exécuter le logiciel Appwrite. Dans les premiers jours du développement d'une application, en particulier au niveau de la preuve de concept, se concentrer sur la résolution du problème à résoudre est beaucoup plus important que toutes les options DevOps ou d'hébergement disponibles. Un tableau de bord et un système uniques qui gèrent l'authentification, les données et certains déploiements de code de base permettent d'accélérer le processus de développement.

L'un des avantages significatifs d'Appwrite est la grande variété de langages qu'ils prennent en charge. Leur système sans serveur peut fonctionner avec Node, Ruby, PHP, Python et Kotlin. Sans .NET, vous pouvez commencer à travailler avec les API de Vonage en utilisant nos SDK existants. Cela permet de faire le lien entre la puissance d'Appwrite Cloud et les API de Vonage. Étant donné qu'Appwrite est conçu pour évoluer avec votre application, vous pouvez être rassuré de savoir que vous pouvez passer du développement à la production sans avoir à échanger quoi que ce soit.

Le seul inconvénient d'Appwrite est qu'il n'est pas livré avec une solution d'hébergement en dehors des fonctions sans serveur pour les applications web. Cela signifie que vous aurez besoin d'un service pour héberger vos fichiers HTML statiques ou le code frontend pour servir les clients. Bien qu'ils puissent prendre en charge n'importe quel hôte, ils suggèrent Vercel, Netlifyou Gitpod lors de la configuration de l'application. Si vous créez une application mobile qui s'exécute sur un appareil, vous pouvez accéder aux backends.

Configuration d'Appwrite Cloud

Connectez-vous au tableau de bord d'Appwrite Cloud. Vous allez ensuite créer un nouveau projet, qui est un ensemble de paramètres et de données pour des projets individuels. Cliquez sur Créer un nouveau projet et donnez-lui un nom. Nous appellerons le nôtre "Vonage Video Demo" Cliquez sur Créer une fois que vous avez indiqué un nom.

Appwrite Cloud Dashboard

Vous pouvez configurer une application Appwrite de plusieurs façons, mais comme nous voulons profiter du mécanisme d'authentification d'Appwrite Cloud, nous allons sélectionner. Application Web. Cela nous permettra d'appeler le SDK Web et Appwrite Cloud directement à partir d'une page web au lieu de dépendre d'un serveur web.

Adding the Web Platform

Nous devons ensuite donner à notre application un nom et un nom de domaine valide pour que les demandes proviennent d'elle. Pour la démonstration, entrez "Vonage Client App" et un astérisque ("*") pour le domaine. Dans une application de production, vous devriez définir le domaine à partir duquel votre JavaScript serait appelé, mais nous autoriserons tous les domaines pour les besoins de la démo. Cela nous permet de tester localement et par le biais de ngrok plus tard.

Registering a New Web App

Cliquez sur Suivantpuis sur Sauter les étapes optionnelles. Toutes les dépendances d'Appwrite seront déjà configurées dans l'application de démonstration, mais cette page vous montre les paquets à installer dans une application Node.js. Nous avons fini de configurer l'application, alors continuez à cliquer sur les derniers Suivant jusqu'à ce que vous arriviez au tableau de bord.

Appwrite Project Dashboard

Authentification des utilisateurs avec Appwrite Cloud Authentication

Appwrite permet une variété de mécanismes d'authentification intégrés. Les développeurs peuvent choisir entre une vérification de base par nom d'utilisateur et mot de passe, que nous utiliserons, et divers fournisseurs OAuth externes tels que Discord, Apple et Google. Nos utilisateurs se connecteront avec un nom d'utilisateur et un mot de passe pour s'authentifier. Cependant, comme Appwrite prend en charge de nombreux fournisseurs OAuth, vous pouvez remplacer l'authentification par nom d'utilisateur et mot de passe par un service complètement différent.

Depuis votre tableau de bord Appwrite, cliquez sur Auth dans le menu de navigation de gauche, puis sur Paramètres. Désactivez tout sauf "Email/Password" et "JWT". Vous pourrez toujours les réactiver plus tard.

Appwrite Auth Settings

Bien qu'il soit possible de créer des utilisateurs par programmation via le SDK Appwrite, nous allons pour l'instant créer un utilisateur via l'interface utilisateur. Cliquez sur Utilisateurspuis sur + Créer un utilisateur. Remplissez les options Nom, Email, Téléphone et Mot de passe pour l'instant. Cliquez sur le bouton Créer pour enregistrer l'utilisateur.

Creating an Appwrite User

Dans notre application Web, nous pouvons empêcher les utilisateurs d'accéder à la réunion proprement dite en nous assurant qu'ils se sont connectés via Appwrite. Le SDK Web Appwrite vous permet de récupérer les informations d'identification de l'utilisateur à partir d'un formulaire et de créer une nouvelle session de connexion, nous l'utiliserons donc pour connecter l'utilisateur. Nous utiliserons ensuite un paquetage appelé zustandqui conservera les informations relatives à l'utilisateur d'une page à l'autre.

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

Le crochet a une méthode de connexion et de déconnexion, qui communiquera avec Appwrite lorsque nous nous connecterons. Notre formulaire dans le composant Login appellera un gestionnaire qui invoquera la méthode userStore.login() pour connecter l'utilisateur.

Nous allons créer des routes dans notre application à l'aide du composant RequireAuth pour ouvrir des routes dans notre application. Ce composant vérifie si l'utilisateur est connecté, et s'il ne l'est pas, il le renvoie à la page de connexion.

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

Cela nous permet d'envelopper n'importe quel composant à l'intérieur de ce composant RequireAuth pour s'assurer que les utilisateurs se connectent avant d'accéder à la réunion !

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

Utilisation de la base de données Appwrite pour notre backend

Appwrite Cloud donne accès à une base de données NoSQL basée sur des documents. Nous l'utiliserons pour stocker des informations sur la session Video que nous allons créer afin de générer les identifiants appropriés lorsqu'un utilisateur se connecte.

Appwrite Cloud vous permet de créer des bases de données et des collections via l'interface web ou d'utiliser leur outil CLI. Créons la base de données et le schéma de collection à partir de la ligne de commande pour accélérer les choses.

Nous pouvons utiliser la commande appwrite databases create pour créer une nouvelle base de données. Nous lui donnerons un nom et un identifiant faciles à retenir :

Ensuite, nous devons définir une collection dans la base de données. Les collections sont comparables à une table de base de données dans une base de données relationnelle. La collection aura un schéma défini, et chaque document (comme une ligne dans une base de données relationnelle) aura les informations suivantes. Pour l'instant, nous allons stocker l'identifiant de session que la plateforme Tokbox nous renvoie et le stocker dans un champ nommé "session_id".

Nous utilisons la commande appwrite databases createCollection pour créer une nouvelle collection nommée "video-demo", puis nous définissons un seul attribut (ou champ) appelé "session_id" que les documents doivent posséder :

Nous utiliserons la base de données lorsque quelqu'un ira créer des identifiants pour la session Video. Il n'y a rien de particulier ici, car les SDK Appwrite gèrent l'accès à la base de données et fournissent des interfaces dans différentes langues. Dans notre cas, nous allons chercher un document qui stocke l'identifiant de la session Video, et s'il n'existe pas, créer un nouveau document.

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

Une documentation complète sur l'utilisation de la base de données Appwrite par le biais des SDK est disponible à l'adresse suivante : https://appwrite.io/docs/getting-started-for-server.

Fonctions Appwrite

Puisque notre front-end s'occupera de gérer l'affichage d'une salle de vidéoconférence, nous avons besoin d'une certaine logique à exécuter en arrière-plan. Appwrite permet de déployer des fonctions dans différents langages pour gérer des tâches programmées ou ad hoc, selon les besoins. Nous utiliserons la capacité de la fonction pour générer des identifiants pour notre session vidéo.

Jusqu'à présent, nous avons utilisé l'interface graphique web pour configurer le projet et l'interface CLI d'Appwrite pour configurer la base de données. Nous pouvons également générer un fichier de configuration avec tous nos paramètres, nommé appwrite.json. Si vous utilisez l'application de démonstration, copiez appwrite.json.dist dans appwrite.jsonet vous pouvez l'utiliser pour déployer le code du backend.

L'un des avantages de l'utilisation de appwrite.json et de l'interface de programmation d'Appwrite est la possibilité de déployer plusieurs choses en même temps. Puisque nous avons trois fonctions, nous pouvons utiliser le CLI d'Appwrite pour les déployer comme défini dans le fichier de configuration.

Si vous ouvrez appwrite.jsonil y aura une section "fonctions". Nous définissons un objet qui détaille toutes les informations relatives à notre fonction. Comme notre backend est découplé de notre front end, j'ai choisi d'écrire les fonctions en PHP plutôt qu'en Nodejs. Vous pouvez utiliser une variété de langages pris en charge par Appwrite, y compris Python, .NET, et même Deno.

La fonction config détaille les durées d'exécution, le chemin d'accès au code, les fichiers que nous voulons ignorer, les autorisations pour les personnes qui peuvent effectuer les vérifications, et plus encore. Nous fournissons également une liste de variables qui doivent être transmises à la fonction pour qu'elle fonctionne, comme la clé et le secret de l'API Vonage. Remplissez les variables avec les informations de votre Account.

Nous pouvons déployer la fonction en un seul appel :

Notre code sera regroupé et poussé vers les serveurs d'Appwrite et sera disponible pour utilisation après quelques secondes.

Vous pouvez consulter l'exemple de code pour les fonctions dans le dossier functions/ . Pour la fonction credentials, nous recherchons une session Video existante dans la collection video-demo.sessions dans la collection. Si c'est le cas, nous créons une nouvelle session Video à l'aide du SDK PHP OpenTok et l'enregistrons dans la collection. Nous renvoyons ensuite l'ID de la session Video, la clé Video API et un jeton généré côté client.

Comme note de côté, notre application de démonstration fournit également nos informations de base de données dans le cadre de la configuration. Vous pouvez la déployer avec le CLI Appwrite comme nos fonctions :

Video Experience Composer de Vonage

Maintenant que nous pouvons nous connecter à notre application, construisons l'interface de la vidéoconférence. Vonage offre trois niveaux de Video API qui vous permettent de décider du degré de contrôle que vous souhaitez exercer sur le produit vidéo final.

• Video API de Vonage - Une expérience personnalisable de bas niveau où vous vous occupez de tout

• Vonage Video Express - Vous vous occupez de la mise en page et nous nous occupons des meilleures pratiques.

• Réunions Vonage - Nous nous occupons de tout. Vous visitez un site web en tant qu'hôte ou invité

Nous aurons besoin d'une application vidéo déjà créée. Connectez-vous à votre Account vidéo à l'adresse suivante https://tokbox.com/account. Cliquez sur " Projects " dans le tableau de bord, puis sur " Create New Project " (Créer un nouveau projet). Nous ne faisons pas de projet intégré, alors cliquez sur " Create Custom Project " (Créer un projet personnalisé). Entrez " Vonage Appwrite Demo " comme nom, et cliquez sur " Create " (Créer). Une clé API et un secret vous seront présentés, alors saisissez-les dans votre fichier appwrite.json et déployez la fonction avec les informations d'identification mises à jour.

Pour cette démonstration, nous utiliserons le Video Express de Vonage. Cela réduit la quantité de code que nous devons ajouter à notre application pour créer et maintenir la salle par rapport à l'API Video complète, tout en nous permettant de contrôler la disposition de la salle.

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 s'occupe de la mise en place de toutes les divs de mise en page et du code pour nous, nous devons donc créer un conteneur pour la pièce. Notre composant renvoie un élément <div> nommée "roomContainer", que nous transmettons comme clé de la salle que nous créons. roomContainer pour la salle que nous créons.

Nous devons obtenir des informations d'identification valides pour notre application. Video a besoin d'une clé API pour notre projet de backend, d'un identifiant de session auquel se connecter et d'un jeton de connexion spécial qui fait office d'informations d'identification. Nous pouvons utiliser l'option functions de notre objet de configuration Appwrite pour générer une nouvelle "exécution" de notre fonction. Nous lisons ensuite la réponse contenant toutes les informations de connexion nécessaires et la passons dans l'objet room.

Maintenant, si nous exécutons notre application et que deux personnes se connectent (ou, dans mon cas, se connectent avec le même Account dans deux navigateurs), nous avons deux personnes en réunion vidéo !

The Video Conference

Prochaines étapes

Cette démo présente une partie des fonctionnalités d'Appwrite. Vous pouvez étendre le code de la démo pour utiliser différentes méthodes de connexion, prendre en charge de nombreuses salles, et même héberger et servir des fichiers avec le service de stockage d'Appwrite. Si vous souhaitez avoir plus de contrôle sur la sortie vidéo, remplacez Video API par les API de niveau inférieur, ou jouez avec le CSS pour modifier les parties visuelles.

Jetez un coup d'œil à Appwrite et voyez s'il vous aide à accélérer votre développement, et faites-nous savoir quelles sont les choses intéressantes que vous construisez à l'aide d'Appwrite et des API de communication de Vonage.