Hướng dẫn bắt đầu nhanh về Tiện ích bổ sung của Meet

Hướng dẫn này mô tả cách thiết lập và chạy một mẫu Tiện ích bổ sung Google Meet bằng cách tạo một màn hình chính và bảng điều khiển bên. Chiến lược phát hành đĩa đơn "Hello World" ("Xin chào thế giới") ví dụ trên trang này cũng có sẵn trên GitHub dưới dạng hoàn chỉnh Làm quen với các tiện ích bổ sung được xây dựng bằng JavaScript cơ bản hoặc Next.js TypeScript.

Màn hình chính và bảng điều khiển bên của SDK Tiện ích bổ sung cho Meet.
Giao diện chính và bảng điều khiển bên của Meet dành cho web Tiện ích bổ sung.

Cài đặt và nhập SDK

Bạn có thể truy cập vào SDK bằng npm hoặc gstatic.

Nếu dự án của bạn sử dụng npm, bạn có thể làm theo hướng dẫn cho gói npm SDK của tiện ích bổ sung Meet.

Trước tiên, hãy cài đặt gói npm:

npm install @googleworkspace/meet-addons

Sau đó, bạn có thể sử dụng SDK Tiện ích bổ sung Meet bằng cách nhập MeetAddonExport giao diện:

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

Đối với người dùng TypeScript, các định nghĩa TypeScript được đóng gói cùng với mô-đun.

tĩnh

SDK Tiện ích của Google Meet có sẵn dưới dạng gói JavaScript từ gstatic, một miền phân phát nội dung tĩnh.

Để sử dụng SDK tiện ích bổ sung Meet, hãy thêm thẻ tập lệnh sau vào ứng dụng:

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

Bạn có thể sử dụng SDK Tiện ích bổ sung của Meet thông qua giao diện MeetAddon trong window.meet.addon.

Tạo trang bảng điều khiển bên

Bảng điều khiển bên hiển thị các tiện ích bổ sung đã cài đặt mà bạn có thể chọn và sử dụng. Sau khi chọn tiện ích bổ sung, iframe tải URL của bảng điều khiển bên mà bạn chỉ định trong tệp kê khai tiện ích bổ sung. Đây phải là điểm truy cập của ứng dụng và ít nhất phải làm những việc sau:

  1. Cho biết tiện ích bổ sung đã tải xong. Meet sẽ hiển thị màn hình tải trong khi trình bổ trợ đang tải. Khi buổi dùng tiện ích bổ sung được thiết lập bằng cách gọi createAddonSession() nên Meet coi đây là một tín hiệu từ tiện ích bổ sung đã tải xong và người dùng có thể tương tác với nội dung của bên thứ ba. Tiện ích bổ sung của bạn không được gọi phương thức createAddonSession() cho đến khi nội dung của bạn đã kết thúc đang tải.

  2. Tạo ứng dụng bảng điều khiển bên. Cách truy cập vào SDK Tiện ích bổ sung Meet trong bảng điều khiển bên, bạn phải tạo thực thể MeetSidePanelClient . Điều này giúp bạn kiểm soát trải nghiệm chính của SDK Tiện ích bổ sung Meet.

  3. Bắt đầu hoạt động. Thao tác này cho phép người khác tham gia tiện ích bổ sung của bạn và mở tiện ích bổ sung trong màn hình chính (không bắt buộc).

Mã mẫu sau đây cho thấy cách phiên tạo ứng dụng của bảng điều khiển bên, và cách ứng dụng của bảng điều khiển bên bắt đầu một hoạt động trong giai đoạn chính:

JS cơ bản + Webpack

Trong một tệp mới tên là main.js, hãy xác định hàm tạo ra một phiên tiện ích bổ sung, ứng dụng của bảng điều khiển bên và lượt bắt đầu hoạt động khi người dùng nhấp vào nút có mã 'start-activity':

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

