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 !
Données
Cet examen manipule un ensemble de données (cocktails) disponibles dans l’API :
https://www.thecocktaildb.com/api.php
L’API propose une requête GET qui permet de récupérer une liste de cocktails au format JSON
à partir de la 1ère lettre du nom du cocktail (cf.
documentation de l’API).
Par exemple, pour récupérer les cocktails commençant par la lettre ‘a‘, on utilisera :
https://www.thecocktaildb.com/api/json/v1/1/search.php?f=a
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.
