Passo 1: A estrutura
Um campo, um botão, e uma área vazia esperando por dados que ainda não existem. É daí que todo projeto com API começa.
Estudar esta lição interativa →Os quatro primeiros projetos trabalharam com dados que você mesmo criou: um array de perguntas, uma lista de compras digitada na hora, cartas embaralhadas no seu próprio código. Este quinto projeto muda a régua: um buscador de CEP, que consulta um serviço de verdade na internet, a ViaCEP, gratuita e sem necessidade de cadastro, e devolve o endereço real correspondente. É a sua primeira vez trazendo dados de fora do seu controle para dentro de um app: você não escreve os endereços, não sabe o que vai vir, e precisa lidar com o fato de que a resposta pode demorar, falhar, ou simplesmente não existir.
Este primeiro passo é só a estrutura: um campo de texto para o CEP, um botão de busca, e uma div de resultado que começa vazia, porque, ao contrário dos projetos anteriores, ainda não temos nenhum endereço para mostrar. Ela só vai ganhar conteúdo quando uma busca de verdade acontecer, no passo 3.
🧩 Este conteúdo é interativo — abra no app para ver e rodar de verdade. Só a estrutura, por enquanto. O botão Buscar ainda não faz nada.
Você já viu esse aviso na lição de fetch do curso de JavaScript: sempre que uma tela depende de uma API externa, ela merece avisar isso de forma honesta, porque uma conexão instável ou ausente muda completamente o que a pessoa usando o app vai ver. Aqui ele aparece desde a primeira versão, mesmo sem nenhum código de busca ainda, porque faz parte do design da tela, não só da lógica.