Membuat halaman panel samping dan halaman utama

Halaman ini menjelaskan cara membuat panel samping dan halaman tahap utama dari Perkenalkan Add-on Web.

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

Menginstal dan mengimpor SDK

Anda dapat mengakses SDK menggunakan npm atau menggunakan gstatic.

Jika proyek Anda menggunakan npm, Anda dapat mengikuti petunjuk untuk Perkenalkan paket npm Add-on 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.0.0/meet.addons.js"></script>

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

Menunjukkan pemuatan add-on selesai

Meet menampilkan layar pemuatan saat add-on sedang dimuat. Jika sesi add-on adalah tetap, Meet memperlakukan panggilan ini sebagai sinyal dari tambahan saat pemuatan telah selesai, dan pengguna dapat berinteraksi dengan konten pihak ketiga.

Membuat halaman panel samping

Panel samping menampilkan add-on terinstal yang yang dapat dipilih dan digunakan. Setelah Anda memilih add-on, iframe akan memuat bagian samping panel URL yang Anda yang ditentukan dalam manifes add-on. Seharusnya, titik masuk aplikasi Anda. Untuk mengakses fungsi SDK Add-on Meet Di panel samping, Anda harus membuat instance sidePanelClient.

const session = await window.meet.addon.createAddonSession({
      cloudProjectNumber: "CLOUD_PROJECT_NUMBER",
    });
  const sidePanelClient = await session.createSidePanelClient();

Ganti CLOUD_PROJECT_NUMBER dengan nomor project Anda project Google Cloud Anda.

Berikut adalah cuplikan kode yang menunjukkan cara memulai aktivitas:

<html style="width: 100%; height: 100%">

<head>
    <title>Side Panel Add-on</title>
<script src="https://www.gstatic.com/meetjs/addons/1.0.0/meet.addons.js"></script>
</head>

<body style="width: 100%; height: 100%; margin: 0">
    <div style="display: flex; flex-direction: column; height: 100%">
        <h1>Side Panel Add-on</h1>
        <div>
            <div>
                <button id="start-activity">
                    startActivity
                </button>
            </div>
            <div>
                Activity Side Panel URL:
                <input type="text" id="sidePanelIframeUrl" style="margin-left: 20px; width: 90%;"
                    value="https://your_add_on_origin.url/newSidePanelPage.html" />
            </div>
            <div>
                Main Stage URL:
                <input type="text" id="mainStageIframeUrl" style="margin-left: 20px; width: 90%;"
                    value="https://your_add_on_origin.url/mainStagePage.html" />
            </div>
            <div>
                Activity start state data:
                <input type="text" id="additionalProperty" style="margin-left: 20px; width: 90%;"
                    value="abc123" />
            </div>
        </div>
    </div>

    <script>
        let sidePanelClient;
        async function init() {
            const session = await window.meet.addon.createAddonSession({
                cloudProjectNumber: "CLOUD_PROJECT_NUMBER",
            });
            console.log("Successfully constructed the add-on session.");
            sidePanelClient = await session.createSidePanelClient();
            console.log("Successfully constructed side panel client.");

            document
                .getElementById('start-activity')
                .addEventListener(
                    'click', async () => {
                        const sidePanelIframeUrlInputElement =
                            document.getElementById('sidePanelIframeUrl');
                        const mainStageIframeUrlInputElement =
                            document.getElementById('mainStageIframeUrl');
                        const additionalPropertyInputElement =
                            document.getElementById('additionalProperty');
                        await sidePanelClient.startActivity({
                            // Side panel is replaced with a new page.
                            sidePanelUrl: sidePanelIframeUrlInputElement.value,
                            // Main stage loads a large work area.
                            mainStageUrl: mainStageIframeUrlInputElement.value,
                            additionalData: JSON.stringify({
                                additionalProperty: additionalPropertyInputElement.value
                            }),
                        });
                    });
        }
        document.body.onload = () => {
            init();
        };
    </script>
</body>

</html>

Ganti CLOUD_PROJECT_NUMBER dengan nomor project Anda project Google Cloud Anda.

Membuat halaman panggung utama

Panggung utama adalah area fokus utama tempat Anda dapat menampilkan {i>add-on<i} jika ruang kerja yang lebih besar diperlukan. Utama akan terbuka setelah aktivitas dimulai. Untuk mengakses SDK Add-on Meet di layar utama, Anda dapat menggunakan objek klien MeetMainStageClient:

const session = await window.meet.addon.createAddonSession({
      cloudProjectNumber: "CLOUD_PROJECT_NUMBER",
    });
const mainStageClient = await session.createMainStageClient();

Ganti CLOUD_PROJECT_NUMBER dengan nomor project Anda project Google Cloud Anda.

Berikut ini cuplikan kode yang menunjukkan contoh halaman tahap (mainStagePage.html di cuplikan sebelumnya), dan menyertakan panggilan ke getActivityStartingState sebagai respons terhadap klik tombol:

<html style="width: 100%; height: 100%">

<head>
    <title>Main Stage Add-on</title>
    <script src="https://www.gstatic.com/meetjs/addons/1.0.0/meet.addons.js"></script>
</head>

<body style="width: 100%; height: 100%; margin: 0; background: white;">
    <div style="display: flex; flex-direction: column; height: 100%">
        <h1>Main Stage Add-on</h1>
        <div>
            <div>
                <button id="get-activity-starting-state">
                    Get Activity Starting State's Additional Property
                </button>
            </div>
            <div id="receivedActivityStartingStateProperty"
                style="margin-left: 20px; width: 300px; overflow-wrap: anywhere"></div>
        </div>
    </div>

    <script>
        let mainStageClient;
        async function init() {
            const session = await window.meet.addon.createAddonSession({
                cloudProjectNumber: "CLOUD_PROJECT_NUMBER",
            });
            console.log("Successfully constructed the add-on session.");
            const mainStageClient = await session.createMainStageClient();
            console.log("Successfully constructed main stage client.");
            document
                .getElementById('get-activity-starting-state')
                .addEventListener(
                    'click', async () => {
                        const startingState =
                            await mainStageClient.getActivityStartingState();
                        const startingStateData = JSON.parse(startingState.additionalData);
                        document.getElementById(
                            'receivedActivityStartingStateProperty').textContent =
                            startingStateData.additionalProperty;
                    });
        }
        document.body.onload = () => {
            init();
        };
    </script>
</body>

</html>

Ganti CLOUD_PROJECT_NUMBER dengan nomor project Anda project Google Cloud Anda.