Créer un module complémentaire pour le Web à l'aide du SDK des modules complémentaires Google Meet

Ce tutoriel explique comment créer un module complémentaire à l'aide du kit de développement logiciel (SDK) des modules complémentaires Google Meet pour le Web. Cela vous permet de partager des contenus et de collaborer au sein d'une application Web sans quitter Google Meet.

  • Module complémentaire Web Meet pour Google Meet.
    Panneau latéral du SDK des modules complémentaires Meet pour le Web
  • Module complémentaire Web Meet pour Google Meet.
    Étape principale du SDK des modules complémentaires Meet pour le Web, où les utilisateurs collaborent.

Objectifs

  • Créez et déployez un SDK de modules complémentaires Meet pour le Web dans la console Google Cloud.
  • Créer une scène principale et un panneau latéral pour le SDK des modules complémentaires Meet pour le Web

Préparer votre environnement

Cette section explique comment créer et configurer un projet Google Cloud pour le SDK des modules complémentaires Meet pour le Web.

Créer un projet Google Cloud

Console Google Cloud

  1. Dans la console Google Cloud, accédez à Menu > IAM et administration > Créer un projet.

    Accéder à la page Créer un projet

  2. Dans le champ Nom du projet, saisissez un nom descriptif pour votre projet.

    Facultatif: Pour modifier l'ID du projet, cliquez sur Modifier. Une fois le projet créé, l'ID ne pourra plus être modifié. Par conséquent, choisissez un ID qui répond à vos besoins tout au long de la durée de vie du projet.

  3. Dans le champ Emplacement, cliquez sur Parcourir pour afficher les emplacements potentiels pour votre projet. Cliquez ensuite sur Sélectionner.
  4. Cliquez sur Créer. La console Google Cloud accède à la page "Tableau de bord", et votre projet est créé en quelques minutes.

gcloud CLI

Dans l'un des environnements de développement suivants, accédez à la Google Cloud CLI ("gcloud"):

  • Cloud Shell: pour utiliser un terminal en ligne avec la gcloud CLI configurée, activez Cloud Shell.
    Activer Cloud Shell
  • Shell locale: pour utiliser un environnement de développement local, installez et initialize la gcloud CLI.
    Pour créer un projet Cloud, utilisez la commande "gcloud projects create" : 
    gcloud projects create PROJECT_ID
    Remplacez PROJECT_ID en définissant l'ID du projet que vous souhaitez créer.

Activer les API

Console

  1. Dans la console Google Cloud, activez le SDK Google Workspace Marketplace et l'API Google Workspace Add-ons.

    Activer les API

  2. Vérifiez que vous activez les API dans le bon projet Cloud, puis cliquez sur Suivant.

  3. Vérifiez que vous activez les bonnes API, puis cliquez sur Activer.

gcloud CLI

  1. Si nécessaire, définissez le projet Google Cloud actuel sur celui que vous avez créé à l'aide de la commande gcloud config set project:

    gcloud config set project PROJECT_ID

    Remplacez PROJECT_ID par l'ID du projet Cloud que vous avez créé.

  2. Activez le SDK Google Workspace Marketplace et l'API Google Workspace Add-ons à l'aide de la commande gcloud services enable:

    gcloud services enable appsmarket-component.googleapis.com gsuiteaddons.googleapis.com

Créer et déployer l'application Web

Dans la section suivante, vous allez copier et mettre à jour l'intégralité d'un projet d'application Web (créé à l'aide de Firebase) qui contient tout le code d'application requis pour le SDK des modules complémentaires Meet pour le Web. Commencez par configurer et déployer l'application Web.

Examiner l'exemple de code

Vous pouvez afficher et télécharger l'application Web de base sur GitHub.

Afficher sur GitHub

