Seguidores

sábado, 14 de junho de 2025

Dashboard de Produtividade Pessoal T1E06: Caso de Teste 1 - BugCT1-1 Falta API do Google Sheets

INTRODUÇÃO

Post anterior: Dashboard de Produtividade Pessoal T1E05: Caso de Teste 1 falhou - BugCT1-1

O objetivo deste post é apresentar um prompt para o Gemini 2.5 Pro (Prévia), cujo objetivo é pedir instruções para ativar a API do Google Sheets, a fim de solucionar o BugTCT1-1, que foi encontrado na execução do Caso de Teste 1 do Dashboard de Produtividade Pessoal (App D2P).


Pergunta ao Gemini 2.5 Pro (Prévia)

A fim de resolver o BugCT1-1, preciso de instruções para criar "chave de API ou ID de cliente OAuth", pois não tenho o conhecimento necessário para executar essa tarefa. 

Dúvidas: 

  1. Preciso da chave de API e de cliente OAuth ou só de um desses? 
  2. Preciso criar um projeto específico para o Dashboard no Google Cloud Console ou pode ser em qualquer projeto?

Resposta do Gemini 2.5 Pro (Prévia)

Link da conversa: https://g.co/gemini/share/4991bbebcce9

 

Excelente pergunta! Essa é a causa raiz do problema. Sem as credenciais corretas, seu aplicativo não tem permissão para "conversar" com a API do Google e modificar sua planilha.

Vamos esclarecer suas dúvidas e criar a credencial passo a passo.

Respondendo às suas Dúvidas

1) Preciso da chave de API e de cliente OAuth ou só de um desses?

Você precisa de apenas um, e a escolha correta para a sua aplicação é o ID de Cliente OAuth 2.0.

  • Chave de API (API Key): É mais simples e serve para acessar dados públicos. Você poderia usá-la se sua planilha estivesse "pública e editável por qualquer pessoa na internet", o que é uma péssima ideia em termos de segurança.
  • ID de Cliente OAuth 2.0 (OAuth Client ID): É o método seguro e correto para o seu caso. Ele permite que seu aplicativo peça permissão ao usuário (você) para acessar os dados dele (sua planilha privada) em seu nome. Quando você vê uma tela de "Permitir" do Google, isso é o OAuth em ação.

Conclusão: Você só precisa do ID de Cliente OAuth 2.0.

2) Preciso criar um projeto específico para o Dashboard no Google Cloud ou pode ser em qualquer projeto?

Tecnicamente, você pode usar um projeto existente. No entanto, é altamente recomendado criar um projeto novo e específico para o seu "Dashboard de Produtividade Pessoal (D2P)".

  • Organização: Mantém todos os recursos (APIs, credenciais, etc.) do seu dashboard em um único lugar.
  • Segurança: Isola as permissões. Se algo der errado ou a credencial vazar, o impacto fica contido apenas neste projeto.
  • Gerenciamento: Facilita o monitoramento do uso da API e a limpeza de todos os recursos caso você descontinue o projeto no futuro.

Conclusão: Crie um novo projeto. É a melhor prática.


Passo a Passo: Criando seu ID de Cliente OAuth 2.0

Siga estas instruções com atenção. Os nomes podem variar um pouco dependendo do idioma da sua conta Google.

Passo 1: Criar um Projeto no Google Cloud Console

  1. Acesse o Google Cloud Console.
  2. No canto superior esquerdo, clique no seletor de projetos (ao lado do logo "Google Cloud").
  3. Na janela que abrir, clique em "NOVO PROJETO".
  4. Dê um nome ao projeto, por exemplo: Dashboard de Produtividade D2P.
  5. Clique em "CRIAR".

Passo 2: Ativar a API do Google Sheets

  1. Certifique-se de que seu novo projeto (Dashboard de Produtividade D2P) está selecionado no topo da página.
  2. No menu de navegação à esquerda () ou na barra de busca, procure por "APIs e Serviços".
  3. Clique em "+ ATIVAR APIS E SERVIÇOS".
  4. Na barra de busca da biblioteca de APIs, digite Google Sheets API e selecione-a.
  5. Clique no botão "ATIVAR".

