Ta strona została przetłumaczona przez Cloud Translation API.

Tworzenie dodatku do wersji internetowej przy użyciu pakietu SDK dodatków do Google Meet

W tym samouczku pokazujemy, jak utworzyć dodatek za pomocą pakietu SDK do Google Meet dla aplikacji internetowych. Pozwoli Ci to udostępniać treści i współpracować w aplikacji internetowej bez opuszczania Google Meet.

Panel boczny pakietu SDK dodatków do Meet w przeglądarce.
Główny etap pakietu SDK dodatków do Meet w przeglądarce, na którym użytkownicy mogą współpracować.

Cele

Utwórz i wdróż pakiet SDK dodatków do Meet w przeglądarce za pomocą konsoli Google Cloud.
Utwórz scenę główną i panel boczny na potrzeby pakietu SDK dodatków do Google Meet w internecie.

Przygotowywanie środowiska

W tej sekcji dowiesz się, jak utworzyć i skonfigurować projekt Google Cloud na potrzeby pakietu SDK dodatków do Google Meet w internecie.

Tworzenie projektu Google Cloud

Konsola Google Cloud

W konsoli Google Cloud kliknij Menu > Administracja > Utwórz projekt.
Otwórz stronę Utwórz projekt
W polu Nazwa projektu wpisz opisową nazwę projektu.
Opcjonalnie: aby edytować identyfikator projektu, kliknij Edytuj. Po utworzeniu projektu nie można zmienić identyfikatora, więc wybierz taki, który spełnia Twoje potrzeby przez cały okres istnienia projektu.
W polu Lokalizacja kliknij Przeglądaj, aby wyświetlić potencjalne lokalizacje swojego projektu. Następnie kliknij Wybierz.
Uwaga: nie możesz znaleźć swojej organizacji Google Workspace?
Oznacza to, że nie jesteś zalogowanym użytkownikiem na koncie Google Workspace. Niektóre funkcje opisane w dokumentacji dla deweloperów Google Workspace są dostępne tylko w projektach powiązanych z organizacją.
Kliknij Utwórz. W konsoli Google Cloud otworzy się strona panelu, a w ciągu kilku minut zostanie utworzony projekt.

interfejs wiersza poleceń gcloud

Uzyskaj dostęp do interfejsu wiersza poleceń Google Cloud („gcloud”) w jednym z tych środowisk programistycznych:

Cloud Shell: aby używać terminala online ze skonfigurowanym już interfejsem wiersza poleceń gcloud, aktywuj Cloud Shell.
Aktywuj Cloud Shell
Local Shell (Powłoka lokalna): aby używać lokalnego środowiska programistycznego, zainstaluj i initialize interfejs wiersza poleceń gcloud.
Aby utworzyć projekt Cloud, użyj polecenia `gcloud projects create`:
```
gcloud projects create PROJECT_ID
```
Zastąp PROJECT_ID, ustawiając identyfikator projektu, który chcesz utworzyć.

Włącz interfejsy API

Konsola

W konsoli Google Cloud włącz SDK Google Workspace Marketplace i interfejs Google Workspace Add-ons API.

Włączanie interfejsów API
Sprawdź, czy interfejsy API włączasz w odpowiednim projekcie Cloud, a następnie kliknij Dalej.
Sprawdź, czy włączasz właściwe interfejsy API, a następnie kliknij Włącz.

interfejs wiersza poleceń gcloud

W razie potrzeby ustaw bieżący projekt Google Cloud na ten utworzony za pomocą polecenia gcloud config set project:
```
gcloud config set project PROJECT_ID
```
Zastąp PROJECT_ID identyfikatorem projektu utworzonego projektu Cloud.
Włącz pakiety SDK Google Workspace Marketplace i interfejs Google Workspace Add-ons API za pomocą polecenia gcloud services enable:
```
gcloud services enable appsmarket-component.googleapis.com gsuiteaddons.googleapis.com
```

Tworzenie i wdrażanie aplikacji internetowej

