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

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

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

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

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

إذا كان مشروعك يستخدم npm، يمكنك اتّباع تعليمات حزمة npm لحزمة تطوير برامج Add-ons SDK في Meet.

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

npm install @googleworkspace/meet-addons

بعد ذلك، تتوفّر حزمة تطوير البرامج للإضافات في 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 مع 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 على صفحات GitHub.

نشر إضافة Meet

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

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

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

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

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

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

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

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