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

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

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

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

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

إذا كان مشروعك يستخدم 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 كمجموعة JavaScript من gstatic، وهو نطاق يعرض محتوى ثابتًا.

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

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

تتوفّر حزمة تطوير البرامج (SDK) لإضافات 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 مع IDE SDK لتطبيق Meet الإضافات:

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 على صفحات GitHub.

نشر إضافة Meet

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

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

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

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

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

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

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

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