morganholsters / dev-web-3-2024

Projet Dev Web 2024

Dev-Web-2024

Template de repo pour le projet Dev Web 2023

Comment copier ce Wiki? Pour récupérer le template et l'utiliser dans le cadre de votre projet, vous allez devoir faire un "fork" de ce repo. Cependant, le wiki n'est pas copié automatiquement. Suivez donc la procédure ci-dessous :

Créez un fork de ce repository. Ce sera votre repo de projet, avec une URL de type https://github.com//.

Créez un wiki dans ce nouveau repo, avec une Home page vide par exemple.

Clonez le repo git du wiki original sur votre machine : git clone https://github.com/EphecLLN/Dev-Web-2024.wiki.git

Pour "pousser" le wiki présent sur votre machine vers votre repository de projet, vous allez changer le pointeur "remote" de votre copie locale : git remote add fork https://github.com//.wiki.git

Forcez à présent la copie du wiki sur votre machine vers votre repository de projet. Cela écrasera le wiki vide que vous aviez créé plus tôt avec le template : git push -f fork master Utilisation

Il vous est demandé de respecter la table des matières du projet, afin que les enseignants puissent facilement retrouver les informations qu'ils cherchent. Si vous souhaitez effectuer un changement dans sa structure, parlez-en d'abord avec votre coach.

Si vous trouvez que les pages sont trop longues, vous pouvez en créer de nouvelles, mais vous devez alors vous assurez que les liens sont mis à jour dans la table des matières.

dev-web-3-2024's Issues

Accès à certaines pages en fonction des cookies de session générés

En tant qu'admin du site, je souhaite que mes utilisateur n'accèdent pas aux pages m'étant réservées ou aux pages de contenu si ces derniers ne sont pas des utilisateurs valides, pour que seul les fonctions primaires du site leur soit disponible et que seuls mes utilisateurs puissent profiter des fonctionnalités.

Ajout DB nouvel utilisateur

Ajout dans la DB d'un nouvel utilisateur
En tant qu'admin du site, je souhaite une automatisation inscrire mon nouvel utilisateur dans ma DB, afin d'être sur d'être à jour sur le nombre de mes utilisateurs

Connexion avec compte existant

Connexion si compte existant
En tant qu'utilisateur possédant un compte valide, je souhaite pouvoir me connecter à la plateforme, afin de pouvoir bénéficier des fonctionnalités qu'elle propose

Attribuer cookies de session à chaque connexion

En tant qu'utilisateur, je souhaite obtenir un cookie de session à chaque connexion, pour valider auprès du site que je suis bien connecté et avec quel compte.

page d'accueil

En tant qu'utilisateur, je dois pouvoir arriver sur une page d'accueil et pouvoir soit me connecter soit m'inscrire

Pour valider cette US, il faut :

• Que l'utilisateur puisse naviguer entre différents onglets (inscription, connexion et page d'accueil)
• Les routes doivent être correctement définies pour arriver sur les bonnes pages

Création formulaire permettant inscription

Inscription par formulaire
En tant que nouvel utilisateur, je souhaite pouvoir m'inscrire en encodant mes informations personnelles, afin de bénéficier d'un compte utilisateur sur la plateforme voulue

Pour valider cette US, il faut :

• Que les champs requis soient présents et obligatoirement complétés (en accord avec les valeurs attendues par la DB)
• Qu'en cas de non respect des consignes cités au-dessus, l'utilisateur ne puisse pas valider le formulaire
• Des règles pour vérifier la longueur des champs et leur type.

Pour réaliser cette tâche, j'ai utilisé MySQL et son Workbench 8.0 CE. J'ai créé une table users comprenant ces colonnes,

Autres US liées :

• Ajout DB nouvel utilisateur #3
• Connexion avec compte existant #1

Cette US fut des plus urgentes à implémenter car c'est sur elle que repose la possibilité d'obtenir des utilisateurs.
Pour l'implémenter j'ai dû suivre des formations openLab pour m'initier aux concepts de frontend et backend, en plus des nombreux forums visités pour acquérir toute la connaissance nécessaire.

ajouter de la navigation entre les différentes pages

En tant qu'utilisateur, je dois être capable de naviguer entre les différentes pages du site

Déconnexion compte utilisateur

Déconnexion
En tant qu'utilisateur, je souhaite pouvoir me déconnecter de mon compte, afin que quiconque possédant mon appareil puisse y accéder

Possibilité aux utilisateurs d'enrichir la Newsletter

1.Description

