147 lines
4.2 KiB
Markdown
147 lines
4.2 KiB
Markdown
# 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.
|