Proyecto: Tienda Web

Introducción

En este proyecto desarrollarás la aplicación web de una tienda en línea. La tienda estará especializada en un sector comercial concreto de tu elección, como por ejemplo ropa, electrónica, libros, instrumentos musicales, coches, etc.

La aplicación permitirá a los usuarios, como mínimo, navegar el catálogo de productos, ver los detalles de cada producto, añadir productos al carro de la compra, finalizar la compra de los productos en el carro y consultar el historial de compras realizadas. Para no complicar el proyecto en exceso, no se implementará la funcionalidad de pago, asumiendo que el pago se realiza fuera de la aplicación.

La aplicación permitirá que los usuarios creen una cuenta, inicien sesión y cierren sesión. Cualquier usuario podrá navegar el catálogo de productos, pero solo los usuarios autenticados podrán añadir productos al carro de la compra y finalizar la compra.

El proyecto se dividirá en funcionalidad obligatoria, que toda entrega debe implementar, funcionalidad adicional y funcionalidad avanzada. Tienes libertad para decidir qué funcionalidad adicional y avanzada deseas implementar en tu proyecto.

Condiciones generales

Las siguientes condiciones aplican al proyecto:

El proyecto debe ser desarrollado en parejas. Otras configuraciones de grupo solo serán permitidas bajo circunstancias excepcionales, y siempre con la aprobación previa de los profesores. La composición de cada pareja debe ser comunicada a los profesores con antelación, en los plazos y medios que se establezcan.
El proyecto debe ser desarrollado con el lenguaje Java y el framework Spring MVC, usando Spring Data JPA para acceder a la base de datos y Thymeleaf para generar las vistas HTML.
Las entregas deben funcionar en los ordenadores de los laboratorios del Depto. de Ingeniería Telemática (físicos o virtuales) con las bases de datos proporcionadas. Puedes trabajar en tus propios ordenadores si lo prefieres, pero debes comprobar regularmente que tu código funcione correctamente en los ordenadores del laboratorio.
La base de datos que configures en el código de tu entrega debe contener suficientes datos en el momento en que realices la entrega para que los profesores puedan probar tu aplicación adecuadamente.
Compartir código entre diferentes grupos está estrictamente prohibido. Será considerado y denunciado como plagio conforme a la normativa en vigor.
Todos los miembros de un grupo deben participar activa y equitativamente en el desarrollo del proyecto. Los grupos en que esto no suceda pueden ser divididos por los profesores antes de la fecha de entrega, incluso con poca antelación a la misma. Las calificaciones de algunos miembros de un grupo podrían diferir de las de los demás si los profesores tienen evidencias de que su participación no ha sido suficiente.
El uso de herramientas de inteligencia artificial generativa está permitido, siempre que no incluyas grandes fragmentos de código generados por una inteligencia artificial en tu entrega. Todos los estudiantes deben adjuntar a su entrega una declaración acerca del uso de inteligencia artificial generativa según las instrucciones en la sección Más detalles sobre el uso de herramientas de inteligencia artificial generativa.

Funcionalidad obligatoria

Cualquier funcionalidad que no se mencione expresamente en esta sección no es obligatoria. La funcionalidad no obligatoria que implementes será evaluada como funcionalidad adicional o funcionalidad avanzada.

Todas las entregas deben implementar la siguiente funcionalidad:

