Meet eklentileri hızlı başlangıç kılavuzu

Bu kılavuzda, ana sahne ve yan panel oluşturarak örnek bir Google Meet eklentisinin nasıl ayarlanacağı ve çalıştırılacağı açıklanmaktadır. Bu sayfadaki "Hello World" örnekleri, GitHub'da temel JavaScript veya Next.js TypeScript ile oluşturulmuş eksiksiz Meet eklentileri olarak da mevcuttur.

Meet Web eklentisinin ana sahnesi ve yan paneli.

SDK'yı yükleme ve içe aktarma

SDK'ya npm veya gstatic kullanarak erişebilirsiniz.

npm (önerilen)

Projenizde npm kullanılıyorsa Meet eklentileri SDK'sı npm paketi ile ilgili talimatları uygulayabilirsiniz.

Öncelikle npm paketini yükleyin:

npm install @googleworkspace/meet-addons

Ardından, Meet eklentileri SDK'sını MeetAddonExport arayüzünü içe aktararak kullanabilirsiniz:

import {meet} from '@googleworkspace/meet-addons/meet.addons';

TypeScript kullanıcıları için TypeScript tanımları modülle birlikte paketlenir. TypeScript kullanıcıları, moduleResolution değerini projenin tsconfig.json içinde "bundler" olarak ayarlamalıdır. Böylece package.json "exports" spesifikasyonu, ekran paylaşımı paketi dışa aktarma işleminin içe aktarılmasını sağlar.

gstatic

Google Meet Eklentileri SDK'sı, statik içerik sunan bir alan olan gstatic adresinden JavaScript paketi olarak edinilebilir.

Meet eklentileri SDK'sını kullanmak için uygulamanıza aşağıdaki komut dosyası etiketini ekleyin:

<script src="https://www.gstatic.com/meetjs/addons/1.1.0/meet.addons.js"></script>

Meet eklentileri SDK'sı, window.meet.addon bölümündeki MeetAddon arayüzü üzerinden kullanılabilir.

Not: TypeScript kullanıyorsanız en son türleri https://www.gstatic.com/meetjs/addons/1.1.0/meet.addons.d.ts adresinden de alabilirsiniz. Dosyayı yerel olarak kaydetmeniz yeterlidir.

Yan panel sayfası oluşturma

Yan panelde, seçip kullanabileceğiniz yüklü eklentiler gösterilir. Eklentinizi seçtiğinizde, eklenti manifestinde belirttiğiniz yan panel URL'si bir iFrame ile yüklenir. Bu, uygulamanızın giriş noktası olmalı ve en azından aşağıdakileri yapmalıdır:

1. Eklenti yüklemenin tamamlandığını belirtin. Meet, eklenti yüklenirken yükleme ekranı gösterir. createAddonSession() yöntemi çağrılarak eklenti oturumu oluşturulduğunda Meet, bunu eklentiden gelen bir sinyal olarak değerlendirir. Bu sinyal, yüklemenin tamamlandığını ve kullanıcının üçüncü taraf içeriğiyle etkileşimde bulunabileceğini gösterir. İçeriğiniz yüklenene kadar eklentiniz createAddonSession() yöntemini çağırmamalıdır.

2. Yan panel istemcisini oluşturun. Yan paneldeki Meet eklentileri SDK'sına erişmek için bir MeetSidePanelClient arayüzü oluşturmanız gerekir. Bu, ana Meet eklentileri SDK'sı deneyiminiz üzerinde kontrol sağlar.

3. Etkinliği başlatın. Bu özellik, diğer kullanıcıların eklentinize katılmasını sağlar ve isteğe bağlı olarak eklentinizi ana ekranda açar.

Aşağıdaki kod örneğinde, oturumun nasıl bir yan panel istemcisi oluşturduğu ve yan panel istemcisinin ana aşamada nasıl bir etkinlik başlattığı gösterilmektedir:

Temel JS + Webpack

main.js adlı yeni bir dosyada, eklenti oturumu ve yan panel istemcisi oluşturan, 'start-activity' kimlikli bir düğme tıklandığında etkinliği başlatan bir işlev tanımlayın:

Not: Bu işlem için Meet eklentileri SDK'sını npm kullanarak yüklediğiniz varsayılır.

import { meet } from '@googleworkspace/meet-addons/meet.addons';

const CLOUD_PROJECT_NUMBER = 'CLOUD_PROJECT_NUMBER';
const MAIN_STAGE_URL = 'MAIN_STAGE_URL';

/**
 * Prepares the add-on Side Panel Client, and adds an event to launch the
 * activity in the main stage when the main button is clicked.
 */
