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

איך יוצרים תוסף לאינטרנט באמצעות SDK לתוספים ל-Google Meet

במדריך הזה מוסבר איך ליצור תוסף באמצעות ה-SDK לתוספים לאינטרנט של Google Meet. כך תוכלו לשתף ולשתף פעולה באפליקציית אינטרנט בלי לצאת מ-Google Meet.

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

מטרות

במסוף Google Cloud אפשר ליצור ולפרוס 'SDK של תוספים ל-Meet באינטרנט'.
יוצרים במה ראשית וחלונית צדדית ל-SDK של תוספים ל-Meet באינטרנט.

הכנת הסביבה

בקטע הזה נסביר איך ליצור ולהגדיר פרויקט ב-Google Cloud עבור SDK של תוספים ל-Meet באינטרנט.

יצירת פרויקט של Google Cloud

מסוף Google Cloud

במסוף Google Cloud, נכנסים לתפריט > IAM & Admin > Create a Project.
כניסה לדף Create a Project
בשדה Project Name (שם הפרויקט), מזינים שם תיאורי לפרויקט.
אם רוצים לערוך את Project ID, לוחצים על Edit. לא ניתן לשנות את מזהה הפרויקט אחרי שיוצרים את הפרויקט, לכן כדאי לבחור מזהה שמתאים לצרכים שלכם לכל משך החיים של הפרויקט.
בשדה Location לוחצים על Browse כדי להציג את המיקומים הפוטנציאליים של הפרויקט. לאחר מכן לוחצים על בחירה.
זהירות: לא מצאת את הארגון שלך ב-Google Workspace?
המשמעות היא שלא נכנסתם לחשבון Google Workspace. חלק מהתכונות שמתוארות במסמכי התיעוד של Google Workspace למפתחים זמינות רק לפרויקטים שמשויכים לארגון.
לוחצים על יצירה. נכנסים לדף Dashboard במסוף Google Cloud ותוך כמה דקות נוצר הפרויקט.

‫CLI של gcloud

נכנסים ל-CLI של Google Cloud ('gcloud'): באחת מסביבות הפיתוח הבאות:

Cloud Shell: כדי להשתמש בטרמינל אונליין שבו כבר מוגדר ה-CLI של gcloud, צריך להפעיל את Cloud Shell.
הפעלת Cloud Shell
Local Shell: כדי להשתמש בסביבת פיתוח מקומית צריך להתקין וinitialize את ה-CLI של gcloud.
כדי ליצור פרויקט ב-Cloud, משתמשים בפקודה 'gcloud projects create':
```
gcloud projects create PROJECT_ID
```
מחליפים את PROJECT_ID על ידי הגדרת המזהה של הפרויקט שרוצים ליצור.

הפעלת ממשקי ה-API

המסוף

במסוף Google Cloud, מפעילים את Google Workspace Marketplace SDK ואת Google Workspace Add-ons API.

הפעלת ממשקי ה-API
מוודאים שאתם מפעילים את ממשקי ה-API בפרויקט הנכון ב-Cloud, ולוחצים על Next.
מוודאים שאתם מפעילים את ממשקי ה-API הנכונים ולוחצים על Enable (הפעלה).

‫CLI של gcloud

אם צריך, מגדירים את הפרויקט הנוכחי ב-Google Cloud לפרויקט שיצרתם באמצעות הפקודה gcloud config set project:
```
gcloud config set project PROJECT_ID
```
מחליפים את PROJECT_ID ב-Project ID של הפרויקט שיצרתם ב-Cloud.
מפעילים את Google Workspace Marketplace SDK ואת Google Workspace Add-ons API באמצעות הפקודה gcloud services enable:
```
gcloud services enable appsmarket-component.googleapis.com gsuiteaddons.googleapis.com
```

יצירה ופריסה של אפליקציית האינטרנט

בחלק הבא מעתיקים ומעדכנים פרויקט שלם של אפליקציית אינטרנט (שנבנה באמצעות Firebase) שמכיל את כל קוד האפליקציה שנדרש ל-Meet Add-ons SDK באינטרנט. תחילה צריך להגדיר את אפליקציית האינטרנט ולפרוס אותה.

