Consumindo API’s com JavaScript – Aulas: Teórica, Prática I & Prática II

minasProgramam – Curso de introdução a programação – 12ª semana (20, 21 e 23/06/22)

Roteiro

  • Promise
  • async e await
  • Requisição a APIs
    • Server/Client
    • URL, Domínio, IP e DNS
    • Protocolo HTTP
    • Request/Response
    • API
    • JSON
    • fetch()

Apresentação

A Professora – Lilit

selfie de Lilit com cabelos cacheados pretos presos no topo da cabeça, olhos pretos, baton vermelho e mãos segurando o rosto ao lado direito com unhas grandes, veste uma blusa lilás e o fundo portas brancas de armário

A Monitora – Lorena

selfie de Lorena com cabelos cacheados pretos soltos, olhos castanhos, blusa azul com uma parede de tijolos a vista ao fundo

  • Sou ex-aluna e professora na {reprograma} e monitora aqui no minasProgramam, engenheira de software no Zé Delivery, nômade digital (atualmente em São Paulo) 🙂

  • LinkedIn

  • GitHub

  • [email protected]


Acordos

  • Enviar dúvidas no chat para a monitora;
  • Levantar a mão sempre que desejar falar, o que pode ser feito a qualquer momento;
  • Manter microfones desligados sempre que alguém estiver falando;
  • Manter as câmeras ligadas o máximo de tempo possível;
  • Forquem o repositório, clonem seus forkes e criem uma branch com seus nomes, na resposta do desafio, mude o nome da pasta nome-aluna para o seu. ex.: lilit-bandeira ;

Instruções iniciais

Plano de Aula

1. Promises

  • Promise é um objeto do JavaScript que tem a função de lidar com assincronicidade através de estados;

  • Funções assíncronas modernas retornam uma promise que representa a eventual falha ou conclusão de uma operação assíncrona, assim uma função assíncrona retorna um valor como uma função síncrona, porém no lugar do valor final, retorna uma promessa ao valor em algum momento no futuro;

  • Ciclo de vida da Promisse (estados):

    Estado Significado
    Pending Estado inicial, quando a promise ainda está em execução (não resolveu ou rejeitou)
    Fulfilled Quando executou todas as operações com sucesso
    Rejected Quando a execução finalizou com erro, falhou

bloco de texto com código javascript

  • Cria-se uma promise a partir da função construtora Promise passando como argumento uma callback que por sua vez recebe como argumentos os dois resultados possíveis para a promise: resolve ou reject, duas outras funções que executam o possível sucesso ou erro da promessa, respectivamente;
  • resolve(): Função que executa caso a promise seja resolvida com sucesso;
  • reject(): Função que executa caso a promise seja resolvida com erro;
  • Tratamos o retorno das promises através de métodos próprios, que chamam as callbacks depois da conclusão da promise;
  • then(): Método que ativa uma callback quando a promise for resolvida, o argumento desta callback é sempre o valor retornado na função resolve();

bloco de texto com código javascript

O then() retorna uma nova promise e por isso vários thens podem ser encadeados para casos onde existam duas ou mais operações assíncronas consecutivas, neste caso o valor do primeiro argumento de cada then encadeado será o valor do retorno do anterior;

  • catch(): Método que ativa uma callback quando a promise for rejeitada, o argumento desta callback é sempre o valor retornado na reject();

bloco de texto com código javascript


2. async/await

  • As palavra-chaves async e await atuam como um ‘açúcar sintático’ em cima de promises, faciltando a visualização e tornando a leitura do código assíncrono mais próxima do código síncrono;
  • Toda função que recebe o async se torna uma função assíncrona, que passa a retornar uma promise ao invés de retornar um valor diretamente, como uma promise o retorno desta função pode ser tratado com um then() normalmente;
  • Uma função async permite que a palavra-chave await seja usada dentro dela para invocar código assíncrono;
  • o await só funciona dentro de funções async e é colocado na frente de qualquer função que retorne promise para pausar o código até que a promise seja resolvida, retornando o valor resultante, importante usar apenas quando necessário tratar respostas de uma promise para não paralizar o fluxo, quando usado da maneira correta não altera a performance da aplicação;
  • Não precisa de funções para sincronizar os resultados;
  • Outro método importante da promise é o Promisse.all() que recebe uma array de funções assincronas independentes entre si, evitando o uso de awaits que não sejam necessários;
  • Facilita o tratamento de erros seja com menor encadeamento do .then() ou ainda com o uso de try/catch;

bloco de texto com código javascript


2.1. try/catch

  • É usado para marcar um bloco que será testado (try) e especifica uma ação para que uma possível exceção(erro) seja capturada pelo catch();
  • Ao usar o try é criado um bloco de código protegido, que caso ocorra algum erro neste bloco, a execução é desviada para o catch(), desta forma a aplicação não será quebrada e o erro poderá ser tratado, permitindo que o código siga sua execução;
  • O catch() é executado somente quando há alguma exceção no bloco try, caso contrário ele será ignorado, o argumento recebido pelo catch é a exceção ocorrida no bloco try e costuma ser chamada de err/error;

