INTRODUÇÃO
Post anterior: Dashboard de Produtividade Pessoal T1E08: BugCT1-2 Não fez login
O objetivo deste post é apresentar um prompt para o Gemini 2.5 Pro (Prévia), no qual é feito o relato do bug do Caso de Teste 1, identificado por "BugCT1-3 Falha no login".
Prompt para o Gemini 2.5 Pro (Prévia)
Não apareceram na aba "Console" as mensagens
"Cliente GAPI inicializada" e "Usuário não está logado".
Seguem abaixo as mensagens que estão aparecendo na aba Console do Chrome:
cdn.tailwindcss.com should not be used in production. To use
Tailwind CSS in production, install it as a PostCSS plugin or use the Tailwind
CLI: https://tailwindcss.com/docs/installation
(anônimo) @ (índice):64Entenda o aviso
D2P.html:605 Uncaught TypeError: Cannot read properties of
null (reading 'addEventListener')
at HTMLDocument.init (D2P.html:605:29)Entenda
o erro
D2P.html:772 ✅ Bibliotecas do Google
carregadas.
api.js:24 Uncaught VwEntenda o erro
D2P.html:1 Access to XMLHttpRequest at
'https://apis.google.com/_/jserror?script=file%3A%2F%2F%2FC%3A%2FUsers%2FGustavo%2FOneDrive%2F_Blog%2FGemini%2FAutoma%25C3%25A7%25C3%25A3o%2FCanvas%2FDashboard%2520T1%2FD2P.html&error=Invalid%20cookiePolicy&line=Not%20available'
from origin 'null' has been blocked by CORS policy: No
'Access-Control-Allow-Origin' header is present on the requested
resource.Entenda o erro
apis.google.com/_/jserror?script=file%3A%2F%2F%2FC%3A%2FUsers%2FGustavo%2FOneDrive%2F_Blog%2FGemini%2FAutoma%25C3%25A7%25C3%25A3o%2FCanvas%2FDashboard%2520T1%2FD2P.html&error=Invalid%20cookiePolicy&line=Not%20available:1
Failed to load
resource: net::ERR_FAILEDEntenda o erro
Failed to execute 'postMessage' on 'DOMWindow': The target
origin provided ('file://') does not match the recipient window's origin
('null').
Resposta do Gemini 2.5 Pro (Prévia)
Olá! Excelente feedback. Os
erros que você enviou são extremamente claros e apontam para uma causa raiz
específica.
O problema principal é que você está abrindo o arquivo HTML diretamente no navegador (usando
o protocolo file://). O sistema de login do Google (OAuth 2.0) não funciona dessa
maneira por motivos de segurança e é a causa de todos os erros CORS policy, postMessage e Uncaught Vw.
Vamos analisar e corrigir tudo.
## Diagnóstico dos Erros do Console
- Erro Principal (Causa de
Tudo): CORS policy e target origin provided ('file://')
- O que significa: O seu arquivo está sendo aberto de um
local como C:\Users\Gustavo\....
Para o navegador, isso é o protocolo file://. Por segurança, as APIs modernas como a
do Google exigem que as chamadas venham de um servidor web real, com um
endereço http:// ou https://. O
sistema de login do Google recusa conexões vindas de file://,
causando o erro de CORS (Cross-Origin Resource Sharing).
- Solução: Você precisa servir seu arquivo HTML a
partir de um servidor web local. Isso é
muito mais simples do que parece.
- Erro Secundário: Uncaught TypeError: Cannot read properties of null (reading
'addEventListener')
- O que significa: Na linha 605 do seu código, há uma
tentativa de adicionar um "ouvinte de evento" (como um onclick) a
um elemento HTML que ainda não foi carregado na página (o Javascript
encontrou null em
vez do elemento). Isso acontece porque seu script provavelmente está
sendo executado antes de o navegador terminar de desenhar toda a página
HTML.
- Solução: Precisamos garantir que seu código
original só execute depois que a página estiver 100% carregada.
## Plano de Ação Corrigido (3 Passos)
Siga estes passos para resolver
definitivamente os problemas.
Passo 1: Servir o Projeto com um Servidor
Local (A Solução Mais Fácil)
A maneira mais fácil para um
iniciante fazer isso é usando o Visual Studio Code
com a extensão Live Server.
- Instale o Visual Studio
Code: Se
ainda não o tiver, baixe e instale gratuitamente em https://code.visualstudio.com/.
- Instale a Extensão
"Live Server":
- Abra o VS Code.
- Clique no ícone de Extensões na barra
lateral esquerda (parece um conjunto de quadrados).
- Na barra de busca, digite Live Server.
- Clique em Install na
primeira opção (geralmente de Ritwick Dey).
- Inicie o Servidor:
- No VS Code, vá em File > Open Folder... e
abra a pasta onde está seu arquivo D2P.html.
- Com a pasta aberta, clique com o botão
direito no arquivo D2P.html na
lista de arquivos à esquerda.
- Selecione Open with Live Server.
- Seu navegador abrirá automaticamente com
um endereço como http://127.0.0.1:5500/D2P.html. Este é o seu novo
endereço de desenvolvimento!
Passo 2: Atualizar as Credenciais no Google
Cloud Console
Agora que você tem um novo
endereço http://, você precisa autorizá-lo no Google.
- Vá para a página de Credenciais do Google Cloud Console.
- Selecione seu projeto "Dashboard de
Produtividade D2P".
- Na lista de "IDs do cliente OAuth
2.0", clique no nome da credencial que você criou (Cliente Web do Dashboard D2P).
- Em "Origens JavaScript
autorizadas", clique em "+ ADICIONAR
URI".
- Adicione o endereço do seu novo servidor
local. O Live Server geralmente usa a porta 5500:
- http://127.0.0.1:5500
- http://localhost:5500
- Em "URIs de
redirecionamento autorizados", clique em "+ ADICIONAR URI" e adicione os mesmos
endereços:
- http://127.0.0.1:5500
- http://localhost:5500
- Clique em "Salvar"
no final da página.
Passo 3: Corrigir o Código Javascript (addEventListener)
Para resolver o erro da linha
605, precisamos garantir que o seu código que manipula o HTML só rode depois
que a página estiver pronta.
Encontre o seu código Javascript
original (o que você já tinha antes de adicionar o meu) e envolva-o em um bloco
DOMContentLoaded, assim:
JavaScript
// Adicione este "invólucro" ao
redor do seu código original.
// Isso garante que o HTML esteja pronto antes
de o JavaScript tentar acessá-lo.
document.addEventListener('DOMContentLoaded', function() {
//
=======================================================================
// COLOQUE TODO O SEU CÓDIGO JAVASCRIPT
ORIGINAL AQUI DENTRO
// A função init(), os addEventListeners dos
botões de tarefa, etc.
// Por exemplo:
// const taskInput =
document.getElementById('task-input');
// taskInput.addEventListener('...', ...);
// init(); // A chamada para a sua função
init() da linha 605
//
=======================================================================
});
// MANTENHA o bloco de código do Google que eu
forneci SEPARADO e no final da página,
// logo antes do script que carrega a API do
Google.
Depois de fazer essas três
correções, limpe o cache do seu navegador (Ctrl+Shift+R ou
Cmd+Shift+R) e teste novamente usando o endereço http://127.0.0.1:5500/D2P.html fornecido pelo Live Server.
Agora você deverá ver no console
as mensagens de sucesso que esperávamos.
Nenhum comentário:
Postar um comentário