Questa pagina è stata tradotta dall'API Cloud Translation.

Crea un componente aggiuntivo per il web utilizzando l'SDK dei componenti aggiuntivi di Google Meet

Questo tutorial mostra come creare un componente aggiuntivo utilizzando il kit di sviluppo software (SDK) dei componenti aggiuntivi di Google Meet per il web. In questo modo puoi condividere e collaborare all'interno di un'app web senza uscire da Google Meet.

Il riquadro laterale dell'SDK dei componenti aggiuntivi di Meet per il web.
La fase principale dell'SDK dei componenti aggiuntivi di Meet per il web in cui gli utenti collaborano.

Obiettivi

Crea ed esegui il deployment di un SDK dei componenti aggiuntivi di Meet per il web nella console Google Cloud.
Crea una fase principale e un riquadro laterale per l'SDK dei componenti aggiuntivi di Meet per il web.

prepara l'ambiente

Questa sezione mostra come creare e configurare un progetto Google Cloud per l'SDK dei componenti aggiuntivi di Meet per il web.

Creare un progetto Google Cloud

Console Google Cloud

Nella console Google Cloud, vai a Menu > IAM e amministrazione > Crea un progetto.
Vai a Crea un progetto
Nel campo Nome progetto, inserisci un nome descrittivo per il progetto.
(Facoltativo) Per modificare l'ID progetto, fai clic su Modifica. L'ID progetto non può essere modificato dopo la creazione del progetto, quindi scegli un ID che soddisfi le tue esigenze per tutta la durata del progetto.
Nel campo Località, fai clic su Sfoglia per visualizzare le potenziali località per il tuo progetto. Poi, fai clic su Seleziona.
Attenzione: non riesci a trovare la tua organizzazione Google Workspace?
Questo significa che non hai eseguito l'accesso a un account Google Workspace. Alcune delle funzionalità descritte nella documentazione per gli sviluppatori di Google Workspace sono disponibili solo per i progetti associati a un'organizzazione.
Fai clic su Crea. La console Google Cloud accede alla pagina Dashboard e il tuo progetto viene creato in pochi minuti.

Interfaccia a riga di comando gcloud

In uno dei seguenti ambienti di sviluppo, accedi a Google Cloud CLI ("gcloud"):

Cloud Shell: per utilizzare un terminale online con gcloud CLI già configurato, attiva Cloud Shell.
Attivare Cloud Shell
shell locale: per utilizzare un ambiente di sviluppo locale, installa e initialize gcloud CLI.
Per creare un progetto Cloud, utilizza il comando "gcloud projects create":
```
gcloud projects create PROJECT_ID
```
Sostituisci PROJECT_ID impostando l'ID per il progetto che vuoi creare.

Abilita le API

Console

Nella console Google Cloud, abilita l'SDK di Google Workspace Marketplace e l'API Google Workspace Add-ons.

Abilita le API
Verifica di abilitare le API nel progetto Cloud corretto, quindi fai clic su Avanti.
Verifica di abilitare le API corrette e fai clic su Abilita.

Interfaccia a riga di comando gcloud

Se necessario, imposta l'attuale progetto Google Cloud su quello creato con il comando gcloud config set project:
```
gcloud config set project PROJECT_ID
```
Sostituisci PROJECT_ID con l'ID progetto del progetto Cloud che hai creato.
Attiva l'SDK di Google Workspace Marketplace e l'API Google Workspace Add-ons con il comando gcloud services enable:
```
gcloud services enable appsmarket-component.googleapis.com gsuiteaddons.googleapis.com
```

Crea ed esegui il deployment dell'app web

Nella sezione seguente copierai e aggiornerai un intero progetto di applicazione web (creato utilizzando Firebase) contenente tutto il codice dell'applicazione richiesto per l'SDK dei componenti aggiuntivi di Meet per il web. Per prima cosa, devi configurare ed eseguire il deployment dell'applicazione web.

Esamina il codice campione

