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

Imagen
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 cue...

Proyecto JavaScript: crear una app que te diga si conviene lavar ropa según el clima

Cómo usar una API del clima con JavaScript (ejemplo práctico)

Las APIs meteorológicas son una excelente forma de aprender a consumir servicios REST utilizando JavaScript. En este proyecto creamos una pequeña herramienta que analiza el clima actual de tu ubicación y te da recomendaciones rápidas.

La aplicación consulta una API pública del clima y con base en la temperatura y la lluvia genera sugerencias como:

  • Si conviene lavar ropa
  • Si conviene lavar el coche
  • Si es buen día para caminar
  • Si es buen día para hacer ejercicio al aire libre

Además, la aplicación utiliza la geolocalización del navegador para detectar tu ubicación automáticamente.




API utilizada

Para este ejemplo utilizamos la API meteorológica gratuita de Open-Meteo:

https://api.open-meteo.com/v1/forecast

El endpoint permite consultar el clima actual enviando la latitud y longitud.

Ejemplo de llamada a la API

fetch("https://api.open-meteo.com/v1/forecast?latitude=19.4326&longitude=-99.1332&current_weather=true")

.then(res => res.json())

.then(data => {

  console.log(data.current_weather.temperature);

});

¿Cómo funciona la aplicación?

El flujo de la aplicación es el siguiente:

  • Se solicita permiso para acceder a la ubicación del usuario
  • Se obtienen las coordenadas GPS
  • Se consulta la API del clima
  • Se aplican reglas simples para generar recomendaciones

Este tipo de proyectos es ideal para aprender:

  • Consumo de APIs con JavaScript
  • Uso de fetch()
  • Geolocalización en el navegador
  • Manipulación del DOM
Para probar la página utiliza la siguiente url


En este blog también puedes encontrar otros ejemplos de APIs como:

Todos estos ejemplos muestran cómo integrar APIs públicas en proyectos reales.

Comentarios

🚀 Mantener este blog funcionando requiere tiempo y café. ¡Puedes contribuir con uno aquí!

Entradas más populares de este blog

Guía Práctica: Ejemplo Completo de ASPX para Desarrolladores Web

👉 Cómo obtener el tipo de cambio en Excel con API de Banxico (paso a paso)

Macro en Word para automatizar documentos: genera diplomas en segundos (con código VBA)