يوضّح هذا الدليل طريقة إعداد نموذج وتنفيذه إضافة 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
حدده لتشغيل الإضافية.