تمت ترجمة هذه الصفحة بواسطة Cloud Translation API‏.

إنشاء إضافة للويب باستخدام حزمة تطوير البرامج (SDK) لإضافات Google Meet

يوضّح هذا البرنامج التعليمي كيفية إنشاء إضافة باستخدام حزمة تطوير البرامج (SDK) الخاصة بإضافات Google Meet للويب. يتيح لك ذلك المشاركة والتعاون داخل تطبيق ويب بدون مغادرة Google Meet.

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

الأهداف

يمكنك إنشاء حزمة SDK لإضافات Meet للويب ونشرها في وحدة تحكُّم Google Cloud.
أنشِئ مرحلة رئيسية ولوحة جانبية لـ "حزمة تطوير البرامج (SDK)" لإضافات Meet للويب.

تجهيز البيئة

يوضّح هذا القسم كيفية إنشاء مشروع على Google Cloud وإعداده لتطبيق "SDK لإضافات Meet على الويب".

إنشاء مشروع على Google Cloud

وحدة تحكُّم Google Cloud

في Google Cloud Console، انتقِل إلى القائمة > إدارة الهوية وإمكانية الوصول والمشرف > إنشاء مشروع.
الانتقال إلى صفحة إنشاء مشروع
في حقل اسم المشروع، أدخِل اسمًا وصفيًا لمشروعك.
اختياري: لتعديل رقم تعريف المشروع، انقر على تعديل. لا يمكن تغيير رقم تعريف المشروع بعد إنشاء المشروع، لذا اختَر معرّفًا يفي باحتياجاتك طوال فترة المشروع.
في حقل الموقع الجغرافي، انقر على تصفّح لعرض المواقع الجغرافية المحتمَلة لمشروعك. بعد ذلك، انقر على اختيار.
تنبيه: ألا يمكنك العثور على مؤسستك في Google Workspace؟
يعني ذلك أنّك لم تسجّل الدخول إلى حساب Google Workspace. لا تتوفّر بعض الميزات الموضّحة في مستندات مطوّري برامج Google Workspace إلا للمشاريع المرتبطة بمؤسسة.
انقر على إنشاء. تنتقل وحدة التحكّم في Google Cloud إلى صفحة "لوحة البيانات" وسيتم إنشاء مشروعك في غضون بضع دقائق.

gcloud CLI

في إحدى بيئات التطوير التالية، يمكنك الوصول إلى واجهة سطر الأوامر في Google Cloud (`gcloud`):

Cloud Shell: لاستخدام وحدة طرفية على الإنترنت تم إعداد gcloud CLI عليها، فعِّل Cloud Shell.
تفعيل Cloud Shell
Local Shell: لاستخدام بيئة تطوير محلية، عليك تثبيت initialize gcloud CLI.
لإنشاء مشروع على السحابة الإلكترونية، استخدِم الأمر `gcloud project generate`:
```
gcloud projects create PROJECT_ID
```
استبدِل PROJECT_ID عن طريق ضبط رقم تعريف المشروع الذي تريد إنشاءه.

تفعيل واجهات برمجة التطبيقات

وحدة التحكّم

في Google Cloud Console، فعِّل حزمة تطوير البرامج (SDK) في Google Workspace Marketplace وواجهة برمجة تطبيقات إضافات Google Workspace.

تفعيل واجهات برمجة التطبيقات
تأكَّد من تفعيل واجهات برمجة التطبيقات في المشروع الصحيح على السحابة الإلكترونية، ثم انقر على التالي.
تأكّد من تفعيل واجهات برمجة التطبيقات الصحيحة، ثم انقر على تفعيل.

gcloud CLI

إذا لزم الأمر، اضبط مشروع Google Cloud الحالي على المشروع الذي أنشأته باستخدام الأمر gcloud config set project:
```
gcloud config set project PROJECT_ID
```
استبدِل PROJECT_ID برقم تعريف المشروع الخاص بمشروع Cloud الذي أنشأته.
تفعيل حزمة تطوير البرامج (SDK) في Google Workspace Marketplace وواجهة برمجة التطبيقات Google Workspace Add-ons API باستخدام الأمر gcloud services enable:
```
gcloud services enable appsmarket-component.googleapis.com gsuiteaddons.googleapis.com
```

إنشاء تطبيق الويب ونشره

في القسم التالي، سيتم نسخ وتعديل مشروع تطبيق الويب بالكامل (الذي تم إنشاؤه باستخدام Firebase) والذي يحتوي على كل رموز التطبيق المطلوبة لحزمة تطوير البرامج (SDK) الخاصة بإضافات Meet للويب. عليك أولاً ضبط تطبيق الويب ونشره.

مراجعة الرمز النموذجي

