INTRODUÇÃO
Post anterior: Dashboard de Produtividade Pessoal T1E07: BugCT1-1 Correção por IA
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-2 Não fez login".
Prompt para Gemini 2.5 Pro (Prévia)
1 Objetivo
Corrija esses bugs no App Dashboard de Produtividade
Pessoal:
1.1 Não fez login com o ID de Cliente OAuth 2.0
1.2 Não executou a nova função função gravarTarefaNaPlanilha
2 Contexto
2.1 Criei o ID de Cliente OAuth 2.0
2.2 Fiz as alterações no código FrontEnd, conforme o passo a
passo
2.3 Segue o link para o código do FrontEnd:
https://drive.google.com/file/d/1cSZwZOHSu0VrjyUI4NEDu6o0fOojZ_EO/view?usp=drive_link
2.4 Como tenho pouco conhecimento de JavaScript, certamente
errei ao seguir o passo a passo, portanto, peço sua ajuda para corrigir e fazer
funcionar.
Resposta do Gemini 2.5 Pro (Prévia)
Olá! Sem problemas, esses erros
de integração são muito comuns, principalmente ao lidar com APIs externas pela
primeira vez. A boa notícia é que eles costumam ser simples de resolver.
Analisando os sintomas que você
descreveu, os bugs provavelmente estão em dois pontos-chave: a forma como o script de autenticação do Google é carregado
na sua página e a conexão entre o seu botão
"Finalizar" e a nova função gravarTarefaNaPlanilha.
Para corrigir, vou fornecer
abaixo uma versão completa e corrigida do script. Ele unifica o código de
autenticação com a lógica de gravação, tornando-o um bloco único e mais fácil
de gerenciar.
## Código Front-End Corrigido e Completo
Substitua todo o bloco <script> que você adicionou anteriormente por este código.
Ele foi projetado para ser uma solução "copia e cola", exigindo
apenas que você preencha suas chaves pessoais.
HTML
<script>
//
===================================================================================
// BLOCO DE CÓDIGO CORRIGIDO PARA O DASHBOARD
DE PRODUTIVIDADE
//
===================================================================================
// --- 1. CONFIGURAÇÃO - SUBSTITUA PELOS SEUS
DADOS ---
const CLIENT_ID = 'SEU_ID_DE_CLIENTE_AQUI.apps.googleusercontent.com'; // **OBRIGATÓRIO:** Cole o ID de Cliente que
você criou.
const SPREADSHEET_ID = 'SEU_ID_DA_PLANILHA_AQUI'; // **OBRIGATÓRIO:** Pegue este ID da URL da
sua planilha.
const SCOPES = 'https://www.googleapis.com/auth/spreadsheets';
// --- 2. LÓGICA DE AUTENTICAÇÃO E API DO
GOOGLE ---
// Referências para os botões de login/logout
no HTML.
// Garanta que seus botões no HTML tenham os
IDs 'authorize_button' e 'signout_button'.
const authorizeButton = document.getElementById('authorize_button');
const signoutButton = document.getElementById('signout_button');
/**
*
Função principal que é chamada assim que a biblioteca da API do Google é
carregada.
*/
function startApp() {
gapi.load('client:auth2', function() {
console.log('✅ Bibliotecas do Google carregadas.');
gapi.client.init({
clientId: CLIENT_ID,
scope: SCOPES,
discoveryDocs: ['https://sheets.googleapis.com/$discovery/rest?version=v4'],
}).then(function () {
console.log('🚀 Cliente GAPI inicializado.');
const authInstance = gapi.auth2.getAuthInstance();
authInstance.isSignedIn.listen(updateSigninStatus);
updateSigninStatus(authInstance.isSignedIn.get());
// Associa as funções de login/logout aos
cliques dos botões.
authorizeButton.onclick = () => authInstance.signIn();
signoutButton.onclick = () => authInstance.signOut();
}, function(error) {
console.error('❌ Erro ao inicializar GAPI:', JSON.stringify(error, null, 2));
alert('Erro
crítico ao inicializar a API do Google. Verifique o Client ID e as
configurações no Google Cloud Console.');
});
});
}
/**
*
Atualiza a interface (mostra/esconde botões) com base no status de login.
*/
function updateSigninStatus(isSignedIn) {
if (isSignedIn) {
console.log('👤 Usuário está logado.');
authorizeButton.style.display = 'none';
signoutButton.style.display = 'block';
} else {
console.log('👤 Usuário não está logado. Autorização
necessária.');
authorizeButton.style.display = 'block';
signoutButton.style.display = 'none';
}
}
/**
*
Função para gravar os dados de uma tarefa finalizada na planilha.
* @param {Array<string>} dadosDaLinha - Um array com os dados da linha a ser
inserida.
*/
function gravarTarefaNaPlanilha(dadosDaLinha) {
if (!gapi.auth2.getAuthInstance().isSignedIn.get())
{
alert('Erro:
Autorização necessária. Faça o login com o Google para salvar a tarefa.');
return;
}
const params = {
spreadsheetId: SPREADSHEET_ID,
range: 'A:G', // Gravará na próxima linha vazia do intervalo
A:G
valueInputOption: 'USER_ENTERED',
};
const valueRangeBody = { 'values': [dadosDaLinha] };
console.log('📤 Enviando dados para a planilha:', JSON.stringify(valueRangeBody));
gapi.client.sheets.spreadsheets.values.append(params,
valueRangeBody)
.then(function(response) {
console.log('✅ Dados inseridos com sucesso!', response);
}, function(error) {
console.error('❌ Erro ao inserir dados na planilha:', error.result.error.message);
alert(`Ocorreu
um erro ao salvar na planilha: ${error.result.error.message}. Verifique o console (F12) para mais
detalhes.`);
});
}
// --- 3. CONEXÃO COM A LÓGICA DO SEU
APLICATIVO ---
/**
* Esta
é a função que o seu botão "Finalizar Tarefa" deve chamar.
* Ela
serve como uma ponte entre a sua interface e a função de gravação.
*/
function handleFinalizarTarefaClick() {
console.log('▶️ Botão "Finalizar Tarefa"
clicado.');
// --- Simulação da coleta de dados da sua
tela ---
// Substitua este bloco com a lógica real para
pegar os dados dos campos da sua tela.
// Por exemplo:
document.getElementById('nomeTarefa').value;
const dadosDaTarefaFinalizada = {
codigo: 'S00.1.1.02', // Exemplo
nome: 'Tarefa 2 Teste 1', // Exemplo
tamanho: 1, // Exemplo
duracao: '00:01:00', // Exemplo
produtividade: 60.0 // Exemplo
};
//
------------------------------------------------
// Monta o array de dados na ordem exata das
colunas da planilha
const dadosParaEnviar = [
new Date().toLocaleString("pt-BR"),
//
Coluna A: DataHoraFinalizada
dadosDaTarefaFinalizada.codigo, // Coluna B: CodigoTarefa
dadosDaTarefaFinalizada.nome,
//
Coluna C: NomeTarefa
dadosDaTarefaFinalizada.tamanho,
//
Coluna D: TamanhoTarefa
dadosDaTarefaFinalizada.duracao,
//
Coluna E: DuracaoTarefaMinutos
"Nenhum", // Coluna F: TiposDeDefeito
dadosDaTarefaFinalizada.produtividade.toFixed(2) // Coluna G: Produtividade
];
// Chama a função que efetivamente grava os
dados na planilha
gravarTarefaNaPlanilha(dadosParaEnviar);
}
</script>
<script async defer src="https://apis.google.com/js/api.js" onload="startApp()"></script>
## Instruções de Implementação (Passo a Passo)
- Remova o Código Antigo: Vá ao seu arquivo HTML e delete completamente o bloco <script> que
você adicionou no passo anterior, incluindo a linha que carrega apis.google.com/js/api.js.
Vamos começar do zero para não haver conflitos.
- Copie e Cole o Novo Código: Copie todo o bloco de
código corrigido acima (da linha `` até </script>) e cole-o no seu arquivo HTML, logo
antes do fechamento da tag `</body>`.
- Atualize Suas Credenciais: No código que você acabou de colar,
preencha as constantes CLIENT_ID e SPREADSHEET_ID com os seus valores. Este passo é fundamental.
- Conecte seu Botão
"Finalizar": A
forma mais simples de garantir que a função seja chamada é fazer o
seguinte:
- Encontre o botão "Finalizar"
no seu código HTML.
- Adicione um atributo onclick a
ele para chamar a nossa nova função de "ponte", handleFinalizarTarefaClick().
Exemplo
de como seu botão deve ficar:
HTML
<button class="finalizar-btn" onclick="handleFinalizarTarefaClick()">Finalizar</button>
Como Testar 🧐
- Salve o arquivo HTML.
- Abra-o no seu navegador.
- Pressione F12 para abrir
as "Ferramentas de Desenvolvedor" e clique na aba "Console".
- Você deverá ver as mensagens: "✅ Bibliotecas do Google carregadas.",
"🚀 Cliente GAPI inicializado." e
"👤 Usuário não está logado.".
- Clique no botão "Login com Google" e autorize sua conta.
O console mostrará "👤 Usuário está logado.".
- Clique no seu botão "Finalizar Tarefa". O console deverá
mostrar "▶️ Botão 'Finalizar Tarefa' clicado." e, em seguida,
"📤 Enviando dados para a planilha...".
- Se tudo der certo, você verá a mensagem
"✅ Dados inseridos com sucesso!". Se
houver um erro, a mensagem "❌ Erro ao inserir dados..." aparecerá, e a
causa do erro estará descrita.
Nenhum comentário:
Postar um comentário