Trang này được dịch bởi Cloud Translation API.

Tạo tiện ích bổ sung cho web bằng SDK tiện ích bổ sung Google Meet

Bài viết này hướng dẫn cách tạo tiện ích bổ sung bằng Bộ phát triển phần mềm (SDK) tiện ích bổ sung Google Meet dành cho web. Việc này cho phép bạn chia sẻ và cộng tác trong một ứng dụng web mà không cần rời khỏi Google Meet.

Bảng điều khiển bên của SDK Tiện ích bổ sung của Meet dành cho web.
Giai đoạn chính của SDK Tiện ích bổ sung Meet dành cho web, nơi người dùng cộng tác.

Mục tiêu

Tạo và triển khai SDK tiện ích bổ sung của Meet dành cho web trong bảng điều khiển Google Cloud.
Tạo giai đoạn chính và bảng điều khiển bên cho SDK Tiện ích bổ sung Meet dành cho web.

Chuẩn bị môi trường

Phần này trình bày cách tạo và định cấu hình dự án Google Cloud cho SDK tiện ích bổ sung Meet dành cho web.

Tạo một dự án trên Google Cloud

Bảng điều khiển Google Cloud

Trong bảng điều khiển Google Cloud, hãy chuyển đến Trình đơn > IAM và Quản trị viên > Tạo dự án.
Chuyển đến trang Tạo dự án
Trong trường Tên dự án, hãy nhập tên mô tả cho dự án của bạn.
Không bắt buộc: Để chỉnh sửa Mã dự án, hãy nhấp vào Chỉnh sửa. Bạn không thể thay đổi mã dự án sau khi tạo dự án, vì vậy, hãy chọn một mã đáp ứng nhu cầu của bạn trong suốt vòng đời của dự án.
Trong trường Location (Vị trí), hãy nhấp vào Browse (Duyệt qua) để xem các vị trí tiềm năng cho dự án của bạn. Sau đó, hãy nhấp vào Chọn.
Thận trọng: Bạn không tìm thấy tổ chức Google Workspace của mình?
Điều này có nghĩa là bạn chưa đăng nhập vào tài khoản Google Workspace. Một số tính năng được mô tả trong tài liệu dành cho nhà phát triển Google Workspace chỉ dùng được cho các dự án liên kết với một tổ chức.
Nhấp vào Tạo. Bảng điều khiển của Google Cloud sẽ chuyển đến Trang tổng quan và dự án của bạn sẽ được tạo trong vòng vài phút.

Giao diện dòng lệnh (CLI) của gcloud

Trong một trong các môi trường phát triển sau đây, hãy truy cập vào Google Cloud CLI (`gcloud`):

Cloud Shell: Để sử dụng một thiết bị đầu cuối trực tuyến đã được thiết lập gcloud CLI, hãy kích hoạt Cloud Shell.
Kích hoạt Cloud Shell
Local Shell: Để sử dụng môi trường phát triển cục bộ, hãy cài đặt và initialize gcloud CLI.
Để tạo một dự án trên Google Cloud, hãy dùng lệnh "gcloud project create" (tạo dự án gcloud):
```
gcloud projects create PROJECT_ID
```
Thay thế PROJECT_ID bằng cách đặt mã nhận dạng cho dự án mà bạn muốn tạo.

Bật API

Giao diện dòng lệnh

Trong bảng điều khiển Google Cloud, hãy bật SDK Google Workspace Marketplace SDK và API Tiện ích bổ sung của Google Workspace.

Bật API
Xác nhận rằng bạn đang bật API trong đúng dự án Google Cloud, sau đó nhấp vào Next (Tiếp theo).
Xác nhận rằng bạn đang bật đúng API, sau đó nhấp vào Bật.

Giao diện dòng lệnh (CLI) của gcloud

Nếu cần, hãy đặt dự án hiện tại trên Google Cloud thành dự án mà bạn đã tạo bằng lệnh gcloud config set project:
```
gcloud config set project PROJECT_ID
```
Thay thế PROJECT_ID bằng Mã dự án của dự án Google Cloud bạn đã tạo.
Bật SDK Google Workspace Marketplace và API Tiện ích bổ sung của Google Workspace bằng lệnh gcloud services enable:
```
gcloud services enable appsmarket-component.googleapis.com gsuiteaddons.googleapis.com
```

Tạo và triển khai ứng dụng web

Trong phần sau, bạn sẽ sao chép và cập nhật toàn bộ dự án ứng dụng web (được tạo bằng Firebase) chứa tất cả mã xử lý ứng dụng cần thiết cho SDK tiện ích bổ sung cho Meet dành cho web. Trước tiên, bạn cần phải định cấu hình và triển khai ứng dụng web.

