এই নির্দেশিকাটিতে একটি প্রধান স্টেজ এবং সাইড প্যানেল তৈরি করে একটি নমুনা Google Meet অ্যাড-অন কীভাবে সেট আপ এবং চালানো যায় তা বর্ণনা করা হয়েছে। এই পৃষ্ঠায় "হ্যালো ওয়ার্ল্ড" উদাহরণগুলি GitHub-এ মৌলিক JavaScript অথবা Next.js TypeScript দিয়ে তৈরি সম্পূর্ণ Meet অ্যাড-অন হিসাবেও উপলব্ধ।
SDK ইনস্টল এবং আমদানি করুন
আপনি npm অথবা gstatic ব্যবহার করে SDK অ্যাক্সেস করতে পারেন।
npm (প্রস্তাবিত)
যদি আপনার প্রোজেক্ট npm ব্যবহার করে, তাহলে আপনি Meet অ্যাড-অন SDK npm প্যাকেজের নির্দেশাবলী অনুসরণ করতে পারেন।
প্রথমে, npm প্যাকেজটি ইনস্টল করুন:
npm install @googleworkspace/meet-addons
তারপর, MeetAddonExport ইন্টারফেস আমদানি করে Meet অ্যাড-অন SDK পাওয়া যাবে:
import {meet} from '@googleworkspace/meet-addons/meet.addons';
টাইপস্ক্রিপ্ট ব্যবহারকারীদের জন্য, টাইপস্ক্রিপ্ট সংজ্ঞাগুলি মডিউলের সাথে প্যাকেজ করা হয়। টাইপস্ক্রিপ্ট ব্যবহারকারীদের প্রকল্পের tsconfig.json এর মধ্যে moduleResolution কে "bundler" এ সেট করা উচিত, যাতে package.json "exports" spec স্ক্রিন শেয়ারিং প্যাকেজ export আমদানি করতে সক্ষম করে।
জিস্ট্যাটিক
Google Meet অ্যাড-অন SDK gstatic থেকে একটি JavaScript বান্ডেল হিসেবে পাওয়া যাচ্ছে, এটি একটি ডোমেন যা স্ট্যাটিক কন্টেন্ট পরিবেশন করে।
Meet অ্যাড-অন SDK ব্যবহার করতে, আপনার অ্যাপে নিম্নলিখিত স্ক্রিপ্ট ট্যাগটি যোগ করুন:
<script src="https://www.gstatic.com/meetjs/addons/1.1.0/meet.addons.js"></script>
Meet অ্যাড-অন SDK window.meet.addon এর অধীনে MeetAddon ইন্টারফেসের মাধ্যমে উপলব্ধ।
একটি সাইড-প্যানেল পৃষ্ঠা তৈরি করুন
সাইড প্যানেলে ইনস্টল করা অ্যাড-অনগুলি প্রদর্শিত হয় যা আপনি নির্বাচন এবং ব্যবহার করতে পারেন। একবার আপনি আপনার অ্যাড-অন নির্বাচন করলে, একটি আইফ্রেম অ্যাড-অন ম্যানিফেস্টে আপনার নির্দিষ্ট করা সাইড প্যানেল URL লোড করে। এটি আপনার অ্যাপের এন্ট্রি পয়েন্ট হওয়া উচিত এবং কমপক্ষে নিম্নলিখিত জিনিসগুলি করা উচিত:
অ্যাড-অন লোডিং সম্পূর্ণ হয়েছে তা নির্দেশ করুন। অ্যাড-অন লোড হওয়ার সময় 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 : আপনার Google ক্লাউড প্রকল্পের প্রকল্প নম্বর।
MAIN_STAGE_URL : পরবর্তী ধাপে আপনার তৈরি করা মূল পর্যায়ের URL।
একটি প্রধান পর্যায়ের পৃষ্ঠা তৈরি করুন
প্রধান পর্যায় হল প্রধান ফোকাস এলাকা যেখানে আপনি অ্যাড-অনটি প্রদর্শন করতে পারেন যদি আরও বড় কাজের জায়গার প্রয়োজন হয়। কার্যকলাপ শুরু হওয়ার পরে প্রধান পর্যায়টি খোলে। প্রধান পর্যায়ে Meet অ্যাড-অন SDK বৈশিষ্ট্যগুলি অ্যাক্সেস করতে, আপনাকে MeetMainStageClient ইন্টারফেস ব্যবহার করতে হবে।
নিচের কোড নমুনাটি একটি প্রধান স্টেজ পৃষ্ঠার উদাহরণ দেখায় যা "হ্যালো, ওয়ার্ল্ড!" বলার জন্য একটি কাস্টম div রেন্ডার করে:
বেসিক জেএস + ওয়েবপ্যাক
আপনার তৈরি করা main.js ফাইলটিতে নিম্নলিখিত ফাংশনটি যোগ করুন, যাতে main stage লোডিং শেষ হয়েছে তা সংকেত দিতে পারে:
/**
* 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 ফাইল যোগ করুন, যা new 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>
</>
);
}
আপনার Google Cloud প্রোজেক্টের প্রোজেক্ট নম্বর দিয়ে CLOUD_PROJECT_NUMBER পরিবর্তে লিখুন।
নমুনাটি চালান
স্থানীয়ভাবে চালানোর জন্য, নিম্নলিখিতগুলি করুন:
বেসিক জেএস + ওয়েবপ্যাক
আপনার main.js ফাইলটি Meet অ্যাড-অন SDK এর সাথে বান্ডিল করার জন্য webpack চালান:
npx webpack
যেকোনো ব্রাউজারে আপনার SidePanel.html ফাইল এবং MainStage.html ফাইলটি খুলুন। এটি GitHub পৃষ্ঠাগুলিতে SidePanel.html এবং MainStage.html- এ GitHub-এর বেসিক JS নমুনা স্থাপনের মতো দেখতে হবে।
পরবর্তী.জেএস
পরবর্তী চালান:
next dev
http://localhost:3000/sidepanel অথবা http://localhost:3000/mainstage এ যান। এগুলি দেখতে GitHub-এর Next.js নমুনার SidePanel.html এবং GitHub পৃষ্ঠাগুলিতে MainStage.html- এ স্থাপনের মতোই হওয়া উচিত।
Meet অ্যাড-অন স্থাপন করুন
একটি অ্যাড-অন স্থাপন করা একটি দুই-পদক্ষেপের প্রক্রিয়া:
প্রথমে, আপনাকে এই কুইকস্টার্ট থেকে কোডটি আপনার মালিকানাধীন ওয়েবসাইটে স্থাপন করতে হবে, আপনার পছন্দের যেকোনো স্থাপনার সমাধান ব্যবহার করে। GitHub-এর অফিসিয়াল নমুনা Google Meet অ্যাড-অনগুলি GitHub ওয়ার্কফ্লো ব্যবহার করে GitHub পৃষ্ঠাগুলিতে স্থাপন করা হয়, তবে আপনি Firebase Hosting এর মতো সরঞ্জামগুলিও ব্যবহার করতে পারেন।
আপনার অ্যাপ্লিকেশনটি স্থাপন করা হয়ে গেলে, আপনাকে একটি Meet অ্যাড-অন স্থাপনের নির্দেশাবলী অনুসরণ করে অ্যাড-অনটির স্থাপনা সেট আপ করতে হবে। এই স্থাপনা নির্দেশিকা অনুসরণ করলে চূড়ান্ত Meet অ্যাড-অন তৈরি হবে যা প্রথম ধাপে আপনার স্থাপন করা অ্যাপ্লিকেশনের Meet-এর মধ্যে একটি iframe।
নমুনাটি চালান
মিটে যাও।
মিটিং টুলস বোতামে ক্লিক করুন
."আপনার অ্যাড-অন" বিভাগে, আপনার অ্যাড-অনটি দেখতে পাবেন। অ্যাড-অনটি চালানোর জন্য এটি নির্বাচন করুন।
আরও বৈশিষ্ট্য যোগ করুন
এখন যেহেতু আপনার কাছে একটি বেসিক সাইড প্যানেল এবং প্রধান স্টেজ আছে, আপনি আপনার অ্যাড-অনে অন্যান্য বৈশিষ্ট্য যোগ করা শুরু করতে পারেন:
- Meet অ্যাড-অন ব্যবহার করে সহযোগিতা
- প্রধান মঞ্চ এবং পার্শ্ব প্যানেলের মধ্যে বার্তা
- অ্যাড-অনের প্রচারণা
এই বৈশিষ্ট্যগুলি তৈরির জন্য আপনাকে GitHub-এর নমুনা Meet অ্যাড-অনগুলি রেফারেন্স হিসেবে ব্যবহার করার জন্য উৎসাহিত করা হচ্ছে।