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 :
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.