Puoi visualizzare e scaricare l'applicazione web di base su GitHub.

Visualizza su GitHub

Ecco una panoramica del codice di base:

Si basa su Next.js, che è un framework basato su React.
Utilizza il CSS di Tailwind per gli stili.
src/components contiene la maggior parte della logica dell'applicazione. Non ci sono elementi da aggiornare o modificare qui.
src/firebase contiene il codice di configurazione e inizializzazione di Firebase.
src/app contiene i punti di ingresso dell'app web.
src/app/page.tsx è la pagina principale o l'elenco dei progetti.
src/app/project/[id]/page.tsx è la pagina di un singolo progetto e di un elenco di attività.
.env contiene la configurazione dell'ambiente.

configura il progetto Firebase e l'interfaccia a riga di comando

Firebase è una piattaforma per lo sviluppo di applicazioni web e mobile che aiuta gli sviluppatori a creare app. un database di documenti NoSQL che permette di archiviare, sincronizzare ed eseguire query sui dati. in Firestore memorizzeremo le informazioni dell'elenco di cose da fare. Poiché l'app utilizzerà le funzionalità di Firebase, è necessario configurare sia il progetto Firebase sia l'interfaccia a riga di comando di Firebase. Per farlo:

Crea un progetto Firebase.
Crea un database Cloud Firestore.
Installa l'interfaccia a riga di comando di Firebase o esegui l'aggiornamento alla versione più recente.
Vai alla directory radice dell'app di base.
Inizializza il progetto.

Collega i file di progetto locali al tuo progetto Firebase:
```
firebase init firestore
```
Durante l'inizializzazione del progetto, dai prompt dell'interfaccia a riga di comando di Firebase:
1. Seleziona un'opzione:
  
  Seleziona Use an existing project e scegli il progetto Firebase che hai creato.
  
  Il progetto Firebase selezionato è il tuo progetto Firebase "predefinito" per la directory del progetto locale.
2. Quale file deve essere utilizzato per le regole Firestore?
  
  Se è visualizzato (firestore.rules), premi Invio. In caso contrario, digita firestore.rules prima di premere Invio.
3. Il file firestore.rules esiste già. Vuoi sovrascriverla con le regole Firestore della console Firebase? (S/N)
  
  Digita "N" e premi Invio.
4. Quale file dovrebbe essere utilizzato per gli indici Firestore?
  
  Se è visualizzato (firestore.indexes.json), premi Invio. In caso contrario, digita firestore.indexes.json prima di premere Invio.

Il database Firestore è ora configurato e pronto per essere utilizzato per l'app.

Autentica Firebase con Google

Dopodiché, attiva l'autenticazione con il provider Google. Per farlo:

Nella console Firebase, vai alla pagina Autenticazione.

Vai a Firebase Authentication
Se è la prima volta che configuri un provider, fai clic su Metodo di accesso. In caso contrario, fai clic su Aggiungi nuovo provider.
Seleziona Google e assicurati che lo stato sia impostato su Attiva.

Crea un'app web in Firebase

Infine, crea un'app web all'interno del tuo progetto Firebase e ottieni la configurazione. Per farlo:

Nella console Firebase, registra la tua app web nel progetto Firebase.
Vai a Impostazioni progetto.
In Le tue app, trova e fai clic sull'app web registrata.
Prendi nota dei valori in firebaseConfig. Le utilizzerai nella sezione seguente per aggiornare le variabili di ambiente.

Trovare il numero di progetto Google Cloud

Apri la console Google Cloud.

Vai alla console Google Cloud
Accanto a Console Google Cloud, fai clic sulla Freccia giù e seleziona il tuo progetto.
Fai clic su Menu > Panoramica cloud.
Nella sezione Informazioni sul progetto, prendi nota del valore del numero di progetto. Lo utilizzerai nella sezione seguente per aggiornare le variabili di ambiente.

Aggiorna le variabili di ambiente

Nel file .env del codice di base, compila quanto segue con i dettagli derivanti dai passaggi precedenti:

