Krótki przewodnik po dodatkach do Meet

W tym przewodniku opisano, jak skonfigurować i uruchomić przykładowe rozszerzenie Google Meet, tworząc scenę główną i panel boczny. Przykłady „Hello World” na tej stronie są też dostępne na GitHubie jako kompletne dodatki do Meet utworzone za pomocą podstawowego JavaScriptu lub TypeScript Next.js.

Główna część i panel boczny dodatku Meet na potrzeby korzystania z niego w przeglądarce.

Instalowanie i importowanie pakietu SDK

Dostęp do pakietu SDK możesz uzyskać za pomocą npm lub gstatic.

npm (zalecane)

Jeśli Twój projekt korzysta z npm, możesz postępować zgodnie z instrukcjami dotyczącymi pakietu npm pakietu SDK dodatków Meet.

Najpierw zainstaluj pakiet npm:

npm install @googleworkspace/meet-addons

Następnie możesz zaimportować pakiet SDK dodatków Meet, aby uzyskać dostęp do interfejsu MeetAddonExport:

import {meet} from '@googleworkspace/meet-addons/meet.addons';

W przypadku użytkowników TypeScript definicje TypeScript są pakowane z modułem. Użytkownicy TypeScript powinni ustawić wartość moduleResolution na "bundler" w tsconfig.json projektu, aby specyfikacja „eksportu” package.json umożliwiała importowanie eksportu pakietu udostępniania ekranu.

gstatic

Pakiet SDK dodatków Google Meet jest dostępny jako pakiet JavaScripta z gstatic, domeny, która udostępnia treści statyczne.

Aby korzystać z pakietu SDK dodatków Meet, dodaj do aplikacji ten tag skryptu:

<script src="https://www.gstatic.com/meetjs/addons/1.1.0/meet.addons.js"></script>

Pakiet SDK dodatków Meet jest dostępny w interfejsie MeetAddon w sekcji window.meet.addon.

Uwaga: jeśli używasz TypeScript, możesz też pobrać najnowsze typy z https://www.gstatic.com/meetjs/addons/1.1.0/meet.addons.d.ts. Po prostu zapisz plik lokalnie.

Tworzenie strony panelu bocznego

W panelu bocznym wyświetlają się zainstalowane dodatki, które możesz wybrać i użyć. Po wybraniu dodatku w ramce iframe wczytuje się adres URL panelu bocznego, który określasz w pliku manifestu dodatku. Powinien to być punkt wejścia do aplikacji, który umożliwia co najmniej:

1. Wskazuje, że wczytywanie dodatku zostało zakończone. Podczas wczytywania dodatku Meet wyświetla ekran wczytywania. Gdy sesja dodatku zostanie utworzona przez wywołanie metody createAddonSession(), Meet traktuje to jako sygnał od dodatku, że wczytywanie zostało zakończone i że użytkownik może wchodzić w interakcje z treściami innej firmy. Twój dodatek nie powinien wywoływać metody createAddonSession(), dopóki treści nie zostaną w pełni załadowane.

2. Utwórz klienta panelu bocznego. Aby uzyskać dostęp do pakietu SDK dodatków Meet w panelu bocznym, musisz utworzyć instancję interfejsu MeetSidePanelClient. Umożliwia to kontrolowanie głównego interfejsu SDK dodatków do Meet.

3. Rozpocznij aktywność. Umożliwia to innym dołączanie do Twojego dodatku i opcjonalnie otwiera go na głównym etapie.

Poniższy przykładowy kod pokazuje, jak sesja tworzy klienta panelu bocznego i jak klient panelu bocznego uruchamia aktywność na głównym etapie:

Podstawowy JS + Webpack

W nowym pliku o nazwie main.js zdefiniuj funkcję, która tworzy sesję dodatku, klienta panelu bocznego i rozpoczyna aktywność po kliknięciu przycisku o identyfikatorze 'start-activity':

Uwaga: zakładamy, że zainstalowałeś/aś pakiet SDK dodatków Meet za pomocą npm.

import { meet } from '@googleworkspace/meet-addons/meet.addons';

const CLOUD_PROJECT_NUMBER = 'CLOUD_PROJECT_NUMBER';
const MAIN_STAGE_URL = 'MAIN_STAGE_URL';

/**
 * Prepares the add-on Side Panel Client, and adds an event to launch the
 * activity in the main stage when the main button is clicked.
 */
