AHORA NUESTROS CURSOS TAMBIÉN ONLINE
ONLINE
Contactar
Menu
ALUMNOS
Contactar

Proyecto destacado de Full Stack. UBeach

12 de noviembre de 2020 13:12:54 CET

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.

inicio_proyecto_full_stack_ubeach

¿En qué consiste UBeach?

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:

  • Buscador de playas, que accede a una base de datos interna.
  • Opción de “Playas favoritas” y “Pendientes de visitar”.
  • Geolocalización a través de Google Maps.
  • Ficha detallada de las playas según accesos, características y servicios.

¿Qué tecnologías se utilizaron?

Para afrontar este reto, se utilizaron como combinación de tecnologías:

Todo ello apoyado por supuesto de HTML, CSS y JavaScript. 

Fases y tiempos de desarrollo

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. 

La base de datos

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.  

El cambio más importante, así como la mayor complicación en cuanto al desarrollo de la base de datos, fueron las unidades de medida de las coordenadas, ya que venían en grados, minutos y segundos, pero, se querían convertir en longitud y latitud.  
 
Para ello, se usó la librería externa GeoLib, y se creó un script que automatizaba el cambio de las coordenadas de todas las  playas. A pesar de que estaba automatizado, hubo que hacer muchos cambios manualmente ya que no todas las coordenadas estaban igual escritas. 
 

Proceso de programación de las funcionalidades

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.  

vista_playa_ubeach

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. 

El buscador

buscador_full_stack_ubeach

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

Login y registro

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. 

Playas favoritas y pendientes

perfil_ubeach_full_stack

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. 

Conclusiones

Como conclusiones finales a este proyecto Cristina y David resaltaron dos  puntos: 

  • La organización que se marcaron a la hora de realizar el proyecto. Todos los esquemas, así como la decisión de empezar por la parte visual, sirvió para verlo todo mucho más claro a la hora de desarrollar el código de las funcionalidades. 
  • La realización del proyecto ayudó a afianzar y mejorar  todo el conocimiento aprendido durante el Bootcamp, así como para entender cómo es el desarrollo y la implementación de un  proyecto real, aprendiendo a conectar la parte del Front-End con el Back-End. 

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

También te puede interesar

Estos post sobre NEOLAND

Suscríbete a nuestro email

Todavía no hay comentarios

Dinos que estás pensando