با استفاده از Google Meet Add-ons SDK یک افزونه برای وب بسازید

این آموزش نحوه ساخت یک افزونه با استفاده از کیت توسعه نرم افزار افزودنی Google Meet (SDK) برای وب را نشان می دهد. این به شما امکان می‌دهد بدون خروج از Google Meet در یک برنامه وب به اشتراک بگذارید و با آن همکاری کنید.

  • افزونه Meet Web در Google Meet.
    پانل کناری Meet Add-ons SDK for Web.
  • افزونه Meet Web در Google Meet.
    مرحله اصلی Meet Add-ons SDK برای وب که در آن کاربران با یکدیگر همکاری می کنند.

اهداف

  • ایجاد و استقرار Meet Add-ons SDK برای وب در کنسول Google Cloud.
  • یک مرحله اصلی و پانل جانبی برای Meet Add-ons SDK for Web ایجاد کنید.

محیط خود را آماده کنید

این بخش نحوه ایجاد و پیکربندی پروژه Google Cloud را برای Meet Add-ons SDK for Web نشان می‌دهد.

یک پروژه Google Cloud ایجاد کنید

کنسول Google Cloud

  1. در کنسول Google Cloud، به منو > IAM & Admin > ایجاد پروژه بروید.

    به Create a Project بروید

  2. در قسمت Project Name یک نام توصیفی برای پروژه خود وارد کنید.

    اختیاری: برای ویرایش شناسه پروژه ، روی ویرایش کلیک کنید. شناسه پروژه پس از ایجاد پروژه قابل تغییر نیست، بنابراین شناسه ای را انتخاب کنید که نیازهای شما را برای طول عمر پروژه برآورده کند.

  3. در قسمت Location ، روی Browse کلیک کنید تا مکان های احتمالی پروژه شما نمایش داده شود. سپس، روی انتخاب کلیک کنید.
  4. روی ایجاد کلیک کنید. کنسول Google Cloud به صفحه داشبورد می رود و پروژه شما در عرض چند دقیقه ایجاد می شود.

gcloud CLI

در یکی از محیط‌های توسعه زیر، به Google Cloud CLI («gcloud») دسترسی پیدا کنید:

  • Cloud Shell : برای استفاده از ترمینال آنلاین با Gcloud CLI که قبلاً راه اندازی شده است، Cloud Shell را فعال کنید.
    Cloud Shell را فعال کنید
  • Local Shell : برای استفاده از یک محیط توسعه محلی، gcloud CLI را نصب و مقداردهی اولیه کنید .
    برای ایجاد یک پروژه Cloud، از دستور 'gcloud projects create' استفاده کنید: 
    gcloud projects create PROJECT_ID
    با تنظیم ID برای پروژه ای که می خواهید ایجاد کنید، PROJECT_ID را جایگزین کنید.

API ها را فعال کنید

کنسول

  1. در کنسول Google Cloud، Google Workspace Marketplace SDK و Google Workspace Add-ons API را فعال کنید.

    API ها را فعال کنید

  2. تأیید کنید که APIها را در پروژه Cloud صحیح فعال می‌کنید، سپس روی Next کلیک کنید.

  3. تأیید کنید که API های صحیح را فعال می کنید، سپس روی فعال کردن کلیک کنید.

gcloud CLI

  1. در صورت لزوم، پروژه فعلی Google Cloud را روی پروژه ای که با دستور gcloud config set project ایجاد کرده اید، تنظیم کنید:

    gcloud config set project PROJECT_ID

    PROJECT_ID با Project ID پروژه Cloud که ایجاد کردید جایگزین کنید.

  2. 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 است.
  • از Tailwind CSS برای یک ظاهر طراحی شده استفاده می کند.
  • 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 به همراه Firebase CLI باید راه اندازی شود. برای انجام این:

  1. یک پروژه Firebase ایجاد کنید.

  2. یک پایگاه داده Cloud Firestore ایجاد کنید.

  3. Firebase CLI را نصب کنید یا به آخرین نسخه آن به روز کنید.

  4. به فهرست اصلی برنامه پایه خود بروید.

  5. پروژه خود را راه اندازی کنید

    فایل های پروژه محلی خود را به پروژه Firebase خود متصل کنید:

    firebase init firestore

    در طول اولیه سازی پروژه، از Firebase CLI درخواست می کند:

    1. یک گزینه را انتخاب کنید:

      Use an existing project انتخاب کنید و سپس پروژه Firebase را که ایجاد کردید انتخاب کنید.

      پروژه Firebase انتخاب شده پروژه Firebase "پیش فرض" شما برای فهرست پروژه محلی شما است.

    2. چه فایلی باید برای قوانین Firestore استفاده شود؟

      اگر (firestore.rules) نمایش داده شد، Enter را فشار دهید. اگر نه، قبل از اینکه Enter را فشار دهید، firestore.rules را تایپ کنید.

    3. فایل firestore.rules از قبل وجود دارد. آیا می خواهید آن را با قوانین Firestore از کنسول Firebase بازنویسی کنید؟ (Y/N)

      "N" را تایپ کرده و Enter را فشار دهید.

    4. چه فایلی باید برای ایندکس های Firestore استفاده شود؟

      اگر (firestore.indexes.json) نمایش داده شد، Enter را فشار دهید. اگر نه، firestore.indexes.json را قبل از فشار دادن Enter تایپ کنید.

