এই পৃষ্ঠাটি Cloud Translation API অনুবাদ করেছে।

Node.js quickstart

এই গাইডটি বর্ণনা করে যে কীভাবে একটি নমুনা Google Meet অ্যাড-অন সেট আপ এবং চালাতে হয়।

উদ্দেশ্য

নমুনা সেট আপ করুন।
নমুনা চালান।

পূর্বশর্ত

Google Meet-এ অ্যাক্সেস সহ একটি Google Workspace অ্যাকাউন্ট।
একটি Google ক্লাউড প্রকল্প ।
Node.js এবং npm ইনস্টল করা হয়েছে।

নমুনা সেট আপ করুন

আপনার কাজের ডিরেক্টরিতে, আপনার প্রকল্প শুরু করতে নিম্নলিখিত কমান্ডটি চালান:
```
 npm init
```
আপনার কাজের ডিরেক্টরিতে, Express.js ইনস্টল করুন:
```
 npm install express --save
```
Meet অ্যাড-অন ওয়েব SDK ইনস্টল করুন:
```
 npm install @googleworkspace/meet-addons --save
```

আপনার কাজের ডিরেক্টরিতে, index.js নামে একটি ফাইল তৈরি করুন এবং নিম্নলিখিত কোডটি পেস্ট করুন:

 const express = require('express');
 const path = require('path');

 var app = express();
 app = require("https-localhost")();

 app.use(express.static(path.join(__dirname, '/')));
 app.use('/', express.static(__dirname + '/node_modules/@googleworkspace/meet-addons'));

 app.get('/sidepanel', function(req, res){
   res.render(path.join(__dirname, 'sidepanel.html'));
 });

 app.get('/mainstage', function(req, res){
   res.render(path.join(__dirname, 'mainstage.html'));
 });

 app.listen(3000);

আপনার কাজের ডিরেক্টরিতে, mainstage.html নামে একটি ফাইল তৈরি করুন এবং নিম্নলিখিত কোডটি পেস্ট করুন:

 <html style="width: 100%; height: 100%">

 <head>
     <title>Main Stage Add On</title>
     <script src="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-collaboration-starting-state">
                     getCollaborationStartingState
                 </button>
             </div>
             <div id="receivedCollaborationStartingState"
                 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-collaboration-starting-state')
                 .addEventListener(
                     'click', async () => {
                         document.getElementById(
                             'receivedCollaborationStartingState').textContent =
                             JSON.stringify(
                                 await mainStageClient.getCollaborationStartingState());
                     });
         }
         document.body.onload = () => {
             init();
         };
     </script>
 </body>

 </html>

আপনার কাজের ডিরেক্টরিতে, sidepanel.html নামে একটি ফাইল তৈরি করুন এবং নিম্নলিখিত কোডটি পেস্ট করুন:

 <html style="width: 100%; height: 100%">

 <head>
     <title>Side Panel Add-on</title>
     <script src="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="set-collaboration-starting-state">
                     setCollaborationStartingState
                 </button>
             </div>
             <div>
                 <input type="text" id="sidePanelIframeUrl" style="margin-left: 20px"
                     value="https://localhost:3000/sidepanel.html" />
             </div>
             <div>
                 <input type="text" id="mainStageIframeUrl" style="margin-left: 20px"
                     value="https://localhost:3000/mainstage.html" />
             </div>
             <div>
                 <input type="text" id="additionalData" style="margin-left: 20px" value="additional data" />
             </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('set-collaboration-starting-state')
                 .addEventListener(
                     'click', async () => {
                         const sidePanelIframeUrlInputElement =
                             document.getElementById('sidePanelIframeUrl');
                         const mainStageIframeUrlInputElement =
                             document.getElementById('mainStageIframeUrl');
                         const additionalDataInputElement =
                             document.getElementById('additionalData');
                         await sidePanelClient.setCollaborationStartingState({
                             sidePanelUrl: sidePanelIframeUrlInputElement.value,
                             mainStageUrl: mainStageIframeUrlInputElement.value,
                             additionalData: additionalDataInputElement.value,
                         });
                     });
         }
         document.body.onload = () => {
             init();
         };
     </script>

 </body>

 </html>

mainstage.html এবং sidepanel.html উভয় ফাইলের জন্য নিম্নলিখিতগুলি প্রতিস্থাপন করুন:
- CLOUD_PROJECT_NUMBER : আপনার Google ক্লাউড প্রকল্পের প্রজেক্ট নম্বর
আপনার কাজের ডিরেক্টরিতে, https-localhost প্যাকেজটি ইনস্টল করুন:
```
 npm install https-localhost --save
```
আপনার কাজের ডিরেক্টরিতে, নমুনা চালান:
```
 node index.js
```
আপনার ব্রাউজারে, ওয়েব পৃষ্ঠাগুলি যাচাই করতে https://localhost:3000/mainstage.html এবং https://localhost:3000/sidepanel.html এ নেভিগেট করুন।

Meet অ্যাড-অন তৈরি করুন

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

নমুনা চালান

মিট এ যান।
কার্যকলাপ ক্লিক করুন .
আপনার অ্যাড-অন বিভাগে, আপনি Google Meet Add-ons Quickstart দেখতে পাবেন। অ্যাড-অন চালানোর জন্য এটি নির্বাচন করুন।