NEXT_PUBLIC_GOOGLE_PROJECT_NUMBER=GOOGLE_PROJECT_NUMBER
NEXT_PUBLIC_GOOGLE_PROJECT_ID=PROJECT_ID
NEXT_PUBLIC_GOOGLE_API_KEY=API_KEY
NEXT_PUBLIC_GOOGLE_AUTH_DOMAIN=AUTH_DOMAIN
NEXT_PUBLIC_GOOGLE_STORAGE_BUCKET=STORAGE_BUCKET
NEXT_PUBLIC_GOOGLE_MSG_SENDER_ID=MSG_SENDER_ID
NEXT_PUBLIC_GOOGLE_APPID=APP_ID

Sostituisci quanto segue utilizzando i valori firebaseConfig e il numero di progetto raccolti nei passaggi precedenti:

GOOGLE_PROJECT_NUMBER: il numero del tuo progetto Google Cloud
PROJECT_ID: projectId della tua app web Firebase
API_KEY: apiKey della tua app web Firebase
AUTH_DOMAIN: authDomain della tua app web Firebase
STORAGE_BUCKET: storageBucket della tua app web Firebase
MSG_SENDER_ID: messagingSenderId della tua app web Firebase
APP_ID: appId della tua app web Firebase

Configura le credenziali dell'app

Per impostare le credenziali dell'applicazione Google, segui questi passaggi:

Nella console Firebase, vai alla pagina Impostazioni progetto.

Vai alle impostazioni del progetto
Nella scheda Account di servizio, seleziona la scheda SDK Firebase Admin.
Fai clic su Genera nuova chiave privata e prendi nota del percorso del file JSON scaricato.
Nel tuo terminale, esegui questo comando:
```
export GOOGLE_APPLICATION_CREDENTIALS="JSON_PATH"
```
Sostituisci JSON_PATH con il percorso in cui si trova il file JSON scaricato.

Esegui il deployment sul tuo server di sviluppo

Ora che il codice e l'ambiente sono pronti, puoi eseguire il deployment dell'app web sul tuo server di sviluppo locale. Per farlo, vai alla directory dell'app web e segui questi passaggi:

Esegui il comando npm install e attendi il download e l'installazione dei moduli del nodo.
Esegui il comando: npm run dev.
Vai a http://localhost:3000/ per verificare che l'app web sia in esecuzione.

Utilizza l'SDK dei componenti aggiuntivi di Meet per il web

Il passaggio successivo consiste nell'apportare gli aggiornamenti necessari al codice per integrarlo e renderlo un componente aggiuntivo di Google Meet. Per farlo:

Crea il file src/meet/meet.d.ts
1. Puoi scaricare gli ultimi tipi da https://www.gstatic.com/meetjs/addons/0.7.0/index.d.ts e salvare il file localmente.

Crea il file src/meet/utils.ts

Aggiungi la funzione createAddonSession. È qui che viene stabilita la sessione per comunicare all'interno di Google Meet.

export function createAddonSession() {
  let session;

  session = window.meet.addon.createAddonSession({
    cloudProjectNumber: `${process.env.NEXT_PUBLIC_GOOGLE_PROJECT_NUMBER}`,
  });
  return session;
}

Crea la directory src/app/meet. che fungerà da directory dedicata per tutte le route specifiche per Meet.

Crea il file src/app/meet/layout.tsx

Il layout comune per tutte le pagine correlate a Meet. Qui devi inserire lo script dell'SDK Meet e assicurarti che l'SDK sia caricato prima di eseguire il rendering dei contenuti.

"use client";

import Script from "next/script";
import { useState } from "react";

type LayoutProps = {
  children: React.ReactNode;
};

/**
* Layout for the add-on pages. Injects the Meet SDK script.
*/
export default function RootLayout({ children }: LayoutProps) {
  const [sdkAvailable, setSdkAvailable] = useState(false);
  return (<>
  <Script
    src="https://www.gstatic.com/meetjs/addons/0.7.0/meet.addons.js"
    onReady={() => setSdkAvailable(true)}
  />
  {sdkAvailable ? children : <div>Loading...</div>}
  </>);
}

