Introducción

Allá por el año 2024, cuando aprendí algunos conceptos sobre React y su uso en el desarrollo Web, me propuse crear un proyecto que cubriera una de las necesidades que tenía cada fin de semana: poder saber cuándo y dónde ver los eventos deportivos más importantes de diferentes competiciones.

Esto viene debido a mi pasión por el fútbol y a que no hay fin de semana que no comparta con amigos para ver los partidos las ligas más importantes.

El proyecto, no solo debía ser funcional, sino que también quería que tuviera una interfaz amigable y profesional, con un diseño responsivo y estéticamente llamativo. Además, quería poder utilizar filtros para buscar los partidos por nombre de competición, nombre de equipo o incluso fecha.

Y lo más importante, quería que fuera un proyecto que pudiera ser mantenido y actualizado de manera automática. Este era el mayor reto, pues tener que mantener el listado de partidos manualmente era un trabajo tedioso y que habría dejado de hacer muy pronto.

El reto

Para poder resolver este reto, necesitaba investigar sobre la forma de obtener los datos de los partidos, categorizarlos, ordenarlos y mostrarlos de manera dinámica.

Tenía claro que la mejor estrategia para esto, dado que no existían APIs públicas que ofrecieran esta información, era crear una API propia que pudiera obtener los datos de los partidos de las ligas más importantes del mundo. Esto, sin embargo, añadía una capa de complejidad al proyecto. Iba a tener que aprender nuevas tecnologías y herramientas.

También tuve que encontrar una solución a que estos datos fueran actualizados de manera automática, ya que no podía esperar a que el usuario lo hiciera manualmente.

Para animarme, lo primero fue crear la interfaz de usuario, que iba a ser la que más tiempo me llevaría. Una vez conseguí pulir la interfaz con datos estáticos, me sentí motivado a resolver el problema de la actualización automática de los datos.

La solución

La obtención de los datos no fue cosa sencilla, pues tuve que investigar sobre técnicas de Scraping y cómo obtener los datos de varias fuentes oficiales de manera automática. Finalmente, conseguí crear un Script que pudiera recolectar los datos necesarios y volcar toda esta información en un archivo JSON. Ya había avanzado mucho y, aunque el Script todavía no se ejecutaba automáticamente, sí era funcional y sobreescribía el archivo JSON cada vez que se ejecutaba.

Posteriormente, tuve que adaptar la interfaz de usuario para que pudiera mostrar los datos de manera dinámica, consumiendo directamente el archivo JSON.

Llegado a este punto, solo me faltaba resolver el problema de la actualización automática de los datos. Fue entonces cuando, investigando, me topé con las GitHub Actions. Fue un período de mucho ensayo, error y, sobretodo, aprendizaje: creé un Script que se ejecutaba automáticamente cada vez que se realizaba un commit en el repositorio, y que ejecutaba el Script de Scraping para obtener los datos de los partidos.

Finalmente, pude programar la ejecución de esta tarea cada madrugada, de manera automática, para que los datos se actualizasen diariamente. El resultado fue tan bueno que incluso superó mis propias expectativas. Nunca me había imaginado capaz de lograr algo así, pero con insistencia y paciencia, lo conseguí.

Las semanas posteriores tuve que ir manteniendo de manera regular el Script de Scraping, ya que algunas de las fuentes cambiaban su estructura y esto requería de intervención humana para adaptar el Script a las nuevas condiciones.

También aprendí un error que me costó mucho tiempo resolver, pero que atesoraré para no repetirlo en el futuro en cualquier proyecto que emplee GitHub Actions: en mi Script indiqué que siempre se instalara la última versión disponible de Ubuntu, y un día me topé que la última versión no era compatible con algunas dependencias que empleaba en el Script. Tardé varias horas en detectar el error, pero la solución era muy sencilla: bastó con especificar la versión de Ubuntu que quería emplear en el Script.

Experiencia adquirida

Durante el desarrollo de este proyecto, adquirí experiencia en el uso de React, GitHub Actions y técnicas de Scraping. Ahora mismo, DeportesTV es un proyecto que permanece activo, que se mantiene actualizado de manera automática y que consumimos varias veces por semana tanto yo como algunos amigos. No está pensado para ser un proyecto monetizado, ya que el propósito siempre fue adquirir experiencia, aprender nuevas tecnologías y, sobretodo, hacer algo que nunca antes había hecho.

Finalmente, os comparto la dirección del sitio web para que podáis ver el resultado final de este proyecto: DeportesTV.