Meet Eklentileri için 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 eklentileri SDK'sının ana aşaması ve yan paneli.
Meet web eklentisinin ana sahnesi ve yan paneli.

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

SDK'ya npm veya gstatic kullanarak erişebilirsiniz.

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.

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.

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 sayede, ana Meet eklentileri SDK'sı deneyiminiz üzerinde kontrol sahibi olabilirsiniz.

  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 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:

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

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.

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.

Meet eklentisini dağıtma

Meet eklentisi dağıtma talimatlarını uygulayarak eklentinin dağıtımını ayarlayın.

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

  1. Meet'e gidin.

  2. Etkinlikler'i Etkinlikler simgesi. 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:

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