46 KiB

Raw Blame History

Construindo um App Bancário Parte 3: Métodos de Busca e Uso de Dados

Pense no computador da Enterprise em Star Trek - quando o Capitão Picard pede o status da nave, as informações aparecem instantaneamente sem que toda a interface seja interrompida e reconstruída. Esse fluxo contínuo de informações é exatamente o que estamos construindo aqui com a busca dinâmica de dados.

Atualmente, seu aplicativo bancário é como um jornal impresso - informativo, mas estático. Vamos transformá-lo em algo mais parecido com o controle de missão da NASA, onde os dados fluem continuamente e são atualizados em tempo real sem interromper o fluxo de trabalho do usuário.

Você aprenderá como se comunicar com servidores de forma assíncrona, lidar com dados que chegam em momentos diferentes e transformar informações brutas em algo significativo para seus usuários. Essa é a diferença entre um demo e um software pronto para produção.

⚡ O Que Você Pode Fazer nos Próximos 5 Minutos

Caminho Rápido para Desenvolvedores Ocupados

flowchart LR
    A[⚡ 5 minutes] --> B[Set up API server]
    B --> C[Test fetch with curl]
    C --> D[Create login function]
    D --> E[See data in action]

Minuto 1-2: Inicie seu servidor API (cd api && npm start) e teste a conexão
Minuto 3: Crie uma função básica getAccount() usando fetch
Minuto 4: Conecte o formulário de login com action="javascript:login()"
Minuto 5: Teste o login e veja os dados da conta aparecerem no console

Comandos Rápidos de Teste:

# Verify API is running
curl http://localhost:5000/api

# Test account data fetch
curl http://localhost:5000/api/accounts/test

Por Que Isso Importa: Em 5 minutos, você verá a mágica da busca de dados assíncrona que alimenta todos os aplicativos modernos da web. Esta é a base que faz os aplicativos parecerem responsivos e vivos.

🗺️ Sua Jornada de Aprendizado Através de Aplicativos Web Baseados em Dados

journey
    title From Static Pages to Dynamic Applications
    section Understanding the Evolution
      Traditional page reloads: 3: You
      Discover AJAX/SPA benefits: 5: You
      Master Fetch API patterns: 7: You
    section Building Authentication
      Create login functions: 4: You
      Handle async operations: 6: You
      Manage user sessions: 8: You
    section Dynamic UI Updates
      Learn DOM manipulation: 5: You
      Build transaction displays: 7: You
      Create responsive dashboards: 9: You
    section Professional Patterns
      Template-based rendering: 6: You
      Error handling strategies: 7: You
      Performance optimization: 8: You

Destino da Sua Jornada: Ao final desta lição, você entenderá como os aplicativos web modernos buscam, processam e exibem dados dinamicamente, criando as experiências de usuário perfeitas que esperamos de aplicativos profissionais.

Quiz Pré-Aula

Quiz pré-aula

Pré-requisitos

Antes de mergulhar na busca de dados, certifique-se de ter os seguintes componentes prontos:

Lição Anterior: Complete o Formulário de Login e Registro - vamos construir sobre essa base
Servidor Local: Instale Node.js e execute o servidor API para fornecer dados da conta
Conexão com a API: Teste a conexão do servidor com este comando:

curl http://localhost:5000/api
# Expected response: "Bank API v1.0.0"

Este teste rápido garante que todos os componentes estão se comunicando corretamente:

Verifica se o Node.js está funcionando corretamente no seu sistema
Confirma que seu servidor API está ativo e respondendo
Valida que seu aplicativo pode alcançar o servidor (como verificar o contato de rádio antes de uma missão)

🧠 Visão Geral do Ecossistema de Gerenciamento de Dados

mindmap
  root((Data Management))
    Authentication Flow
      Login Process
        Form Validation
        Credential Verification
        Session Management
      User State
        Global Account Object
        Navigation Guards
        Error Handling
    API Communication
      Fetch Patterns
        GET Requests
        POST Requests
        Error Responses
      Data Formats
        JSON Processing
        URL Encoding
        Response Parsing
    Dynamic UI Updates
      DOM Manipulation
        Safe Text Updates
        Element Creation
        Template Cloning
      User Experience
        Real-time Updates
        Error Messages
        Loading States
    Security Considerations
      XSS Prevention
        textContent Usage
        Input Sanitization
        Safe HTML Creation
      CORS Handling
        Cross-Origin Requests
        Header Configuration
        Development Setup

Princípio Central: Aplicativos web modernos são sistemas de orquestração de dados - eles coordenam entre interfaces de usuário, APIs de servidor e modelos de segurança do navegador para criar experiências contínuas e responsivas.

Entendendo a Busca de Dados em Aplicativos Web Modernos

A forma como os aplicativos web lidam com dados evoluiu dramaticamente nas últimas duas décadas. Entender essa evolução ajudará você a apreciar por que técnicas modernas como AJAX e a Fetch API são tão poderosas e por que se tornaram ferramentas essenciais para desenvolvedores web.

