# Création d'une appli Web pour lister les cadeaux souhaités par Louisa pour Noël ou son anniversaire ## Introduction L'idée première était de centraliser les cadeaux que souhaitait Louisa, afin d'éviter les doublons et ne pas en oublier. ## Architecture du module ``` wishlist ├── ... ├── node_modules │ ├── Tous les modules Node nécessaires à l'application (express, ...) ├── public │ ├── styles.css (feuilles de style globales de l'appli) ├── views │ ├── index.hbs (page principale affichant la liste des cadeaux) │ ├── offrant.hbs (choix de la personne qui offre le cadeau) │ ├── presence.hbs (juste une page qui affiche ceux qui seront présents à l'anniv de Loulou) │ ├── reservation.hbs (saisie des infos complémentaires sur le cadeau -a-t-il été acheté ? Pour quelle occasion ? ...-) │ ├── votre-vote.hbs (écran résultat suite aux réponses des invités de Louisa pour son anniv') ├── .env (variables globales pour la BDD) ├── donnees.sql (export des données à date) ├── package-lock.json ├── package.json ├── README.md (le présent fichier) ├── schema.sql (structure de la BDD) ├── wishlist.js (fichier principal avec le code Node JS) ``` ## Installation des dépendances Exemple de commande : ```bash npm install bcrypt ``` ## Description des différents écrans ### index Cet écran permet d'afficher la liste des cadeaux en BDD, et toutes les infos liées à chaque cadeau (s'il est réservé, par qui, le prix du produit, sa photo, ...). Pour chaque cadeau non encore réservé, un bouton permet d'effectuer la réservation. #### Accès à l'écran Page d'accueil du site #### Contrôles mis en place Aucun. #### Actions effectuées depuis cet écran * Au clic sur le lien hypertexte pour chaque produit, l'utilisateur est redirigé vers une nouvelle page qui présente les infos du produit. * Au survol de la vignette, la photo du produit est affichée en plus grand. * Au clic sur le bouton "Le réserver", chainage vers la page "offrant" ------------------------------------------------- ### offrant Dans cet écran, l'utilisateur sélectionne son nom pour indiquer qu'il souhaite réserver le cadeau. #### Accès à l'écran * Depuis la liste des cadeaux #### Contrôles mis en place Aucun. #### Actions effectuées depuis cet écran * L'utilisateur clique sur le bouton qui correspond à son nom. * Ensuite, il est redirigé vers la page "reservation". ------------------------------------------------- ### presence Ecran qui liste tous ceux qui ont répondu "Présent" pour l'anniversaire de Louisa. #### Accès à l'écran Via l'URL directe à saisir. #### Contrôles mis en place Aucun. #### Actions effectuées depuis cet écran Aucune. ------------------------------------------------- ### reservation Ecran dans lequel l'utilisateur (qui a choisi le cadeau et s'est identifié) doit saisir des infos complémentaires : * A-t-il déjà acheté le cadeau ? * Si pas acheté, qui doit acheter le produit ? * Est-ce que l'acheteur a été remboursé ? * Pour quelle occasion sera offert le cadeau ? Anniversaire ou Noël ? #### Accès à l'écran Après l'écran de sélection de l'offrant. #### Contrôles mis en place RAS : des cases à cocher obligent l'utilisateur de sélectionner à chaque question une valeur. #### Actions effectuées depuis cet écran * Un bouton "Retour aux cadeaux" qui permet de revenir à l'accueil * Un bouton "Enregistrer" qui enregistre les modifs ------------------------------------------------- ### votre-vote Cet écran affiche un retour sur la réponse à l'invitation d'anniversaire de Louisa. Le principe : Chaque invité à son anniversaire s'est vu remettre un carton d'invitation avec deux QR codes : * un généré à partir du prénom de l'enfant et d'un flag "non présent" * un autre généré à partir du prénom de l'enfant et d'un flag "présent" Suivant le QR Code scanné, le parent verra apparaitre sur son navigateur le prénom de son enfant ainsi que la réponse. #### Accès à l'écran Après scan du QR code, ou via URL directe. #### Contrôles mis en place Aucun. #### Actions effectuées depuis cet écran Aucune.