پایگاه داده Firestore اکنون راه اندازی شده و آماده استفاده برای برنامه است.

Firebase را با Google احراز هویت کنید

در مرحله بعد، احراز هویت با ارائه دهنده Google را فعال کنید. برای انجام این:

  1. در کنسول Firebase، به صفحه Authentication بروید.

    به Firebase Authentication بروید

  2. اگر این اولین باری است که ارائه دهنده راه اندازی می کنید، روی تنظیم روش ورود به سیستم کلیک کنید. در غیر این صورت، روی افزودن ارائه دهنده جدید کلیک کنید.

  3. Google را انتخاب کنید و مطمئن شوید که وضعیت روی Enable تنظیم شده است.

یک برنامه وب در Firebase ایجاد کنید

در نهایت، یک برنامه وب در پروژه Firebase خود ایجاد کنید و پیکربندی را دریافت کنید. برای انجام این:

  1. در کنسول Firebase، برنامه وب خود را در پروژه Firebase خود ثبت کنید.

  2. به تنظیمات پروژه بروید.

  3. در برنامه های شما ، برنامه وب ثبت شده خود را پیدا کرده و روی آن کلیک کنید.

  4. به مقادیر موجود در firebaseConfig توجه کنید. در قسمت بعدی در به روز رسانی متغیرهای محیطی از آنها استفاده خواهید کرد.

شماره پروژه Google Cloud خود را پیدا کنید

  1. کنسول Google Cloud را باز کنید.

    به کنسول Google Cloud بروید

  2. در کنار کنسول Google Cloud ، روی پیکان روبه پایین کلیک کنید فلش کشویی و پروژه خود را انتخاب کنید.

  3. روی منو کلیک کنید نماد منو > نمای کلی ابر .

  4. در بخش اطلاعات پروژه ، به مقدار 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 خود، موارد زیر را انجام دهید:

  1. در کنسول Firebase، به صفحه تنظیمات پروژه بروید.

    به تنظیمات پروژه بروید

  2. در تب حساب‌های سرویس ، تب Firebase Admin SDK را انتخاب کنید.

  3. روی Generate new private key کلیک کنید و مسیر فایل JSON دانلود شده را یادداشت کنید.

  4. در ترمینال خود دستور را اجرا کنید:

    export GOOGLE_APPLICATION_CREDENTIALS="JSON_PATH"

    مسیری که فایل JSON دانلود شده در آن قرار دارد را جایگزین JSON_PATH کنید.

به سرور توسعه خود مستقر کنید

اکنون که کد و محیط موجود است، اکنون می توانید برنامه وب را در سرور توسعه محلی خود مستقر کنید. برای انجام این کار، به دایرکتوری برنامه وب خود بروید و موارد زیر را انجام دهید:

  1. دستور npm install را اجرا کنید و منتظر بمانید تا ماژول‌های نود دانلود و نصب شوند.

  2. دستور: npm run dev اجرا کنید.

  3. به http://localhost:3000/ بروید تا تأیید کنید که برنامه وب راه‌اندازی و اجرا می‌شود.

از Meet Add-ons SDK برای وب استفاده کنید

