Создайте надстройку для Интернета с помощью SDK надстроек Google Meet.

В этом руководстве показано, как создать надстройку с помощью пакета разработки программного обеспечения надстроек Google Meet (SDK) для Интернета. Это позволяет вам делиться информацией и сотрудничать в веб-приложении, не выходя из Google Meet.

  • Надстройка Meet Web в Google Meet.
    Боковая панель SDK дополнений Meet для Интернета.
  • Надстройка Meet Web в Google Meet.
    Основной этап SDK дополнений Meet для Интернета, на котором пользователи могут совместно работать.

Цели

  • Создайте и разверните SDK дополнений Meet для Интернета в консоли Google Cloud.
  • Создайте главную сцену и боковую панель для SDK дополнений Meet для Интернета.

Подготовьте свое окружение

В этом разделе показано, как создать и настроить проект Google Cloud для SDK дополнений Meet для Интернета.

Создайте проект Google Cloud

Консоль Google Cloud

  1. В консоли Google Cloud выберите > IAM и администрирование > Создать проект .

    Перейти к созданию проекта

  2. В поле «Имя проекта» введите описательное имя вашего проекта.

    Необязательно: Чтобы изменить идентификатор проекта , нажмите «Изменить» . Идентификатор проекта нельзя изменить после его создания, поэтому выберите идентификатор, который соответствует вашим потребностям на протяжении всего срока действия проекта.

  3. В поле «Местоположение» нажмите «Обзор» , чтобы отобразить возможные местоположения для вашего проекта. Затем нажмите «Выбрать» .
  4. Нажмите Создать . Консоль Google Cloud перейдет на страницу панели инструментов, и ваш проект будет создан в течение нескольких минут.

интерфейс командной строки gcloud

В одной из следующих сред разработки получите доступ к Google Cloud CLI («gcloud»):

  • Cloud Shell : чтобы использовать онлайн-терминал с уже настроенным интерфейсом командной строки gcloud, активируйте Cloud Shell.
    Активировать Cloud Shell
  • Локальная оболочка : чтобы использовать локальную среду разработки, установите и инициализируйте интерфейс командной строки gcloud.
    Чтобы создать облачный проект, используйте команду `gcloud Projects create`: 
    gcloud projects create PROJECT_ID
    Замените PROJECT_ID , указав идентификатор проекта, который вы хотите создать.

Включите API

Консоль

  1. В консоли Google Cloud включите SDK Google Workspace Marketplace и API надстроек Google Workspace.

    Включите API

  2. Убедитесь, что вы включаете API в правильном облачном проекте, затем нажмите «Далее» .

  3. Убедитесь, что вы включаете правильные API, затем нажмите «Включить» .

интерфейс командной строки gcloud

  1. При необходимости установите текущий проект Google Cloud на тот, который вы создали с помощью команды gcloud config set project :

    gcloud config set project PROJECT_ID

    Замените PROJECT_ID на идентификатор созданного вами облачного проекта.

  2. Включите SDK Google Workspace Marketplace и API надстроек Google Workspace с помощью команды gcloud services enable :

    gcloud services enable appsmarket-component.googleapis.com gsuiteaddons.googleapis.com

Создание и развертывание веб-приложения

В следующем разделе вы скопируете и обновите весь проект веб-приложения (созданный с помощью Firebase ), который содержит весь необходимый код приложения для вашего SDK надстроек Meet для Интернета. Сначала вам необходимо настроить и развернуть веб-приложение.

Просмотрите пример кода

Базовое веб-приложение можно просмотреть и загрузить на 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. Сделать это:

  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 . Если нет, введите firestore.rules прежде чем нажимать Enter .

    3. Файл firestore.rules уже существует. Хотите перезаписать его правилами Firestore из консоли Firebase? (Да/Нет)

      Введите «N» и нажмите Enter .

    4. Какой файл следует использовать для индексов Firestore?

      Если отображается (firestore.indexes.json) , нажмите Enter . Если нет, введите firestore.indexes.json прежде чем нажимать Enter .

База данных Firestore теперь настроена и готова к использованию в приложении.

Аутентификация Firebase с помощью Google

Затем включите аутентификацию у провайдера Google. Сделать это:

  1. В консоли Firebase перейдите на страницу аутентификации .

    Перейти к аутентификации Firebase

  2. Если вы впервые настраиваете провайдера, нажмите «Настроить метод входа» . В противном случае нажмите «Добавить нового поставщика» .

  3. Выберите Google и убедитесь, что для статуса установлено значение «Включить» .

