Trang này được dịch bởi Cloud Translation API.

Bắt đầu nhanh Node.js

Hướng dẫn này mô tả cách thiết lập và chạy một mẫu Tiện ích bổ sung Google Meet.

Mục tiêu

Thiết lập mẫu.
Chạy mẫu.

Điều kiện tiên quyết

Một tài khoản Google Workspace có quyền truy cập vào Google Meet.
Một dự án trên Google Cloud.
Node.js và npm .

Thiết lập mẫu

Trong thư mục đang làm việc, hãy chạy lệnh sau để khởi chạy dự án:
```
 npm init
```
Trong thư mục đang làm việc, hãy cài đặt Express.js:
```
 npm install express --save
```
Cài đặt SDK dành cho web tiện ích bổ sung của Meet:
```
 npm install @googleworkspace/meet-addons --save
```

Trong thư mục đang làm việc, hãy tạo một tệp có tên index.js rồi dán mã sau:

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

Trong thư mục đang làm việc, hãy tạo một tệp có tên mainstage.html rồi dán mã sau:

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

Trong thư mục đang làm việc, hãy tạo một tệp có tên sidepanel.html rồi dán mã sau:

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

Thay thế nội dung sau cho cả tệp mainstage.html và sidepanel.html:
- CLOUD_PROJECT_NUMBER: Số dự án của bạn Dự án trên Google Cloud
Trong thư mục đang hoạt động, hãy cài đặt https-localhost gói:
```
 npm install https-localhost --save
```
Trong thư mục đang hoạt động, hãy chạy mẫu:
```
 node index.js
```
Trong trình duyệt, hãy chuyển đến https://localhost:3000/mainstage.html rồi https://localhost:3000/sidepanel.html để xác minh trang web.

Tạo tiện ích bổ sung cho Meet

Thiết lập quy trình triển khai tiện ích bổ sung bằng cách làm theo hướng dẫn về cách Tạo tiện ích bổ sung cho Meet.

Chạy mẫu

Chuyển đến Meet.
Nhấp vào biểu tượng Hoạt động .
Trong phần Tiện ích bổ sung của bạn, bạn sẽ thấy Google Meet Add-ons Quickstart. Chọn hồ sơ đó để chạy tiện ích bổ sung.