Xem xét mã mẫu

Bạn có thể xem và tải ứng dụng web cơ sở trên GitHub.

Xem trên GitHub

Dưới đây là tổng quan về mã cơ sở:

Thư viện này được tạo bằng Next.js, một khung dựa trên React.
Hộp cát về quyền riêng tư sử dụng Dịch vụ so sánh giá (CSS) của Tailwind để tạo kiểu.
src/components chứa phần lớn logic ứng dụng. Không có gì để cập nhật hay sửa đổi ở đây.
src/firebase chứa mã khởi chạy và cấu hình Firebase.
src/app chứa các điểm truy cập của ứng dụng web.
src/app/page.tsx là trang chính hoặc danh sách dự án.
src/app/project/[id]/page.tsx là các trang cho một dự án riêng lẻ và danh sách công việc.
.env chứa cấu hình môi trường.

Thiết lập dự án Firebase và CLI

Firebase là nền tảng phát triển ứng dụng web và dành cho thiết bị di động, giúp nhà phát triển xây dựng ứng dụng. Firestore là một cơ sở dữ liệu tài liệu NoSQL cho phép người dùng lưu trữ, đồng bộ hoá và truy vấn dữ liệu cho ứng dụng web và ứng dụng di động. Firestore là nơi chúng tôi lưu trữ thông tin về danh sách việc cần làm. Vì ứng dụng sẽ sử dụng các tính năng của Firebase, bạn nên thiết lập dự án Firebase cùng với Giao diện dòng lệnh (CLI) của Firebase. Để thực hiện việc này:

Tạo một dự án Firebase.
Tạo cơ sở dữ liệu Cloud Firestore.
Cài đặt Firebase CLI hoặc cập nhật lên phiên bản mới nhất.
Chuyển đến thư mục gốc của ứng dụng cơ sở.
Khởi động dự án của bạn.

Kết nối các tệp dự án cục bộ với dự án Firebase:
```
firebase init firestore
```
Trong quá trình khởi chạy dự án, từ lời nhắc Giao diện dòng lệnh (CLI) của Firebase:
1. Chọn phương án:
  
  Chọn Use an existing project rồi chọn dự án Firebase mà bạn đã tạo.
  
  Dự án Firebase đã chọn là dự án Firebase "mặc định" cho thư mục dự án cục bộ của bạn.
2. Bạn nên dùng tệp nào cho các quy tắc Firestore?
  
  Nếu màn hình hiển thị (firestore.rules), hãy nhấn phím Enter. Nếu không, hãy nhập firestore.rules trước khi bạn nhấn phím Enter.
3. Tệp Firestore.rules đã tồn tại. Bạn có muốn ghi đè lên quy tắc này bằng Quy tắc Firestore từ Bảng điều khiển của Firebase không? (Có/Không)
  
  Nhập "N" rồi nhấn phím Enter.
4. Nên dùng tệp nào cho các chỉ mục Firestore?
  
  Nếu màn hình hiển thị (firestore.indexes.json), hãy nhấn phím Enter. Nếu không, hãy nhập firestore.indexes.json trước khi bạn nhấn phím Enter.

Cơ sở dữ liệu Firestore hiện đã được thiết lập và sẵn sàng để sử dụng cho ứng dụng.

Xác thực Firebase bằng Google

Tiếp theo, hãy bật tính năng xác thực với nhà cung cấp của Google. Để thực hiện việc này:

Trong bảng điều khiển của Firebase, hãy chuyển đến trang Xác thực.

Chuyển đến trang Xác thực Firebase
Nếu đây là lần đầu tiên bạn thiết lập một nhà cung cấp, hãy nhấp vào Thiết lập phương thức đăng nhập. Nếu không, hãy nhấp vào Thêm nhà cung cấp mới.
Chọn Google và đảm bảo trạng thái được đặt thành Bật.

Tạo một ứng dụng web trong Firebase

Cuối cùng, hãy tạo một ứng dụng web bên trong dự án Firebase của bạn và lấy cấu hình. Để thực hiện việc này:

Trong bảng điều khiển của Firebase, hãy đăng ký ứng dụng web trong dự án Firebase của bạn.
Chuyển đến phần Cài đặt dự án.
Trong phần Ứng dụng của bạn, hãy tìm và nhấp vào ứng dụng web đã đăng ký.
Ghi lại các giá trị trong firebaseConfig. Bạn sẽ sử dụng chúng trong phần sau đây khi cập nhật các biến môi trường.

Tìm số dự án trên Google Cloud

Mở bảng điều khiển Google Cloud.

