במדריך הזה מוסבר איך מגדירים ומפעילים דוגמה כדי להשתמש בתוסף Google Meet, יוצרים במה ראשית וחלונית צדדית. "שלום עולם" אפשר למצוא דוגמאות בדף הזה גם ב-GitHub תוספים ל-Meet שנוצרו באמצעות JavaScript בסיסי או Next.js TypeScript.
התקנה וייבוא של ה-SDK
אפשר לגשת ל-SDK באמצעות npm או באמצעות gstatic.
NPM (מומלץ)
אם בפרויקט שלכם נעשה שימוש ב-npm, תוכלו לפעול לפי ההוראות לחבילת ה-npm של Meet Add-ons SDK.
קודם כול, מתקינים את חבילת ה-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, צריך להוסיף את תג הסקריפט הבא app:
<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()לפני שהתוכן מסתיים בטעינה.יוצרים את לקוח החלונית הצדדית. כדי לגשת ל-SDK של תוספי Meet חלונית צדדית, חובה ליצור
MeetSidePanelClientגרפי. כך תוכלו לשלוט בחוויית השימוש העיקרית ב-SDK של Meet Add-ons.מתחילים את הפעילות. כך אנשים אחרים יוכלו להצטרף לתוסף, ואם רוצים, התוסף ייפתח בשלב הראשי.
דוגמת הקוד הבאה מראה איך הסשן יוצר לקוח חלונית צדדית, וגם האופן שבו לקוח החלונית הצדדית מתחיל פעילות בשלב הראשי:
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>
בנוסף, תצטרכו לארוז את ה-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 בהתאמה אישית כדי להציג את ההודעה "Hello, world!":
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 שמציגה את הכיתוב "hello, World" בהתאמה אישית content:
<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 כדי להציג את הבמה הראשית. הדף הזה יוצר
פעילות של תוספים ולקוח בחלונית צדדית בטעינה, וגם
מציג "שלום, עולם" מותאם אישית content:
'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.
הרצת הדוגמה
כדי להריץ את הקוד באופן מקומי:
JS בסיסי + Webpack
מריצים את ה-webpack כדי לקבץ את הקובץ main.js יחד עם
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.
הרצת הדוגמה
נכנסים ל-Meet.
לוחצים על פעילויות
.בקטע התוספים שלך אתם אמורים לראות את יש לבחור באפשרות הזו כדי להריץ את
הוספת עוד תכונות
עכשיו שיש לך חלונית צדדית בסיסית ובמה ראשית, אפשר להתחיל להוסיף עוד תוסף:
אנחנו ממליצים לך להשתמש בתוספים לדוגמה של Meet ב-GitHub כחומר עזר לבניית התכונות האלה.