মিট অ্যাড-অন কুইকস্টার্ট

একটি প্রধান স্টেজ এবং সাইড প্যানেল তৈরি করে কীভাবে একটি নমুনা Google Meet অ্যাড-অন সেট-আপ এবং চালাতে হয় তা এই নির্দেশিকাটি বর্ণনা করে। এই পৃষ্ঠার "হ্যালো ওয়ার্ল্ড" উদাহরণগুলি GitHub-এ সম্পূর্ণ Meet অ্যাড-অন হিসাবে উপলব্ধ যা হয় মৌলিক JavaScript বা Next.js TypeScript দিয়ে তৈরি।

Meet অ্যাড-অন SDK প্রধান স্টেজ এবং সাইড প্যানেল।
Meet ওয়েব অ্যাড-অনের প্রধান স্টেজ এবং পাশের প্যানেল।

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 সংজ্ঞা মডিউল দিয়ে প্যাকেজ করা হয়।

gstatic

Google Meet অ্যাড-অন SDK gstatic থেকে জাভাস্ক্রিপ্ট বান্ডেল হিসাবে উপলব্ধ, একটি ডোমেন যা স্ট্যাটিক কন্টেন্ট পরিবেশন করে।

Meet অ্যাড-অন SDK ব্যবহার করতে, আপনার অ্যাপে নিম্নলিখিত স্ক্রিপ্ট ট্যাগ যোগ করুন:

<script src="https://www.gstatic.com/meetjs/addons/1.1.0/meet.addons.js"></script>

Meet অ্যাড-অন SDK window.meet.addon এর অধীনে MeetAddon ইন্টারফেসের মাধ্যমে উপলব্ধ।

একটি পার্শ্ব-প্যানেল পৃষ্ঠা তৈরি করুন

পাশের প্যানেল ইনস্টল করা অ্যাড-অনগুলি প্রদর্শন করে যা আপনি নির্বাচন করতে এবং ব্যবহার করতে পারেন। একবার আপনি আপনার অ্যাড-অন নির্বাচন করলে, একটি আইফ্রেম আপনার অ্যাড-অন ম্যানিফেস্টে নির্দিষ্ট করা পার্শ্ব প্যানেলের URL লোড করে। এটি আপনার অ্যাপের এন্ট্রি পয়েন্ট হওয়া উচিত এবং ন্যূনতম নিম্নলিখিত জিনিসগুলি করা উচিত:

  1. নির্দেশ করুন অ্যাড-অন লোডিং সম্পূর্ণ হয়েছে৷ অ্যাড-অন লোড হওয়ার সময় Meet একটি লোডিং স্ক্রিন দেখায়। createAddonSession () পদ্ধতিতে কল করার মাধ্যমে যখন অ্যাড-অন সেশন প্রতিষ্ঠিত হয়, তখন Meet এটিকে অ্যাড-অন থেকে একটি সংকেত হিসাবে বিবেচনা করে যে লোডিং শেষ হয়েছে এবং ব্যবহারকারী তৃতীয় পক্ষের সামগ্রীর সাথে ইন্টারঅ্যাক্ট করতে পারেন। আপনার কন্টেন্ট লোড করা শেষ না হওয়া পর্যন্ত আপনার অ্যাড-অন createAddonSession() পদ্ধতিতে কল করা উচিত নয়।

  2. সাইড প্যানেল ক্লায়েন্ট তৈরি করুন। সাইড প্যানেলে Meet অ্যাড-অন SDK অ্যাক্সেস করতে, আপনাকে অবশ্যই একটি MeetSidePanelClient ইন্টারফেস ইনস্ট্যান্টিয়েট করতে হবে। এটি আপনার প্রধান Meet অ্যাড-অন SDK অভিজ্ঞতার উপর নিয়ন্ত্রণ প্রদান করে।

  3. কার্যক্রম শুরু করুন। এটি অন্যদের আপনার অ্যাড-অনে যোগদান করতে দেয় এবং ঐচ্ছিকভাবে আপনার অ্যাড-অনটি মূল পর্যায়ে খোলে।

নিম্নলিখিত কোড নমুনা দেখায় কিভাবে সেশন একটি সাইড প্যানেল ক্লায়েন্ট তৈরি করে, এবং কিভাবে সাইড প্যানেল ক্লায়েন্ট প্রধান পর্যায়ে একটি কার্যকলাপ শুরু করে:

বেসিক জেএস + ওয়েবপ্যাক

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.config.js ফাইলে library বিকল্প ব্যবহার করে এটি করার পরামর্শ দিই:

module.exports = {
    entry: './main.js',
    output: {
        library: 'helloWorld',
        ...
    },
    ...
};

পরবর্তী.js

পাশের প্যানেলটি প্রদর্শন করতে একটি নতুন 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 ফাইলে নিম্নলিখিত ফাংশনটি যুক্ত করুন, যাতে মূল পর্যায়টি সংকেত দিতে পারে যে এটি লোড করা শেষ হয়েছে:

/**
 * 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 ফাংশনকে কল করে এবং কাস্টম "হ্যালো, ওয়ার্ল্ড" সামগ্রী প্রদর্শন করে:

<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>

পরবর্তী.js

মূল পর্যায় প্রদর্শন করতে একটি 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_PROJECT_NUMBER প্রতিস্থাপন করুন।

নমুনা চালান

স্থানীয়ভাবে চালানোর জন্য, নিম্নলিখিতগুলি করুন:

বেসিক জেএস + ওয়েবপ্যাক

Meet অ্যাড-অন SDK-এর সাথে আপনার main.js ফাইল বান্ডিল করার জন্য ওয়েবপ্যাক চালান: 

npx webpack

যেকোনো ব্রাউজারে আপনার SidePanel.html ফাইল এবং MainStage.html ফাইল খুলুন। এটিকে GitHub-এ SidePanel.html এবং MainStage.html- এ GitHub পৃষ্ঠাগুলিতে বেসিক JS নমুনা স্থাপনের মতো দেখতে হবে।

পরবর্তী.js

পরবর্তী চালান: 

next dev

http://localhost:3000/sidepanel বা http://localhost:3000/mainstage এ নেভিগেট করুন। এগুলিকে GitHub-এ SidePanel.html এবং MainStage.html GitHub পৃষ্ঠাগুলিতে Next.js নমুনা স্থাপনের মতো দেখতে হবে।

Meet অ্যাড-অন স্থাপন করুন

কীভাবে একটি Meet অ্যাড-অন স্থাপন করতে হয় তার নির্দেশাবলী অনুসরণ করে অ্যাড-অনের স্থাপনা সেট-আপ করুন।

নমুনা চালান

  1. মিট এ যান।

  2. কার্যকলাপ ক্লিক করুন কার্যকলাপের জন্য আইকন. .

  3. আপনার অ্যাড-অন বিভাগে, আপনার অ্যাড-অন দেখতে হবে। অ্যাড-অন চালানোর জন্য এটি নির্বাচন করুন।

আরো বৈশিষ্ট্য যোগ করুন

এখন আপনার কাছে একটি বেসিক সাইড প্যানেল এবং মূল স্টেজ আছে, আপনি আপনার অ্যাড-অনে অন্যান্য বৈশিষ্ট্য যোগ করা শুরু করতে পারেন:

আপনাকে এই বৈশিষ্ট্যগুলি তৈরি করার জন্য রেফারেন্স হিসাবে GitHub-এ নমুনা Meet অ্যাড-অনগুলি ব্যবহার করতে উত্সাহিত করা হচ্ছে।