এই নির্দেশিকায় একটি মূল স্টেজ এবং সাইড প্যানেল তৈরি করার মাধ্যমে একটি নমুনা গুগল মিট অ্যাড-অন কীভাবে সেট আপ ও রান করতে হয়, তা বর্ণনা করা হয়েছে। এই পৃষ্ঠার "হ্যালো ওয়ার্ল্ড" উদাহরণগুলো গিটহাবেও সম্পূর্ণ মিট অ্যাড-অন হিসেবে পাওয়া যায়, যা সাধারণ জাভাস্ক্রিপ্ট অথবা নেক্সট.জেএস টাইপস্ক্রিপ্ট দিয়ে তৈরি।
SDK ইনস্টল এবং ইম্পোর্ট করুন
আপনি npm অথবা gstatic ব্যবহার করে SDK-টি অ্যাক্সেস করতে পারেন।
এনপিএম (প্রস্তাবিত)
আপনার প্রজেক্টে যদি npm ব্যবহার করা হয়, তাহলে আপনি Meet অ্যাড-অন SDK npm প্যাকেজের নির্দেশাবলী অনুসরণ করতে পারেন।
প্রথমে, npm প্যাকেজটি ইনস্টল করুন:
npm install @googleworkspace/meet-addons
এরপর, MeetAddonExport ইন্টারফেসটি ইম্পোর্ট করার মাধ্যমে Meet অ্যাড-অন SDK-টি পাওয়া যায়:
import {meet} from '@googleworkspace/meet-addons/meet.addons';
TypeScript ব্যবহারকারীদের জন্য, TypeScript ডেফিনিশনগুলো মডিউলের সাথেই প্যাকেজ করা থাকে। TypeScript ব্যবহারকারীদের প্রোজেক্টের tsconfig.json ফাইলে moduleResolution "bundler" এ সেট করতে হবে, যাতে package.json-এর "exports" স্পেকটি স্ক্রিন শেয়ারিং প্যাকেজের এক্সপোর্ট ইম্পোর্ট করা সক্ষম করে।
জিস্ট্যাটিক
গুগল মিট অ্যাড-অন এসডিকে (SDK) gstatic থেকে একটি জাভাস্ক্রিপ্ট বান্ডেল হিসেবে পাওয়া যায়, যা স্ট্যাটিক কন্টেন্ট পরিবেশনকারী একটি ডোমেইন।
Meet অ্যাড-অন SDK ব্যবহার করতে, আপনার অ্যাপে নিম্নলিখিত স্ক্রিপ্ট ট্যাগটি যোগ করুন:
<script src="https://www.gstatic.com/meetjs/addons/1.1.0/meet.addons.js"></script>
Meet অ্যাড-অন SDK-টি MeetAddon ইন্টারফেসের মাধ্যমে window.meet.addon এ পাওয়া যায়।
একটি সাইড-প্যানেল পৃষ্ঠা তৈরি করুন
সাইড প্যানেলে ইনস্টল করা অ্যাড-অনগুলো প্রদর্শিত হয়, যেগুলো আপনি বেছে নিয়ে ব্যবহার করতে পারেন। আপনার অ্যাড-অনটি বেছে নেওয়ার পর, একটি আইফ্রেম অ্যাড-অন ম্যানিফেস্টে আপনার নির্দিষ্ট করা সাইড প্যানেলের ইউআরএলটি লোড করে। এটি আপনার অ্যাপের এন্ট্রি পয়েন্ট হওয়া উচিত এবং এতে ন্যূনতম নিম্নলিখিত কাজগুলো থাকা আবশ্যক:
অ্যাড-অন লোডিং সম্পন্ন হয়েছে তা নির্দেশ করুন। অ্যাড-অনটি লোড হওয়ার সময় Meet একটি লোডিং স্ক্রিন দেখায়। যখন `
createAddonSession()` মেথডটি কল করে অ্যাড-অন সেশনটি প্রতিষ্ঠিত হয়, তখন Meet এটিকে অ্যাড-অনের পক্ষ থেকে একটি সংকেত হিসেবে বিবেচনা করে যে লোডিং শেষ হয়েছে এবং ব্যবহারকারী এখন থার্ড-পার্টি কন্টেন্টের সাথে ইন্টারঅ্যাক্ট করতে পারবেন। আপনার কন্টেন্টের লোডিং সম্পূর্ণ না হওয়া পর্যন্ত আপনার অ্যাড-অনেরcreateAddonSession()` মেথডটি কল করা উচিত নয়।সাইড প্যানেল ক্লায়েন্ট তৈরি করুন। সাইড প্যানেলে Meet অ্যাড-অন SDK অ্যাক্সেস করার জন্য, আপনাকে অবশ্যই একটি
MeetSidePanelClientইন্টারফেস ইনস্ট্যানশিয়েট করতে হবে। এটি আপনার মূল Meet অ্যাড-অন SDK অভিজ্ঞতার উপর নিয়ন্ত্রণ প্রদান করে।অ্যাক্টিভিটিটি শুরু করুন। এটি অন্যদের আপনার অ্যাড-অনে যোগ দেওয়ার সুযোগ করে দেয় এবং ঐচ্ছিকভাবে আপনার অ্যাড-অনটি মূল স্টেজে খুলে দেয়।
নিম্নলিখিত কোড নমুনাটি দেখায় কিভাবে সেশন একটি সাইড প্যানেল ক্লায়েন্ট তৈরি করে, এবং কিভাবে সাইড প্যানেল ক্লায়েন্টটি মূল স্টেজে একটি অ্যাক্টিভিটি শুরু করে:
বেসিক জেএস + ওয়েবপ্যাক
main.js নামের একটি নতুন ফাইলে এমন একটি ফাংশন সংজ্ঞায়িত করুন যা একটি অ্যাড-অন সেশন ও সাইড প্যানেল ক্লায়েন্ট তৈরি করে এবং 'start-activity' আইডিযুক্ত একটি বোতামে ক্লিক করা হলে অ্যাক্টিভিটি শুরু করে:
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 নামের একটি নতুন ফাইলে, অ্যাক্টিভিটি চালু করার বাটনটি নির্ধারণ করুন এবং ডকুমেন্ট লোড হওয়ার সময় আপনার main.js থেকে ফাংশনটি কল করুন:
<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>
আপনাকে আপনার main.js সাথে Meet অ্যাড-অন SDK-টি বান্ডল করতে হবে এবং সেগুলোকে একটি লাইব্রেরিতে প্রকাশ করতে হবে। আমরা webpack ইনস্টল করে এবং আপনার webpack.config.js ফাইলে library অপশনটি ব্যবহার করে এটি করার পরামর্শ দিই:
module.exports = {
entry: './main.js',
output: {
library: 'helloWorld',
...
},
...
};
নেক্সট.জেএস
সাইড প্যানেল প্রদর্শন করার জন্য একটি নতুন Page যোগ করুন। এই পৃষ্ঠাটি লোড হওয়ার সাথে সাথে একটি অ্যাড-অন সেশন এবং সাইড প্যানেল ক্লায়েন্ট তৈরি করে, এবং একটি বোতামে ক্লিক করা হলে অ্যাক্টিভিটি শুরু করে:
'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>
</>
);
}
নিম্নলিখিতগুলি প্রতিস্থাপন করুন:
CLOUD_PROJECT_NUMBER : আপনার গুগল ক্লাউড প্রজেক্টের প্রজেক্ট নম্বর।
MAIN_STAGE_URL : মূল স্টেজের ইউআরএল, যা আপনি পরবর্তী ধাপে তৈরি করবেন।
একটি মূল মঞ্চ পৃষ্ঠা তৈরি করুন
মূল স্টেজ হলো প্রধান ফোকাস এলাকা, যেখানে আরও বড় ওয়ার্কিং স্পেসের প্রয়োজন হলে আপনি অ্যাড-অনটি প্রদর্শন করতে পারেন। অ্যাক্টিভিটি শুরু হলেই মূল স্টেজটি খুলে যায়। মূল স্টেজে Meet অ্যাড-অন SDK-এর ফিচারগুলো অ্যাক্সেস করতে হলে, আপনাকে অবশ্যই MeetMainStageClient ইন্টারফেসটি ব্যবহার করতে হবে।
নিম্নলিখিত কোড নমুনাটি একটি প্রধান স্টেজ পৃষ্ঠার উদাহরণ দেখায় যা "Hello, world!" বলার জন্য একটি কাস্টম div রেন্ডার করে:
বেসিক জেএস + ওয়েবপ্যাক
আপনার তৈরি করা main.js ফাইলে নিম্নলিখিত ফাংশনটি যোগ করুন, যাতে মূল স্টেজটি লোড হওয়া শেষ হওয়ার সংকেত দিতে পারে:
/**
* 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();
}
তারপর, একটি নতুন MainStage.html ফাইল যোগ করুন, যা নতুন initializeMainStage ফাংশনটিকে কল করবে এবং কাস্টম "hello, world" কন্টেন্ট প্রদর্শন করবে:
<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>
নেক্সট.জেএস
মূল পর্যায়টি প্রদর্শন করার জন্য একটি Page যোগ করুন। এই পৃষ্ঠাটি লোড হওয়ার সাথে সাথে একটি অ্যাড-অন সেশন এবং সাইড প্যানেল ক্লায়েন্ট তৈরি করে, এবং কাস্টম "হ্যালো, ওয়ার্ল্ড" কন্টেন্ট প্রদর্শন করে:
'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 জায়গায় আপনার গুগল ক্লাউড প্রজেক্টের প্রজেক্ট নম্বরটি বসান।
নমুনাটি চালান
স্থানীয়ভাবে চালানোর জন্য, নিম্নলিখিতগুলি করুন:
বেসিক জেএস + ওয়েবপ্যাক
আপনার main.js ফাইলটিকে Meet অ্যাড-অন SDK-এর সাথে বান্ডল করতে webpack চালান:
npx webpack
যেকোনো ব্রাউজারে আপনার SidePanel.html এবং MainStage.html ফাইলটি খুলুন। এটি দেখতে ঠিক GitHub Pages-এর SidePanel.html এবং MainStage.html ফাইলে GitHub-এ থাকা Basic JS স্যাম্পলটি ডেপ্লয় করার মতোই হওয়া উচিত।
নেক্সট.জেএস
পরবর্তী ধাপ:
next dev
http://localhost:3000/sidepanel অথবা http://localhost:3000/mainstage এ যান। GitHub Pages-এ থাকা SidePanel.html এবং MainStage.html ফাইলে Next.js স্যাম্পলটি যেভাবে ডেপ্লয় করা হয়েছে, এগুলি দেখতে ঠিক তেমনই হওয়া উচিত।
Meet অ্যাড-অনটি স্থাপন করুন
একটি অ্যাড-অন স্থাপন করা একটি দুই-ধাপের প্রক্রিয়া:
প্রথমে, আপনাকে এই কুইকস্টার্টের কোডটি আপনার নিজের একটি ওয়েবসাইটে, আপনার পছন্দের যেকোনো ডেপ্লয়মেন্ট সলিউশন ব্যবহার করে ডেপ্লয় করতে হবে। গিটহাবে থাকা অফিসিয়াল স্যাম্পল গুগল মিট অ্যাড-অনগুলো গিটহাব পেজেস-এ একটি গিটহাব ওয়ার্কফ্লো ব্যবহার করে ডেপ্লয় করা হয়, কিন্তু আপনি ফায়ারবেস হোস্টিং-এর মতো টুলও ব্যবহার করতে পারেন।
আপনার অ্যাপ্লিকেশনটি ডেপ্লয় করা হয়ে গেলে, আপনাকে অবশ্যই ‘Deploy a Meet add-on’- এর নির্দেশাবলী অনুসরণ করে অ্যাড-অনটির ডেপ্লয়মেন্ট সেট আপ করতে হবে। সেই ডেপ্লয়মেন্ট গাইডটি অনুসরণ করলে চূড়ান্ত Meet অ্যাড-অনটি তৈরি হয়, যা প্রথম ধাপে আপনার ডেপ্লয় করা অ্যাপ্লিকেশনটির Meet-এর মধ্যে একটি iframe হিসেবে থাকে।
নমুনাটি চালান
Meet- এ যান।
মিটিং টুলস বোতামে ক্লিক করুন
.'আপনার অ্যাড-অন' বিভাগে আপনি আপনার অ্যাড-অনটি দেখতে পাবেন। অ্যাড-অনটি চালানোর জন্য এটি নির্বাচন করুন।
আরও বৈশিষ্ট্য যোগ করুন
এখন যেহেতু আপনার একটি প্রাথমিক সাইড প্যানেল এবং মূল স্টেজ তৈরি হয়ে গেছে, আপনি আপনার অ্যাড-অনে অন্যান্য ফিচার যোগ করা শুরু করতে পারেন:
এই বৈশিষ্ট্যগুলি তৈরি করার জন্য রেফারেন্স হিসেবে GitHub-এ থাকা নমুনা Meet অ্যাড-অনগুলি ব্যবহার করতে আপনাকে উৎসাহিত করা হচ্ছে।