Membuat add-on untuk Web menggunakan Add-on SDK Google Meet

Tutorial ini menunjukkan cara membuat add-on menggunakan Software Development Kit (SDK) Add-on Google Meet untuk Web. Hal ini memungkinkan Anda berbagi dan berkolaborasi dalam aplikasi web tanpa keluar dari Google Meet.

• 

  Panel samping Meet Add-ons SDK untuk Web.

• 
  Tahap utama Add-on SDK Meet untuk Web tempat pengguna berkolaborasi.

Tujuan

• Buat dan deploy SDK Add-on Meet untuk Web di Konsol Google Cloud.
• Buat panggung utama dan panel samping untuk Meet Add-ons SDK untuk Web.

Menyiapkan lingkungan Anda

Bagian ini menunjukkan cara membuat dan mengonfigurasi project Google Cloud untuk SDK Add-on Meet untuk Web.

Membuat project Google Cloud

Konsol Google Cloud

1. Di konsol Google Cloud, buka Menu > IAM & Admin > Create a Project.

   Buka Create a Project

2. Di kolom Project Name, masukkan nama deskriptif untuk project Anda.

   Opsional: Untuk mengedit ID Project, klik Edit. Project ID tidak dapat diubah setelah project dibuat. Jadi, pilih ID yang sesuai dengan kebutuhan Anda sepanjang waktu project tersebut.

3. Di kolom Location, klik Browse untuk menampilkan lokasi potensial project. Kemudian, klik Select.
   Perhatian: Tidak dapat menemukan organisasi Google Workspace Anda?
   Ini berarti Anda tidak login ke akun Google Workspace. Beberapa fitur yang dijelaskan dalam dokumentasi developer Google Workspace hanya tersedia untuk project yang terkait dengan organisasi.
4. Klik Create. Konsol Google Cloud akan membuka halaman Dashboard dan project Anda akan dibuat dalam beberapa menit.

gcloud CLI

Di salah satu lingkungan pengembangan berikut, akses Google Cloud CLI (`gcloud`):

• Cloud Shell: Untuk menggunakan terminal online dengan gcloud CLI yang sudah disiapkan, aktifkan Cloud Shell.
  Mengaktifkan Cloud Shell
• Local Shell: Untuk menggunakan lingkungan pengembangan lokal, instal dan initialize gcloud CLI.
  Untuk membuat project Cloud, gunakan perintah `gcloud projects create`:

  gcloud projects create PROJECT_ID

  Ganti PROJECT_ID dengan menetapkan ID project yang ingin Anda buat.

Mengaktifkan API

Konsol

1. Di konsol Google Cloud, aktifkan Google Workspace Marketplace SDK dan Google Workspace Add-ons API.

   Aktifkan API

2. Pastikan Anda mengaktifkan API di project Cloud yang benar, lalu klik Next.

3. Pastikan Anda mengaktifkan API yang benar, lalu klik Enable.

gcloud CLI

1. Jika perlu, tetapkan project Google Cloud saat ini ke project yang Anda buat menggunakan perintah gcloud config set project:

   gcloud config set project PROJECT_ID
   

   Ganti PROJECT_ID dengan Project ID dari project Cloud yang Anda buat.

2. Aktifkan Google Workspace Marketplace SDK dan Google Workspace Add-ons API dengan perintah gcloud services enable:

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

Membuat dan men-deploy aplikasi web

Di bagian berikut, Anda akan menyalin dan memperbarui seluruh project aplikasi web (dibangun menggunakan Firebase) yang berisi semua kode aplikasi yang diperlukan untuk SDK Add-on Meet untuk Web. Pertama, Anda harus mengonfigurasi dan men-deploy aplikasi web.

Meninjau kode contoh

Anda dapat melihat dan mendownload aplikasi web dasar di GitHub.

Lihat di GitHub

Berikut ini ringkasan kode dasar:

• Versi ini dibuat menggunakan Next.js yang merupakan framework berbasis React.
• Desain ini menggunakan CSS Tailwind untuk gaya visual.
• src/components berisi sejumlah logika aplikasi. Tidak ada apa pun yang perlu diperbarui atau diubah di sini.
• src/firebase berisi kode inisialisasi dan konfigurasi Firebase.
• src/app berisi titik entri aplikasi web.
• src/app/page.tsx adalah halaman utama atau daftar project.
• src/app/project/[id]/page.tsx adalah halaman untuk masing-masing project dan daftar tugas.
• .env berisi konfigurasi lingkungan.

Menyiapkan project Firebase dan CLI

Firebase adalah platform pengembangan aplikasi seluler dan web yang membantu developer membangun aplikasi. Firestore adalah database dokumen NoSQL yang memungkinkan pengguna untuk menyimpan, menyinkronkan, dan membuat kueri data pada aplikasi seluler dan web. Firestore adalah tempat kita akan menyimpan informasi daftar tugas. Karena aplikasi ini akan menggunakan fitur Firebase, project Firebase bersama dengan Firebase CLI harus disiapkan. Untuk melakukannya:

