Cómo Crear una App de Fútbol con la API Gratuita del Barcelona 2026

Construyendo una App de Fútbol desde Cero

La Barça API te ofrece todo lo que necesitas para construir una aplicación de fútbol gratis en 2026. En esta guía construiremos una app sencilla con tres secciones: plantilla actual, próximo partido y clasificación de La Liga — usando solo JavaScript vanilla y la API gratuita.

Paso 1: Obtener la Plantilla

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('');
}

Paso 2: Mostrar el Próximo Partido

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} días para el partido</p>
    </div>
  `;
}

Paso 3: Renderizar la Clasificación

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><tbody>${rows}</tbody></table>`;
}

Cargando en Paralelo

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

¿Cuánto Cuesta?

Nada. La Barça API es completamente gratuita para proyectos personales y demos. Sin clave de API, sin registro.

Explora Primero

Usa el terminal interactivo para explorar los datos antes de escribir código. Luego consulta la documentación completa para la referencia de todos los endpoints.