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 oluşturulacağı ve çalıştırılacağı açıklanmaktadır. Bu sayfadaki "Merhaba Dünya" örnekleri, temel JavaScript veya Next.js TypeScript ile oluşturulmuş Meet eklentileri olarak GitHub'da 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ı kullanmak için MeetAddonExport arayüzünü içe aktarın:

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ı, package.json "exports" spesifikasyonunun ekran paylaşımı paketi dışa aktarma dosyasını içe aktarabilmesi için projenin tsconfig.json bölümünde moduleResolution değerini "bundler" olarak ayarlamalıdır.

gstatic

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

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 altındaki MeetAddon arayüzünden 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çtikten sonra, eklenti manifestinde belirttiğiniz yan panel URL'sini bir iFrame yükler. Bu, uygulamanızın giriş noktası olmalı ve en azından aşağıdakileri yapmalıdır:

1. Eklenti yükleme işleminin tamamlandığını belirtir. Eklenti yüklenirken Meet bir yükleme ekranı gösterir. createAddonSession() yöntemi çağrılarak eklenti oturumu oluşturulduğunda Meet, bunu eklentiden gelen ve yüklemenin tamamlandığı ve kullanıcının üçüncü taraf içeriğiyle etkileşime geçebileceğine dair bir sinyal olarak değerlendirir. Eklentiniz, içeriğinizin yüklenmesi tamamlanana kadar 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 deneyiminiz üzerinde kontrol sağlar.

3. Etkinliği başlatın. Bu işlem, diğer kullanıcıların eklentinize katılmasını sağlar ve isteğe bağlı olarak eklentinizi ana sahnede 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 ve '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üklemiş olmanız gerekir.

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 işlevi main.js dosyanızdan ç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 bir kitaplıkta göstermeniz gerekir. Bunu yapmak için webpack.config.js dosyanızda webpack'i yükleyip library seçeneğini kullanmanı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ılmaktadır. Next.js'de ilk sayfanızı oluşturma hakkında daha fazla bilgi edinmek için yönlendirmeyle ilgili resmi Next.js belgelerine göz atı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 aşama URL'si.

Ana sahne sayfası oluşturma

Ana sahne, daha büyük bir çalışma alanına ihtiyaç duyulduğunda eklentiyi görüntüleyebileceğiniz ana odak alanıdır. Etkinlik başladıktan sonra ana sahne açılır. Ana aşamada Meet eklentileri SDK ö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 aşamada başlatılamaz.

Aşağıdaki kod örneğinde, "Merhaba dünya!" demek için özel bir div öğesi oluşturan 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 "merhaba dünya" 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örüntülemek için bir 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örüntüler:

'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.

Sana Özel'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ıyla 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 olarak 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'a gidin. Bunlar, GitHub'daki Next.js örneğinin GitHub Pages'de SidePanel.html ve MainStage.html olarak dağıtılması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 yazan bir hata gösterilir. Bu URL parametresi Meet tarafından iletileceği için uygulamayı Meet'te çalıştırana kadar bu durum 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 işlemi iki adımdan oluşur:

1. Öncelikle, bu hızlı başlangıç kılavuzundaki kodu, tercih ettiğiniz dağıtım çözümünü kullanarak sahip olduğunuz bir web sitesine dağıtmanız gerekir. Resmi GitHub'daki örnek Google Meet eklentileri, GitHub iş akışı kullanılarak GitHub Pages'e 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'teki iFrame'i olan nihai Meet eklentisi oluşturulur.

Sana Özel'i çalıştırma

1. Meet'e gidin.

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

3. Eklentiler bölümünde eklentinizi görürsünüz. Eklentiyi çalıştırmak için seçin.

Daha fazla özellik ekleme

Temel bir yan panel ve ana sahneniz olduğu için eklentinize başka özellikler eklemeye başlayabilirsiniz:

• Meet eklentisi kullanarak ortak çalışma
• Ana sahne ile yan panel arasındaki mesajlar
• Eklentinin ekran paylaşımı aracılığıyla tanıtımı

Bu özellikleri geliştirmek için referans olarak GitHub'daki örnek Meet eklentilerini kullanmanız önerilir.