Criar um complemento para a Web usando o SDK de complementos do Meet

Este tutorial mostra como criar um complemento usando o Kit de desenvolvimento de software (SDK) de complementos do Google Meet para a Web. Isso permite que você compartilhe e colabore em um app da Web sem sair do Google Meet.

• 

  Painel lateral do SDK de complementos do Meet para Web.

• 
  O estágio principal do SDK de complementos do Meet para a Web em que os usuários colaboram.

Objetivos

• Criar e implantar um SDK de complementos do Meet para a Web no console do Google Cloud.
• Crie um cenário principal e um painel lateral para o SDK de complementos do Meet para Web.

Prepare o ambiente

Nesta seção, mostramos como criar e configurar um projeto do Google Cloud para o SDK de complementos do Meet para Web.

Criar um projeto do Google Cloud

Console do Google Cloud

1. No console do Google Cloud, acesse Menu > IAM e administrador > Criar um projeto.

   Acessar "Criar um projeto"

2. No campo Nome do projeto, digite um nome descritivo para o projeto.

   Opcional: para mudar o ID do projeto, clique em Editar. O ID do projeto não pode ser alterado após a criação dele. Portanto, escolha um ID que atenda às suas necessidades durante a vida útil do projeto.

3. No campo Local, clique em Procurar para exibir possíveis locais para seu projeto. Em seguida, clique em Selecionar.
   Atenção: não consegue encontrar sua organização do Google Workspace?
   Isso significa que você não fez login em uma conta do Google Workspace. Alguns dos recursos descritos na documentação do desenvolvedor do Google Workspace estão disponíveis apenas para projetos associados a uma organização.
4. Clique em Criar. O console do Google Cloud navega até a página "Painel", e seu projeto é criado em alguns minutos.

CLI da gcloud

Em um dos seguintes ambientes de desenvolvimento, acesse a CLI do Google Cloud ("gcloud"):

• Cloud Shell: para usar um terminal on-line com a CLI gcloud já configurada, ative o Cloud Shell.
  Ative o Cloud Shell
• Shell local: para usar um ambiente de desenvolvimento local, instale e initialize a CLI gcloud.
  Para criar um projeto do Cloud, use o comando "gcloud projects create":

  gcloud projects create PROJECT_ID

  Substitua PROJECT_ID definindo o ID do projeto que você quer criar.

Ative as APIs

Console

1. No console do Google Cloud, ative o SDK do Google Workspace Marketplace e a API Google Workspace Add-ons.

   Ativar as APIs

2. Confirme se você está ativando as APIs no projeto correto do Cloud e clique em Próxima.

3. Confirme se você ativou as APIs corretas e clique em Ativar.

CLI da gcloud

1. Se necessário, defina o projeto atual do Google Cloud para aquele que você criou com o comando gcloud config set project:

   gcloud config set project PROJECT_ID
   

   Substitua PROJECT_ID pelo ID do projeto do projeto do Cloud que você criou.

2. Ative o SDK do Google Workspace Marketplace e a API Google Workspace Add-ons com o comando gcloud services enable:

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

Criar e implantar o app da Web

Na seção a seguir, você copiará e atualizará um projeto de aplicativo da Web inteiro (criado com o Firebase) com todo o código do aplicativo necessário para o SDK de complementos do Meet para Web. Primeiro, você precisa configurar e implantar o aplicativo da Web.

Analisar o exemplo de código

Você pode conferir e fazer o download do aplicativo da Web de base no GitHub.

Ver no GitHub

Esta é uma visão geral do código base:

• Ele é criado usando o Next.js, que é um framework baseado em React.
• Ele usa o CSS do Tailwind para definir o estilo.
• src/components contém a maior parte da lógica do aplicativo. Não há nada para atualizar ou modificar aqui.
• src/firebase contém o código de configuração e inicialização do Firebase.
• src/app contém os pontos de entrada do app da Web.
• src/app/page.tsx é a página principal ou a lista de projetos.
• src/app/project/[id]/page.tsx é a página de um projeto individual e a lista de tarefas.
• .env contém a configuração do ambiente.

Configurar o projeto e a CLI do Firebase

O Firebase é uma plataforma de desenvolvimento de aplicativos móveis e da Web que ajuda desenvolvedores a criar aplicativos. O Firestore é um banco de dados de documentos NoSQL que permite aos usuários armazenar, sincronizar e consultar dados de apps da Web e para dispositivos móveis. O Firestore é onde vamos armazenar as informações da lista de tarefas. Como o app usará recursos do Firebase, o projeto e a CLI do Firebase precisam ser configurados. Para isso, siga estas etapas:

