Certificados Digitales

TalentBricksAI genera certificados digitales verificables cuando un estudiante completa un curso. Los certificados se generan en el navegador usando Canvas HTML5 e incluyen un codigo QR para verificacion publica.

Caracteristicas

• Generacion client-side: Renderizado con Canvas HTML5 (sin servidor)
• Diseño premium: Tema oscuro con acentos dorados
• Verificacion publica: URL unica sin necesidad de login
• Codigo QR: Enlace directo a la pagina de verificacion
• Descarga PNG: Un click para descargar el certificado
• Datos snapshot: Informacion capturada al momento de completar

Flujo del Usuario

Completar todas las lecciones
         ↓
Curso marcado como completado
         ↓
Certificado generado automaticamente
         ↓
Ver en /certificado/:courseId
         ↓
Descargar PNG o compartir enlace
         ↓
Verificacion publica en /verificar/:code

Rutas

Ruta	Acceso	Descripcion
/certificado/:courseId	Autenticado	Ver y descargar certificado propio
/verificar/:verificationCode	Publico	Verificar autenticidad del certificado

Modelo de Datos

El certificado guarda datos “snapshot” al momento de generacion:

model Certificate {
  id                    Int      @id @default(autoincrement())
  createdAt             DateTime @default(now())

  user                  User     @relation(...)
  userId                String

  course                Course   @relation(...)
  courseId              Int

  verificationCode      String   @unique @default(uuid())

  // Snapshot data
  studentName           String
  courseTitle           String
  instructorName        String
  totalDurationMinutes  Int

  @@unique([userId, courseId])
}

Por que Snapshot Data?

Los datos se guardan como copia (snapshot) porque:

1. Si el curso cambia de nombre, el certificado mantiene el nombre original
2. Si el instructor cambia, el certificado refleja quien enseno al estudiante
3. Si la duracion del curso cambia, el certificado muestra las horas completadas

Contenido del Certificado

El certificado Canvas incluye:

Elemento	Descripcion
Logo	”TalentBricksAI” con tagline
Titulo	”CERTIFICADO DE COMPLETACION”
Nombre estudiante	Resaltado en dorado
Nombre curso	Con word-wrap automatico
Duracion total	Horas y minutos del curso
Fecha emision	Formato largo en español
Instructor	Nombre con linea de firma
Codigo QR	Enlace a pagina de verificacion
Codigo	UUID para verificacion manual

Pagina de Verificacion

La pagina /verificar/:code es publica y muestra:

Certificado Valido

• Badge verde “Verificado”
• Nombre del estudiante
• Nombre del curso
• Instructor
• Duracion
• Fecha de emision
• CTA para explorar cursos

Certificado Invalido

• Mensaje de error
• Codigo verificado (para debugging)
• CTA para ir al inicio

Operaciones Backend

completeCourse (Action)

Cuando un usuario completa todas las lecciones:

// 1. Verificar que todas las lecciones estan completadas
// 2. Calcular duracion total en minutos
// 3. Capturar nombre del estudiante (username o email)
// 4. Crear registro de Certificate con snapshot data
// 5. Marcar Enrollment como completedAt
// 6. Retornar verificationCode

getCertificateById (Query)

// Requiere autenticacion
// Retorna certificado del usuario para un curso especifico
// Incluye datos del curso (slug, category, difficulty)

verifyCertificate (Query)

// NO requiere autenticacion (publico)
// Busca por verificationCode
// Retorna datos publicos del certificado

Componentes Frontend

CertificateCanvas

import { CertificateCanvas } from "./components/CertificateCanvas";

<CertificateCanvas
  data={{
    studentName: "Juan Perez",
    courseTitle: "Python para Data Engineering",
    instructorName: "Maria Garcia",
    totalDurationMinutes: 180,
    issuedAt: new Date(),
    verificationCode: "abc-123-def",
  }}
/>

Descarga

import { downloadCertificateFromCanvas } from "./components/CertificateCanvas";

<Button onClick={downloadCertificateFromCanvas}>
  Descargar PNG
</Button>

Compartir Certificado

Copiar Enlace

const verificationUrl = `${window.location.origin}/verificar/${code}`;
await navigator.clipboard.writeText(verificationUrl);

Web Share API

await navigator.share({
  title: "Mi certificado de TalentBricksAI",
  text: `He completado el curso ${courseTitle}!`,
  url: verificationUrl,
});

Personalizacion

Cambiar Colores

En CertificateCanvas.tsx, modificar el gradiente de fondo:

const gradient = ctx.createLinearGradient(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT);
gradient.addColorStop(0, "#1a1a2e");  // Color inicio
gradient.addColorStop(0.5, "#16213e"); // Color medio
gradient.addColorStop(1, "#0f0f23");   // Color final

Cambiar Logo/Texto

Buscar las lineas de ctx.fillText() en el componente:

ctx.fillText("TalentBricksAI", CANVAS_WIDTH / 2, 100);
ctx.fillText("Plataforma de Aprendizaje...", CANVAS_WIDTH / 2, 130);

Agregar Imagen de Logo

const logo = new Image();
logo.src = "/logo.png";
logo.onload = () => {
  ctx.drawImage(logo, x, y, width, height);
};

Testing

Probar con Datos Dummy

wasp db seed seedAllDummyData

El seed crea un usuario de prueba con certificado. El codigo de verificacion se muestra en la consola.

Verificar Flujo Completo

1. Crear usuario y inscribirse en un curso
2. Completar todas las lecciones
3. Visitar /certificado/:courseId
4. Verificar que el certificado se renderiza
5. Probar descarga PNG
6. Probar enlace de verificacion publica

Troubleshooting

QR Code no aparece

Verificar que qrcode este instalado:

cd app
npm install qrcode @types/qrcode

Canvas en blanco

• Verificar que los datos del certificado estan completos
• Revisar la consola del navegador por errores

Certificado no se genera

Verificar que:

1. Todas las lecciones tienen isCompleted: true
2. El usuario tiene Enrollment para el curso
3. El Enrollment no tiene completedAt ya seteado

Siguiente Paso

• Datos de Desarrollo - Usar seeds para testing
• Crear un Curso - Crear cursos reales