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

این صفحه نحوه ایجاد پانل جانبی و صفحات مرحله اصلی یک افزونه Meet Web را شرح می دهد.

صفحه اصلی و پانل جانبی Meet Add-ons SDK.
مرحله اصلی و پانل جانبی افزونه Meet Web.

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

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

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

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

npm install @googleworkspace/meet-addons

سپس، Meet Add-ons SDK با وارد کردن رابط MeetAddonExport در دسترس است:

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

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

gstatic

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

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

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

Meet Add-ons SDK از طریق رابط MeetAddon در زیر window.meet.addon در دسترس است.

نشان می دهد که بارگیری افزونه کامل شده است

هنگام بارگیری افزونه، Meet صفحه بارگیری را نشان می دهد. هنگامی که جلسه برافزا برقرار می‌شود، Meet این را به‌عنوان سیگنالی از برافزا تلقی می‌کند که بارگیری به پایان رسیده است و کاربر می‌تواند با محتوای شخص ثالث تعامل داشته باشد.

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

پانل کناری افزونه های نصب شده را نشان می دهد که می توانید انتخاب و استفاده کنید. هنگامی که برافزای خود را انتخاب می‌کنید، یک iframe URL پانل جانبی را که در مانیفست افزونه مشخص کرده‌اید بارگیری می‌کند. این باید نقطه ورود برنامه شما باشد. برای دسترسی به قابلیت Meet Add-ons SDK در پانل کناری، باید یک sidePanelClient نمونه‌سازی کنید.

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

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

در اینجا یک قطعه کد است که نحوه شروع یک فعالیت را نشان می دهد:

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

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

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

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

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

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

در اینجا یک قطعه کد است که نمونه‌ای از یک صفحه مرحله اصلی را نشان می‌دهد ( mainStagePage.html در قطعه قبلی)، و شامل فراخوانی به getActivityStartingState در پاسخ به کلیک روی دکمه است:

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

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