Vamos explorar como os sites tradicionais funcionavam em comparação com os aplicativos dinâmicos e responsivos que construímos hoje.

Aplicativos Tradicionais de Múltiplas Páginas (MPA)

Nos primórdios da web, cada clique era como mudar de canal em uma televisão antiga - a tela ficava em branco e depois sintonizava lentamente o novo conteúdo. Essa era a realidade dos primeiros aplicativos web, onde cada interação significava reconstruir completamente a página inteira do zero.

sequenceDiagram
    participant User
    participant Browser
    participant Server
    
    User->>Browser: Clicks link or submits form
    Browser->>Server: Requests new HTML page
    Note over Browser: Page goes blank
    Server->>Browser: Returns complete HTML page
    Browser->>User: Displays new page (flash/reload)

Por que essa abordagem parecia desajeitada:

Cada clique significava reconstruir a página inteira do zero
Os usuários eram interrompidos no meio do pensamento por aqueles flashes irritantes de página
Sua conexão de internet trabalhava dobrado baixando o mesmo cabeçalho e rodapé repetidamente
Os aplicativos pareciam mais com um arquivo de gavetas do que com um software

Aplicativos Modernos de Página Única (SPA)

AJAX (JavaScript e XML Assíncronos) mudou completamente esse paradigma. Como o design modular da Estação Espacial Internacional, onde os astronautas podem substituir componentes individuais sem reconstruir toda a estrutura, o AJAX nos permite atualizar partes específicas de uma página da web sem recarregar tudo. Apesar do nome mencionar XML, usamos principalmente JSON hoje, mas o princípio central permanece: atualizar apenas o que precisa mudar.

sequenceDiagram
    participant User
    participant Browser
    participant JavaScript
    participant Server
    
    User->>Browser: Interacts with page
    Browser->>JavaScript: Triggers event handler
    JavaScript->>Server: Fetches only needed data
    Server->>JavaScript: Returns JSON data
    JavaScript->>Browser: Updates specific page elements
    Browser->>User: Shows updated content (no reload)

Por que os SPAs são muito melhores:

Apenas as partes que realmente mudaram são atualizadas (inteligente, né?)
Sem mais interrupções bruscas - seus usuários permanecem no fluxo
Menos dados viajando pela rede significa carregamento mais rápido
Tudo parece ágil e responsivo, como os aplicativos no seu celular

A Evolução para a Fetch API Moderna

Os navegadores modernos fornecem a Fetch API, que substitui o antigo XMLHttpRequest. Como a diferença entre operar um telégrafo e usar e-mail, a Fetch API utiliza promises para um código assíncrono mais limpo e lida com JSON naturalmente.

Recurso	XMLHttpRequest	Fetch API
Sintaxe	Baseada em callbacks complexos	Baseada em promises limpas
Manipulação de JSON	Requer análise manual	Método `.json()` embutido
Tratamento de Erros	Informações limitadas sobre erros	Detalhes abrangentes sobre erros
Suporte Moderno	Compatibilidade legada	Promises ES6+ e async/await

💡 Compatibilidade com Navegadores: Boas notícias - a Fetch API funciona em todos os navegadores modernos! Se você está curioso sobre versões específicas, caniuse.com tem a história completa de compatibilidade.

O resumo:

Funciona muito bem no Chrome, Firefox, Safari e Edge (basicamente em todos os lugares onde seus usuários estão)
Apenas o Internet Explorer precisa de ajuda extra (e honestamente, é hora de deixar o IE para trás)
Prepara você perfeitamente para os padrões elegantes de async/await que usaremos mais tarde

Agora vamos implementar o sistema de login que transforma seu aplicativo bancário de uma exibição estática em um aplicativo funcional. Como os protocolos de autenticação usados em instalações militares seguras, vamos verificar as credenciais do usuário e, em seguida, fornecer acesso aos seus dados específicos.

Vamos construir isso de forma incremental, começando com a autenticação básica e depois adicionando as capacidades de busca de dados.

Abra seu arquivo app.js e adicione uma nova função login. Ela será responsável pelo processo de autenticação do usuário:

async function login() {
  const loginForm = document.getElementById('loginForm');
  const user = loginForm.user.value;
}

Vamos detalhar isso:

Essa palavra-chave async? Está dizendo ao JavaScript "ei, essa função pode precisar esperar por algumas coisas"
Estamos pegando nosso formulário da página (nada muito complicado, apenas encontrando pelo ID)
Depois estamos extraindo o que o usuário digitou como nome de usuário
Aqui vai uma dica legal: você pode acessar qualquer entrada de formulário pelo atributo name - sem necessidade de chamadas extras de getElementById!

💡 Padrão de Acesso ao Formulário: Cada controle de formulário pode ser acessado pelo seu nome (definido no HTML usando o atributo name) como uma propriedade do elemento do formulário. Isso fornece uma maneira limpa e legível de obter dados do formulário.

Etapa 2: Criar a Função de Busca de Dados da Conta

Em seguida, criaremos uma função dedicada para recuperar os dados da conta do servidor. Isso segue o mesmo padrão da sua função de registro, mas foca na recuperação de dados:

async function getAccount(user) {
  try {
    const response = await fetch('//localhost:5000/api/accounts/' + encodeURIComponent(user));
    return await response.json();
  } catch (error) {
    return { error: error.message || 'Unknown error' };
  }
}

O que esse código realiza:

Usa a moderna API fetch para solicitar dados de forma assíncrona
Constrói uma URL de solicitação GET com o parâmetro de nome de usuário
Aplica encodeURIComponent() para lidar com caracteres especiais em URLs de forma segura
Converte a resposta para o formato JSON para fácil manipulação de dados
Lida com erros de forma elegante, retornando um objeto de erro em vez de travar

⚠️ Nota de Segurança: A função encodeURIComponent() lida com caracteres especiais em URLs. Como os sistemas de codificação usados em comunicações navais, ela garante que sua mensagem chegue exatamente como pretendido, evitando que caracteres como "#" ou "&" sejam interpretados incorretamente.

Por que isso importa:

Impede que caracteres especiais quebrem URLs
Protege contra ataques de manipulação de URLs
Garante que seu servidor receba os dados pretendidos
Segue práticas de codificação seguras

Entendendo Solicitações HTTP GET

Aqui está algo que pode surpreendê-lo: quando você usa fetch sem opções extras, ele automaticamente cria uma solicitação GET. Isso é perfeito para o que estamos fazendo - pedindo ao servidor "ei, posso ver os dados da conta deste usuário?"

Pense nas solicitações GET como pedir educadamente para pegar um livro emprestado na biblioteca - você está solicitando ver algo que já existe. Solicitações POST (que usamos para registro) são mais como enviar um novo livro para ser adicionado à coleção.

Solicitação GET	Solicitação POST
Propósito	Recuperar dados existentes
Parâmetros	No caminho/consulta da URL
Cache	Pode ser armazenado em cache pelos navegadores
Segurança	Visível na URL/logs

sequenceDiagram
    participant B as Browser
    participant S as Server
    
    Note over B,S: GET Request (Data Retrieval)
    B->>S: GET /api/accounts/test
    S-->>B: 200 OK + Account Data
    
    Note over B,S: POST Request (Data Submission)
    B->>S: POST /api/accounts + New Account Data
    S-->>B: 201 Created + Confirmation
    
    Note over B,S: Error Handling
    B->>S: GET /api/accounts/nonexistent
    S-->>B: 404 Not Found + Error Message

Etapa 3: Unindo Tudo

Agora vem a parte satisfatória - vamos conectar sua função de busca de dados da conta ao processo de login. É aqui que tudo se encaixa:

async function login() {
  const loginForm = document.getElementById('loginForm');
  const user = loginForm.user.value;
  const data = await getAccount(user);

  if (data.error) {
    return console.log('loginError', data.error);
  }

  account = data;
  navigate('/dashboard');
}

Esta função segue uma sequência clara:

Extrai o nome de usuário da entrada do formulário
Solicita os dados da conta do usuário ao servidor
Lida com quaisquer erros que ocorram durante o processo
Armazena os dados da conta e navega para o painel de controle em caso de sucesso

🎯 Padrão Async/Await: Como getAccount é uma função assíncrona, usamos a palavra-chave await para pausar a execução até que o servidor responda. Isso impede que o código continue com dados indefinidos.

Etapa 4: Criando um Local para Seus Dados

Seu aplicativo precisa de um lugar para lembrar as informações da conta uma vez que elas sejam carregadas. Pense nisso como a memória de curto prazo do seu aplicativo - um lugar para manter os dados do usuário atual à mão. Adicione esta linha no topo do seu arquivo app.js:

// This holds the current user's account data
let account = null;

Por que precisamos disso:

Mantém os dados da conta acessíveis de qualquer lugar no seu aplicativo
Começar com null significa "ninguém está logado ainda"
É atualizado quando alguém faz login ou se registra com sucesso
Atua como uma única fonte de verdade - sem confusão sobre quem está logado

Etapa 5: Conecte Seu Formulário

Agora vamos conectar sua nova função de login ao formulário HTML. Atualize a tag do formulário assim:

<form id="loginForm" action="javascript:login()">
  <!-- Your existing form inputs -->
</form>

O que essa pequena mudança faz:

Impede que o formulário execute seu comportamento padrão de "recarregar toda a página"
Chama sua função personalizada de JavaScript em vez disso
Mantém tudo suave e com aparência de aplicativo de página única
Dá a você controle total sobre o que acontece quando os usuários clicam em "Login"

Etapa 6: Melhore Sua Função de Registro

Para consistência, atualize sua função register para também armazenar os dados da conta e navegar para o painel de controle:

// Add these lines at the end of your register function
account = result;
navigate('/dashboard');

Essa melhoria oferece:

Transição suave do registro para o painel de controle
Experiência consistente para o usuário entre os fluxos de login e registro
Acesso imediato aos dados da conta após o registro bem-sucedido

Testando Sua Implementação