Crea il file src/app/meet/sidepanel/page.tsx

I contenuti del riquadro laterale per il componente aggiuntivo di Meet. Questa pagina gestisce in modo specifico la selezione dei contenuti e l'impostazione dello stato di avvio della collaborazione quando i contenuti sono selezionati.

"use client";

import { firebaseApp } from "@/firebase/config";
import { getAuth } from "firebase/auth";
import { ProjectList } from "@/components/ProjectList";
import { createAddonSession } from "@/meet/utils";
import { DocumentReference } from "firebase/firestore";
import { useSearchParams } from "next/navigation";
import { useAuthState, useSignInWithGoogle } from "react-firebase-hooks/auth";
import GoogleButton from "react-google-button";

const auth = getAuth(firebaseApp);

async function startCollaboration(ref: DocumentReference) {
  const url = new URL(window.location.href);

  // Initializing session
  const session = await createAddonSession();
  const client = await session.createSidePanelClient();

  client.setCollaborationStartingState({
    mainStageUrl: `${url.protocol}//${url.host}/meet/project/${ref.id}`,
    sidePanelUrl: `${url.protocol}//${url.host}/meet/sidepanel?participant=true`,
  });
}

export default function Home() {
  const params = useSearchParams();
  const [user] = useAuthState(auth);
  const [signInWithGoogle] = useSignInWithGoogle(auth);

  const handleProjectSelect = async (ref: DocumentReference) => {
    // Before navigating, make sure project selection is saved
    // for when a shared activity is started.
    await startCollaboration(ref);
  };

  if (!user) {
    return (
      <GoogleButton
        onClick={() => signInWithGoogle()}
      ></GoogleButton>
    );
  }

  if (params.get("participant")) {
    return <div>You may now close this panel.</div>;
  }

  return (
    <div className="px-4">
      <ProjectList onSelect={handleProjectSelect} />
    </div>
  );
}

Crea il file src/app/meet/project/\[id\]/page.tsx

I contenuti della fase principale per il componente aggiuntivo di Meet. Visualizza i contenuti del progetto scelto nel riquadro laterale.

"use client";

import { Project } from "@/components/Project";
import { createAddonSession } from "@/meet/utils";
import { firebaseApp } from "@/firebase/config";
import { getAuth, User } from "firebase/auth";
import { useRouter } from "next/navigation";
import { useAuthState, useSignInWithGoogle } from "react-firebase-hooks/auth";
import GoogleButton from "react-google-button";

const auth = getAuth(firebaseApp);

// Monitor auth state changes.
if (typeof window !== "undefined") {
  auth.onAuthStateChanged(() => {
    onAuthStateSettled(auth.currentUser);
  });

  auth.authStateReady().then(() => {
    onAuthStateSettled(auth.currentUser);
  });
}

/**
* Check for auth & doc access when auth state changes.
*/
async function onAuthStateSettled(user: User | null | undefined) {
  const session = await createAddonSession();
  const client = await session.createMainStageClient();

  // For participants, side panel should be closed after authentication
  await client.unloadSidePanel();
}

type PageParams = {
  params: {
    id: string;
  };
};

  export default function Page({ params }: PageParams) {
  const router = useRouter();
  const [user, isUserLoading] = useAuthState(auth);

  if (window.meet.addon.getFrameType() === "MAIN_STAGE") {
    if (isUserLoading) {
      return <div>Loading...</div>;
    }
  }

  if (!user) {
    return (
        <GoogleButton
          onClick={() => signInWithGoogle()}
        ></GoogleButton>
      );
  }

  let backButton = null;
  if (window.meet.addon.getFrameType() === "SIDE_PANEL") {
    backButton = (
      <div className="px-2 pb-2 -my-2">
        <button className="flex flex-row" onClick={() => router.back()}>
          <span className="material-icons">arrow_back</span>previous screen
          <div className="sr-only">navigate back</div>
        </button>
      </div>
    );
  }

  return (
    <div className="w-full min-h-screen px-2">
      {backButton}
      <div className="flex flex-col min-h-screeen">
        <Project id={params.id} />
      </div>
    </div>
  );
}

