Coursite es una aplicación web de aprendizaje en línea en donde los alumnos pueden encontrar distintos cursos que los profesores publican, la aplicación fue desarrollada como proyecto escolar con el propósito de comprender la adminsitración de sistemas de información.
Para el desarrollo de esta aplicación se nos planteó el realizar entrevistas con un "cliente" para determinar sus necesidades y en base a estas comenzar a análizar, planear, diseñar el producto y finalmente desarrollarlo.
La aplicación consta de cuatro tipos de usuarios, sin sesión, estudiante, profesor y administrador. Estos usuarios pueden realizar distintas acciones.
- Usuario sin sesión
- Registrarse como profesor o alumno
- Ver los cursos disponibles y sus detalles.
- Estudiante
- Iniciar sesión.
- Editar la información de su perfil.
- Ver los cursos disponibles y sus detalles.
- Comprar cursos.
- Acceder a la información de su curso comprado.
- Ver el progreso de sus cursos.
- Obtener el certificado de sus cursos terminados.
- Ver sus notificaciones.
- Calificar un curso.
- Profesor
- Iniciar sesión.
- Editar la información de su perfil.
- Subir un curso.
- Editar un curso.
- Eliminar un curso.
- Ver sus cursos solicitados.
- Ver sus notificaciones.
- Subir sus documentos.
- Administrador
- Iniciar sesión
- Aprobar o rechazar solicitudes de registro de profesores.
- Aprobar o rechazar solicitudes de publicación de curso.
- Ver todos los cursos.
- Ver los documentos de los profesores.
- Agregar categorías
El Frontend esta hecho con React JS, Redux, Sweet Alert 2 y SCSS. Su funcionamiento se basa en un filtro de vistas basado en el rol del usuario, por ejemplo. Si se detecta una sesión, se obtendrá el rol y si el rol es de alumno, solo permitirá acceder a las vistas del alumno. Desde aquí se hacen peticiones a una API REST desplegada en Heroku y a servicios de Firebase como su base de datos llamada Firestore y a su servicio de Storage para almacenar archivos.
Para el manejo del storage se usó Redux, basando su funcionamiento en los roles de los usuarios, por ejemplo las acciones del alumno, contiene solo las peticiones a la api que solo el usuario de tipo alumno puede realizar.
El uso de Sweet Alert 2 fue implementado solamente para mostrar avisos y confirmaciones de acciones delicadas.
Los estilos fueron realizados con SCSS, esto con el propósito de tener los estilos lo más organizados posibles, basandose en los componentes y vistas de React.
El Backend fue realizado con Spring Boot, Spring Security y Java-JWT. Esta API realiza una conexión a una base de datos de MySQL, creando las tablas si es que no existen, esto con ayuda de JPA, Hibernate y las entidades definidas en las clases el paquete "entity". Los endpoints de la API están protegidos por una autenticación basada en tokens (JWT). Esta autenticación tiene además una autorización basada en los roles de los usuarios. Además al cambiar el status de los profesores la API envía un correo al profesor para avisarle de la situación de su solicitud.
Se diseñó la siguiente base de datos en base a las reglas de negocio del cliente, nos quedaron las siguientes relaciones, donde el usuario en base a su rol tendrá distintas relaciones, por ejemplo. El curso se relacionará a un usuario que tenga el rol de tipo profesor, pues este estaría creando el curso, por otra parte las relaciones de las tablas "course_user" y "course_lesson_user" se formarán cuando el rol del usuario sea de estudiante, pues estaría comprando un curso. Por otra part, sólo el administrador podría cambiar el status de los usuarios de tipo profesor y además agregar más categorías a la plataforma.
Hacer click en el botón "Registrarse"
Se mostrará la siguiente vista:
Llenar el formulario y hacer click en "Registrarse", una vez hecho esto se mostrará la siguiente vista:
Hacer click en el botón "Detalles", se mostrará una vista como la siguiente pero con la información del curso seleccionado:
Estar en la vista "Detalles" o en la vista "Cursos" y hacer click en el botón "Inscribirse", se mostrará la siguiente vista:
Llenar el formulario y hacer click en "Realizar pago", si la compra es exitosa mostrará la siguiente vista:
Estar en la vista "Mi aprendizaje" o "Cursos" y hacer click en el botón "Ir al curso" del curso de interés.
Estando en esta vista, podrá calificar el curso, haciendo click en "Calificar":
Ver la información de contacto con el profesor, haciendo click en "Contacto":
Hacer click en el botón de la foto de perfil:
Se mostrará la siguiente ventana:
Se selecciona la imágen:
Se da click en "subir":
Una vez cambiada la imágen se mostrará el siguiente aviso:
Hacer click en el botón "Editar" del campo a modificar:
Modificar el dato o los datos:
Hacer click en "Actualizar datos" y se mostrará lo siguiente:
Si se cambia el correo, mostrará el siguiente aviso:
Y se cerrará la sesión.
Hacer click en el botón "Actualizar contraseña":
Ingresar la contraseña actual, la nueva contraseña y hacer click en el botón "Guardar":
Hacer click en el botón "Eliminar cuenta":
Hacer click en el botón "Eliminar cuenta" x2, se cerrará la sesión y la cuenta quedará eliminada.
Deben haberse visto todas las lecciones del curso, se mostraría algo así:
Despues deberá ir a la vista "Mi aprendizaje" en la sección de "Certificados":
Una vez aquí se puede descargar directamente o verlo en web haciendo click en "Certificado"
Hacer click en el link "¿Quieres enseñar?"
Se mostrará la siguiente vista:
Llenar el formulario y hacer click en "Registrarse", una vez hecho esto se mostrará la siguiente vista:
En esta parte el profesor deberá subir documentos que acrediten que es capaz de impartir algún curso.
Después se dará click en "Subir" y al subirse el archivo se mostrará la siguiente vista, debe esperara a que un administrador apruebe su solicitud.
Una vez aprobada o rechazada, recibirá un correo electrónico como el siguiente:
Estar en la vista "Mis Cursos" y hacer click en el botón "Nuevo Curso":
Llenar el siguiente formulario:
Una vez llenado el formulario, antes de hacer click en "Guardar" se deben agregar unidades y lecciones.
Al hacer click en "Agregar unidad" se mostrará lo siguiente:
Se llena el formulario:
Se da click en "Agregar unidad" y se mostrará lo siguiente:
Todas las unidades deben tener al menos una lección, por lo tanto se hará click en el botón verde de agregar:
Se llena el formulario:
Y se da click en "Agregar lección":
Después se da click en "Guardar" y se mostrará el siguiente aviso:
Y en la lista de cursos se mostrará el curso agregado:
