Práctica 2

Práctica 2

Esta es la documentación técnica y manual de usuario de mi práctica 2.

Índice de Contenidos

1. Documentación Técnica
2. Manual de Usuario
3. Mejoras Implementadas
4. Autor

Documentación Técnica

Descripción del Proyecto

Esta segunda versión del proyecto evoluciona la tienda online de vinilos original, transformándola de una aplicación estática a una dinámica con funcionalidades avanzadas. La nueva implementación incluye autenticación de usuarios, gestión de carrito de compras, búsqueda de productos y generación dinámica de contenido.

Novedades Principales

1. Autenticación de Usuarios

• login.html: Nueva página para inicio de sesión
• sesion.js: Maneja la lógica de autenticación y gestión de sesiones
• Permite personalizar la experiencia del usuario y habilitar funcionalidades exclusivas

2. Carrito de Compras Mejorado

• carrito.html: Página rediseñada del carrito
• carrito.js: Nueva lógica para gestión dinámica del carrito
• carritoempty.html: Página específica para carrito vacío
• Permite añadir/eliminar productos, calcular totales y gestionar pedidos

3. Búsqueda de Productos

• search.js: Implementa funcionalidad de búsqueda en tiempo real
• Filtra productos según criterios del usuario

4. Páginas Dinámicas

• tienda.json: Base de datos de productos que permite generación dinámica
• Elimina la necesidad de páginas HTML estáticas por producto
• Los productos ahora se generan desde una plantilla base poblada con datos JSON

5. Proceso de Pedido

• pedido.html y pedido.js: Nuevo flujo de compra completo
• Permite confirmación de pedido y generación de resumen

Estructura del Proyecto Actualizada

Front-end

• index.html: Página principal ahora con búsqueda y productos dinámicos
• style.css: Actualizado con nuevos estilos para las funcionalidades añadidas
• MEDIA/: Directorio que contiene recursos multimedia
• login.html: Página de autenticación
• carrito.html: Carrito de compras interactivo
• carritoempty.html: Vista para carrito vacío
• pedido.html: Finalización de compra

Back-end

• tienda.js: Servidor Node.js ampliado para manejar nuevas rutas y funcionalidades
• tienda.json: Base de datos de productos
• sesion.js: Gestión de usuarios y autenticación

Lógica de la Aplicación

• carrito.js: Gestión del carrito de compras
• search.js: Funcionalidad de búsqueda
• pedido.js: Procesamiento de pedidos

Mejoras Técnicas Implementadas

1. Generación Dinámica de Contenido:

   • Los productos ya no requieren páginas HTML individuales (Producto1.html, Producto2.html, etc.)
   • Se cargan dinámicamente desde tienda.json

2. Persistencia de Datos:

   • El carrito y las sesiones se mantienen durante la navegación
   • Uso de cookies para una experiencia más fluida

3. Manejo de Errores:

   • 404.html: Página de error mejorada
   • Validación de formularios en login y pedido

4. Optimización de Código:

   • Reutilización de componentes
   • Código más modular y mantenible

Flujo de la Aplicación

1. El usuario accede a la tienda (index.html)
2. Puede:
   • Buscar productos (search.js)
   • Iniciar sesión (login.html y sesion.js)
   • Añadir productos al carrito (carrito.js)
   • Ver/editar el carrito (carrito.html)
   • Completar un pedido (pedido.html y pedido.js)

Tecnologías Utilizadas

• Front-end:
  • HTML5
  • CSS3
• Back-end:
  • Node.js
  • Módulos nativos de Node.js (http, fs, path)

Manual de Usuario

1. Requisitos:

   • Node.js instalado en el sistema.
   • Navegador web moderno.

2. Pasos para ejecutar el proyecto:

   • Clona el repositorio o descarga los archivos del proyecto.
   • Abre una terminal en el directorio del proyecto.
   • Ejecuta el siguiente comando para iniciar el servidor:

     node tienda.js

   • Abre un navegador y visita http://localhost:8001 para acceder a la tienda.
   • Al ingresar a la tienda, los usuarios pueden:

• Explorar el catálogo completo de vinilos con imágenes detalladas y descripciones
• Iniciar sesión para poder comenzar a comprar con el usuario Root y la contraseña root
• Acceder al carrito funcional donde pueden:
  • Ver los productos añadidos con sus precios
  • Eliminar items individualmente
  • Visualizar el total acumulado
  • Proceder al checkout (simulado)
• Buscar productos mediante el buscador inteligente que filtra por:
  • Nombre del álbum
  • Artista
  • Género musical
• Ver detalles completos de cada producto al hacer clic, incluyendo:
  • Portada en alta resolución
  • Lista completa de canciones (tracklist)
  • Información del artista
  • Disponibilidad en stock
• Añadir productos al carrito directamente desde la vista previa o la página de detalle
• Gestionar su sesión mediante:
  • Inicio/cierre de sesión
  • Historial de pedidos (simulado)

Características Adicionales

• Navegación Fácil: La tienda cuenta con una interfaz intuitiva para que los usuarios puedan desplazarse fácilmente entre productos y volver a la página principal.
• Enlace a Spotify: Desde la página de cada producto, se incluye un enlace directo al perfil del artista en Spotify para escuchar su música.
• Sistema de Valoración (1-5 estrellas).
• Compatibilidad Total: La tienda es accesible desde distintos dispositivos, tanto ordenadores como móviles y tablets.

Notas

Si se intenta acceder a un recurso inexistente, el sistema mostrará una página de error indicando que el archivo solicitado no está disponible.

Mejoras Implementadas

1. Página de Error 404 Personalizada: Se ha añadido una página de error 404 personalizada para mejorar la experiencia del usuario, con un diseño amigable y enlaces de navegación que ayudan a redirigir al usuario a otras secciones de la página.

2. Listado Dinámico de Archivos: La ruta /ls ahora muestra un listado dinámico de los archivos en el directorio público, lo cual es útil para debugging y monitoreo del sistema.

3. Favicon Implementado: Se ha añadido un favicon para personalizar la pestaña del navegador, mejorando la identidad visual del sitio.

4. 9 Productos Agregados: Se han añadido 9 productos al catálogo, con imágenes, descripciones y precios para mejorar la oferta disponible a los usuarios.

5. Contraseña login: Se ha incorporado para iniciar sesión tener que introducir una contraseña.

6. Cantidad de Productos: Se puede aumentar la cantidad de un mismo producto desde la página de pedidos.

Autor

Daniel Pérez