Atividade Fetch API — PokeSearch

Disciplina: Programação Web 2
Assunto: Fetch API, Promises, async/await
Professor: Me. Danilo Bueno
Grupos: duplas
Duração: 4 aulas de 50 minutos (em sala)

Importante

• 📖 Material de apoio — Fetch API e Assincronicidade
• 📊 Slides da aula

Contextualização

A PokeHub é uma startup que desenvolve ferramentas para colecionadores de Pokémon. O time de produto pediu uma feature simples: um buscador que, dado o nome ou número de um Pokémon, exibe a imagem, o nome e os tipos na tela.

O backend preparou o HTML da interface. A dupla foi contratada como time de frontend para implementar a lógica de busca — conectar o botão à PokéAPI e exibir os dados na página.

A API usada é a PokéAPI — gratuita, sem autenticação, com dados completos. Para buscar um Pokémon, o formato da URL é:

https://pokeapi.co/api/v2/pokemon/<nome-ou-numero>

Exemplos:

• https://pokeapi.co/api/v2/pokemon/pikachu
• https://pokeapi.co/api/v2/pokemon/25

Como começar

Crie dois arquivos na mesma pasta:

**index.html** — copie o código abaixo e não modifique este arquivo:

<!DOCTYPE html>
<html lang="pt-BR">
  <head>
    <meta charset="UTF-8" >
    <title>PokeSearch — PokeHub</title>
  </head>
  <body>
    <h1>PokeSearch</h1>
    <input type="text" id="campo-busca" placeholder="Nome ou número do Pokémon">
    <button id="btn-buscar">Buscar</button>
    <div id="resultado"></div>
    <div id="mensagem-erro"></div>
    <script src="pokesearch.js"></script>
  </body>
</html>

**pokesearch.js** — crie o arquivo vazio. Todo o código da atividade vai aqui.

Como funciona

• Trabalhem em dupla num único arquivo pokesearch.js
• Testem cada tarefa antes de avançar — abram o index.html no navegador com o DevTools aberto
• A URL base da API é: https://pokeapi.co/api/v2/pokemon/
• Nomes em minúsculo — a API não aceita letras maiúsculas no nome (pikachu, não Pikachu)
• Ao abrir https://pokeapi.co/api/v2/pokemon/pikachu diretamente no navegador, você vê a estrutura completa do JSON

Cronograma

Missão 1 — fetch e Promises

Objetivo: entender o que fetch retorna e como encadear .then() para acessar os dados.

Tarefa 1.1: no pokesearch.js, adicione a linha abaixo e abra o index.html no navegador. Observe o que aparece no console.

console.log(fetch("https://pokeapi.co/api/v2/pokemon/pikachu"));

Pergunta 1.1: o que você vê no console? É o objeto do Pokémon? O que esse valor representa?

Tarefa 1.2: remova a linha anterior. Agora encadeie .then() para converter a resposta em JSON e imprimir o objeto completo:

fetch("https://pokeapi.co/api/v2/pokemon/pikachu")
  .then(/* complete aqui */)
  .then(/* complete aqui */);

Expanda o objeto no console e localize os campos name, base_experience e sprites.front_default.

Tarefa 1.3: envolva o fetch numa função chamada buscarPokemon(nome). A função deve:

• Receber o nome como parâmetro (substituindo "pikachu" na URL)
• Encadear .then() para converter o JSON e imprimir no console:
  • o name do Pokémon
  • o base_experience

Chame buscarPokemon("charmander") para testar.

Missão 2 — async/await

Objetivo: reescrever a mesma função usando async/await e tratar erros com try/catch.

Tarefa 2.1: reescreva buscarPokemon(nome) como async function. Use await para aguardar o fetch e o .json(). O resultado impresso no console deve ser idêntico ao da Missão 1.

Pergunta 2.1: o que a variável receberia se você esquecesse o await antes de response.json()? Teste e observe.

Tarefa 2.2: envolva o código em try/catch. No bloco catch, imprima erro.message no console.

Teste com um nome inválido — por exemplo buscarPokemon("pikachiuu") — e observe o que aparece.

Pergunta 2.2: o erro foi capturado pelo catch? Se sim, qual foi a mensagem? Se não, por que não?

Missão 3 — Exibindo na tela

Objetivo: conectar a função ao botão e exibir nome, imagem e tipos no #resultado.

Tarefa 3.1: no pokesearch.js, selecione o botão e o campo de busca. Adicione um listener de "click" no botão. No callback:

• Leia o valor do campo com .value.trim()
• Chame buscarPokemon() passando o nome digitado

Tarefa 3.2: modifique buscarPokemon(nome) para, após obter os dados da API, preencher o #resultado com:

• O nome do Pokémon (campo name) num <h2>
• A imagem (sprites.front_default) num <img>
• Os tipos — cada Pokémon tem um array types, onde cada item tem types[i].type.name. Exiba os tipos separados por vírgula num <p>

Tarefa 3.3: a cada nova busca, limpe o conteúdo anterior de #resultado antes de inserir os novos dados. Use innerHTML = "" ou textContent = "".

Missão 4 — Tratamento de erros e UX

Objetivo: retornar mensagens de erro úteis ao usuário e melhorar a experiência durante a busca.

Tarefa 4.1: dentro de buscarPokemon, logo após o await fetch(...), verifique response.ok. Se for false, lance um erro com a mensagem "Pokémon não encontrado" usando throw new Error(...).

Pergunta 4.1: por que o catch da Tarefa 2.2 não capturou automaticamente o erro 404 da API?

Tarefa 4.2: no bloco catch, em vez de apenas imprimir no console, exiba a mensagem de erro no elemento #mensagem-erro da página. Limpe #resultado também.

Para reforçar a diferença: limpe #mensagem-erro no início de cada busca (antes do await), para que a mensagem anterior não fique na tela.

Tarefa 4.3: melhore a UX da busca:

• Ao iniciar a busca: desabilite o botão (btn.disabled = true) e altere o texto para "Buscando…"
• Ao terminar (com sucesso ou erro): reabilite o botão (btn.disabled = false) e restaure o texto para "Buscar"

Dica: use um bloco finally (após try/catch) para garantir que o botão seja sempre reabilitado, mesmo em caso de erro.

Tarefa 4.4 (desafio): implemente um histórico dos últimos 5 Pokémon buscados com sucesso. Exiba os nomes como botões abaixo do campo de busca. Clicar em um botão do histórico deve buscar aquele Pokémon novamente.

Entrega individual

Acesse o Moodle e responda o questionário de reflexão individual — cada membro da dupla entrega o seu próprio.

Além do questionário, anexe o arquivo pokesearch.js com o código completo desenvolvido pela dupla.