W kolejnej sekcji skopiujesz i zaktualizujesz cały projekt aplikacji internetowej (utworzony przy użyciu Firebase), który zawiera cały wymagany kod aplikacji pakietu SDK dodatków do Meet w przeglądarce. Najpierw musisz skonfigurować i wdrożyć aplikację internetową.

Przeglądanie przykładowego kodu

Podstawową aplikację internetową możesz wyświetlić i pobrać z GitHuba.

Wyświetl w GitHubie

Oto przegląd kodu podstawowego:

Powstał za pomocą Next.js opartej na React.
Wykorzystuje do tego styl CSS Tailwind.
src/components obejmuje większość logiki aplikacji. Nie ma tu niczego do aktualizacji ani zmodyfikowania.
src/firebase zawiera kod konfiguracji i inicjowania Firebase.
src/app zawiera punkty wejścia aplikacji internetowej.
src/app/page.tsx to strona główna lub lista projektów.
src/app/project/[id]/page.tsx to strona pojedynczego projektu i lista zadań.
.env zawiera konfigurację środowiska.

Skonfiguruj projekt Firebase i interfejs wiersza poleceń

Firebase to platforma do tworzenia aplikacji mobilnych i internetowych, która pomaga programistom. Firestore to baza danych dokumentów NoSQL, która umożliwia użytkownikom przechowywanie, synchronizowanie i wykonywanie zapytań dotyczących danych z aplikacji mobilnych i internetowych. Firestore to miejsce przechowywania informacji o liście zadań. Aplikacja będzie używać funkcji Firebase, więc należy skonfigurować projekt Firebase wraz z interfejsem wiersza poleceń Firebase. Aby to zrobić:

Utwórz projekt Firebase.
Utwórz bazę danych Cloud Firestore.
Zainstaluj interfejs wiersza poleceń Firebase lub zaktualizuj go do najnowszej wersji.
Przejdź do katalogu głównego aplikacji podstawowej.
Zainicjuj projekt.

Połącz pliki lokalnego projektu z projektem Firebase:
```
firebase init firestore
```
Podczas inicjowania projektu w interfejsie wiersza poleceń Firebase:
1. Wybierz opcję:
  
  Wybierz Use an existing project, a następnie utworzony projekt Firebase.
  
  Wybrany projekt Firebase jest „domyślnym” projektem Firebase w lokalnym katalogu projektów.
2. Jakiego pliku należy używać z regułami Firestore?
  
  Jeśli widzisz (firestore.rules), naciśnij Enter. Jeśli nie, wpisz firestore.rules, zanim naciśniesz Enter.
3. Plik Firestore.rules już istnieje. Czy chcesz zastąpić ją regułami Firestore z konsoli Firebase? (T/N)
  
  Wpisz „N” i naciśnij Enter.
4. Jakiego pliku należy używać z indeksami Firestore?
  
  Jeśli widzisz (firestore.indexes.json), naciśnij Enter. Jeśli nie, wpisz firestore.indexes.json, zanim naciśniesz Enter.

Baza danych Firestore jest teraz skonfigurowana i gotowa do użycia przez aplikację.

Uwierzytelnij Firebase za pomocą Google

Następnie włącz uwierzytelnianie u dostawcy Google. Aby to zrobić:

W konsoli Firebase otwórz stronę Uwierzytelnianie.

Otwórz Uwierzytelnienie Firebase
Jeśli konfigurujesz dostawcę po raz pierwszy, kliknij Skonfiguruj metodę logowania. W przeciwnym razie kliknij Dodaj nowego dostawcę.
Wybierz Google i sprawdź, czy stan jest ustawiony na Włącz.

Utwórz aplikację internetową w Firebase

Na koniec utwórz aplikację internetową w projekcie Firebase i pobierz konfigurację. Aby to zrobić:

W konsoli Firebase zarejestruj aplikację internetową w projekcie Firebase.
Otwórz Ustawienia projektu.
W sekcji Twoje aplikacje znajdź i kliknij zarejestrowaną aplikację internetową.
Zwróć uwagę na wartości w kolumnie firebaseConfig. Będziesz ich używać w kolejnej sekcji podczas aktualizowania zmiennych środowiskowych.

