البدء السريع لاستخدام "إضافات Meet"

يوضّح هذا الدليل كيفية إعداد نموذج إضافة Google Meet وتشغيله من خلال إنشاء مرحلة رئيسية ولوحة جانبية. تشير رسالة الأشكال البيانية "مرحبًا بالعالم" الأمثلة الموجودة في هذه الصفحة متوفرة أيضًا على GitHub على أنها كاملة إضافات Meet التي تم إنشاؤها باستخدام JavaScript الأساسي أو Next.js TypeScript.

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

تثبيت حزمة SDK واستيرادها

يمكنك الوصول إلى حزمة SDK باستخدام npm أو باستخدام gstatic.

إذا كان مشروعك يستخدم npm، يمكنك اتباع إرشادات حزمة npm لحزمة تطوير البرامج لإضافات Meet

أولاً، قم بتثبيت حزمة npm:

npm install @googleworkspace/meet-addons

بعد ذلك، تتوفّر حزمة SDK لـ "ملحقات Meet" من خلال استيراد واجهة MeetAddonExport :

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

بالنسبة إلى مستخدمي TypeScript، يتم تجميع تعريفات TypeScript مع الوحدة.

لغة gstatic

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

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

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

تتوفّر حزمة تطوير البرامج لإضافات Meet من خلال واجهة MeetAddon ضمن window.meet.addon.

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

تعرض اللوحة الجانبية الإضافات المثبّتة التي تم تثبيتها التي يمكن تحديدها واستخدامها. بعد اختيار الإضافة، تحمِّل div iframe عنوان URL للوحة الجانبية الذي تحدّده في بيان الإضافة. يجب أن تكون هذه هي نقطة دخول تطبيقك، ويجب أن تؤدي على الأقل إلى تنفيذ الخطوات التالية:

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

  2. أنشئ عميل اللوحة الجانبية. للوصول إلى حزمة تطوير البرامج (SDK) لـ "إضافات Meet" في اللوحة الجانبية، يجب إنشاء مثيل لواجهة MeetSidePanelClient . يتيح لك ذلك التحكّم في تجربة حِزم تطوير البرامج (SDK) الأساسية لإضافات Meet .

  3. ابدأ النشاط. يتيح ذلك للآخرين الانضمام إلى الإضافة وفتح الإضافة اختياريًا في المرحلة الرئيسية.

يوضّح نموذج الرمز البرمجي التالي كيفية إنشاء الجلسة لعميل اللوحة الجانبية، و كيفية بدء عميل اللوحة الجانبية لنشاط في المرحلة الرئيسية:

JavaScript الأساسية + 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>

ستحتاج أيضًا إلى تجميع حزمة تطوير البرامج (SDK) لـ "ملحقات 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 مخصّصة لقول "مرحبًا، عالم!":

لغة JavaScript + 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 جديدًا يستدعي الدالة الجديدة initializeMainStage ويعرض محتوى "مرحبًا، عالم" المخصّص:

<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 لعرض المرحلة الرئيسية. تنشئ هذه الصفحة جلسة تكميلية وعميلًا للوحة الجانبية عند التحميل، وتعرض محتوًى مخصّصًا من النوع "مرحبًا بالجميع":

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

تشغيل العيّنة

للتشغيل محليًا، يمكنك إجراء ما يلي:

JavaScript الأساسية + Webpack

شغِّل webpack لتجميع ملف main.js مع Meet Add-ons SDK:

npx webpack

افتح ملف SidePanel.html وملف MainStage.html في أي متصفح. من المفترض أن يبدو هذا الإجراء كما هو الحال عند نشر نموذج 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 على صفحات جيت هب.

نشر إضافة Meet

يمكنك إعداد عملية نشر الإضافة باتّباع تعليمات نشر إضافة Meet.

تشغيل العيّنة

  1. انتقِل إلى Meet.

  2. انقر على رمز الأنشطة رمز الأنشطة.

  3. في قسم الإضافات، من المفترض أن يظهر لك الإضافية. انقر عليه لتشغيل الإضافة.

إضافة المزيد من الميزات

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

ننصحك باستخدام نموذج إضافات Meet على GitHub. كمراجع لإنشاء هذه الميزات.