Truy cập vào bảng điều khiển Google Cloud
Bên cạnh Google Cloud Console, hãy nhấp vào biểu tượng Mũi tên xuống rồi chọn dự án của bạn.
Nhấp vào Trình đơn > Tổng quan về đám mây.
Trong phần Project Info (Thông tin dự án), hãy lưu ý giá trị của Project number (Số dự án). Bạn sẽ sử dụng công cụ này trong phần sau để cập nhật các biến môi trường.

Cập nhật các biến môi trường

Trong tệp .env của mã cơ sở, hãy điền thông tin chi tiết thu thập được từ các bước trước vào nội dung sau:

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

Thay thế các giá trị sau bằng cách sử dụng giá trị firebaseConfig và số dự án đã thu thập ở các bước trước:

GOOGLE_PROJECT_NUMBER: mã số dự án thuộc dự án Google Cloud của bạn
PROJECT_ID: projectId của ứng dụng web Firebase
API_KEY: apiKey của ứng dụng web Firebase
AUTH_DOMAIN: authDomain của ứng dụng web Firebase
STORAGE_BUCKET: storageBucket của ứng dụng web Firebase
MSG_SENDER_ID: messagingSenderId của ứng dụng web Firebase
APP_ID: appId của ứng dụng web Firebase

Thiết lập thông tin đăng nhập ứng dụng

Để thiết lập thông tin đăng nhập ứng dụng Google của bạn, hãy làm như sau:

Trong bảng điều khiển của Firebase, hãy chuyển đến trang Cài đặt dự án.

Chuyển đến phần Cài đặt dự án
Trong thẻ Tài khoản dịch vụ, hãy chọn thẻ SDK quản trị của Firebase.
Nhấp vào Generate new private key (Tạo khoá riêng tư mới) và ghi lại đường dẫn của tệp JSON đã tải xuống.
Trong dòng lệnh, hãy chạy lệnh:
```
export GOOGLE_APPLICATION_CREDENTIALS="JSON_PATH"
```
Thay thế JSON_PATH bằng đường dẫn nơi chứa tệp JSON đã tải xuống.

Triển khai cho máy chủ phát triển của bạn

Giờ đây, khi đã có mã và môi trường, bạn có thể triển khai ứng dụng web cho máy chủ phát triển cục bộ của mình. Để thực hiện việc này, hãy chuyển đến thư mục ứng dụng web của bạn và làm như sau:

Chạy lệnh: npm install rồi đợi các mô-đun nút tải xuống và cài đặt.
Chạy lệnh: npm run dev.
Chuyển đến http://localhost:3000/ để xác thực rằng ứng dụng web đang hoạt động và đang chạy.

Sử dụng SDK tiện ích bổ sung của Meet cho web

Bước tiếp theo là cập nhật mã theo yêu cầu để tích hợp mã và đặt mã đó làm tiện ích bổ sung cho Google Meet. Để thực hiện việc này:

Tạo tệp src/meet/meet.d.ts
1. Bạn có thể tải các loại mới nhất trên https://www.gstatic.com/meetjs/addons/0.7.0/index.d.ts rồi lưu tệp trên thiết bị.

Tạo tệp src/meet/utils.ts

Thêm hàm createAddonSession. Đây là nơi phiên được thiết lập để giao tiếp trong Google Meet.

export function createAddonSession() {
  let session;

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

Tạo thư mục src/app/meet. Thư mục này sẽ đóng vai trò là thư mục riêng cho tất cả các tuyến đường dành riêng cho Meet.

Tạo tệp src/app/meet/layout.tsx

Bố cục chung cho tất cả các trang liên quan đến Meet. Đây là nơi bạn chèn tập lệnh SDK Meet và đảm bảo SDK đã được tải trước khi hiển thị bất kỳ nội dung nào.

"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>}
  </>);
}

Tạo tệp src/app/meet/sidepanel/page.tsx

Nội dung bảng điều khiển bên của tiện ích bổ sung cho Meet. Trang này xử lý cụ thể việc lựa chọn nội dung và thiết lập trạng thái bắt đầu cộng tác khi nội dung được chọn.

"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>
  );
}

Tạo tệp src/app/meet/project/\[id\]/page.tsx

Nội dung giai đoạn chính của Tiện ích bổ sung Meet. Thành phần này sẽ hiển thị nội dung của dự án đã chọn trên bảng điều khiển bên.

"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>
  );
}

Tạo đợt triển khai

Thiết lập quá trình triển khai tiện ích bổ sung:

Trong bảng điều khiển Google Cloud, hãy chuyển đến Google Workspace Add-ons API (API Tiện ích bổ sung của Google Workspace).

