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.
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.
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:
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 eklentinizcreateAddonSession()
yöntemini çağırmamalıdır.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.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:
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
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.
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.
Meet eklentisini dağıtma
Eklenti dağıtma iki adımlı bir işlemdir:
Ö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.
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
Meet'e gidin.
Toplantı araçları düğmesini
tıklayın.
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.