Diese Seite wurde von der Cloud Translation API übersetzt.

Add-on für das Web mit dem Google Meet Add-ons SDK erstellen

In dieser Anleitung erfahren Sie, wie Sie mit dem Software Development Kit (SDK) für das Web von Google Meet-Add-ons ein Add-on erstellen. So können Sie Inhalte in einer Webanwendung teilen und zusammenarbeiten, ohne Google Meet verlassen zu müssen.

Die Seitenleiste des Meet Add-ons SDK for Web.
Die Hauptphase des Meet Add-ons SDK for Web, in der Nutzer zusammenarbeiten.

Zielsetzungen

Erstellen Sie in der Google Cloud Console ein Meet Add-ons SDK für das Web und stellen Sie es bereit.
Erstellen Sie eine Hauptbühne und eine Seitenleiste für das Meet Add-ons SDK for Web.

Umgebung vorbereiten

In diesem Abschnitt erfahren Sie, wie Sie ein Google Cloud-Projekt für das Meet Add-ons SDK for Web erstellen und konfigurieren.

Google Cloud-Projekt erstellen

Google Cloud Console

Öffnen Sie in der Google Cloud Console das Dreistrich-Menü > IAM und Verwaltung > Projekt erstellen.
Zur Seite „Projekt erstellen“
Geben Sie im Feld Projektname einen aussagekräftigen Namen für das Projekt ein.
Optional: Klicken Sie auf Bearbeiten, um die Projekt-ID zu bearbeiten. Die Projekt-ID kann nach dem Erstellen des Projekts nicht mehr geändert werden. Wählen Sie daher eine ID aus, die Ihren Anforderungen für die gesamte Lebensdauer des Projekts entspricht.
Klicken Sie im Feld Standort auf Durchsuchen, um potenzielle Standorte für Ihr Projekt aufzurufen. Klicken Sie danach auf Auswählen.
Achtung: Sie können Ihre Google Workspace-Organisation nicht finden?
Das bedeutet, dass Sie nicht in einem Google Workspace-Konto angemeldet sind. Einige der in der Google Workspace-Entwicklerdokumentation beschriebenen Funktionen sind nur für Projekte verfügbar, die einer Organisation zugeordnet sind.
Klicken Sie auf Erstellen. Die Google Cloud Console ruft die Dashboard-Seite auf und Ihr Projekt wird innerhalb weniger Minuten erstellt.

gcloud-CLI

Greifen Sie in einer der folgenden Entwicklungsumgebungen auf die Google Cloud CLI (gcloud) zu:

Cloud Shell: Aktivieren Sie Cloud Shell, um ein Online-Terminal zu verwenden, bei dem die gcloud CLI bereits eingerichtet ist.
Cloud Shell aktivieren
Lokale Shell: Um eine lokale Entwicklungsumgebung zu verwenden, müssen Sie die gcloud CLI installieren und initialize.
Verwenden Sie den Befehl „gcloud projects create“, um ein Cloud-Projekt zu erstellen:
```
gcloud projects create PROJECT_ID
```
Ersetzen Sie PROJECT_ID, indem Sie die ID des Projekts festlegen, das Sie erstellen möchten.

APIs aktivieren

Console

Aktivieren Sie in der Google Cloud Console das Google Workspace Marketplace SDK und die Google Workspace Add-ons API.

APIs aktivieren
Prüfen Sie, ob die APIs im richtigen Cloud-Projekt aktiviert sind. Klicken Sie dann auf Weiter.
Prüfen Sie, ob die richtigen APIs aktiviert sind, und klicken Sie dann auf Aktivieren.

gcloud-CLI

Legen Sie gegebenenfalls für das aktuelle Google Cloud-Projekt das Projekt fest, das Sie mit dem Befehl gcloud config set project erstellt haben:
```
gcloud config set project PROJECT_ID
```
Ersetzen Sie PROJECT_ID durch die Projekt-ID des von Ihnen erstellten Cloud-Projekts.
Aktivieren Sie das Google Workspace Marketplace SDK und die Google Workspace Add-ons API mit dem Befehl gcloud services enable:
```
gcloud services enable appsmarket-component.googleapis.com gsuiteaddons.googleapis.com
```

Webanwendung erstellen und bereitstellen

Im folgenden Abschnitt kopieren und aktualisieren Sie ein vollständiges Webanwendungsprojekt (mit Firebase erstellt), das den gesamten erforderlichen Anwendungscode für das Meet Add-ons SDK for Web enthält. Zuerst müssen Sie die Webanwendung konfigurieren und bereitstellen.