Создайте веб-приложение в Firebase

Наконец, создайте веб-приложение внутри вашего проекта Firebase и получите конфигурацию. Сделать это:

  1. В консоли Firebase зарегистрируйте свое веб-приложение в проекте Firebase.

  2. Перейдите в настройки проекта.

  3. В разделе «Ваши приложения» найдите и щелкните зарегистрированное веб-приложение.

  4. Обратите внимание на значения в firebaseConfig . Вы будете использовать их в следующем разделе при обновлении переменных среды.

Найдите номер своего проекта Google Cloud

  1. Откройте консоль Google Cloud.

    Перейдите в консоль Google Cloud.

  2. Рядом с консолью Google Cloud нажмите стрелку вниз. стрелка вниз и выберите свой проект.

  3. Нажмите Меню значок меню > Обзор облака .

  4. В разделе «Информация о проекте» обратите внимание на значение номера проекта . Вы будете использовать его в следующем разделе для обновления переменных среды.

Обновите переменные среды

В файле .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. Нажмите «Создать новый закрытый ключ» и запишите путь к загруженному файлу JSON.

  4. В терминале выполните команду:

    export GOOGLE_APPLICATION_CREDENTIALS="JSON_PATH"

    Замените JSON_PATH на путь, по которому находится загруженный файл JSON.

Развертывание на вашем сервере разработки

Теперь, когда код и среда готовы, вы можете развернуть веб-приложение на локальном сервере разработки. Для этого перейдите в каталог вашего веб-приложения и выполните следующие действия:

  1. Запустите команду: npm install и дождитесь загрузки и установки модулей узла.

  2. Запустите команду: npm run dev .

  3. Перейдите по http://localhost:3000/ чтобы убедиться, что веб-приложение запущено и работает.

Использование SDK дополнений Meet для Интернета

Следующим шагом является внесение необходимых обновлений кода для его интеграции и превращения его в надстройку 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 перейдите к API надстроек Google Workspace .

    Перейдите к API надстроек Google Workspace.

  2. Откройте вкладку «Альтернативные среды выполнения» .

  3. Нажмите « Создать новое развертывание» и введите идентификатор развертывания надстройки. Идентификатор развертывания — это произвольная строка, которая помогает разработчику надстройки идентифицировать развертывание, содержащее манифест надстройки. Идентификаторы развертывания являются обязательными и могут содержать не более 100 символов.

  4. Нажмите "Далее .

  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. Нажмите «Отправить» . Если надстройка успешно развернута, должно появиться следующее сообщение: Создан идентификатор развертывания .

  7. Проверьте развертывание в разделе «Развертывания» на странице.

Тестирование SDK дополнений Meet для Интернета

Чтобы протестировать полный пакет SDK дополнений Meet для Интернета, запустите Google Meet и убедитесь, что приложение работает должным образом. Сделать это:

  1. Перейдите в Meet и начните новую встречу.
  2. Нажмите Действия .
  3. В разделе «Ваши надстройки» вы должны увидеть надстройку My First Meet Web . Выберите его, чтобы запустить дополнение.
  4. После запуска дополнения откроется боковая панель.
  5. Войдите в приложение, используя свою учетную запись Google. После входа в систему нажмите «Новый проект» .
  6. Выберите созданный проект без названия .
  7. Нажмите «Начать действие» на боковой панели.
  8. После запуска боковая панель закрывается и открывается основная сцена.

Надстройка теперь работает должным образом, но только для пользователя, вошедшего в систему через приложение (шаг 5). Другие участники, присоединяющиеся к действию через Meet, не смогут сотрудничать в приложении, поскольку они не могут использовать один и тот же сеанс с первым пользователем. Существует необходимость в дальнейшей реализации (например, механизме совместного использования токенов), чтобы делиться контентом с другими.

Очистить

Чтобы избежать списания средств с вашей учетной записи Google Cloud за ресурсы, используемые в этом руководстве, мы рекомендуем вам удалить проект Cloud.

  1. В консоли Google Cloud перейдите на страницу «Управление ресурсами» . > IAM и администрирование > Управление ресурсами .

    Зайдите в диспетчер ресурсов

  2. В списке проектов выберите проект, который хотите удалить, и нажмите « .
  3. В диалоговом окне введите идентификатор проекта и нажмите «Завершить работу» , чтобы удалить проект.