/webapp12

Primary LanguageJavaScriptApache License 2.0Apache-2.0

webapp12

FASE 0

Nombre de App

Ruvik

Miembros (Grupo 12)

Nombre y Apellido Mail Github
María Flores García m.flores.2016@alumnos.urjc.es mariafg11
Karol Lisowski k.lisowski@alumnos.urjc.es KarolLisowski
Sebastian Fila st.fila.2016@alumnos.urjc.es Sebas104
Eduardo Luna Sánchez e.luna.2016@alumnos.urjc.es EduLuna
Wu Li Lu w.lil@alumnos.urjc.es alilu8

Herramientas de gestión de equipo

TRELLO

  • Para organizar las tareas y asignarlas, hemos utilizado la herramienta trello: Trello grupo 12.

Requisitos

Aplicación de anuncio de casas, locales, pisos. Para alquiler, venta etc..

  • Entidades:

    • Anuncio: Un anuncio es la propiedad que se va a exponer en la página. Cada anuncio tendrá , sus imagenes, caracteristica como número de habitaciones , metros cuadrados..
    • Comentarios: Son los comentarios que pongan los usuarios a los anuncios.
    • Blog: Un blog con novedades y recomendaciones para alquilar,comprar y vender.
    • Usuarios.

  • Usuarios.

    • Usuario Anónimo: Podrá ver y buscar los anuncios.
    • Usuario Registrado: Podrá publicar sus propios anuncios, editarlos.Tendrá una sección con sus anuncios favoritos y recomendaciones personalizadas.También podrá comentar en los anuncios.
    • Usuario Administrador: Podrá eliminar todos anuncios y comentarios. Crear publicaciones en el blog.

  • Gráficos:

    • Se genera un gráfico con las ventas generales de la aplicación, se pueden filtrar por distintos campos.

  • Tecnología complementaria:

    • Enviar un email cuando el usuario registra la cuenta.

  • Algoritmo o consulta avanzada:

    • Un algoritmo que crea recomendaciones con el historial de búsqueda, y se ordenan por valoración.

FASE 1

Capturas

Sign in: Es la página de Login, el usuario podrá iniciar la sesión con su cuenta.

Login

Sign Up: En esta página, el usuario sin cuenta podrá registrarse

SignUp

Índice: Es la página principal de los usuarios registrados

Index

Índice modo visitante: Es la página principal de los usuarios sin registrado, tiene menos funciones que los usuarios registrados

Index-visitor

Resultado de búsqueda: Son resultados de la búsqueda

Properties List

Mis anuncios: Los usuarios registrados pueden ver sus anuncios y modificarlos

My Ads

Subir un nuevo anuncio: Los usuarios registrados pueden subir anuncios

My Ads

Opiniones: Los usuarios registrados podrá ver las opiniones de los distintos usuarios sobre un anuncio

Opinions

Opiniones modo visitante: Los usuarios sin registrar no podrá ver las opiniones. Opinions-visitor

Blog: Sólo los usuarios registrados podrá ver las novedades.

Blog

Gráfica: Muestra número de ventas de distintos meses.

Graph

Diagrama de Navegación

Diagrama de Navegacion

FASE 2

Navegación

Subida de anuncios: Nuevo formulario de subida de anuncio.

Anuncio

Home: Nuevo Home y filtros para las búsqueda.

NewHome

Admin: Html para admins.

Admin

Login: Nuevo login.

Login

Gráfico: Nuevo gráfico actualizado.

grafico

Diagrama de navegación: nuevo diagrama de navegación.

Diagrama de Navegacion

Instrucciones de desarrollo

Repositorio de Código

Código fuente.

Herramienta de desarrollo

  • IntelliJ
  • Spring Initializr
  • MySQL Server 8.0
  • MySQL WorkBench 8.0

Dependencias

  • MSQL Server 8.0
  • Spring framework
  • Springboot starter security
  • Mustache
  • Springboot starter mail

