TP4 - Post Hub (25%)

📝 Consignes

• 👥 Le TP est fait en équipe de deux imposée.
• 📦 Le projet client utilise le framework Angular et le projet serveur utilise le framework ASP.NET Core. (Projets de départ fournis)
• 👀 Attention au plagiat
• 🖥 Il faudra respecter la structure existante dans les deux projets.
• ⏰ Attention, il y a une remise partielle pour la partie C. (26 novembre 12h pour le groupe de Maxime, 27 novembre 17h pour le groupe de Mathieu)
• 📬 La remise est le 11 décembre à 23h59.

astuce

Pendant le TP, ne vous cassez jamais la tête à régler les conflits de merge pour les migrations. Faites simplement une nouvelle migration dans chaque nouvelle branche.

danger

Si votre travail est suspecté de plagiat (code copié d'un(e) autre étudiant(e), code généré par IA, notions non abordées en classe, etc.), deux choses peuvent se produire :

• Le plagiat est prouvé par nos outils : Note de 0, automatiquement.
• Le plagiat est plutôt évident, mais une validation est requise : vous serez convoqué(e) au bureau de votre enseignant(e). Vous devrez répondre à certaines questions pour prouver que vous comprenez et maîtrisez le code qui a été utilisé dans votre TP. Si vous ne réussissez pas à répondre à certaines questions, vous aurez la note de 0. (Si vous ne comprenez pas votre propre code, c'est que vous avez plagié, d'une manière ou d'une autre.)

📦 Projets de départ

Les projets Angular + ASP.NET Core sont fournis pour ce TP.

Une application qui sert de multi-forums de discussion vous est fournie. Vous devrez ajouter des fonctionnalités à l'application, principalement pour la gestion d'images et de rôles.

En résumé, l'application contient des hubs, des posts et des commentaires.

• Un hub contient des posts sur un thème commun et un post contient des commentaires.
• On peut répondre à un commentaire avec des sous-commentaires à l'infini.

Ci-dessous, on peut voir un post avec plusieurs commentaires :

📜 Résumé des fonctionnalités

👥 Chaque équipe aura un membre hot-dog 🌭 et un membre trottinette 🛴. Vous serez évalués séparément pour la plupart des fonctionnalités. Vous êtes obligés d'implémenter seulement vos propres fonctionnalités, telles que listées ci-dessous.

🔍 Ceci n'est qu'un résumé des fonctionnalités, vérifiez les énoncés par membre pour avoir tous les détails et indices.

Membre 🌭	Membre 🛴
Étape A-🌭🛴 Décidez quel membre sera 🛴 et quel membre sera 🌭. Si votre partenaire est absent(e), vous êtes obligé(e) de choisir seul(e) pour pouvoir commencer le travail dès maintenant.
Étape B-🌭🛴 Suivez les étapes dans les notes de cours sur Git : Créez un repo de départ avec les deux projets. Ajoutez l'autre membre et l'enseignant(e) en collaborateur. Créer la branche dev. Il faudra créer une nouvelle branche individuelle pour chaque étape du TP. Il faudra effectuer un merge une fois chaque étape terminée.
Étape C-🌭 Lorsqu’on crée un commentaire, on doit être capable d’y joindre de zéro à plusieurs images.	Étape C-🛴 Lorsqu’on crée un post, on doit être capable d’y joindre de zéro à plusieurs images.
🛑 HALTE ! Au plus tard le 26 novembre 12h pour le groupe de Maxime ou le 27 novembre 17h pour le groupe de Mathieu, vous devez, à deux, vous présenter en classe et prendre 5 minutes pour montrer les étapes A, B et C à l'enseignant(e). Si vous ne le faites pas, il y aura une pénalité de 25%. Il n'y a rien à préparer pour la présentation, à part le TP. Si à cette date votre partenaire est absent(e), vous pouvez présenter votre partie seul(e) pour ne pas avoir la pénalité.
Étape D-🌭 Les utilisateurs doivent pouvoir choisir un avatar personnalisé. Il est affiché à côté de leurs commentaires. (Mais pas dans le message principal d’un post) L’avatar peut être changé à tout moment.	Étape D-🛴 Si un post (commentaire principal d’un post) contient plus de 4 images, les images sont affichées avec un carrousel glidejs plutôt qu’en simple rangée. Les commentaires d’un post n’ont jamais de carrousel.
Étape E-🌭 Cliquer sur une image doit permettre de l’afficher en pleine taille, dans un autre onglet.	Étape E-🛴 Lorsqu’on modifie un commentaire ou un post, on doit pouvoir ajouter une ou plusieurs images supplémentaires en même temps de modifier le texte. (Les anciennes images du commentaire, s’il y en avait, sont préservées)
Étape F-🌭 On doit pouvoir supprimer les images d’un commentaire / post, individuellement.	Étape F-🛴 Lorsqu’on supprime un commentaire ou un post, toutes ses images doivent être supprimées.
Étape G-🌭 Les utilisateurs peuvent signaler (Report) les commentaires / posts des autres utilisateurs.	Étape G-🛴 Les utilisateurs doivent pouvoir se connecter en utilisant leur nom d’utilisateur OU leur adresse courriel. (Plutôt que seulement leur nom d’utilisateur) Les utilisateurs doivent pouvoir changer leur mot de passe.
Étape H-🌭 Un rôle modérateur existe. Les modérateurs peuvent voir la liste des commentaires signalés. Ils peuvent supprimer les commentaires de leur choix via cette liste. Un utilisateur avec le rôle modérateur est ajouté dans le seed.	Étape H-🛴 Un rôle administrateur existe. Les administrateurs peuvent ajouter le rôle modérateur à des utilisateurs. Un utilisateur avec le rôle administrateur est ajouté dans le seed.
Étape I-🌭🛴 S’assurer que les critères communs (Voir grille de correction) sont respectés. S’assurer que tout a été merge dans dev, puis dans main. S’assurer que tout fonctionne.

✅ Grille de correction

Membre 🌭 (30 pts)

Critère	Points
On peut ajouter des images lorsqu’on crée un commentaire et les voir ensuite.	8 pts
Les utilisateurs peuvent choisir un avatar (et le prévisualiser) et le modifier à volonté.	4 pts
Toute image (sauf les avatars) peut être cliquée pour être affichée en grand dans un nouvel onglet.	2 pts
Les images des posts et des commentaires peuvent être supprimées individuellement par l’auteur.	6 pts
Les posts / commentaires des autres utilisateurs peuvent être signalés si on est connecté.	4 pts
Le rôle de modérateur existe, permet de supprimer des commentaires signalés et présente un utilisateur avec le rôle dans le seed.	6 pts

Membre 🛴 (30 pts)

Critère	Points
On peut ajouter des images lorsqu’on crée un post et les voir ensuite.	8 pts
Les images d’un post sont affichées dans un carrousel à 5 images ou plus.	4 pts
La modification de post / commentaire permet d’ajouter des images.	6 pts
Supprimer un post ou un commentaire supprime ses images.	3 pts
La connexion fonctionne avec le nom d’utilisateur et le courriel.	1 pt
On peut modifier son mot de passe à volonté.	2 pt
Le rôle d’administrateur existe, permet de nommer des modérateurs et présente un utilisateur avec le rôle dans le seed.	6 pts

Commun (20 pts)

Critère	Points
Sécurité sur le serveur (Aucune action ne peut être exécutée par un utilisateur qui n’en a pas le droit) Ceci touche les objets qui ne peuvent être modifiés que par leur auteur et les opérations qui ne peuvent être utilisées que par les modérateurs / administrateurs. Cela touche aussi à des choses plus subtiles comme ne pas pouvoir signaler son propre commentaire.	4 pts
Fausse sécurité sur le client Angular. (Aucun bouton permettant de faire une action qu’on n’a pas le droit de faire ne doit être VISIBLE dans les pages Web.)	2 pts
L’architecture du projet serveur respecte les lignes directrices vues dans les notes de cours. (Les contrôleurs n’ont pas accès au DbContext, usage de Models et de DTOs au besoin, etc.) De plus, sur le serveur, évitez la répétition de code dans la mesure du raisonnable.	2 pts
Toute image supprimée / remplacée dans la BD doit être supprimée du disque également.	1 pt
L’architecture du projet client respecte les lignes directrices du cours. (Pas de requête avec HttpClient dans un composant, usage de Models, services, composants, etc.)	1 pt
Git a été utilisé de manière appropriée, c’est-à-dire : Une branche dev a été créée et elle a seulement été merge dans main à la toute fin du TP. Une branche a été créée à partir de la branche dev pour chaque étape / fonctionnalité pour limiter les conflits avec son coéquipier. ⛔ Le français est évalué dans les messages des commits. Les titres et les descriptions des commits sont présents, appropriés et clairs.	1 pt 3 pts 5 pts 1 pt
Des fonctionnalités qui étaient déjà implémentées se sont mises à ne plus fonctionner.	-10 pts
L'interface est déformée ou ne correspond pas grossièrement aux exemples illustrés dans l'énoncé.	-5 pts
La présentation des étapes A à C n'a pas été faite.	-12.5 pts

📶 Liste des requêtes pour référence

🔍 Composants mélangeants

PostComponent

PostComponent est utilisé pour afficher un post en entier.

---

EditPostComponent

EditPostComponent est utilisé pour créer un nouveau post. Il est accessible si on clique sur « Nouveau post » dans un hub.

---

CommentComponent

CommentComponent est utilisé pour chaque commentaire qui ne soit pas le message principal d'un post.

---