On17-TodasEmTech-AulaExtra-Revisao

Esta é a Aula Extra de Revisão da turma online: Todas em Tech on17 - Front-end, nesta aula do dia 16/07/2022 teremos os seguintes conteúdos:

• Métodos de array
• APIs
  • Protocolo HTTP
  • Request/Response
  • API
  • JSON
  • fetch()

Apresentação

Lilit Bandeira, sou uma travesti paraibana residente em São Paulo, trabalho como Software Engineer no Nubank, ex-aluna e professora {reprograma} e professora também no minas programam;

• E-mail: devlilitbandeira@gmail.com
• LinkedIn
• GitHub

Acordos

• Manter atenção nas explicações e codar nos momentos definidos;
• Enviar dúvidas no chat para as monitoras;
• 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;

Plano de aula - Revisão

1. Métodos de Array (by popular demand)

  const numeros = [3, 2, 4, 3, 5, 1, 3, 4, 2];

filter()

const filtrarPor = numeros.filter((element) => element == 3);
console.log(filtrarPor); // retorno [3, 3, 3]

map()

const executarTodos = numeros.map((element) => (element = 4));
console.log(executarTodos); // retorn  [4, 4, 4, 4, 4, 4, 4, 4, 4]

reduce() -> O método reduce() uma callback que será executada para cada elemento da array, resultando num único valor de retorno, esta callback pode receber alguns parâmetros, sendo os mais comuns o acumulador e o valorAtual

const ReduzirPara = numeros.reduce(
  (acumulador, valorAtual) => acumulador + valorAtual
);
console.log(ReduzirPara); // retorno 27

2. API's

2.1 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

---

2.2 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

---

2.3 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. Poke API

• Toda API possui uma documentação que nos fornecem tudo que precisamos saber para utilizá-la;

---

2.4 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;

• Um objeto JSON pode ser armazenado em seu próprio arquivo. (MDN) (ex.: arquivo.json)

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;

2.5 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',
      headers: {
      'Content-Type': 'image/jpeg'
      },
      cache: 'default'
    })
    const data = await response.json()
    console.log(data)
  }
  catch(erro) {
    console.log("HTTP-Error: " + erro);
  }
}
getData()

---