گام بعدی این است که کدهای لازم را به‌روزرسانی کنید تا کد را یکپارچه کنید و آن را به افزونه Google Meet تبدیل کنید. برای انجام این:

  1. فایل src/meet/meet.d.ts را ایجاد کنید

    1. می توانید جدیدترین انواع را از https://www.gstatic.com/meetjs/addons/0.7.0/index.d.ts دریافت کنید و فایل را به صورت محلی ذخیره کنید.

  2. فایل src/meet/utils.ts را ایجاد کنید

    1. تابع createAddonSession اضافه کنید. این همان جایی است که جلسه برای برقراری ارتباط در Google Meet ایجاد می شود.

      export function createAddonSession() {
  let session;

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

  3. دایرکتوری src/app/meet را ایجاد کنید. این به عنوان دایرکتوری اختصاصی برای همه مسیرهای ملاقات خاص عمل می کند.

  4. فایل src/app/meet/layout.tsx را ایجاد کنید

    1. طرح بندی مشترک برای همه صفحات مرتبط با 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>}
  </>);
}

  5. فایل src/app/meet/sidepanel/page.tsx را ایجاد کنید

    1. محتوای پانل جانبی برای افزودنی 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>
  );
}

  6. فایل src/app/meet/project/\[id\]/page.tsx را ایجاد کنید

    1. محتوای مرحله اصلی برای افزودنی 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>
  );
}

یک استقرار ایجاد کنید

راه اندازی افزونه را تنظیم کنید:

  1. در کنسول Google Cloud، به Google Workspace Add-ons API بروید.

    به Google Workspace Add-ons API بروید

  2. روی تب Alternate Runtimes کلیک کنید.

  3. روی Create new Deployment کلیک کنید و شناسه استقرار افزونه را وارد کنید. شناسه استقرار یک رشته دلخواه است که به توسعه دهنده افزونه کمک می کند تا استقرار حاوی مانیفست الحاقی را شناسایی کند. شناسه های استقرار مورد نیاز هستند و حداکثر می توانند 100 کاراکتر داشته باشند.

  4. روی Next کلیک کنید.

  5. یک پانل جانبی برای شما باز می شود تا مشخصات مانیفست افزودنی را با فرمت 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"]
    }
  }
}
}

  6. روی ارسال کلیک کنید. اگر افزونه با موفقیت اجرا شود، پیام زیر باید ظاهر شود: Deployment "ID" ایجاد شد .

  7. استقرار را در بخش Deployments صفحه تأیید کنید.

Meet Add-ons SDK for Web را آزمایش کنید

برای آزمایش کامل Meet Add-ons SDK برای وب، Google Meet را اجرا کنید و تأیید کنید که برنامه همانطور که انتظار می‌رود کار می‌کند. برای انجام این:

  1. به Meet بروید و جلسه جدیدی را شروع کنید.
  2. روی Activities کلیک کنید.
  3. در بخش افزونه‌های شما ، باید افزونه My First Meet Web را ببینید. آن را انتخاب کنید تا افزونه اجرا شود.
  4. پس از اجرا شدن افزونه، پنل کناری باز می شود.
  5. با استفاده از حساب Google خود وارد برنامه شوید. پس از ورود به سیستم، روی پروژه جدید کلیک کنید.
  6. پروژه بدون عنوان ایجاد شده را انتخاب کنید.
  7. روی Start Activity در پانل کناری کلیک کنید.
  8. پس از شروع، پانل کناری بسته می شود و مرحله اصلی باز می شود.

این افزونه اکنون همانطور که انتظار می رود اجرا می شود، اما فقط برای کاربری که از طریق برنامه وارد شده است (مرحله 5). سایر شرکت‌کنندگانی که از طریق Meet به فعالیت می‌پیوندند، نمی‌توانند در برنامه همکاری کنند، زیرا نمی‌توانند همان جلسه را با کاربر اول به اشتراک بگذارند. برای به اشتراک گذاشتن محتوا با دیگران نیاز به پیاده سازی بیشتر (مانند مکانیزم به اشتراک گذاری توکن) وجود دارد.

پاک کردن

برای جلوگیری از تحمیل هزینه به حساب Google Cloud خود برای منابع استفاده شده در این آموزش، توصیه می کنیم پروژه Cloud را حذف کنید.

  1. در کنسول Google Cloud، به صفحه مدیریت منابع بروید. منو > IAM & Admin > Manage Resources کلیک کنید.

    به Resource Manager بروید

  2. در لیست پروژه، پروژه ای را که می خواهید حذف کنید انتخاب کنید و سپس روی حذف حذف کنید.
  3. در گفتگو، ID پروژه را تایپ کنید و سپس بر روی Shut down کلیک کنید تا پروژه حذف شود.