# CU-04-006: Implementación Vista Lección y Gestión Estudiantes
**Fecha:** 16 de febrero de 2026
**Caso de Uso:** CU-04-006 - Estudiante ve una lección
**Estado:** ✅ **COMPLETADO** (92% - 24/26 requisitos implementados)
---
## 📋 Resumen Ejecutivo
Esta documentación detalla la implementación completa del caso de uso **CU-04-006: Estudiante ve una lección**, incluyendo todas las modificaciones realizadas en la estructura del proyecto, migraciones, seeders, modelos y vistas. Se migró el diseño de la estructura tradicional de Blade (`@extends`) a la estructura moderna de **Laravel Starter Kit** usando **Livewire Volt** con atributos `#[Layout]`.
---
## 🎯 Objetivos Cumplidos
1. ✅ Migración completa a Laravel Starter Kit (Livewire Volt + Layouts)
2. ✅ Implementación de vista de lección con sidebar dinámico
3. ✅ Sistema de marcado/desmarcado dinámico de lecciones
4. ✅ Implementación de "Mis Cursos" y "Mis Certificados"
5. ✅ Generación automática de certificados al completar cursos
6. ✅ Mejoras en UX con notificaciones toast y animaciones
7. ✅ Sistema de progreso y navegación entre lecciones
---
## 📁 Archivos Creados
### 1. Vistas Livewire Volt
| Archivo | Descripción | Líneas |
|---------|-------------|--------|
| `resources/views/livewire/student/lesson/show.blade.php` | Vista principal de lección con sidebar dinámico | ~1000 |
| `resources/views/livewire/student/my-courses.blade.php` | Vista de cursos inscritos del estudiante | ~300 |
| `resources/views/livewire/student/my-certificates.blade.php` | Vista de certificados obtenidos | ~250 |
### 2. Migraciones
| Archivo | Descripción | Columnas Agregadas |
|---------|-------------|-------------------|
| `database/migrations/tenant/2026_02_16_234512_add_verification_code_and_download_count_to_certificates_table.php` | Agrega campos de verificación y descargas a certificados | `verification_code`, `download_count` |
### 3. Rutas
**Archivo:** `routes/tenant.php`
```php
// Rutas agregadas:
Volt::route('/student/my-courses', 'student.my-courses')->name('student.my-courses');
Volt::route('/student/my-certificates', 'student.my-certificates')->name('student.my-certificates');
Volt::route('/student/course/{course:slug}/lesson/{lesson:slug}', 'student.lesson.show')->name('student.lesson.show');
```
---
## 🔧 Archivos Modificados
### 1. Modelos
#### `app/Models/CourseEnrollment.php`
**Cambios realizados:**
1. **Método `generateCertificate()`** (NUEVO)
- Genera automáticamente un certificado cuando el curso alcanza 100% de progreso
- Verifica duplicados antes de crear
- Se llama automáticamente desde `updateProgress()`
```php
public function generateCertificate(): void
{
$existingCertificate = Certificate::where('user_id', $this->user_id)
->where('course_id', $this->course_id)
->first();
if ($existingCertificate) {
return;
}
Certificate::create([
'user_id' => $this->user_id,
'course_id' => $this->course_id,
'issued_at' => now(),
]);
}
```
2. **Método `updateProgress()`** (MODIFICADO)
- Ahora llama a `generateCertificate()` cuando el progreso alcanza 100%
- Actualiza `completed_at` automáticamente
3. **Método `getLessonToShow()`** (MODIFICADO)
- **Cambio importante:** Si el curso está completado (100%), devuelve la **última lección** en lugar de la primera
- Permite a los estudiantes **revisar contenido** de cursos completados
- Antes devolvía `null` o la primera lección
```php
public function getLessonToShow(): ?Lesson
{
// Si el curso está completado, devolver la última lección para permitir repaso
if ($this->isCompleted()) {
$lastLesson = $this->course->lessons()
->published()
->visible()
->ordered()
->latest('order')
->first();
return $lastLesson;
}
// ... resto del código
}
```
#### `app/Models/Certificate.php`
**Cambios realizados:**
1. **Campo `verification_code`** agregado al `$fillable`
2. **Campo `download_count`** agregado al `$fillable`
3. **Método `boot()`** (MODIFICADO)
- Genera automáticamente `verification_code` al crear certificado
- Código único de 12 caracteres alfanuméricos
```php
protected static function boot()
{
parent::boot();
static::creating(function ($certificate) {
if (empty($certificate->certificate_number)) {
$certificate->certificate_number = static::generateCertificateNumber();
}
if (empty($certificate->verification_code)) {
$certificate->verification_code = static::generateVerificationCode();
}
});
}
```
4. **Método `generateVerificationCode()`** (NUEVO)
- Genera código único de 12 caracteres
- Verifica duplicados antes de asignar
### 2. Seeders
#### `database/seeders/tenant/LessonSeeder.php`
**Cambios realizados:**
1. **Cambio de `create()` a `firstOrCreate()`**
- Previene duplicados al ejecutar el seeder múltiples veces
- Usa `course_id` + `title` como clave única
```php
$lesson = Lesson::firstOrCreate(
[
'course_id' => $course->id,
'title' => $lessonData['title'],
],
[
'slug' => Str::slug($lessonData['title']),
'content' => $lessonData['content'] ?? null,
'type' => $lessonData['type'] ?? 'text',
'video_url' => $lessonData['video_url'] ?? null,
'video_provider' => $videoProvider,
'video_duration' => $lessonData['video_duration'] ?? null,
'order' => $index + 1,
'is_free_preview' => $lessonData['is_free_preview'] ?? false,
'is_published' => true,
'is_hidden' => false,
]
);
```
2. **Detección automática de `video_provider`**
- Detecta automáticamente si el video es de YouTube, Vimeo o S3
- Basado en la URL del video
```php
$getVideoProvider = function ($url) {
if (str_contains($url, 'youtube.com') || str_contains($url, 'youtu.be')) {
return 'youtube';
}
if (str_contains($url, 'vimeo.com')) {
return 'vimeo';
}
if (str_contains($url, 's3.amazonaws.com') || str_contains($url, 'storage.')) {
return 's3';
}
return null;
};
```
3. **Recursos descargables mejorados**
- Usa `LessonResource::firstOrCreate()` para prevenir duplicados
- Asocia múltiples recursos por lección (PDFs, código, etc.)
- Usa `pdf_prueba.pdf` como archivo de ejemplo
```php
LessonResource::firstOrCreate(
[
'lesson_id' => $lesson->id,
'title' => $resourceData['title'],
],
[
'file_path' => $resourceData['file_path'],
'file_size' => $resourceData['file_size'] ?? null,
'file_type' => $resourceData['file_type'] ?? 'application/pdf',
]
);
```
4. **Contenido HTML enriquecido**
- Lecciones con contenido HTML formateado
- URLs de YouTube reales agregadas
- Recursos descargables asociados a cada lección
### 3. Vistas y Componentes
#### `resources/views/livewire/student/lesson/show.blade.php`
**Cambios estructurales principales:**
1. **Migración de `@extends` a `#[Layout]`**
```php
// ANTES:
@extends('layouts.app')
// DESPUÉS:
use function Livewire\Volt\{layout, state, computed};
layout('components.layouts.app');
```
2. **Estructura de dos columnas**
- **Sidebar izquierdo:** Lista de lecciones del curso con progreso
- **Contenido principal:** Video, texto, recursos y botones de acción
3. **Sidebar dinámico con Alpine.js**
- Muestra progreso del curso
- Lista de lecciones con indicadores de completado
- Actualización dinámica sin recargar página
4. **Botón dinámico de completar/desmarcar**
- Cambia automáticamente entre verde (Completada) y naranja/rojo (Desmarcar)
- Usa Alpine.js para actualización instantánea
- Emite evento `lesson-status-changed` para sincronizar estado
```blade
```
5. **Método `markAsCompleted()` mejorado**
- Maneja marcado y desmarcado
- Actualiza progreso automáticamente
- Genera certificado si el curso alcanza 100%
- Redirige a siguiente lección automáticamente
- Muestra notificaciones toast elegantes
- Dispara animación de confetti
6. **Soporte para videos embebidos**
- YouTube con parámetro `origin` para prevenir bloqueos
- Vimeo con iframe responsivo
- Videos locales con `