crea un deployment

Configura il deployment del componente aggiuntivo:

Nella console Google Cloud, vai all'API Google Workspace Add-ons.

Vai all'API Google Workspace Add-ons
Fai clic sulla scheda Runtime alternativi.
Fai clic su Crea nuovo deployment e inserisci l'ID deployment del componente aggiuntivo. L'ID deployment è una stringa arbitraria che aiuta lo sviluppatore di componenti aggiuntivi a identificare il deployment contenente il manifest del componente aggiuntivo. Gli ID deployment sono obbligatori e possono contenere al massimo 100 caratteri.
Tocca Avanti.

Si apre un riquadro laterale in cui puoi inviare la specifica del file manifest del componente aggiuntivo in formato JSON. Usa questo riquadro per inserire quanto segue come file manifest:

{
"addOns": {
  "common": {
    "name": "My First Meet Web Add-on",
    "logoUrl": "https://fonts.gstatic.com/s/i/googlematerialicons/markunread_mailbox/v6/black-24dp/1x/gm_markunread_mailbox_black_24dp.png"
  },
  "meet": {
    "web": {
      "sidePanelUri": "http://localhost:3000/meet/sidepanel",
      "addOnOrigins": ["http://localhost:3000"]
    }
  }
}
}

Fai clic su Invia. Se il deployment del componente aggiuntivo è stato eseguito correttamente, dovrebbe essere visualizzato il seguente messaggio: Deployment "ID" creato.
Verifica il deployment nella sezione Deployment della pagina.

Testare l'SDK dei componenti aggiuntivi di Meet per il web

Per testare l'SDK completo dei componenti aggiuntivi di Meet per il web, esegui Google Meet e verifica che l'app funzioni come previsto. Per farlo:

Vai a Meet e avvia una nuova riunione.
Fai clic su Attività.
Nella sezione I tuoi componenti aggiuntivi, dovresti vedere Il mio primo componente aggiuntivo di Meet per il web. Selezionala per eseguire il componente aggiuntivo.
Una volta eseguito il componente aggiuntivo, si apre il riquadro laterale.
Accedi all'app con il tuo Account Google. Dopo aver eseguito l'accesso, fai clic su Nuovo progetto.
Seleziona il Progetto senza titolo creato.
Fai clic su Avvia attività nel riquadro laterale.
Una volta avviato, il riquadro laterale si chiude e si apre la fase principale.

Ora il componente aggiuntivo viene eseguito come previsto, ma solo per l'utente che ha eseguito l'accesso tramite l'app (passaggio 5). Gli altri partecipanti che partecipano all'attività tramite Meet non possono collaborare all'interno dell'app perché non possono condividere la stessa sessione con il primo utente. È necessaria un'ulteriore implementazione (ad esempio un meccanismo di condivisione dei token) per condividere i contenuti con altri.

Esegui la pulizia

Per evitare che al tuo account Google Cloud vengano addebitati costi relativi alle risorse utilizzate in questo tutorial, ti consigliamo di eliminare il progetto Cloud.

Nella console Google Cloud, vai alla pagina Gestisci risorse. Fai clic su Menu > IAM e amministrazione > Gestisci risorse.
Vai a Resource Manager
Nell'elenco dei progetti, seleziona quello da eliminare e fai clic su Elimina .
Nella finestra di dialogo, digita l'ID progetto e fai clic su Arresta per eliminare il progetto.

Argomenti correlati

Per scoprire di più sulla collaborazione, consulta Collaborare utilizzando un componente aggiuntivo di Meet.
Per scoprire di più sulla condivisione schermo, vedi Promuovere un componente aggiuntivo per gli utenti tramite la condivisione schermo.