Project Management & user stories

Project Management & User Stories (DiagAuto — Herramienta de Flota Privada)

Este proyecto se gestionó utilizando una metodología Agile adaptada para un único desarrollador, siguiendo un marco de trabajo Scrum/Kanban personal. Utilicé Jira como herramienta central de gestión de proyectos para planificar, realizar el seguimiento y priorizar todas las tareas de desarrollo a lo largo de 2 ciclos de ejecución (Sprints).

👤 Rol de Desarrollador Único y Flujo de Trabajo

Operar como desarrollador único significó asumir múltiples roles. Gestioné el ciclo de vida completo de la aplicación, equilibrando la definición del producto, la arquitectura del software, el diseño de UI/UX y la ejecución técnica full-stack:

• Product Owner & Scrum Master: Definí las funcionalidades, redacté las historias de usuario, prioricé el backlog y desbloqueé las dependencias técnicas.
• Desarrollador frontend: Construí la aplicación cliente en Angular 19, gestioné el estado reactivo del inventario con Signals e implementé las barreras de pago (Paywalls) en la interfaz.

⚙️ Mi proceso de desarrollo

Dividí el proyecto en 2 Sprints. El objetivo principal era construir una agenda privada donde cada usuario registrado controle sus propios vehículos, integrando un límite de control de flota (Plan Gratuito vs. Plan Premium) basado en la cantidad de registros.

Organizador de tareas

Cada funcionalidad se creó como una Historia de Usuario principal en Jira y se dividió en subtareas técnicas específicas para organizar mis sesiones de programación:

• DAF-xx — Historia principal o ticket de implementación frontend (vistas, componentes de Angular, estado con Signals, servicios HTTP).
• DAB-xx — Historia backend (endpoint de vehículos del usuario, validación del conteo en servidor, persistencia).

🎯 Objetivos del Sprint

Sprint	Objetivo	Épicas cerradas
Sprint 1	Autenticación y Agenda de Vehículos Base: Configuración del sistema de registro/login de usuarios y la base de datos de vehículos (CRUD) privada, donde cada usuario solo accede a sus propios datos.	Autenticación de Usuario, Enrutamiento en Angular, Catálogo Privado de Vehículos.
Sprint 2	Control de Límite Freemium y Pago: Implementación de la lógica de bloqueo al intentar registrar un 5.º vehículo, diseño de la pantalla de pago/suscripción y alertas visuales de estado de averías.	Límite Freemium, Pasarela de Pago, Alertas de Estado.

📝 Ejemplos de historias de usuario

Ejemplo 1: Frontend - Panel Visual del Estado de Averías (Vista de Agenda)

La historia de usuario:
"Como propietario registrado, quiero ver una agenda visual de mi flota privada de vehículos codificada por colores según su estado de avería, para poder identificar instantáneamente qué coches están estropeados y requieren atención hoy."

Criterios de aceptación:

• Dado que he iniciado sesión en mi cuenta, cuando abro el panel principal, entonces solo veo los vehículos que yo he registrado (barrera de privacidad).
• Dado que uno de mis vehículos tiene una avería activa cuando visito mi agenda registro el fallo manualmente, entonces su tarjeta debe mostrar un Indicador de advertencia rojo y la descripción del fallo.
• Dado que un vehículo anteriormente averiado cuando ya haya sido reparado en un taller, entonces visito mi agenda actualizo el estado del vehículo.
• Dado que puedo elegir con un option cuando elijo, puedo cambiar el filtro then se verán los vehiculos averiados (o en reparación), sin averías o todos.

Subtareas Frontend (Jira):

• Diseñar el componente interactivo VehicleAgendaComponent utilizando Tailwind CSS para que actúe como el centro de mando personal del propietario.
• Implementar una Signal de Angular para almacenar los vehículos del usuario y una Signal de tipo computed para gestionar el filtrado local en tiempo real.
• Crear un componente reutilizable para la insignia de estado (StatusBadgeComponent) con estados verde y rojo.
• Escribir pruebas unitarias con Jasmine para asegurar que el filtro computado actualiza correctamente la interfaz de usuario sin disparar peticiones HTTP adicionales a la API.

Cómo lo resolví:
Implementé un panel enfocado en la privacidad de los datos y la inmediatez visual. El frontend obtiene los vehículos desde un endpoint que los filtra implícitamente mediante la sesión del usuario autenticado. En lugar de realizar peticiones repetidas a la API al filtrar la agenda, la aplicación carga el array de vehículos del usuario en una Signal de Angular (myVehicles). Después, creé una Signal reactiva computed() llamada filteredVehicles que se recalcula automáticamente cada vez que el propietario activa o desactiva el filtro "Mostrar solo averiados". Este enfoque garantiza un renderizado instantáneo de la interfaz y una experiencia de usuario fluida.

Ejemplo 2: Frontend - Alternancia del Estado de Avería con un Solo Clic

La historia de usuario:
"Como propietario, quiero cambiar el estado de un vehículo directamente desde mi vista de agenda cuando se detecte o se repare un problema, para que mi planificación personal se mantenga actualizada al instante sin tener que cambiar de página."

Criterios de aceptación:

• Dado que estoy revisando mi lista de vehículos en la agenda, cuando hago clic en el botón "Alternar Estado de Avería" de un coche, entonces aparece un diálogo rápido de confirmación.
• Dado que confirmo la acción, cuando la API se actualiza correctamente, entonces la tarjeta del vehículo cambia inmediatamente su estado visual (por ejemplo, pasa de Rojo/averiado a Verde/operativo) de forma fluida.

Subtareas Frontend (Jira):

• Crear el conector del endpoint PATCH /api/v1/vehicles/:id/toggle-fault dentro del servicio de vehículos VehicleService.
• Construir un componente de modal de confirmación ligero y accesible.
• Actualizar el nodo del vehículo específico dentro del estado de la Signal de Angular tras recibir una respuesta exitosa del servidor.

Cómo lo resolví:
Para evitar recargas completas de la página que interrumpan el flujo de trabajo del propietario en la agenda, el cambio de estado dispara una llamada de red asíncrona a través del HttpClient de Angular. Tras recibir una respuesta exitosa, la Signal local myVehicles actualiza únicamente la propiedad booleana hasFault del vehículo afectado. Debido a la naturaleza reactiva de Angular, la interfaz de usuario transforma instantáneamente el tema de esa tarjeta específica de un estado de advertencia rojo a un estado operativo verde limpio de forma automática, ofreciendo una experiencia ágil y fluida.