Bu sayfa, Cloud Translation API ile çevrilmiştir.

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. İlgili içeriği oluşturmak için kullanılan "Hello World" bu sayfadaki örnekler, GitHub'da da tamamlanmış olarak Temel JavaScript ile oluşturulmuş Meet Eklentileri veya Next.js TypeScript yöntemini kullanabilirsiniz.

Meet Eklentileri SDK'sı ana sahnesi 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.

npm (önerilen)

Projenizde npm kullanılıyorsa Eklenti SDK'sı npm paketiyle tanışın.

Öncelikle npm paketini yükleyin:

npm install @googleworkspace/meet-addons

Ardından MeetAddonExport arayüz:

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 aşağıdaki komut dosyası etiketini uygulama:

<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, yüklediğiniz kullanabileceğiniz en iyi araçtır. Eklentinizi seçtikten sonra iframe, manifest dosyasındaki talimatları inceleyin. Bu, uygulamanızın giriş noktası olmalı ve en azından aşağıdakileri yapmalıdır:

Eklenti yükleme işleminin tamamlandığını belirtir. Meet, çalışırken bir yükleme ekranı eklentisi yükleniyor. 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ğiniz tamamlanana kadar createAddonSession() yöntemini çağırmamalısınız. yükleniyor.
Yan panel istemcisini oluşturun. Meet Eklentileri SDK'sına bir MeetSidePanelClient örneği oluşturmanız gerekir. kullanır. Bu, ana Meet Eklentileri SDK'nız üzerinde kontrol sağlar sunmaktır.
Etkinliği başlatın. Bu sayede diğer kullanıcılar ve isteğe bağlı olarak bir öğedir.

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 + Web Paketi

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 ve bunları kitaplıkta gösterin. 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, eklenti oturumu ve yan panel istemcisi 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. Ana etkinlik başladığında aşaması 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 + Web Paketi

Önceden oluşturduğunuz main.js dosyasına aşağıdaki işlevi ekleyin. ana aşama, yüklemenin tamamlandığına işaret edebilir:

/**
 * 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, eklenti oturumu ve yan panel istemcisi ve özel "merhaba, dünya" değerini görüntüler içerik:

'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ına proje numarasını yazın Google Cloud projesi.

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

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

Temel JS + Web Paketi

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 dağıtımıyla aynı görünecektir bir SidePanel.html dosyasına ve MainStage.html bölümünü ziyaret edin.

Next.js

Sonrakini çalıştır:

next dev

http://localhost:3000/sidepanel adresine gidin veya http://localhost:3000/mainstage. Bunlar, GitHub'da Next.js örneğinin dağıtımı bir SidePanel.html dosyasına ve MainStage.html bölümünü ziyaret edin.

Meet eklentisini dağıtma

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

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

Meet'e gidin.
Etkinlikler'i tıklayın.
Eklentileriniz bölümünde ekleyebilirsiniz. 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 diğer özellikleri hakkında bilgi edinin:

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