DS & II

Capítulo 19 - Paginação e Filtros

Leitura de 3 min

🚀 Capítulo 19: Paginação e Filtros (Tema: Dragon Ball)

NOTE

Este capítulo utiliza a temática de Dragon Ball para explicar a Paginação. O Shenlong pode realizar desejos, mas buscar todas as esferas de uma vez sobrecarrega o sistema; precisamos ir por partes!

1. 🎯 Objetivo da Aula

Compreender a importância de não retornar todos os dados de uma vez (Paginação) e como permitir que o usuário filtre os dados usando Query Params.

2. 🏢 O Cenário Prático (Seu Desafio)

Existem milhares de Esferas do Dragão espalhadas pelo universo. Se o Radar do Dragão tentar listar todas elas em uma única tela, a bateria vai acabar e o sistema vai travar! Seu desafio é programar o Radar (a API) para:

  1. Mostrar apenas um grupo de esferas por vez (Ex: 5 por página).
  2. Permitir filtrar as esferas pelo planeta onde estão (Ex: Terra ou Namekusei).

3. 🧠 Fundamentos: A Teoria Traduzida

Quando nosso banco de dados tem milhares de registros, enviá-los todos de uma vez para o cliente causa lentidão e desperdício de internet. Usamos duas técnicas para resolver isso:

📄 1. Paginação (Pagination)

É a técnica de dividir a lista de resultados em páginas. O cliente diz qual página quer e quantos itens quer por página.

  • page (Página): O número da página atual (ex: 1, 2, 3).
  • limit (Limite): Quantos itens mostrar por página (ex: 10).
  • offset (Deslocamento): Quantos itens pular no banco para começar a mostrar. A fórmula é: (page - 1) * limit.

🔍 2. Filtros

Usamos Query Params para permitir que o usuário filtre os resultados.

  • Exemplo: GET /esferas?planeta=terra

4. 📖 Exemplo Guiado: Código com Paginação

app.get('/esferas', (req, res) => {
    const page = parseInt(req.query.page) || 1;
    const limit = parseInt(req.query.limit) || 5;
    
    const offset = (page - 1) * limit;
    
    // Simula a busca no banco usando slice no array
    const esferasPaginadas = todasAsEsferas.slice(offset, offset + limit);
    
    res.json({
        pagina_atual: page,
        itens_por_pagina: limit,
        dados: esferasPaginadas
    });
});

5. 🛠️ Prática Obrigatória 1: Calculando o Deslocamento

Se um usuário pedir a página 3 com um limite de 10 itens por página, qual será o valor do offset (quantos itens o sistema vai pular)? Use a fórmula ensinada.

6. 🛠️ Prática Obrigatória 2: Vantagem para o Celular

Por que a paginação é extremamente importante para aplicativos de celular que usam redes 4G/5G?

7. 📤 Instruções de Entrega (GitHub Desktop + Microsoft Teams)

  1. Faça o Commit: No GitHub Desktop, digite a mensagem (ex: Finaliza Capítulo 19 Backend) e clique em Commit to main.
  2. Envie para a Nuvem (Push): Clique em Push origin.

8. 📂 Estrutura de Pastas

mod_07_backend_e_apis/
├── capitulos/
│   ├── capitulo_19_paginacao.md
│   └── codigos/
│       └── cap19/
│           └── calculo_offset.txt

9. 💡 Checkpoint de Lógica

Se a nossa lista tiver 12 esferas e o limite for 5 por página. Quantas páginas completas teremos e quantos itens sobrarão na última página?

10. 🔥 Desafio de Fixação

Pesquise o que é a Paginação baseada em Cursor (Cursor-based pagination) e por que ela é usada em feeds de redes sociais como o Twitter/X em vez da paginação por página.

🔑 Gabarito de Código/Fórmulas

Gabarito da Prática 1: Fórmula: (page - 1) * limit Cálculo: (3 - 1) * 10 = 2 * 10 = 20. O sistema vai pular os primeiros 20 itens e mostrar do 21º ao 30º.

← Capitulo Anterior | Proximo Capitulo →

Visão de gráfico

Backlinks