يمكنك عرض تطبيق الويب الأساسي وتنزيله من GitHub.

العرض على GitHub

في ما يلي نظرة عامة على الرمز الأساسي:

ويتم إنشاؤها باستخدام Next.js، وهي إطار عمل قائم على التفاعل.
وتستخدم أداة Tailwind CSS لتصميم الأنماط.
يحتوي src/components على الجزء الأكبر من منطق التطبيق. ما مِن عناصر مطلوب تعديلها أو تعديلها هنا.
يحتوي src/firebase على رمز الإعداد وإعداد Firebase.
يحتوي src/app على نقاط الدخول إلى تطبيق الويب.
src/app/page.tsx هي الصفحة الرئيسية أو قائمة المشاريع.
src/app/project/[id]/page.tsx هي الصفحة المخصصة لمشروع فردي وقائمة مهام.
يحتوي .env على إعدادات البيئة.

إعداد مشروع Firebase وواجهة سطر الأوامر

Firebase هي منصة لتطوير تطبيقات الويب والأجهزة الجوّالة تساعد المطوّرين في إنشاء التطبيقات. Firestore هي قاعدة بيانات مستندات NoSQL تسمح للمستخدمين بتخزين البيانات ومزامنتها والاستعلام عنها لتطبيقات الأجهزة المحمولة وتطبيقات الويب. Firestore هي المكان الذي سنقوم فيه بتخزين معلومات قائمة المهام. وبما أنّ التطبيق سيستخدم ميزات Firebase، يجب إعداد مشروع Firebase وواجهة سطر الأوامر في Firebase. لإجراء ذلك، يُرجى اتّباع الخطوات التالية:

أنشِئ مشروع Firebase.
أنشئ قاعدة بيانات Cloud Firestore.
ثبِّت واجهة سطر الأوامر في Firebase أو حدِّث إلى آخر إصدار منه.
انتقِل إلى الدليل الجذري لتطبيقك الأساسي.
قم بتهيئة مشروعك.

اربط ملفات مشروعك المحلي بمشروعك على Firebase:
```
firebase init firestore
```
أثناء إعداد المشروع، من طلبات واجهة سطر الأوامر في Firebase:
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. لإجراء ذلك، يُرجى اتّباع الخطوات التالية:

في "وحدة تحكُّم Firebase"، انتقِل إلى صفحة المصادقة.

الانتقال إلى مصادقة Firebase
إذا كانت هذه هي المرة الأولى التي تُعِدّ فيها مقدّم خدمة، انقر على إعداد طريقة تسجيل الدخول. إذا لم تكن مسجّلاً الدخول، انقر على إضافة مقدِّم خدمة جديد.
اختَر Google وتأكَّد من ضبط الحالة على تفعيل.

إنشاء تطبيق ويب في Firebase

أخيرًا، أنشِئ تطبيق ويب داخل مشروع Firebase واحصل على الإعدادات. لإجراء ذلك، يُرجى اتّباع الخطوات التالية:

في "وحدة تحكُّم Firebase"، سجِّل تطبيق الويب في مشروع Firebase.
انتقِل إلى إعدادات المشروع.
في تطبيقاتك، ابحث عن تطبيق الويب المسجَّل وانقر عليه.
دوِّن القيم الواردة في firebaseConfig. ستستخدمها في القسم التالي في تحديث متغيرات البيئة.

العثور على رقم مشروعك على Google Cloud

افتح وحدة التحكّم في Google Cloud.

الانتقال إلى Google Cloud Console
بجانب وحدة تحكُّم Google Cloud، انقر على السهم المتّجه للأسفل واختَر مشروعك.
انقر على رمز القائمة > نظرة عامة على السحابة الإلكترونية.
في قسم معلومات المشروع، دوِّن قيمة رقم المشروع. ستستخدمه في القسم التالي لتحديث متغيرات البيئة.

تعديل متغيرات البيئة

في ملف .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، اتّبِع الخطوات التالية:

في "وحدة تحكُّم Firebase"، انتقِل إلى صفحة إعدادات المشروع.

الانتقال إلى إعدادات المشروع
في علامة التبويب حسابات الخدمة، اختَر علامة التبويب SDK لمشرف Firebase.
انقر على إنشاء مفتاح خاص جديد ولاحظ مسار ملف 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 سيكون هذا بمثابة الدليل المخصص لجميع المسارات الخاصة بالاجتماع.

إنشاء الملف "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 Cloud Console، انتقِل إلى Google Workspace Add-ons API.