Voici un aperçu du code de base:

  • Il est conçu à l'aide de Next.js, un framework basé sur React.
  • Elle utilise le CSS Tailwind pour les styles.
  • src/components contient l'essentiel de la logique d'application. Vous n'avez rien à mettre à jour ni à modifier.
  • src/firebase contient le code de configuration et d'initialisation de Firebase.
  • src/app contient les points d'entrée de l'application Web.
  • src/app/page.tsx est la page principale ou la liste des projets.
  • src/app/project/[id]/page.tsx est la page d'un projet individuel et d'une liste de tâches.
  • .env contient la configuration de l'environnement.

Configurer le projet Firebase et la CLI

Firebase est une plate-forme de développement d'applications Web et mobiles qui aide les développeurs à créer des applications. Firestore est une base de données de documents NoSQL qui permet aux utilisateurs de stocker, de synchroniser et d'interroger des données pour des applications mobiles et Web. Firestore est l'endroit où nous stockerons les informations de la liste de tâches. Étant donné que l'application utilisera les fonctionnalités Firebase, le projet Firebase et la CLI Firebase doivent être configurés. Pour ce faire :

  1. Créez un projet Firebase.

  2. Créez une base de données Cloud Firestore.

  3. Installez la CLI Firebase ou installez sa dernière version.

  4. Accédez au répertoire racine de votre application de base.

  5. Initialisez votre projet.

    Associez les fichiers de votre projet local à votre projet Firebase : 

    firebase init firestore

    Lors de l'initialisation du projet, à partir des invites de la CLI Firebase:

    1. Sélectionnez une option :

      Sélectionnez Use an existing project, puis le projet Firebase que vous avez créé.

      Le projet Firebase sélectionné est votre projet Firebase "par défaut" pour votre répertoire de projet local.

    2. Quel fichier utiliser pour les règles Firestore ?

      Si (firestore.rules) s'affiche, appuyez sur Entrée. Si ce n'est pas le cas, saisissez firestore.rules avant d'appuyer sur Entrée.

    3. Le fichier Firestore.rules existe déjà. Voulez-vous la remplacer par les règles Firestore depuis la console Firebase ? (O/N)

      Saisissez "N", puis appuyez sur Entrée.

    4. Quel fichier doit être utilisé pour les index Firestore ?

      Si (firestore.indexes.json) s'affiche, appuyez sur Entrée. Si ce n'est pas le cas, saisissez firestore.indexes.json avant d'appuyer sur Entrée.

La base de données Firestore est maintenant configurée et prête à être utilisée pour l'application.

Authentifier Firebase avec Google

Ensuite, activez l'authentification auprès du fournisseur Google. Pour ce faire :

  1. Dans la console Firebase, accédez à la page Authentification.

    Accéder à Firebase Authentication

  2. Si vous configurez un fournisseur pour la première fois, cliquez sur Configurer la méthode de connexion. Sinon, cliquez sur Ajouter un fournisseur.

  3. Sélectionnez Google et assurez-vous que l'état est défini sur Activé.

Créer une application Web dans Firebase

Enfin, créez une application Web dans votre projet Firebase et obtenez la configuration. Pour ce faire :

  1. Dans la console Firebase, enregistrez votre application Web dans votre projet Firebase.

  2. Accédez à Paramètres du projet.

  3. Dans Vos applications, recherchez l'application Web que vous avez enregistrée et cliquez dessus.

  4. Notez les valeurs dans firebaseConfig. Vous les utiliserez dans la section suivante pour mettre à jour les variables d'environnement.

Trouver le numéro de votre projet Google Cloud

  1. Ouvrez la console Google Cloud.

    Accéder à Google Cloud Console

  2. À côté de Console Google Cloud, cliquez sur la flèche vers le bas flèche du menu déroulant et sélectionnez votre projet.

  3. Cliquez sur Menu icône de menu > Présentation du cloud.

  4. Dans la section Informations sur le projet, notez la valeur du champ Numéro du projet. Vous l'utiliserez dans la section suivante pour mettre à jour les variables d'environnement.

Mettre à jour les variables d'environnement

Dans le fichier .env du code de base, renseignez les informations recueillies lors des étapes précédentes comme suit:

