Desarrollo de Aplicaciones Web: Casos Prácticos

Proyecto 1: Aplicación Web para Gestión de Flotas de Vehículos

Una empresa de alquiler de vehículos necesita una aplicación web para la gestión de clientes y el control del mantenimiento y desgaste de su flota. Adicionalmente, se requiere una funcionalidad para visualizar la localización de cada vehículo cuando este lleve más de 5 minutos parado.

Vistas del Frontend y Servicios Asociados

Según estas necesidades, la aplicación deberá tener las siguientes vistas en el frontend, que se apoyarán en los correspondientes servicios del backend:

1. Vista para Inserción de Datos de Cliente: Permite registrar nuevos clientes.
2. Vista para Obtener el Listado de Vehículos: Muestra la flota disponible.
3. Vista para la Modificación de la Información de Mantenimiento del Vehículo: Permite actualizar los datos de mantenimiento de un vehículo específico.
4. Vista para Mostrar la Última Ubicación de un Vehículo: Visualiza la posición actual de un vehículo.

Diseño del Formulario HTML para Mantenimiento de Vehículos (Vista 3)

A continuación, se presenta el diseño del formulario HTML que debería incluirse en la página que permite modificar la información de mantenimiento de un vehículo (vista 3), con los datos solicitados:

• Kilómetros recorridos.
• Última fecha de revisión de mantenimiento.
• Última fecha y kilometraje del cambio de neumáticos, con la marca y modelo de los mismos.
• Un campo de texto amplio para otros comentarios y observaciones.

Se emplean los tipos de campos de entrada más apropiados y se incluyen etiquetas semánticas.

Kilómetros recorridos:

Última fecha de revisión de mantenimiento:

Última fecha de cambio de neumáticos:

Kilometraje del cambio de neumáticos:

Marca y modelo de neumáticos:

Observaciones:

Definición de la API REST del Backend

Se define la API REST que deberá tener el backend, proponiendo los métodos y rutas para los servicios necesarios que permitan el funcionamiento adecuado de las cuatro vistas especificadas. Se busca eficiencia en el intercambio de datos entre cliente y servidor, manteniendo la legibilidad de las rutas.

• POST /clientes
  • Descripción: Permite la inserción de un nuevo cliente en el sistema.
  • Información Intercambiada: Objeto JSON con los datos completos del cliente (ej. {"nombre": "Juan Pérez", "email": "juan.perez@example.com", "telefono": "123456789"}).
• GET /vehiculos
  • Descripción: Recupera un listado de todos los vehículos disponibles en la flota.
  • Información Intercambiada: Array de objetos JSON, donde cada objeto representa un vehículo con sus propiedades principales (ej. [{"id": "v001", "marca": "Toyota", "modelo": "Corolla", "matricula": "1234ABC"}]).
• PUT /vehiculos/:id/mantenimiento
  • Descripción: Actualiza la información de mantenimiento de un vehículo específico identificado por su id.
  • Información Intercambiada: Objeto JSON con los datos del formulario de mantenimiento (ej. {"kilometros_recorridos": 120000, "ultima_revision": "2024-03-15", "cambio_neumaticos": {"fecha": "2023-11-01", "kilometraje": 110000, "marca_modelo": "Michelin Energy"}, "observaciones": "Revisión general y cambio de aceite." }).
• GET /vehiculos/:id/ubicacion
  • Descripción: Obtiene la última ubicación conocida de un vehículo específico identificado por su id.
  • Información Intercambiada: Objeto JSON con las coordenadas geográficas y otros detalles de ubicación (ej. {"latitud": 37.9922, "longitud": -3.4681, "fecha_hora": "2024-05-28T15:24:00Z", "direccion": "Calle Ejemplo, Linares"}).

Plantilla HTML y Mustache para Listado de Vehículos (Vista 2)

Se propone una plantilla con HTML y Mustache para la página de la vista 2, que muestra el listado de vehículos. Se asume que se recibe un JSON con la marca, modelo, número de plazas, matrícula y categoría de vehículo (ej. “utilitario”, “compacto”, “berlina”, “suv”, “monovolumen”, “furgoneta”). Además, para cada vehículo se contará con la fecha de la última revisión y el último cambio de neumáticos.