الانتقال إلى واجهة برمجة تطبيقات إضافات Google Workspace
انقر على علامة التبويب أوقات التشغيل البديلة.
انقر على إنشاء عملية نشر جديدة وأدخِل رقم تعريف نشر الإضافة. رقم تعريف النشر هو سلسلة عشوائية تساعد مطوّر الإضافة في التعرّف على عملية النشر التي تتضمّن بيان الإضافة. أرقام تعريف النشر مطلوبة ويمكن أن تحتوي على 100 حرف على الأكثر.
انقر على Next (التالي).

يتم فتح لوحة جانبية يمكنك من خلالها إرسال مواصفات بيان الإضافة بتنسيق 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"]
    }
  }
}
}

انقر على إرسال. في حال تفعيل الإضافة بنجاح، من المفترض أن تظهر الرسالة التالية: تم إنشاء "رقم تعريف" عملية النشر.
تحقَّق من عملية النشر ضِمن قسم عمليات النشر في الصفحة.

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

لاختبار حزمة تطوير البرامج (SDK) الكاملة لإضافات Meet للويب، يمكنك تشغيل Google Meet والتأكّد من أنّ التطبيق يعمل على النحو المتوقّع. لإجراء ذلك، يُرجى اتّباع الخطوات التالية:

انتقِل إلى Meet وابدأ اجتماعًا جديدًا.
انقر على الأنشطة.
في قسم الإضافات، ينبغي لك الاطّلاع على أول إضافة ويب على Meet. حدده لتشغيل الإضافة.
بعد تشغيل الإضافة، تفتح اللوحة الجانبية.
سجِّل الدخول إلى التطبيق باستخدام حسابك على Google. بعد تسجيل الدخول، انقر على مشروع جديد.
اختَر المشروع بلا عنوان الذي تم إنشاؤه.
انقر على بدء النشاط في اللوحة الجانبية.
بمجرد البدء، يتم إغلاق اللوحة الجانبية وتفتح المرحلة الرئيسية.

تعمل الإضافة الآن كما هو متوقع، ولكن فقط للمستخدم الذي سجّل الدخول من خلال التطبيق (الخطوة 5). لن يتمكن المشاركون الآخرون الذين ينضمون إلى النشاط من خلال Meet من التعاون داخل التطبيق لأنهم لا يمكنهم مشاركة الجلسة نفسها مع المستخدم الأول. هناك حاجة إلى تنفيذ المزيد من الإجراءات (مثل آلية مشاركة الرموز المميّزة) لمشاركة المحتوى مع الآخرين.

تَنظيم

لتجنّب دفع رسوم من حسابك على Google Cloud مقابل الموارد المستخدمة في هذا البرنامج التعليمي، ننصحك بحذف المشروع على Google Cloud.

تحذير: يؤدي حذف المشروع إلى ما يلي:

يتم حذف كل بيانات المشروع. إذا استخدمت مشروعًا حاليًا لهذا البرنامج التعليمي، سيتم حذف أي عمل آخر قمت به في المشروع عند حذفه.
يتم فقدان أرقام تعريف المشاريع المخصّصة. عند إنشاء هذا المشروع، ربما تكون قد أنشأت رقم تعريف مشروع مخصّصًا تريد استخدامه في المستقبل. للحفاظ على عناوين URL التي تستخدم رقم تعريف المشروع، مثل عنوان URL على appspot.com، احذف الموارد المحدَّدة داخل المشروع بدلاً من حذف المشروع بالكامل.

إذا كنت تخطط لاستكشاف العديد من البرامج التعليمية للبدء السريع، فيمكن أن تساعدك إعادة استخدام المشروعات في تجنب تجاوز حدود حصة المشروع.

في Google Cloud Console، انتقِل إلى صفحة إدارة الموارد. انقر على القائمة > إدارة الهوية وإمكانية الوصول والمشرف > إدارة الموارد.
الانتقال إلى "مدير الموارد"
في قائمة المشاريع، اختَر المشروع الذي تريد حذفه، ثم انقر على حذف .
في مربّع الحوار، اكتب معرّف المشروع، ثم انقر على إيقاف التشغيل لحذف المشروع.

إنشاء إضافة للويب باستخدام حزمة تطوير البرامج (SDK) لإضافات Google Meet

الأهداف

تجهيز البيئة

إنشاء مشروع على Google Cloud

وحدة تحكُّم Google Cloud

gcloud CLI

تفعيل واجهات برمجة التطبيقات

وحدة التحكّم

gcloud CLI

إنشاء تطبيق الويب ونشره

مراجعة الرمز النموذجي

إعداد مشروع Firebase وواجهة سطر الأوامر

مصادقة Firebase مع Google

إنشاء تطبيق ويب في Firebase

العثور على رقم مشروعك على Google Cloud

تعديل متغيرات البيئة

إعداد بيانات اعتماد التطبيق

النشر على خادم التطوير

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

إنشاء عملية نشر

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

تَنظيم

مواضيع ذات صلة