Grégory Bourguin
SysReIC - LISIC - ULCO
Examen de FWF - Vue.js

Site Web : "Cocktails"

Le but de cet examen est de réaliser en Vue.js le site web "Cocktails" dont la version finale est visible !!!-> ICI <-!!!.

Instructions Générales

Vous devez travailler à la racine du disque local des machines d'examen et y créer un dossier selon le pattern /exam-fwf-NOM-PRENOM/

NB1 : dans le pattern ci-dessus, remplacez NOM-PRENOM par vos propres NOM et PRENOM.
NB2 : ne mettez pas d'espace et/ou de caractères spéciaux.
Exemple : /exam-fwf-BOURGUIN-GREGORY.

Dans votre dossier /exam-fwf-NOM-PRENOM/, créez un projet Vue.js nommé cocktails.

C'est votre dossier /exam-fwf-NOM-PRENOM/ sera récupéré par nos soins à la fin de l’épreuve: ne laissez pas vos sources ailleurs ou elles ne seront pas récupérées !

Pour la réalisation du site, vous mettrez en oeuvre du Vue.js et les techniques que nous avons vues dans le cours de FWF.

NB : vous pouvez vous inspirer de ce qui avait été fait dans les TPs, mais tout code qui n’a rien à faire ici vous fera perdre des points !

But de l’application

Grâce à l’API, l’application permet de récupérer la liste des cocktails commençant par chaque lettre de l’alphabet.

Le header de l’application présente la liste des lettres et un click sur une lettre déclenche l’affichage de la liste des cocktails correspondants.

La liste est affichée dans la moitié gauche du « contenu » du site.

Cette liste occupe tout l’espace entre le header et le footer de l’application.

Un click sur un des cocktails de la liste change sa couleur (pour indiquer la sélection) et fait apparaître l’éditeur de cocktail dans la partie droite du contenu.

Composants Vue

L’application est constituée de 4 composants Vue :

  • CocktailApp : l’application « globale ».
  • CocktailList : la liste des cocktails occupant la partie gauche.
  • CocktailView : chaque élément (cocktail) affiché dans la liste.
  • CocktailEditor : l’éditeur de cocktail dans la partie droite.

CocktailApp

CocktailApp est le composant le plus « global ». Son header contient l’alphabet qui permet de lancer la récupération d’une liste de cocktails.

CocktailList

CocktailList affiche la liste des cocktails qui a été récupérée par un click dans CocktailApp.

Chaque élément (cocktail) de la liste est une instance de CocktailView.

Un click sur un CocktailView de la liste marque la sélection (fond couleur verte) et fait afficher le cocktail sélectionné dans CocktailEditor.

CocktailView

CocktailView fournit une représentation d’un cocktail (à partir du JSON récupéré) qui affiche :

  • La photo
  • Le nom
  • Le nombre d’ingrédients
  • La liste des ingrédients

CocktailEditor

CocktailEditor affiche diverses informations sur le cocktail :

  • Le nom
  • La photo
  • La liste des ingrédients
  • Les instructions

Dans cette version simplifiée de l’édition, CocktailEditor fournit juste un champ qui permet de modifier le nom du cocktail.

La modification du nom est directement répercutée dans l’affichage du nom (juste au-dessus) dans CocktailEditor.
Elle n’est par contre PAS directement répercutée dans CocktailList et plus particulièrement le CocktailView correspondant.

Un click sur le bouton Reset réinitialise le nom du cocktail.

Un click sur Save a pour effet de transmettre la modification du nom au CocktailView correspondant dans CocktailList.
En d’autres termes, un click sur Save change le nom du cocktail dans toute l’application.

REMARQUE : puisque nous n’avons ici pas accès à la modification de la base de donnée de l’API, un rechargement de la page ou de la liste (par click sur la lettre dans le header) aura pour effet de remettre le nom original du cocktail, même après un click sur Save.