Compila un complemento para la Web con el SDK de complementos de Google Meet

En este instructivo, se muestra cómo compilar un complemento con el kit de desarrollo de software (SDK) de complementos de Google Meet para la Web. Esto te permite compartir y colaborar dentro de una app web sin salir de Google Meet.

• 

  El panel lateral del SDK de complementos de Meet para la Web

• 
  La etapa principal del SDK de complementos de Meet para la Web, en la que los usuarios colaboran.

Objetivos

• Crea e implementa un SDK de complementos de Meet para la Web en la consola de Google Cloud.
• Crea una etapa principal y un panel lateral para el SDK de complementos de Meet para la Web.

Prepare el entorno

En esta sección, se muestra cómo crear y configurar un proyecto de Google Cloud para el SDK de complementos de Meet para la Web.

Crea un proyecto de Google Cloud

Consola de Google Cloud

1. En la consola de Google Cloud, ve a Menú > IAM y administración > Crear un proyecto.

   Ir a Crear un proyecto

2. En el campo Nombre del proyecto, ingresa un nombre descriptivo para tu proyecto.

   Opcional: Para editar el ID del proyecto, haz clic en Editar. El ID del proyecto no se puede cambiar después de que se crea, por lo que debes elegir un ID que satisfaga tus necesidades durante todo el ciclo de vida del proyecto.

3. En el campo Ubicación, haz clic en Explorar para mostrar las ubicaciones posibles del proyecto. Luego, haga clic en Seleccionar.
   Precaución: ¿No encuentras tu organización de Google Workspace?
   Esto significa que no accediste a una cuenta de Google Workspace. Algunas de las funciones que se describen en la documentación para desarrolladores de Google Workspace solo están disponibles para proyectos asociados con una organización.
4. Haz clic en Crear. La consola de Google Cloud navega a la página Panel y tu proyecto se crea en unos minutos.

gcloud CLI

En uno de los siguientes entornos de desarrollo, accede a Google Cloud CLI (`gcloud`):

• Cloud Shell: Para usar una terminal en línea con la CLI de gcloud ya configurada, activa Cloud Shell.
  Activar Cloud Shell
• Shell local: Para usar un entorno de desarrollo local, instala e initialize la CLI de gcloud.
  Para crear un proyecto de Cloud, usa el comando “gcloud projects create”:

  gcloud projects create PROJECT_ID

  Reemplaza PROJECT_ID mediante la configuración del ID del proyecto que deseas crear.

Habilita las APIs

Console

1. En la consola de Google Cloud, habilita el SDK de Google Workspace Marketplace y la API de complementos de Google Workspace.

   Habilita las APIs

2. Confirma que estás habilitando las APIs en el proyecto de Cloud correcto y, luego, haz clic en Siguiente.

3. Confirma que estás habilitando las APIs correctas y, luego, haz clic en Habilitar.

gcloud CLI

1. Si es necesario, configura el proyecto actual de Google Cloud como el que creaste con el comando gcloud config set project:

   gcloud config set project PROJECT_ID
   

   Reemplaza PROJECT_ID por el ID del proyecto de Cloud que creaste.

2. Habilita el SDK de Google Workspace Marketplace y la API de complementos de Google Workspace con el comando gcloud services enable:

   gcloud services enable appsmarket-component.googleapis.com gsuiteaddons.googleapis.com
   

Crea e implementa la app web

En la siguiente sección, copiarás y actualizarás todo un proyecto de aplicación web (compilado con Firebase) que contiene todo el código de aplicación necesario para el SDK de complementos de Meet para la Web. Primero, debes configurar e implementar la aplicación web.

Revisa el código de muestra

Puedes ver y descargar la aplicación web base en GitHub.

Ver en GitHub

Esta es una descripción general del código base:

• Se compila con Next.js, un framework basado en React.
• Utiliza Tailwind CSS para el diseño.
• src/components contiene la mayor parte de la lógica de la aplicación. No hay nada para actualizar o modificar aquí.
• src/firebase contiene el código de inicialización y configuración de Firebase.
• src/app contiene los puntos de entrada de la app web.
• src/app/page.tsx es la página principal o la lista de proyectos.
• src/app/project/[id]/page.tsx es la página de un proyecto individual y una lista de tareas.
• .env contiene la configuración del entorno.

Configura el proyecto de Firebase y la CLI

Firebase es una plataforma de desarrollo de aplicaciones web y para dispositivos móviles que ayuda a los desarrolladores a compilar apps. Firestore es una base de datos de documentos NoSQL que permite a los usuarios almacenar, sincronizar y consultar datos en apps web y para dispositivos móviles. Firestore es donde almacenaremos la información de la lista de tareas. Dado que la app usará funciones de Firebase, se deben configurar el proyecto de Firebase junto con Firebase CLI. Para ello, sigue estos pasos:

1. Crea un proyecto de Firebase.

