Mientras desarrollaba un ejemplo de integración con JavaScript y WebSocket con Tennis API , descubrí que la información está distribuida en dos sitios distintos. Al principio intenté conectarme únicamente con la guía general de WebSocket y, aunque logré autenticarme correctamente, todavía no era evidente qué eventos o endpoints debía utilizar para recibir información en tiempo real. El primer recurso que recomiendo leer es la guía Tennis WebSocket API Guide . En este artículo se explica el concepto de la integración mediante WebSocket, las ventajas frente a una API REST y el uso de Socket.IO para recibir actualizaciones en tiempo real sin realizar consultas HTTP constantes. Sin embargo, durante mis pruebas descubrí que esa guía está enfocada en explicar el funcionamiento general de la tecnología y no contiene todos los detalles necesarios para comenzar a consumir los eventos disponibles. Para conocer los eventos, endpoints y métodos específicos que utiliza la plataforma es nec...

⚽ Cómo crear un Predictor de Partidos de Fútbol con JavaScript y API-Football En este tutorial aprenderás a crear un Football Match Predictor utilizando JavaScript y la API de API-Football . El proyecto consume una API REST para obtener los partidos del día, mostrar las competiciones disponibles y consultar las probabilidades de victoria de cada encuentro. El resultado es un dashboard dinámico que funciona para cientos de ligas alrededor del mundo, incluyendo el Mundial, Champions League, Premier League, LaLiga, Liga MX y muchas más. 🚀 Demo Puedes probar el dashboard aquí: 👉 Football Match Predictor Demo 📚 Documentación oficial La documentación completa de API-Football se encuentra en: 🔑 Obtener una API Key Para utilizar la API primero debes crear una cuenta gratuita y generar una API Key. Puedes hacerlo desde: https://dashboard.api-football.com/ Después únicamente reemplaza tu llave dentro del código JavaScript: const API_KEY="TU_API_...

¿Por qué utilizar WebSocket en lugar de una API REST? El caso de Tennis API Cuando trabajamos con APIs, normalmente pensamos en solicitudes HTTP tradicionales donde una aplicación consulta información cada cierto tiempo. Sin embargo, para aplicaciones que requieren datos en tiempo real, existe una alternativa mucho más eficiente: WebSocket. Mientras exploraba las capacidades de Tennis API encontré su integración mediante Socket.IO, una tecnología que permite recibir actualizaciones en tiempo real sin necesidad de realizar consultas constantes al servidor. ¿Cómo funciona una API REST tradicional? Con una API REST, la aplicación debe preguntar periódicamente si existen nuevos datos. Por ejemplo: setInterval(async () => { const response = await fetch("/live-scores"); const data = await response.json(); console.log(data); }, 5000); En este caso la aplicación realiza una consulta cada 5 segundos. El problema es que muchas veces no existe información nue...

Si estás desarrollando aplicaciones deportivas, una de las formas más sencillas de obtener datos actualizados de tenis es utilizando la API de Tennis API disponible a través de RapidAPI. En este tutorial mostraré cómo crear un dashboard interactivo del Ranking WTA utilizando HTML, CSS y JavaScript. Los datos son proporcionados por Tennis API, una plataforma especializada en estadísticas, rankings, resultados y datos en tiempo real para ATP, WTA e ITF. ¿Qué es Tennis API? tennis-api.com ofrece acceso a: Ranking ATP y WTA. Resultados en vivo. Calendario de torneos. Estadísticas de jugadores. Datos punto por punto mediante WebSocket. Cuotas deportivas en tiempo real. La API también puede consumirse desde rapidapi.com , lo que facilita las pruebas y la integración en proyectos JavaScript, Python, PHP y otros lenguajes. Resultado Final El dashboard desarrollado permite: Consultar el ranking WTA actualizado. Buscar jugadoras por nombre. Mostrar el Top 3 mundial. Consulta...

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

