इस पेज का अनुवाद Cloud Translation API से किया गया है.

Node.js क्विकस्टार्ट

इस गाइड में किसी सैंपल को सेट अप करने और चलाने का तरीका बताया गया है Google Meet ऐड-ऑन.

मकसद

सैंपल सेट अप करें.
सैंपल चलाएं.

ज़रूरी शर्तें

आपके पास Google Workspace खाता हो, जिसमें Google Meet का ऐक्सेस हो.
Google Cloud प्रोजेक्ट.
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 Cloud प्रोजेक्ट
काम करने वाली डायरेक्ट्री में, https-localhost इंस्टॉल करें पैकेज:
```
 npm install https-localhost --save
```
अपनी वर्किंग डायरेक्ट्री में, सैंपल चलाएं:
```
 node index.js
```
अपने ब्राउज़र में, https://localhost:3000/mainstage.html पर जाएं और वेब पेजों की पुष्टि करने के लिए https://localhost:3000/sidepanel.html.

Meet ऐड-ऑन बनाएं

नीचे दिए गए निर्देशों का पालन करके ऐड-ऑन के डिप्लॉयमेंट को सेट अप करें Meet ऐड-ऑन बनाने का तरीका जानें.

सैंपल चलाएं

Meet पर जाएं.
गतिविधियां पर क्लिक करें.
आपके ऐड-ऑन सेक्शन में, आपको Google Meet Add-ons Quickstart. चलाने के लिए इसे चुनें ऐड-ऑन.