Beispielcode ansehen

Sie können die Basiswebanwendung auf GitHub ansehen und herunterladen.

Auf GitHub ansehen

Im Folgenden finden Sie eine Übersicht über den Basiscode:

Sie wird mithilfe von Next.js erstellt, einem React-basierten Framework.
Für die Formatierung wird Tailwind-CSS verwendet.
src/components enthält den Großteil der Anwendungslogik. Hier gibt es nichts zu aktualisieren oder zu ändern.
src/firebase enthält den Firebase-Konfigurations- und Initialisierungscode.
src/app enthält die Einstiegspunkte für die Web-App.
src/app/page.tsx ist die Hauptseite oder Projektliste.
src/app/project/[id]/page.tsx ist die Seite für ein einzelnes Projekt und eine Aufgabenliste.
.env enthält die Umgebungskonfiguration.

Firebase-Projekt und Befehlszeile einrichten

Firebase ist eine Entwicklungsplattform für mobile Apps und Webanwendungen, die Entwickler beim Erstellen von Apps unterstützt. Firestore ist eine NoSQL-Dokumentdatenbank, mit der Nutzer Daten für Mobil- und Webanwendungen speichern, synchronisieren und abfragen können. In Firestore speichern wir die Informationen der To-do-Liste. Da die App Firebase-Features verwendet, sollten Sie das Firebase-Projekt zusammen mit der Firebase CLI einrichten. Das geht so:

Erstellen Sie ein Firebase-Projekt.
Erstellen Sie eine Cloud Firestore-Datenbank.
Installieren Sie die Firebase CLI oder aktualisieren Sie sie auf die neueste Version.
Wechseln Sie zum Stammverzeichnis der Basisanwendung.
Initialisieren Sie Ihr Projekt.

Verbinden Sie Ihre lokalen Projektdateien mit Ihrem Firebase-Projekt:
```
firebase init firestore
```
Während der Projektinitialisierung über die Firebase CLI-Aufforderungen:
1. Wählen Sie eine Option aus:
  
  Wählen Sie Use an existing project und dann das erstellte Firebase-Projekt aus.
  
  Das ausgewählte Firebase-Projekt ist Ihr „Standard“-Firebase-Projekt für Ihr lokales Projektverzeichnis.
2. Welche Datei sollte für Firestore-Regeln verwendet werden?
  
  Wenn (firestore.rules) angezeigt wird, drücken Sie die Eingabetaste. Ist dies nicht der Fall, geben Sie firestore.rules ein, bevor Sie die Eingabetaste drücken.
3. Die Datei „firestore.rules“ ist bereits vorhanden. Möchten Sie ihn mit den Firestore-Regeln aus der Firebase Console überschreiben? (J/N)
  
  Geben Sie „N“ ein und drücken Sie die Eingabetaste.
4. Welche Datei sollte für Firestore-Indexe verwendet werden?
  
  Wenn (firestore.indexes.json) angezeigt wird, drücken Sie die Eingabetaste. Ist dies nicht der Fall, geben Sie firestore.indexes.json ein, bevor Sie die Eingabetaste drücken.

Die Firestore-Datenbank ist jetzt eingerichtet und kann für die Anwendung verwendet werden.

Firebase bei Google authentifizieren

Als Nächstes aktivieren Sie die Authentifizierung beim Google-Anbieter. Das geht so:

Rufen Sie in der Firebase Console die Seite Authentifizierung auf.

Zur Firebase Authentication
Wenn Sie zum ersten Mal einen Anbieter einrichten, klicken Sie auf Anmeldemethode einrichten. Klicken Sie andernfalls auf Neuen Anbieter hinzufügen.
Wählen Sie Google aus und achten Sie darauf, dass der Status auf Aktivieren gesetzt ist.

Web-App in Firebase erstellen

Erstellen Sie abschließend eine Web-App in Ihrem Firebase-Projekt und rufen Sie die Konfiguration ab. Das geht so:

Registrieren Sie Ihre Web-App in der Firebase Console in Ihrem Firebase-Projekt.
Rufen Sie die Projekteinstellungen auf.
Suchen Sie unter Meine Apps nach der registrierten Web-App und klicken Sie darauf.
Notieren Sie sich die Werte in firebaseConfig. Sie werden sie im folgenden Abschnitt zum Aktualisieren der Umgebungsvariablen verwenden.

Google Cloud-Projektnummer ermitteln

Öffnen Sie die Google Cloud Console.

