একটি Meet ওয়েব অ্যাড-অন-এর সাইড প্যানেল এবং প্রধান স্টেজ পৃষ্ঠাগুলি কীভাবে তৈরি করবেন তা এই পৃষ্ঠায় বর্ণনা করা হয়েছে।
SDK ইনস্টল এবং আমদানি করুন
আপনি npm ব্যবহার করে বা gstatic ব্যবহার করে SDK অ্যাক্সেস করতে পারেন।
npm (প্রস্তাবিত)
আপনার প্রোজেক্ট npm ব্যবহার করলে, আপনি Meet Add-ons SDK npm প্যাকেজের নির্দেশাবলী অনুসরণ করতে পারেন।
প্রথমে, npm প্যাকেজটি ইনস্টল করুন:
npm install @googleworkspace/meet-addons
তারপর, MeetAddonExport ইন্টারফেস আমদানি করে Meet অ্যাড-অন SDK পাওয়া যায়:
import {meet} from '@googleworkspace/meet-addons/meet.addons';
TypeScript ব্যবহারকারীদের জন্য, TypeScript সংজ্ঞা মডিউল দিয়ে প্যাকেজ করা হয়।
gstatic
Google Meet অ্যাড-অন SDK gstatic থেকে জাভাস্ক্রিপ্ট বান্ডেল হিসাবে উপলব্ধ, একটি ডোমেন যা স্ট্যাটিক কন্টেন্ট পরিবেশন করে।
Meet অ্যাড-অন SDK ব্যবহার করতে, আপনার অ্যাপে নিম্নলিখিত স্ক্রিপ্ট ট্যাগ যোগ করুন:
<script src="https://www.gstatic.com/meetjs/addons/1.0.0/meet.addons.js"></script>
Meet অ্যাড-অন SDK window.meet.addon এর অধীনে MeetAddon ইন্টারফেসের মাধ্যমে উপলব্ধ।
নির্দেশ করুন অ্যাড-অন লোডিং সম্পূর্ণ হয়েছে৷
অ্যাড-অন লোড হওয়ার সময় Meet একটি লোডিং স্ক্রিন দেখায়। অ্যাড-অন সেশন প্রতিষ্ঠিত হলে, Meet এটিকে অ্যাড-অন থেকে একটি সংকেত হিসাবে বিবেচনা করে যে লোডিং শেষ হয়েছে এবং ব্যবহারকারী তৃতীয় পক্ষের সামগ্রীর সাথে ইন্টারঅ্যাক্ট করতে পারেন।
একটি পার্শ্ব-প্যানেল পৃষ্ঠা তৈরি করুন
পাশের প্যানেল ইনস্টল করা অ্যাড-অনগুলি প্রদর্শন করে যা আপনি নির্বাচন করতে এবং ব্যবহার করতে পারেন। একবার আপনি আপনার অ্যাড-অন নির্বাচন করলে, একটি আইফ্রেম আপনার অ্যাড-অন ম্যানিফেস্টে নির্দিষ্ট করা পার্শ্ব প্যানেল URL লোড করে। এটি আপনার অ্যাপের এন্ট্রি পয়েন্ট হওয়া উচিত। সাইড প্যানেলে Meet অ্যাড-অন SDK কার্যকারিতা অ্যাক্সেস করতে, আপনাকে অবশ্যই একটি sidePanelClient ইনস্ট্যান্টিয়েট করতে হবে।
const session = await window.meet.addon.createAddonSession({
cloudProjectNumber: "CLOUD_PROJECT_NUMBER",
});
const sidePanelClient = await session.createSidePanelClient();
আপনার Google ক্লাউড প্রকল্পের প্রকল্প নম্বর দিয়ে CLOUD_PROJECT_NUMBER প্রতিস্থাপন করুন।
এখানে একটি কোড স্নিপেট যা দেখায় কিভাবে একটি কার্যকলাপ শুরু করতে হয়:
<html style="width: 100%; height: 100%">
<head>
<title>Side Panel Add-on</title>
<script src="https://www.gstatic.com/meetjs/addons/1.0.0/meet.addons.js"></script>
</head>
<body style="width: 100%; height: 100%; margin: 0">
<div style="display: flex; flex-direction: column; height: 100%">
<h1>Side Panel Add-on</h1>
<div>
<div>
<button id="start-activity">
startActivity
</button>
</div>
<div>
Activity Side Panel URL:
<input type="text" id="sidePanelIframeUrl" style="margin-left: 20px; width: 90%;"
value="https://your_add_on_origin.url/newSidePanelPage.html" />
</div>
<div>
Main Stage URL:
<input type="text" id="mainStageIframeUrl" style="margin-left: 20px; width: 90%;"
value="https://your_add_on_origin.url/mainStagePage.html" />
</div>
<div>
Activity start state data:
<input type="text" id="additionalProperty" style="margin-left: 20px; width: 90%;"
value="abc123" />
</div>
</div>
</div>
<script>
let sidePanelClient;
async function init() {
const session = await window.meet.addon.createAddonSession({
cloudProjectNumber: "CLOUD_PROJECT_NUMBER",
});
console.log("Successfully constructed the add-on session.");
sidePanelClient = await session.createSidePanelClient();
console.log("Successfully constructed side panel client.");
document
.getElementById('start-activity')
.addEventListener(
'click', async () => {
const sidePanelIframeUrlInputElement =
document.getElementById('sidePanelIframeUrl');
const mainStageIframeUrlInputElement =
document.getElementById('mainStageIframeUrl');
const additionalPropertyInputElement =
document.getElementById('additionalProperty');
await sidePanelClient.startActivity({
// Side panel is replaced with a new page.
sidePanelUrl: sidePanelIframeUrlInputElement.value,
// Main stage loads a large work area.
mainStageUrl: mainStageIframeUrlInputElement.value,
additionalData: JSON.stringify({
additionalProperty: additionalPropertyInputElement.value
}),
});
});
}
document.body.onload = () => {
init();
};
</script>
</body>
</html>
আপনার Google ক্লাউড প্রকল্পের প্রকল্প নম্বর দিয়ে CLOUD_PROJECT_NUMBER প্রতিস্থাপন করুন।
একটি প্রধান পর্যায় পৃষ্ঠা তৈরি করুন
প্রধান পর্যায় হল প্রধান ফোকাস এলাকা যেখানে আপনি অ্যাড-অন প্রদর্শন করতে পারেন যদি একটি বড় কাজের জায়গা প্রয়োজন হয়। কার্যক্রম শুরু হলে মূল পর্যায়টি খোলে। প্রধান পর্যায়ে Meet অ্যাড-অন SDK বৈশিষ্ট্যগুলি অ্যাক্সেস করতে, আপনি ক্লায়েন্ট অবজেক্ট MeetMainStageClient ব্যবহার করতে পারেন:
const session = await window.meet.addon.createAddonSession({
cloudProjectNumber: "CLOUD_PROJECT_NUMBER",
});
const mainStageClient = await session.createMainStageClient();
আপনার Google ক্লাউড প্রকল্পের প্রকল্প নম্বর দিয়ে CLOUD_PROJECT_NUMBER প্রতিস্থাপন করুন।
এখানে একটি কোড স্নিপেট রয়েছে যা একটি প্রধান স্টেজ পৃষ্ঠার একটি উদাহরণ দেখায় (আগের স্নিপেটে mainStagePage.html ), এবং একটি বোতাম ক্লিকের প্রতিক্রিয়া হিসাবে getActivityStartingState এ একটি কল অন্তর্ভুক্ত করে:
<html style="width: 100%; height: 100%">
<head>
<title>Main Stage Add-on</title>
<script src="https://www.gstatic.com/meetjs/addons/1.0.0/meet.addons.js"></script>
</head>
<body style="width: 100%; height: 100%; margin: 0; background: white;">
<div style="display: flex; flex-direction: column; height: 100%">
<h1>Main Stage Add-on</h1>
<div>
<div>
<button id="get-activity-starting-state">
Get Activity Starting State's Additional Property
</button>
</div>
<div id="receivedActivityStartingStateProperty"
style="margin-left: 20px; width: 300px; overflow-wrap: anywhere"></div>
</div>
</div>
<script>
let mainStageClient;
async function init() {
const session = await window.meet.addon.createAddonSession({
cloudProjectNumber: "CLOUD_PROJECT_NUMBER",
});
console.log("Successfully constructed the add-on session.");
const mainStageClient = await session.createMainStageClient();
console.log("Successfully constructed main stage client.");
document
.getElementById('get-activity-starting-state')
.addEventListener(
'click', async () => {
const startingState =
await mainStageClient.getActivityStartingState();
const startingStateData = JSON.parse(startingState.additionalData);
document.getElementById(
'receivedActivityStartingStateProperty').textContent =
startingStateData.additionalProperty;
});
}
document.body.onload = () => {
init();
};
</script>
</body>
</html>
আপনার Google ক্লাউড প্রকল্পের প্রকল্প নম্বর দিয়ে CLOUD_PROJECT_NUMBER প্রতিস্থাপন করুন।