flowchart TD
    A[User enters credentials] --> B[Login function called]
    B --> C[Fetch account data from server]
    C --> D{Data received successfully?}
    D -->|Yes| E[Store account data globally]
    D -->|No| F[Display error message]
    E --> G[Navigate to dashboard]
    F --> H[User stays on login page]

Hora de testar:

Crie uma nova conta para garantir que tudo está funcionando
Tente fazer login com essas mesmas credenciais
Dê uma olhada no console do navegador (F12) se algo parecer errado
Certifique-se de que você chega ao painel de controle após um login bem-sucedido

Se algo não estiver funcionando, não entre em pânico! A maioria dos problemas são correções simples, como erros de digitação ou esquecer de iniciar o servidor API.

Uma Palavra Rápida Sobre Magia de Origem Cruzada

Você pode estar se perguntando: "Como meu aplicativo web está conversando com este servidor API quando eles estão rodando em portas diferentes?" Ótima pergunta! Isso toca em algo que todo desenvolvedor web encontra eventualmente.

🔒 Segurança de Origem Cruzada: Os navegadores aplicam uma "política de mesma origem" para evitar comunicação não autorizada entre diferentes domínios. Como o sistema de verificação em um ponto estratégico, eles verificam se a comunicação é autorizada antes de permitir a transferência de dados.

Na nossa configuração:

Seu aplicativo web roda em localhost:3000 (servidor de desenvolvimento)
Seu servidor API roda em localhost:5000 (servidor backend)
O servidor API inclui headers CORS que autorizam explicitamente a comunicação do seu aplicativo web

Essa configuração espelha o desenvolvimento do mundo real, onde aplicativos frontend e backend geralmente rodam em servidores separados.

📚 Saiba Mais: Explore mais sobre APIs e busca de dados com este módulo abrangente Microsoft Learn sobre APIs.

Trazendo Seus Dados à Vida no HTML

Agora vamos tornar os dados buscados visíveis para os usuários através da manipulação do DOM. Como o processo de revelar fotografias em um quarto escuro, estamos transformando dados invisíveis em algo que os usuários podem ver e interagir. A manipulação do DOM é a técnica que transforma páginas web estáticas em aplicações dinâmicas que atualizam seu conteúdo com base nas interações do usuário e nas respostas do servidor.

Escolhendo a Ferramenta Certa para o Trabalho

Quando se trata de atualizar seu HTML com JavaScript, você tem várias opções. Pense nelas como diferentes ferramentas em uma caixa de ferramentas - cada uma perfeita para trabalhos específicos:

Método	Para que é ótimo	Quando usá-lo	Nível de segurança
`textContent`	Exibir dados do usuário com segurança	Sempre que estiver mostrando texto	✅ Super seguro
`createElement()` + `append()`	Construir layouts complexos	Criar novas seções/listas	✅ À prova de falhas
`innerHTML`	Definir conteúdo HTML	⚠️ Tente evitar este	❌ Arriscado

A Maneira Segura de Mostrar Texto: textContent

A propriedade textContent é sua melhor amiga ao exibir dados do usuário. É como ter um segurança para sua página web - nada prejudicial passa:

// The safe, reliable way to update text
const balanceElement = document.getElementById('balance');
balanceElement.textContent = account.balance;

Benefícios do textContent:

Trata tudo como texto simples (impede execução de scripts)
Limpa automaticamente o conteúdo existente
Eficiente para atualizações simples de texto
Oferece segurança integrada contra conteúdo malicioso

Criando Elementos HTML Dinâmicos

Para conteúdo mais complexo, combine document.createElement() com o método append():

// Safe way to create new elements
const transactionItem = document.createElement('div');
transactionItem.className = 'transaction-item';
transactionItem.textContent = `${transaction.date}: ${transaction.description}`;
container.append(transactionItem);

Entendendo essa abordagem:

Cria novos elementos do DOM programaticamente
Mantém controle total sobre atributos e conteúdo dos elementos
Permite estruturas complexas e aninhadas de elementos
Preserva a segurança ao separar estrutura de conteúdo

⚠️ Consideração de Segurança: Embora innerHTML apareça em muitos tutoriais, ele pode executar scripts embutidos. Assim como os protocolos de segurança no CERN que impedem a execução de código não autorizado, usar textContent e createElement oferece alternativas mais seguras.

Riscos do innerHTML:

Executa quaisquer tags <script> nos dados do usuário
Vulnerável a ataques de injeção de código
Cria potenciais vulnerabilidades de segurança
As alternativas mais seguras que estamos usando oferecem funcionalidade equivalente

Tornando os Erros Amigáveis ao Usuário

Atualmente, os erros de login aparecem apenas no console do navegador, o que é invisível para os usuários. Como a diferença entre os diagnósticos internos de um piloto e o sistema de informações para passageiros, precisamos comunicar informações importantes pelo canal apropriado.

Implementar mensagens de erro visíveis fornece aos usuários feedback imediato sobre o que deu errado e como proceder.

Passo 1: Adicione um Local para Mensagens de Erro

Primeiro, vamos dar às mensagens de erro um espaço no seu HTML. Adicione isso logo antes do botão de login para que os usuários o vejam naturalmente:

