إنشاء اللوحة الجانبية وصفحات المرحلة الرئيسية

توضح هذه الصفحة كيفية إنشاء اللوحة الجانبية وصفحات المرحلة الرئيسية إضافة Meet للويب.

المرحلة الرئيسية واللوحة الجانبية لحزمة تطوير البرامج (SDK) الخاصة بإضافات Meet
المرحلة الرئيسية واللوحة الجانبية لتطبيق Meet على الويب إضافة.

تتوفّر "حزمة تطوير البرامج (SDK) للإضافات في Google Meet" على هيئة حزمة JavaScript من gstatic، وهو نطاق يعرض محتوى ثابتًا.

لاستخدام حزمة تطوير البرامج للإضافات في تطبيق Meet، أضِف علامة النص البرمجي التالية إلى تطبيقك:

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

تتوفّر وظيفة حزمة تطوير البرامج (SDK) للإضافات في Meet ضِمن "window.meet.addon". لعرض المستندات المرجعية، راجع المورد الملخص.

الإشارة إلى اكتمال تحميل الإضافة

يعرض تطبيق Meet شاشة تحميل بينما تحميل الإضافة. عندما جلسة عمل إضافية هي راسخ، يتعامل تطبيق Meet مع هذه المسألة كإشارة من أن اكتمال التحميل قد انتهى، وأن المستخدم التفاعل مع محتوى الطرف الثالث.

إنشاء صفحة لوحة جانبية

تعرض اللوحة الجانبية الإضافات المثبّتة التي تم تثبيتها التي يمكن تحديدها واستخدامها. بعد اختيار الإضافة، يحمّل إطار iframe جانبها. عنوان URL الخاص باللوحة المحدد في بيان الإضافة. ينبغي أن يكون هذا هو نقطة الدخول إلى تطبيقك. للوصول إلى وظائف حزمة تطوير البرامج للإضافات في تطبيق Meet في اللوحة الجانبية، يجب إنشاء مثيل sidePanelClient.

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

إليك مقتطف رمز يعرض كيفية بدء عمل تعاوني:

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

<head>
    <title>Side Panel Add-on</title>
<script src="https://www.gstatic.com/meetjs/addons/0.7.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-collaboration">
                    startCollaboration
                </button>
            </div>
            <div>
                Collaboration 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>
                Collaboration 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-collaboration')
                .addEventListener(
                    'click', async () => {
                        const sidePanelIframeUrlInputElement =
                            document.getElementById('sidePanelIframeUrl');
                        const mainStageIframeUrlInputElement =
                            document.getElementById('mainStageIframeUrl');
                        const additionalPropertyInputElement =
                            document.getElementById('additionalProperty');
                        await sidePanelClient.startCollaboration({
                            // 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>

إنشاء صفحة مرحلة رئيسية

المرحلة الرئيسية هي منطقة التركيز الرئيسية حيث يمكنك عرض الإضافة إذا كنت بحاجة إلى مساحة عمل أكبر. تفتح المرحلة الرئيسية بمجرد التعاون تبدأ. للوصول إلى وظيفة حزمة تطوير البرامج (SDK) للإضافات في تطبيق Meet في واجهة برمجة التطبيقات يمكنك استخدام كائن العميل MeetMainStageClient :

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

إليك مقتطف رمز يعرض مثالاً على عنصر الصفحة الرئيسية (mainStagePage.html في المقتطف السابق)، وتشمل مكالمة على getCollaborationStartingState ردًا على نقرة على أحد الأزرار:

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

<head>
    <title>Main Stage Add On</title>
    <script src="https://www.gstatic.com/meetjs/addons/0.7.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-collaboration-starting-state">
                    Get Collaboration Starting State's Additional Property
                </button>
            </div>
            <div id="receivedCollaborationStartingStateProperty"
                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-collaboration-starting-state')
                .addEventListener(
                    'click', async () => {
                        const startingState =
                            await mainStageClient.getCollaborationStartingState();
                        const startingStateData = JSON.parse(startingState.additionalData);
                        document.getElementById(
                            'receivedCollaborationStartingStateProperty').textContent =
                            startingStateData.additionalProperty;
                    });
        }
        document.body.onload = () => {
            init();
        };
    </script>
</body>

</html>