Google Meet Eklentiler SDK'sını kullanarak web için eklenti oluşturma

Bu eğitim, Web için Google Meet Eklentileri Yazılım Geliştirme Kiti'ni (SDK) kullanarak eklentinin nasıl oluşturulacağını gösterir. Bu, Google Meet'ten ayrılmadan bir web uygulamasında paylaşımda bulunmanıza ve ortak çalışmanıza olanak tanır.

  • Google Meet'teki Meet web eklentisi.
    Web için Meet Eklentileri SDK'sının yan paneli.
  • Google Meet'teki Meet web eklentisi.
    Web için Meet Eklentileri SDK'sının kullanıcıların ortak çalıştığı ana aşaması.

Hedefler

  • Google Cloud Console'da Web için Meet Eklentileri SDK'sı oluşturup dağıtın.
  • Web için Meet Eklentileri SDK'sı için ana sahne ve yan panel oluşturun.

Ortamınızı hazırlayın

Bu bölümde, Web için Meet Eklentileri SDK'sının nasıl oluşturulacağı ve yapılandırılacağı açıklanmaktadır.

Google Cloud projesi oluşturma

Google Cloud Console

  1. Google Cloud konsolunda Menü > IAM ve Yönetici > Proje oluştur'a gidin.

    Proje Oluşturma bölümüne git

  2. Proje Adı alanına projeniz için açıklayıcı bir ad girin.

    İsteğe bağlı: Proje Kimliği'ni düzenlemek için Düzenle'yi tıklayın. Proje kimliği, proje oluşturulduktan sonra değiştirilemez. Bu nedenle, projenin ömrü boyunca ihtiyaçlarınızı karşılayan bir kimlik seçin.

  3. Konum alanında projeniz için potansiyel konumları görüntülemek üzere Göz at'ı tıklayın. Ardından Seç'i tıklayın.
  4. Oluştur'u tıklayın. Google Cloud Console, Kontrol Paneli sayfasına gider ve projeniz birkaç dakika içinde oluşturulur.

gcloud CLI

Aşağıdaki geliştirme ortamlarından birinde Google Cloud KSA'ya ("gcloud") erişin:

  • Cloud Shell: Halihazırda gcloud KSA bulunan bir online terminal kullanmak için Cloud Shell'i etkinleştirin.
    Cloud Shell'i etkinleştir
  • Yerel Kabuk: Yerel bir geliştirme ortamı kullanmak için gcloud KSA'yı yükleyin ve initialize.
    Bulut projesi oluşturmak için "gcloud projects create" komutunu kullanın: 
    gcloud projects create PROJECT_ID
    Oluşturmak istediğiniz projenin kimliğini ayarlayarak PROJECT_ID komutunu değiştirin.

API'leri etkinleştirme

Konsol

  1. Google Cloud konsolunda Google Workspace Marketplace SDK'sını ve Google Workspace Add-ons API'yi etkinleştirin.

    API'leri etkinleştirme

  2. API'leri doğru Cloud projesinde etkinleştirdiğinizi onaylayın ve İleri'yi tıklayın.

  3. Doğru API'leri etkinleştirmekte olduğunuzu onaylayın ve Etkinleştir'i tıklayın.

gcloud CLI

  1. Gerekirse mevcut Google Cloud projesini, gcloud config set project komutuyla oluşturduğunuz projeye ayarlayın:

    gcloud config set project PROJECT_ID

    PROJECT_ID kısmını, oluşturduğunuz Cloud projesinin Proje Kimliği ile değiştirin.

  2. gcloud services enable komutuyla Google Workspace Marketplace SDK'sını ve Google Workspace Add-ons API'yi etkinleştirin:

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

Web uygulamasını oluşturma ve dağıtma

Aşağıdaki bölümde, Web için Meet Eklentileri SDK'nız için gerekli tüm uygulama kodunu içeren bir web uygulaması projesinin (Firebase kullanılarak oluşturulan) tamamını kopyalayıp güncelleyeceksiniz. Öncelikle web uygulamasını yapılandırmanız ve dağıtmanız gerekir.