NEXT_PUBLIC_GOOGLE_PROJECT_NUMBER=GOOGLE_PROJECT_NUMBER
NEXT_PUBLIC_GOOGLE_PROJECT_ID=PROJECT_ID
NEXT_PUBLIC_GOOGLE_API_KEY=API_KEY
NEXT_PUBLIC_GOOGLE_AUTH_DOMAIN=AUTH_DOMAIN
NEXT_PUBLIC_GOOGLE_STORAGE_BUCKET=STORAGE_BUCKET
NEXT_PUBLIC_GOOGLE_MSG_SENDER_ID=MSG_SENDER_ID
NEXT_PUBLIC_GOOGLE_APPID=APP_ID

Remplacez les éléments suivants en utilisant les valeurs firebaseConfig et le numéro de projet recueillies précédemment:

  • GOOGLE_PROJECT_NUMBER: numéro de votre projet Google Cloud
  • PROJECT_ID: le projectId de votre application Web Firebase
  • API_KEY: le apiKey de votre application Web Firebase
  • AUTH_DOMAIN: l'identifiant authDomain de votre application Web Firebase
  • STORAGE_BUCKET: le storageBucket de votre application Web Firebase
  • MSG_SENDER_ID: l'identifiant messagingSenderId de votre application Web Firebase
  • APP_ID: le appId de votre application Web Firebase

Configurer les identifiants de votre application

Pour configurer vos identifiants d'application Google, procédez comme suit:

  1. Dans la console Firebase, accédez à la page Paramètres du projet.

    Accéder aux paramètres du projet

  2. Dans l'onglet Comptes de service, sélectionnez l'onglet SDK Admin Firebase.

  3. Cliquez sur Générer une nouvelle clé privée et notez le chemin d'accès au fichier JSON téléchargé.

  4. Dans votre terminal, exécutez la commande suivante:

    export GOOGLE_APPLICATION_CREDENTIALS="JSON_PATH"

    Remplacez JSON_PATH par le chemin d'accès au fichier JSON téléchargé.

Déployer sur votre serveur de développement

Maintenant que le code et l'environnement sont en place, vous pouvez déployer l'application Web sur votre serveur de développement local. Pour ce faire, accédez au répertoire de votre application Web et procédez comme suit:

  1. Exécutez la commande npm install et attendez que les modules de nœud soient téléchargés et installés.

  2. Exécutez la commande npm run dev.

  3. Accédez à http://localhost:3000/ pour vérifier que l'application Web est opérationnelle.

Utiliser le SDK des modules complémentaires Meet pour le Web

L'étape suivante consiste à mettre à jour le code pour l'intégrer et à en faire un module complémentaire Google Meet. Pour ce faire :

  1. Créer le fichier src/meet/meet.d.ts

    1. Vous pouvez obtenir les derniers types sur https://www.gstatic.com/meetjs/addons/0.7.0/index.d.ts et enregistrer le fichier localement.

  2. Créer le fichier src/meet/utils.ts

    1. Ajoutez la fonction createAddonSession. C'est ici que la session est établie pour communiquer dans Google Meet.

      export function createAddonSession() {
  let session;

  session = window.meet.addon.createAddonSession({
    cloudProjectNumber: `${process.env.NEXT_PUBLIC_GOOGLE_PROJECT_NUMBER}`,
  });
  return session;
}

  3. Créez le répertoire src/app/meet. Il servira de répertoire dédié pour tous les itinéraires spécifiques à Meet.

  4. Créer le fichier src/app/meet/layout.tsx

    1. Mise en page commune à toutes les pages associées à Meet. C'est là que vous injectez le script du SDK Meet et assurez-vous que le SDK est chargé avant d'afficher le contenu.

      "use client";

import Script from "next/script";
import { useState } from "react";

type LayoutProps = {
  children: React.ReactNode;
};

