Cómo crear un Dashboard de Tenis con JavaScript usando Tennis API

Cómo crear un Dashboard ATP con JavaScript utilizando Tennis API

Hola bienvenido a un nuevo post, hace unos días estaba buscando una API relacionada con deportes para practicar el consumo de servicios REST desde JavaScript y encontré Tennis API. Me llamó la atención porque ofrece información actualizada sobre rankings ATP y perfiles de jugadores profesionales, lo que la convierte en una buena opción para desarrollar dashboards y aplicaciones deportivas.

En este artículo te mostraré cómo utilicé esta API para construir un pequeño dashboard web que consulta el ranking ATP en tiempo real y permite visualizar información detallada de los jugadores.

¿Qué es Tennis API?

Tennis API es un servicio disponible a través de RapidAPI que proporciona acceso a información relacionada con el tenis profesional. Entre los datos que podemos consultar se encuentran rankings ATP y WTA, perfiles de jugadores, torneos, resultados y estadísticas históricas.

Para comenzar es necesario crear una cuenta en RapidAPI y suscribirse al plan disponible para obtener una API Key. Esta llave será utilizada para autenticar nuestras solicitudes.

Explorando la documentación

Una de las primeras cosas que revisé fue la documentación de la API. Aquí podemos encontrar los distintos endpoints disponibles, los parámetros requeridos y ejemplos de respuesta.

Para este proyecto utilicé principalmente dos endpoints:

• Ranking ATP de jugadores individuales.
• Perfil detallado de un jugador.

Estos endpoints fueron suficientes para construir una aplicación bastante interesante utilizando únicamente HTML, CSS y JavaScript.

Datos de tenis proporcionados por tennis-api.com

Construyendo el dashboard ATP

El objetivo era crear una página que mostrara el ranking ATP actualizado de forma sencilla y visualmente atractiva. Para ello desarrollé un dashboard que consulta la API mediante JavaScript utilizando la función fetch().

La aplicación muestra información como:

• Top 3 de jugadores ATP.
• Total de jugadores obtenidos desde la API.
• Buscador dinámico.
• Tabla con los principales jugadores del ranking.

Los datos se cargan en tiempo real y se actualizan automáticamente cada vez que se consulta la API.

Te comparto la liga para que puedas probarlo Dashboard Tenis ranking jugadores y una demo

Liga para descargar Pagina ATP Tennis Dashboard - Código Fuente Completo

Consultando el perfil de un jugador

Una característica que quise agregar fue la posibilidad de consultar información detallada de cada jugador. Para lograrlo, cada nombre dentro del ranking funciona como un enlace que realiza una nueva consulta a la API.

Al seleccionar un jugador es posible visualizar información como:

• Ranking ATP actual.
• País de origen.
• Altura.
• Peso.
• Entrenador.
• Fecha de nacimiento.
• Año en que se convirtió en profesional.
• Lugar de nacimiento.

Esto convierte el dashboard en una pequeña aplicación interactiva donde podemos explorar información de los tenistas más importantes del circuito profesional.

Tecnologías utilizadas

• HTML.
• CSS.
• JavaScript.
• Fetch API.
• RapidAPI.
• Tennis API.

Consultando el ranking ATP mediante JavaScript

Una vez obtenida la API Key desde RapidAPI, podemos realizar nuestra primera consulta al endpoint encargado de devolver el ranking ATP individual.

La solicitud se realiza utilizando la función fetch() de JavaScript, enviando los encabezados necesarios para autenticar la petición:

https://tennis-api-atp-wta-itf.p.rapidapi.com/tennis/v2/atp/ranking/singles

Este endpoint devuelve un objeto JSON que contiene información sobre los jugadores del ranking ATP, incluyendo posición, nombre, país y puntos acumulados.

Dentro del código, la primera tarea consiste en realizar la petición HTTP y convertir la respuesta a formato JSON:

const response = await fetch(...);
const resultado = await response.json();

Posteriormente se obtiene la colección de jugadores desde la propiedad data:

const ranking = resultado.data || [];

La expresión || [] permite evitar errores en caso de que la API no devuelva información, asignando un arreglo vacío como valor predeterminado.

Para este ejemplo únicamente se muestran los primeros diez jugadores utilizando el método slice():

ranking.slice(0,10)

Cada elemento contiene una estructura similar a la siguiente:

{
  "position": 1,
  "point": 14750,
  "player": {
      "id": 47275,
      "name": "Jannik Sinner",
      "countryAcr": "ITA"
  }
}

A partir de esta información es posible acceder a los datos del jugador mediante la propiedad player.

Por ejemplo:

jugador.player.name
jugador.player.countryAcr
jugador.point

Finalmente se construye dinámicamente una lista HTML utilizando JavaScript y se inserta dentro del elemento identificado como resultado.

Cada vez que la página se carga, la aplicación consulta la API en tiempo real y genera automáticamente el contenido mostrado al usuario.

Aunque este ejemplo es bastante sencillo, representa la base sobre la cual podemos construir aplicaciones más completas como dashboards deportivos, sistemas de estadísticas o visualizadores de rankings actualizados automáticamente.

Conclusión

Tennis API me pareció una alternativa interesante para desarrollar proyectos relacionados con datos deportivos. La documentación es sencilla de seguir y la cantidad de información disponible permite crear aplicaciones bastante completas sin necesidad de implementar una gran cantidad de lógica.

Además de servir como práctica para consumir APIs REST desde JavaScript, este tipo de proyectos ayudan a comprender mejor cómo integrar servicios externos y transformar datos reales en aplicaciones web interactivas.

Si estás aprendiendo desarrollo web, te recomiendo intentar crear tu propio dashboard agregando nuevas funcionalidades como estadísticas por superficie, resultados recientes o información de torneos.