شروع سریع Node.js

این راهنما نحوه راه‌اندازی و اجرای نمونه افزونه Google Meet را شرح می‌دهد.

اهداف

  • نمونه را تنظیم کنید
  • نمونه را اجرا کنید.

پیش نیازها

نمونه را تنظیم کنید

  1. در پوشه کاری خود، دستور زیر را برای مقداردهی اولیه پروژه خود اجرا کنید:

     npm init

  2. در پوشه کاری خود، Express.js را نصب کنید:

     npm install express --save

  3. Meet Add-ons Web SDK را نصب کنید:

     npm install @googleworkspace/meet-addons --save

  4. در پوشه کاری خود، یک فایل به نام 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);

  5. در پوشه کاری خود، یک فایل به نام 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>

  6. در پوشه کاری خود، یک فایل به نام 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>

  7. برای هر دو فایل mainstage.html و sidepanel.html موارد زیر را جایگزین کنید:

    • CLOUD_PROJECT_NUMBER : شماره پروژه پروژه Google Cloud شما

  8. در پوشه کاری خود، بسته https-localhost را نصب کنید:

     npm install https-localhost --save

  9. در پوشه کاری خود، نمونه را اجرا کنید:

     node index.js

  10. در مرورگر خود به https://localhost:3000/mainstage.html و https://localhost:3000/sidepanel.html بروید تا صفحات وب را تأیید کنید.

افزونه Meet را ایجاد کنید

با دنبال کردن دستورالعمل‌های نحوه ساخت افزونه Meet، استقرار افزونه را تنظیم کنید.

نمونه را اجرا کنید

  1. به ملاقات بروید.

  2. روی Activities کلیک کنید نماد فعالیت ها .

  3. در بخش افزونه‌های شما ، باید Google Meet Add-ons Quickstart را ببینید. آن را انتخاب کنید تا افزونه اجرا شود.