Aprenda como consumir API com JavaScript, consumindo API de futebol e descubra os finalistas de todas as edições da Copa Libertadores.
Caso prefira esse conteúdo no formato de vídeo-aula, assista ao vídeo abaixo ou acesse o nosso canal do YouTube!
Na aula de hoje, vou te mostrar como consumir API com JavaScript, consumindo uma API de Futebol utilizando JavaScript para descobrir os finalistas da Copa Libertadores.
Vamos utilizar uma API de futebol no JavaScript para obter informações sobre as finais da Copa Libertadores. Nesse processo, vamos utilizar uma página simples para exibir esses resultados.
O usuário terá a capacidade de alterar o ano e verificar os jogos, times, resultados e os campeões da Copa Libertadores de cada ano.
Caso você não esteja familiarizado com o conceito de API, ou tenha dúvidas a respeito, confira essa aula aqui, onde explico tudo sobre APIs e WebAPIs. Com esse conhecimento, você terá uma base sólida para dar continuidade a esse projeto
O ponto de partida para descobrir os finalistas da Copa Libertadores é encontrar a API que vamos consumir com JavaScript.
Para isso, escolhi o site Rapid API, uma plataforma que serve como hub facilitador para buscar, usar e gerenciar APIs. Dentro do Rapid API, você terá acesso a milhares de APIs diferentes, abrangendo uma variedade de temas e funcionalidades.
Cada API na plataforma possui uma página específica com documentação detalhada. É por meio dessa documentação que você aprenderá tudo o que precisa para implementar e utilizar a API, incluindo suas funcionalidades, recursos e informações disponíveis.
Como estamos em busca de uma API para fornecer informações sobre a Copa Libertadores, vamos buscar por uma API de futebol, a API-FOOTBALL.
Ao entrar na página da API, é possível realizar pesquisas para encontrar a informação desejada, ser redirecionado para a documentação e testar como a API responderá conforme nossa requisição.
Por exemplo, podemos pesquisar por venue, que se refere aos locais onde ocorrem os jogos, ou seja, aos estádios de futebol.
É importante observar que a busca deve ser feita em inglês, já que esta API está nesse idioma.
A primeira seção da página da API oferece as informações que a API-FOOTBALL pode nos oferecer.
A segunda seção é onde inserimos os parâmetros da requisição que desejamos testar. Para o nosso exemplo, passei o ID 204 e cliquei em Test Endpoint.
A última seção exibe o resultado da requisição. No caso do estádio de ID 204, obtivemos as informações relacionadas ao Maracanã.
Em resumo, utilizando a página da API, podemos realizar uma requisição HTTP e obter informações específicas, como no exemplo do Maracanã.
As páginas das APIs geralmente oferecem opções para testar e visualizar como os endpoints funcionam, que parâmetros são necessários e qual será a resposta da requisição.
Nosso objetivo com essa aula é consumir API de futebol com JavaScript e retornar, com base no ano selecionado, os finalistas da Libertadores e o placar do jogo.
Para atingir esse objetivo, faremos uso de uma página bastante simples que já está pronta para que possamos realizar essa busca e exibir os resultados.
A estrutura da página já está montada, mas a parte referente ao JavaScript nós desenvolveremos juntos para que você possa praticar o processo de consumo dessa API.
Já preparei a base do nosso código JavaScript, e é a partir dele que vamos desenvolver a inteligência da nossa página.
const infosPartidaEl = document.getElementById('match-info');
const escudoTime1 = infosPartidaEl.querySelector('img:first-of-type');
const escudoTime2 = infosPartidaEl.querySelector('img:last-of-type');
const golsTime1 = infosPartidaEl.querySelector('h2:first-of-type');
const golsTime2 = infosPartidaEl.querySelector('h2: last-of-type');Esse trecho de código obtém referências de alguns elementos presentes na nossa página, especificamente do “retângulo verde” onde teremos os escudos dos times e os placares.
A primeira linha, const infosPartidaEl = document.getElementById(‘match-info’);, utiliza a função getElementById para obter uma referência ao elemento HTML com o ID ‘match-info’. Esse elemento atua como o container principal que guarda as informações sobre a partida, como os escudos dos times e os placares.
As linhas seguintes selecionam os elementos específicos deste container através do método querySelector.
Assim, escudoTime1 e escudoTime2 referenciam a primeira e a última imagem dentro de infosPartidaEl, respectivamente. Da mesma forma, golsTime1 e golsTime2 referenciam o primeiro e o último elemento <h2> dentro do container.
Essas seleções utilizam seletores CSS como :first-of-type e :last-of-type para garantir a escolha correta dos elementos.
Com o desenvolvimento do código, essas variáveis serão atualizadas de acordo com as informações obtidas da API.
A seguir, temos mais duas linhas de código:
const baseUrl = 'https://api-football-v1.p.rapidapi.com/v3';
let infosPartida = {};A primeira linha, com a constante baseUrl, armazena a URL que utilizaremos para fazer requisições à API-FOOTBALL.
Em seguida, criamos a variável infosPartida e a inicializamos como um objeto vazio {}. É nessa variável que armazenaremos as informações relacionadas à partida obtidas através da API de futebol.
A partir dessa base, vamos iniciar o desenvolvimento do nosso código. Queremos que, ao selecionarmos um ano na página, as informações sobre a final da Libertadores sejam carregadas dentro do objeto infosPartida.
Vamos começar criando uma função assíncrona responsável por buscar as informações sobre a partida que queremos.
async function buscarInfo() {
const ano = document.getElementById('year').value;
}Inicialmente, dentro da função, definimos a constante ano que recebe o valor do elemento HTML com o ID “year“. Em outras palavras, estamos obtendo o valor presente no menu de seleção de ano da página e armazenando nessa constante.
Feito isso, podemos preparar a nossa requisição.
Para preparar a nossa requisição, primeiro, precisamos pensar nos parâmetros necessários para que ela seja concluída conforme desejamos. Nesse sentido, é necessário retornar à página da API.
Na documentação da API, encontramos o endpoint fixtures, termo em inglês que se refere a uma agenda de jogos ou um jogo programado.
Dentro desse endpoint, há alguns parâmetros que podemos passar para nossa requisição obter a resposta desejada.
Os parâmetros que utilizaremos são:
Com os parâmetros definidos, podemos retornar ao nosso código e, dentro da função buscarInfo, criar uma nova constante chamada params, passando os parâmetros que iremos utilizar e seus respectivos valores.
async function buscarInfo() {
const ano = document.getElementById('year').value;
const params = {
league: 13,
season: ano,
last: 1,
};
}Observação: Os parâmetros precisam ser declarados da mesma forma como constam na API.
Em seguida, vamos declarar o nosso endpoint, ou seja, com qual endereço iremos nos comunicar com a API. Nesse caso, estamos acessando o endpoint chamado /fixtures.
async function buscarInfo() {
const ano = document.getElementById('year').value;
const params = {
league: 13,
season: ano,
last: 1,
};
const endpoint = '/fixtures';
}Com o endpoint definido, precisamos definir as options, que são informações sobre a requisição para que ela possa ser feita corretamente.
Para as options, passaremos o método (method) da requisição, que será do tipo get, além do cabeçalho (headers), uma exigência do RapidAPI. Nesse cabeçalho, vamos passar o endereço da API que estamos utilizando e a chave de acesso dela.
async function buscarInfo() {
const ano = document.getElementById('year').value;
const params = {
league: 13,
season: ano,
last: 1,
};
const endpoint = '/fixtures';
const options = {
method: 'get',
headers: {
'X-RapidAPI-Key': apiKey,
'X-RapidAPI-Host': host,
},
};
}Importante: Substitua apiKey pela sua chave de API e host pelo endereço da API que você estiver utilizando; neste caso, seria api-football-v1.p.rapidapi.com.
Agora, temos tudo que é necessário para fazer a nossa requisição. Para isso, vamos utilizar a função fetch. Essa função precisa receber dois argumentos: o URL completo para a requisição e as opções da requisição.
A URL completa de uma requisição é composta pela URL base da API, pelo endpoint e pelos parâmetros de consulta. Esses parâmetros são geralmente definidos no formato nome_do_parâmetro=parâmetro.
Para facilitar a criação dessa URL, vamos criar um objeto URLSearchParams chamado searchParams a partir do nosso objeto params.
Através do URLSearchParams, podemos pegar automaticamente os parâmetros definidos em nosso código e formatá-los corretamente como uma “query string”, que consiste na parte da URL formada pelos parâmetros.
Dessa forma, o primeiro argumento da função fetch referente à URL completa da requisição para a API será baseUrl + endpoint + ‘?’ + searchParams, onde estamos concatenando todas as partes necessárias para a criação dela.
O segundo argumento é apenas a options que havíamos definido anteriormente.
Por fim, precisamos utilizar a palavra-chave await, pois estamos lidando com uma requisição que leva um tempo para ser concluída.
O await é utilizado para pausar a execução da função buscarInfo até que a requisição HTTP, feita pela função fetch, seja concluída. Somente após a conclusão da requisição é que a execução da função continua.
É por isso que definimos a função buscarInfo como assíncrona, usando a palavra-chave async. Isso permite o uso de await dentro da função e indica que a função pode lidar de maneira eficiente com operações assíncronas, como a requisição HTTP, sem bloquear a execução do restante do código.
async function buscarInfo() {
const ano = document.getElementById('year').value;
const params = {
league: 13,
season: ano,
last: 1,
};
const searchParams = new URLSearchParams(params);
const endpoint = '/fixtures';
const options = {
method: 'get',
headers: {
'X-RapidAPI-Key': apiKey,
'X-RapidAPI-Host': host,
},
};
const response = await fetch(
baseUrl + endpoint + '?' + searchParams, options
);
}Agora que concluímos o processo de requisição, é necessário extrair a resposta da requisição e convertê-la em um objeto JSON. Essa transformação é essencial para que possamos manipular os dados da resposta de forma eficiente em nosso código.
Faremos isso usando mais uma função assíncrona, mas agora com o método response.json().
async function buscarInfo() {
const ano = document.getElementById('year').value;
const params = {
league: 13,
season: ano,
last: 1,
};
const searchParams = new URLSearchParams(params);
const endpoint = '/fixtures';
const options = {
method: 'get',
headers: {
'X-RapidAPI-Key': apiKey,
'X-RapidAPI-Host': host,
},
};
const response = await fetch(
baseUrl + endpoint + '?' + searchParams, options
);
const responseData = await response.json();
}Isso garantirá que a nossa resposta tenha os dados do corpo da requisição em formato JSON, ou seja, interpretados como um objeto JavaScript.
Além disso, verificando na documentação da API, podemos ver um exemplo da resposta que obtemos a partir da requisição.
A partir disso, podemos ver que nossa resposta é uma lista de um único elemento e dentro desse elemento temos diversas informações sobre a partida. Com isso, temos a estrutura desse objeto de resposta e podemos adaptá-la para o nosso código.
async function buscarInfo() {
const ano = document.getElementById('year').value;
const params = {
league: 13,
season: ano,
last: 1,
};
const searchParams = new URLSearchParams(params);
const endpoint = '/fixtures';
const options = {
method: 'get',
headers: {
'X-RapidAPI-Key': apiKey,
'X-RapidAPI-Host': host,
},
};
const response = await fetch(
baseUrl + endpoint + '?' + searchParams, options
);
const responseData = await response.json();
infosPartida = responseData.response[0];
}Dessa forma, estamos pegando os dados contidos dentro do primeiro item da lista response que obtivemos como resposta da nossa requisição e atribuindo ao objeto infosPartida que havíamos inicializado vazio no início do código.
Agora que já obtivemos as informações das partidas, precisamos criar duas novas funções: uma responsável por revelar os times na nossa página e a outra para revelar o resultado das partidas.
function revelarTimes() {
escudoTime1.src = infosPartida.teams.home.logo;
escudoTime2.src = infosPartida.teams.away.logo;
}
function revelarResultado() {
golsTime1.innerText = infosPartida.goals.home;
golsTime2.innerText = infosPartida.goals.away;
}Primeiro, temos a função revelarTimes(). Essa função é responsável por atualizar as imagens dos escudos dos times (escudoTime1 e escudoTime2, referenciados no início do código) pelas URLs das imagens obtidas através do infosPartida.
O escudoTime1 recebe a URL referente à logo do time da casa (home) e o escudoTime2 ao time visitante (away).
A mesma lógica é aplicada à função revelarResultado(), porém, essa atualiza os elementos de texto (golsTime1 e golsTime2) com os números de gols dos times da casa e visitante obtidos dos dados da partida (infosPartida).
Com essas funções criadas, agora precisamos executar a função buscarInfo para obter as informações das partidas.
buscarInfo();E, após chamar a função buscarInfo(), criaremos 3 EventListeners.
O primeiro irá chamar a função revelarTimes quando o botão associado ao ID show-teams (botão Revelar Finalistas da página) for clicado.
O segundo chamará a função revelarResultado quando o botão referente ao ID show-score (botão Revelar Resultado) for clicado.
E, por fim, o terceiro EventListener irá chamar novamente a função buscarInfo quando o elemento associado ao ID year for mudado, ou seja, quando alterarmos a data no menu de seleção de anos.
document.getElementById('show-teams').addEventListener('click', revelarTimes);
document.getElementById('show-score').addEventListener('click', revelarResultado);
document.getElementById('year').addEventListener('change', buscarInfo);Com isso, podemos testar o nosso código. Se buscarmos pelo ano de 2023, teremos que o Fluminense venceu o Boca Juniors por 2 a 1.
No entanto, se alterarmos a data, você notará que os resultados só serão alterados quando os botões forem pressionados novamente, o que não é muito interessante. Isso ocorre porque você irá clicar primeiro em um dos botões e ficará com times e resultados não condizentes.
Por exemplo, se após verificar a final da Libertadores de 2023, trocarmos o ano para 2022 e clicarmos no botão Revelar Finalistas, teremos o seguinte resultado:
Perceba que o placar está incorreto porque ainda não atualizamos o resultado.
Para ajustarmos nosso código e resolvermos esse problema, vamos, ao final da função buscarInfo, retornar os valores referentes à fonte das imagens do escudoTime1 e do escudoTime2 para o padrão de interrogação. Faremos o mesmo para os resultados.
async function buscarInfo() {
const ano = document.getElementById('year').value;
const params = {
league: 13,
season: ano,
last: 1,
};
const searchParams = new URLSearchParams(params);
const endpoint = '/fixtures';
const options = {
method: 'get',
headers: {
'X-RapidAPI-Key': apiKey,
'X-RapidAPI-Host': host,
},
};
const response = await fetch(
baseUrl + endpoint + '?' + searchParams, options
);
const responseData = await response.json();
infosPartida = responseData.response[0];
escudoTime1.src = urlInterrogacao;
escudoTime2.src = urlInterrogacao;
golsTime1.innerText = '?';
golsTime2.innerText = '?';
}Repare que no meu código está como urlInterrogacao, você precisaria substituir esse valor pelo endereço referente à imagem que você deseja que apareça por padrão. Com os gols, só precisamos retornar para o texto ‘?’ mesmo.
Feito isso, agora podemos visualizar os resultados normalmente e, quando trocarmos o ano na página, os escudos dos times e os valores dos resultados serão resetados.
Nosso código final ficou da seguinte forma:
const infosPartidaEl = document.getElementById('match-info');
const escudoTime1 = infosPartidaEl.querySelector('img:first-of-type');
const escudoTime2 = infosPartidaEl.querySelector('img:last-of-type');
const golsTime1 = infosPartidaEl.querySelector('h2:first-of-type');
const golsTime2 = infosPartidaEl.querySelector('h2: last-of-type');
const baseUrl = 'https://api-football-v1.p.rapidapi.com/v3';
let infosPartida = {};
async function buscarInfo() {
const ano = document.getElementById('year').value;
const params = {
league: 13,
season: ano,
last: 1,
};
const searchParams = new URLSearchParams(params);
const endpoint = '/fixtures';
const options = {
method: 'get',
headers: {
'X-RapidAPI-Key': apiKey,
'X-RapidAPI-Host': host,
},
};
const response = await fetch(
baseUrl + endpoint + '?' + searchParams, options
);
const responseData = await response.json();
infosPartida = responseData.response[0];
escudoTime1.src = urlInterrogacao;
escudoTime2.src = urlInterrogacao;
golsTime1.innerText = '?';
golsTime2.innerText = '?';
}
function revelarTimes() {
escudoTime1.src = infosPartida.teams.home.logo;
escudoTime2.src = infosPartida.teams.away.logo;
}
function revelarResultado() {
golsTime1.innerText = infosPartida.goals.home;
golsTime2.innerText = infosPartida.goals.away;
}
buscarInfo();
document.getElementById('show-teams').addEventListener('click', revelarTimes);
document.getElementById('show-score').addEventListener('click', revelarResultado);
document.getElementById('year').addEventListener('change', buscarInfo);Na aula de hoje, você aprendeu como consumir API com JavaScript, explorando uma API de Futebol para descobrir os finalistas da Copa Libertadores em todos os tempos, juntamente com os resultados das partidas.
Esse pequeno projeto proporcionou uma visão abrangente do processo, desde a busca da API até a modificação da lógica da página com base nas informações obtidas por meio da resposta da API.
O que você pôde observar e absorver ao longo desta aula é um excelente exemplo de comunicação entre o front-end e o back-end de um site. Compreender como preparar e realizar requisições, além de manipular as respostas obtidas, é fundamental para desenvolver páginas web dinâmicas e interativas.
Para acessar publicações de JavaScript, clique aqui!
Expert em conteúdos da Hashtag Treinamentos. Auxilia na criação de conteúdos de variados temas voltados para aqueles que acompanham nossos canais.
Quer sair do zero no Python e virar uma referência na sua empresa? Inscreva-se agora mesmo no Python Impressionador