בדיקת הקוד לדוגמה

תוכלו לראות ולהוריד את אפליקציית האינטרנט הבסיסית ב-GitHub.

הצגת הקוד ב-GitHub

סקירה כללית של קוד הבסיס:

היא נוצרה באמצעות Next.js, מסגרת מבוססת React.
העיצוב משתמש ב-CSS של Tailwind.
הערך src/components מכיל את רוב הלוגיקה של האפליקציה. אין כאן מה לעדכן או לשנות.
השדה src/firebase מכיל את הגדרות Firebase ואת קוד האתחול.
src/app מכיל את נקודות הכניסה לאפליקציית האינטרנט.
src/app/page.tsx הוא הדף הראשי או רשימת הפרויקטים.
src/app/project/[id]/page.tsx הוא הדף של פרויקט ספציפי ורשימת משימות.
.env מכיל את הגדרות הסביבה.

מגדירים את פרויקט Firebase ואת ה-CLI

Firebase היא פלטפורמה לפיתוח אפליקציות לנייד ולאינטרנט שעוזרת למפתחים לבנות אפליקציות. Firestore הוא מסד נתונים מסוג NoSQL לאחסון מסמכים שמאפשר למשתמשים לאחסן נתונים, לסנכרן אותם ולבצע שאילתות לגביהם עבור אפליקציות לנייד ולאינטרנט. ב-Firestore נאחסן את המידע על רשימת המשימות. האפליקציה משתמשת בתכונות של Firebase, ולכן צריך להגדיר את פרויקט Firebase יחד עם ה-CLI של Firebase. לשם כך:

יוצרים פרויקט Firebase.
יצירת מסד נתונים של Cloud Firestore.
מתקינים את ה-CLI של Firebase או מעדכנים לגרסה האחרונה שלו.
עוברים לספריית הבסיס של האפליקציה הבסיסית.
מפעילים את הפרויקט.

מקשרים את קובצי הפרויקט המקומיים אל פרויקט Firebase:
```
firebase init firestore
```
במהלך אתחול הפרויקט, מההנחיות של Firebase CLI:
1. יש לבחור אפשרות:
  
  בוחרים את האפשרות Use an existing project ואז בוחרים את פרויקט Firebase שיצרתם.
  
  פרויקט Firebase שנבחר הוא פרויקט Firebase 'ברירת המחדל' של ספריית הפרויקט המקומי.
2. באיזה קובץ יש להשתמש עבור כללי Firestore?
  
  אם מופיע (firestore.rules), מקישים על Enter. אם לא, מקלידים firestore.rules לפני שמקישים על Enter.
3. הקובץ Firestore.rules כבר קיים. האם ברצונך להחליף אותו בכללי Firestore ממסוף Firebase? (כן/לא)
  
  מקלידים "N" ומקישים על Enter.
4. באיזה קובץ צריך להשתמש ליצירת אינדקסים של Firestore?
  
  אם מופיע (firestore.indexes.json), מקישים על Enter. אם לא, מקלידים firestore.indexes.json לפני שמקישים על Enter.

מסד הנתונים של Firestore מוגדר ומוכן לשימוש עבור האפליקציה.

אימות Firebase עם Google

בשלב הבא, מפעילים את האימות אצל ספק Google. לשם כך:

נכנסים לדף Authentication במסוף Firebase.

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

יצירה של אפליקציית אינטרנט ב-Firebase

לסיום, יוצרים אפליקציית אינטרנט בתוך פרויקט Firebase ומקבלים את ההגדרה. לשם כך:

במסוף Firebase, רושמים את אפליקציית האינטרנט בפרויקט Firebase.
עוברים אל Project settings (הגדרות הפרויקט).
בקטע האפליקציות שלך, מאתרים את אפליקציית האינטרנט הרשומה ולוחצים עליה.
יש לרשום לפניך את הערכים שבfirebaseConfig. תוכלו להשתמש בהם בקטע הבא בעדכון משתני הסביבה.

איתור מספר הפרויקט ב-Google Cloud

