Criar uma página de busca compartilhável

Criar uma página de busca compartilhável é um projeto prático de frontend para quem tem conhecimentos básicos de HTML, CSS e JavaScript. Você criará a busca do Fieldnote, um site fictício de eventos locais cujo link abre os mesmos resultados filtrados e ordenados, na mesma página de resultados, em outro contexto do navegador.

Dois laboratórios guiados começam com uma visualização compartilhada funcional e depois desenvolvem o estado de busca baseado na URL e a navegação do navegador. Um desafio independente aplica os mesmos mecanismos a outra edição de eventos, com categorias e tamanho de página diferentes. Cada laboratório fornece seus próprios arquivos e dados iniciais.

O que você aprenderá

Ao concluir o curso, você poderá:

• filtrar, ordenar e paginar um catálogo de eventos preparado, mantendo o conteúdo de cada registro associado ao seu ID estável, inclusive quando eventos têm o mesmo título;
• ler e normalizar q, category, sort e page com URL e URLSearchParams, tratando espaços, &, o caractere literal +, valores desconhecidos e páginas inválidas;
• manter os filtros enviados, os controles visíveis, os resultados e o link de compartilhamento consistentes, com estados úteis sem resultados e limites de paginação claros;
• usar pushState, replaceState e popstate para restaurar visualizações confirmadas ao atualizar e ao navegar de verdade para trás e para a frente, sem adicionar entradas desnecessárias ao histórico;
• abrir um link real de compartilhamento em um contexto de navegador limpo e comparar os mesmos registros na mesma ordem, preservando o caminho atual, os parâmetros de consulta não relacionados e o fragmento.

Para quem é este curso

Este curso é indicado para quem quer conectar o estado do navegador, o processamento de dados em JavaScript e uma interface de busca útil.

Pré-requisitos: Uso básico do terminal e de caminhos; formulários HTML; layout CSS e foco visível; objetos, arrays, funções, seleção e manipulação do DOM e eventos de JavaScript. Você deve saber editar e salvar os arquivos do projeto. Os laboratórios guiados ensinam codificação de URL, filter/sort/slice, cópia de arrays, identidade estável dos registros e histórico do navegador antes do desafio. React e programação de backend não são necessários.

Ambiente de aprendizagem: A LabEx fornece um ambiente de programação no navegador, um site estático e dados sintéticos de eventos já preparados. Você implementa o JavaScript do navegador; o servidor apenas entrega arquivos. Os rótulos do site e a saída de execução permanecem em inglês.

Perguntas frequentes

Vou criar um backend de busca ou salvar preferências dos visitantes?

Não. A filtragem, a ordenação e a paginação são executadas no navegador sobre dados locais preparados. A URL contém a visualização confirmada, portanto outro navegador não precisa dos dados salvos pelo primeiro.

O que acontece com alterações que ainda não enviei?

Os controles guardam um rascunho até o envio por Search. Atualizar restaura o estado confirmado na URL. Você também praticará como corrigir buscas restritivas demais e lidar com valores padrão ou correções de página documentados; não encontrar correspondências é um resultado válido.

Posso publicar um link permanente com este curso?

Não. O compartilhamento se limita ao laboratório autorizado em execução e à sua rota disponível. Um link não mantém uma VM ativa, não garante acesso entre VMs de laboratórios diferentes e não publica a página na Internet. Implantação em produção e certificação completa de acessibilidade estão fora do escopo do curso.