En tant qu'utilisateur, je veux pouvoir consulter et agrémenter la newsletter, afin de participer activement au contenu que propose l'application

Une fois un utilisateur correctement authentifié auprès du site, ce dernier aura la possibilité d'observer les posts des autres utilisateurs, de lui-même en ajouter et de supprimer le sien.

Tout se fait avec cette fonctionnalités de Newsletter commune pour tous les utilisateurs.

Cette dernière est renseigné dans la DB et des endpoints spécifiques permettent de l'enrichir ou de visualiser son contenu.

Les US listés dans le point 5 sont celles nécessaires pour profiter de cette fonctionnalité et celles qui l'enrichissent.

2.Schéma et captures

Une fois connecté, l'utilisateur pourra choisir la fonctionnalité souhaitée entre la prise de rendez-vous, accéder à la newsletter et accéder à son compte.

Après avoir sélectionner la Newsletter, l'utilisateur arrivera sur cette écran lui permettant de consulter toutes les publications.

Normalement, seul l'admin devait être capable de publier quelque chose et les utilisateurs ne pouvait que la visualiser.

Mais pour rendre la communauté plus active, l'idée a été de permettre aux utilisateurs possédant un compte d'enrichir cette newsletter, en postant et supprimant des publications.

Pour ne pas qu'il y ait de mauvaises dérives, les publications devront être soumises par formulaire et l'admin pourra les valider ou refuser. Ce qui les ajoutera aux publications visibles ou non.

Actuellement la DB contient la table User qui permet d'enregistrer et d'authentifier un utilisateur, ainsi qu'une table posts qui contient l'intégralité du contenu de la newsletter.

On peut retrouver le cookie de connexion en appuyant sur "F12" et en allant dans "Application" puis "storage" => "local storage"

Sur Postman, les requêtes POST se font en "RAW" et de type "JSON" avec la bonne route

Pour supprimer un poste spécifique changer le type de requête par "DELETE" et ajouter l'id du post à supprimer pour atteindre le bon endpoint

Pour visualiser le contenu de la newsletter, faites une requête GET. Cela déclenchera la méthode "fetchAll()" et sélectionnera tout le contenu de la table posts.

3.Critères de validation

• Un utilisateur doit pouvoir s'enregistrer et se connecter au site
• Cet utilisateur doit recevoir un cookie de session permettant de l'authentifier
• L'utilisateur, en accédant à des endpoints spécifiques est capable de visualiser la newsletter
• De créer un poste qui s'enregistre dans la base de données
• De supprimer sa publication
• Dans le cas où un utilisateur n'est pas connecté, il lui est impossible d'accéder aux ressources de la DB et donc de visualiser, ajouter ou supprimer du contenu
• Des cas d'erreurs ont été couverts et renseigne l'utilisateur si il est connecté ou non

4.Informations techniques

Il faut envoyer des données valides sinon la requête Postman tournera dans le vide. Des règles ont été définis à savoir un "title" de minimum 5 caractères et un "body" de minimum 10 caractères. Aucun de ces champs, y compris id, ne peuvent être null

Pour tester le bon fonctionnement de cette US, Postman a été utilisé. Il est important de préciser que pour avoir un test concluent, il faut renseigner dans la section header un nouvelle ligne

Authorization                 Bearer <token de connexion>

Sans quoi, une erreur "jwt must be provided" sera retourné.

Actuellement un utilisateur correctement connecté peut supprimer du contenu ne lui appartenant pas. Cela sera corrigé ultérieurement.

Tests

Ce commit vous amène aux trois fichiers de tests permettant de vérifier les bons déroulement des méthodes et leurs cas d'erreurs. Ont été testé, les controllers auth.js ainsi que posts.js et le middleware auth.js.

Les tests ont été opérés avec Jest pour un total de 18 tests.

Chaque fichier de test se trouve dans la même directory que le fichier dont il teste les méthodes.

Ils ont tous la même convention de nommage à savoir l'extension "test.js" exemple, "auth.test.js".

Pour lancer les codes, la commande "npx jest" suffit. Cette commande va rechercher dans le répertoire tous les fichiers comportant l'extension que Jest reconnaît comme fichier de test.

55a323f

5.US associés

US pré requises

Création d'un formulaire permettant l'inscription

Ajout d'un utilisateur fraîchement enregistré dans la DB

Connexion avec un compte utilisateur existant

Attribuer un cookie de session à chaque nouvelle connexion

US liées par les fonctionnalités

Permettre l'accès à des pages spécifiques en fonction du cookie de session possédé (non implémentée)

Garder en mémoire les cookies de connexion (non implémentée)