Memoria AcuaNet
¿Qué encontrarás en esta página?
En esta memoria quiero compartir la historia de AcuaNet, tanto la parte técnica como la más personal. Ha sido un proyecto muy especial para mí y quiero contar cómo ha evolucionado. Si te queda alguna duda, ¡pregúntame por Instagram!
Historia del proyecto
Hace casi un año empecé a programar y, como cualquier persona aprendiendo algo nuevo, necesitaba practicar. Un día, preparando una salida de pesca, entré en embalses.net y pensé: “¿Y si intento mejorar esta página?” Así nació AcuaNet.
Tras unas semanas de desarrollo, lancé la primera versión en junio de 2024. Al principio nadie la usaba, pero tampoco me preocupaba mucho, ya que solo era un proyecto para practicar. Lo dejé en pausa unos meses mientras seguia aprendiendo y mejorando mis dotes en programación y a la vez trabajaba en otros proyectos.
Unos meses más tarde, con más experiencia y con la ayuda de mi amigo y sponsor de esta web Ángel de AGR Baits, decidímos darle un giro a AcuaNet. Mejoré el diseño y enfocamos la página directamente en la pesca.
Primera versión de AcuaNet - Junio 2024
Segunda versión de AcuaNet - Diciembre 2024
Este año ya ha habído una gran actualización en la que se ha mejorado la interfaz mas aún y se han añadido nuevas funcionalidades como los datos historicos, datos en tiempo real y AcuaVisor, un visor de mapas y ortofotos de los embalses.
Gracias a la difusión en Instagram y al feedback de la comunidad, la web ya tiene mas de 6000 visitas mensuales por pescadores de toda España y Portugal. Este año seguiremos mejorando la web y añadiendo nuevas funcionalidades.
Recolección y tratamiento de datos
El proceso de recolección y tratamiento de datos ha sido todo un reto. Nadie nos ha facilitado las cosas, ni el MITECO ni ningún organismo público. Este proceso está documentado en este repositorio de GitHub, donde cualquier persona puede hacer uso de los scrapers que he desarollado en este tiempo en NodeJS. (En proceso...)
En la primera versión de AcuaNet, decidí scrapear directamente la web de Embalses.net, conocida por su gran cantidad de datos hidrográficos. Programé un script que accedía a esta web y recolectaba automáticamente los datos más relevantes para la pesca. Este script se ejecutaba cada ciertos días para mantener la información actualizada.
En la segunda versión de AcuaNet, decidí cambiar por completo la forma de recolectar los datos. Vi que los usuarios me pedían históricos de cada embalse, datos en tiempo real y más información que no podía obtener fácilmente desde Embalses.net.
Datos Históricos
Investigué más a fondo y encontré una base de datos proporcionada por el MITECO, que contenía datos históricos desde 1998 hasta la actualidad y se actualizaba semanalmente con los boletines de las cuencas hidrográficas.
El problema era que esta base de datos estaba en Microsoft Access, un formato poco práctico y antiguo para transformar los datos. Tras un buen proceso de programación, conseguí convertir la base de datos a JSON y insertar todos los registros en mi base de datos PostgreSQL alojada en Supabase.
Recolección datos históricos (se ejecuta cada 3 días.)
Datos en tiempo real
Obtener datos en tiempo real fue todo un reto. Sabía de la existencia de los SAHI (Sistema Automático Hidrográfico), plataformas del Ministerio diseñadas para visualizar datos hidrográficos. Suena bien, pero había varios problemas.
Para empezar, muchos de estos visores son muy antiguos o están construidos como SPA (Single Page Application), lo que complica enormemente el scraping. Además, la estructura de cada SAHI varía, ya que no existe una plataforma centralizada, sino una distinta para cada cuenca hidrográfica.
Para solucionar esto, tuve que desarrollar varios scripts personalizado para extraer datos de cada SAHI de forma individual y configurar su ejecución automática mediante GitHub Actions cada hora. De esta manera, AcuaNet puede ofrecer información actualizada constantemente.
Recolección datos en tiempo real (esto se ejecuta cada 2 horas)
AcuaNet: La web
Ahora que ya sabes cómo recolecto los datos en AcuaNet, te quiero contar un poco sobre las tecnologías que utilizo para construir la web.
La página está hecha con Next.js 15, que es un framework de React que nos permite crear aplicaciones web completas y súper escalables. Next.js facilita que las páginas se carguen rápido teniendo en cuenta la gran cantidad de datos que manejamos.
Para los estilos, utilizo Tailwind CSS, que es una maravilla de framework que hace que diseñar sea muy rápido y flexible. Me ha permitido crear una interfaz sencilla, fácil de usar y que da gusto ver. La idea es que, cuando entres a AcuaNet, encuentres lo que necesitas rápidamente, sin perder tiempo.
La información está guardada en PostgreSQL, una base de datos bastante robusta que maneja tanto los datos históricos como los de tiempo real. Para gestionar todo esto, usamos Supabase, que nos ayuda a manejar y visualizar los datos en una plataforma muy completa y con buenos planes de precios.
El código está escrito en TypeScript, el cual nos ayuda a tener un código más limpio y seguro.
Tecnologías utilizadas:
Conclusión
Ahora que ya sabes cómo funciona AcuaNet, ¿qué te parece? ¿Te esperabas que una web como esta, donde entras y pasas un par de minutos viendo el estado de tus embalses favoritos, llevara tanto trabajo para construirla y mantenerla? Es increíble cómo un proyecto personal puede convertirse en algo tan complejo y, a la vez, útil para tanta gente.
Mis planes para el futuro son seguir escuchando el feedback de los usuarios y agregar pequeñas mejoras, especialmente en el aspecto visual de la UI. La idea es seguir puliendo detalles y hacer que la experiencia sea aún mejor.
Espero que te haya gustado esta pequeña memoria y que no te haya aburrido con tantas cosas técnicas. ¡Nos vemos por las orillas! 😊