Você já percebeu que alguns sites preenchem o endereço automaticamente quando digitamos um CEP?

Esse recurso está presente em lojas virtuais, sistemas de cadastro, aplicativos de entrega e diversos outros serviços que utilizamos diariamente.

Mas como isso acontece?

Será que o endereço já está salvo dentro do site?

A resposta é não.

Quando digitamos um CEP, o sistema faz uma consulta para um servidor na internet que possui uma API. Esse servidor retorna as informações do endereço no formato JSON, permitindo que nossa aplicação apresente esses dados automaticamente.

Neste artigo você aprenderá como funciona esse processo e desenvolverá um pequeno projeto utilizando HTML, CSS e JavaScript, consumindo a API pública do ViaCEP.

---

O que você aprenderá

Ao finalizar este artigo você será capaz de:

• Entender o que é uma API;
• Compreender como funciona uma API na nuvem;
• Entender o conceito de requisição e resposta;
• Consumir uma API utilizando JavaScript;
• Trabalhar com JSON;
• Utilizar a função fetch();
• Atualizar informações na página utilizando o DOM;
• Tratar erros durante uma requisição.

---

O que é uma API?

API é a sigla para Application Programming Interface (Interface de Programação de Aplicações).

Apesar do nome parecer complicado, a ideia é bastante simples.

Uma API funciona como uma ponte entre dois sistemas.

Imagine um restaurante.

Você não entra na cozinha para preparar sua comida.

Você faz o pedido ao garçom.

O garçom leva o pedido até a cozinha.

A cozinha prepara o prato.

Depois o garçom traz o pedido até você.

Nesse exemplo:

• Você é a aplicação;
• O garçom é a API;
• A cozinha é o servidor.

A API recebe uma solicitação, conversa com o servidor e devolve uma resposta para quem fez o pedido.

---

O que é uma API na nuvem?

Uma API na nuvem é exatamente a mesma ideia.

A diferença é que ela está hospedada em um servidor conectado à internet.

Isso significa que qualquer aplicação autorizada pode utilizá-la.

Nosso computador envia uma solicitação pela internet.

O servidor processa essa solicitação.

Depois devolve uma resposta.

É exatamente isso que acontece quando consultamos um CEP.

---

Como funciona a comunicação?

Quando digitamos um CEP, acontece o seguinte:

Usuário
      ↓
Nosso Sistema
      ↓
Internet
      ↓
API ViaCEP
      ↓
Servidor localiza o endereço
      ↓
Resposta em JSON
      ↓
Nosso JavaScript
      ↓
Tela do usuário

Observe que o endereço não está salvo no nosso computador.

Ele vem diretamente do servidor da API.

Por isso dizemos que estamos consumindo um serviço disponível na nuvem.

---

Conhecendo a API ViaCEP

O ViaCEP disponibiliza gratuitamente uma API para consulta de endereços.

A URL possui o seguinte formato:

https://viacep.com.br/ws/13484320/json/

Onde:

• https:// indica que estamos utilizando uma conexão segura;
• viacep.com.br é o servidor da API;
• ws representa o serviço disponibilizado;
• 13484320 é o CEP pesquisado;
• json informa que desejamos receber a resposta no formato JSON.

Sempre que alterarmos o CEP na URL, receberemos um endereço diferente.

---

O que é JSON?

JSON significa JavaScript Object Notation.

É um formato utilizado para troca de informações entre sistemas.

Ao consultar o ViaCEP, recebemos algo parecido com isto:

{
    "cep": "13484-320",
    "logradouro": "Rua Exemplo",
    "bairro": "Centro",
    "localidade": "Limeira",
    "uf": "SP",
    "ddd": "19"
}

Observe que cada informação possui um nome e um valor.

Nosso JavaScript consegue acessar cada propriedade individualmente.

Por exemplo:

dados.logradouro

ou

dados.localidade

---

Como consumir uma API utilizando JavaScript

O JavaScript possui uma função chamada fetch().

Ela é utilizada para fazer requisições para servidores.

Um exemplo simples é:

const resposta = await fetch(url);

Depois convertemos a resposta para JSON.

const dados = await resposta.json();

Agora podemos acessar todas as informações retornadas pela API.

---

Estrutura do projeto

Nosso projeto será composto por três arquivos.

index.html

style.css

script.js

O usuário informa um CEP.

O JavaScript consulta a API.

Os dados retornam em JSON.

Depois atualizamos a página automaticamente.

---

Tratando erros

Nem sempre tudo acontece como esperamos.

Algumas situações precisam ser tratadas.

Por exemplo:

• CEP incompleto;
• CEP inexistente;
• Usuário sem internet;
• Erro no servidor.

Uma aplicação profissional sempre informa ao usuário quando algo deu errado.

---

Onde encontramos APIs no dia a dia?

Mesmo sem perceber, utilizamos APIs praticamente todos os dias.

Alguns exemplos:

• Consulta de CEP;
• Previsão do tempo;
• Google Maps;
• Aplicativos de transporte;
• Bancos digitais;
• Redes sociais;
• Lojas virtuais;
• Sistemas de pagamento.

Quase toda aplicação moderna utiliza uma ou mais APIs.

---

Conclusão

Neste artigo você aprendeu o conceito de API de forma prática, entendendo como uma aplicação pode consultar um serviço hospedado na nuvem para obter informações em tempo real.

Utilizando a API pública do ViaCEP vimos como funciona a comunicação entre cliente e servidor, conhecemos o formato JSON e demos o primeiro passo para desenvolver aplicações que utilizam serviços externos.

Esse é um dos conceitos mais importantes para qualquer desenvolvedor Web, pois praticamente todos os sistemas modernos dependem da integração com APIs.

---

Próximo passo

No próximo projeto vamos utilizar outra API pública para consultar informações em tempo real e continuar explorando o desenvolvimento de aplicações conectadas à nuvem.