Cuentas de usuario: los usuarios pueden iniciar y cerrar sesión. Los usuarios pueden crear nuevas cuentas rellenando un formulario con sus datos.
Navegar el catálogo de productos y ver detalles de un producto: los usuarios podrán navegar el catálogo de productos. Para cada producto, podrán ver su precio y demás información detallada. El tipo de información que se proporcione acerca de cada producto dependerá del tipo de productos que ofrezca tu tienda. Los productos se clasificarán y podrán ser navegados por categorías. Por ejemplo, si se trata de una tienda de artículos electrónicos, las categorías podrían consistir en ordenadores portátiles, teléfonos móviles, tabletas, televisores, accesorios informáticos, etc.
Buscar productos por palabras clave: los usuarios dispondrán de un buscador de productos por palabras clave. El buscador devolverá una lista de productos que contengan la(s) palabra(s) clave en su nombre o descripción.
Añadir productos al carro de la compra: los usuarios autenticados podrán añadir una o más unidades de uno o más productos a su carro de la compra. El carro de la compra se guardará en la base de datos, de tal forma que sea accesible al usuario en sesiones futuras y en diferentes dispositivos.
Ver y editar el carro de la compra: los usuarios autenticados podrán ver su carro de la compra, el importe producto a producto y el importe total del carro de la compra. Además, podrán vaciar el carro de la compra completo en una sola acción o eliminar solo ciertos productos, así como editar el número de unidades de cada producto.
Finalizar la compra: los usuarios autenticados podrán finalizar la compra almacenada en su carro de la compra. Como parte del proceso, proporcionarán un nombre de destinatario y una dirección de envío. La compra se guardará en la base de datos. Una vez confirmada la compra, el carro de la compra se vaciará.
Consultar el historial de compras: los usuarios autenticados podrán consultar el historial de compras realizadas. Para cada compra, se mostrará la fecha de la compra, el importe total de la compra y la lista de productos comprados.

Modelo de datos

Tu proyecto debe dar soporte al siguiente modelo de datos para la funcionalidad obligatoria. Puedes desviarte de este modelo de datos si tienes razones justificadas para hacerlo. Por ejemplo, puedes enriquecer este modelo de datos debido a las necesidades de cualquier funcionalidad adicional que implementes (añadir nuevas entidades, añadir nuevas propiedades a algunas entidades, etc.), o si crees que un esquema diferente es mejor en el contexto de tu diseño del proyecto.

Las principales entidades a almacenar en la base de datos son:

Usuarios: se identifica a los usuarios por su dirección de correo electrónico, que será única en la aplicación. Cada usuario se autentica mediante dicha dirección de correo y una contraseña, que debe ser almacenada en la base de datos de forma segura, cifrada y con valor de salt (por ejemplo, usando bcrypt como en las prácticas). Se deben guardar también, al menos, el nombre y apellidos del usuario.
Productos: para cada producto se guardarán un nombre y una descripción. Además, habrá otros campos con información específica, que dependerán del tipo de productos que ofrezca tu tienda. Por ejemplo, si se trata de una tienda de libros, se podrían guardar el autor, la editorial, el número de páginas, el ISBN, etc.
Categorías de productos: los productos estarán organizados en categorías. Las categorías disponibles en la tienda serán también entidades a almacenar en la base de datos.
Precios: para cada producto se guardará su precio. Los precios pueden variar con el tiempo, por lo que se guardará también la fecha y hora de inicio de validez del precio. Los precios pasados deben ser conservados en la base de datos. En cada momento está en vigor el precio más reciente de un producto de entre aquellos precios cuya fecha de entrada en vigor no esté en el futuro. Dada una compra realizada en el pasado, se puede determinar el precio de cada producto en el momento de la compra consultando el precio con fecha de inicio de validez más reciente pero anterior a la fecha de la compra.
Carro de la compra: el carro de la compra de cada usuario estará compuesto por diversos productos, donde cada producto estará asociado a un número de unidades. Necesitarás una entidad adicional para representar un producto con número de unidades ligado a un carro de la compra.
Compras: para cada compra formalizada por un usuario se almacenarán la fecha y hora de confirmación del mismo, el nombre y apellidos del destinatario, la dirección de entrega, el importe total de la compra y los productos comprados junto con el número de unidades de cada uno. Necesitarás una entidad adicional para representar un producto con número de unidades ligado a una compra.

Vistas

Tu aplicación debe proporcionar al menos las siguientes vistas:

