ITA Challenges Frontend [Castellano]
ITA Challenges es una aplicación de la plataforma educativa IT Academy, diseñada para que los alumnos accedan a retos de programación, participen en actividades educativas y sigan su progreso, con el propósito de mejorar sus habilidades de programación. Desarrollada por Juniors Developers de IT Academy, la aplicación ofrece una interfaz intuitiva y eficiente.
Esta herramienta está dirigida a desarrolladores y otros profesionales de la comunidad IT Academy, incluyendo a alumnos que buscan perfeccionar sus habilidades y a mentores que proporcionan orientación y feedback. ITA Challenges fomenta el aprendizaje continuo y el desarrollo técnico a través de retos estructurados por niveles de dificultad y tipo de lenguaje.
Para más detalles sobre los aspectos funcionales de la aplicación, están detallados en el siguiente enlace: Diseño en Figma.
En la página de retos, el usuario puede acceder al listado de retos. Estos se pueden filtrar en el menú lateral por:
- Lenguaje: Javascript, Java, Python i PHP.
- Dificultad: Fácil, media y difícil.
- Progreso: No empezados, Falta completar y Completados
Este listado también se puede ordenar por popularidad o fecha.
Al clicar un reto se accede al detalle de este reto. Hay cuatro pestañas:
-
Detalles: Se muestra la explicación del reto. Cuande se ha hecho login se muestra un editor de código y mediante un botón de check se muestra o se esconde el texto explicativo.
-
Soluciones: Se muestran soluciones de otros usuarios a este mismo reto.
-
Recursos: Se ofrecen recursos que pueden ayudar a la resolución del reto.
-
Relacionado: Es muestren otros retos con características similares.
Para poder enviar la solución del reto se ha de hacer login o registrarse si no se ha hecho previamente.
Para poder ver las soluciones del reto de otros participantes el usuario ha de haber enviado previamente la solución de este reto.
Los procedimientos para llevar a cabo la instalación están detallados en el siguiente enlace.
Entre las principales herramientas y dependencias utilizadas se encuentran las siguientes:
- Angular CLI versión 17.1.2.
- Node.js versión 20.10.0.
- npm versión 10.2.3.
- TypeScript versión 5.2.2.
- Bootstrap versión 5.2.3.
- Codemirror versión 6.0.1.
- Ngx-cookie-service versión 17.1.0.
- Jest versión 29.5.0.
Para más detalles sobre las dependencias específicas y sus versiones, consulta el archivo package.json del proyecto.
Las directrices de codificación para el proyecto ITA Challenges se encuentran detalladas en el archivo GUIDELINES_ES.md.
En el siguiente gráfico se detallan los elementos que conforman la aplicación:
Este proyecto se basa en una arquitectura de componentes. Cada componente tiene su propia responsabilidad y puede ser reutilizado en diferentes partes del proyecto. Se describen los más relevantes para el proyecto.
El StarterComponent se encuentra en el archivo starter.component.ts. Es responsable de la funcionalidad inicial de la aplicación y maneja la lógica principal de la página de inicio.
Funcionalidad
El StarterComponent Se encarga de la gestión de los desafíos (challenges) en la aplicación. Este componente interactúa con el servicio StarterService para obtener los desafíos y manejar la paginación de los mismos.
Además, este componente también maneja la funcionalidad de filtrado de los desafíos. Los filtros se manejan a través del componente FiltersModalComponent, que se abre cuando se invoca el método openModal().
El componente ChallengeComponent se encuentra en el archivo challenge.component.ts. Se encarga de manejar y presentar los detalles de un desafío específico en la aplicación.
Funcionalidad
El propósito principal de ChallengeComponent es cargar y mostrar los detalles de un desafío específico. Esto incluye información como el título del desafío, la fecha de creación, el nivel de dificultad, los detalles del desafío, las soluciones propuestas y los lenguajes de programación permitidos para el desafío.
El componente ChallengeCardComponent se encuentra en el archivo challenge-card.component.ts. Se utiliza para mostrar la información de un desafío en una tarjeta.
Funcionalidad
El componente ChallengeCardComponent se utiliza para mostrar la información de un desafío en una tarjeta en el lugar de la aplicación donde se necesite. Cada tarjeta contiene el título del desafío, los lenguajes de programación asociados, la fecha de creación, el nivel de dificultad y la popularidad del desafío. Al hacer clic en una tarjeta, el usuario es redirigido a la página de detalles del desafío correspondiente.
El componente ChallengeInfoComponent se encuentra en el archivo challenge-info.component.ts. Este componente es parte del módulo de desafíos y se utiliza para mostrar información detallada sobre un desafío específico.
Funcionalidad
El componente ChallengeInfoComponent se utiliza para mostrar información detallada sobre un desafío específico. Esto incluye la descripción del desafío, ejemplos, notas, popularidad, lenguajes de programación permitidos y soluciones. Además, permite al usuario enviar una solución al desafío y ver los desafíos relacionados.
A continuación se representa la estructura y disposición de los componentes clave de la aplicación:
En el siguiente gráfico se detallan los servicios que conforman la aplicación:
JwtInterceptor implementa la interfaz HttpInterceptor de Angular. Se utiliza para interceptar y potencialmente modificar las solicitudes HTTP en la aplicación. Obtiene el token de autenticación de TokenService y verifica si la URL de la solicitud se corresponde con la definida en el entorno. Si ambas condiciones se cumplen, envía la solicitud sin modificaciones.
Se utiliza API Web Crypto para encriptar y desencriptar cookies. Cuando se ejecuta, genera una clave secreta utilizando la contraseña proporcionada en el entorno y la almacena. Sus métodos son los siguientes:
-
generateSecretKey: Genera una clave secreta utilizando el algoritmo PBKDF2 y la devuelve. La clave se deriva de la contraseña proporcionada, utilizando un hash SHA-256 y 1000 iteraciones.
-
setSecureCookie: Encripta el valor de la cookie utilizando la clave secreta y el algoritmo AES-GCM, y luego guarda la cookie encriptada. El valor encriptado se convierte en una cadena utilizando la función btoa antes de ser almacenado.
-
getSecureCookie: Obtiene la cookie encriptada, la desencripta utilizando la clave secreta y el algoritmo AES-GCM, y luego devuelve el valor original de la cookie.
-
Mantiene el repositorio de retos de programación y permite a los usuarios aportar y validar soluciones a los retos propuestos.
-
Proporciona recursos de programación en diferentes lenguajes.
-
Gestion de usuarios.
Para obtener detalles sobre las pruebas del proyecto ITA Challenges, se puede revisar el archivo README.md.
Encuentra instrucciones detalladas sobre cómo desplegar la aplicación ITA Challenges en el archivo README.md.
Explora respuestas a preguntas frecuentes sobre el proyecto ITA Challenges en el archivo README.md.