Zur Google Cloud Console
Klicken Sie neben Google Cloud Console auf den Abwärtspfeil und wählen Sie Ihr Projekt aus.
Klicken Sie auf das Dreistrich-Menü > Cloud-Übersicht.
Notieren Sie sich im Bereich Projektinformationen den Wert für die Projektnummer. Sie werden es im folgenden Abschnitt verwenden, um die Umgebungsvariablen zu aktualisieren.

Umgebungsvariablen aktualisieren

Geben Sie in die Datei .env des Basiscodes folgende Informationen mit den Details ein, die Sie in den vorherigen Schritten ermittelt haben:

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

Ersetzen Sie Folgendes mithilfe der firebaseConfig-Werte und der Projektnummer, die Sie in den vorherigen Schritten erfasst haben:

GOOGLE_PROJECT_NUMBER: die Projektnummer Ihres Google Cloud-Projekts
PROJECT_ID: projectId Ihrer Firebase-Web-App
API_KEY: apiKey Ihrer Firebase-Web-App
AUTH_DOMAIN: der authDomain Ihrer Firebase-Web-App
STORAGE_BUCKET: der storageBucket Ihrer Firebase-Web-App
MSG_SENDER_ID: der messagingSenderId Ihrer Firebase-Web-App
APP_ID: appId Ihrer Firebase-Web-App

App-Anmeldedaten einrichten

So richten Sie die Anmeldedaten für die Google-Anwendung ein:

Rufen Sie in der Firebase Console die Seite Projekteinstellungen auf.

Zu den Projekteinstellungen
Wählen Sie auf dem Tab Dienstkonten den Tab Firebase Admin SDK aus.
Klicken Sie auf Neuen privaten Schlüssel generieren und notieren Sie sich den Pfad für die heruntergeladene JSON-Datei.
Führen Sie in Ihrem Terminal den folgenden Befehl aus:
```
export GOOGLE_APPLICATION_CREDENTIALS="JSON_PATH"
```
Ersetzen Sie JSON_PATH durch den Pfad, in dem sich die heruntergeladene JSON-Datei befindet.

Auf dem Entwicklungsserver bereitstellen

Nachdem Sie den Code und die Umgebung eingerichtet haben, können Sie die Webanwendung auf Ihrem lokalen Entwicklungsserver bereitstellen. Rufen Sie dazu das Verzeichnis Ihrer Webanwendung auf und gehen Sie so vor:

Führen Sie den Befehl npm install aus und warten Sie, bis die Knotenmodule heruntergeladen und installiert wurden.
Führen Sie den folgenden Befehl aus: npm run dev.
Rufen Sie http://localhost:3000/ auf, um zu prüfen, ob die Web-App ausgeführt wird.

Meet Add-ons SDK for Web verwenden

Als Nächstes nehmen Sie die erforderlichen Codeaktualisierungen vor, um den Code einzubinden und ihn zu einem Google Meet-Add-on zu machen. Das geht so:

Datei „src/meet/meet.d.ts“ erstellen
1. Die neuesten Typen finden Sie unter https://www.gstatic.com/meetjs/addons/0.7.0/index.d.ts. Speichern Sie die Datei anschließend lokal.

Datei „src/meet/utils.ts“ erstellen

Fügen Sie die Funktion createAddonSession hinzu. Hier wird die Sitzung eingerichtet, um in Google Meet zu kommunizieren.

export function createAddonSession() {
  let session;

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

Erstellen Sie das Verzeichnis src/app/meet. Dieses Verzeichnis dient als dediziertes Verzeichnis für alle Meet-spezifischen Routen.

Datei „src/app/meet/layout.tsx“ erstellen

Das gemeinsame Layout für alle Meet-bezogenen Seiten. Hier injizieren Sie das Meet SDK-Script und sorgen dafür, dass das SDK geladen wird, bevor Inhalte gerendert werden.

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

Datei „src/app/meet/sidepanel/page.tsx“ erstellen

Inhalt der Seitenleiste für das Meet-Add-on. Auf dieser Seite werden speziell die Inhaltsauswahl und der Startstatus der Zusammenarbeit festgelegt, wenn Inhalte ausgewählt werden.

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

Datei „src/app/meet/project/\[id\]/page.tsx“ erstellen

Der Inhalt des Hauptbildschirms für das Meet-Add-on. Der Inhalt des ausgewählten Projekts wird in der Seitenleiste angezeigt.

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

Deployment erstellen

Richten Sie die Bereitstellung des Add-ons ein:

Rufen Sie in der Google Cloud Console die Google Workspace Add-ons API auf.

Zur Google Workspace Add-ons API
Klicken Sie auf den Tab Alternative Laufzeiten.
Klicken Sie auf Neue Bereitstellung erstellen und geben Sie die Bereitstellungs-ID des Add-ons ein. Die Bereitstellungs-ID ist ein beliebiger String, mit dem der Add-on-Entwickler die Bereitstellung mit dem Add-on-Manifest identifizieren kann. Bereitstellungs-IDs sind erforderlich und dürfen höchstens 100 Zeichen umfassen.
Klicken Sie auf Weiter.

Eine Seitenleiste wird geöffnet, in der Sie die Spezifikation des Add-on-Manifests im JSON-Format einreichen können. Geben Sie in diesem Bereich Folgendes als Manifestdatei ein:

{
"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"]
    }
  }
}
}

