این صفحه به‌وسیله ‏Cloud Translation API‏ ترجمه شده است.

با شروع سریع افزونه ها آشنا شوید

این راهنما نحوه تنظیم و اجرای نمونه برافزای Google Meet را با ایجاد یک مرحله اصلی و پانل جانبی توضیح می‌دهد. نمونه‌های «Hello World» در این صفحه به‌عنوان افزونه‌های کامل Meet که با جاوا اسکریپت اولیه یا Next.js TypeScript ساخته شده‌اند، در GitHub نیز موجود است.

مرحله اصلی و پانل جانبی افزونه‌های Meet SDK. — مرحله اصلی و پانل جانبی افزونه Meet Web.

SDK را نصب و وارد کنید

با استفاده از npm یا gstatic می توانید به SDK دسترسی پیدا کنید.

npm (توصیه می شود)

اگر پروژه شما از npm استفاده می‌کند، می‌توانید دستورالعمل‌های بسته npm SDK افزونه‌های Meet را دنبال کنید.

ابتدا بسته npm را نصب کنید:

npm install @googleworkspace/meet-addons

سپس، SDK افزودنی Meet با وارد کردن رابط MeetAddonExport در دسترس است:

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

برای کاربران TypeScript، تعاریف TypeScript با ماژول بسته بندی می شود.

gstatic

SDK افزونه‌های Google Meet به‌عنوان یک بسته جاوا اسکریپت از gstatic در دسترس است، دامنه‌ای که محتوای ثابت را ارائه می‌کند.

برای استفاده از افزونه های Meet SDK، تگ اسکریپت زیر را به برنامه خود اضافه کنید:

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

SDK افزودنی Meet از طریق رابط MeetAddon در زیر window.meet.addon در دسترس است.

یک صفحه پانل کناری ایجاد کنید

پانل کناری افزونه های نصب شده را نشان می دهد که می توانید انتخاب و استفاده کنید. هنگامی که برافزای خود را انتخاب می‌کنید، یک iframe URL پانل جانبی را که در مانیفست افزونه مشخص کرده‌اید بارگیری می‌کند. این باید نقطه ورود برنامه شما باشد و حداقل باید کارهای زیر را انجام دهد:

نشان می دهد که بارگیری افزونه کامل شده است. هنگام بارگیری افزونه، Meet صفحه بارگیری را نشان می دهد. هنگامی که جلسه افزونه با فراخوانی متد createAddonSession () برقرار می‌شود، Meet این را به‌عنوان سیگنالی از برافزا در نظر می‌گیرد که بارگذاری به پایان رسیده است و کاربر می‌تواند با محتوای شخص ثالث تعامل داشته باشد. افزونه شما نباید متد createAddonSession() را فراخوانی کند تا زمانی که محتوای شما بارگیری شود.
کلاینت پنل جانبی را ایجاد کنید. برای دسترسی به SDK افزودنی Meet در پانل کناری، باید یک رابط MeetSidePanelClient نمونه‌سازی کنید. این امکان کنترل بر تجربه SDK اصلی افزونه‌های Meet شما را فراهم می‌کند.
فعالیت را شروع کنید. این به دیگران امکان می دهد به افزونه شما بپیوندند و به صورت اختیاری افزونه شما را در مرحله اصلی باز می کند.

نمونه کد زیر نشان می‌دهد که چگونه جلسه یک کلاینت پانل جانبی ایجاد می‌کند و چگونه مشتری پانل جانبی یک فعالیت را در مرحله اصلی شروع می‌کند:

پایه JS + Webpack

در یک فایل جدید به نام main.js ، تابعی را تعریف کنید که یک جلسه افزودنی ایجاد می کند، مشتری پانل جانبی، و با کلیک روی دکمه ای با شناسه '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
            });
        });
}