<!-- This is where error messages will appear -->
<div id="loginError" role="alert"></div>
<button>Login</button>

O que está acontecendo aqui:

Estamos criando um contêiner vazio que permanece invisível até ser necessário
Ele está posicionado onde os usuários naturalmente olham após clicar em "Login"
A propriedade role="alert" é um toque especial para leitores de tela - ela informa à tecnologia assistiva "ei, isso é importante!"
O id único dá ao nosso JavaScript um alvo fácil

Passo 2: Crie uma Função Auxiliar Prática

Vamos criar uma pequena função utilitária que pode atualizar o texto de qualquer elemento. Esta é uma daquelas funções "escreva uma vez, use em todo lugar" que economizará seu tempo:

function updateElement(id, text) {
  const element = document.getElementById(id);
  element.textContent = text;
}

Benefícios da função:

Interface simples que requer apenas um ID de elemento e conteúdo de texto
Localiza e atualiza elementos do DOM com segurança
Padrão reutilizável que reduz a duplicação de código
Mantém comportamento consistente de atualização em toda a aplicação

Passo 3: Mostre Erros Onde os Usuários Podem Vê-los

Agora vamos substituir aquela mensagem oculta no console por algo que os usuários possam realmente ver. Atualize sua função de login:

// Instead of just logging to console, show the user what's wrong
if (data.error) {
  return updateElement('loginError', data.error);
}

Essa pequena mudança faz uma grande diferença:

Mensagens de erro aparecem exatamente onde os usuários estão olhando
Não há mais falhas silenciosas misteriosas
Os usuários recebem feedback imediato e acionável
Seu aplicativo começa a parecer profissional e cuidadoso

Agora, ao testar com uma conta inválida, você verá uma mensagem de erro útil diretamente na página!

Passo 4: Sendo Inclusivo com Acessibilidade

Aqui está algo interessante sobre o role="alert" que adicionamos anteriormente - não é apenas decoração! Este pequeno atributo cria o que é chamado de Região Viva que anuncia imediatamente mudanças para leitores de tela:

<div id="loginError" role="alert"></div>

Por que isso importa:

Usuários de leitores de tela ouvem a mensagem de erro assim que ela aparece
Todos recebem as mesmas informações importantes, independentemente de como navegam
É uma maneira simples de fazer seu aplicativo funcionar para mais pessoas
Mostra que você se preocupa em criar experiências inclusivas

Pequenos detalhes como este separam desenvolvedores bons de ótimos!

🎯 Verificação Pedagógica: Padrões de Autenticação

Pausa e Reflexão: Você acabou de implementar um fluxo completo de autenticação. Este é um padrão fundamental no desenvolvimento web.

Autoavaliação Rápida:

Você consegue explicar por que usamos async/await para chamadas de API?
O que aconteceria se esquecêssemos a função encodeURIComponent()?
Como nosso tratamento de erros melhora a experiência do usuário?

Conexão com o Mundo Real: Os padrões que você aprendeu aqui (busca de dados assíncrona, tratamento de erros, feedback ao usuário) são usados em todas as grandes aplicações web, desde plataformas de mídia social até sites de comércio eletrônico. Você está desenvolvendo habilidades de nível de produção!

Pergunta Desafiadora: Como você modificaria este sistema de autenticação para lidar com múltiplos papéis de usuário (cliente, administrador, atendente)? Pense na estrutura de dados e nas mudanças na interface necessárias.

Passo 5: Aplique o Mesmo Padrão ao Registro

Para consistência, implemente o mesmo tratamento de erros no seu formulário de registro:

Adicione um elemento de exibição de erro ao seu HTML de registro:

<div id="registerError" role="alert"></div>

Atualize sua função de registro para usar o mesmo padrão de exibição de erros:

if (data.error) {
  return updateElement('registerError', data.error);
}

Benefícios do tratamento de erros consistente:

Proporciona uma experiência uniforme ao usuário em todos os formulários
Reduz a carga cognitiva ao usar padrões familiares
Simplifica a manutenção com código reutilizável
Garante que os padrões de acessibilidade sejam atendidos em todo o aplicativo

Criando Seu Painel Dinâmico

Agora vamos transformar seu painel estático em uma interface dinâmica que exibe dados reais da conta. Como a diferença entre um cronograma de voos impresso e os painéis de partidas ao vivo nos aeroportos, estamos passando de informações estáticas para exibições responsivas em tempo real.

Usando as técnicas de manipulação do DOM que você aprendeu, criaremos um painel que se atualiza automaticamente com informações atuais da conta.

Conhecendo Seus Dados

Antes de começar a construir, vamos dar uma olhada no tipo de dados que seu servidor envia de volta. Quando alguém faz login com sucesso, aqui está o tesouro de informações com o qual você pode trabalhar:

{
  "user": "test",
  "currency": "$",
  "description": "Test account",
  "balance": 75,
  "transactions": [
    { "id": "1", "date": "2020-10-01", "object": "Pocket money", "amount": 50 },
    { "id": "2", "date": "2020-10-03", "object": "Book", "amount": -10 },
    { "id": "3", "date": "2020-10-04", "object": "Sandwich", "amount": -5 }
  ]
}

