Aulas
Disciplinas

Cursos / Informática para Internet / Desenvolvimento Front-end II / Aula

arrow_back Aula 07 - JSON

Exemplo

API significa Application Programming Interface, ou seja, uma interface para programação de aplicações, que podemos considerar ser um conjunto de regras que são compartilhadas por um serviço em particular. Essas regras determinam em que formato e o conjunto de comandos que sua aplicação pode usar para acessar esse serviço, de forma que ele possa, por exemplo, consumir dados de outra aplicação externa.

Uma API REST é uma API que usa requisições HTTPs, ou seja, o protocolo usado para navegação na Internet, para permitir a comunicação entre aplicações distintas. Para uma API ser considerada de fato REST, existem outras restrições que devem ser atendidas, mas não vamos entrar nesse mérito agora. Porém saiba que o formato mais popular de compartilhar dados através de APIs REST é o formato JSON.

Para termos um primeiro contato em como consumir APIs RESTs, vamos desenvolver um exemplo utilizando a API pública de consulta de endereços através do CEP. Com certeza você já acessou algum sistema ou site que quando você digitou seu CEP, os demais campos como Rua, Bairro e Cidade automaticamente eram preenchidos. Um exemplo de API para consulta de CEPs é o ViaCEP.

Página HTML do exemplo (index.html)

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Formulário com consulta a API de CEPs</title>
    <script src="script.js" async></script>
  </head>
  <style>
    .inputClass {
      width: 100%;
      padding: 12px 20px;
      margin: 8px 0;
      display: inline-block;
      border: 1px solid #ccc;
      border-radius: 4px;
      box-sizing: border-box;
    }

    div {
      width: 30%;
      border-radius: 5px;
      background-color: #f2f2f2;
      padding: 20px;
    }
  </style>

  <body>
    <h3>Formulário com consulta a API de CEPs</h3>

    <div>
      <form action="#">
        <label>CEP:</label>
        <input id="cep" class="inputClass" />

        <label>Rua:</label>
        <input id="logradouro" class="inputClass" />

        <label>Bairro:</label>
        <input id="bairro" class="inputClass" />

        <label>Cidade:</label>
        <input id="localidade" class="inputClass" />

        <label>Estado:</label>
        <input id="uf" class="inputClass" />
      </form>
    </div>
  </body>
</html>

Javascript do exemplo (script.js)

var campoCEP = document.querySelector('#cep');

var campos = ['logradouro', 'bairro', 'localidade', 'uf'];

function atualizarEnderecoPeloCEP() {
    let cep = campoCEP.value;
    let requestURL = 'https://viacep.com.br/ws/' + cep + '/json/';
    let request = new XMLHttpRequest();
    request.open('GET', requestURL);
    request.send();
    request.onload = function () {
        let resposta = request.response;
        atualizarCamposDoFormulario(resposta);
    }
}

function atualizarCamposDoFormulario(dadosJson) {
    let dados = JSON.parse(dadosJson);
    if (!dados.erro) {
        campos.forEach(item => {
            document.getElementById(item).value = dados[item];
        });
    }
}

campoCEP.addEventListener('change', atualizarEnderecoPeloCEP);

Versão 5.3 - Todos os Direitos reservados