Znajdowanie numeru projektu Google Cloud

Otwórz konsolę Google Cloud.

Otwórz konsolę Google Cloud
Obok opcji Google Cloud Console kliknij strzałkę w dół i wybierz projekt.
Kliknij Menu > Usługi Cloud.
W sekcji Informacje o projekcie zanotuj wartość numeru projektu. Użyjesz go w kolejnej sekcji do aktualizowania zmiennych środowiskowych.

Aktualizowanie zmiennych środowiskowych

W pliku .env kodu podstawowego wpisz te informacje danymi uzyskanymi w poprzednich krokach:

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

Zastąp poniższe wartości za pomocą wartości firebaseConfig i numeru projektu zebranych we wcześniejszych krokach:

GOOGLE_PROJECT_NUMBER: numer projektu Google Cloud
PROJECT_ID: projectId Twojej aplikacji internetowej Firebase
API_KEY: apiKey Twojej aplikacji internetowej Firebase
AUTH_DOMAIN: authDomain Twojej aplikacji internetowej Firebase
STORAGE_BUCKET: storageBucket Twojej aplikacji internetowej Firebase
MSG_SENDER_ID: messagingSenderId Twojej aplikacji internetowej Firebase
APP_ID: appId Twojej aplikacji internetowej Firebase

Konfigurowanie danych logowania do aplikacji

Aby skonfigurować dane logowania do aplikacji Google, wykonaj te czynności:

W konsoli Firebase otwórz stronę Ustawienia projektu.

Otwórz ustawienia projektu
Na karcie Konta usługi wybierz kartę Firebase Admin SDK.
Kliknij Wygeneruj nowy klucz prywatny i zanotuj ścieżkę do pobranego pliku JSON.
W terminalu uruchom polecenie:
```
export GOOGLE_APPLICATION_CREDENTIALS="JSON_PATH"
```
Zastąp JSON_PATH ścieżką, w której znajduje się pobrany plik JSON.

Wdrażanie na serwerze programistycznym

Po przygotowaniu kodu i środowiska możesz wdrożyć aplikację internetową na lokalnym serwerze programistycznym. Aby to zrobić, przejdź do katalogu swojej aplikacji internetowej i wykonaj te czynności:

Uruchom polecenie npm install i poczekaj na pobranie i zainstalowanie modułów węzłów.
Uruchom polecenie: npm run dev.
Otwórz http://localhost:3000/, aby sprawdzić, czy aplikacja internetowa jest uruchomiona.

Używanie pakietu SDK dodatków do Meet w przeglądarce

Następnym krokiem jest wprowadzenie wymaganych aktualizacji kodu, aby zintegrować go i przekształcić w dodatek do Google Meet. Aby to zrobić:

Utwórz plik src/meet/meet.d.ts
1. Najnowsze typy plików możesz pobrać ze strony https://www.gstatic.com/meetjs/addons/0.7.0/index.d.ts i zapisać plik lokalnie.

Utwórz plik src/meet/utils.ts

Dodaj funkcję createAddonSession. To tutaj sesja jest przygotowana do komunikacji w Google Meet.

