Krótki przewodnik po dodatkach do Meet

Z tego przewodnika dowiesz się, jak skonfigurować i uruchomić przykładowy dodatek do Google Meet, tworząc główny obszar i panel boczny. Przykłady „Hello World” na tej stronie są też dostępne w GitHubie jako kompletne dodatki do Meet zbudowane w podstawowym JavaScript lub Next.js TypeScript.

Główny obszar i panel boczny dodatku do Meet 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, postępuj zgodnie z instrukcjami dotyczącymi pakietu SDK dodatków do Meet w npm.

Najpierw zainstaluj pakiet npm:

npm install @googleworkspace/meet-addons

Następnie pakiet SDK dodatków do Meet jest dostępny po zaimportowaniu interfejsu MeetAddonExport:

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

Użytkownicy TypeScriptu mają do dyspozycji definicje TypeScriptu spakowane z modułem. Użytkownicy TypeScriptu powinni ustawić moduleResolution na "bundler" w tsconfig.json projektu, aby specyfikacja „eksportów” w pliku package.json umożliwiła importowanie pakietu do udostępniania ekranu.

gstatic

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

Aby użyć pakietu SDK dodatków do 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 do Meet jest dostępny w interfejsie MeetAddon w sekcji window.meet.addon.

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

Tworzenie strony panelu bocznego

W panelu bocznym wyświetlą się zainstalowane dodatki, które możesz wybrać i używać. Po wybraniu dodatku w elemencie iframe wczytuje się adres URL panelu bocznego określony w pliku manifestu dodatku. Powinien to być punkt wejścia do aplikacji. Musi on co najmniej:

1. Sygnalizuj zakończenie wczytywania dodatku. Podczas wczytywania dodatku Meet wyświetla ekran wczytywania. Gdy sesja dodatku zostanie nawiązana przez wywołanie metody createAddonSession(), Meet traktuje to jako sygnał z dodatku, że wczytywanie zostało zakończone i użytkownik może wchodzić w interakcje z treściami innej firmy. Dodatek nie powinien wywoływać metody createAddonSession(), dopóki nie zakończy się wczytywanie treści.

2. Utwórz klienta panelu bocznego. Aby uzyskać dostęp do pakietu SDK dodatków do Meet w panelu bocznym, musisz utworzyć instancję interfejsu MeetSidePanelClient. Zapewnia to kontrolę nad głównym pakietem SDK dodatków do Meet.

3. Rozpocznij aktywność. Umożliwia to innym osobom dołączenie do Twojego dodatku i opcjonalne otwarcie go w głównej części ekranu.

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

Podstawowy JS + Webpack

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

Uwaga: zakładamy, że pakiet SDK dodatków do Meet został zainstalowany 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ż dołączyć pakiet SDK dodatków do Meet do main.js i udostępnić go w bibliotece. Zalecamy to zrobić, instalując webpack i używając opcji library w pliku webpack.config.js:

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

Next.js

Uwaga: w tym przykładzie używamy routingu aplikacji Next.js, aby dodać stronę do aplikacji Next.js. Więcej informacji o tworzeniu pierwszej strony w Next.js znajdziesz w oficjalnej dokumentacji Next.js na temat routingu.

Dodaj nowy Page, aby wyświetlić panel boczny. Ta strona tworzy sesję dodatku i klienta panelu bocznego podczas wczytywania oraz rozpoczyna 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łówny obszar to główny obszar, w którym możesz wyświetlać dodatek, jeśli potrzebujesz większej przestrzeni roboczej. Główna scena otworzy się po rozpoczęciu aktywności. Aby uzyskać dostęp do funkcji pakietu SDK dodatków do Meet w głównej części ekranu, musisz użyć interfejsu MeetMainStageClient.

Ważne: pamiętaj, że po załadowaniu treści dodatek musi ponownie wywołać metodę createAddonSession(). W przeciwnym razie nie uda się uruchomić dodatku w głównym widoku.

Poniższy przykładowy kod pokazuje przykład strony głównej, która renderuje niestandardowy element div, aby wyświetlić tekst „Hello, world!”:

Podstawowy JS + Webpack

Dodaj do utworzonego wcześniej pliku main.js tę funkcję, aby główny etap mógł sygnalizować zakończenie wczytywania:

/**
 * 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 niestandardową treść „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ć główną scenę. Ta strona tworzy sesję dodatku i klienta panelu bocznego podczas wczytywania oraz wyświetla niestandardową treść „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ć 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 MainStage.html w dowolnej przeglądarce. Powinno to wyglądać tak samo jak w przypadku wdrożenia podstawowego przykładu JS na GitHubie w SidePanel.html i MainStage.html w GitHub Pages.

Next.js

Uruchom następny:

next dev

Otwórz http://localhost:3000/sidepanel lub http://localhost:3000/mainstage. Powinny one wyglądać tak samo jak wdrożenie przykładowej aplikacji Next.js w GitHubie w SidePanel.html i MainStage.html w GitHub Pages.

Uwaga: w konsoli Narzędzi deweloperskich w Chrome podczas uruchamiania lokalnego występuje błąd o treści Missing required Meet SDK URL parameter: meet_sdk. Jest to oczekiwane zachowanie, dopóki nie uruchomisz aplikacji w Meet, ponieważ 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 dodatkach do Meet.

Wdrażanie dodatku do Meet

Wdrażanie dodatku to proces dwuetapowy:

1. Najpierw musisz wdrożyć kod z tego przewodnika w witrynie, której jesteś właścicielem, używając dowolnego rozwiązania do wdrażania. Oficjalne przykładowe dodatki do Google Meet w GitHubie są wdrażane za pomocą procesu GitHub na stronach GitHub, ale możesz też używać narzędzi takich jak Firebase Hosting.

2. Po wdrożeniu aplikacji musisz skonfigurować wdrożenie dodatku, postępując zgodnie z instrukcjami wdrażania dodatku do Meet. Postępując zgodnie z tym przewodnikiem po wdrażaniu, utworzysz ostateczny dodatek do Meet, który jest elementem iframe w Meet aplikacji wdrożonej w kroku 1.

Uruchamianie przykładu

1. Otwórz Meet.

2. Kliknij przycisk narzędzi spotkania .

3. W sekcji Twoje dodatki powinien być widoczny Twój dodatek. Wybierz go, aby uruchomić dodatek.

Dodawanie kolejnych funkcji

Teraz, gdy masz już podstawowy panel boczny i główną część ekranu, możesz zacząć dodawać do dodatku inne funkcje:

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

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