export async function setUpAddon() {
    const session = await meet.addon.createAddonSession({
        cloudProjectNumber: CLOUD_PROJECT_NUMBER,
    });
    const sidePanelClient = await session.createSidePanelClient();
    document
        .getElementById('start-activity')
        .addEventListener('click', async () => {
            await sidePanelClient.startActivity({
                mainStageUrl: MAIN_STAGE_URL
            });
        });
}

SidePanel.html adlı yeni bir dosyada, etkinliği başlatan düğmeyi tanımlayın ve doküman yüklendiğinde main.js dosyanızdaki işlevi çağırın:

<html>
<head>
    <title>Meet add-on Side Panel</title>
    <script src="./main.js"></script>
</head>

<body style="width: 100%; height: 100%; margin: 0">
    <div>This is the add-on Side Panel. Only you can see this.</div>
    <button id="start-activity">Launch Activity in Main Stage.</button>

    <script>
        document.body.onload = () => {
            // Library name (`helloWorld`) is defined in the webpack config.
            // The function (`setUpAddon`) is defined in main.js.
            helloWorld.setUpAddon();
        };
    </script>
</body>
</html>

Ayrıca Meet eklentileri SDK'sını main.js ile birlikte paketlemeniz ve bunları bir kitaplıkta kullanıma sunmanız gerekir. Bunu webpack'i yükleyerek ve webpack.config.js dosyanızda library seçeneğini kullanarak yapmanızı öneririz:

module.exports = {
    entry: './main.js',
    output: {
        library: 'helloWorld',
        ...
    },
    ...
};

Next.js

Not: Bu örnekte, Next.js uygulamasına sayfa eklemek için Next.js uygulama yönlendirmesi kullanılır. Next.js'de ilk sayfanızı oluşturma hakkında daha fazla bilgi edinmek için yönlendirme ile ilgili resmi Next.js belgelerine bakın.

Yan paneli görüntülemek için yeni bir Page ekleyin. Bu sayfa, yüklendiğinde bir eklenti oturumu ve yan panel istemcisi oluşturur ve bir düğme tıklandığında etkinliği başlatır:

'use client';

import { useEffect, useState } from 'react';
import {
    meet,
    MeetSidePanelClient,
} from '@googleworkspace/meet-addons/meet.addons';

export default function Page() {
    const [sidePanelClient, setSidePanelClient] = useState<MeetSidePanelClient>();

    // Launches the main stage when the main button is clicked.
    async function startActivity(e: unknown) {
        if (!sidePanelClient) {
            throw new Error('Side Panel is not yet initialized!');
        }
        await sidePanelClient.startActivity({
            mainStageUrl: 'MAIN_STAGE_URL'
        });
    }

    /**
     * Prepares the add-on Side Panel Client.
     */
    useEffect(() => {
        (async () => {
            const session = await meet.addon.createAddonSession({
                cloudProjectNumber: 'CLOUD_PROJECT_NUMBER',
            });
            setSidePanelClient(await session.createSidePanelClient());
        })();
    }, []);

    return (
        <>
            <div>
                This is the add-on Side Panel. Only you can see this.
            </div>
            <button onClick={startActivity}>
                Launch Activity in Main Stage.
            </button>
        </>
    );
}

Aşağıdakini değiştirin:

• CLOUD_PROJECT_NUMBER: Google Cloud projenizin proje numarası.

• MAIN_STAGE_URL: Sonraki adımda oluşturacağınız ana sahne URL'si.

Ana sahne sayfası oluşturma

Ana sahne, daha büyük bir çalışma alanına ihtiyaç duyulması durumunda eklentiyi gösterebileceğiniz ana odak alanıdır. Etkinlik başladıktan sonra ana sahne açılır. Ana ekranda Meet eklentileri SDK'sının özelliklerine erişmek için MeetMainStageClient arayüzünü kullanmanız gerekir.

Önemli: İçeriğiniz yüklendikten sonra eklentinizin createAddonSession() yöntemini tekrar çağırması gerektiğini unutmayın. Aksi takdirde, eklenti ana sahnede başlatılamaz.

Aşağıdaki kod örneğinde, "Merhaba dünya!" yazan özel bir div oluşturmak için kullanılan ana sahne sayfası örneği gösterilmektedir:

Temel JS + Webpack

Ana sahnenin yüklemeyi tamamladığını bildirebilmesi için, daha önce oluşturduğunuz main.js dosyasına aşağıdaki işlevi ekleyin:

/**
 * Prepares the add-on Main Stage Client, which signals that the add-on has
 * successfully launched in the main stage.
 */
