Halaman ini diterjemahkan oleh Cloud Translation API.

Panduan memulai Add-on Meet

Panduan ini menjelaskan cara menyiapkan dan menjalankan contoh Add-on Google Meet dengan membuat panggung utama dan panel samping. Tujuan "Hello World" (Halo Dunia) contoh di halaman ini juga tersedia di GitHub sebagai selesai Add-on Meet yang dibuat dengan JavaScript dasar atau Next.js TypeScript.

Layar utama dan panel samping SDK Add-on Meet. — Panggung utama dan panel samping Add-on Web Meet.

Menginstal dan mengimpor SDK

Anda dapat mengakses SDK menggunakan npm atau menggunakan gstatic.

npm (direkomendasikan)

Jika project Anda menggunakan npm, Anda dapat mengikuti petunjuk untuk paket npm Meet Add-ons SDK.

Pertama, instal paket npm:

npm install @googleworkspace/meet-addons

Kemudian, SDK Add-on Meet tersedia dengan mengimpor MeetAddonExport antarmuka:

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

Untuk pengguna TypeScript, definisi TypeScript dikemas dengan modul.

{i>gstatic<i}

SDK Add-on Google Meet tersedia sebagai paket JavaScript dari gstatic, domain yang menayangkan konten statis.

Untuk menggunakan SDK Add-on Meet, tambahkan tag skrip berikut ke aplikasi:

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

SDK Add-on Meet tersedia melalui antarmuka MeetAddon di bagian window.meet.addon.

Membuat halaman panel samping

Panel samping menampilkan add-on terinstal yang yang dapat dipilih dan digunakan. Setelah memilih add-on, iframe memuat URL panel samping yang Anda tentukan di manifes add-on baru. Ini harus menjadi titik entri aplikasi Anda, dan setidaknya harus melakukan hal berikut:

Menunjukkan bahwa pemuatan add-on selesai. Meet menampilkan layar pemuatan saat add-on sedang dimuat. Jika sesi add-on dibuat dengan memanggil createAddonSession() , Meet akan memperlakukannya sebagai sinyal dari tambahan saat pemuatan telah selesai, dan pengguna dapat berinteraksi dengan konten pihak ketiga. Add-on Anda tidak boleh memanggil metode createAddonSession() hingga konten selesai dimuat.
Buat klien panel samping. Untuk mengakses SDK Add-on Meet di panel samping, Anda harus membuat instance MeetSidePanelClient dalam antarmuka berbasis web yang sederhana. Hal ini memberikan kontrol atas SDK Add-on Meet utama Anda pengalaman yang lancar bagi developer.
Mulai aktivitas. Tindakan ini memungkinkan orang lain bergabung ke add-on Anda dan secara opsional membuka add-on Anda di panggung utama.

Contoh kode berikut menunjukkan cara sesi membuat klien panel samping, dan cara klien panel samping memulai aktivitas di tahap utama:

JS Dasar + Webpack

Dalam file baru bernama main.js, tentukan fungsi yang membuat sesi add-on, klien panel samping, dan memulai aktivitas saat tombol dengan ID 'start-activity' diklik:

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

Dalam file baru bernama SidePanel.html, tentukan tombol yang meluncurkan aktivitas Anda, dan panggil fungsi dari main.js saat pemuatan dokumen:

<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>

Anda juga harus memaketkan SDK Add-on Meet dengan main.js dan mengeksposnya di library. Sebaiknya lakukan dengan menginstal webpack dan menggunakan opsi library dalam file webpack.config.js Anda:

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

Next.js

Tambahkan Page baru untuk menampilkan panel samping. Halaman ini membuat sesi add-on dan klien panel samping saat pemuatan, dan memulai aktivitas saat tombol diklik:

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

Ganti kode berikut:

CLOUD_PROJECT_NUMBER: nomor project project Google Cloud Anda.
MAIN_STAGE_URL: URL tahap utama yang Anda buat di langkah berikutnya.

Membuat halaman panggung utama

Tahap utama adalah area fokus utama tempat Anda dapat menampilkan add-on jika diperlukan ruang kerja yang lebih besar. Tahap utama akan terbuka setelah aktivitas dimulai. Untuk mengakses SDK Add-on Meet di layar utama, Anda harus menggunakan antarmuka MeetMainStageClient.

Contoh kode berikut menunjukkan contoh halaman panggung utama yang merender div kustom untuk mengucapkan "Halo, dunia!":

JS Dasar + Webpack

Tambahkan fungsi berikut ke file main.js yang sudah Anda buat, jadi bahwa tahap utama dapat menandakan bahwa pemuatan telah selesai:

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

Kemudian, tambahkan file MainStage.html baru, yang memanggil fungsi initializeMainStage baru dan menampilkan konten "halo, dunia" kustom:

<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

Tambahkan Page untuk menampilkan panggung utama. Halaman ini membuat sesi add-on dan klien panel samping saat dimuat, serta menampilkan konten "hello, world" kustom:

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

Ganti CLOUD_PROJECT_NUMBER dengan nomor project Anda project Google Cloud Anda.

Menjalankan contoh

Untuk menjalankan secara lokal, lakukan hal berikut:

JS Dasar + Webpack

Jalankan webpack untuk memaketkan file main.js bersama dengan SDK Add-on Meet:

npx webpack

Buka file SidePanel.html dan file MainStage.html di browser apa pun. Ini akan terlihat sama dengan deployment contoh JS Dasar di GitHub ke SidePanel.html dan MainStage.html di Halaman GitHub.

Next.js

Jalankan Berikutnya:

next dev

Buka http://localhost:3000/sidepanel atau http://localhost:3000/mainstage. Tampilan tersebut harus terlihat sama dengan deployment contoh Next.js di GitHub ke SidePanel.html dan MainStage.html di Halaman GitHub.

Men-deploy Add-on Meet

Siapkan deployment add-on dengan mengikuti petunjuk tentang cara Men-deploy Add-on Meet.

Menjalankan contoh

Buka Meet.
Klik Aktivitas .
Di bagian Add-on Anda, Anda akan melihat {i>add-on<i}. Pilih untuk menjalankan {i>add-on<i}.

Menambahkan fitur lainnya

Setelah memiliki panel samping dasar dan panggung utama, Anda dapat mulai menambahkan fitur baru ke add-on Anda:

Sebaiknya gunakan contoh Add-on Meet di GitHub sebagai referensi untuk mem-build fitur ini.