Dashboard de Tenis en Tiempo Real con WebSocket y JavaScript en Blogger

Imagen
  Cómo crear un  Los datos en tiempo real son uno de los casos de uso más interesantes para los desarrolladores. Mientras que muchas APIs funcionan mediante solicitudes HTTP tradicionales, algunas plataformas ofrecen conexiones WebSocket que permiten recibir actualizaciones instantáneas sin necesidad de recargar la página. En este artículo mostraremos cómo conectarnos a Tennis API mediante WebSocket y cómo construir un dashboard de partidos de tenis en vivo utilizando únicamente HTML, CSS y JavaScript dentro de Blogger. ¿Qué es un WebSocket? Un WebSocket es un protocolo de comunicación que mantiene una conexión abierta entre el navegador y el servidor. A diferencia de una API REST tradicional donde el cliente debe preguntar constantemente si existen nuevos datos, con WebSocket el servidor envía la información automáticamente cuando ocurre un cambio. Esto resulta ideal para aplicaciones como: Marcadores deportivos en vivo Sistemas de monitoreo Dashboards financieros...

👉 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)