Essa estrutura de dados fornece:

user: Perfeito para personalizar a experiência ("Bem-vinda de volta, Sarah!")
currency: Garante que exibimos valores monetários corretamente
description: Um nome amigável para a conta
balance: O saldo atual, que é essencial
transactions: O histórico completo de transações com todos os detalhes

Tudo o que você precisa para construir um painel bancário com aparência profissional!

flowchart TD
    A[User Login] --> B[Fetch Account Data]
    B --> C{Data Valid?}
    C -->|Yes| D[Store in Global Variable]
    C -->|No| E[Show Error Message]
    D --> F[Navigate to Dashboard]
    F --> G[Update UI Elements]
    G --> H[Display Balance]
    G --> I[Show Description]
    G --> J[Render Transactions]
    J --> K[Create Table Rows]
    K --> L[Format Currency]
    L --> M[User Sees Live Data]

💡 Dica Profissional: Quer ver seu painel em ação imediatamente? Use o nome de usuário test ao fazer login - ele vem pré-carregado com dados de exemplo para que você possa ver tudo funcionando sem precisar criar transações primeiro.

Por que a conta de teste é útil:

Vem com dados de exemplo realistas já carregados
Perfeito para ver como as transações são exibidas
Ótimo para testar os recursos do painel
Economiza o trabalho de criar dados fictícios manualmente

Criando os Elementos de Exibição do Painel

Vamos construir sua interface do painel passo a passo, começando com as informações resumidas da conta e depois avançando para recursos mais complexos, como listas de transações.

Passo 1: Atualize a Estrutura do HTML

Primeiro, substitua a seção estática "Saldo" por elementos de espaço reservado dinâmicos que seu JavaScript pode preencher:

<section>
  Balance: <span id="balance"></span><span id="currency"></span>
</section>

Em seguida, adicione uma seção para a descrição da conta. Como isso funciona como um título para o conteúdo do painel, use HTML semântico:

<h2 id="description"></h2>

Entendendo a estrutura do HTML:

Usa elementos <span> separados para saldo e moeda para controle individual
Aplica IDs únicos a cada elemento para direcionamento com JavaScript
Segue HTML semântico usando <h2> para a descrição da conta
Cria uma hierarquia lógica para leitores de tela e SEO

✅ Insight de Acessibilidade: A descrição da conta funciona como um título para o conteúdo do painel, então está marcada semanticamente como um cabeçalho. Saiba mais sobre como a estrutura de cabeçalhos impacta a acessibilidade. Você consegue identificar outros elementos na sua página que poderiam se beneficiar de tags de cabeçalho?

Passo 2: Crie a Função de Atualização do Painel

Agora crie uma função que preencha seu painel com dados reais da conta:

function updateDashboard() {
  if (!account) {
    return navigate('/login');
  }

  updateElement('description', account.description);
  updateElement('balance', account.balance.toFixed(2));
  updateElement('currency', account.currency);
}

Passo a passo, aqui está o que essa função faz:

Valida se os dados da conta existem antes de prosseguir
Redireciona usuários não autenticados de volta para a página de login
Atualiza a descrição da conta usando a função reutilizável updateElement
Formata o saldo para sempre mostrar duas casas decimais
Exibe o símbolo de moeda apropriado

💰 Formatação de Dinheiro: O método toFixed(2) é um salva-vidas! Ele garante que seu saldo sempre pareça dinheiro real - "75.00" em vez de apenas "75". Seus usuários vão apreciar ver uma formatação de moeda familiar.

Passo 3: Garantindo que Seu Painel Seja Atualizado

Para garantir que seu painel seja atualizado com dados atuais toda vez que alguém o acessar, precisamos integrá-lo ao seu sistema de navegação. Se você completou a lição 1, isso deve parecer familiar. Caso contrário, não se preocupe - aqui está o que você precisa:

Adicione isso ao final da sua função updateRoute():

if (typeof route.init === 'function') {
  route.init();
}

Em seguida, atualize suas rotas para incluir a inicialização do painel:

const routes = {
  '/login': { templateId: 'login' },
  '/dashboard': { templateId: 'dashboard', init: updateDashboard }
};

O que essa configuração inteligente faz:

Verifica se uma rota tem código de inicialização especial
Executa esse código automaticamente quando a rota é carregada
Garante que seu painel sempre mostre dados atualizados e atuais
Mantém sua lógica de roteamento limpa e organizada

Testando Seu Painel

Depois de implementar essas mudanças, teste seu painel:

Faça login com uma conta de teste
Verifique se você foi redirecionado para o painel
Cheque se a descrição da conta, saldo e moeda são exibidos corretamente
Tente sair e fazer login novamente para garantir que os dados sejam atualizados corretamente

Seu painel agora deve exibir informações dinâmicas da conta que se atualizam com base nos dados do usuário logado!

Construindo Listas de Transações Inteligentes com Templates