פותחים את מסוף Google Cloud.

כניסה למסוף Google Cloud
ליד מסוף Google Cloud, לוחצים על החץ למטה ובוחרים את הפרויקט.
לחץ על סמל התפריט > סקירה כללית על Cloud.
בקטע Project Info, שימו לב לערך של Project number. בקטע הבא תוכלו לעדכן את משתני הסביבה.

עדכון של משתני הסביבה

בקובץ .env של קוד הבסיס, ממלאים את הפרטים הבאים שנאספו מהשלבים הקודמים:

NEXT_PUBLIC_GOOGLE_PROJECT_NUMBER=GOOGLE_PROJECT_NUMBER
NEXT_PUBLIC_GOOGLE_PROJECT_ID=PROJECT_ID
NEXT_PUBLIC_GOOGLE_API_KEY=API_KEY
NEXT_PUBLIC_GOOGLE_AUTH_DOMAIN=AUTH_DOMAIN
NEXT_PUBLIC_GOOGLE_STORAGE_BUCKET=STORAGE_BUCKET
NEXT_PUBLIC_GOOGLE_MSG_SENDER_ID=MSG_SENDER_ID
NEXT_PUBLIC_GOOGLE_APPID=APP_ID

מחליפים את הערכים הבאים באמצעות ערכי firebaseConfig ומספר הפרויקט שנאספו בשלבים הקודמים:

GOOGLE_PROJECT_NUMBER: מספר הפרויקט ב-Google Cloud
PROJECT_ID: projectId של אפליקציית האינטרנט של Firebase
API_KEY: apiKey של אפליקציית האינטרנט של Firebase
AUTH_DOMAIN: authDomain של אפליקציית האינטרנט של Firebase
STORAGE_BUCKET: storageBucket של אפליקציית האינטרנט של Firebase
MSG_SENDER_ID: messagingSenderId של אפליקציית האינטרנט של Firebase
APP_ID: appId של אפליקציית האינטרנט של Firebase

הגדרת פרטי הכניסה לאפליקציה

כדי להגדיר את פרטי הכניסה של אפליקציית Google:

נכנסים לדף Project settings (הגדרות הפרויקט) במסוף Firebase.

לדף Project settings
בכרטיסייה חשבון שירות, בוחרים בכרטיסייה Firebase Admin SDK.
לוחצים על Generate new key (יצירת מפתח פרטי חדש) ורושמים את הנתיב של קובץ ה-JSON שהורדתם.
בטרמינל, מריצים את הפקודה:
```
export GOOGLE_APPLICATION_CREDENTIALS="JSON_PATH"
```
מחליפים את JSON_PATH בנתיב שבו נמצא קובץ ה-JSON שהורדתם.

פריסה בשרת הפיתוח שלך

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

מריצים את הפקודה: npm install וממתינים לסיום ההורדה וההתקנה של המודולים של הצמתים.
מריצים את הפקודה: npm run dev.
נכנסים אל http://localhost:3000/ כדי לוודא שאפליקציית האינטרנט פועלת.

איך משתמשים ב-SDK של התוספים ל-Meet לאינטרנט

השלב הבא הוא לבצע את עדכוני הקוד הנדרשים כדי לשלב את הקוד ולהפוך אותו לתוסף של Google Meet. לשם כך:

יצירת הקובץ src/meet/meet.d.ts
1. תוכלו להוריד את הסוגים העדכניים ביותר בכתובת https://www.gstatic.com/meetjs/addons/0.7.0/index.d.ts ולשמור את הקובץ באופן מקומי.

יצירת הקובץ src/meet/utils.ts

מוסיפים את הפונקציה createAddonSession. כאן נקבע הסשן לצורך תקשורת ב-Google Meet.

export function createAddonSession() {
  let session;

  session = window.meet.addon.createAddonSession({
    cloudProjectNumber: `${process.env.NEXT_PUBLIC_GOOGLE_PROJECT_NUMBER}`,
  });
  return session;
}

יוצרים את הספרייה src/app/meet. זאת תהיה הספרייה הייעודית לכל המסלולים הספציפיים ל-Meet.

