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 tiện ích bổ sung mẫu cho Google Meet bằng cách tạo một sân khấu chính và bảng điều khiển bên. Các ví dụ "Hello World" trên trang này cũng có trên GitHub dưới dạng các tiện ích bổ sung hoàn chỉnh cho Meet được tạo bằng JavaScript cơ bản hoặc TypeScript Next.js.

Giai đoạn chính và bảng điều khiển bên của Tiện ích bổ sung Meet trên web.

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

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

npm (nên dùng)

Nếu dự án của bạn sử dụng npm, bạn có thể làm theo hướng dẫn về gói npm SDK của Meet Add-ons.

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 Meet Add-ons SDK bằng cách nhập giao diện MeetAddonExport:

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. Người dùng TypeScript nên đặt moduleResolution thành "bundler" trong tsconfig.json của dự án để thông số "xuất" package.json cho phép nhập xuất gói chia sẻ màn hình.

gstatic

Google Meet Add-ons SDK có sẵn dưới dạng một gói JavaScript từ gstatic, một miền cung cấp nội dung tĩnh.

Để sử dụng Meet Add-ons SDK, hãy thêm thẻ tập lệnh sau vào ứng dụng của bạn:

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

Bạn có thể sử dụng Meet Add-ons SDK thông qua giao diện MeetAddon trong window.meet.addon.

Lưu ý: Nếu đang dùng TypeScript, bạn cũng có thể lấy các loại mới nhất từ https://www.gstatic.com/meetjs/addons/1.1.0/meet.addons.d.ts. Chỉ cần lưu tệp trên thiết bị.

Tạo trang có 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 bạn chọn tiện ích bổ sung, một iframe sẽ 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ối thiểu phải thực hiện những việc sau:

1. Cho biết quá trình tải tiện ích bổ sung đã hoàn tất. Meet sẽ hiển thị màn hình tải trong khi tiện ích bổ sung đang tải. Khi phiên của tiện ích bổ sung được thiết lập bằng cách gọi phương thức createAddonSession(), Meet sẽ coi đây là tín hiệu từ tiện ích bổ sung cho biết quá trình tải đã hoàn tất 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 tải xong.

2. Tạo ứng dụng khách bảng điều khiển bên. Để truy cập vào Meet Add-ons SDK trong bảng điều khiển bên, bạn phải tạo một 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. Điều này cho phép người khác tham gia tiện ích bổ sung của bạn và tuỳ chọn mở tiện ích bổ sung của bạn trong màn hình chính.

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

JS cơ bản + Webpack

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

Lưu ý: Điều này giả định rằng bạn đã cài đặt SDK tiện ích bổ sung Meet bằng 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
            });
        });
}

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 phải gói Meet Add-ons SDK với main.js và hiển thị chúng trong một thư viện. Bạn nên thực hiện việc này bằng cách cài đặt webpack và sử dụng lựa chọn library trong tệp webpack.config.js:

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

Next.js

Lưu ý: Ví dụ này sử dụng tính năng định tuyến ứng dụng Next.js để thêm một trang vào ứng dụng Next.js. Để tìm hiểu thêm về cách tạo trang đầu tiên trong Next.js, hãy xem tài liệu chính thức của Next.js về tính năng định tuyến.

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 bổ trợ và ứng dụng bảng điều khiển bên khi tải, đồng thời bắt đầu 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ế nội dung 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 ở bước tiếp theo.

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

Giai đoạn chính là khu vực trọng tâm 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. Giai đoạn chính sẽ mở ra khi hoạt động bắt đầu. Để truy cập các tính năng của SDK tiện ích bổ sung Meet trong màn hình chính, bạn phải sử dụng giao diện MeetMainStageClient.

Lưu ý quan trọng: Xin lưu ý rằng tiện ích bổ sung của bạn phải gọi lại phương thức createAddonSession() sau khi nội dung của bạn đã tải xong. Nếu không, tiện ích bổ sung sẽ không khởi động được ở giai đoạn chính.

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

JS cơ bản + Webpack

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

/**
 * 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. Tệp này sẽ gọi hàm initializeMainStage mới và hiển thị nội dung "hello, world" tuỳ chỉnh:

<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 một 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 "xin chào thế giới" tuỳ chỉnh:

'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 trên Google Cloud.

Chạy mẫu

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

JS cơ bản + Webpack

Chạy webpack để gói tệp main.js cùng với Meet Add-ons SDK:

npx webpack

Mở tệp SidePanel.html và tệp MainStage.html trong trình duyệt bất kỳ. Việc này sẽ giống với việc 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 mẫu này phải giống với việc triển khai mẫu Next.js trên GitHub cho SidePanel.html và MainStage.html trên GitHub Pages.

Lưu ý: Trong bảng điều khiển Công cụ của Chrome cho nhà phát triển khi chạy cục bộ, có một lỗi cho biết Missing required Meet SDK URL parameter: meet_sdk. Điều này là dự kiến cho đến khi bạn chạy ứng dụng trong Meet, vì Meet sẽ xử lý việc truyền tham số URL này. Để biết thêm thông tin về các công cụ dành cho nhà phát triển, hãy xem bài viết Quản lý công cụ dành cho nhà phát triển cho các tiện ích bổ sung của Meet.

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

Triển khai tiện ích bổ sung là một quy trình gồm hai bước:

1. Trước tiên, bạn phải triển khai mã từ hướng dẫn bắt đầu nhanh này đến một trang web mà bạn sở hữu, bằng cách sử dụng bất kỳ giải pháp triển khai nào mà bạn muốn. Các tiện ích bổ sung mẫu chính thức của Google Meet trên GitHub được triển khai bằng quy trình làm việc trên GitHub cho Trang GitHub, nhưng bạn cũng có thể sử dụng các công cụ như Firebase Hosting.

2. Sau khi triển khai ứng dụng, bạn phải 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 để Triển khai tiện ích bổ sung Meet. Việc làm theo hướng dẫn triển khai đó sẽ tạo ra tiện ích bổ sung Meet cuối cùng, là một iframe trong Meet của ứng dụng mà bạn đã triển khai ở bước một.

Chạy mẫu

1. Chuyển đến Meet.

2. Nhấp vào nút công cụ cho cuộc họp .

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 tiện ích đó để chạy.

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

Giờ đây, khi đã có một 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:

• Cộng tác bằng tiện ích bổ sung Meet
• Tin nhắn giữa sân khấu chính và bảng điều khiển bên
• Quảng bá tiện ích bổ sung

Bạn nên sử dụng các tiện ích bổ sung mẫu cho 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.