Em vez de criar manualmente HTML para cada transação, usaremos templates para gerar formatação consistente automaticamente. Como os componentes padronizados usados na fabricação de espaçonaves, os templates garantem que cada linha de transação siga a mesma estrutura e aparência.

Essa técnica escala eficientemente de algumas transações para milhares, mantendo desempenho e apresentação consistentes.

graph LR
    A[HTML Template] --> B[JavaScript Clone]
    B --> C[Populate with Data]
    C --> D[Add to Fragment]
    D --> E[Batch Insert to DOM]
    
    subgraph "Performance Benefits"
        F[Single DOM Update]
        G[Consistent Formatting]
        H[Reusable Pattern]
    end
    
    E --> F
    E --> G
    E --> H

flowchart LR
    A[Transaction Data] --> B[HTML Template]
    B --> C[Clone Template]
    C --> D[Populate with Data]
    D --> E[Add to DOM]
    E --> F[Repeat for Each Transaction]

Passo 1: Crie o Template de Transação

Primeiro, adicione um template reutilizável para linhas de transação no <body> do seu HTML:

<template id="transaction">
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</template>

Entendendo os templates HTML:

Define a estrutura para uma única linha de tabela
Permanece invisível até ser clonado e preenchido com JavaScript
Inclui três células para data, descrição e valor
Fornece um padrão reutilizável para formatação consistente

Passo 2: Prepare Sua Tabela para Conteúdo Dinâmico

Em seguida, adicione um id ao corpo da tabela para que o JavaScript possa facilmente direcioná-lo:

<tbody id="transactions"></tbody>

O que isso realiza:

Cria um alvo claro para inserir linhas de transação
Separa a estrutura da tabela do conteúdo dinâmico
Permite fácil limpeza e repopulação dos dados da transação

Passo 3: Construa a Função de Fábrica de Linhas de Transação

Agora crie uma função que transforma dados de transação em elementos HTML:

function createTransactionRow(transaction) {
  const template = document.getElementById('transaction');
  const transactionRow = template.content.cloneNode(true);
  const tr = transactionRow.querySelector('tr');
  tr.children[0].textContent = transaction.date;
  tr.children[1].textContent = transaction.object;
  tr.children[2].textContent = transaction.amount.toFixed(2);
  return transactionRow;
}

Desmembrando essa função de fábrica:

Recupera o elemento template pelo seu ID
Clona o conteúdo do template para manipulação segura
Seleciona a linha da tabela dentro do conteúdo clonado
Preenche cada célula com dados da transação
Formata o valor para mostrar casas decimais adequadas
Retorna a linha completa pronta para inserção

Passo 4: Gere Múltiplas Linhas de Transação de Forma Eficiente

Adicione este código à sua função updateDashboard() para exibir todas as transações:

const transactionsRows = document.createDocumentFragment();
for (const transaction of account.transactions) {
  const transactionRow = createTransactionRow(transaction);
  transactionsRows.appendChild(transactionRow);
}
updateElement('transactions', transactionsRows);

Entendendo essa abordagem eficiente:

Cria um fragmento de documento para agrupar operações do DOM
Itera por todas as transações nos dados da conta
Gera uma linha para cada transação usando a função de fábrica
Coleta todas as linhas no fragmento antes de adicionar ao DOM
Realiza uma única atualização no DOM em vez de várias inserções individuais

⚡ Otimização de Desempenho: document.createDocumentFragment() funciona como o processo de montagem na Boeing - os componentes são preparados fora da linha principal e depois instalados como uma unidade completa. Essa abordagem de agrupamento minimiza os reflows do DOM ao realizar uma única inserção em vez de várias operações individuais.

Etapa 5: Aprimore a Função de Atualização para Conteúdo Misto

Sua função updateElement() atualmente só lida com conteúdo de texto. Atualize-a para funcionar tanto com texto quanto com nós do DOM:

function updateElement(id, textOrNode) {
  const element = document.getElementById(id);
  element.textContent = ''; // Removes all children
  element.append(textOrNode);
}

Principais melhorias nesta atualização:

Limpa o conteúdo existente antes de adicionar novo conteúdo
Aceita tanto strings de texto quanto nós do DOM como parâmetros
Utiliza o método append() para maior flexibilidade
Mantém compatibilidade com o uso baseado em texto existente

Testando Seu Dashboard

Chegou o momento da verdade! Vamos ver seu dashboard dinâmico em ação:

Faça login usando a conta test (ela já tem dados de exemplo prontos)
Navegue até seu dashboard
Verifique se as linhas de transações aparecem com a formatação correta
Certifique-se de que as datas, descrições e valores estão exibidos corretamente

Se tudo estiver funcionando, você verá uma lista de transações totalmente funcional no seu dashboard! 🎉

O que você conquistou:

Criou um dashboard que escala com qualquer quantidade de dados
Desenvolveu templates reutilizáveis para formatação consistente
Implementou técnicas eficientes de manipulação do DOM
Desenvolveu funcionalidades comparáveis às de aplicativos bancários de produção

Você transformou com sucesso uma página estática em um aplicativo web dinâmico.