در یک فایل جدید به نام SidePanel.html ، دکمه‌ای را که فعالیت را راه‌اندازی می‌کند تعریف کنید و در بارگذاری سند، تابع را از main.js خود فراخوانی کنید:

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

همچنین باید کیت توسعه نرم افزاری افزودنی Meet را با main.js خود همراه کنید و آنها را در یک کتابخانه در معرض دید قرار دهید. توصیه می کنیم این کار را با نصب webpack و استفاده از گزینه library در فایل webpack.config.js خود انجام دهید:

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

Next.js

یک Page جدید برای نمایش پانل کناری اضافه کنید. این صفحه یک جلسه افزودنی و کلاینت پنل جانبی در بارگذاری ایجاد می کند و با کلیک روی یک دکمه فعالیت را شروع می کند:

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

موارد زیر را جایگزین کنید:

CLOUD_PROJECT_NUMBER : شماره پروژه پروژه Google Cloud شما.
MAIN_STAGE_URL : URL مرحله اصلی که در مرحله بعد ایجاد می کنید.

یک صفحه مرحله اصلی ایجاد کنید

مرحله اصلی، ناحیه تمرکز اصلی است که در صورت نیاز به فضای کاری بزرگتر، می توانید افزونه را نمایش دهید. مرحله اصلی پس از شروع فعالیت باز می شود. برای دسترسی به ویژگی‌های SDK افزونه‌های Meet در مرحله اصلی، باید از رابط MeetMainStageClient استفاده کنید.

نمونه کد زیر نمونه‌ای از صفحه مرحله اصلی را نشان می‌دهد که یک div سفارشی را برای گفتن "Hello, World!" ارائه می‌کند:

پایه JS + Webpack

تابع زیر را به فایل main.js که قبلاً ایجاد کرده اید اضافه کنید تا مرحله اصلی بتواند نشان دهد که بارگذاری به پایان رسیده است:

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

سپس، یک فایل MainStage.html جدید اضافه کنید، که تابع new initializeMainStage را فراخوانی می کند و محتوای سفارشی "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

یک Page برای نمایش مرحله اصلی اضافه کنید. این صفحه یک جلسه افزودنی و کلاینت پنل جانبی در بارگذاری ایجاد می‌کند و محتوای سفارشی «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>
        </>
    );
}

CLOUD_PROJECT_NUMBER با شماره پروژه پروژه Google Cloud خود جایگزین کنید.

نمونه را اجرا کنید

برای اجرای محلی، موارد زیر را انجام دهید:

پایه JS + Webpack

بسته وب را اجرا کنید تا فایل main.js خود را به همراه SDK افزودنی Meet جمع کنید:

npx webpack

فایل SidePanel.html و فایل MainStage.html خود را در هر مرورگری باز کنید. این باید شبیه به استقرار نمونه Basic JS در GitHub به SidePanel.html و MainStage.html در صفحات GitHub باشد.

Next.js

اجرای بعدی:

next dev

به http://localhost:3000/sidepanel یا http://localhost:3000/mainstage بروید. اینها باید شبیه به استقرار نمونه Next.js در GitHub به SidePanel.html و MainStage.html در صفحات GitHub باشند.

افزونه Meet را اجرا کنید

با دنبال کردن دستورالعمل‌های نحوه استقرار افزونه Meet، استقرار برافزا را تنظیم کنید.

نمونه را اجرا کنید

به ملاقات بروید.
روی Activities کلیک کنید .
در بخش افزونه های شما ، باید افزونه خود را ببینید. آن را انتخاب کنید تا افزونه اجرا شود.

اضافه کردن ویژگی های بیشتر

اکنون که یک پانل جانبی اولیه و مرحله اصلی دارید، می‌توانید اضافه کردن ویژگی‌های دیگر را به افزونه خود شروع کنید:

شما تشویق می‌شوید که از نمونه‌های افزودنی Meet در GitHub به عنوان مرجع برای ایجاد این ویژگی‌ها استفاده کنید.