יצירת הקובץ src/app/meet/layout.tsx

הפריסה המשותפת לכל הדפים שקשורים ל-Meet. כאן מכניסים את הסקריפט של Meet SDK ומוודאים שה-SDK נטען לפני הרינדור של התוכן.

"use client";

import Script from "next/script";
import { useState } from "react";

type LayoutProps = {
  children: React.ReactNode;
};

/**
* Layout for the add-on pages. Injects the Meet SDK script.
*/
export default function RootLayout({ children }: LayoutProps) {
  const [sdkAvailable, setSdkAvailable] = useState(false);
  return (<>
  <Script
    src="https://www.gstatic.com/meetjs/addons/0.7.0/meet.addons.js"
    onReady={() => setSdkAvailable(true)}
  />
  {sdkAvailable ? children : <div>Loading...</div>}
  </>);
}

יצירת הקובץ src/app/meet/sidepanel/page.tsx

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

"use client";

import { firebaseApp } from "@/firebase/config";
import { getAuth } from "firebase/auth";
import { ProjectList } from "@/components/ProjectList";
import { createAddonSession } from "@/meet/utils";
import { DocumentReference } from "firebase/firestore";
import { useSearchParams } from "next/navigation";
import { useAuthState, useSignInWithGoogle } from "react-firebase-hooks/auth";
import GoogleButton from "react-google-button";

const auth = getAuth(firebaseApp);

async function startCollaboration(ref: DocumentReference) {
  const url = new URL(window.location.href);

  // Initializing session
  const session = await createAddonSession();
  const client = await session.createSidePanelClient();

  client.setCollaborationStartingState({
    mainStageUrl: `${url.protocol}//${url.host}/meet/project/${ref.id}`,
    sidePanelUrl: `${url.protocol}//${url.host}/meet/sidepanel?participant=true`,
  });
}

export default function Home() {
  const params = useSearchParams();
  const [user] = useAuthState(auth);
  const [signInWithGoogle] = useSignInWithGoogle(auth);

  const handleProjectSelect = async (ref: DocumentReference) => {
    // Before navigating, make sure project selection is saved
    // for when a shared activity is started.
    await startCollaboration(ref);
  };

  if (!user) {
    return (
      <GoogleButton
        onClick={() => signInWithGoogle()}
      ></GoogleButton>
    );
  }

  if (params.get("participant")) {
    return <div>You may now close this panel.</div>;
  }

  return (
    <div className="px-4">
      <ProjectList onSelect={handleProjectSelect} />
    </div>
  );
}

יצירת הקובץ src/app/meet/project/\[id\]/page.tsx

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

"use client";

import { Project } from "@/components/Project";
import { createAddonSession } from "@/meet/utils";
import { firebaseApp } from "@/firebase/config";
import { getAuth, User } from "firebase/auth";
import { useRouter } from "next/navigation";
import { useAuthState, useSignInWithGoogle } from "react-firebase-hooks/auth";
import GoogleButton from "react-google-button";

const auth = getAuth(firebaseApp);

// Monitor auth state changes.
if (typeof window !== "undefined") {
  auth.onAuthStateChanged(() => {
    onAuthStateSettled(auth.currentUser);
  });

  auth.authStateReady().then(() => {
    onAuthStateSettled(auth.currentUser);
  });
}

/**
* Check for auth & doc access when auth state changes.
*/
async function onAuthStateSettled(user: User | null | undefined) {
  const session = await createAddonSession();
  const client = await session.createMainStageClient();

  // For participants, side panel should be closed after authentication
  await client.unloadSidePanel();
}