export async function setUpAddon() {
    const session = await meet.addon.createAddonSession({
        cloudProjectNumber: CLOUD_PROJECT_NUMBER,
    });
    const sidePanelClient = await session.createSidePanelClient();
    document
        .getElementById('start-activity')
        .addEventListener('click', async () => {
            await sidePanelClient.startActivity({
                mainStageUrl: MAIN_STAGE_URL
            });
        });
}

W nowym pliku o nazwie SidePanel.html zdefiniuj przycisk, który uruchamia aktywność, i wywołaj funkcję z pliku main.js podczas wczytywania dokumentu:

<html>
<head>
    <title>Meet add-on Side Panel</title>
    <script src="./main.js"></script>
</head>

<body style="width: 100%; height: 100%; margin: 0">
    <div>This is the add-on Side Panel. Only you can see this.</div>
    <button id="start-activity">Launch Activity in Main Stage.</button>

    <script>
        document.body.onload = () => {
            // Library name (`helloWorld`) is defined in the webpack config.
            // The function (`setUpAddon`) is defined in main.js.
            helloWorld.setUpAddon();
        };
    </script>
</body>
</html>

Musisz też umieścić pakiet SDK dodatków Meet w main.js i udostępnić go w bibliotece. Zalecamy zainstalowanie webpacka i użycie opcji library w pliku webpack.config.js:

module.exports = {
    entry: './main.js',
    output: {
        library: 'helloWorld',
        ...
    },
    ...
};

Next.js

Uwaga: w tym przykładzie dodajemy stronę do aplikacji Next.js za pomocą przekierowania aplikacji Next.js. Aby dowiedzieć się więcej o tworzeniu pierwszej strony w Next.js, przeczytaj oficjalne dokumenty Next.js na temat przekierowań.

Dodaj nowy element Page, aby wyświetlić panel boczny. Ta strona tworzy sesję dodatku i klienta panelu bocznego podczas wczytywania oraz uruchamia aktywność po kliknięciu przycisku:

'use client';

import { useEffect, useState } from 'react';
import {
    meet,
    MeetSidePanelClient,
} from '@googleworkspace/meet-addons/meet.addons';

export default function Page() {
    const [sidePanelClient, setSidePanelClient] = useState<MeetSidePanelClient>();

    // Launches the main stage when the main button is clicked.
    async function startActivity(e: unknown) {
        if (!sidePanelClient) {
            throw new Error('Side Panel is not yet initialized!');
        }
        await sidePanelClient.startActivity({
            mainStageUrl: 'MAIN_STAGE_URL'
        });
    }

    /**
     * Prepares the add-on Side Panel Client.
     */
    useEffect(() => {
        (async () => {
            const session = await meet.addon.createAddonSession({
                cloudProjectNumber: 'CLOUD_PROJECT_NUMBER',
            });
            setSidePanelClient(await session.createSidePanelClient());
        })();
    }, []);

    return (
        <>
            <div>
                This is the add-on Side Panel. Only you can see this.
            </div>
            <button onClick={startActivity}>
                Launch Activity in Main Stage.
            </button>
        </>
    );
}

Zastąp następujące elementy:

• CLOUD_PROJECT_NUMBER: numer projektu Google Cloud.

• MAIN_STAGE_URL: adres URL głównej sceny, który utworzysz w następnym kroku.

Tworzenie strony głównej

Główna scena to główny obszar, na którym możesz wyświetlać dodatki, jeśli potrzebujesz większej przestrzeni roboczej. Główna scena otworzy się, gdy rozpocznie się aktywność. Aby uzyskać dostęp do funkcji pakietu SDK dodatków Meet w głównej części ekranu, musisz użyć interfejsu MeetMainStageClient.

Ważne: po zakończeniu wczytywania treści dodatek musi ponownie wywołać metodę createAddonSession(). W przeciwnym razie dodatek nie uruchomi się w głównym widoku.

Poniższy przykładowy kod pokazuje stronę główną, która renderuje niestandardowy element div, aby wyświetlić komunikat „Hello, world!”:

Podstawowy JS + Webpack

Dodaj do utworzonego już pliku main.js tę funkcję, aby etap główny mógł sygnalizować, że wczytanie zostało zakończone:

/**
 * Prepares the add-on Main Stage Client, which signals that the add-on has
 * successfully launched in the main stage.
 */