Örnek kodu inceleyin

Temel web uygulamasını GitHub'da görüntüleyebilir ve indirebilirsiniz.

GitHub'da göster

Temel kodla ilgili genel bakışı burada bulabilirsiniz:

  • React tabanlı bir çerçeve olan Next.js kullanılarak oluşturulur.
  • Stil oluşturmak için Tailwind CSS'sini kullanır.
  • src/components, uygulama mantığının büyük kısmını içerir. Burada güncellenecek veya değiştirilecek bir şey yok.
  • src/firebase, Firebase yapılandırmasını ve başlatma kodunu içerir.
  • src/app, web uygulaması giriş noktalarını içeriyor.
  • src/app/page.tsx, ana sayfa veya proje listesidir.
  • src/app/project/[id]/page.tsx, tek bir projenin ve görev listesinin sayfasıdır.
  • .env, ortam yapılandırmasını içerir.

Firebase projesini ve CLI'yı ayarlama

Firebase, geliştiricilerin uygulama geliştirmesine yardımcı olan bir mobil uygulama ve web uygulaması geliştirme platformudur. Firestore, kullanıcıların mobil uygulamalar ve web uygulamaları için verileri depolamasına, senkronize etmesine ve sorgulamasına olanak tanıyan bir NoSQL belge veritabanıdır. Firestore, yapılacaklar listesi bilgilerini depoladığımız yerdir. Uygulamada Firebase özellikleri kullanılacağından Firebase CLI ile birlikte Firebase projesi ayarlanmalıdır. Bunun için:

  1. Bir Firebase projesi oluşturun.

  2. Cloud Firestore veritabanı oluşturun.

  3. Firebase CLI'yı yükleyin veya en son sürümüne güncelleyin.

  4. Temel uygulamanızın kök dizinine gidin.

  5. Projenizi ilk kullanıma hazırlayın.

    Yerel proje dosyalarınızı Firebase projenize bağlayın: 

    firebase init firestore

    Proje başlatma sırasında Firebase CLI istemlerinden:

    1. Bir seçenek belirtin:

      Use an existing project seçeneğini belirleyin ve ardından oluşturduğunuz Firebase projesini seçin.

      Seçilen Firebase projesi, yerel proje dizininiz için "varsayılan" Firebase projenizdir.

    2. Firestore Kuralları için hangi dosya kullanılmalıdır?

      (firestore.rules) görüntüleniyorsa Enter tuşuna basın. Doğru değilse Enter tuşuna basmadan önce firestore.rules yazın.

    3. firestore.rules dosyası zaten var. Firebase Konsolu'ndaki Firestore Kurallarını kullanarak bunun üzerine yazmak ister misiniz? (E/H)

      "N" yazın ve Enter tuşuna basın.

    4. Firestore dizinleri için hangi dosya kullanılmalıdır?

      (firestore.indexes.json) görüntüleniyorsa Enter tuşuna basın. Doğru değilse Enter tuşuna basmadan önce firestore.indexes.json yazın.

Firestore veritabanı ayarlandı ve uygulama için kullanılmaya hazır.

Firebase'i Google ile Kimlik Doğrulama

Ardından Google sağlayıcısı ile kimlik doğrulamayı etkinleştirin. Bunun için:

  1. Firebase konsolunda Kimlik Doğrulama sayfasına gidin.

    Firebase Authentication'a gidin

  2. İlk kez bir sağlayıcı ayarlıyorsanız Oturum açma yöntemini ayarla'yı tıklayın. Aksi takdirde, Yeni sağlayıcı ekle'yi tıklayın.

  3. Google'ı seçin ve durumun Etkinleştir olarak ayarlandığından emin olun.

Firebase'de web uygulaması oluşturma

