Ce projet offre une solution simple et performante afin de regrouper et automatiser la gestion des utilisateurs et des associations de manière centralisée.
L'application permet :
-
Côté Back-end :
- Gestion des utilisateurs : création, récupération, listing, mise à jour et suppression.
- Gestion des associations : création, récupération, listing, mise à jour et suppression.
-
Côté Front-end :
- Authentification des utilisateurs via un formulaire de connexion.
- Accès aux profils utilisateurs avec mise à jour des informations personnelles.
- Consultation et modification des associations et des utilisateurs.
- Recherches ciblées par ID ou par Nom.
- Création, modification et suppression des utilisateurs et des associations.
- Gestion des rôles des membres au sein des associations.
- Framework : Angular
- Bibliothèques supplémentaires :
- Angular Forms pour les formulaires réactifs.
- Angular Router pour la navigation.
- HttpClient pour les requêtes API.
- Angular Materials pour créer des UI modernes et responsives.
- Page de connexion :
- Authentification des utilisateurs avec un formulaire réactif.
- Gestion des redirections pour les utilisateurs connectés.
- Récupération de l'access Token
- Gestion des profils :
- Consultation et modification des informations personnelles.
- Listing :
- Affichage des utilisateurs et des associations.
- Consultation de fiches :
- Affichage d’informations détaillées sur un utilisateur (associations liées).
- Affichage d’informations sur une association (membres avec leurs rôles, minutes).
- Recherches ciblées :
- Rechercher un utilisateur ou une association par son ID ou son Nom.
- Gestion :
- Création, modification et suppression d’utilisateurs et d’associations.
- Modification des rôles au sein des associations.
- Création et listing des minutes au sein des associations.
L'application suit une architecture modulaire organisée autour de modules principaux, chacun ayant des responsabilités spécifiques (authentification, gestion des utilisateurs, gestion des associations, etc.). La structure est conçue pour garantir la maintenabilité, la clarté et la réutilisabilité du code.
- Modules: Ils encapsulent des fonctionnalités spécifiques (par exemple, Auth Module pour la gestion de l'authentification).
- Components: Reliés aux templates via des métadonnées, ils gèrent la logique de l'interface utilisateur et la liaison de données.
- Services: Ils sont injectés dans les composants pour fournir des fonctionnalités communes et gérer les interactions avec l'API backend.
- Data Binding: Le schéma met en évidence les mécanismes de liaison :
- Property Binding: Pour afficher les données dynamiques dans le DOM.
- Event Binding: Pour gérer les interactions utilisateur et propager les événements.
-
Voir le fichier Readme de la partie Back
-
Pour accéder à la documentation API : http://localhost:3000/api
-
Cloner le dépôt :
git clone https://gitlab2.istic.univ-rennes1.fr/aelanouar/projet-web-front cd projet-web-front -
Installer les dépendances :
npm install
-
Installer
Materials:ng add @angular/material
-
Lancer l’application :
ng serve
-
Accéder à l’application : http://localhost:4200
-
Pour lancer les tests :
ng testNous avons implémenté quelques tests pour certains composants.
- Angular a été sélectionné pour ses outils performants tels que les formulaires réactifs et la gestion avancée des routes.
- Une architecture modulaire a été adoptée pour garantir la maintenabilité et l'évolutivité du code.
- HttpClient est utilisé pour simplifier et gérer les interactions avec le backend.
- Une garde d'authentification est mise en place pour sécuriser l'accès aux pages sans authentification.