3. Requisição a APIs

3.1. Server/Client

  • Client é a interface que as usuárias interagem, isso inclui os navegadores e os apps e demais interfaces utilizadas pela usuária e que acessa a internet em diversas plataformas. O Client é responsável por solicitar serviços e dados que estão nos Servers;

  • É no Client que podemos:

    1. Capturar e Validar dados inseridos pelas usuárias;
    2. Manipular a tela de acordo com as informações vindas do servidor;
    3. Gerenciar os eventos disparados pelas usuárias;
    4. Gerenciar as mídias dos dispositivos das usuárias (som e vídeo);
  • Server é o responsável pelo processamento, a organização e o gerenciamento dos dados. Um Server responde às solicitações de serviços e dados realizadas pelos Clients;

  • É no Server que podemos:

    1. Autenticar usuárias nas aplicações;
    2. Organizar e atualizar os dados compartilhados;
    3. Gerenciar recursos compartilhados;
    4. Fazer a comunicação com os bancos de dados;

3.2. URL, Domínio, IP e DNS

  • A URL – Uniforme Recourse Locator (Localizdor de recurso uniforme), representa um recurso específico na web, cada página, imagem ou qualquer arquivo na internet possui um endereço, a URL.

image.png

  • Todo site possui um domínio, que é como o conhecemos e acessamos normalmente;
  • Para o servidor este mesmo site é registrado, identificado e localizado pelo seu IP – Internet Protocol Address (Endereço de protocolo da Internet);
  • É por isso que existe o DNS – Domain Name System (Sistema de Nome de Domínio), que é como um grande dicionário de domínios <-> IPs nativo nos browsers e demais Clients;

3.3. Protocolo HTTP

  • O HTTP – Hypertext Transfer Protocol (Protocolo de transferência de Hipertexto) é um protocolo de comunicação. Através dele o cliente e o servidor conseguem se comunicar, seguindo um conjunto de regras bem definidas. Esse protocolo determina como devem ser solicitadas informações e como elas devem ser entregues.

  • Quando acessamos uma URL, o Client envia uma solicitação passando todas as informações que precisamos para o Server, esta comunicação é feita na grande maioria dos casos de aplicações modernas através do Protocolo HTTP


3.4. Request/Response

  • O protocolo HTTP é um protocolo usado no modelo Client/Server e é baseado em requests(requisições) e responses(respostas);

  • Uma Request deve indicar a ação a ser executada de acordo com as definições do protocolo HTTP, estes são os Métodos HTTP

  • Principais métodos HTTP:

Estado Ação realizada
POST Create (Criar) – Armazena dados no banco
GET Read (Ler) – Realiza apenas leitura de dados no banco
PUT Update (Substituir) – Atualiza dados substituindo o conjunto de dados
PATCH Update (Modificar) – Atualiza dados modificando apenas o campo desejado
DELETE Delete (Excluir) – Exclui dados do banco
  • Uma Response é a reação do Server enviada após receber uma requisição do Client, e seu conteúdo possui além do que foi solicitado, um Status Code.
Código Tipo de Resposta
100 – 199 Apenas informações
200 – 299 Sucesso
300 – 399 Redirecionamento
400 – 499 Erro do Client
500 – 599 Erro do Server

3.5. APIs

  • Uma API – Application Programming Interface (Interface de Programação de Aplicativos) é uma interface de comunicação e integração entre aplicações. As APIs criam formas e ferramentas para que utilizemos uma funcionalidade ou acessemos dados sem precisar recriar coisas que já existem.

  • As APIs podem ser uma Web APIs, uma lib, um framework e todas as interfaces que forneçam funcionalidades em uma linguagem específica;

  • As Web APIs são um conjunto de instruções e padrões de programação para acesso a um aplicativo de software fornecido por uma empresa de software para que outras desenvolvedoras possam utiliza-o em sua próprias aplicações, algumas destas são APIs públicas que podem ser acessadas por meio de cadastros gratuitos ou até completamente aberta, outras são APIs privadas que são de uso restrito/interno da empresa criadora.

  • Dentre as arquiteturas das APIs, temos as APIs REST: A arquitetura REST – ou Representational State Transfer (Transferência de Estado Representacional), que é amplamente utilizada dentro do desenvolvimento de APIs pois possui um modelo mais simples de requisição que segue determinadas práticas e diretrizes na sua criação, neste curso iremos estudar as APIs REST.

  • Exemplos de APIs públicas:

    1. Dog API
    2. ViaCEP API
    3. ReqRes API
    4. Studios Ghibli API
    5. Yu-gi-oh! API
  • Toda API possui uma documentação que nos fornece tudo que precisamos saber para utilizá-la;