1. Crie um projeto do Firebase.

2. Crie um banco de dados do Cloud Firestore.

3. Instale a CLI do Firebase ou atualize para a versão mais recente.

4. Acesse o diretório raiz do app de base.

5. Inicialize seu projeto.

   Conecte os arquivos do projeto local ao projeto do Firebase:

   firebase init firestore

   Durante a inicialização do projeto, siga estas etapas nas solicitações da CLI do Firebase:

   1. Selecione uma opção:

      Selecione Use an existing project e escolha o projeto do Firebase que você criou.

      O projeto do Firebase selecionado é o "padrão" para o diretório do projeto local.

   2. Qual arquivo deve ser usado para as regras do Firestore?

      Se aparecer (firestore.rules), pressione Enter. Caso contrário, digite firestore.rules antes de pressionar Enter.

   3. O arquivo firestore.rules já existe. Você quer substituí-la pelas regras do Firestore no Console do Firebase? (S/N)

      Digite "N" e pressione Enter.

   4. Qual arquivo deve ser usado para índices do Firestore?

      Se aparecer (firestore.indexes.json), pressione Enter. Caso contrário, digite firestore.indexes.json antes de pressionar Enter.

O banco de dados do Firestore agora está configurado e pronto para ser usado no app.

Autenticar o Firebase com o Google

Em seguida, ative a autenticação com o provedor do Google. Para isso, siga estas etapas:

1. No Console do Firebase, acesse a página Autenticação.

   Acessar o Firebase Authentication

2. Se esta for a primeira vez que você configura um provedor, clique em Configurar o método de login. Caso contrário, clique em Adicionar novo provedor.

3. Selecione Google e verifique se o status está definido como Ativar.

Criar um app da Web no Firebase

Por fim, crie um app da Web dentro do seu projeto do Firebase e acesse a configuração. Para isso, siga estas etapas:

1. No Console do Firebase, registre o app da Web no seu projeto do Firebase.

2. Acesse Configurações do projeto.

3. Em Seus apps, encontre e clique no app da Web registrado.

4. Anote os valores em firebaseConfig. Você as usará na próxima seção para atualizar as variáveis de ambiente.

Encontrar o número do projeto do Google Cloud

1. Abra o console do Google Cloud.

   Acessar o Console do Google Cloud

2. Ao lado do Console do Google Cloud, clique na seta para baixo e selecione o projeto.

3. Clique em Menu > Visão geral do Cloud.

4. Na seção Informações do projeto, anote o valor do Número do projeto. Você o usará na próxima seção para atualizar as variáveis de ambiente.

Atualizar as variáveis de ambiente

No arquivo .env do código base, preencha o seguinte com os detalhes coletados nas etapas 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

Substitua o seguinte usando os valores firebaseConfig e o número do projeto coletados nas etapas anteriores:

• GOOGLE_PROJECT_NUMBER: o número do projeto do Google Cloud
• PROJECT_ID: o projectId do seu app da Web do Firebase
• API_KEY: o apiKey do seu app da Web do Firebase
• AUTH_DOMAIN: o authDomain do app da Web do Firebase
• STORAGE_BUCKET: o storageBucket do app da Web do Firebase
• MSG_SENDER_ID: o messagingSenderId do seu app da Web do Firebase
• APP_ID: o appId do seu app da Web do Firebase

Configurar as credenciais do app

Para configurar as credenciais do Google app, faça o seguinte:

1. No Console do Firebase, acesse a página Configurações do projeto.

   Acessar as configurações do projeto

2. Na guia Contas de serviço, selecione a guia SDK Admin do Firebase.

3. Clique em Gerar nova chave privada e anote o caminho para o arquivo JSON salvo.

4. No seu terminal, execute o comando:

   export GOOGLE_APPLICATION_CREDENTIALS="JSON_PATH"
   

   Substitua JSON_PATH pelo caminho em que o arquivo JSON transferido por download está localizado.

Implantar no seu servidor de desenvolvimento

Agora que o código e o ambiente estão prontos, implante o app da Web no servidor de desenvolvimento local. Acesse o diretório do seu app da Web e faça o seguinte:

1. Execute o comando npm install e aguarde o download e a instalação dos módulos de nó.

2. Execute o comando: npm run dev.

3. Acesse http://localhost:3000/ para validar se o app da Web está em execução.

Usar o SDK de complementos do Meet para Web

A próxima etapa é fazer as atualizações necessárias no código para integrar o código e torná-lo um complemento do Google Meet. Para isso, siga estas etapas:

1. Crie o arquivo src/meet/meet.d.ts

   1. Faça o download dos tipos mais recentes em https://www.gstatic.com/meetjs/addons/0.7.0/index.d.ts e salve o arquivo localmente.