2. Crear una base de datos de Cloud Firestore

3. Instala Firebase CLI o actualízala a su versión más reciente.

4. Ve al directorio raíz de la app base.

5. Inicializa tu proyecto.

   Conecta los archivos de tu proyecto local al proyecto de Firebase:

   firebase init firestore

   Durante la inicialización del proyecto, desde los mensajes de Firebase CLI:

   1. Selecciona una opción:

      Selecciona Use an existing project y, luego, el proyecto de Firebase que creaste.

      El proyecto de Firebase seleccionado es el proyecto “predeterminado” de Firebase para el directorio del proyecto local.

   2. ¿Qué archivo se debe usar para las reglas de Firestore?

      Si muestra (firestore.rules), presiona Intro. De lo contrario, escribe firestore.rules antes de presionar Intro.

   3. El archivo firestore.rules ya existe. ¿Quieres reemplazarla por las reglas de Firestore desde Firebase console? (Sí/No)

      Escribe "N" y presiona Intro.

   4. ¿Qué archivo se debe usar para los índices de Firestore?

      Si muestra (firestore.indexes.json), presiona Intro. De lo contrario, escribe firestore.indexes.json antes de presionar Intro.

La base de datos de Firestore ya está configurada y lista para usarse en la app.

Autentica Firebase con Google

A continuación, habilita la autenticación con el proveedor de Google. Para ello, sigue estos pasos:

1. En Firebase console, ve a la página Authentication.

   Ir a Firebase Authentication

2. Si es la primera vez que configuras un proveedor, haz clic en Set up sign-in method. De lo contrario, haz clic en Agregar proveedor nuevo.

3. Selecciona Google y asegúrate de que el estado esté configurado en Habilitar.

Crea una aplicación web en Firebase

Por último, crea una app web dentro de tu proyecto de Firebase y obtén la configuración. Para ello, sigue estos pasos:

1. En Firebase console, registra la app web en el proyecto de Firebase.

2. Ve a Configuración del proyecto.

3. En Tus apps, busca tu app web registrada y haz clic en ella.

4. Toma nota de los valores de firebaseConfig. Las usarás en la siguiente sección para actualizar las variables de entorno.

Busca el número de proyecto de Google Cloud

1. Abre la consola de Google Cloud.

   Ir a la consola de Google Cloud

2. Junto a la consola de Google Cloud, haz clic en la flecha hacia abajo y selecciona tu proyecto.

3. Haz clic en Menú > Descripción general de Cloud.

4. En la sección Información del proyecto, anota el valor del Número de proyecto. En la siguiente sección, la usarás para actualizar las variables de entorno.

Actualiza las variables de entorno

En el archivo .env del código base, completa lo siguiente con los detalles recopilados en los pasos anteriores:

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

Reemplaza lo siguiente por los valores de firebaseConfig y el número de proyecto recopilados en los pasos anteriores:

• GOOGLE_PROJECT_NUMBER: Es el número del proyecto de Google Cloud.
• PROJECT_ID: El projectId de tu aplicación web de Firebase
• API_KEY: El apiKey de tu aplicación web de Firebase
• AUTH_DOMAIN: El authDomain de tu app web de Firebase
• STORAGE_BUCKET: El storageBucket de tu app web de Firebase
• MSG_SENDER_ID: El messagingSenderId de tu app web de Firebase
• APP_ID: El appId de tu aplicación web de Firebase

Configura las credenciales de tu app

Para configurar las credenciales de tu aplicación de Google, haz lo siguiente:

1. En Firebase console, ve a la página Configuración del proyecto.

   Ir a Configuración del proyecto

2. En la pestaña Cuentas de servicio, selecciona la pestaña SDK de Firebase Admin.

3. Haz clic en Generar nueva clave privada y anota la ruta de acceso al archivo JSON descargado.

4. En la terminal, ejecuta el siguiente comando:

   export GOOGLE_APPLICATION_CREDENTIALS="JSON_PATH"
   

   Reemplaza JSON_PATH por la ruta de acceso en la que se encuentra el archivo JSON descargado.

Realiza la implementación en tu servidor de desarrollo

Ahora que el código y el entorno están en su lugar, puedes implementar la aplicación web en tu servidor de desarrollo local. Para ello, ve al directorio de la app web y haz lo siguiente:

1. Ejecuta el comando npm install y espera a que los módulos de nodo se descarguen y se instalen.

2. Ejecuta el comando npm run dev.

3. Ve a http://localhost:3000/ para validar que la app web esté en funcionamiento.

Usa el SDK de complementos de Meet para la Web

El siguiente paso es realizar las actualizaciones de código necesarias para integrarlo y convertirlo en un complemento de Google Meet. Para ello, sigue estos pasos:

1. Crea el archivo src/meet/meet.d.ts

   1. Puedes obtener los tipos más recientes en https://www.gstatic.com/meetjs/addons/0.7.0/index.d.ts y guardar el archivo de forma local.