/**
* Layout for the add-on pages. Injects the Meet SDK script.
*/
export default function RootLayout({ children }: LayoutProps) {
  const [sdkAvailable, setSdkAvailable] = useState(false);
  return (<>
  <Script
    src="https://www.gstatic.com/meetjs/addons/0.7.0/meet.addons.js"
    onReady={() => setSdkAvailable(true)}
  />
  {sdkAvailable ? children : <div>Loading...</div>}
  </>);
}

  5. Créer le fichier src/app/meet/sidepanel/page.tsx

    1. Contenu du panneau latéral du module complémentaire Meet. Cette page gère spécifiquement la sélection de contenu et la définition de l'état de départ de la collaboration lorsque le contenu est sélectionné.

      "use client";

import { firebaseApp } from "@/firebase/config";
import { getAuth } from "firebase/auth";
import { ProjectList } from "@/components/ProjectList";
import { createAddonSession } from "@/meet/utils";
import { DocumentReference } from "firebase/firestore";
import { useSearchParams } from "next/navigation";
import { useAuthState, useSignInWithGoogle } from "react-firebase-hooks/auth";
import GoogleButton from "react-google-button";

const auth = getAuth(firebaseApp);

async function startCollaboration(ref: DocumentReference) {
  const url = new URL(window.location.href);

  // Initializing session
  const session = await createAddonSession();
  const client = await session.createSidePanelClient();

  client.setCollaborationStartingState({
    mainStageUrl: `${url.protocol}//${url.host}/meet/project/${ref.id}`,
    sidePanelUrl: `${url.protocol}//${url.host}/meet/sidepanel?participant=true`,
  });
}

export default function Home() {
  const params = useSearchParams();
  const [user] = useAuthState(auth);
  const [signInWithGoogle] = useSignInWithGoogle(auth);

  const handleProjectSelect = async (ref: DocumentReference) => {
    // Before navigating, make sure project selection is saved
    // for when a shared activity is started.
    await startCollaboration(ref);
  };

  if (!user) {
    return (
      <GoogleButton
        onClick={() => signInWithGoogle()}
      ></GoogleButton>
    );
  }

  if (params.get("participant")) {
    return <div>You may now close this panel.</div>;
  }

  return (
    <div className="px-4">
      <ProjectList onSelect={handleProjectSelect} />
    </div>
  );
}

  6. Créer le fichier src/app/meet/project/\[id\]/page.tsx

    1. Contenu principal de la scène pour le module complémentaire Meet. Le contenu du projet choisi s'affiche dans le panneau latéral.

      "use client";

import { Project } from "@/components/Project";
import { createAddonSession } from "@/meet/utils";
import { firebaseApp } from "@/firebase/config";
import { getAuth, User } from "firebase/auth";
import { useRouter } from "next/navigation";
import { useAuthState, useSignInWithGoogle } from "react-firebase-hooks/auth";
import GoogleButton from "react-google-button";

const auth = getAuth(firebaseApp);

// Monitor auth state changes.
if (typeof window !== "undefined") {
  auth.onAuthStateChanged(() => {
    onAuthStateSettled(auth.currentUser);
  });

  auth.authStateReady().then(() => {
    onAuthStateSettled(auth.currentUser);
  });
}

/**
* Check for auth & doc access when auth state changes.
*/
async function onAuthStateSettled(user: User | null | undefined) {
  const session = await createAddonSession();
  const client = await session.createMainStageClient();

  // For participants, side panel should be closed after authentication
  await client.unloadSidePanel();
}

type PageParams = {
  params: {
    id: string;
  };
};

  export default function Page({ params }: PageParams) {
  const router = useRouter();
  const [user, isUserLoading] = useAuthState(auth);

  if (window.meet.addon.getFrameType() === "MAIN_STAGE") {
    if (isUserLoading) {
      return <div>Loading...</div>;
    }
  }

  if (!user) {
    return (
        <GoogleButton
          onClick={() => signInWithGoogle()}
        ></GoogleButton>
      );
  }

  let backButton = null;
  if (window.meet.addon.getFrameType() === "SIDE_PANEL") {
    backButton = (
      <div className="px-2 pb-2 -my-2">
        <button className="flex flex-row" onClick={() => router.back()}>
          <span className="material-icons">arrow_back</span>previous screen
          <div className="sr-only">navigate back</div>
        </button>
      </div>
    );
  }

  return (
    <div className="w-full min-h-screen px-2">
      {backButton}
      <div className="flex flex-col min-h-screeen">
        <Project id={params.id} />
      </div>
    </div>
  );
}