Passo 3: Configurar a Tela de Consentimento OAuth

Esta é a tela que aparecerá para você pedindo permissão para que o app acesse seus dados.

  1. No menu à esquerda, vá em APIs e Serviços > Tela de consentimento OAuth.
  2. Selecione o tipo de usuário "Externo" e clique em "CRIAR".
  3. Preencha as informações necessárias:
    • Nome do app: Dashboard de Produtividade Pessoal
    • E-mail para suporte do usuário: Coloque o seu próprio e-mail.
    • Informações de contato do desenvolvedor: Coloque seu e-mail novamente.
  4. Clique em "SALVAR E CONTINUAR".
  5. Na tela de "Escopos", não precisa adicionar nada agora. Apenas role para baixo e clique em "SALVAR E CONTINUAR".
  6. Na tela de "Usuários de teste", você precisa se adicionar:
    • Clique em "+ ADD USERS".
    • Digite o endereço de e-mail da Conta Google que você usará para acessar o dashboard e que é dona da planilha.
    • Clique em "ADICIONAR".
  7. Clique em "SALVAR E CONTINUAR" e depois volte ao painel.

Passo 4: Criar a Credencial (O ID de Cliente OAuth)

Este é o passo final e mais importante.

  1. No menu à esquerda, vá para APIs e Serviços > Credenciais.
  2. Clique em "+ CRIAR CREDENCIAIS" e selecione "ID do cliente OAuth".
  3. Em "Tipo de aplicativo", selecione "Aplicativo da Web".
  4. Dê um nome para a credencial, por exemplo: Cliente Web do Dashboard D2P.
  5. Agora, configure as URIs, que são essenciais para a segurança:
    • Origens JavaScript autorizadas: Aqui você informa de qual endereço seu aplicativo será executado. Para desenvolvimento local, adicione:
      • http://localhost
      • http://127.0.0.1 (Se você usa uma porta específica, como 3000 ou 8080, adicione também: http://localhost:3000 ou http://localhost:8080).
    • URIs de redirecionamento autorizados: É para onde o Google te envia após a autenticação. Geralmente é o mesmo endereço. Adicione os mesmos valores:
      • http://localhost
      • http://127.0.0.1 (E as variações com porta, se aplicável).
  6. Clique em "CRIAR".

Passo 5: Copiar seu ID de Cliente

Uma janela aparecerá mostrando "Seu ID do cliente" e "Sua chave secreta do cliente".

  • O que você precisa é o "ID do cliente" (Client ID). Ele se parecerá com algo do tipo: 1234567890-xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx.apps.googleusercontent.com.

Copie este valor.

756336753138-q6bta7q070rrfmdqp92tqk0jdd0ilpct.apps.googleusercontent.com

Próximos Passos

Agora, você precisa inserir este ID do Cliente no código do seu front-end. Ele será usado na inicialização da biblioteca da API do Google (GAPI) para que ela saiba qual aplicação está fazendo a requisição.

Procure no seu código por um bloco parecido com este e insira seu ID:

JavaScript

// Exemplo de onde a credencial é usada no código do front-end

function start() {

  gapi.client.init({

      'clientId': 'COLE_SEU_ID_DE_CLIENTE_AQUI.apps.googleusercontent.com',

      'scope': 'https://www.googleapis.com/auth/spreadsheets',

      'discoveryDocs': ['https://sheets.googleapis.com/$discovery/rest?version=v4'],

  }).then(function() {

    // Código continua...

  });

}

 

gapi.load('client', start);

Com esta credencial configurada corretamente no seu código, a autenticação deverá funcionar, e a aplicação terá a permissão necessária para finalmente gravar os dados na sua planilha.

CONCLUSÃO

No próximo post será apresentado o resultado desta correção.

Nenhum comentário:

Postar um comentário

Entendendo a Metáfora "Home Office é Moto Boy"

Dashboard de Produtividade Pessoal T1E13: BugCT1-5 Erro 400 no login

INTRODUÇÃO Post anterior:  Dashboard de Produtividade Pessoal T1E12: BugCT1-4 Código pronto para login com Google Identity Services (GIS) O ...