1. Buat project Firebase.

2. Buat database Cloud Firestore.

3. Instal Firebase CLI atau update ke versi terbarunya.

4. Buka direktori utama aplikasi dasar Anda.

5. Inisialisasi project Anda.

   Hubungkan file project lokal ke project Firebase Anda:

   firebase init firestore

   Selama inisialisasi project, dari prompt Firebase CLI:

   1. Pilih opsi:

      Pilih Use an existing project, lalu pilih project Firebase yang Anda buat.

      Project Firebase yang dipilih adalah project Firebase "default" untuk direktori project lokal Anda.

   2. File apa yang harus digunakan untuk Aturan Firestore?

      Jika menampilkan (firestore.rules), tekan Enter. Jika tidak, ketik firestore.rules sebelum menekan Enter.

   3. File firestore.rules sudah ada. Anda ingin menimpanya dengan Aturan Firestore dari Firebase Console? (Y/T)

      Ketik "N" dan tekan Enter.

   4. File apa yang harus digunakan untuk indeks Firestore?

      Jika menampilkan (firestore.indexes.json), tekan Enter. Jika tidak, ketik firestore.indexes.json sebelum menekan Enter.

Database Firestore kini telah disiapkan dan siap digunakan untuk aplikasi.

Melakukan Autentikasi Firebase dengan Google

Selanjutnya, aktifkan autentikasi dengan penyedia Google. Untuk melakukannya:

1. Di Firebase console, buka halaman Authentication.

   Buka Firebase Authentication

2. Jika ini pertama kalinya Anda menyiapkan penyedia, klik Set up sign-in method. Jika tidak, klik Tambahkan penyedia baru.

3. Pilih Google dan pastikan statusnya disetel ke Enable.

Membuat aplikasi web di Firebase

Terakhir, buat aplikasi web di dalam project Firebase Anda dan dapatkan konfigurasinya. Untuk melakukannya:

1. Di Firebase console, daftarkan aplikasi web Anda di project Firebase.

2. Buka Project settings.

3. Di Aplikasi Anda, cari dan klik aplikasi web yang terdaftar.

4. Catat nilai di firebaseConfig. Anda akan menggunakannya di bagian berikut untuk mengupdate variabel lingkungan.

Menemukan nomor project Google Cloud

1. Buka konsol Google Cloud.

   Buka konsol Google Cloud

2. Di samping Konsol Google Cloud, klik Panah bawah , lalu pilih project Anda.

3. Klik Menu > Cloud Overview.

4. Di bagian Project Info, catat nilai Project number. Anda akan menggunakannya di bagian berikut untuk mengupdate variabel lingkungan.

Mengupdate variabel lingkungan

Dalam file .env kode dasar, isi data berikut dengan detail yang dikumpulkan dari langkah sebelumnya:

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

Ganti kode berikut menggunakan nilai firebaseConfig dan nomor project yang dikumpulkan di langkah sebelumnya:

• GOOGLE_PROJECT_NUMBER: nomor project project Google Cloud Anda
• PROJECT_ID: projectId aplikasi web Firebase Anda
• API_KEY: apiKey aplikasi web Firebase Anda
• AUTH_DOMAIN: authDomain aplikasi web Firebase Anda
• STORAGE_BUCKET: storageBucket aplikasi web Firebase Anda
• MSG_SENDER_ID: messagingSenderId aplikasi web Firebase Anda
• APP_ID: appId aplikasi web Firebase Anda

Menyiapkan kredensial aplikasi

Untuk menyiapkan kredensial aplikasi Google, lakukan hal berikut:

1. Di Firebase console, buka halaman Project settings.

   Buka Setelan project

2. Di tab Service accounts, pilih tab Firebase Admin SDK.

3. Klik Buat kunci pribadi baru dan catat jalur untuk file JSON yang didownload.

4. Di terminal Anda, jalankan perintah:

   export GOOGLE_APPLICATION_CREDENTIALS="JSON_PATH"
   

   Ganti JSON_PATH dengan jalur tempat file JSON yang didownload.

Men-deploy ke server pengembangan

Setelah kode dan lingkungan siap, Anda dapat men-deploy aplikasi web ke server pengembangan lokal. Untuk melakukannya, buka direktori aplikasi web Anda dan lakukan langkah berikut:

1. Jalankan perintah: npm install dan tunggu hingga modul node didownload dan diinstal.

2. Jalankan perintah: npm run dev.

3. Buka http://localhost:3000/ untuk memvalidasi bahwa aplikasi web sudah aktif dan berjalan.

Menggunakan Add-on SDK Meet untuk Web

Langkah berikutnya adalah membuat pembaruan kode yang diperlukan untuk mengintegrasikan kode dan menjadikannya Add-on Google Meet. Untuk melakukannya:

1. Membuat file src/meet/meet.d.ts

   1. Anda bisa mendapatkan jenis terbaru dari https://www.gstatic.com/meetjs/addons/0.7.0/index.d.ts dan menyimpan file secara lokal.

2. Membuat file src/meet/utils.ts

   1. Tambahkan fungsi createAddonSession. Di sinilah sesi ditetapkan untuk berkomunikasi dalam Google Meet.

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

3. Buat direktori src/app/meet. Hal ini akan berfungsi sebagai direktori khusus untuk semua rute khusus meet.

4. Membuat file src/app/meet/layout.tsx

   1. Tata letak umum untuk semua halaman terkait Meet. Di sinilah Anda memasukkan skrip Meet SDK dan memastikan SDK dimuat sebelum merender konten apa pun.

      "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. Membuat file src/app/meet/sidepanel/page.tsx

   1. Konten panel samping untuk Add-on Meet. Halaman ini secara khusus menangani pemilihan konten dan menyetel status awal kolaborasi saat konten dipilih.

      "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. Membuat file src/app/meet/project/\[id\]/page.tsx

   1. Konten panggung utama untuk Add-on Meet. Panel ini menampilkan konten project yang dipilih dari panel samping.

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

Membuat deployment

Siapkan deployment add-on:

1. Di konsol Google Cloud, buka Google Workspace Add-ons API.

   Buka Google Workspace Add-ons API

2. Klik tab Runtime Alternatif.

3. Klik Create new deployment, lalu masukkan ID deployment add-on. ID deployment adalah string arbitrer yang membantu developer add-on mengidentifikasi deployment yang berisi manifes add-on. ID deployment wajib diisi dan dapat berisi maksimal 100 karakter.

4. Klik Next.

5. Panel samping akan terbuka agar Anda dapat mengirimkan spesifikasi manifes add-on dalam format JSON. Gunakan panel ini untuk memasukkan hal berikut sebagai file manifes:

   {
   "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. Klik Kirim. Jika add-on berhasil di-deploy, pesan berikut akan muncul: Deployment "ID" created.

7. Verifikasi deployment di bagian Deployment pada halaman.

Menguji Add-on SDK Meet untuk Web

Untuk menguji SDK Add-on Meet lengkap untuk Web, jalankan Google Meet dan pastikan aplikasi berfungsi seperti yang diharapkan. Untuk melakukannya:

1. Buka Meet dan mulai rapat baru.
2. Klik Aktivitas.
3. Di bagian Your add-on, Anda akan melihat Add-on Web Meet Pertama Saya. Pilih untuk menjalankan add-on.
4. Setelah add-on berjalan, panel samping akan terbuka.
5. Login ke aplikasi menggunakan Akun Google Anda. Setelah login, klik New Project.
6. Pilih Project Tanpa Judul yang telah dibuat.
7. Klik Start Activity di panel samping.
8. Setelah dimulai, panel samping akan ditutup dan panggung utama akan terbuka.

Add-on kini berjalan seperti yang diharapkan, tetapi hanya untuk pengguna yang login melalui aplikasi (Langkah 5). Peserta lain yang bergabung ke aktivitas melalui Meet tidak dapat berkolaborasi dalam aplikasi karena mereka tidak dapat berbagi sesi yang sama dengan pengguna pertama. Perlu implementasi lebih lanjut (seperti mekanisme berbagi token) untuk berbagi konten dengan orang lain.

Pembersihan

Agar tidak menimbulkan biaya pada akun Google Cloud Anda untuk resource yang digunakan dalam tutorial ini, sebaiknya hapus project Cloud.

Perhatian: Menghapus project memiliki efek berikut:

• Semua hal dalam project akan dihapus. Jika menggunakan project yang ada untuk tutorial ini, saat menghapusnya, Anda juga akan menghapus pekerjaan lain yang telah dilakukan dalam project tersebut.
• Project ID kustom akan hilang. Saat membuat project ini, Anda mungkin telah membuat project ID kustom yang masih ingin Anda gunakan pada masa mendatang. Untuk mempertahankan URL yang menggunakan project ID, seperti URL di appspot.com, hapus resource yang dipilih di dalam project, bukan menghapus seluruh project.

Jika Anda berencana mempelajari berbagai tutorial dan panduan memulai, menggunakan kembali project dapat membantu agar Anda tidak melampaui batas kuota project.

1. Pada Konsol Google Cloud, buka halaman Kelola resource Klik Menu > IAM & Admin > Manage Resources.

   Buka Resource Manager

2. Dalam daftar project, pilih project yang ingin Anda hapus, lalu klik Delete .
3. Pada dialog, ketik project ID, lalu klik Shut down untuk menghapus project.

Topik terkait

• Untuk mempelajari kolaborasi lebih lanjut, lihat Berkolaborasi menggunakan Add-on Meet.

• Untuk mempelajari berbagi layar lebih lanjut, lihat Mempromosikan add-on kepada pengguna melalui berbagi layar.