2. Crie o arquivo src/meet/utils.ts

   1. Adicione a função createAddonSession. É aqui que a sessão é estabelecida para se comunicar no Google Meet.

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

3. Crie o diretório src/app/meet. Ele servirá como o diretório dedicado para todas as rotas específicas do Meet.

4. Crie o arquivo src/app/meet/layout.tsx

   1. O layout comum para todas as páginas relacionadas ao Meet. É aqui que você injeta o script do SDK do Meet e verifica se o SDK está carregado antes de renderizar qualquer conteúdo.

      "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. Crie o arquivo src/app/meet/sidepanel/page.tsx

   1. O conteúdo do painel lateral do complemento do Meet. Esta página processa especificamente a seleção de conteúdo e define o estado inicial da colaboração quando o conteúdo é selecionado.

      "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. Crie o arquivo src/app/meet/project/\[id\]/page.tsx

   1. O conteúdo do cenário principal do complemento do Meet. Ele mostra o conteúdo do projeto escolhido no painel 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>
        );
      }
      

Criar uma implantação

Configure a implantação do complemento:

1. No console do Google Cloud, acesse API Google Workspace Add-ons.

   Acessar a API Google Workspace Add-ons

2. Clique na guia Alternative Runtimes.

3. Clique em Criar nova implantação e insira o ID de implantação do complemento. O ID de implantação é uma string arbitrária que ajuda o desenvolvedor de complementos a identificar a implantação que contém o manifesto do complemento. Os IDs de implantação são obrigatórios e podem ter no máximo 100 caracteres.

4. Clique em Próxima.

5. Um painel lateral é aberto para você enviar a especificação do manifesto do complemento no formato JSON. Use esse painel para inserir o seguinte como seu arquivo de manifesto:

   {
   "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. Clique em Enviar. Se o complemento for implantado com sucesso, a seguinte mensagem será exibida: Deployment "ID" created.

7. Verifique a implantação na seção Implantações da página.

Testar o SDK de complementos do Meet para Web

Para testar o SDK de complementos do Meet para Web, execute o Google Meet e verifique se o app funciona conforme o esperado. Para isso, siga estas etapas:

1. Acesse o Meet e inicie uma nova reunião.
2. Clique em Atividades.
3. Na seção Seus complementos, você verá Meu primeiro complemento do Meet para Web. Selecione-o para executar o complemento.
4. Depois que o complemento for executado, o painel lateral será aberto.
5. Faça login no app usando sua Conta do Google. Após o login, clique em Novo projeto.
6. Selecione o projeto sem título que foi criado.
7. Clique em Iniciar atividade no painel lateral.
8. Depois que ele for iniciado, o painel lateral será fechado, e o cenário principal será aberto.

O complemento agora é executado conforme esperado, mas apenas para o usuário que fez login pelo app (Etapa 5). Os outros participantes que participarem da atividade pelo Meet não poderão colaborar no app, já que não podem compartilhar a mesma sessão com o primeiro usuário. há necessidade de outras implementações, como um mecanismo de compartilhamento de token, para compartilhar o conteúdo com outras pessoas.

Limpar

Para evitar cobranças na sua conta do Google Cloud pelos recursos usados neste tutorial, recomendamos que você exclua o projeto do Cloud.

Cuidado:excluir um projeto tem os seguintes efeitos:

• Tudo no projeto é excluído. Se você tiver usado um projeto atual para seguir este tutorial, a exclusão dele incluirá quaisquer outras ações feitas no projeto.
• Os IDs do projeto personalizados são perdidos. Ao criar o projeto, você pode ter criado um ID do projeto personalizado para ser usado no futuro. Para preservar os URLs que usam o ID do projeto, como um URL em appspot.com, exclua os recursos selecionados dentro do projeto em vez de excluir o projeto inteiro.

Se você planeja conferir vários tutoriais e guias de início rápido, a reutilização de projetos pode evitar que você exceda os limites da cota do projeto.

1. No Console do Google Cloud, acesse a página Gerenciar recursos. Clique em Menu > IAM e administrador > Gerenciar recursos.

   Acessar o Resource Manager

2. Na lista de projetos, selecione o projeto que você quer excluir e clique em Excluir .
3. Na caixa de diálogo, digite o ID do projeto e clique em Encerrar para excluí-lo.

Temas relacionados

• Para saber mais sobre colaboração, consulte Colaborar usando um complemento do Meet.

• Para saber mais sobre compartilhamento de tela, consulte Promover um complemento para os usuários pelo compartilhamento de tela.