• 

  Página de inicio.

• 

  Lista de playas ordenadas.

CostaCompás

Inspiración 🤔

La idea para este proyecto surge de la propuesta realizada por Gradiant en la presentación del Hackathon. Pensamos que la propuesta era muy interesante, y además el proyecto daba pie a utilizar diversas tecnologías con las que no estábamos familiarizados y que serían un reto con el que aprenderíamos mucho.

Objetivo de la aplicación 🏖️

La funcionalidad básica de la aplicación es recomendar a qué playa ir en función de la actividad que se quiera realizar y de la predicción meteorológica. Se tienen en cuenta parámetros como la temperatura, el viento y la cobertura del cielo, así como la ubicación del usuario y la actividad que quiera realizar. Basándose en valores intuitivos para las actividades (por ejemplo, para hacer Kite Surf será importante que haya un viento considerable) se muestra un ranking de las mejores playas a las que ir.

¿Qué usamos para construirlo?🏗️

Utilizamos React para el diseño de las páginas. Utilizamos Vite para mostrar estas páginas de manera rápida y así agilizar el desarrollo. En el backend, construimos un servidor muy simple utilizando Flask, que realiza las peticiones a la API de MeteoGalicia.

Desafíos a los que nos enfrentamos 🗻

Durante la realización del proyecto nos encontramos con multitud de problemas que tuvimos que gestionar. Uno de los problemas principales fue darnos cuenta de que no podíamos construir toda la aplicación como una aplicación web ejecutada en el cliente. Este problema se mostró en dos ámbitos:

• Si ejecutábamos toda la aplicación en el cliente, tendríamos que realizar peticiones a la API desde el cliente, lo que implicaría que el cliente recibiese nuestra clave de la API. Es un fallo grave en la arquitectura.
• Incluso si realizamos las peticiones a la API desde el cliente, no éramos capaces de recibir los datos por problemas con CORS.

Otro gran desafío fue adaptarse a las nuevas tecnologías que utilizamos. Tres de los cuatro integrantes del equipo solo estábamos parcialmente familiarizados con el desarrollo web, y tuvimos que aprender rápidamente sobre React, Flask y otros aspectos como el uso de APIs.

Un reto al que también nos enfrentamos fue al de tratar de hacer nuestro programa lo más respetuoso con el medio ambiente posible, de acuerdo con el reto planteado por Zara Tech OSO. Tuvimos que pensar ideas para tratar de mejorar la eficiencia energética de la aplicación.

Un último problema recurrente fue la cantidad de errores difíciles de diagnosticar con los que nos encontramos. Tuvimos que buscar maneras creativas de tratar de descubrir qué parte de nuestro programa estaba causando un error. Por ejemplo, estuvimos un par de horas dando vueltas a código hasta que nos dimos cuenta de que los único que nos faltaba era llamar a la función .json(). Otro problema raro y que nos dio bastantes quebraderos de cabeza fue un caso específico en una de las respuestas de la API de Meteogalicia, que solo sucede cuando las peticiones se hacen de 23:00 a 00:00. Naturalmente, a esas horas el problema nos pilló por sorpresa, ya que hasta ese momento todo funcionaba correctamente.

Logros de los que estamos orgullosos 🤩

• Es nuestro primer Hackathon, por tanto el simple hecho de haber participado, trabajado en equipo y entregado algo "funcional" nos hace mucha ilusión.
• Conseguimos aprender y desenvolvernos en tecnologías nuevas, que seguro que nos ayudarán mucho en nuestro futuro profesional y en otros Hackathons.
• En aspectos más específicos, conseguimos salvar algunas de las restricciones de la API de MeteoGalicia (principalmente, que era algo lenta) con un sistema de caching de consultas rudimentario pero efectivo y paralelización de las consultas.
• Conseguimos solucionar de forma relativamente rápida un problema que consideramos profundo, como es tener que replantearnos la arquitectura de la aplicación.
• Conseguimos mejorar la eficiencia energética del programa mediante tres mecanismos: el caching de consultas, que evita el número de consultas superfluas a la API de MeteoGalicia; la reducción del número de consultas realizadas, realizando consultas soloamente sobre las playas más cercanas; y edge computing, realizando muchos de los cálculos en el cliente para evitar acumular todo el procesamiento en el servidor, reduciendo el uso energético de los servidores y la asimetría en el uso de energía entre el cliente y el servidor.
• Conseguimos mostrar unos mapas que nos costaron mucho trabajo pero nos parecen geniales 🗺️.

¿Qué hemos aprendido? 🧭

Consideramos que hemos aprendido muchísimas cosas, sobre todo teniendo en cuenta el tiempo tan breve que hemos trabajado. Entre ellas:

• Colaboración en el proyecto usando Live Share de VSCode
• Uso de Vite para desarrollo web rápido.
• Uso de React.
• Creación de un servidor básico para exponer una API con Flask.
• Uso de APIs públicas: consultas, uso de su documentación...
• Cómo desarrollar un sistema de caching de consultas.
• Algoritmos básicos para calcular y ponderar preferencias.

Built With

• bootstrap
• flask
• google-maps
• javascript
• meteogalica-meteosix
• python
• react
• vite