使用 Google Meet 外掛程式 SDK 打造網頁版外掛程式

本教學課程說明如何使用網頁版的 Google Meet 外掛程式軟體開發套件 (SDK) 建構外掛程式。如此一來，您無須離開 Google Meet，即可在網頁應用程式內分享及協同合作。

• 

  網頁版 Meet 外掛程式 SDK 的側邊面板。

• 
  網頁版 Meet 外掛程式 SDK 的主要階段，可讓使用者協同合作。

目標

• 在 Google Cloud 控制台中建立及部署網頁版的 Meet 外掛程式 SDK。
• 為 Meet 網頁版外掛程式建立主要階段和側邊面板。

準備環境

本節說明如何為 Meet 網頁版外掛程式 SDK 建立及設定 Google Cloud 專案。

建立 Google Cloud 專案

Google Cloud 控制台

1. 在 Google Cloud 控制台中，依序點選「選單」圖示 >「IAM 與管理」>「建立專案」。

   前往「Create a Project」(建立專案)

2. 在「Project Name」欄位中，輸入專案的描述性名稱。

   選用：如要編輯專案 ID，請按一下「Edit」。專案建立後即無法變更專案 ID，因此請在專案生命週期內選擇符合您需求的 ID。

3. 在「位置」欄位中，按一下「瀏覽」，查看專案的潛在位置。然後按一下「選取」。
   注意：找不到自己的 Google Workspace 機構嗎？
   這表示您並未登入 Google Workspace 帳戶。Google Workspace 開發人員說明文件中所述的部分功能僅適用於與機構相關聯的專案。
4. 點選「建立」。Google Cloud 控制台會前往「資訊主頁」頁面，並在幾分鐘內建立專案。

gcloud CLI

在下列其中一種開發環境中，存取 Google Cloud CLI (「gcloud)：

• Cloud Shell：如要在已設定 gcloud CLI 中使用線上終端機，請啟用 Cloud Shell。
  啟用 Cloud Shell
• 本機殼層：如要使用本機開發環境，請安裝並initialize gcloud CLI。
  如要建立 Cloud 專案，請使用「gcloud projects create」指令：

  gcloud projects create PROJECT_ID

  取代 PROJECT_ID，為要建立的專案設定 ID。

啟用 API

控制台

1. 在 Google Cloud 控制台中，啟用 Google Workspace Marketplace SDK 和 Google Workspace Add-ons API。

   啟用 API

2. 確認您在正確的 Cloud 專案中啟用 API，然後點選「Next」。

3. 確認您啟用的是正確的 API，然後按一下「啟用」。

gcloud CLI

1. 如有需要，請將目前的 Google Cloud 專案設為您使用 gcloud config set project 指令建立的專案：

   gcloud config set project PROJECT_ID
   

   將 PROJECT_ID 替換成您建立的 Cloud 專案的專案 ID。

2. 使用 gcloud services enable 指令啟用 Google Workspace Marketplace SDK 和 Google Workspace Add-ons API：

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

建立及部署網頁應用程式

在下一節中，您將複製並更新整個網頁應用程式專案 (使用 Firebase 建構)，其中包含適用於網頁版 Meet 外掛程式 SDK 的所有必要應用程式程式碼。首先，您必須設定及部署網頁應用程式。

查看程式碼範例

您可以在 GitHub 上查看及下載基本網頁應用程式。

前往 GitHub 查看

以下是基本程式碼的總覽：

• 它使用以 React 為基礎的架構 Next.js 建構。
• 並以 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 鍵。如果沒有，請先輸入 firestore.rules，再按下 Enter 鍵。

   3. 檔案 fistore.rules 已存在。是否要使用 Firebase 控制台中的 Firestore 規則覆寫 ID？(可/否)

      輸入「N」，然後按下 Enter 鍵。

   4. Firestore 索引應使用哪個檔案？

      如果畫面顯示 (firestore.indexes.json)，請按下 Enter 鍵。如果沒有，請先輸入 firestore.indexes.json，再按下 Enter 鍵。

Firestore 資料庫現已設定完成，可用於應用程式。

透過 Google 驗證 Firebase

接下來，透過 Google 供應商啟用驗證功能。 現在說明一下操作方式：

1. 前往 Firebase 控制台中的「驗證」頁面。

   前往 Firebase 驗證

2. 如果這是您第一次設定提供者，請按一下「Set up sign-in」方法。否則，請按一下「新增供應商」。

3. 選取「Google」，並確認狀態已設為「啟用」。

在 Firebase 中建立網頁應用程式

最後，在 Firebase 專案中建立網頁應用程式，並取得設定。現在說明一下操作方式：

1. 在 Firebase 控制台中，在 Firebase 專案中註冊網頁應用程式。

2. 前往「專案設定」。

3. 在「你的應用程式」中，找出並點選已註冊的網頁應用程式。

4. 請記下 firebaseConfig 中的值。您將在下一節更新環境變數。