Truy cập vào API Tiện ích bổ sung của Google Workspace
Nhấp vào thẻ replace Runtimes (Thời gian chạy thay thế).
Nhấp vào Create new deployment (Tạo tệp triển khai mới) rồi nhập mã triển khai của tiện ích bổ sung. Mã triển khai là một chuỗi tuỳ ý giúp nhà phát triển tiện ích bổ sung xác định lần triển khai có chứa tệp kê khai tiện ích bổ sung. Mã triển khai là bắt buộc và có thể có tối đa 100 ký tự.
Nhấp vào Tiếp theo.

Một bảng điều khiển bên sẽ mở ra để bạn gửi thông số kỹ thuật của tệp kê khai tiện ích bổ sung ở định dạng JSON. Sử dụng bảng điều khiển này để nhập các nội dung sau làm tệp kê khai:

{
"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"]
    }
  }
}
}

Nhấp vào Gửi. Nếu tiện ích bổ sung được triển khai thành công, thông báo sau sẽ xuất hiện: Đã tạo "ID" của tiện ích triển khai.
Xác minh việc triển khai trong phần Triển khai của trang.

Kiểm thử SDK tiện ích bổ sung của Meet dành cho web

Để kiểm thử SDK Tiện ích bổ sung Meet dành cho web hoàn chỉnh, hãy chạy Google Meet và xác minh rằng ứng dụng hoạt động như mong đợi. Để thực hiện việc này:

Chuyển đến Meet và bắt đầu một cuộc họp mới.
Nhấp vào Hoạt động.
Trong phần Tiện ích bổ sung của bạn, bạn sẽ thấy Tiện ích bổ sung đầu tiên cho Meet trên web. Hãy chọn mục đó để chạy tiện ích bổ sung.
Sau khi tiện ích bổ sung chạy, bảng điều khiển bên sẽ mở ra.
Đăng nhập vào ứng dụng bằng Tài khoản Google của bạn. Sau khi đăng nhập, hãy nhấp vào New Project (Dự án mới).
Chọn Không có tiêu đề dự án đã được tạo.
Nhấp vào Bắt đầu hoạt động trên bảng điều khiển bên.
Sau khi bắt đầu, bảng điều khiển bên sẽ đóng và giai đoạn chính sẽ mở ra.

Tiện ích bổ sung này hiện chạy như dự kiến, nhưng chỉ dành cho người dùng đã đăng nhập thông qua ứng dụng (Bước 5). Những người tham gia khác tham gia hoạt động thông qua Meet sẽ không thể cộng tác trong ứng dụng vì họ không thể chia sẻ cùng một phiên hoạt động với người dùng đầu tiên. Bạn cần triển khai thêm (chẳng hạn như cơ chế chia sẻ mã thông báo) để chia sẻ nội dung với người khác.

Dọn dẹp

Để tài khoản Google Cloud của bạn không bị tính phí cho các tài nguyên dùng trong hướng dẫn này, bạn nên xoá dự án trên Google Cloud đó.

Thận trọng: Việc xoá dự án có các ảnh hưởng sau:

Mọi thứ trong dự án sẽ bị xoá. Nếu đã sử dụng một dự án hiện có cho phần hướng dẫn này, thì khi xoá dự án đó, bạn cũng xoá mọi công việc khác mà bạn đã thực hiện trong dự án đó.
Mã dự án tuỳ chỉnh bị mất. Khi tạo dự án này, có thể bạn đã tạo một mã dự án tuỳ chỉnh mà bạn sẽ muốn sử dụng trong tương lai. Để giữ lại các URL sử dụng mã dự án, chẳng hạn như URL trên appspot.com, hãy xoá các tài nguyên đã chọn trong dự án thay vì xoá toàn bộ dự án.

Nếu bạn định khám phá nhiều hướng dẫn và cách bắt đầu nhanh, thì việc sử dụng lại các dự án có thể giúp bạn tránh vượt quá hạn mức dự án.

Trong bảng điều khiển Google Cloud, hãy chuyển đến trang Quản lý tài nguyên. Nhấp vào biểu tượng Trình đơn > IAM & Admin (IAM và quản trị viên) > Quản lý tài nguyên.
Chuyển đến Trình quản lý tài nguyên
Trong danh sách dự án, hãy chọn dự án bạn muốn xoá rồi nhấp vào biểu tượng Xoá .
Trong hộp thoại, hãy nhập mã dự án rồi nhấp vào Shut Down (Tắt) để xoá dự án.

Chủ đề có liên quan

Để tìm hiểu thêm về tính năng cộng tác, hãy xem bài viết Cộng tác bằng tiện ích bổ sung của Meet.
Để tìm hiểu thêm về tính năng chia sẻ màn hình, hãy xem phần Quảng bá tiện ích bổ sung cho người dùng thông qua tính năng chia sẻ màn hình.