Son olarak, Firebase projenizin içinde bir web uygulaması oluşturun ve yapılandırmayı alın. Bunun için:

  1. Firebase konsolunda, web uygulamanızı Firebase projenize kaydedin.

  2. Proje ayarları'na gidin.

  3. Uygulamalarınız'da kayıtlı web uygulamanızı bulup tıklayın.

  4. firebaseConfig içindeki değerleri not edin. Bu değişkenleri, sonraki bölümde ortam değişkenlerini güncellerken kullanacaksınız.

Google Cloud proje numaranızı bulma

  1. Google Cloud konsolunu açın.

    Google Cloud Console'a git

  2. Google Cloud Console'un yanındaki Aşağı oku açılır ok tıklayın ve projenizi seçin.

  3. Menü menü simgesi > Cloud'a Genel Bakış'ı tıklayın.

  4. Proje Bilgileri bölümünde Proje numarasının değerini not edin. Aşağıdaki bölümde bu değişkeni ortam değişkenlerini güncellemek için kullanacaksınız.

Ortam değişkenlerini güncelleme

Temel kodun .env dosyasında, önceki adımlardan alınan ayrıntıları aşağıdaki alana girin:

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

Önceki adımlarda toplanan firebaseConfig değerlerini ve proje numarasını kullanarak aşağıdakileri değiştirin:

  • GOOGLE_PROJECT_NUMBER: Google Cloud projenizin numarası
  • PROJECT_ID: Firebase web uygulamanızın projectId
  • API_KEY: Firebase web uygulamanızın apiKey
  • AUTH_DOMAIN: Firebase web uygulamanızın authDomain
  • STORAGE_BUCKET: Firebase web uygulamanızın storageBucket
  • MSG_SENDER_ID: Firebase web uygulamanızın messagingSenderId
  • APP_ID: Firebase web uygulamanızın appId

Uygulama kimlik bilgilerinizi ayarlayın

Google uygulaması kimlik bilgilerinizi ayarlamak için aşağıdakileri yapın:

  1. Firebase konsolunda Proje ayarları sayfasına gidin.

    Proje ayarlarına git

  2. Hizmet hesapları sekmesinde Firebase Admin SDK sekmesini seçin.

  3. Yeni özel anahtar oluştur'u tıklayın ve indirilen JSON dosyasının yolunu not edin.

  4. Terminalinizde şu komutu çalıştırın:

    export GOOGLE_APPLICATION_CREDENTIALS="JSON_PATH"

    JSON_PATH yerine, indirilen JSON dosyasının bulunduğu yolu girin.

Geliştirme sunucunuza dağıtma

Kod ve ortam hazır olduğuna göre şimdi web uygulamasını yerel geliştirme sunucunuza dağıtabilirsiniz. Bunun için web uygulaması dizininize gidin ve aşağıdaki adımları uygulayın:

  1. npm install komutunu çalıştırın ve düğüm modüllerinin indirilip yüklenmesini bekleyin.

  2. Şu komutu çalıştırın: npm run dev.

  3. Web uygulamasının çalışır durumda olduğunu doğrulamak için http://localhost:3000/ adresine gidin.

Web için Meet Eklentileri SDK'sını kullanma