🎯 Reflexão Pedagógica: Geração de Conteúdo Dinâmico

Compreensão de Arquitetura: Você implementou um pipeline sofisticado de dados para interface de usuário que reflete padrões usados em frameworks como React, Vue e Angular.

Conceitos-Chave Dominados:

Renderização baseada em templates: Criação de componentes de interface reutilizáveis
Fragmentos de documento: Otimização de desempenho do DOM
Manipulação segura do DOM: Prevenção de vulnerabilidades de segurança
Transformação de dados: Conversão de dados do servidor para interfaces de usuário

Conexão com a Indústria: Essas técnicas formam a base dos frameworks modernos de frontend. O virtual DOM do React, o sistema de templates do Vue e a arquitetura de componentes do Angular se baseiam nesses conceitos fundamentais.

Pergunta de Reflexão: Como você estenderia este sistema para lidar com atualizações em tempo real (como novas transações aparecendo automaticamente)? Considere WebSockets ou Server-Sent Events.

📈 Linha do Tempo de Domínio em Gerenciamento de Dados

timeline
    title Data-Driven Development Journey
    
    section Foundation Building
        API Setup & Testing
            : Understand client-server communication
            : Master HTTP request/response cycle
            : Learn debugging techniques
    
    section Authentication Mastery
        Async Function Patterns
            : Write clean async/await code
            : Handle promises effectively
            : Implement error boundaries
        User Session Management
            : Create global state patterns
            : Build navigation guards
            : Design user feedback systems
    
    section Dynamic UI Development
        Safe DOM Manipulation
            : Prevent XSS vulnerabilities
            : Use textContent over innerHTML
            : Create accessibility-friendly interfaces
        Template Systems
            : Build reusable UI components
            : Optimize performance with fragments
            : Scale to handle large datasets
    
    section Professional Patterns
        Production-Ready Code
            : Implement comprehensive error handling
            : Follow security best practices
            : Create maintainable architectures
        Modern Web Standards
            : Master Fetch API patterns
            : Understand CORS configurations
            : Build responsive, accessible UIs

🎓 Marco de Graduação: Você construiu com sucesso um aplicativo web completo orientado por dados usando padrões modernos de JavaScript. Essas habilidades se traduzem diretamente no trabalho com frameworks como React, Vue ou Angular.

🔄 Capacidades de Próximo Nível:

Pronto para explorar frameworks de frontend que se baseiam nesses conceitos
Preparado para implementar recursos em tempo real com WebSockets
Equipado para criar Aplicativos Web Progressivos com capacidades offline
Base estabelecida para aprender padrões avançados de gerenciamento de estado

Desafio do Agente do GitHub Copilot 🚀

Use o modo Agent para completar o seguinte desafio:

Descrição: Melhore o aplicativo bancário implementando um recurso de busca e filtro de transações que permita aos usuários encontrar transações específicas por intervalo de datas, valor ou palavras-chave na descrição.

Prompt: Crie uma funcionalidade de busca para o aplicativo bancário que inclua: 1) Um formulário de busca com campos de entrada para intervalo de datas (de/até), valor mínimo/máximo e palavras-chave na descrição da transação, 2) Uma função filterTransactions() que filtre o array account.transactions com base nos critérios de busca, 3) Atualize a função updateDashboard() para mostrar os resultados filtrados, e 4) Adicione um botão "Limpar Filtros" para redefinir a visualização. Use métodos modernos de array do JavaScript, como filter(), e trate casos extremos para critérios de busca vazios.

Saiba mais sobre o modo agent aqui.

🚀 Desafio

Pronto para levar seu aplicativo bancário para o próximo nível? Vamos fazer com que ele pareça algo que você realmente gostaria de usar. Aqui estão algumas ideias para inspirar sua criatividade:

Deixe bonito: Adicione estilos CSS para transformar seu dashboard funcional em algo visualmente atraente. Pense em linhas limpas, bom espaçamento e talvez até algumas animações sutis.

Torne-o responsivo: Experimente usar media queries para criar um design responsivo que funcione bem em celulares, tablets e desktops. Seus usuários vão agradecer!

Adicione um toque especial: Considere codificar as transações por cores (verde para receitas, vermelho para despesas), adicionar ícones ou criar efeitos de hover que façam a interface parecer interativa.

Aqui está como um dashboard polido poderia parecer:

Não sinta que precisa seguir exatamente este modelo - use-o como inspiração e crie algo único!

Quiz Pós-Aula

Quiz pós-aula

Tarefa

Refatore e comente seu código

Aviso Legal:
Este documento foi traduzido usando o serviço de tradução por IA Co-op Translator. Embora nos esforcemos para garantir a precisão, esteja ciente de que traduções automatizadas podem conter erros ou imprecisões. O documento original em seu idioma nativo deve ser considerado a fonte autoritativa. Para informações críticas, recomenda-se a tradução profissional feita por humanos. Não nos responsabilizamos por quaisquer mal-entendidos ou interpretações incorretas decorrentes do uso desta tradução.

46 KiB Raw Blame History