Klicke auf Senden. Wenn das Add-on erfolgreich bereitgestellt wurde, sollte die folgende Meldung angezeigt werden: Deployment "ID" created
Prüfen Sie das Deployment im Abschnitt Bereitstellungen der Seite.

Meet Add-ons SDK for Web testen

Wenn Sie das vollständige Meet Add-ons SDK for Web testen möchten, führen Sie Google Meet aus und prüfen Sie, ob die App wie erwartet funktioniert. Das geht so:

Rufen Sie Meet auf und starten Sie eine neue Videokonferenz.
Klicken Sie auf Aktivitäten.
Im Abschnitt Meine Add-ons sollte Mein erstes Meet-Web-Add-on angezeigt werden. Wählen Sie es aus, um das Add-on auszuführen.
Sobald das Add-on ausgeführt wurde, wird die Seitenleiste geöffnet.
Melden Sie sich mit Ihrem Google-Konto in der App an. Klicken Sie nach der Anmeldung auf Neues Projekt.
Wählen Sie das erstellte Untitled Project (Unbenanntes Projekt) aus.
Klicken Sie in der Seitenleiste auf Aktivität starten.
Wenn der Vorgang gestartet ist, wird die Seitenleiste geschlossen und die Hauptanzeige geöffnet.

Das Add-on wird jetzt wie erwartet ausgeführt, jedoch nur für den Nutzer, der sich über die Anwendung angemeldet hat (Schritt 5). Andere Teilnehmer, die über Meet an der Aktivität teilnehmen, können nicht innerhalb der App zusammenarbeiten, da sie nicht dieselbe Sitzung mit dem ersten Nutzer teilen können. Es ist eine weitere Implementierung erforderlich (z. B. ein Token-Freigabemechanismus), um die Inhalte für andere freizugeben.

Bereinigen

Damit Ihrem Google Cloud-Konto die in dieser Anleitung verwendeten Ressourcen nicht in Rechnung gestellt werden, sollten Sie das Cloud-Projekt löschen.

Achtung:Das Löschen von Projekten hat folgende Auswirkungen:

Alle Inhalte des Projekts werden gelöscht. Wenn Sie für diese Anleitung ein bereits bestehendes Projekt verwendet haben, werden auch alle anderen im Rahmen des Projekts erstellten Daten gelöscht.
Benutzerdefinierte Projekt-IDs gehen verloren. Beim Erstellen dieses Projekts haben Sie möglicherweise eine benutzerdefinierte Projekt-ID erstellt, die Sie weiterhin verwenden möchten. Damit die URLs, die die Projekt-ID verwenden, z. B. eine URL auf appspot.com, erhalten bleiben, sollten Sie die ausgewählten Ressourcen innerhalb des Projekts statt des gesamten Projekts löschen.

Wenn Sie mehrere Anleitungen und Kurzanleitungen durcharbeiten möchten, können Sie die Überschreitung von Projektkontingenten verhindern, indem Sie Projekte wiederverwenden.

Wechseln Sie in der Google Cloud Console zur Seite Ressourcen verwalten. Klicken Sie auf Menü > IAM und Verwaltung > Ressourcen verwalten.
Zu Resource Manager
Wählen Sie in der Projektliste das Projekt aus, das Sie löschen möchten, und klicken Sie dann auf Löschen .
Geben Sie im Dialogfeld die Projekt-ID ein und klicken Sie auf Beenden, um das Projekt zu löschen.

Weitere Informationen

Weitere Informationen zur Zusammenarbeit finden Sie unter Über ein Meet-Add-on zusammenarbeiten.
Weitere Informationen zur Bildschirmfreigabe