Cómo usar la API de Dragon Ball (Tutorial completo en JavaScript + Código descargable) Aprender a consumir APIs es una de las habilidades más demandadas en programación hoy en día. En este tutorial te voy a enseñar paso a paso cómo hacerlo usando JavaScript… pero con un ejemplo mucho más interesante que los típicos datos aburridos. 👉 Vamos a construir una mini app real usando la API de Dragon Ball . ⚡ Al final podrás descargar el proyecto completo listo para usar. 📥 Descarga el proyecto completo Si quieres ahorrar tiempo y tener todo listo, puedes descargar el proyecto completo: 👉 Descargar HTML + JavaScript listo (Proyecto completo) Ejemplo de Dragon Ball API con JavaScript (Fetch paso a paso) A continuación verás un ejemplo completo de cómo consumir la Dragon Ball API usando JavaScript y fetch. Este ejemplo es ideal si estás aprendiendo APIs REST para proyectos reales. fetch("https://dragonball-api.com/api/characters?name=goku") .the...

Cómo consultar UDIS, CETES, TIIE y tipo de cambio con la API de Banxico en JavaScript Aprende a crear un panel en JavaScript que consulta en tiempo real indicadores de Banxico como UDIS, CETES, TIIE, tipo de cambio y salario mínimo. El Banco de México publica diariamente indicadores económicos como el valor de las UDIS , la TIIE , el tipo de cambio , los CETES y el salario mínimo . Gracias a su API pública , podemos conectarnos desde JavaScript y automatizar consultas financieras en tiempo real. En esta entrada construimos un panel interactivo para consultar el dato más reciente de varias series con unas cuantas líneas de código. Requisitos Un token gratuito de Banxico (solicítalo en su portal SIE). Un archivo .html o tu editor favorito. Conexión a internet. Tip: en este ejemplo colocamos el token en la UR...

  JavaScript es un lenguaje esencial para el desarrollo web moderno. Con él, puedes crear desde páginas interactivas hasta aplicaciones que consumen APIs externas. En esta entrada, he recopilado todos los ejemplos de JavaScript que he publicado en el blog, organizados por temas, para que puedas aprender y poner en práctica tus conocimientos. Introducción a JavaScript Cómo programar en JavaScript : Una guía básica para empezar con JavaScript desde cero. Dibujos y gráficos con JavaScript Especial Navideño: Dibujar un árbol de Navidad : Uso de JavaScript y canvas para dibujar un árbol de Navidad. Graficar funciones con JavaScript y HTML : Cómo representar funciones matemáticas en una página web. Interactividad en la web JavaScript para crear un contador : Un sencillo contador interactivo con JavaScript. HTML con complementos de audio y video : Cómo agregar contenido multimedia con JavaScript y HTML. Generador de combinaciones de moda con JavaScript : Creación de combinac...

Hemos desarrollado una sencilla aplicación web con HTML, CSS y JavaScript que permite seleccionar un diseño aleatorio y generar combinaciones de colores perfectas para tu atuendo. 👗 ¿Cómo funciona? ✔ Presiona el botón "Diseño a Vestir" para ver una propuesta de atuendo. ✔ Luego, presiona "Colores a Combinar" para obtener una sugerencia de colores armoniosos. ✔ ¡Experimenta con distintas combinaciones y encuentra tu estilo único! Puedes probarlo aquí: 🔗 Combinaciones de ropa y colores L Si te interesa aprender cómo se hizo, revisa el código en la publicación y anímate a personalizarlo. ¡Déjame tu comentario con tu combinación favorita! 👇😃 Te comparto el código <html lang="es"> <head>     <meta charset="UTF-8"></meta>     <meta content="width=device-width, initial-scale=1.0" name="viewport"></meta>     <title>Combinaciones de Ropa</title>     <style>         body { ...

 Cuando trabajamos con datos o funciones matemáticas, es muy útil poder visualizarlos en una gráfica. Con JavaScript y HTML, esto es sencillo si utilizamos una biblioteca como Chart.js . A continuación, te presento un ejemplo donde graficamos la función cuadrática y = x^3 . Usaremos etiquetas en el eje X desde -10 hasta 10 y graficar los valores correspondientes para y . Aquí tienes el código que necesitas para generar la gráfica: <html lang="es"> <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <title>Graficar Funciones con JavaScript</title>     <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> </head> <body>     <h1>Graficar Funciones con JavaScript y HTML</h1>     <canvas id="miGrafica" width="400" height="200"></canvas>     <script>   ...