export async function initializeMainStage() {
    const session = await meet.addon.createAddonSession({
        cloudProjectNumber: CLOUD_PROJECT_NUMBER,
    });
    await session.createMainStageClient();
}

Następnie dodaj nowy plik MainStage.html, który wywołuje nową funkcję initializeMainStage i wyświetla niestandardowy tekst „hello, world”:

<html>
<body style="width: 100%; height: 100%; margin: 0">
    <div>
        This is the add-on Main Stage. Everyone in the call can see this.
    </div>
    <div>Hello, world!</div>

    <script>
        document.body.onload = () => {
            helloWorld.initializeMainStage();
        };
    </script>
</body>
</html>

Next.js

Dodaj Page, aby wyświetlić scenę główną. Ta strona tworzy sesję dodatku i klienta panelu bocznego podczas wczytywania oraz wyświetla niestandardowe treści „hello, world”:

'use client';

import { useEffect } from 'react';
import { meet } from '@googleworkspace/meet-addons/meet.addons';

export default function Page() {
    /**
     * Prepares the add-on Main Stage Client, which signals that the add-on
     * has successfully launched in the main stage.
     */
    useEffect(() => {
        (async () => {
            const session = await meet.addon.createAddonSession({
                cloudProjectNumber: 'CLOUD_PROJECT_NUMBER',
            });
            await session.createMainStageClient();
        })();
    }, []);

    return (
        <>
            <div>
                This is the add-on Main Stage.
                Everyone in the call can see this.
            </div>
            <div>Hello, world!</div>
        </>
    );
}

Zastąp CLOUD_PROJECT_NUMBER numerem projektu Google Cloud.

Uruchamianie przykładu

Aby uruchomić aplikację lokalnie:

Podstawowy JS + Webpack

Uruchom webpack, aby połączyć plik main.js z pakietem SDK dodatków do Meet:

npx webpack

Otwórz plik SidePanel.html i plik MainStage.html w dowolnej przeglądarce. Powinno to wyglądać tak samo jak w przypadku wdrożenia przykładu podstawowego kodu JS na GitHub do pliku SidePanel.html i MainStage.html na stronach GitHub.

Next.js

Wykonaj jako następne:

next dev

Otwórz http://localhost:3000/sidepanel lub http://localhost:3000/mainstage. Powinny one wyglądać tak samo jak w przypadku wdrożenia przykładu Next.js na GitHubie do pliku SidePanel.html i MainStage.html w GitHub Pages.

Uwaga: w konsoli Narzędzi deweloperskich w Chrome podczas uruchamiania lokalnie pojawia się błąd o nazwie Missing required Meet SDK URL parameter: meet_sdk. Jest to oczekiwane, dopóki nie uruchomisz aplikacji w Meet, ponieważ to Meet będzie obsługiwać przekazywanie tego parametru adresu URL. Więcej informacji o narzędziach dla programistów znajdziesz w artykule Zarządzanie narzędziami dla programistów w przypadku dodatków do Meet

.

Wdrażanie dodatku Meet

Wdrożenie dodatku to proces dwuetapowy:

1. Najpierw musisz wdrożyć kod z tego samouczka do swojej witryny, korzystając z dowolnego preferowanego rozwiązania do wdrażania. Oficjalne przykładowe dodatki Google Meet na GitHubie są wdrażane za pomocą przepływu pracy GitHuba do GitHub Pages, ale możesz też użyć narzędzi takich jak Firebase Hosting.

2. Po wdrożeniu aplikacji musisz skonfigurować wdrożenie dodatku, wykonując instrukcje Wdrażanie dodatku Meet. Postępując zgodnie z tym przewodnikiem, utworzysz dodatkowy element Meet, który jest elementem iframe w aplikacji Meet, wdrożonej w kroku 1.

Uruchamianie przykładu

1. Otwórz Meet.

2. Kliknij przycisk narzędzi spotkania .

3. W sekcji Twoje dodatki powinien wyświetlić się Twój dodatek. Wybierz go, aby uruchomić dodatek.

Dodawanie kolejnych funkcji

Teraz, gdy masz już podstawowy panel boczny i ekran główny, możesz zacząć dodawać do dodatku inne funkcje:

• Współpraca przy użyciu dodatku do Meet
• Wiadomości między oknem głównym a panelem bocznym
• Promowanie dodatku przez udostępnianie ekranu

Zachęcamy do korzystania z przykładowych dodatków do Meet na GitHubie jako odniesienia do tworzenia tych funkcji.