Vista principal (abierta también a usuarios no autenticados): la composición de esta vista es libre, con la restricción de que debe dar acceso a las funcionalidades de la tienda. Por ejemplo, se pueden presentar productos destacados de la tienda, la lista de categorías de productos, el formulario de búsqueda de productos, campañas actuales, etc.
Vista de producto (abierta también a usuarios no autenticados): se presenta la información detallada de un producto, incluyendo su precio actual y, al menos, una imagen del mismo (véase Imágenes de productos). Si el usuario está autenticado, se mostrará también un botón para añadir una unidad del producto al carro de la compra. Se mostrará la categoría a la que pertenece el producto, como enlace a la vista de dicha categoría.
Vista de categoría (abierta también a usuarios no autenticados): se presenta un listado con todos los productos de una categoría. Cada producto enlazará con la vista de dicho producto.
Vista de carro de la compra (abierta solo a usuarios autenticados): se presenta el contenido del carro de la compra. Se permitirá al usuario vaciar el carro de la compra, eliminar productos individuales del carro de la compra y editar el número de unidades de cada producto. Cada producto enlaza con la vista de producto correspondiente. Se muestran el importe de cada producto en el carro, según el precio actual en vigor (que podría no coincidir con el precio en el instante en que se añadió al carro), y el importe total del carro de la compra.
Vista de confirmación de compra (abierta solo a usuarios autenticados): se presenta la información necesaria acerca de la compra a realizar (productos, número de unidades, precios, etc.) y se solicitan los datos necesarios para la entrega (nombre y apellidos del destinatario, dirección de entrega). Por defecto se usa como nombre del destinatario el nombre registrado en la cuenta del usuario, pero el usuario puede cambiarlo por otro nombre.
Vista de historial de compras (abierta solo a usuarios autenticados): se presenta un listado con todas las compras realizadas por el usuario indicando, para cada compra, fecha y hora de confirmación e importe total. Cada entrada debe enlazar con la vista de compra correspondiente.
Vista de compra pasada (abierta solo a usuarios autenticados): se presenta la información detallada de una compra pasada realizada por el usuario, incluyendo fecha y hora de confirmación, importe, destinatario y dirección de envío y el listado de productos con su precio y número de unidades. Cada producto enlaza con la vista de producto correspondiente.

Puedes tomar la lista de vistas anterior como una sugerencia. Eres libre de diseñar tu aplicación con vistas diferentes siempre y cuando proporciones la misma funcionalidad. También puedes cambiar estas vistas para acomodar funcionalidad adicional.

Imágenes de productos

Cada producto debe tener al menos una imagen. Aunque no es como lo haría una aplicación real, en este proyecto, para no aumentar demasiado la complejidad, las imágenes de los productos podrán ser guardadas como ficheros estáticos en el directorio de ficheros estáticos de la aplicación. Se podría, por ejemplo, nombrar las imágenes con el identificador del producto, de tal forma que sea inmediato construir su URL relativa a partir de dicho identificador.

Por ejemplo, si el identificador de un producto es 42, se podría guardar su imagen como public/images/product-42.png.

Para decidir el tipo de datos de la imagen, puedes asumir un tipo de datos único para todas las imágenes (por ejemplo, PNG), o añadir una columna en la tabla de productos para especificar el tipo de datos de la imagen de cada producto. Este tipo de datos se usaría para componer la parte de la extensión (por ejemplo, .png) de la URL de la imagen.

No obstante, puedes optar por una solución diferente si lo consideras más adecuado. Por ejemplo, podrías guardar las imágenes en la base de datos.

Funcionalidad adicional

El resto de la funcionalidad a desarrollar podrá ser elegida libremente por cada grupo, para obtener hasta 1,5 puntos adicionales conforme a los criterios de evaluación.

Una o dos funciones adicionales, dependiendo de su complejidad, podrían aportar la nota máxima de este apartado. Puedes consultar con los profesores en cualquier momento para saber a qué nota aspiras según lo que pretendas implementar.

Funcionalidad avanzada

Para obtener el punto de funcionalidad avanzada previsto en los criterios de evaluación debes hacer uso de otras tecnologías que no se hayan visto en clase o se hayan visto con menor profundidad.

Se proponen, a modo de referencia, algunas posibilidades a continuación, pero puedes implementar cualquier otra que pactes previamente con los profesores:

Usar funcionalidad del ecosistema de Spring que no se haya visto en clase.
Mejorar la apariencia, facilidad de uso o fluidez de la aplicación, así como introducir nueva funcionalidad mediante un uso más intensivo de JavaScript. Se valorará especialmente que lo combines con el envío de peticiones asíncronas al servidor, intercambiando información con el mismo en formato JSON.
Usar las nuevas APIs de JavaScript, disponibles dentro del marco de HTML5 o proporcionadas por terceros, para integrar funcionalidad útil en el contexto de tu aplicación web.
Desarrollar de un aspecto visual y experiencia de uso con apariencia profesional y moderna. Se valorará como funcionalidad avanzada este aspecto de tu aplicación únicamente si, por la calidad de su apariencia visual y su facilidad de uso, está a la altura de aplicaciones web profesionales actuales.
Usar funcionalidad de CSS que no se hayan visto en clase como, por ejemplo, Flexbox.
Diseñar la aplicación para que se adapte bien tanto a ordenadores de escritorio como a dispositivos móviles con diversos tamaños de pantalla (teléfonos móviles, tabletas). Puedes, opcionalmente, utilizar para ello Bootstrap o algún otro entorno similar que facilite alcanzar este objetivo. No obstante, la implementación de este aspecto debe ir más allá de simplemente utilizar dichos entornos, siendo necesario que cuides con detalle cada una de las vistas y acciones a realizar para garantizar que realmente se adapten bien a dispositivos móviles. Las herramientas para desarrolladores del navegador te permitirán comprobar cómo se vería la aplicación en dispositivos de pantalla pequeña.
Enviar confirmaciones por correo electrónico a los usuarios cuando realicen una compra, creen una cuenta, etc.
Implementar otras medidas de seguridad adicionales, distintas de las que se consideren obligatorias en este enunciado o que Spring MVC o Spring Security implementen por defecto.
Gestionar el desarrollo del proyecto mediante un sistema de gestión de versiones distribuido desde el inicio de su desarrollo como, por ejemplo, Git, y alojar el proyecto en un servicio compatible con este sistema de control de versiones como, por ejemplo, GitHub, BitBucket o GitLab. Debes asegurarte de que el proyecto sea privado, esto es, que solo los miembros del equipo puedan acceder al mismo. Los tres proveedores mencionados te permiten disponer de repositorios privados gratuitos. Para que se tenga en cuenta en la evaluación, se debe hacer un uso conforme a las buenas prácticas comúnmente aceptadas. Por ejemplo, los commits deben ser progresivos y frecuentes, no se deben mezclar en un mismo commit varios cambios que no tengan relación entre sí, se deben poner mensajes informativos en los commits, cada commit debe reflejar quién es el autor real de los cambios, se deben mantener fuera del control de versiones ficheros generados automáticamente, como por ejemplo ficheros .class y cualquier otro fichero que Gradle genere automáticamente.

Cada aspecto avanzado se evaluará en función de la complejidad de su implementación, teniendo además en cuenta la dificultad técnica, documentación disponible, etc.

También puedes implementar otros aspectos avanzados propuestos por ti, siempre que supongan profundizar en alguna de las tecnologías vistas en clase o el uso de otras tecnologías nuevas. Debes consultar previamente con los profesores para saber si tu propuesta resulta adecuada y obtener una estimación de cómo se valoraría en tu calificación. No se valorará que desarrolles nueva funcionalidad que simplemente consista en utilizar las mismas técnicas que se usan en la funcionalidad obligatoria y adicional.

Uno de los aspectos que más se valorarán con respecto a esta funcionalidad avanzada es tu capacidad para utilizar la documentación disponible y resolver los problemas de forma autónoma. Por ello, contarás con un soporte más limitado por parte de los profesores que para la funcionalidad obligatoria y adicional.

Es muy aconsejable que, al principio del proyecto o durante el desarrollo del mismo, pidas a los profesores una estimación de la puntuación que obtendrías por la implementación de cada función adicional o avanzada que te plantees realizar. Esto te permitirá conocer qué debes desarrollar para alcanzar la puntuación a la que aspires.

Criterios de evaluación

Aviso: el presente proyecto es una prueba de evaluación. El plagio y otros tipos de fraude académico relativos al mismo serán denunciados a las autoridades académicas conforme a la normativa en vigor.

En la evaluación se tendrá en cuenta la correcta implementación de la funcionalidad obligatoria, funcionalidad adicional y funcionalidad avanzada, así como diversos aspectos de calidad de su implementación:

