INTRODUÇÃO
Post anterior: Dashboard de Produtividade Pessoal T1E03: Integração com Google Forms e Planilha Google
O objetivo deste post é apresentar a implementação da solução para integração do Dashboard de Produtividade Pessoal (App D2P), com a planilha Google Sheets, que contém as tarefas executáveis do processo pessoal, bem como os dados históricos para emissão dos gráficos mensais.
Pergunta ao Gemini 2.5 Pro (Preview)
Estas especificações definem os requisitos para integrar o JavaScript
do Dashboard de Produtividade Pessoal, com Google Forms mais Google Sheets,
conforme a recomendação.
Preciso de sua ajuda para criar o formulário, configurar a
planilha para receber as respostas e criar os gráficos a partir do "Log de
Execução", registrado na Google Sheets. Pode me ajudar?
Requisito 1: Armazenamento dos dados de uma tarefa finalizada
O Dashboard deve ser capaz de registrar os dados da tarefa
finalizada, de forma integrada com Google Forms mais Google Sheets.
Regras do Armazenamento dos Dados
Quando o usuário clicar no botão Finalizar, no card Tarefa
em Execução, as regras abaixo devem direcionar o armazenamento dos dados.
Regra 1: O form Tarefa Finalizada deve ser aberto
pelo Dashboard, automaticamente.
Regra 2: O form Tarefa Finalizada deve conter os botões
Salvar e Cancelar.
Regra 3: O form Tarefa Finalizada deve conter os campos:
- Data Hora Tarefa Finalizada
- Código Tarefa
- Nome Tarefa
- Tamanho Tarefa
- Duração Tarefa
- Tipos de Defeito (Array)
- Produtividade
Regra 4: O Dashboard deve preencher o form automaticamente,
pois contém os dados da tarefa finalizada.
Regra 5: O usuário deve clicar no botão Salvar para
armazenar os dados da tarefa finalizada ou Cancelar, se decidir não salvar os
dados.
Requisito 2: Seleção dos dados das tarefas finalizadas
O Dashboard deve ser capaz de obter os dados das tarefas
finalizadas, nos últimos 30 dias, de forma integrada com Google Forms mais
Google Sheets, para emissão dos gráficos.
Regras da Seleção dos Dados
Quando o usuário clicar no botão Finalizar, no card Tarefa
em Execução, a regra abaixo deve direcionar a apresentação dos gráficos, no
card Relatórios do Mês.
Regra 1: O Dashboard deve acessar Google Sheets para obter
os dados dos últimos 30 dias e atualizar o card Relatórios do Mês.
Resposta do Gemini 2.5 Pro (Preview)
Com certeza! Seus requisitos são bem detalhados, o que é ótimo. Vamos construir essa integração passo a passo.
Baseado nas suas regras, a abordagem mais robusta e profissional não usará o Google Forms diretamente para a submissão dos dados, pois ele não foi feito para ser preenchido e enviado automaticamente por outro sistema.
Em vez disso, usaremos uma solução mais poderosa e alinhada aos seus requisitos: seu Dashboard JavaScript fará uma chamada de API diretamente para um Google Apps Script, que por sua vez salvará e lerá os dados da sua Planilha Google. É como ter sua própria API pessoal para o Google Sheets.
Este é o plano de ação:
- Parte 1: Configurar o Backend (A Planilha e o Script que funcionará como API).
- Parte 2: Implementar o Requisito 1 (O código JavaScript do seu dashboard para enviar os dados).
- Parte 3: Implementar o Requisito 2 (O código JavaScript para receber os dados e os gráficos).
Vamos começar.
Parte 1: Configuração do Backend (Google Sheets + Apps Script)
Esta é a fundação do nosso sistema.
1.1. Crie a Planilha Google
- Acesse
sheets.google.com - Na primeira aba, renomeie-a para "LogDeExecucao".
- Na primeira linha (cabeçalho), crie as seguintes colunas, exatamente nesta ordem:
DataHoraFinalizadaCodigoTarefaNomeTarefaTamanhoTarefaDuracaoTarefaMinutosTiposDeDefeito(este campo irá armazenar o array como um texto, ex: "Erro de Lógica, Requisito Incompleto")Produtividade
1.2. Crie o Google Apps Script (Nossa API)
- Na sua planilha, vá em Extensões > Apps Script. Um novo editor de código será aberto.
- Apague todo o código de exemplo e cole o código abaixo. Ele contém a lógica para receber dados (função
doPost) e enviar dados (funçãodoGet).
// Constante para definir o nome da aba onde os dados serão salvos.
const NOME_DA_ABA = 'LogDeExecucao';
/**
* Função que lida com requisições POST. Usada para SALVAR dados na planilha.
* Esta função será chamada pelo seu Dashboard para implementar o Requisito 1.
* @param {Object} e - O objeto do evento passado pelo Apps Script, contém os dados da requisição.
*/
function doPost(e) {
try {
// Pega a planilha ativa e a aba específica.
const sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName(NOME_DA_ABA);
// Converte os dados de texto JSON enviados pelo dashboard para um objeto JavaScript.
const taskData = JSON.parse(e.postData.contents);
// Converte o array de defeitos em uma string separada por vírgulas.
const defeitosStr = taskData.TiposDeDefeito.join(', ');
// Monta a linha a ser inserida na planilha, na ordem correta das colunas.
const newRow = [
taskData.DataHoraTarefaFinalizada,
taskData.CodigoTarefa,
taskData.NomeTarefa,
taskData.TamanhoTarefa,
taskData.DuracaoTarefa,
defeitosStr,
taskData.Produtividade
];
// Adiciona a nova linha no final da aba.
sheet.appendRow(newRow);
// Retorna uma resposta de sucesso em formato JSON.
return ContentService
.createTextOutput(JSON.stringify({ 'status': 'success', 'message': 'Tarefa salva com sucesso!' }))
.setMimeType(ContentService.MimeType.JSON);
} catch (error) {
// Em caso de erro, retorna uma mensagem de erro.
return ContentService
.createTextOutput(JSON.stringify({ 'status': 'error', 'message': error.toString() }))
.setMimeType(ContentService.MimeType.JSON);
}
}
/**
* Função que lida com requisições GET. Usada para LER dados da planilha.
* Esta função será chamada pelo seu Dashboard para implementar o Requisito 2.
* @param {Object} e - O objeto do evento.
*/
function doGet(e) {
try {
// Pega a planilha ativa e a aba específica.
const sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName(NOME_DA_ABA);
// Pega todos os dados da planilha, exceto o cabeçalho.
const allData = sheet.getRange(2, 1, sheet.getLastRow() - 1, sheet.getLastColumn()).getValues();
// Calcula a data de 30 dias atrás.
const thirtyDaysAgo = new Date();
thirtyDaysAgo.setDate(thirtyDaysAgo.getDate() - 30);
// Filtra os dados para retornar apenas as tarefas dos últimos 30 dias.
const filteredData = allData.filter(row => {
const taskDate = new Date(row[0]); // A data está na primeira coluna (índice 0).
return taskDate >= thirtyDaysAgo;
});
// Retorna os dados filtrados em formato JSON.
return ContentService
.createTextOutput(JSON.stringify(filteredData))
.setMimeType(ContentService.MimeType.JSON);
} catch (error) {
// Em caso de erro, retorna uma mensagem de erro.
return ContentService
.createTextOutput(JSON.stringify({ 'status': 'error', 'message': error.toString() }))
.setMimeType(ContentService.MimeType.JSON);
}
}
1.3. Publique o Script como um Aplicativo Web
Este é o passo mais importante. Ele gera a URL da sua API.
- No editor do Apps Script, clique em Implantar > Nova implantação.
- Clique no ícone de engrenagem (⚙️) ao lado de "Selecione o tipo" e escolha "App da Web".
- No campo "Descrição", coloque "API Dashboard de Produtividade".
- Em "Executar como", selecione "Eu".
- Em "Quem pode acessar", selecione "Qualquer pessoa". Isso é crucial! Não se preocupe, só quem tiver a URL poderá acessar.
- Clique em "Implantar".
- Na primeira vez, o Google pedirá autorização. Clique em "Autorizar acesso" e siga as instruções (selecione sua conta, clique em "Avançado" e depois em "Acessar projeto sem título (não seguro)" e "Permitir").
- Após a implantação, uma janela aparecerá com a URL do app da Web. Copie e guarde esta URL! Ela é a sua
API_URL.
Parte 2: Requisito 1 - Armazenar Dados no Dashboard
Agora, no código JavaScript do seu dashboard, você criará a função que é chamada quando o usuário clica em "Finalizar" e depois em "Salvar".
Supondo que você tenha os dados da tarefa em um objeto, o código será assim:
// Cole aqui a URL do App da Web que você copiou no passo 1.3
const API_URL = "URL_DO_SEU_APP_DA_WEB_AQUI";
/**
* Função para salvar a tarefa finalizada.
* @param {Object} tarefaFinalizada - Um objeto com os dados da tarefa.
* Ex: {
* DataHoraTarefaFinalizada: "2025-06-12T10:30:00.000Z",
* CodigoTarefa: "T-101",
* NomeTarefa: "Desenvolver tela de login",
* TamanhoTarefa: "Pequena",
* DuracaoTarefa: 90,
* TiposDeDefeito: ["Erro de Lógica", "Ajuste de UI"],
* Produtividade: 0.85
* }
*/
async function salvarTarefa(tarefaFinalizada) {
try {
const response = await fetch(API_URL, {
method: 'POST',
mode: 'cors', // Necessário para chamadas entre diferentes origens
headers: {
'Content-Type': 'application/json',
},
// O Apps Script não lida bem com o método POST padrão,
// então enviamos um corpo de texto simples que é o JSON.
body: JSON.stringify(tarefaFinalizada)
});
const result = await response.json();
if (result.status === 'success') {
console.log(result.message);
alert('Tarefa salva com sucesso!');
// Aqui você pode fechar o formulário/modal no seu dashboard.
} else {
throw new Error(result.message);
}
} catch (error) {
console.error("Erro ao salvar a tarefa:", error);
alert('Ocorreu um erro ao salvar a tarefa. Tente novamente.');
}
}
// Lógica do seu botão "Salvar" no formulário da tarefa finalizada
// Exemplo:
// const botaoSalvar = document.getElementById('botao-salvar');
// botaoSalvar.addEventListener('click', () => {
// // 1. Coletar os dados do formulário para o objeto `dadosDaTarefa`
// const dadosDaTarefa = { ... };
//
// // 2. Chamar a função para salvar
// salvarTarefa(dadosDaTarefa);
// });
Parte 3: Requisito 2 - Selecionar Dados e Criar Gráficos
Para buscar os dados e atualizar os gráficos, você fará uma chamada GET para a mesma URL.
3.1. Buscar os Dados
/**
* Busca os dados das tarefas dos últimos 30 dias.
* @returns {Promise<Array>} Uma promessa que resolve para um array de tarefas.
*/
async function buscarDados30Dias() {
try {
const response = await fetch(API_URL); // Método GET é o padrão
const data = await response.json();
if (data.status === 'error') {
throw new Error(data.message);
}
console.log("Dados recebidos:", data);
return data;
} catch (error) {
console.error("Erro ao buscar dados:", error);
alert('Não foi possível carregar os dados para os relatórios.');
return []; // Retorna um array vazio em caso de erro
}
}
/**
* Função principal para atualizar os relatórios do mês.
*/
async function atualizarRelatorios() {
const dados = await buscarDados30Dias();
// Se não houver dados, não faz nada.
if (dados.length === 0) {
console.log("Nenhum dado para exibir nos gráficos.");
return;
}
// Agora, com os 'dados' em mãos, chame suas funções para renderizar cada gráfico.
// Exemplo:
// renderizarGraficoProdutividade(dados);
// renderizarGraficoTiposDefeito(dados);
// renderizarGraficoTarefasPorTamanho(dados);
}
3.2. Criar os Gráficos (Exemplo com Chart.js)
A criação dos gráficos em si dependerá da biblioteca que você usa (ex: Chart.js, D3.js, etc.). Aqui está um exemplo de como você processaria os dados para um gráfico de Produtividade ao Longo do Tempo usando Chart.js.
-
Processar os dados: A função
buscarDados30Diasretorna um array de arrays. Você precisa transformá-lo em um formato que a biblioteca de gráficos entenda.JavaScriptfunction renderizarGraficoProdutividade(dados) { // O índice das colunas corresponde à ordem na planilha // DataHoraFinalizada = 0, Produtividade = 6 const labels = dados.map(row => new Date(row[0]).toLocaleDateString('pt-BR')); const valoresProdutividade = dados.map(row => row[6]); const ctx = document.getElementById('meuGraficoDeProdutividade').getContext('2d'); new Chart(ctx, { type: 'line', // Gráfico de linha data: { labels: labels, datasets: [{ label: 'Produtividade por Dia', data: valoresProdutividade, borderColor: 'rgb(75, 192, 192)', tension: 0.1 }] }, options: { scales: { y: { beginAtZero: true } } } }); }
Seguindo estes 3 passos, você terá uma integração completa e profissional que atende exatamente aos seus requisitos, usando o poder do Google Sheets como um banco de dados e do Apps Script como sua API pessoal.
Nenhum comentário:
Postar um comentário