Home
ITA Challenges és una aplicació de la plataforma educativa IT Academy, dissenyada perquè els alumnes accedeixin a reptes de programació, participin en activitats educatives i segueixin el seu progrés, amb la finalitat de millorar les seves habilitats de programació. Desenvolupada pels Desenvolupadors Junior de la IT Academy, l'aplicació ofereix una interfície intuïtiva i eficient.
Aquesta eina està dirigida a desenvolupadors i altres professionals de la comunitat IT Academy, incloent-hi alumnes que busquen perfeccionar les seves habilitats i mentors que proporcionen orientació i feedback. ITA Challenges fomenta l'aprenentatge continu i el desenvolupament tècnic a través de reptes estructurats per nivells de dificultat i tipus de llenguatge.
Per a més detalls sobre els aspectes funcionals de l'aplicació, estan detallats en el següent enllaç: Disseny a Figma.
A la pàgina de reptes, l'usuari pot accedir al llistat de reptes. Aquests es poden filtrar al menú lateral per:
- Llenguatge: Javascript, Java, Python i PHP.
- Dificultat: Fàcil, Mitjà i Difícil.
- Progrés: No començats, Manca completar i Completats.
Aquest llistat també es pot ordenar per popularitat o data.
En fer clic a un repte, s'accedeix al detall d'aquest. Hi ha quatre pestanyes:
- Detalls: Es mostra l'explicació del repte. Quan s'ha fet login es mostra un editor de codi i mitjançant un botó de verificació es mostra o s'amaga el text explicatiu.
- Solucions: Es mostren solucions d'altres usuaris a aquest mateix repte.
- Recursos: S'ofereixen recursos que poden ajudar a la resolució del repte.
- Relacionat: Es mostren altres reptes amb característiques similars.
Per poder enviar la solució del repte s'ha de fer login o registrar-se si no s'ha fet prèviament.
Per poder veure les solucions del repte d'altres participants l'usuari ha d'haver enviat prèviament la solució d'aquest repte.
Els procediments per dur a terme la instal·lació estan detallats en el següent enllaç.
Entre les principals eines i dependències utilitzades es troben les següents:
- Angular CLI versió 17.1.2.
- Node.js versió 20.10.0.
- npm versió 10.2.3.
- TypeScript versió 5.2.2.
- Bootstrap versió 5.2.3.
- Codemirror versió 6.0.1.
- Ngx-cookie-service versió 17.1.0.
- Jest versió 29.5.0.
Per a més detalls sobre les dependències específiques i les seves versions, consulta l'arxiu package.json del projecte.
Les directrius de codificació per al projecte ITA Challenges es troben detallades a l'arxiu GUIDELINES_CA.md.
En la gràfica següent es detallen els elements que conformen l'aplicació:
Aquest projecte es basa en una arquitectura de components. Cada component té la seva pròpia responsabilitat i pot ser reutilitzat en diferents parts del projecte. Es descriuen els més rellevants per al projecte.
El StarterComponent es troba al fitxer starter.component.ts. És responsable de la funcionalitat inicial de l'aplicació i maneja la lògica principal de la pàgina d'inici.
Funcionalitat
El StarterComponent s'encarrega de la gestió dels reptes (challenges) a l'aplicació. Aquest component interactua amb el servei StarterService per obtenir els reptes i manejar la paginació dels mateixos.
A més, aquest component també maneja la funcionalitat de filtrat dels reptes. Els filtres es manegen a través del component FiltersModalComponent, que s'obre quan s'invoca el mètode openModal().
El component ChallengeComponent es troba al fitxer challenge.component.ts. S'encarrega de manejar i presentar els detalls d'un repte específic a l'aplicació.
Funcionalitat
El propòsit principal del ChallengeComponent és carregar i mostrar els detalls d'un repte específic. Això inclou informació com el títol del repte, la data de creació, el nivell de dificultat, els detalls del repte, les solucions proposades i els llenguatges de programació permesos per al repte.
El component ChallengeCardComponent es troba al fitxer challenge-card.component.ts. S'utilitza per mostrar la informació d'un repte en una targeta.
Funcionalitat
El component ChallengeCardComponent s'utilitza per mostrar la informació d'un repte en una targeta en el lloc de l'aplicació on es necessiti. Cada targeta conté el títol del repte, els llenguatges de programació associats, la data de creació, el nivell de dificultat i la popularitat del repte. En fer clic en una targeta, l'usuari és redirigit a la pàgina de detalls del repte corresponent.
El component ChallengeInfoComponent es troba al fitxer challenge-info.component.ts. Aquest component és part del mòdul de reptes i s'utilitza per mostrar informació detallada sobre un repte específic.
Funcionalitat
El component ChallengeInfoComponent s'utilitza per mostrar informació detallada sobre un repte específic. Això inclou la descripció del repte, exemples, notes, popularitat, llenguatges de programació permesos i solucions. A més, permet a l'usuari enviar una solució al repte i veure els reptes relacionats.
A continuació es representa l'estructura i disposició dels components clau de l'aplicació:
En la gràfica següent es detallen els serveis que conformen l'aplicació:
JwtInterceptor implementa la interfície HttpInterceptor d'Angular. S'utilitza per interceptar i potencialment modificar les sol·licituds HTTP a l'aplicació. Obté el token d'autenticació de TokenService i verifica si la URL de la sol·licitud es correspon amb la definida a l'entorn. Si ambdues condicions es compleixen, envia la sol·licitud sense modificacions.
S'utilitza l'API Web Crypto per encriptar i desencriptar cookies. Quan s'executa, genera una clau secreta utilitzant la contrasenya proporcionada a l'entorn i la guarda. Els seus mètodes són els següents:
-
generateSecretKey: Genera una clau secreta utilitzant l'algoritme PBKDF2 i la retorna. La clau es deriva de la contrasenya proporcionada, utilitzant un hash SHA-256 i 1000 iteracions.
-
setSecureCookie: Encripta el valor de la cookie utilitzant la clau secreta i l'algoritme AES-GCM, i després guarda la cookie encriptada. El valor encriptat es converteix en una cadena utilitzant la funció btoa abans de ser emmagatzemat.
-
getSecureCookie: Obtè la cookie encriptada, la desencripta utilitzant la clau secreta i l'algoritme AES-GCM, i després retorna el valor original de la cookie.
-
Manté el repositori de reptes de programació i permet als usuaris aportar i validar solucions als reptes proposats.
-
Proporciona recursos de programació en diferents llenguatges.
-
Gestió d'usuaris.
Per obtenir detalls sobre les proves del projecte ITA Challenges, es pot revisar el fitxer README.md.
Troba instruccions detallades sobre com desplegar l'aplicació ITA Challenges al fitxer README.md.
Explora respostes a preguntes freqüents sobre el projecte ITA Challenges al fitxer README.md.