تمت ترجمة هذه الصفحة بواسطة Cloud Translation API‏.

التشغيل السريع لـ Node.js

يوضّح هذا الدليل طريقة إعداد نموذج وتنفيذه إضافة Google Meet.

الأهداف

إعداد العيّنة
نفِّذ النموذج.

المتطلبات الأساسية

حساب على Google Workspace لديه إمكانية الوصول إلى Google Meet.
مشروع على Google Cloud
Node.js وnpm مثبت.

إعداد العيّنة

في دليل العمل، شغِّل الأمر التالي لإعداد المشروع:
```
 npm init
```
في دليل العمل، ثبِّت Express.js:
```
 npm install express --save
```
ثبِّت حزمة تطوير البرامج (SDK) للإضافات على الويب في Meet:
```
 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 حدده لتشغيل الإضافية.