Funcionalidad obligatoria (7,5 puntos): la máxima puntuación en este bloque se otorgará a las entregas con una implementación de toda la funcionalidad obligatoria que, además de funcionar correctamente, cumpla con todos los criterios de calidad que se detallan a continuación.
Funcionalidad adicional (1,5 puntos): puedes integrar otras funciones en tu aplicación que decidas libremente. Consulta el apartado de funcionalidad adicional para más detalles. Para que se te otorguen puntos, la funcionalidad adicional debe estar implementada correctamente y cumplir con los requisitos de calidad.
Funcionalidad avanzada (1 punto): la correcta implementación de funciones avanzadas te permitirá obtener 1 punto más. Si los profesores consideran especialmente meritoria tu implementación de una función avanzada, esta podría compensar parcialmente la puntuación perdida por algunos errores en la implementación de la funcionalidad obligatoria, así como puntuar igualmente en el apartado de funcionalidad adicional.

Los criterios de calidad que se espera que cumpla tu proyecto son:

Que cada función implementada funcione correctamente, es decir, se comporte como se requiere.
Que las vistas de la aplicación (su interfaz de usuario) sean claras y fáciles de usar. Que la apariencia visual sea razonablemente buena.
Que el código fuente esté correctamente organizado y sea claro de leer y entender. Debe seguir los principios explicados en los laboratorios de Spring MVC en cuanto a organización del código. Si bien puedes dejar comentarios en partes especialmente complejas del código, no es necesario que haya comentarios exhaustivos de todo el código.
Que el diseño del esquema de la base de datos sea adecuado, incluyendo la división de los datos en entidades (tablas), el tipo de datos de cada atributo (columna) y la declaración de relaciones uno a muchos, muchos a muchos, etc. entre clases (tablas).
Que el uso de HTML y CSS sea correcto. Los documentos HTML deben incluir el contenido de la página, mientras que las propiedades de estilo deben ser declaradas mediante CSS. Salvo en casos justificados, debería haber una única hoja de estilos CSS compartida por todas las vistas de tu aplicación. Se deben utilizar los elementos de HTML apropiados para cada caso (por ejemplo, en un formulario cada control debe ser del tipo más adecuado para el dato a recibir).
Que la aplicación maneje correctamente situaciones de error potenciales, mostrando a los usuarios mensajes de error informativos cuando sea apropiado. No se considera apropiado que la aplicación muestre trazas de excepción o mensajes de error del servidor para situaciones previsibles (por ejemplo, que el usuario no rellene un control obligatorio en un formulario).
Que los controladores comprueben todos los datos que reciban de los usuarios, incluso si dichos datos están ya siendo controlados en el lado del cliente. No comprobar los datos en el lado del servidor abre la puerta a múltiples vulnerabilidades potenciales.
Que haya controles de acceso adecuados. Por ejemplo, solo el usuario que haya hecho una compra debería ser capaz de ver los detalles de dicha compra.

Más detalles sobre el uso de herramientas de inteligencia artificial generativa

El uso de inteligencia artificial generativa está permitido en el desarrollo del proyecto, siempre que no incluyas grandes fragmentos de código generados por una inteligencia artificial en tu entrega.

Todos los estudiantes deben adjuntar a su entrega una declaración acerca del uso de inteligencia artificial generativa que incluya, al menos, la siguiente información:

Si se ha utilizado o no inteligencia artificial generativa en el desarrollo del proyecto.
En caso afirmativo, el nombre de las herramientas de inteligencia artificial generativa utilizadas, cómo se han utilizado dichas herramientas, para qué propósitos y en qué partes del código.

Algunos ejemplos de usos recomendados de inteligencia artificial generativa son:

Puedes preguntarle sobre fragmentos de código que no entiendas.
Puedes pedirle que busque errores en fragmentos de código que hayas escrito.
Puedes usarlo como asistente de auto-completado en tu entorno de desarrollo, para obtener rápidamente sugerencias de fragmentos de código a medida que escribes.
Puedes pedirle que produzca unas pocas líneas de código para resolver un problema específico.

Se recomienda que siempre revises cualquier fragmento de código generado por una inteligencia artificial antes de incluirlo en tu proyecto, y que te asegures de entender cómo funciona cualquier fragmento de código que incluyas. Además, no confíes ciegamente en los fragmentos de código que la herramienta de inteligencia artificial generativa produzca. Pueden contener errores o hacer algo diferente de lo que necesitas.

Por último, recuerda que tendrás que programar en el examen final, en papel, modelos de datos, consultas a la base de datos, funciones de controlador, plantillas, etc. similares a los del proyecto. Independientemente de cómo uses la inteligencia artificial generativa, asegúrate de ser capaz de programarlos sin ayuda.