Se crea una estructura HTML básica, empleando elementos semánticos y apropiados para distinguir fácilmente entre vehículos y sus características, sin considerar estilos.

{{#vehiculos}}

{{marca}} {{modelo}}

• Matrícula: {{matricula}}
• Nº de plazas: {{plazas}}
• Categoría: {{categoria}}
• Última revisión: {{fechaRevision}}
• Último cambio de neumáticos: {{fechaNeumaticos}}

{{/vehiculos}}

Ejemplo de Datos de Ubicación de Vehículo (Vista 4)

A continuación, se muestra un ejemplo de la información que enviaría el servicio del backend para obtener los datos de la vista 4, empleando la sintaxis de transferencia más apropiada (JSON). Se asume que la información estaría almacenada en una base de datos MongoDB con las mínimas transformaciones posibles.

{
  "vehiculo_id": "XYZ1234",
  "latitud": 37.9922,
  "longitud": -3.4681,
  "fecha_hora": "2024-05-28T15:24:00Z",
  "direccion": "Calle Ejemplo, Linares"
}

Proyecto 2: Aplicación Web de Subastas Online (SPA)

Una empresa de subastas online necesita una aplicación web de una sola página (SPA) para informar de la cotización de sus productos y para que los compradores puedan realizar pujas.

Funcionalidades y Vistas de la Aplicación

Las funciones que deberán estar disponibles, cada una con su vista correspondiente, son las siguientes:

1. Registro de Usuarios:

   Deberá mostrarse una sección para que los compradores rellenen todos sus datos personales y métodos de pago, para posteriormente enviarlos al servidor para su validación. Si son correctos, se mostrará la vista de Autenticación de usuarios. La página también deberá permitir seleccionar la vista 2 si ya son compradores.

2. Autenticación de Usuarios:

   La página permitirá introducir las credenciales de inicio al comprador o registrarse (vista 1). Si se autentica correctamente, se mostrará la vista de Productos.

3. Productos:

   En esta vista, el usuario podrá subir los detalles de un producto a subastar con un precio de salida. Podrá subir todos los productos que quiera y podrá ver cómo va la subasta en la vista Subasta. El menú de navegación también mostrará la opción de Cerrar la sesión.

4. Subasta:

   Durante la duración de la subasta, se mostrará un listado de productos con el valor de la última puja, que se irá actualizando cada 10 segundos. También se podrá pasar a la vista de Productos a través de una opción del menú de navegación. Este menú también mostrará la opción de Cerrar la sesión. Además, si el usuario está autenticado, mostrará para cada producto de la subasta un campo numérico para poder introducir la cantidad por la que se quiere pujar y un botón para pujar.

Elementos del Menú de Navegación por Vista

Detalle de los elementos del menú que estarían disponibles para la interacción con la aplicación, según lo descrito en el enunciado, asumiendo la existencia de un menú de navegación:

• Vista 1 (Registro de Usuarios):
  • Opción: Iniciar Sesión (para ir a Vista 2)
• Vista 2 (Autenticación de Usuarios):
  • Opción: Registrarse (para ir a Vista 1)
  • Opción: Productos (tras autenticación exitosa)
• Vista 3 (Productos):
  • Opción: Subasta
  • Opción: Cerrar Sesión
• Vista 4 (Subasta):
  • Opción: Productos
  • Opción: Cerrar Sesión

Definición de Servicios REST para Vistas de Productos y Subastas

Se definen los servicios REST remotos (métodos y rutas) que se deberían consumir en las operaciones de las vistas 3 y 4, detallando la información que se intercambiaría en formato JSON y un ejemplo para cada caso.

• POST /productos
  • Descripción: Permite a un usuario autenticado subir los detalles de un nuevo producto a subastar.
  • Información Intercambiada: Objeto JSON con los detalles del producto (ej. {"nombre": "Cuadro Abstracto", "descripcion": "Óleo sobre lienzo", "precio_salida": 150.00, "imagen_url": "https://example.com/imagen.jpg"}).
• GET /subasta
  • Descripción: Recupera el listado actual de productos en subasta con el valor de su última puja.
  • Información Intercambiada: Array de objetos JSON, cada uno representando un producto en subasta (ej. [{"id": "prod001", "nombre": "Cuadro Abstracto", "ultima_puja": 175.00, "tiempo_restante": "01:23:45"}, {"id": "prod002", "nombre": "Jarrón Antiguo", "ultima_puja": 90.00, "tiempo_restante": "00:45:10"}]).
• POST /pujas
  • Descripción: Permite a un usuario autenticado realizar una puja por un producto específico.
  • Información Intercambiada: Objeto JSON con el ID del producto y la cantidad de la puja (ej. {"producto_id": "prod001", "cantidad": 180.00, "usuario_id": "user123"}).

Operaciones del Script en la Vista de Subasta (Vista 4)

Las operaciones clave que debería realizar el script de la página en la vista 4 (Subasta), y cómo deberían llevarse a cabo según las técnicas de desarrollo web, centrándose en el intercambio de información con el servidor remoto, son:

• Cargar productos y refrescar cada 10 segundos:

  El script debe realizar una solicitud GET inicial al endpoint /subasta para obtener el listado de productos y sus pujas actuales. Posteriormente, debe configurar un temporizador (ej. usando setInterval) para repetir esta solicitud cada 10 segundos. Esto asegura que la información de las pujas se mantenga actualizada en tiempo real para el usuario. La comunicación se realizaría mediante la API Fetch o XMLHttpRequest.

• Usar fetch para pujar y actualizar valores:

  Cuando un usuario introduce una cantidad y pulsa el botón de pujar, el script debe capturar estos datos y enviar una solicitud POST al endpoint /pujas. Tras recibir una respuesta exitosa del servidor, el script debe actualizar dinámicamente la interfaz de usuario para reflejar la nueva puja (ej. el valor de la última puja para ese producto) sin necesidad de recargar la página completa. Esto mejora la experiencia de usuario al proporcionar retroalimentación instantánea.

• Validar sesión y entrada del usuario:

  Antes de permitir cualquier operación de puja, el script del cliente debe verificar que el usuario esté autenticado (ej. comprobando la existencia de un token de sesión o cookie). Además, debe realizar validaciones de la entrada del usuario (ej. que la cantidad de la puja sea un número válido y superior a la última puja actual) antes de enviar la solicitud al servidor. Estas validaciones iniciales en el cliente reducen la carga del servidor y mejoran la usabilidad, aunque la validación final y de seguridad siempre debe realizarse en el backend.

Uso de Cookies y Legislación de Protección de Datos

Sí, sería necesario emplear cookies en esta aplicación, principalmente para mantener la sesión del usuario autenticado. Las cookies de sesión permiten al servidor recordar que un usuario ha iniciado sesión y mantener su estado a través de múltiples solicitudes HTTP, evitando que tenga que autenticarse en cada interacción.

La legislación de protección de datos, como el Reglamento General de Protección de Datos (RGPD) en Europa y la Ley de Servicios de la Sociedad de la Información (LSSI) en España, afecta significativamente el uso de cookies y la información guardada:

• Consentimiento Explícito: Es obligatorio obtener el consentimiento explícito del usuario antes de instalar cualquier tipo de cookie no estrictamente necesaria para el funcionamiento del sitio (ej. cookies analíticas, de marketing o de preferencias). Esto se suele gestionar mediante un banner o pop-up de cookies que permite al usuario aceptar, rechazar o configurar sus preferencias.
• Información Transparente: Se debe informar claramente al usuario sobre el tipo de cookies que se utilizan, su finalidad, su duración y quién es el responsable de su uso. Esta información debe estar disponible en una política de privacidad o política de cookies accesible desde cualquier parte del sitio web.
• Derechos del Usuario: Los usuarios tienen derecho a acceder a sus datos, rectificarlos, cancelarlos y oponerse a su tratamiento. Esto incluye la posibilidad de retirar el consentimiento para el uso de cookies en cualquier momento.
• Seguridad de los Datos: Toda la información personal almacenada, ya sea en cookies o en la base de datos (como datos de registro, métodos de pago, historial de pujas), debe estar protegida contra accesos no autorizados, pérdidas o alteraciones. Esto implica el uso de cifrado, medidas de seguridad en el servidor y prácticas de desarrollo seguras.

En resumen, el uso de cookies para la gestión de sesiones es fundamental, pero debe ir acompañado de una estricta adherencia a la normativa de protección de datos, garantizando la transparencia, el consentimiento del usuario y la seguridad de la información.