2. Crea el archivo src/meet/utils.ts

   1. Agrega la función createAddonSession. Aquí es donde se establece la sesión para comunicarse dentro de Google Meet.

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

3. Crea el directorio src/app/meet. Esto servirá como directorio dedicado para todas las rutas específicas de Meet.

4. Crea el archivo src/app/meet/layout.tsx

   1. El diseño común para todas las páginas relacionadas con Meet Aquí es donde insertas la secuencia de comandos del SDK de Meet y te aseguras de que el SDK se carga antes de renderizar el contenido.

      "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>}
        </>);
      }
      

5. Crea el archivo src/app/meet/sidepanel/page.tsx

   1. El contenido del panel lateral del complemento de Meet. En esta página, se controla específicamente la selección de contenido y la configuración del estado de inicio de la colaboración cuando se selecciona el contenido.

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

6. Crea el archivo src/app/meet/project/\[id\]/page.tsx

   1. El contenido de la escena principal del complemento de Meet. Muestra el contenido del proyecto elegido desde el panel lateral.

      "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 objeto Deployment

Configura la implementación del complemento:

1. En la consola de Google Cloud, ve a API de complementos de Google Workspace.

   Ir a la API de complementos de Google Workspace

2. Haz clic en la pestaña Entornos de ejecución alternativos.

3. Haz clic en Crear implementación nueva y, luego, ingresa el ID de implementación del complemento. El ID de implementación es una string arbitraria que ayuda al desarrollador del complemento a identificar la implementación que contiene el manifiesto del complemento. Los IDs de implementación son obligatorios y pueden tener un máximo de 100 caracteres.

4. Haz clic en Siguiente.

5. Se abrirá un panel lateral para que envíes la especificación del manifiesto del complemento en formato JSON. Usa este panel para ingresar lo siguiente como archivo de manifiesto:

   {
   "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"]
       }
     }
   }
   }
   
   

6. Haz clic en Enviar. Si el complemento se implementó de forma correcta, debería aparecer el siguiente mensaje: Se creó el "ID de implementación".

7. Verifica la implementación en la sección Implementaciones de la página.

Prueba el SDK de complementos de Meet para la Web

Para probar el SDK completo de complementos de Meet para la Web, ejecuta Google Meet y verifica que la app funcione como se espera. Para ello, sigue estos pasos:

1. Ve a Meet y comienza una reunión nueva.
2. Haz clic en Actividades.
3. En la sección Tus complementos, deberías ver Mi primer complemento web de Meet. Selecciónalo para ejecutar el complemento.
4. Una vez que se ejecute el complemento, se abrirá el panel lateral.
5. Accede a la app con tu Cuenta de Google. Una vez que accedas, haz clic en Proyecto nuevo.
6. Selecciona el Proyecto sin título que se creó.
7. Haz clic en Start Activity en el panel lateral.
8. Una vez iniciado, el panel lateral se cierra y se abre la etapa principal.

El complemento ahora se ejecuta como se espera, pero solo para el usuario que accedió a través de la app (paso 5). Los demás participantes que se unan a la actividad a través de Meet no podrán colaborar dentro de la app, ya que no podrán compartir la misma sesión con el primer usuario. Es necesario realizar una implementación posterior (como un mecanismo de uso compartido de tokens) para compartir el contenido con otras personas.

Limpia

Para evitar que se apliquen cargos a tu cuenta de Google Cloud por los recursos que usaste en este instructivo, te recomendamos que borres el proyecto de Cloud.

Precaución: Borrar un proyecto tiene las siguientes consecuencias:

• Se borra todo en el proyecto. Si utilizaste un proyecto existente para este instructivo, cuando lo borres, también borrarás cualquier otro trabajo que hayas realizado en el proyecto.
• Se pierden los ID personalizados de proyectos. Cuando creaste este proyecto, es posible que hayas creado un ID del proyecto personalizado que desees utilizar en el futuro. Para conservar las URLs que usan el ID del proyecto, como una URL en appspot.com, borra los recursos seleccionados dentro del proyecto en lugar de borrar todo el proyecto.

Si planeas explorar varios instructivos y guías de inicio rápido, la reutilización de proyectos puede ayudarte a evitar exceder los límites de las cuotas del proyecto.

1. En la consola de Google Cloud, ve a la página Administrar recursos. Haz clic en Menú > IAM y administración > Administrar recursos.

   Ir a Resource Manager

2. En la lista de proyectos, selecciona el proyecto que deseas borrar y haz clic en Borrar .
3. En el diálogo, escribe el ID del proyecto y, luego, haz clic en Cerrar para borrarlo.

Temas relacionados

• Para obtener más información sobre la colaboración, consulta Colabora con un complemento de Meet.

• Para obtener más información sobre la opción de compartir pantalla, consulta Promueve un complemento a los usuarios mediante la función para compartir pantalla.