Trong một tệp mới có tên là SidePanel.html, hãy xác định nút khởi chạy hoạt động và gọi hàm từ main.js khi tải tài liệu:

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

Bạn cũng cần gói SDK Tiện ích Meet với main.js và hiển thị các tiện ích đó trong thư viện. Chúng tôi khuyên bạn nên thực hiện việc này trước đang cài đặt gói web và sử dụng tuỳ chọn library trong tệp webpack.config.js:

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

Next.js

Thêm một Page mới để hiển thị bảng điều khiển bên. Trang này tạo một phiên tiện ích bổ sung và ứng dụng bảng điều khiển bên khi tải, đồng thời khởi động hoạt động khi người dùng nhấp vào một nút:

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

Thay thế đoạn mã sau:

  • CLOUD_PROJECT_NUMBER: số dự án của dự án trên Google Cloud.

  • MAIN_STAGE_URL: URL của sân khấu chính mà bạn tạo trong bước tiếp theo.

Tạo trang sân khấu chính

Phiên bản chính là khu vực tập trung chính, nơi bạn có thể hiển thị tiện ích bổ sung nếu cần không gian làm việc lớn hơn. Chính giai đoạn sẽ mở sau khi hoạt động bắt đầu. Để truy cập các tính năng SDK của tiện ích bổ sung Meet trong màn hình chính, bạn phải sử dụng giao diện MeetMainStageClient.

Mã mẫu sau đây cho thấy ví dụ về một trang giai đoạn chính kết xuất tuỳ chỉnh div để nói "Hello, world!":

Gói web và JS cơ bản

Thêm hàm sau vào tệp main.js mà bạn đã tạo để sân khấu chính có thể báo hiệu rằng đã tải xong:

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

Sau đó, hãy thêm một tệp MainStage.html mới để gọi Hàm initializeMainStage và hiển thị câu lệnh "hello, world" tuỳ chỉnh nội dung:

<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

Thêm Page để hiển thị sân khấu chính. Trang này tạo một phiên tiện ích bổ sung và ứng dụng bảng điều khiển bên khi tải, đồng thời hiển thị nội dung tuỳ chỉnh "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>
        </>
    );
}

Thay thế CLOUD_PROJECT_NUMBER bằng số dự án của dự án Google Cloud.

Chạy mẫu

Để chạy cục bộ, hãy làm như sau:

Gói web và JS cơ bản

Chạy webpack để gói tệp main.js cùng với SDK Tiện ích bổ sung Meet:

npx webpack

Mở tệp SidePanel.html và tệp MainStage.html trong bất kỳ trình duyệt nào. Thao tác này sẽ giống như khi triển khai mẫu JS cơ bản trên GitHub vào SidePanel.html và MainStage.html trên GitHub Pages.

Next.js

Chạy Tiếp theo:

next dev

Chuyển đến http://localhost:3000/sidepanel hoặc http://localhost:3000/mainstage. Các thẻ này sẽ trông giống như triển khai mẫu Next.js trên GitHub vào một SidePanel.html và MainStage.html trên trang GitHub.

Triển khai tiện ích bổ sung của Meet

Thiết lập việc triển khai tiện ích bổ sung bằng cách làm theo hướng dẫn về cách Triển khai tiện ích Meet.

Chạy mẫu

  1. Chuyển đến Meet.

  2. Nhấp vào biểu tượng Hoạt động Biểu tượng cho các hoạt động..

  3. Trong phần Tiện ích bổ sung của bạn, bạn sẽ thấy tiện ích bổ sung của mình. Chọn hồ sơ đó để chạy tiện ích bổ sung.

Thêm tính năng khác

Giờ đây, khi đã có bảng điều khiển bên và màn hình chính cơ bản, bạn có thể bắt đầu thêm các tính năng khác vào tiện ích bổ sung:

Bạn nên sử dụng mẫu Tiện ích bổ sung Meet trên GitHub làm tài liệu tham khảo để xây dựng các tính năng này.