type PageParams = {
  params: {
    id: string;
  };
};

  export default function Page({ params }: PageParams) {
  const router = useRouter();
  const [user, isUserLoading] = useAuthState(auth);

  if (window.meet.addon.getFrameType() === "MAIN_STAGE") {
    if (isUserLoading) {
      return <div>Loading...</div>;
    }
  }

  if (!user) {
    return (
        <GoogleButton
          onClick={() => signInWithGoogle()}
        ></GoogleButton>
      );
  }

  let backButton = null;
  if (window.meet.addon.getFrameType() === "SIDE_PANEL") {
    backButton = (
      <div className="px-2 pb-2 -my-2">
        <button className="flex flex-row" onClick={() => router.back()}>
          <span className="material-icons">arrow_back</span>previous screen
          <div className="sr-only">navigate back</div>
        </button>
      </div>
    );
  }

  return (
    <div className="w-full min-h-screen px-2">
      {backButton}
      <div className="flex flex-col min-h-screeen">
        <Project id={params.id} />
      </div>
    </div>
  );
}

יצירת פריסה

מגדירים את הפריסה של התוסף:

נכנסים ל-Google Workspace Add-ons API במסוף Google Cloud.

כניסה ל-Google Workspace Add-ons API
לוחצים על הכרטיסייה זמני ריצה חלופיים.
לוחצים על Create new deplment (יצירת פריסה חדשה) ומזינים את מזהה הפריסה של התוסף. מזהה הפריסה הוא מחרוזת שרירותית שעוזרת למפתח התוסף לזהות את הפריסה שמכילה את המניפסט של התוסף. מזהי פריסה הם חובה, והאורך המרבי שלהם הוא 100 תווים.
לוחצים על הבא.

תיפתח חלונית צדדית שבה תוכלו לשלוח את המפרט של המניפסט של התוסף בפורמט JSON. בחלונית הזו תוכלו להזין את הפרטים הבאים כקובץ המניפסט:

{
"addOns": {
  "common": {
    "name": "My First Meet Web Add-on",
    "logoUrl": "https://fonts.gstatic.com/s/i/googlematerialicons/markunread_mailbox/v6/black-24dp/1x/gm_markunread_mailbox_black_24dp.png"
  },
  "meet": {
    "web": {
      "sidePanelUri": "http://localhost:3000/meet/sidepanel",
      "addOnOrigins": ["http://localhost:3000"]
    }
  }
}
}

לוחצים על שליחה. אם התוסף נפרס בהצלחה, תופיע ההודעה הבאה: התוסף "ID" נוצר.
מאמתים את הפריסה בקטע פריסות בדף.

בדיקת ה-SDK של תוספים ל-Meet לאינטרנט

כדי לבדוק את ה-SDK המלא של תוספים ל-Meet באינטרנט, מריצים את Google Meet ומוודאים שהאפליקציה פועלת כצפוי. לשם כך:

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

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

הסרת המשאבים

על מנת לא לצבור חיובים לחשבון Google Cloud עבור המשאבים שבהם השתמשתם במדריך הזה, מומלץ למחוק את הפרויקט ב-Cloud.

זהירות: למחיקת פרויקט יש את ההשפעות הבאות:

התוכן של הפרויקט נמחק כולו. אם השתמשתם בפרויקט קיים למדריך הזה, כשתמחקו אותו תמחקו גם את כל העבודה שביצעתם באותו פרויקט.
מאבדים את מזהה הפרויקט בהתאמה אישית. כשיצרתם את הפרויקט הזה, יכול להיות שיצרתם מזהה פרויקט בהתאמה אישית שבו תרצו להשתמש בעתיד. כדי לשמור על כתובות ה-URL שמשתמשות במזהה הפרויקט, כמו כתובת URL באתר appspot.com, צריך למחוק את המשאבים שנבחרו בפרויקט אבל לא את הפרויקט כולו.

אם אתם מתכננים להיעזר בכמה מדריכים ומדריכים למתחילים, מומלץ להשתמש שוב באותו פרויקט כדי לא לחרוג ממכסות הפרויקטים.

במסוף Google Cloud, עוברים לדף Manage resources. לוחצים על תפריט > IAM ואדמין > ניהול משאבים.
כניסה למנהל המשאבים
ברשימת הפרויקטים, בוחרים את הפרויקט שרוצים למחוק ולוחצים על Delete .
כדי למחוק את הפרויקט, כותבים את מזהה הפרויקט בתיבת הדו-שיח ולוחצים על Shut down.

נושאים קשורים

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