דף זה תורגם על ידי Cloud Translation API.

מדריך למתחילים בנושא תוספים ל-Meet

במדריך הזה מוסבר איך להגדיר ולהפעיל תוסף לדוגמה ל-Google Meet על ידי יצירת שלב ראשי ולוח צדדי. דוגמאות ה-Hello World בדף הזה זמינות גם ב-GitHub כתוספים מלאים ל-Meet שנבנו באמצעות JavaScript בסיסי או Next.js TypeScript.

השלב הראשי והחלונית הצדדית של Meet add-ons SDK. — הבמה הראשית והחלונית הצדדית של תוסף Meet לאינטרנט הוספת חברים

התקנה וייבוא של ה-SDK

אפשר לגשת ל-SDK באמצעות npm או באמצעות gstatic.

‫npm (מומלץ)

אם הפרויקט שלכם משתמש ב-npm, תוכלו לפעול לפי ההוראות ל חבילת ה-npm של Meet Add-ons SDK.

קודם כול, מתקינים את חבילת npm:

npm install @googleworkspace/meet-addons

לאחר מכן, אפשר לייבא את הממשק MeetAddonExport כדי להשתמש ב-SDK של תוספים ל-Meet:

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

למשתמשי TypeScript, הגדרות TypeScript נארזות עם המודול. משתמשי TypeScript צריכים להגדיר את moduleResolution ל-"bundler" בתוך tsconfig.json של הפרויקט, כדי שמפרט הייצוא של package.json יאפשר ייבוא של ייצוא חבילת שיתוף המסך.

gstatic

‫Google Meet add-ons SDK זמין כחבילת 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.

יצירת דף בחלונית הצדדית

בחלונית הצדדית מוצגים התוספים המותקנים שאתם יכולים לבחור ולהשתמש בהם. אחרי שבוחרים את התוסף, מתבצעת טעינה של iframe עם כתובת ה-URL של החלונית הצדדית שמצוינת במניפסט של התוסף. זו צריכה להיות נקודת הכניסה לאפליקציה, והיא צריכה לבצע לפחות את הפעולות הבאות:

מציינים שהטעינה של התוסף הסתיימה. בזמן הטעינה של התוסף, מוצג מסך טעינה ב-Meet. כשסשן התוסף נוצר על ידי קריאה לשיטה createAddonSession(), ‏ Meet מתייחס לזה כאות מהתוסף שטעינת התוכן הסתיימה, ושהמשתמש יכול לבצע אינטראקציה עם התוכן של הצד השלישי. התוסף לא צריך להפעיל את השיטה createAddonSession() עד שהתוכן סיים להיטען.
יוצרים את הלקוח של החלונית הצדדית. כדי לגשת ל-Meet add-ons SDK בחלונית הצדדית, צריך ליצור מופע של ממשק MeetSidePanelClient. כך תוכלו לשלוט בחוויה שלכם ב-SDK העיקרי של תוספים ל-Meet.
מתחילים את הפעילות. כך אנשים אחרים יכולים להצטרף לתוסף שלכם, ואם תרצו, התוסף ייפתח בחלון הראשי.

דוגמת הקוד הבאה מראה איך הסשן יוצר לקוח של חלונית צדדית, ואיך הלקוח של החלונית הצדדית מתחיל פעילות בשלב הראשי:

‫Basic JS + 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>

בנוסף, תצטרכו לארוז את Meet Add-ons SDK עם 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 של הבמה הראשית שיוצרים בשלב הבא.

יצירת דף של הבמה המרכזית

הבמה המרכזית היא אזור המיקוד העיקרי שבו אפשר להציג את התוסף אם נדרש מרחב עבודה גדול יותר. הבמה הראשית נפתחת כשהפעילות מתחילה. כדי לגשת לתכונות של Meet add-ons SDK בשלב הראשי, צריך להשתמש בממשק MeetMainStageClient.

בדוגמה הבאה של קוד מוצג דף של הבמה המרכזית שמעבד div מותאם אישית עם הטקסט 'Hello, world!':

‫Basic JS + 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.

הרצת הדוגמה

כדי להריץ באופן מקומי:

‫Basic JS + Webpack

מריצים את webpack כדי לארוז את קובץ main.js יחד עם Meet add-ons SDK:

npx webpack

פותחים את קובץ SidePanel.html ואת קובץ MainStage.html בדפדפן כלשהו. ההטמעה צריכה להיות זהה להטמעה של דוגמת ה-JS הבסיסית ב-GitHub ב-SidePanel.html וב-MainStage.html ב-GitHub Pages.

Next.js

הפעלה הבאה:

next dev

ניווט אל http://localhost:3000/sidepanel או אל http://localhost:3000/mainstage. הם צריכים להיות זהים לפריסה של הדוגמה של Next.js ב-GitHub אל SidePanel.html ו-MainStage.html ב-GitHub Pages.

פריסת התוסף ל-Meet

פריסת תוסף היא תהליך דו-שלבי:

קודם צריך לפרוס את הקוד מהמדריך הזה באתר שבבעלותכם, באמצעות פתרון פריסה כלשהו שאתם מעדיפים. תוספים לדוגמה של Google Meet שזמינים ב-GitHub נפרסים באמצעות תהליך עבודה ב-GitHub ב-GitHub Pages, אבל אפשר גם להשתמש בכלים כמו Firebase Hosting.
אחרי שמבצעים פריסה של האפליקציה, צריך להגדיר את הפריסה של התוסף לפי ההוראות לפריסת תוסף ל-Meet. המדריך הזה להטמעה יוצר את התוסף הסופי ל-Meet, שהוא iframe בתוך Meet של האפליקציה שהטמעתם בשלב הראשון.

הרצת הדוגמה

נכנסים ל-Meet.
לוחצים על לחצן כלי הפגישה .
בקטע התוספים שלך אמור להופיע התוסף. בוחרים אותו כדי להריץ את התוסף.

הוספת תכונות נוספות

עכשיו, כשיש לכם חלונית צדדית בסיסית ושלב ראשי, אתם יכולים להתחיל להוסיף תכונות אחרות לתוסף:

מומלץ להשתמש בתוספי Meet לדוגמה ב-GitHub כהפניות לבניית התכונות האלה.

מדריך למתחילים בנושא תוספים ל-Meet קל לארגן דפים בעזרת אוספים אפשר לשמור ולסווג תוכן על סמך ההעדפות שלך.

התקנה וייבוא של ה-SDK

‫npm (מומלץ)

gstatic

יצירת דף בחלונית הצדדית

‫Basic JS + Webpack

Next.js

יצירת דף של הבמה המרכזית

‫Basic JS + Webpack

Next.js

הרצת הדוגמה

‫Basic JS + Webpack

Next.js

פריסת התוסף ל-Meet

הרצת הדוגמה

הוספת תכונות נוספות

מדריך למתחילים בנושא תוספים ל-Meet