UBeach es la aplicación web para los amantes de las playas de España. Se trata del proyecto de fin de Bootcamp de Full Stack de Cristina Meño García y David Martín Blázquez. Veamos cómo se llevó a cabo.
La idea era desarrollar una aplicación fuera tu “ayudante” a la hora de descubrir las costas españolas. Para ello, se trabajaron las siguientes funcionalidades de UBeach:
Para afrontar este reto, se utilizaron como combinación de tecnologías:
Todo ello apoyado por supuesto de HTML, CSS y JavaScript.
En primer lugar, antes de empezar a desarrollar el proyecto en sí, se realizaron una serie de esquemas que ayudaron para tener clara la distribución y el flujo de la aplicación.
Una vez claro el flujo de la aplicación, se empezó con la maquetación de los componentes. De esta manera, el trabajo se organizó mejor y fue más fácil programar las funcionalidades.
Después de tener más o menos toda la parte de maquetación hecha, se comenzó a analizar la API que se usaría para ver cómo importarla a la base de datos en MySQL.
Los datos descargados de la API estaban en un formato csv, por lo que se realizó una conversión a JSON a través de una web para poder importar los datos correctamente a la base de datos propia.
En este punto, recalcar que todo este proceso sirvió para aprender aún más sobre la utilización de bases de datos, ya que, fueron varias las dificultades encontradas durante el tratamiento de los datos, aquí observamos las principales:
| Problema | Solución |
| Unidades de medida de las coordenadas | Librería geoLib |
| Manejo de la base de datos | Conversión a JSON, limpieza y tratamiento de datos |
| Buscador | Pipe -> Buscadores por separado -> Buscadores combinados con una query variable |
| Funcionalidad favoritos y pendientes | (Ayuda x paciencia) / (Mario y Juanan) |
| Maquetación responsive | Solución = (Ayuda x paciencia) / (Mario y Juanan) |
Una vez se consiguió importar todo a la base de datos, se invirtió bastante tiempo en el tratamiento y análisis de los datos para hacer una limpieza exhaustiva. Esto se debe a que, para lo que se buscaba desarrollar, muchos datos no servían y otros era necesario modificarlos para un mejor uso.
Se empezó por las querys necesarias para traer todos los datos de todas las playas en el Back, para de esta forma poder utilizarlas y mostrarlas en el Front.
Con esto se muestran los datos de cada playa en la interfaz, el front. Una vez se veían los datos que se querían enseñar, se desarrolló el código para poder marcar las playas en Google Maps. Se hizo a través de la librería AGM-MAP y a las coordenadas que habíamos convertido previamente.
Librerías utilizadas
| Front | Back |
| jQuery | Bcrypt |
| Sweet Alert 2 | geoLib |
| Bootstrap | JWT |
| AGM-MAP | Moment |
Ahora sí, ya estaba lista toda la información que se quería mostrar en el detalle de cada playa. Por lo que se pudo pasar a desarrollar las funcionalidades del buscador. Este proceso fue una parte muy importante en el desarrollo del proyecto, en la cual se decidió hacer una vista intermedia donde apareciesen todas las playas, para a partir de ahí poder buscar de manera más concreta y enlazarlo con su detalle.
Una vez hecho el listado, se pasó al desarrollo del buscador. Se valoraron diferentes opciones hasta encontrar la fórmula ganadora: el uso de dos buscadores combinados, dando la opción de buscar tanto por nombre como por Comunidad Autónoma.
Con el listado funcionando y el detalle de cada playa hecho, se preparó el registro y el login, ya que la página tendría diferentes funcionalidades según el usuario estuviese registrado o no.
Se usaron dos librerías, bcrypt para encriptar las contraseñas de los usuarios y JWT para la creación de los tokens necesarios para identificar a los usuarios.
Todo esto acompañado de una serie de querys para que el usuario registrado quedase guardado en la base de datos y para que después pudiese hacer login.
A estas alturas, solo quedaba crear la vista del perfil del usuario e implementar la funcionalidad para que pudiese guardar sus playas favoritas o poner en pendientes las playas que quisiese visitar en un futuro.
Volviendo a la base de datos, se tuvo que crear una serie de tablas intermedias para poder enlazar la tabla de las playas con la de los usuarios. En la vista del perfil, se creó un menú desde donde se podía acceder al listado de playas, a favoritos y pendientes, así como para poder cerrar sesión.
Como conclusiones finales a este proyecto Cristina y David resaltaron dos puntos:
Y para finalizar, agradecer a nuestros profesores, Juanan y Mario por su ayuda, paciencia y dedicación durante estos tres meses.
Si tú también quieres ser capaz de desarrollar proyectos como Ubeach, echa un vistazo a nuestro Full Stack Bootcamp.
Todavía no hay comentarios
Dinos que estás pensando