Gestionar el proyecto Spring con IntelliJ

  1. Abrir IntelliJ y seleccionar Create New Proyect.
  2. Elegir Spring Initializr (Project SDK 1.8 por defecto) y dar a next.
  3. Configurar el proyecto (el nombre del proyecto, tipo del proyecto (Maven), lenguaje del proyecto (Java), etc.) y dar a next.
  4. Elegir la versión del Spring Boot y seleccionar las dependencias necesarias, next.
  5. Elegir la ruta del proyecto y finish.
  6. Añadir dependencias necesarias en pom.xml y configuración en application.properties.
  7. Para compilar se da al botón Build Project (Ctrl+F9) y para ejecutar Run 'Application'(Ctrl+F10).

Conectar y crear esquema en MySQL

  1. Descargar e instalar MySQL Server y MySQL WorkBench
  2. Abrir MySQL WorkBench
  3. Añadir una conexión con el usuario y la contraseña puesto en application.properties.
    • Introducir en el comando y ejecutar: create database daw_webapp12; para crear un nuevo base de datos llamado daw_webapp12.
    • Introducir en el comando y ejecutar: drop database daw_webapp12; cuando añadimos nuevas entidades, hay que eliminar el base de datos anterior para luego crear una nueva con entidades completas.
  5. Hacer consultas con SQL.

Diagrama con las entidades de la base de datos

diagrama1

Diagrama de clases y templates

diagrama2

Participación de miembros

Eduardo Luna Sánchez:

  • Tareas realizadas en la fase:

    • Implementación del correo como tecnología complementaria.
    • Creación de entidades.
    • Cambio en el formulario de subida del anuncio.
    • Realizar funcionalidades de anuncio.
    • Realizar diagrama de las entidades de la base de datos.
    • Realizar diagrama de clases y template.
    • Cambios en diversos htmls.

  • Listado de los 5 commits más significativos:

    • New complementary technology 1954f33
    • Update html 52b568e
    • Update property-upload f9e0011
    • New class diagram and template diagram 78e4cde
    • Update entities 19f014d

  • Listado de los 5 ficheros que mas se haya participado:

    • UserController.java
    • UserService.java
    • property-upload.html
    • Advertisement.java
    • Comment.java

Wu Li Lu:

  • Tareas realizadas en la fase:

    • Creación del proyecto Spring.
    • Creación de BBDD.
    • Creación de entidades.
    • Creación de páginas de error.
    • Implementar Spring Security.
    • Realizar funcionalidades de anuncio.
    • Realizar subida de imágenes.
    • Implementación del correo como tecnología complementaria.

  • Listado de los 5 commits más significativos:

    • Mustache configuration 556efb4
    • Add Spring Security 77fb39b
    • Update property-upload 8815174
    • bug fixed 524db0d
    • Update multiple image upload eec2db3

  • Listado de los 5 ficheros que mas se haya participado:

    • MainController.java
    • SpringSecurityConfig.java
    • property-upload.html
    • Advertisement.java
    • LoginController.java

María Flores García:

FASE 3

Docker:

Instruciones de ejecución:

-Ejecutar el script create_image.ps1, crea una nueva versión del jar y la mueve al sitio donde se especifica en la imagen.

-Si usas visual studio code, puedes hacer click derecho en el docker-compose.yml, compose up

-Por linea de comando: docker-compose -f "docker-compose.yml" up -d --build

Preparación del entorno de desarrollo:

  • Descargar docker para windows, siguiendo los pasos que se indican.puedes ejecutar este comando : "docker --version" para comprobar que todo se ha instalado correctamente.Despues sigues los pasos que se especifican en la parte instrucciones de ejecución.

Diagrama de clases y templates actualizado con PI REST

  • diagrama1

API:

Participación de miembros

María Flores García:

Wu Li Lu:

Karol Lisowski:

FASE 4

Preparación del entorno de desarrollo:

  • 1.Instalar node.js .
  • 2.Descargar el proyecto y ejecutar el comando npm install.
  • 3.Para compilar el proyecto angular se incluye un script dentro de este que realiza el comando ng build y mueve los ficheros para poder utilizarla conjuntamente con spring.
  • 4.Correr el proyecto e ir a https://localhost:8443/new .

También esta disponible con docker donde lo que hay que hacer es ejecitar el script create_image y despues docker compose up, al igual que en la fase anterior.

Vídeo demo youtube

Enlace al vídeo

Diagrama de clases y templates actualizado con angular

  • diagrama4

Participación de miembros

María Flores García:

Wu Li Lu: