--- id: "US-EDU-002" title: "Ver Detalle de Curso" type: "User Story" status: "Done" priority: "Alta" epic: "OQI-002" story_points: 3 created_date: "2025-12-05" updated_date: "2026-01-04" --- # US-EDU-002: Ver Detalle de Curso ## Metadata | Campo | Valor | |-------|-------| | **ID** | US-EDU-002 | | **Épica** | OQI-002 - Módulo Educativo | | **Módulo** | education | | **Prioridad** | P0 | | **Story Points** | 3 | | **Sprint** | Sprint 3 | | **Estado** | Pendiente | | **Asignado a** | Por asignar | --- ## Historia de Usuario **Como** usuario interesado en un curso, **quiero** ver información detallada del curso antes de inscribirme, **para** evaluar si el contenido se ajusta a mis objetivos de aprendizaje. ## Descripción Detallada El usuario debe poder acceder a una página de detalle que muestre información completa del curso: descripción extendida, temario desglosado por módulos y lecciones, instructor, requisitos previos, objetivos de aprendizaje, reseñas de otros estudiantes, y botón de inscripción. Si el usuario ya está inscrito, debe mostrar su progreso y botón para continuar. ## Mockups/Wireframes ``` ┌─────────────────────────────────────────────────────────────────┐ │ ← Volver al catálogo 👤 │ ├─────────────────────────────────────────────────────────────────┤ │ │ │ ┌────────────────────┐ FIBONACCI RETRACEMENT BÁSICO │ │ │ │ ⭐ 4.8 (89 reseñas) | 1,234 estudiantes│ │ │ [VIDEO INTRO] │ Por: Carlos Mendoza | 2h 30m | 5 módul│ │ │ ▶ Preview │ │ │ │ │ [📥 Inscribirse gratis] │ │ └────────────────────┘ │ │ │ │ ┌────────────────────────────────────────────────────────────┐ │ │ │ PESTAÑAS: [Descripción] [Temario] [Instructor] [Reseñas] │ │ │ └────────────────────────────────────────────────────────────┘ │ │ │ │ QUÉ APRENDERÁS │ │ ✓ Identificar niveles de Fibonacci en gráficos │ │ ✓ Aplicar retrocesos en tendencias alcistas y bajistas │ │ ✓ Combinar Fibonacci con otros indicadores │ │ ✓ Realizar entradas y salidas precisas │ │ │ │ REQUISITOS │ │ • Conocimientos básicos de trading │ │ • Familiaridad con gráficos de velas │ │ │ │ DESCRIPCIÓN │ │ Fibonacci es una herramienta fundamental del análisis técnico...│ │ [Texto completo de descripción del curso] │ │ │ │ PARA QUIÉN ES ESTE CURSO │ │ • Traders principiantes que quieren dominar Fibonacci │ │ • Analistas técnicos que buscan mejorar su precisión │ │ │ └─────────────────────────────────────────────────────────────────┘ [PESTAÑA TEMARIO] ┌─────────────────────────────────────────────────────────────────┐ │ 📚 TEMARIO DEL CURSO 5 módulos | 23 lecciones │ │ │ │ ▼ Módulo 1: Introducción a Fibonacci (30 min) │ │ 1. ¿Qué es Fibonacci? (5:30) [🎬 Video] [Gratis] │ │ 2. Historia y fundamentos (8:45) [🎬 Video] [Gratis] │ │ 3. La secuencia de Fibonacci (10:20) [📄 Artículo] │ │ 4. Quiz: Fundamentos (15 preguntas) [📝 Quiz] │ │ │ │ ▼ Módulo 2: Niveles de Retroceso (45 min) │ │ 1. Niveles principales: 38.2%, 50%, 61.8% (12:15) │ │ 2. Cómo dibujar Fibonacci en gráfico (18:30) │ │ 3. Práctica: Identificar retrocesos (20:00) │ │ 4. Quiz: Niveles de retroceso │ │ │ │ ▶ Módulo 3: Fibonacci en Tendencias (35 min) [🔒 Bloqueado] │ │ ▶ Módulo 4: Estrategias Avanzadas (25 min) [🔒 Bloqueado] │ │ ▶ Módulo 5: Fibonacci + Otros Indicadores (15 min) [🔒] │ │ │ └─────────────────────────────────────────────────────────────────┘ ``` --- ## Criterios de Aceptación **Escenario 1: Ver detalle de curso no inscrito** ```gherkin DADO que el usuario está autenticado Y NO está inscrito en el curso CUANDO accede a /education/courses/fibonacci-retracement-basico ENTONCES se muestra la página de detalle del curso Y se muestra: título, rating, estudiantes, instructor, duración Y se muestra botón "Inscribirse" o "Inscribirse gratis" Y se muestra video preview del curso (si existe) Y se muestra descripción completa Y se muestra temario desglosado por módulos ``` **Escenario 2: Ver detalle de curso inscrito** ```gherkin DADO que el usuario está inscrito en el curso Y tiene 60% de progreso CUANDO accede al detalle del curso ENTONCES se muestra barra de progreso "60% completado" Y el botón principal dice "Continuar curso" Y se destaca la última lección accedida Y se muestra resumen de progreso: "14 de 23 lecciones completadas" ``` **Escenario 3: Ver temario completo** ```gherkin DADO que el usuario está en la pestaña "Temario" ENTONCES se muestran todos los módulos del curso Y cada módulo muestra: título, duración total, número de lecciones Y cada lección muestra: título, duración, tipo (video/artículo/quiz) Y se puede expandir/colapsar cada módulo Y lecciones gratuitas están marcadas como "Gratis" Y lecciones bloqueadas muestran candado 🔒 ``` **Escenario 4: Preview de lección gratuita** ```gherkin DADO que el usuario NO está inscrito Y el curso tiene lecciones marcadas como "Gratis" CUANDO hace click en una lección gratuita ENTONCES puede ver el contenido sin inscribirse Y se muestra CTA "Inscríbete para acceder a todo el contenido" ``` **Escenario 5: Ver información del instructor** ```gherkin DADO que el usuario está en la pestaña "Instructor" ENTONCES se muestra: foto, nombre, título, biografía Y se muestra lista de otros cursos del instructor Y se muestran estadísticas: total estudiantes, cursos, rating promedio Y se muestra botón "Ver perfil completo" (opcional) ``` **Escenario 6: Ver reseñas de estudiantes** ```gherkin DADO que el usuario está en la pestaña "Reseñas" ENTONCES se muestra rating promedio (ej: 4.8/5) Y se muestra distribución de ratings (5★: 60%, 4★: 30%, etc.) Y se muestran las últimas 10 reseñas Y cada reseña muestra: nombre del usuario, fecha, rating, comentario Y se puede filtrar por: Todas, 5★, 4★, 3★, 2★, 1★ ``` **Escenario 7: Inscribirse en curso** ```gherkin DADO que el usuario NO está inscrito Y el curso es gratuito CUANDO hace click en "Inscribirse gratis" ENTONCES se registra la inscripción en backend Y se muestra toast "¡Te has inscrito en el curso!" Y el botón cambia a "Comenzar curso" Y se navega a la primera lección al hacer click ``` **Escenario 8: Curso premium sin suscripción** ```gherkin DADO que el curso es premium Y el usuario NO tiene suscripción activa CUANDO intenta inscribirse ENTONCES se muestra modal "Este curso requiere suscripción Premium" Y se muestra botón "Ver planes" que lleva a /pricing Y NO se permite inscripción ``` ## Criterios Adicionales - [ ] Video preview auto-play al cargar página (muted) - [ ] Compartir curso en redes sociales - [ ] Agregar curso a "Guardados" (wishlist) - [ ] Mostrar badge "Bestseller" si es top 10 más vendido - [ ] Mostrar "Última actualización: DD/MM/YYYY" - [ ] SEO optimizado con meta tags dinámicos - [ ] Structured data (schema.org) para Google --- ## Tareas Técnicas **Database:** - [ ] DB-EDU-004: Verificar relación courses -> modules -> lessons - [ ] DB-EDU-005: Tabla course_reviews para reseñas - [ ] DB-EDU-006: Tabla course_enrollments para inscripciones **Backend:** - [ ] BE-EDU-008: Endpoint GET /education/courses/:slug - [ ] BE-EDU-009: Endpoint POST /education/courses/:id/enroll - [ ] BE-EDU-010: Endpoint GET /education/courses/:id/reviews - [ ] BE-EDU-011: Implementar CourseService.getBySlug() - [ ] BE-EDU-012: Implementar EnrollmentService.enroll() - [ ] BE-EDU-013: Verificar acceso Premium para cursos pagos **Frontend:** - [ ] FE-EDU-009: Crear página CourseDetailPage.tsx - [ ] FE-EDU-010: Crear componente CourseHeader.tsx - [ ] FE-EDU-011: Crear componente CourseSyllabus.tsx (temario) - [ ] FE-EDU-012: Crear componente InstructorCard.tsx - [ ] FE-EDU-013: Crear componente CourseReviews.tsx - [ ] FE-EDU-014: Crear componente EnrollButton.tsx - [ ] FE-EDU-015: Implementar tabs de navegación - [ ] FE-EDU-016: Modal de confirmación de inscripción **Tests:** - [ ] TEST-EDU-004: Test inscripción en curso gratuito - [ ] TEST-EDU-005: Test bloqueo de curso premium - [ ] TEST-EDU-006: Test E2E ver detalle e inscribirse --- ## Dependencias **Depende de:** - [ ] US-EDU-001: Ver catálogo - Estado: Pendiente - [ ] US-AUTH-001: Autenticación - Estado: ✅ Completado **Bloquea:** - [ ] US-EDU-003: Iniciar lección - [ ] US-EDU-007: Ver progreso --- ## Notas Técnicas **Endpoints involucrados:** | Método | Endpoint | Descripción | |--------|----------|-------------| | GET | /education/courses/:slug | Detalle completo del curso | | POST | /education/courses/:id/enroll | Inscribirse en curso | | GET | /education/courses/:id/reviews | Reseñas del curso | **Response GET /courses/:slug:** ```typescript { course: { id: "uuid-1", title: "Fibonacci Retracement Básico", slug: "fibonacci-retracement-basico", description: "Descripción completa del curso...", learningObjectives: [ "Identificar niveles de Fibonacci", "Aplicar retrocesos en tendencias" ], requirements: [ "Conocimientos básicos de trading", "Familiaridad con gráficos" ], targetAudience: [ "Traders principiantes", "Analistas técnicos" ], category: {...}, level: "beginner", duration: 150, moduleCount: 5, lessonCount: 23, studentCount: 1234, rating: 4.8, reviewCount: 89, instructor: { id: "inst-1", name: "Carlos Mendoza", avatar: "...", title: "Senior Trader", bio: "15 años de experiencia...", coursesCount: 8, studentsCount: 12500, rating: 4.9 }, isPremium: false, previewVideoUrl: "https://vimeo.com/...", updatedAt: "2025-11-20T10:00:00Z", publishedAt: "2025-11-15T10:00:00Z", modules: [ { id: "mod-1", title: "Introducción a Fibonacci", order: 1, duration: 30, lessonCount: 4, lessons: [ { id: "les-1", title: "¿Qué es Fibonacci?", type: "video", duration: 5.5, isFree: true, isCompleted: false, order: 1 } // ... más lecciones ] } // ... más módulos ], userEnrollment: { enrolledAt: "2025-12-01T14:30:00Z", progressPercent: 60, lessonsCompleted: 14, lastAccessedLesson: { id: "les-14", title: "Fibonacci en tendencias bajistas" }, lastAccessedAt: "2025-12-04T18:20:00Z" } } } ``` **Entidades/Tablas:** - `education.courses` - `education.modules` - `education.lessons` - `education.course_enrollments` - `education.course_reviews` - `education.instructors` --- ## Definition of Ready (DoR) - [x] Historia claramente escrita - [x] Criterios de aceptación definidos - [x] Story points estimados - [x] Dependencias identificadas - [x] Sin bloqueadores - [x] Diseño/mockup disponible - [x] API spec disponible ## Definition of Done (DoD) - [ ] Código implementado según criterios - [ ] Tests unitarios escritos y pasando - [ ] Tests de integración pasando - [ ] Code review aprobado - [ ] Documentación actualizada - [ ] QA aprobado - [ ] Desplegado en ambiente de pruebas --- ## Historial de Cambios | Fecha | Cambio | Autor | |-------|--------|-------| | 2025-12-05 | Creación | Requirements-Analyst | --- **Creada por:** Requirements-Analyst **Fecha:** 2025-12-05 **Última actualización:** 2025-12-05