Bir sonraki adım, kodu entegre etmek ve Google Meet Eklentisi haline getirmek için gerekli kod güncellemelerini yapmaktır. Bunun için:

  1. src/meet/meet.d.ts dosyasını oluşturun

    1. En yeni türleri https://www.gstatic.com/meetjs/addons/0.7.0/index.d.ts adresinden alabilir ve dosyayı yerel olarak kaydedebilirsiniz.

  2. src/meet/utils.ts dosyasını oluşturun

    1. createAddonSession işlevini ekleyin. Oturum, Google Meet'te iletişim kurmak için burada oluşturulur.

      export function createAddonSession() {
  let session;

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

  3. src/app/meet dizinini oluşturun. Bu dizin, toplantıya özel tüm rotalar için özel bir dizin işlevi görür.

  4. src/app/meet/layout.tsx dosyasını oluşturun

    1. Meet ile ilgili tüm sayfalar için ortak düzen. Meet SDK komut dosyasını bu aşamada eklersiniz ve içeriği oluşturmadan önce SDK'nın yüklendiğinden emin olun.

      "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 dosyasını oluşturun

    1. Meet eklentisi için yan panel içeriği. Bu sayfa özel olarak içerik seçimini işler ve içerik seçildiğinde ortak çalışma başlangıç durumunu ayarlar.

      "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 dosyasını oluşturun

    1. Meet eklentisi için ana sahne içeriği. Seçilen projenin içeriklerini yan panelden gösterir.

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

Dağıtım oluşturun

Eklentinin dağıtımını ayarlayın:

  1. Google Cloud konsolunda Google Workspace Add-ons API'ye gidin.

    Google Workspace Add-ons API'ye git

  2. Alternatif Çalışma Zamanları sekmesini tıklayın.

  3. Yeni dağıtım oluştur'u tıklayın ve eklentinin dağıtım kimliğini girin. Dağıtım kimliği, eklenti geliştiricisinin eklenti manifestini içeren dağıtımı tanımlamasına yardımcı olan rastgele bir dizedir. Dağıtım kimlikleri gereklidir ve en fazla 100 karakterden oluşabilir.

  4. İleri'yi tıklayın.

  5. Eklenti manifestinin spesifikasyonunu JSON biçiminde göndermeniz için bir yan panel açılır. Manifest dosyanız olarak aşağıdakileri girmek için bu paneli kullanın:

    {
"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. Gönder'i tıklayın. Eklenti başarıyla dağıtıldıysa şu mesaj görünür: Deployment "ID" created.

  7. Dağıtımı, sayfanın Dağıtımlar bölümünde doğrulayın.

Web için Meet Eklentileri SDK'sını test etme

Web için Meet Eklentileri SDK'sının tamamını test etmek için Google Meet'i çalıştırın ve uygulamanın beklendiği gibi çalıştığını doğrulayın. Bunun için:

  1. Meet'e gidip yeni bir toplantı başlatın.
  2. Etkinlikler'i tıklayın.
  3. Eklentileriniz bölümünde, İlk Meet Web eklentim'i görürsünüz. Eklentiyi çalıştırmak için bu simgeyi seçin.
  4. Eklenti çalıştırıldığında yan panel açılır.
  5. Google Hesabınızı kullanarak uygulamada oturum açın. Oturum açtıktan sonra Yeni Proje'yi tıklayın.
  6. Oluşturulan Adsız Proje'yi seçin.
  7. Yan panelde Etkinliği Başlat'ı tıklayın.
  8. Başlatıldığında yan panel kapanır ve ana sahne açılır.

Eklenti artık beklendiği gibi çalışır, ancak bu yalnızca uygulama üzerinden oturum açan kullanıcı için geçerlidir (5. Adım). Etkinliğe Meet üzerinden katılan diğer katılımcılar aynı oturumu ilk kullanıcıyla paylaşamayacakları için uygulamada ortak çalışma yapamazlar. İçeriğin başkalarıyla paylaşılması için daha fazla uygulamaya (ör. jeton paylaşım mekanizması) ihtiyaç vardır.

Temizleme

Bu eğiticide kullanılan kaynaklar için Google Cloud hesabınızın ücretlendirilmesini istemiyorsanız Cloud projesini silmenizi öneririz.

  1. Google Cloud konsolunda Kaynakları yönetin sayfasına gidin. Menü > IAM ve Yönetici > Kaynakları Yönet'i tıklayın.

    Resource Manager'a git

  2. Proje listesinden silmek istediğiniz projeyi seçin ve Sil'i tıklayın.
  3. İletişim kutusuna proje kimliğini yazın, ardından projeyi silmek için Kapat'ı tıklayın.