Dashboard de Tenis en Tiempo Real con WebSocket y JavaScript

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

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

Cómo obtener el tipo de cambio en JavaScript con la API de Banxico (Paso a paso)

Ejemplo práctico: Aprende a obtener el tipo de cambio del dólar en tiempo real usando JavaScript y la API de Banxico. Ideal para integrar datos financieros en tus aplicaciones o dashboards.


En este tutorial aprenderás cómo obtener el tipo de cambio usando JavaScript y la API de Banxico paso a paso. Si no quieres programar o prefieres una solución más rápida, al final también te dejo una opción para hacerlo directamente desde Excel.

🚀 ¿Qué vas a aprender?

  • Cómo obtener tu token de Banxico
  • Cómo consumir una API con fetch()
  • Cómo leer datos JSON
  • Cómo mostrar el tipo de cambio en tu página web

🔑 Cómo obtener tu API Key de Banxico

Para poder consumir la API necesitas generar un token gratuito desde el siguiente enlace:

👉 Obtener token de Banxico

Con este token puedes realizar hasta 40,000 consultas gratuitas por día.


📊 Identificar la serie del tipo de cambio (SF43718)

Para obtener el tipo de cambio FIX USD/MXN usamos la serie:

SF43718

Puedes consultar el catálogo completo aquí:

👉 Ver catálogo de series Banxico


💻 Código JavaScript para obtener el tipo de cambio


const url = 'https://www.banxico.org.mx/SieAPIRest/service/v1/series/SF43718/datos/oportuno?token=TU_TOKEN';

fetch(url)
  .then(response => response.json())
  .then(data => {
    const resultados = data.bmx.series;
    const divResultados = document.getElementById('resultado');

    resultados.forEach(serie => {
      const p = document.createElement('p');
      p.textContent = `${serie.nombre}: $${serie.datos[0].dato}`;
      divResultados.appendChild(p);
    });
  })
  .catch(error => {
    console.error('Error:', error);
    document.getElementById('resultado').textContent = 'Error al obtener los datos';
  });
  • Se hace una petición a la API de Banxico
  • Se obtiene el tipo de cambio en formato JSON
  • Se muestra dinámicamente en la página

💡 Alternativa sin programar:

Si no quieres implementar JavaScript o necesitas una solución más rápida en tu trabajo diario, puedes usar una plantilla de Excel que ya conecta con la API de Banxico automáticamente.

👉 Ver plantilla lista para usar

🌐 Ver ejemplo funcionando

👉 Ver demo en vivo


💡 ¿Para qué puedes usar esta API?

  • Dashboards financieros
  • Automatización en Excel
  • Aplicaciones web con datos económicos
  • Integraciones con sistemas empresariales

📚 Más ejemplos de APIs en JavaScript

👉 Ejemplo API Fórmula 1

👉 Consultar UDIS con API


🎥 Video explicación


Como llamar la API de Banxico desde Excel

🏁 Conclusión

Consumir la API de Banxico es una excelente forma de trabajar con datos reales en tus proyectos.

Si dominas este ejemplo, puedes escalar a integraciones más complejas como APIs empresariales o automatización en Excel.

TIP: prueba modificar la serie para obtener CETES o TIIE 😉

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

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