找出 Google Cloud 專案編號

1. 開啟 Google Cloud 控制台。

   前往 Google Cloud 控制台

2. 按一下「Google Cloud Console」旁邊的向下箭頭 ，然後選取您的專案。

3. 依序點選「選單」圖示 >「Cloud 總覽」。

4. 在「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：Firebase 網頁應用程式的 projectId
• API_KEY：Firebase 網頁應用程式的 apiKey
• AUTH_DOMAIN：Firebase 網頁應用程式的 authDomain
• STORAGE_BUCKET：Firebase 網頁應用程式的 storageBucket
• MSG_SENDER_ID：Firebase 網頁應用程式的 messagingSenderId
• APP_ID：Firebase 網頁應用程式的 appId

設定應用程式憑證

如要設定 Google 應用程式憑證，請執行下列步驟：

1. 在 Firebase 控制台中，前往「專案設定」頁面。

   前往專案設定

2. 在「服務帳戶」分頁中，選取「Firebase Admin SDK」分頁標籤。

3. 按一下「Generate new private key」，然後記下所下載 JSON 檔案的路徑。

4. 在終端機中執行下列指令：

   export GOOGLE_APPLICATION_CREDENTIALS="JSON_PATH"
   

   將 JSON_PATH 替換為下載 JSON 檔案所在的路徑。

部署至開發伺服器

程式碼和環境已準備就緒，您現在可以將網頁應用程式部署至本機開發伺服器。方法是前往網頁應用程式目錄，然後執行下列操作：

1. 執行下列指令：npm install，然後等待節點模組下載並安裝。

2. 執行下列指令：npm run dev。

3. 前往 http://localhost:3000/ 驗證網頁應用程式是否已啟動且正在執行。

使用網頁版 Meet 外掛程式 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。這會做為所有 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>
        );
      }
      

建立 Deployment

設定外掛程式的部署作業：

1. 在 Google Cloud 控制台中，前往「Google Workspace Add-ons API」。

   前往 Google Workspace Add-ons API

2. 按一下「Alternative Runtimes」分頁標籤。

3. 按一下「Create new Deployment」，然後輸入外掛程式的部署作業 ID。部署 ID 是任意字串，可協助外掛程式開發人員識別包含外掛程式資訊清單的部署作業。必須提供部署 ID，長度上限為 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. 按一下「提交」。如果外掛程式部署成功，畫面上應該會顯示下列訊息：Deployment "ID" created。

7. 在頁面的「Deployments」部分底下驗證部署。

測試網頁版 Meet 外掛程式 SDK

如要測試完整的網頁版 Meet 外掛程式 SDK，請執行 Google Meet 並確認應用程式可正常運作。現在說明一下操作方式：

1. 前往 Meet 並發起新會議。
2. 按一下「活動」。
3. 在「您的外掛程式」部分中，您應該會看到 My First Meet Web 外掛程式。選取這個外掛程式來執行外掛程式。
4. 外掛程式執行後，側邊面板就會開啟。
5. 使用 Google 帳戶登入應用程式。登入後，按一下「New Project」。
6. 選取已建立的未命名專案。
7. 按一下側邊面板的「Start Activity」。
8. 啟動後，側邊面板就會關閉，主階段也會開啟。

外掛程式現在可正常運作，但僅適用於透過應用程式登入的使用者 (步驟 5)。其他透過 Meet 加入活動的參與者無法在應用程式中協同合作，因為他們無法與第一位使用者共用同一個工作階段。應用程式必須完成進一步的實作 (例如權杖共用機制)，才能與他人分享內容。

清除所用資源

如要避免系統向您的 Google Cloud 帳戶收取本教學課程中所用資源的費用，建議您刪除 Cloud 專案。

注意：刪除專案會出現以下結果：

• 專案中的所有內容都會遭到刪除。 若使用現有的專案進行教學課程，當您刪除專案時，也會一併刪除您在專案中完成的任何其他工作。
• 自訂專案 ID 會遺失。當您建立這項專案時，可能會建立一個日後想要使用的自訂專案 ID。如要保留使用該專案 ID 的網址，例如 appspot.com 上的網址，請刪除專案中所選資源，不要刪除整個專案。

如果打算進行多個教學課程和快速入門導覽課程，重複使用專案有助於避免超出專案配額限制。

1. 在 Google Cloud 控制台中，前往「Manage resources」(管理資源) 頁面。依序點選「Menu」圖示 >「IAM & Admin」>「管理資源」。

   前往 Resource Manager

2. 在專案清單中選取要刪除的專案，然後按一下「Delete」(刪除) 。
3. 在對話方塊中輸入專案 ID，然後按一下「Shut down」(關閉) 來刪除專案。

相關主題

• 如要進一步瞭解協同合作，請參閱「透過 Meet 外掛程式協同合作」。

• 如要進一步瞭解螢幕分享，請參閱「透過分享螢幕畫面功能向使用者宣傳外掛程式」。