El sitio para estudiantes
Qué ofrece el sitio para estudiantes a los visitantes y a los estudiantes con sesión iniciada, cómo funcionan la compra y la finalización de un curso, y dónde cambiarlo.
Para el paquete Full Stack
Páginas públicas
Cada página está bajo un prefijo de idioma, /en o /ar, y las páginas en árabe se muestran de derecha a izquierda. Abrir / envía al visitante a /en.
| Página | Dirección | Qué muestra |
|---|---|---|
| Inicio | /en | Hero, cursos destacados, cómo funciona, instructores, testimonios y una llamada a la acción. |
| Cursos | /en/courses | El catálogo, filtrado por categoría y por tipo (en vivo o grabado), con paginación. |
| Curso | /en/courses/<slug> | Resumen, temario, vídeo de presentación, tarjeta de precio, instructor, las reseñas publicadas de los estudiantes con su valoración media, preguntas frecuentes y cursos relacionados. La compra empieza aquí. |
| Instructores | /en/instructors | El directorio de instructores, filtrado por especialidad. |
| Instructor | /en/instructors/<username> | El perfil y los cursos de un instructor. |
| Blog | /en/blog y /en/blog/<slug> | Los artículos por categoría, y cada artículo. |
| Verifica un certificado | /en/verify-certificate | Cualquiera puede comprobar aquí un número de certificado, sin cuenta. |
| Información, Privacidad, Términos | /en/about, /en/privacy, /en/terms | Páginas estáticas. |
| Resultados del pago | /en/checkout/success, /en/checkout/cancelled | Donde llega el comprador después de pagar en la página de Stripe o de PayPal, y después de inscribirse en un curso gratuito. |
| Páginas de inicio de sesión y de cuenta | /en/auth/... | login, register, forgot-password, reset-password, verify-email, welcome y auth-code-error. |
Cualquier otra dirección muestra la página 404 del sitio. Sin una API, el catálogo, los instructores y el blog vienen de los datos de ejemplo incluidos: consulta Datos de ejemplo en los frontends.
El panel del estudiante
Un estudiante con sesión iniciada tiene un panel en /en/dashboard. Sin sesión, cualquier dirección del panel lo envía a iniciar sesión y luego de vuelta a la página que pidió.
| Página | Dirección | Qué hace |
|---|---|---|
| Resumen | /dashboard | El progreso, la actividad de aprendizaje, las lecciones recientes y el curso para continuar. |
| Mis cursos | /dashboard/courses, /dashboard/courses/live, /dashboard/courses/recorded | Cada curso en el que está inscrito el estudiante, con su progreso y un botón para reanudar. |
| Reproductor del curso | /dashboard/courses/<courseId> | Las lecciones, las notas y los recursos, que se describen más abajo. |
| Cuestionarios | /dashboard/courses/<courseId>/quizzes | Los cuestionarios del curso, sus intentos y sus resultados. El enlace solo aparece cuando el curso tiene cuestionarios. |
| Calendario | /dashboard/calendar | Las clases en vivo, las tareas y las fechas límite de la semana. Desde aquí el estudiante entrega una tarea. |
| Clase en vivo | /dashboard/calendar/live/<sessionId> | La sala de video de la clase, abierta poco antes de que empiece. |
| Guardados | /dashboard/wishlist | Los cursos guardados para más tarde, listos para pasar al carrito. |
| Certificados | /dashboard/certificates | Los certificados obtenidos, para imprimir o compartir, y los cursos a punto de terminarse. |
| Mensajes | /dashboard/messages | Las conversaciones con los instructores de los cursos del propio estudiante. |
| Ajustes | /dashboard/settings | Los datos del perfil y la contraseña. |
- Las notificaciones se abren desde la campana del encabezado del panel: un nuevo certificado, por ejemplo.
- La búsqueda del encabezado del panel encuentra los cursos del propio estudiante, el catálogo, los instructores, las categorías y los artículos del blog. Necesita al menos dos caracteres.
- Un estudiante solo puede escribir a un instructor sobre un curso en el que esté inscrito.
El reproductor del curso y el progreso de las lecciones
- El reproductor se abre en la última lección que vio el estudiante. Si llega desde una inscripción nueva, empieza en la primera lección.
- Una lección cuenta como hecha cuando termina su video o cuando el estudiante pulsa Mark as Complete. El progreso se guarda en la API, así que se conserva al recargar y en otro dispositivo.
- Cada lección tiene un resumen, el instructor, recursos descargables y una pestaña privada de Notes. Las notas se guardan solas mientras el estudiante escribe.
- El reproductor de video recuerda el volumen, los subtítulos y la velocidad de reproducción en el navegador, y tiene atajos de teclado.
- Cuando todas las lecciones están hechas, el encabezado de la página ofrece el certificado del curso. Ahí aparece un botón Quizzes cuando el curso tiene cuestionarios.
- Rate this course en la cabecera de la página abre la reseña del estudiante: una valoración de 1 a 5 estrellas y un comentario opcional de hasta 2.000 caracteres. Una vez enviada, el botón pasa a Your review, y desde ahí el estudiante puede editarla o eliminarla.
Reseñas de cursos
Los estudiantes reseñan los cursos que hacen, y la página del curso muestra esas reseñas a todos los visitantes.
- Solo un estudiante inscrito en el curso puede reseñarlo, una vez por curso. Una inscripción cancelada no puede.
- Una reseña aparece en la página del curso con el nombre y la foto del estudiante, de la más reciente a la más antigua, con Show more reviews para cargar el resto. La valoración media y el número de reseñas del curso, y los de su instructor, se recalculan tras cada reseña y cada cambio de moderación.
- Con el ajuste
reviews_require_approvalactivado, una reseña espera como Awaiting approval hasta que un moderador la publica en la pantalla Reviews del panel de administración, y mientras tanto solo la ve su autor. Desactivado, que es como viene, aparece al instante. - Un moderador puede ocultar una reseña; editar una reseña oculta la devuelve a la espera de aprobación. Una reseña que un moderador eliminó ya no se puede editar ni sustituir.
- El personal que puede ver las reseñas recibe una notificación de cada una nueva.
Inscripción y pago
Un estudiante se inscribe en un curso pagándolo. El botón de compra de la página del curso abre un panel de pago, y el carrito paga varios cursos en un solo pago, con un pedido por curso. Para pagar se necesita una cuenta de estudiante: un visitante sin sesión que pulsa pagar es enviado a iniciar sesión.
El estudiante elige tarjeta o PayPal
El panel pregunta a la API qué métodos acepta esta versión (
GET /api/shop/payment-methods), así que nunca ofrece uno que el servidor no pueda gestionar.La API cobra el pago
Con el simulador integrado, el formulario de tarjeta o de PayPal se rellena en el sitio y se liquida al instante. Con Stripe o PayPal configurados, el estudiante es enviado a la propia página del procesador y el pedido queda pendiente.
El estudiante vuelve
El procesador lo devuelve a
/<locale>/checkout/success?order=<reference>o a/checkout/cancelled. La página de éxito confirma el pago y espera hasta que el pedido se liquide.Se concede la plaza
La inscripción solo se crea cuando se confirma el pago: al instante con el simulador y, en otro caso, mediante el webhook del procesador. Después llega un correo con el recibo.
Resultado esperado: El curso aparece en Mis cursos.
- Los cursos gratuitos (precio 0) muestran Free y No payment needed en la tarjeta de precio de la página del curso, y su botón dice Enroll for free. Se abre el mismo panel, sin método de pago ni campos de tarjeta, y su botón también dice Enroll for free. La API completa el pedido sin procesador de pago, así que un curso gratuito funciona incluso sin claves de pago. El estudiante va directo a la página de éxito, el curso es suyo al momento, y el email confirma la inscripción sin recibo.
- Se rechaza la compra de un curso que el estudiante ya tiene, así que nadie paga dos veces.
- Un doble clic o un reintento envía la misma clave de idempotencia, y la API responde con el primer pedido en lugar de volver a cobrar.
- El carrito y la lista de guardados se conservan en el navegador, no en la API.
Terminar un curso
Un curso está terminado cuando se cumplen las dos condiciones:
- Todas las lecciones están hechas, lo que lleva el progreso del estudiante al 100 %.
- Todos los cuestionarios obligatorios están aprobados. Solo cuentan los cuestionarios publicados marcados como obligatorios. Un curso sin cuestionarios obligatorios está terminado cuando lo están sus lecciones.
La API lo comprueba cada vez que el estudiante completa una lección o aprueba un cuestionario. Cuando el curso está terminado, marca la inscripción como completada y emite el certificado por sí sola, y se notifica al estudiante. El reproductor del curso también ofrece el certificado cuando las lecciones están hechas, lo que cubre un curso terminado antes de que se pudiera emitir el certificado. Si queda un cuestionario obligatorio pendiente, se le indica al estudiante que el certificado aún no está listo.
Los certificados aparecen en Certificados en el panel, donde el estudiante imprime uno o comparte su enlace. Cualquiera a quien se muestre un certificado puede comprobar su número en /verify-certificate.
Buscadores y compartir
- Dirección del sitio: define
NEXT_PUBLIC_SITE_URLantes de construir. Los enlaces canónicos, las tarjetas para compartir, el mapa del sitio y los datos estructurados la usan. Si no está definida, recurre ahttp://localhost:3030, lo que hace evidente una dirección incorrecta la primera vez que se comparte. - Mapa del sitio:
/sitemap.xmlincluye las páginas de inicio, cursos, instructores, blog, acerca de, privacidad y términos, además de cada curso publicado, cada perfil de instructor y cada artículo publicado, en cada idioma y con sus traducciones. Se construye en cada solicitud a partir de las mismas lecturas de la API que las páginas, así que un curso publicado en el panel aparece en él al instante. Sin API, los cursos y los instructores salen de los datos de ejemplo y no se incluye ningún artículo. - robots.txt:
/robots.txtpermite todo excepto/api/, el panel y las páginas de inicio de sesión, y apunta al mapa del sitio. - Títulos y tarjetas para compartir: las páginas de inicio, cursos, curso, instructores, instructor, blog, artículo, acerca de, privacidad y términos definen cada una su título y su descripción, una dirección canónica y enlaces
hreflanga sus otros idiomas, mediantebuildPageMetadataensrc/lib/seo/. Las páginas de curso, instructor y artículo añaden su propia imagen. El nombre del sitio, la descripción, el usuario de Twitter (SITE.twitterHandle) y los colores del navegador (SITE.browserChrome) vienen desrc/config/site.ts, y las imágenes para compartir por defecto sonsrc/app/opengraph-image.pngytwitter-image.png. - Datos estructurados: el layout raíz escribe la organización como JSON-LD en cada página.
Dónde cambiar las cosas
Todo está en frontend/src/. Ejecuta el sitio con yarn dev y abre el puerto 3030; cada cambio se recarga.
frontendyarn dev| Para cambiar | Busca en |
|---|---|
| Una página o su dirección | src/app/[locale]/, una carpeta por ruta |
| Lo que muestra una página | src/features/<feature>/: home, courses, instructors, blog, checkout, certificates, auth, y dashboard/<page> para el panel |
| La barra lateral del panel | src/layouts/dashboard/sidebar/config/navigationData.ts |
| El encabezado y el pie de página públicos | src/layout/NavBar/ y src/layout/Footer/ |
| Nombre, descripción, colores, cuentas sociales | src/config/site.ts |
| Idiomas | src/config/locales.ts, más messages/<namespace>/<locale>.json para cada idioma |
| Textos | messages/<namespace>/en.json y ar.json |
| Colores del tema | src/styles/theme-variables.css |
| Llamadas a la API | src/lib/api/<domain>/ |
yarn typecheck y yarn lint comprueban tus cambios; yarn build crea la versión de producción.
Cómo se emiten y verifican los certificados
Incluido con tu compra. Inicia sesión para leerlo o ábrelo en tu descarga.
Cómo decide la API que un curso está terminado, cómo numera y guarda cada certificado, y cómo responde a una verificación.
Clases en vivo dentro del sitio
Incluido con tu compra. Inicia sesión para leerlo o ábrelo en tu descarga.
Cómo entra un estudiante en una clase en vivo: la ventana de apertura de la sala, la solicitud de acceso y la integración de Jitsi Meet.
Cómo encaja el código del sitio
Incluido con tu compra. Inicia sesión para leerlo o ábrelo en tu descarga.
Cómo llegan los datos a una página, cómo funcionan el inicio de sesión y las listas guardadas en el navegador, y los pasos para añadir una página propia.