export async function initializeMainStage() {
    const session = await meet.addon.createAddonSession({
        cloudProjectNumber: CLOUD_PROJECT_NUMBER,
    });
    await session.createMainStageClient();
}

Ardından, yeni initializeMainStage işlevini çağıran ve özel "hello, world" içeriğini görüntüleyen yeni bir MainStage.html dosyası ekleyin:

<html>
<body style="width: 100%; height: 100%; margin: 0">
    <div>
        This is the add-on Main Stage. Everyone in the call can see this.
    </div>
    <div>Hello, world!</div>

    <script>
        document.body.onload = () => {
            helloWorld.initializeMainStage();
        };
    </script>
</body>
</html>

Next.js

Ana sahneyi göstermek için Page ekleyin. Bu sayfa, yüklendiğinde bir eklenti oturumu ve yan panel istemcisi oluşturur ve özel "Merhaba dünya" içeriğini gösterir:

'use client';

import { useEffect } from 'react';
import { meet } from '@googleworkspace/meet-addons/meet.addons';

export default function Page() {
    /**
     * Prepares the add-on Main Stage Client, which signals that the add-on
     * has successfully launched in the main stage.
     */
    useEffect(() => {
        (async () => {
            const session = await meet.addon.createAddonSession({
                cloudProjectNumber: 'CLOUD_PROJECT_NUMBER',
            });
            await session.createMainStageClient();
        })();
    }, []);

    return (
        <>
            <div>
                This is the add-on Main Stage.
                Everyone in the call can see this.
            </div>
            <div>Hello, world!</div>
        </>
    );
}

CLOUD_PROJECT_NUMBER kısmını, Google Cloud projenizin proje numarasıyla değiştirin.

Örneği çalıştırma

Yerel olarak çalıştırmak için aşağıdakileri yapın:

Temel JS + Webpack

main.js dosyanızı Meet eklentileri SDK'sı ile birlikte paketlemek için webpack'i çalıştırın:

npx webpack

SidePanel.html dosyanızı ve MainStage.html dosyanızı herhangi bir tarayıcıda açın. Bu, GitHub'daki temel JS örneğinin GitHub Pages'de SidePanel.html ve MainStage.html'ye dağıtılmasıyla aynı görünmelidir.

Next.js

Sonraki çalıştırma:

next dev

http://localhost:3000/sidepanel veya http://localhost:3000/mainstage sayfasına gidin. Bunlar, GitHub'daki Next.js örneğinin GitHub Pages'de SidePanel.html ve MainStage.html'ye dağıtımıyla aynı görünmelidir.

Not: Yerel olarak çalıştırıldığında Chrome Geliştirici Araçları konsolunda Missing required Meet SDK URL parameter: meet_sdk şeklinde bir hata mesajı gösterilir. Meet, bu URL parametresini iletmeyi yöneteceğinden, uygulamayı Meet'te çalıştırana kadar bu durumun yaşanması beklenir. Geliştirici araçları hakkında daha fazla bilgi için Meet eklentileri için geliştirici araçlarını yönetme başlıklı makaleyi inceleyin.

Meet eklentisini dağıtma

Eklenti dağıtma iki adımlı bir işlemdir:

1. Öncelikle, bu hızlı başlangıç kılavuzundaki kodu tercih ettiğiniz bir dağıtım çözümünü kullanarak sahip olduğunuz bir web sitesine dağıtmanız gerekir. GitHub'daki resmi örnek Google Meet eklentileri, GitHub Pages'e GitHub iş akışı kullanılarak dağıtılır. Ancak Firebase Hosting gibi araçları da kullanabilirsiniz.

2. Uygulamanız dağıtıldıktan sonra, Meet eklentisi dağıtma talimatlarını uygulayarak eklentinin dağıtımını ayarlamanız gerekir. Bu dağıtım kılavuzunu uyguladığınızda, birinci adımda dağıttığınız uygulamanın Meet'i içinde bir iFrame olan nihai Meet eklentisi oluşturulur.

Örneği çalıştırma

1. Meet'e gidin.

2. Toplantı araçları düğmesini tıklayın.

3. Eklentileriniz bölümünde eklentinizi görmeniz gerekir. Eklentiyi çalıştırmak için seçin.

Daha fazla özellik ekleme

Artık temel bir yan paneliniz ve ana sahneniz olduğuna göre eklentinize başka özellikler eklemeye başlayabilirsiniz:

• Meet eklentisi kullanarak ortak çalışma
• Ana sahne ile yan panel arasındaki mesajlar
• Eklentinin tanıtımı

Bu özellikleri oluştururken referans olarak GitHub'daki örnek Meet eklentilerini kullanmanız önerilir.