Cette page a été traduite par l'API Cloud Translation.

Guide de démarrage rapide pour Node.js

Ce guide explique comment configurer et exécuter un exemple Module complémentaire Google Meet.

Objectifs

Configurez l'exemple.
Exécutez l'exemple.

Prérequis

Un compte Google Workspace ayant accès à Google Meet
un projet Google Cloud ;
Node.js et npm installés.

Configurer l'exemple

Dans votre répertoire de travail, exécutez la commande suivante pour initialiser votre projet:
```
 npm init
```
Dans votre répertoire de travail, installez Express.js:
```
 npm install express --save
```
Installez le SDK Web des modules complémentaires Meet:
```
 npm install @googleworkspace/meet-addons --save
```

Dans votre répertoire de travail, créez un fichier nommé index.js et collez la commande code suivant:

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

Dans votre répertoire de travail, créez un fichier nommé mainstage.html et collez la commande code suivant:

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

Dans votre répertoire de travail, créez un fichier nommé sidepanel.html et collez la commande code suivant:

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

Remplacez le code suivant pour les fichiers mainstage.html et sidepanel.html:
- CLOUD_PROJECT_NUMBER: numéro de votre projet Projet Google Cloud
Dans votre répertoire de travail, installez https-localhost package:
```
 npm install https-localhost --save
```
Dans votre répertoire de travail, exécutez l'exemple:
```
 node index.js
```
Dans votre navigateur, accédez à https://localhost:3000/mainstage.html, puis https://localhost:3000/sidepanel.html pour valider les pages Web.

Créer le module complémentaire Meet

Configurez le déploiement du module complémentaire en suivant les instructions des instructions pour créer un module complémentaire Meet.

Exécuter l'exemple

Accédez à Meet.
Cliquez sur Activités .
Dans la section Vos modules complémentaires, vous devriez voir Google Meet Add-ons Quickstart Sélectionnez-le pour exécuter un module complémentaire.