export function createAddonSession() {
  let session;

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

Utwórz katalog src/app/meet. Będzie to katalog dedykowany dla wszystkich tras związanych z Meet.

Utwórz plik src/app/meet/layout.tsx

Wspólny układ wszystkich stron związanych z Meet. Tutaj wstrzykujesz skrypt pakietu SDK Meet i upewniasz się, że pakiet SDK został wczytany przed wyrenderowaniem treści.

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

Utwórz plik src/app/meet/sidepanel/page.tsx

Zawartość panelu bocznego dotycząca dodatku Meet. Ta strona konkretnie obsługuje wybór treści i ustawianie stanu rozpoczęcia współpracy po wybraniu treści.

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

Utwórz plik src/app/meet/project/\[id\]/page.tsx

Główna część sceny dodatku do Meet. Wyświetla zawartość wybranego projektu z panelu bocznego.

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

Tworzenie wdrożenia

Skonfiguruj wdrożenie dodatku:

W konsoli Google Cloud otwórz Google Workspace Add-ons API.

Otwórz Google Workspace Add-ons API
Kliknij kartę Alternatywne środowiska wykonawcze.
Kliknij Utwórz nowe wdrożenie i wpisz identyfikator wdrożenia dodatku. Identyfikator wdrożenia to dowolny ciąg znaków, który pomaga deweloperowi dodatku zidentyfikować wdrożenie zawierające plik manifestu dodatku. Identyfikatory wdrożeń są wymagane i mogą mieć maksymalnie 100 znaków.
Kliknij Dalej.

Otworzy się panel boczny, na którym możesz przesłać specyfikację pliku manifestu dodatku w formacie JSON. W tym panelu wpisz następujące dane jako plik manifestu:

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

Kliknij Prześlij. Jeśli dodatek zostanie wdrożony, powinien pojawić się ten komunikat: Utworzono wdrożenie „ID”.
Sprawdź wdrożenie w sekcji Wdrożenia na tej stronie.

Testowanie pakietu SDK dodatków do Meet w przeglądarce

Aby przetestować kompletny pakiet SDK dodatków do Meet w przeglądarce, uruchom Google Meet i sprawdź, czy aplikacja działa zgodnie z oczekiwaniami. Aby to zrobić:

Otwórz Meet i rozpocznij nowe spotkanie.
Kliknij Działania.
W sekcji Twoje dodatki powinna być widoczna opcja Mój pierwszy dodatek internetowy Meet. Wybierz ją, aby uruchomić dodatek.
Po uruchomieniu dodatku otworzy się panel boczny.
Zaloguj się w aplikacji za pomocą konta Google. Po zalogowaniu się kliknij Nowy projekt.
Wybierz utworzony Projekt bez nazwy.
W panelu bocznym kliknij Rozpocznij aktywność.
Po uruchomieniu panel boczny zamyka się i otwiera scena główna.

Dodatek działa teraz zgodnie z oczekiwaniami, ale tylko u użytkownika, który zalogował się przez aplikację (krok 5). Inni uczestnicy dołączający do aktywności przez Meet nie mogą współpracować w aplikacji, ponieważ nie mogą współdzielić tej samej sesji z pierwszym użytkownikiem. W celu udostępnienia treści innym osobom potrzebna jest dalsza implementacja (np. mechanizm udostępniania tokenów).

Czyszczenie danych

Aby uniknąć obciążenia konta Google Cloud opłatami za zasoby zużyte w tym samouczku, zalecamy usunięcie projektu Cloud.

Uwaga: usunięcie projektu spowoduje:

Wszystkie dane projektu zostaną usunięte. Jeśli w tym samouczku został użyty istniejący projekt, usunięcie go spowoduje też usunięcie wszystkich innych postępów wykonanych w tym projekcie.
Niestandardowe identyfikatory projektu zostaną utracone. Być może podczas tworzenia tego projektu został przez Ciebie utworzony niestandardowy identyfikator, którego będziesz używać w przyszłości. Aby zachować adresy URL korzystające z identyfikatora projektu, takie jak adres URL na appspot.com, usuń wybrane zasoby w projekcie, zamiast usuwać cały projekt.

Jeśli planujesz skorzystać z wielu samouczków i krótkich wprowadzenia, ponowne wykorzystanie projektów może pomóc Ci uniknąć przekroczenia limitów liczby projektów.

W konsoli Google Cloud otwórz stronę Zarządzanie zasobami. Kliknij Menu > Administracja > Zarządzaj zasobami.
Otwórz menedżera zasobów
Na liście projektów wybierz projekt, który chcesz usunąć, a następnie kliknij Usuń .
W oknie wpisz identyfikator projektu i kliknij Wyłącz, aby usunąć projekt.

Powiązane artykuły

Więcej informacji o współpracy znajdziesz w artykule Współpraca przy użyciu dodatku do Meet.
Więcej informacji o udostępnianiu ekranu znajdziesz w artykule Promowanie dodatku na kontach użytkowników przez udostępnianie ekranu.