Como Criar um App de Futebol com a API Gratuita do Barcelona 2026

Construindo um App de Futebol do Zero

A Barça API oferece tudo que você precisa para construir um aplicativo de futebol gratuitamente em 2026. Neste guia vamos construir um app simples com três seções: elenco atual, próximo jogo e classificação da La Liga — usando apenas JavaScript vanilla e a API gratuita.

O Que Vamos Construir

• Grid do elenco — todos os jogadores com badges de posição
• Card de próxima partida — times, local e contagem regressiva
• Tabela de classificação — tabela atual da La Liga

Passo 1: Buscar o Elenco

async function loadSquad() {
  const res = await fetch('https://api.fc-barcelona.app/api/squad');
  const { data } = await res.json();

  const container = document.getElementById('squad');
  container.innerHTML = data.map(player => `
    <div class="player-card">
      <span>${player.position}</span>
      <strong>#${player.number}</strong>
      <p>${player.name}</p>
      <small>${player.nationality}</small>
    </div>
  `).join('');
}

Passo 2: Mostrar a Próxima Partida

async function loadNextMatch() {
  const res = await fetch('https://api.fc-barcelona.app/api/next-match');
  const { data } = await res.json();

  if (!data) return;

  const matchDate = new Date(data.matchDate);
  const days = Math.floor((matchDate - new Date()) / 86400000);

  document.getElementById('next-match').innerHTML = `
    <div>
      <h2>${data.homeTeam} vs ${data.awayTeam}</h2>
      <p>${data.competition} — ${data.venue}</p>
      <p>${days} dias para o jogo</p>
    </div>
  `;
}

Passo 3: Renderizar a Classificação

async function loadStandings() {
  const res = await fetch('https://api.fc-barcelona.app/api/standings');
  const { data } = await res.json();

  const rows = data.map(team => `
    <tr>
      <td>${team.position}</td>
      <td>${team.team}</td>
      <td>${team.played}</td>
      <td>${team.points}</td>
    </tr>
  `).join('');

  document.getElementById('standings').innerHTML = `
    <table>
      <thead><tr><th>#</th><th>Time</th><th>J</th><th>Pts</th></tr></thead>
      <tbody>${rows}</tbody>
    </table>
  `;
}

Carregando em Paralelo

Para melhor performance, busque os três recursos simultaneamente:

await Promise.all([loadSquad(), loadNextMatch(), loadStandings()]);

Quanto Custa?

Nada. A Barça API é completamente gratuita para projetos pessoais e demos. Sem chave de API, sem cadastro.

Explore Primeiro

Use o terminal interativo para explorar os dados antes de escrever código. Depois confira a documentação completa para a referência de todos os endpoints.