3.6. JSON

  • JSON – JavaScript Object Notation (Notação de Objeto JavaScript) é um formato baseado em texto padrão para representar dados estruturados com base na sintaxe do objeto JavaScript; (MDN)

  • Mesmo que se assemelhe à sintaxe literal do objeto JavaScript, ele pode ser usado independentemente do JavaScript, e muitos ambientes de programação possuem a capacidade de ler (analisar) e gerar JSON; (MDN)

  • O JSON é transmitido por uma rede como string e é uma formatação muito leve, o que permite ser utilizado em uma variedade enorme de aplicações.

  • O JavaScript possui o Objeto global JSON que possui métodos para converter para objeto quando queremos acessar os dados e para string quando queremos enviá-lo por rede;

JSON.parse() // analisa uma string JSON, construindo um objeto iteravel JavaScript descrito pela string.
JSON.stringify() // converte um objeto iteravel javascript para uma String JSON. 
  • Um Json pode ser armazenado em seu próprio arquivo. (MDN) (ex.: arquivo.json)

3.6.1. Estrutura JSON

{
  "squadName": "Super hero squad",
  "homeTown": "Metro City",
  "formed": 2016,
  "secretBase": "Super tower",
  "active": true,
  "members": [
    {
      "name": "Molecule Man",
      "age": 29,
      "secretIdentity": "Dan Jukes",
      "powers": ["Radiation resistance", "Turning tiny", "Radiation blast"]
    },
    {
      "name": "Madame Uppercut",
      "age": 39,
      "secretIdentity": "Jane Wilson",
      "powers": [
        "Million tonne punch",
        "Damage resistance",
        "Superhuman reflexes"
      ]
    },
    {
      "name": "Eternal Flame",
      "age": 1000000,
      "secretIdentity": "Unknown",
      "powers": [
        "Immortality",
        "Heat Immunity",
        "Inferno",
        "Teleportation",
        "Interdimensional travel"
      ]
    }
  ]
}

(fonte: MDN)

3.6.2. Acessando JSON

console.log(superHeroes.homeTown);
console.log(superHeroes["active"]);
console.log(superHeroes["members"][1]["powers"][2]);

3.6.3. Matrizes como JSON

[
  {
    "name": "Molecule Man",
    "age": 29,
    "secretIdentity": "Dan Jukes",
    "powers": ["Radiation resistance", "Turning tiny", "Radiation blast"]
  },
  {
    "name": "Madame Uppercut",
    "age": 39,
    "secretIdentity": "Jane Wilson",
    "powers": [
      "Million tonne punch",
      "Damage resistance",
      "Superhuman reflexes"
    ]
  }
]

3.6.4. Acessando JSON (matrizes)

console.log(heroes[0]["powers"][0]);

3.6.5. Importante:

JSON contém apenas propriedades, sem métodos;

JSON só aceita aspas duplas;

JSON não aceita chaves/propriedades sem aspas como objetos JS, toda string precisa usar aspas;


3.7. fetch()

  • fetch() é um método moderno e amplamente utilizado nas aplicações JavaScript atualmente que permite acesso e manipulação de requisições HTTP, este método é fornecido pela API Fetch. O fetch()retorna uma Promise.

  • Estrutura do fetch():

  fetch(url, options)
  • url é geralmente uma string que se refere ao recurso que desejamos buscar, no caso do método GET somente este argumento é necessário;
  • options é um argumento opcional, um objeto que contém qualquer configurações customizadas que desejamos adicionar às requisições, sendo os principais:
    1. method uma string que define o método da requisição;
    2. headers um objeto com informações de cabeçalho;
    3. body um objeto com informações do corpo da requisição;
  • Uma requisição GET utilizando fetch(), sem informações adicionais:

async function getData() {
  try {
    const response = await fetch("https://api.exemplo.com")
    const data = await response.json()
    console.log(data)
  }
  catch(erro) {
    console.log("HTTP-Error: " + erro);
  }
}
getData()
  • Uma requisição GET utilizando fetch(), adicionando um objeto de configurações:

async function getData() {
  try {
    const response = await fetch("https://api.exemplo.com", {
      method: 'GET', //opcional
      headers: {
      'Content-Type': 'image/jpeg',
      'Authorization': '7746y27361749f029-1'
      }
    })
    const data = await response.json()
    console.log(data)
  }
  catch(erro) {
    console.log("HTTP-Error: " + erro);
  }
}
getData()

Exercícios de Fixação:

Exercício dos Doguinhos para praticar GET

Exercício das cartas yu-gi-oh para praticar GET

Exercício da hackear() API para praticar GET, PUT, PATCH e DELETE

  • Vamos utilizar todo conhecimento adquirido até aqui para praticar todos os principais métodos HTTP em requisições feitas à hackear() API, uma API privada que teremos acesso na aula;

Desafio Ghibli

  • Utilize o fetch() para realizar uma requisição ao endpoint https://ghibliapi.herokuapp.com/films da Studios Ghibli API e popule a página que também será criados por vocês (HTML e CSS) com os dados do json que é a lista com os 22 filmes da Ghibli, você pode utilizar apenas parte dos filmes, para isso sugiro utilizar o método .slice();

GitHub

View Github