Dashboard de Produtividade Pessoal T1E15: Organização dos arquivos do app d2p

INTRODUÇÃO

Post anterior: Dashboard de Produtividade Pessoal T1E14: RESOLVIDO BugCT1-5 Erro 400 no login

O objetivo deste post é apresentar um prompt para o Gemini 2.5 Pro (Prévia), no qual é feita uma pergunta a respeito da organização dos arquivos, a fim de estruturar o projeto do App Dashboard de Produtividade Pessoal (D2P).

Prompt 3 para o Gemini 2.5 Pro (Prévia)

Olá, Gemini! Onde devo armazenar o index.html e o arquivo html do Dashboard, que é d2P.html?

Resposta 3 do gemini 2.5 Pro (Prévia)

Ótima pergunta. Essa é uma questão fundamental sobre a arquitetura do seu projeto. Existem duas abordagens principais para organizar seus arquivos index.html e d2P.html. Vou explicar as duas, com uma recomendação no final.

Para ambas as opções, a regra de ouro é: todos os seus arquivos devem estar na mesma pasta (ou em subpastas) que é servida pelo seu servidor local (o http://localhost:5500 que você está usando).

---

Opção 1: Abordagem de Múltiplas Páginas (Simples e Direta)

Nesta abordagem, você tem arquivos HTML separados para telas diferentes. O usuário é redirecionado de uma página para a outra.

• index.html: Será sua página de login.
• d2P.html: Será sua página de dashboard, acessada após o login.

Como funciona:

1. O usuário abre http://localhost:5500/index.html.
2. Ele faz o login com o Google.
3. O JavaScript no index.html, ao receber a confirmação de login, salva os dados do usuário em um local temporário do navegador (localStorage) e então redireciona o usuário para a página d2P.html.
4. A página d2P.html carrega, e seu JavaScript lê os dados do localStorage para exibir a mensagem de boas-vindas e popular o dashboard.

Estrutura de arquivos:

/Seu-Projeto/
├── 📄 index.html      (Página de Login)
├── 📄 d2P.html        (Página do Dashboard)
├── 🎨 style.css       (Pode ser usado por ambas as páginas)
└── ⚙️ scripts/
    ├── login.js     (Lógica para o index.html)
    └── dashboard.js (Lógica para o d2P.html)

Exemplo de Código:

No JavaScript do index.html (ex: login.js):

JavaScript

// Dentro da sua função de callback do login bem-sucedido
function handleCredentialResponse(response) {
    const responsePayload = jwt_decode(response.credential);

    // Salva os dados do usuário no armazenamento do navegador
    localStorage.setItem('usuarioNome', responsePayload.name);
    localStorage.setItem('usuarioEmail', responsePayload.email);
    localStorage.setItem('usuarioFoto', responsePayload.picture);

    // Redireciona o navegador para a página do dashboard
    window.location.href = 'd2P.html';
}

No JavaScript do d2P.html (ex: dashboard.js):

JavaScript

// Executa quando a página do dashboard termina de carregar
window.onload = function() {
    // Pega os dados do usuário do armazenamento
    const nome = localStorage.getItem('usuarioNome');
    const email = localStorage.getItem('usuarioEmail');

    // Verifica se o usuário está realmente logado (se os dados existem)
    if (!nome) {
        // Se não houver dados, ele não fez login. Redirecione de volta para a página inicial.
        alert("Você precisa fazer o login para acessar o dashboard.");
        window.location.href = 'index.html';
        return; // Para a execução do script
    }

    // Se os dados existem, popule o dashboard
    document.getElementById('mensagem-boas-vindas').textContent = `Bem-vindo(a), ${nome}!`;
    document.getElementById('email-usuario').textContent = email;

    // Lógica para o botão de logout (opcional, mas recomendado)
    document.getElementById('botao-logout').addEventListener('click', () => {
        // Limpa os dados do usuário
        localStorage.clear();
        // Redireciona para a página de login
        window.location.href = 'index.html';
    });
};

---

Opção 2: Abordagem de Página Única (SPA - Single-Page Application)

Esta foi a abordagem que sugeri na resposta anterior. Você usa apenas um arquivo HTML (index.html) que contém a estrutura para ambas as telas (login e dashboard) em divs separadas.

Como funciona:

1. O index.html carrega com a div do dashboard oculta.
2. Após o login, em vez de redirecionar, o JavaScript simplesmente esconde a div de login e exibe a div do dashboard.
3. Você não precisa se preocupar em passar dados entre páginas, pois eles já estão na mesma página.

Estrutura de arquivos:

/Seu-Projeto/
├── 📄 index.html      (Contém as telas de Login e Dashboard)
├── 🎨 style.css
└── ⚙️ script.js        (Um único arquivo com toda a lógica)

Neste caso, você não precisaria do arquivo d2P.html. Você copiaria o conteúdo do corpo (body) do d2P.html para dentro de uma <div id="tela-dashboard" style="display: none;"> no seu index.html.

---

Recomendação

Para o seu estágio atual, a Opção 1 (Múltiplas Páginas) é a mais intuitiva e fácil de organizar. Ela separa claramente as responsabilidades de cada tela em arquivos distintos. É uma forma excelente e perfeitamente válida de construir muitas aplicações web.

Portanto, armazene index.html e d2P.html juntos na pasta principal do seu projeto. Em seguida, use a técnica com localStorage para passar a informação de "usuário logado" de uma página para a outra.

CONCLUSÃO

Aceitamos a recomendação do Gemini, de implementação da Opção 1 (Múltiplas Páginas).

Próximo post: Dashboard de Produtividade Pessoal T1E16: BugCT1-6 Efeitos colaterais da estruturação do App d2p