Créer un déploiement

Configurez le déploiement du module complémentaire:

  1. Dans la console Google Cloud, accédez à API Google Workspace Add-ons.

    Accéder à l'API Google Workspace Add-ons

  2. Cliquez sur l'onglet Autres environnements d'exécution.

  3. Cliquez sur Create new deployment (Créer un déploiement) et saisissez l'ID de déploiement du module complémentaire. L'ID de déploiement est une chaîne arbitraire qui aide le développeur du module complémentaire à identifier le déploiement contenant le fichier manifeste du module complémentaire. Veuillez indiquer des ID de déploiement et ne pas dépasser 100 caractères.

  4. Cliquez sur Suivant.

  5. Un panneau latéral s'ouvre pour vous permettre d'envoyer la spécification du fichier manifeste du module complémentaire au format JSON. Dans ce panneau, saisissez le code suivant en tant que fichier manifeste:

    {
"addOns": {
  "common": {
    "name": "My First Meet Web Add-on",
    "logoUrl": "https://fonts.gstatic.com/s/i/googlematerialicons/markunread_mailbox/v6/black-24dp/1x/gm_markunread_mailbox_black_24dp.png"
  },
  "meet": {
    "web": {
      "sidePanelUri": "http://localhost:3000/meet/sidepanel",
      "addOnOrigins": ["http://localhost:3000"]
    }
  }
}
}

  6. Cliquez sur Envoyer. Si le module complémentaire a bien été déployé, le message suivant doit s'afficher : Deployment "ID" created (ID de déploiement créé).

  7. Vérifiez le déploiement dans la section Déploiements de la page.

Tester le SDK des modules complémentaires Meet pour le Web

Pour tester le SDK complet des modules complémentaires Meet pour le Web, exécutez Google Meet et vérifiez que l'application fonctionne comme prévu. Pour ce faire :

  1. Accédez à Meet et démarrez une nouvelle réunion.
  2. Cliquez sur Activités.
  3. Dans la section Vos modules complémentaires, vous devriez voir Mon premier module complémentaire Meet sur le Web. Sélectionnez-le pour exécuter le module complémentaire.
  4. Une fois le module complémentaire exécuté, le panneau latéral s'ouvre.
  5. Connectez-vous à l'application avec votre compte Google. Une fois connecté, cliquez sur New Project (Nouveau projet).
  6. Sélectionnez le Projet sans titre qui a été créé.
  7. Cliquez sur Démarrer l'activité dans le panneau latéral.
  8. Une fois lancé, le panneau latéral se ferme et l'espace de création principal s'ouvre.

Le module complémentaire s'exécute désormais comme prévu, mais uniquement pour l'utilisateur qui s'est connecté via l'application (étape 5). Les autres participants qui rejoignent l'activité via Meet ne peuvent pas collaborer dans l'application, car ils ne peuvent pas partager la même session avec le premier utilisateur. Il est nécessaire d'effectuer d'autres implémentations (par exemple, un mécanisme de partage de jetons) pour partager le contenu avec d'autres personnes.

Effectuer un nettoyage

Pour éviter que les ressources utilisées dans ce tutoriel soient facturées sur votre compte Google Cloud, nous vous recommandons de supprimer le projet Cloud.

  1. Dans la console Google Cloud, accédez à la page Gérer les ressources. Cliquez sur Menu > IAM et administration > Gérer les ressources.

    Accéder à Resource Manager

  2. Dans la liste des projets, sélectionnez le projet que vous souhaitez supprimer, puis cliquez sur Supprimer .
  3. Dans la boîte de dialogue, saisissez l'ID du projet, puis cliquez sur Arrêter pour supprimer le projet.