WDD 231 | S02 – Atividade de Aprendizagem: Fetch API

S02 – Atividade de Aprendizagem: Fetch API

Visão Geral

Muitas vezes, um site ou uma aplicação precisa obter informações de outro site ou serviço, como dados meteorológicos, as notícias mais recentes, dados do usuário ou até mesmo uma imagem. A Fetch API em JavaScript é como o serviço de entrega particular da sua página; ela cuida de fazer as requisições por você.

Preparação

Fetch é uma API baseada em promise que permite fazer requisições de rede. A API está incorporada na maioria dos navegadores modernos. O método fetch() recebe um argumento obrigatório: o URL do recurso que você deseja buscar. Isso geralmente é chamado de endpoint (ponto final). O método também pode receber um segundo argumento opcional: um objeto que contém quaisquer configurações personalizadas que você deseja aplicar à requisição, como o método (POST, GET, DELETE), cabeçalhos, credenciais, etc.

A maioria dos serviços web exigia credenciais de autenticação para fazer requisições.

Por exemplo, o código a seguir usa o método fetch() para fazer uma requisição GET para um URL de exemplo em "https://jsonplaceholder.typicode.com/todos/".

O site jsonplaceholder.typicode.com é uma API de teste que retorna dados falsos para fins de teste. Esse e vários outros serviços gratuitos são usados para praticar como fazer requisições e trabalhar com dados.

const resposta = await fetch('https://jsonplaceholder.typicode.com/todos/');

Neste exemplo, o método fetch() retorna uma promise ao tentar chamar com o URL do recurso que queremos buscar. A palavra-chave await é usada para esperar a resolução da promise antes de continuar a execução do código. Isso é importante porque o método fetch() é assíncrono, ou seja, ele não bloqueia a execução do código enquanto aguarda a resposta. Isso significa que esse código precisará estar dentro de uma função async (assíncrona). A palavra-chave await só pode ser usada dentro de uma função async, conforme mostrado no próximo exemplo.

Você pode então usar o método .json() no objeto de resposta para analisar os dados JSON e usá-los em sua aplicação. Como o método .json() também retorna uma promise, você pode usar a palavra-chave await para esperar os dados serem analisados antes de usá-los.

async function obterDados() {
  const resposta = await fetch('https://jsonplaceholder.typicode.com/todos/'); // requisição
  const dados = await resposta.json(); // análise dos dados JSON
  console.log(dados); // teste de saída temporária de resposta de dados 
}

obterDados();

Copie e cole o código acima no console DevTools do navegador e execute-o. A resposta será um array de 200 objetos. Depois de executar o código, expanda o array no console para visualizar cada objeto individualmente.

Exemplo de Saída da Fetch API no Console — Exemplo de saída de busca no console

Esses dados agora podem ser usados em sua aplicação. Você pode percorrer o array com um loop e exibir os dados em seu HTML usando JavaScript. O método fetch() é uma ferramenta poderosa para fazer requisições de rede e trabalhar com dados em seus sites e aplicações.

Instruções da Atividade

Nesta atividade, você usará a Fetch API moderna para fazer uma requisição assíncrona de dados de profetas armazenados no formato JSON e, em seguida, criará uma página de conteúdo dinamicamente usando esses dados.

Captura de Tela do Layout do Cartão dos Profetas dos Últimos Dias

Converse com seu grupo quando tiver problemas ou dúvidas sobre atividades de aprendizagem. Você deve estar recebendo as notificações de publicações no seu grupo do Microsoft Teams.

Configuração

Na sua pasta wdd231, crie um novo arquivo chamado "profetas.html".
Adicione um arquivo chamado "profetas.css" e um arquivo chamado "profetas.js" nas pastas apropriadas.

HTML

No arquivo profetas.html, estruture a página usando informações meta e HTML válidas.
Vincule a folha de estilo à sua página.
Faça referência ao script usando defer.

Adicione o seguinte código HTML ao seu elemento <body>.

<header>
  <h1>Profetas dos Últimos Dias</h1>
</header>
<main>
  <div id="cartoes"></div>
</main>
<footer>
  [Digite Seu Nome Aqui] | Profetas dos Últimos Dias
</footer>

JavaScript

Captura de tela dos profetas para dispositivo móvel.

Abra este arquivo no seu navegador para identificar e referenciar os pares de chave-valor encontrados nos dados JSON. https://byui-cse.github.io/cse-ww-program-pt/data/profetas-dos-ultimos-dias.json.

Declare uma variável constante chamada "url" com a string de URL do recurso JSON fornecido.

const url = 'https://byui-cse.github.io/cse-ww-program-pt/data/profetas-dos-ultimos-dias.json';

Declare uma variável constante chamada "cartoes" que selecione o elemento HTML div do documento com um valor id de "cartoes".
```
const cartoes = document.querySelector('#cartoes');
```
Crie uma função async definida, chamada "obterDadosDeProfetas", para buscar dados da URL de origem JSON usando o método await fetch().
Armazene a resposta do método fetch() em uma variável constante chamada "resposta".
Converta a resposta em um objeto JSON usando o método .json e armazene os resultados em uma variável const chamada "dados".
Adicione um método de expressão console.table() para verificar a resposta de dados neste ponto na janela do console.

O método console.table() é uma ótima maneira de visualizar os dados em formato de tabela. Você também pode usar o método console.log() para visualizar os dados em um formato mais tradicional. O método console.table() é especialmente útil para visualizar grandes quantidades de dados de uma forma mais organizada.

Chame a função obterDadosDeProfetas() na linha principal do seu código .js para testar a busca e a resposta.

Avalie Seu Conhecimento – Exemplo

async function obterDadosDeProfetas() {
  const resposta = await fetch(url);
  const dados = await resposta.json();
  console.table(dados.profetas); // teste temporário de resposta de dados
}

obterDadosDeProfetas();

Se tudo estiver correto, observe que os dados retornam uma única propriedade: um array de objetos chamado "profetas".

Comente a linha do console e chame uma função chamada "exibirProfetas" e inclua o argumento "dados.profetas". Por que você envia dados.profetas em vez de apenas a variável dados? A função exibirProfetas() espera um parâmetro de array.

Avalie Seu Conhecimento – Exemplo

async function obterDadosDeProfetas(url) {
  const resposta = await fetch(url);
  const dados = await resposta.json();
  // console.table(dados.profetas);
  exibirProfetas(dados.profetas); // observe que você faz referência ao array profetas do objeto de dados JSON, não apenas ao objeto
}

obterDadosDeProfetas();

Defina uma expressão de função chamada "exibirProfetas" que lida com um único parâmetro chamado "profetas" em algum lugar no seu arquivo js. Use uma expressão arrow function para conter instruções que processarão o valor do parâmetro e criarão um cartão para cada profeta.
```
const exibirProfetas = (profetas) => {
  // o código de criação dos cartões vai aqui
}
```
Lembre-se de que as funções são suspensas e, portanto, não importa onde você as define no seu código principal, pois elas ficam disponíveis para o restante do código dentro do mesmo escopo.
Dentro da função, use um loop forEach com o parâmetro array para processar cada registro "profeta" individualmente, criando um novo cartão a cada vez.
```
const exibirProfetas = (profetas) => {
  profetas.forEach((profeta) => {
    // o código de criação dos cartões vai aqui
  });
}
```

Dentro do loop de criação dos cartões HTML, faça o seguinte:

crie um elemento de section e armazene-o em uma variável chamada "cartao", usando createElement()
crie um elemento h2 e armazene-o em uma variável chamada "nomeCompleto"
crie um elemento img e armazene-o em uma variável chamada "retrato"
preencha o elemento heading com o nome completo do profeta usando uma template string para formar o nome completo
forme o elemento de imagem definindo os seguintes atributos
1. src
2. alt
3. loading
4. width
5. altura, usando setAttribute().
Usando appendChild() no elemento de seção chamado "cartao", adicione os elementos de título e imagem, um de cada vez.

Por fim, adicione o cartão de seção à div "cartoes" que foi selecionada no início do arquivo de script.

Avalie Seu Conhecimento – Exemplo (Com espaços para preencher)

const exibirProfetas = (profetas) => {
  profetas.forEach((profeta) => {
    // Crie elementos para adicionar ao elemento div.cartoes
    let cartao = document.createElement('section');
    let nomeCompleto = document.createElement('__'); // preencha o espaço em branco
    let retrato = document.createElement('img');

    // Crie o conteúdo h2 para mostrar o nome completo do profeta
    nomeCompleto.textContent = `${profeta._____} ____________`; // preencha o espaço em branco
    // Crie o retrato da imagem definindo todos os atributos relevantes
    retrato.setAttribute('src', profeta.imageurl);
    retrato.setAttribute('alt', `Retrato de ${profeta.____} ______________`); // preencha o espaço em branco
    retrato.setAttribute('loading', 'lazy');
    retrato.setAttribute('width', '340');
    retrato.setAttribute('height', '440');

    // Acrescente a seção(cartao) com os elementos criados
    cartao.appendChild(_______); //preencha o espaço em branco
    cartao.appendChild(retrato);

    cartoes.appendChild(cartao);
  }); // fim da arrow function e do loop forEach
}

Teste, Estilize e Compartilhe

Teste a saída e adicione as informações restantes, conforme mostrado nos exemplos de captura de tela.
Adicione estilo de página utilizando o arquivo CSS externo, tentando replicar, com suas próprias cores e fontes, o layout mostrado nas capturas de tela de exemplo.
Com CSS Grid, use o valor auto-fit para garantir que a página seja responsiva.
Exemplo de Código: CSS Grid - Colunas Automática - Sem Media Queries
Adicione a data e o local de nascimento, conforme mostrado na captura de tela no início desta atividade.
Use o Microsoft Teams para compartilhar seu progresso e qualquer dificuldade que encontrar.

Recursos Opcionais

fetch() – MDN
Promise – MDN
Respostas – MDN
Usando Fetch – MDN