VusJs - Ateliers

Cahier d’ateliers et de démonstrations - Formation Vue.
JS
Formation framework Vue.Js
ATELIERS
Table des matières
Ateliers ............................................................................................................................................................................................ 2
Atelier n°1 – Première page et interpollation ............................................................................................................................ 2
Atelier n°2 – Directives ............................................................................................................................................................... 2
Atelier n°3 – Composants ........................................................................................................................................................... 2
Atelier n°4 – Définition de propriétés ........................................................................................................................................ 3
Atelier n°5 – Hooks ..................................................................................................................................................................... 3
Atelier n°6 – Emit ........................................................................................................................................................................ 3
Atelier n°7 – Emit ........................................................................................................................................................................ 3
TP ................................................................................................................................................................................................. 4
Atelier n°8 – Routage .................................................................................................................................................................. 6

TP (Suite) ..................................................................................................................................................................................... 6
Atelier n° 9 – State Management ............................................................................................................................................... 7
Atelier n° 10 – Vuex .................................................................................................................................................................... 7
Atelier n° 11 – Vuex (suite) ......................................................................................................................................................... 7
TP – Questions subsidiaires (Suite / Store) ................................................................................................................................ 8
TP – Questions subsidiaires (Suite / HTPP)................................................................................................................................. 9
TP – Questions subsidiaires (Suite / Tests unitaires) ............................................................................................................... 11
Atelier n° 12 – Animations ........................................................................................................................................................ 12
Atelier n° 13 – Mixins ................................................................................................................................................................ 12
1
Cahier d’ateliers et de démonstrations - Formation Vue.JS
Formation GitLab CI/CD, maîtriser la gestion du cycle de vie de vos développements logiciels
Ateliers
Atelier n°1 – Première page et interpollation
Prendre le ZIP P1C2
1. Ajoutez Vue.js à index.html pour le convertir en application monopage.
2. Votre application doit avoir une propriété dans data appelée restaurantName.
3. Le nom du restaurant doit être rendu à l'aide de la syntaxe en moustache.
Atelier n°2 – Directives
Reprendre le support d’exercice fourni (P1C4)
Instructions :
1. Utilisez la directive v-for pour afficher tous les éléments de simpleMenu.
2. Utilisez la directive v-if pour indiquer si un article est "En stock" ou "En rupture de stock".
3. Utilisez la directive v-bind pour rendre dynamiquement chaque image du menu et remplir son texte alt.
4. Utilisez la directive v-on pour augmenter le total du panier lors de l'ajout d'un article du menu avec une fonction
définie dans les méthodes appelées addToShoppingCart.
5. Utiliser v-model pour permettre à l'utilisateur de mettre à jour le nombre d'articles qu'il souhaite mettre lorsqu'il
fait un ajout au panier.
Atelier n°3 – Composants
Instructions :
1. Migrez le contenu de index.html vers cli-version/src/App.vue
2. Migrez le répertoire des images vers cli-version/public
3. Mettez à jour le chemin (path) des images dans simpleMenu pour qu'il soit relatif et non plus absolu (en
supprimant le . qui préfixe l'URL).
4. Créez un composant pour MenuItem.vue et migrez les éléments (items) du menu.
2
5. Utilisez des props pour vous assurer que les données de MenuItem sont toujours correctement rendues et qu'elles
peuvent toujours mettre à jour le total du panier (astuce : vous pouvez transmettre des fonctions dans les props).
Atelier n°4 – Définition de propriétés
Instructions :
1. Utilisez la syntaxe en objet pour définir les propriétés associées à props dans MenuItem.vue.
Atelier n°5 – Hooks

Instructions :
1. Utilisez un hook de cycle de vie avant que MenuItem ne soit rendu pour vérifier si la date de la journée est paire.
Si c'est le cas, le prix de chaque article devrait être affiché avec une réduction de 10 %.
Atelier n°6 – Emit

Instructions :
1. Supprimez la prop addToShoppingCart du MenuItem
2. Créez une nouvelle méthode appelée updateShoppingCart dans MenuItem qui émet un événement appelé add-
items-to-cart à Home.vue pour mettre à jour le panier.
Atelier n°7 – Slots

Instructions :
Refactorez le composant BaseButton en utilisant des slots plutôt que les props qui sont définies pour le moment.
3
TP
Avec la feuille de style CSS qui servira de base pour tout le TP : la placer dans le dossier src et l'inclure dans le projet avec
import "./stylesheet.css" dans la partie script de App.vue.
2. Créer un nouveau composant LoginForm.vue contenant un formulaire d'authentification :
<div id="login-form">
<form>
<h1>Authentification</h1>
<p>Remplissez ce formulaire pour vous connecter.</p>
<hr>
<label for="email"><b>Email</b></label>
<input type="text" placeholder="Entrez votre courriel" id="email" name="email" required>
<label for="psw"><b>Mot de passe</b></label>
<input type="password" placeholder="Entrez votre mot de passe" id="psw" name="psw"
required>
<p><button type="submit">Se connecter</button></p>
</form>
</div>
3. Supprimez le contenu existant du template du composant App.vue, et affichez le composant LoginForm.vue à la place
avec <login-form />.
Vous devrez également déclarer LoginForm dans l'option components du composant App.
4. Complétez le fichier LoginForm.vue pour déclarer le nom du composant, ainsi qu'une option data contenant une
propriété title.
Utiliser ensuite l'interpolation de texte dans le template pour passer le titre du formulaire "Authentification" en
utilisant cette variable title.
5. Sur le formulaire d'authentification, ajoutez deux variables email et password dans l'option data du composant et utilisez
la directive v-model sur les champs email et password pour les lier.
6. Ajoutez une autre variable loggedIn initialement à false, puis utilisez la directive v-on pour l'assigner à true à la
soumission du formulaire.
7. Modifier le comportement par défaut de l'évènement submit du formulaire d'authentification afin d'éviter le
rechargement de la page.
8. Sous le formulaire d'authentification, ajoutez le HTML ci-après
9. Utilisez les directives v-if et v-else pour afficher le formulaire d'authentification et cacher la liste des films quand loggedIn
=== false, et réciproquement.
4
<ul class="films">
<li class="film card">
<img class="poster" src="https://m.media-
amazon.com/images/M/MV5BMDdmZGU3NDQtY2E5My00ZTliLWIzOTUtMTY4ZGI1YjdiNjk3XkEyXkFqcGdeQXVyNTA4NzY1MzY@._
V1_SX300.jpg" />
<p class="title">
Titanic
<span class="rating">★★★★</span>
</p>
<dl>
<dt>Release date</dt><dd>07/01/1998</dd>
<dt>Director</dt><dd>James Cameron</dd>
<dt>Actors</dt><dd>Leonardo DiCaprio, Kate Winslet, Billy Zane, Kathy Bates</dd>
</dl>
<p class="plot">
84 years later, a 100 year-old woman named Rose DeWitt Bukater tells the story to her granddaughter Lizzy Calvert, Brock
Lovett, Lewis Bodine, Bobby Buell and Anatoly Mikailavich on the Keldysh about her life set in April 10th 1912, on a ship called
Titanic when young Rose boards the departing ship with the upper-class passengers and her mother, Ruth DeWitt Bukater, and her
fiancé, Caledon Hockley. Meanwhile, a drifter and artist named Jack Dawson and his best friend Fabrizio De Rossi win third-class
tickets to the ship in a game. And she explains the whole story from departure until the death of Titanic on its first and last voyage
April 15th, 1912 at 2:20 in the morning.
</p>
</li>
</ul>
10. Ajoutez la variable suivante dans l'option data du composant :

films: [
{
title: 'Titanic',
released: '19 Dec 1997',
director: 'James Cameron',
actors: 'Leonardo DiCaprio, Kate Winslet, Billy Zane, Kathy Bates',
poster: 'https://m.media-
amazon.com/images/M/MV5BMDdmZGU3NDQtY2E5My00ZTliLWIzOTUtMTY4ZGI1YjdiNjk3XkEyXkFqcGdeQXVyNTA
4NzY1MzY@._V1_SX300.jpg',
plot: '84 years later, a 100 year-old woman named Rose DeWitt Bukater tells the story to her granddaughter Lizzy
Calvert, Brock Lovett, Lewis Bodine, Bobby Buell and Anatoly Mikailavich on the Keldysh about her life set in April
10th 1912, on a ship called Titanic when young Rose boards the departing ship with the upper-class passengers and
her mother, Ruth DeWitt Bukater, and her fiancé, Caledon Hockley. Meanwhile, a drifter and artist named Jack
Dawson and his best friend Fabrizio De Rossi win third-class tickets to the ship in a game. And she explains the
whole story from departure until the death of Titanic on its first and last voyage April 15th, 1912 at 2:20 in the
morning.',
metascore: '75'
},
{
title: 'Blade Runner',
released: '25 Jun 1982',
director: 'Ridley Scott',
actors: 'Harrison Ford, Rutger Hauer, Sean Young, Edward James Olmos',
amazon.com/images/M/MV5BNzQzMzJhZTEtOWM4NS00MTdhLTg0YjgtMjM4MDRkZjUwZDBlXkEyXkFqcGdeQXVyNj
U0OTQ0OTY@._V1_SX300.jpg',
plot: 'A blade runner must pursue and terminate four replicants who stole a ship in space, and have returned to
Earth to find their creator.',
metascore: '89'
},
{
title: 'The Shining',
released: '13 Jun 1980',
director: 'Stanley Kubrick',
actors: 'Jack Nicholson, Shelley Duvall, Danny Lloyd, Scatman Crothers',
amazon.com/images/M/MV5BZWFlYmY2MGEtZjVkYS00YzU4LTg0YjQtYzY1ZGE3NTA5NGQxXkEyXkFqcGdeQXVyMTQ
xNzMzNDI@._V1_SX300.jpg',
plot: 'A family heads to an isolated hotel for the winter where an evil spiritual presence influences the father into
violence, while his psychic son sees horrific forebodings from both past and future.',
metascore: '63'
}
]
5
11. A l'aide de la directive v-for, répétez l'élément .film.card pour afficher autant de films que contient la liste films
12. Complétez les données des cartes par celle de chaque film en utilisant les directives et l'interpolation
13. Bonus : trouvez comment utiliser la propriété metascore pour afficher un certain nombre d'étoiles à côté de chaque
titre de film.
Atelier n°8 – Routage

Instructions :
1. Sauvegardez temporairement le contenu de App.vue dans un fichier séparé car il sera écrasé par l'installation.
2. Ajoutez le plugin vue-router à l'application et n'activez pas le mode historique lors de l'installation (Use history
mode for router? => N).
3. Migrez les données temporairement sauvegardées de l'ancienne App.vue vers Home.vue
4. Créez une route statique pour la page de contact à l'url /contact
5. Migrez les coordonnées de Home.vue vers Contact.vue
6. Ajoutez le lien du routeur de contact à App.vue
7. Activez le mode historique dans la configuration de votre routeur.
TP (Suite)
1. Refactorez le code existant en créant un composant Film.vue servant à afficher les détails d'un film. Ajoutez des
props pour passer les données de chaque film au composant.
2. Créer un autre composant SearchFilm.vue contenant un formulaire de recherche ainsi que la liste de Film en
résultats dessous :
<template>
<div id="search-film">
<form>
<label for="search">Rechercher :</label>
<input id="search" type="text">
</form>
<ul class="films">

</ul>
</div>
</template>
3. Insérez ce composant SearchFilm aux côtés de LoginForm dans App.vue et déplacez les data et autres options
associées dans les sous-composants pour alléger au maximum le code de App.
4. Afficher le composant SearchFilm seulement si l'utilisateur est loggé.

Question : quelles difficultés avez-vous rencontré pour utiliser la variable loggedIn dans plusieurs composants à la fois ?
5. Assignez la variable films à une liste vide [] initialement. A la soumission du formulaire de recherche, lancez une
méthode searchFilms qui mettra les 3 films d'exemple dans cette liste.
6. Bonus : Dans la méthode searchFilms, au lieu de mettre tous les films d'un coup dans this.films, essayez de les
assigner un à un de cette façon :
this.films[0] = { title: 'Titanic', released: '19 Dec 1997', ... }
this.films[1] = { title: 'Blade Runner', ... }
this.films[2] = ...
Question : Pourquoi la vue ne se met-elle plus à jour alors que la liste semble être remplie correctement ?
6
7. Si ce n'est pas déjà fait, installez vue-router sur votre projet avec la commande vue add router. Ouvrez ensuite le
fichier src/router.js pour voir comment sont déclarées les routes.
8. Ajouter une route /login reliée à la view LoginForm et une route /search reliée à SearchFilm.
9. A l'aide de la documentation de vue-router, remplacez la bascule entre LoginForm et SearchFilm à base de v-if par
une navigation d'une route à une autre.
10. Bonus : en utilisant les Navigation Guards de vue-router, redirigez l'utilisateur voulant accéder à la page de
recherche de films vers /login si l'utilisateur n'est pas authentifié.
Atelier n° 9 – State Management

Instructions :
1. Évaluez le state actuel de l'application et déterminez où se trouvent les différentes propriétés des données.
2. Créez un plan ou un document visuel représentant la structure du state de l'application.
Atelier n° 10 – Vuex
Instructions :
1. Ajoutez Vuex à l'application.

2. Vérifiez que la boilerplate pour le store est bien présente dans un fichier comme store/index.js.
Atelier n° 11 – Vuex (suite)

Instructions :
1. Migrez les données du shoppingCart vers Vuex.

2. Migrez les données relatives à restaurantName vers Vuex.
3. Migrez les données de simpleMenu vers Vuex.
4. Migrez copyright vers les accesseurs (getters).
7
TP – Questions subsidiaires (Suite / Store)

1. Installer les dépendances vuex et vuex-persistedstate qu'on utilisera pour persister l'état du store.
npm install vuex vuex-persistedstate
2. Créer un store Vuex en créant un fichier src/store.js avec le contenu slide suivant.
3. Déclarez le store dans votre application en complétant le fichier main.js comme ceci :
import Vue from 'vue'

import Vuex from 'vuex'
import createPersistedState from 'vuex-persistedstate'
Vue.use(Vuex)
export default new Vuex.Store({

strict: true,
plugins: [ createPersistedState() ],
state: {
user: null,
loggedIn: false
},
mutations: {
setLoggedIn (state, loggedIn) {
state.loggedIn = loggedIn
},
setUser (state, user) {
state.user = user
}
},
actions: {
login ({ commit }, { user }) {
commit('setLoggedIn', true)
commit('setUser', user)
}
}
})
4. Dans le code de l'application, supprimez les passages de prop loggedIn de composant à composant et récupérez la
donnée depuis le store à la place (this.$store.state.loggedIn)
8
5. Dans LoginForm.vue, lors du submit, vérifier si l'utilisateur a entré l'adresse mail test@test.com et le mot de passe
test1234. Si c'est le cas, déclencher l'action login pour le user test.
6. Se connecter avec les identifiants cités ci-haut, vérifier que l'on bascule bien sur le formulaire de recherche de
films, puis actualiser la page.
Question : pourquoi on ne retourne plus sur le formulaire de login après actualisation ?
7. Si l'utilisateur a entré de mauvaises informations, afficher un message d'erreur. Pour cela, vous pouvez vous aider
d'une data supplémentaire comme une String loginError par exemple.
8. Bonus : Coder une action logout et ajouter un bouton de déconnexion <button id="logout-btn"> qui invoque cette
action. Afficher le nom de l'utilisateur à côté de ce bouton.
TP – Questions subsidiaires (Suite / HTPP)
Exemple : Utilisation d'une API fournie par un serveur (le back-end) pour authentifier les utilisateurs et rechercher des films.
Ce back-end a déjà été développé et déployé sur Heroku.
TIP : Avoir un contrat d'interface du backend (ex : Heroku)
https://dev.to/anjolaogunmefun/deploy-vue-js-projects-to-heroku-1hb5
1. Créer un service générique services/api.js permettant d'appeler le backend, avec le contenu slide suivant.
Remarque : Il n'y a pas de code spécifique à Vue ici, il s'agit d'une fonction utilitaire autour de la méthode fetch branchée
sur notre back-end.
✓ Le header Authorization est utilisé pour envoyer le token d'authentification au back-end.
✓ Les autres options servent à configurer le cache HTTP et les autorisations cross-origin à appliquer.
9
import store from '@/store.js'
export const BASE_URL = 'https://vue-js-backend.herokuapp.com'
export async function api (url, params = {}) {

params = Object.assign({
mode: 'cors',
cache: 'no-cache',
}, params)
params.headers = Object.assign({
Authorization: `Bearer ${store.state.token}`,
'Content-Type': 'application/json'
}, params.headers)
let response = await fetch(BASE_URL + url, params)

let json = await response.json() || {}
if (!response.ok){
let errorMessage = json.error ? json.error.error || json.error : response.status
throw new Error(errorMessage)
}
return json
}
2. Créer un service services/UserService.js qui exploitera les endpoints de l'API concernant l'inscription et le login des
utilisateurs :
import { api } from '@/services/api.js'
export default {
register (credentials) {
return api('/user/register', {
method: 'POST',
body: JSON.stringify(credentials)
})
},
login (credentials) {
return api('/user/login', {
method: 'POST',
body: JSON.stringify(credentials)
})
},
user () {
return api('/user')
}
}
10
3. Dans le composant LoginForm, ajoutez un second bouton pour s'inscrire à côté de celui pour se login, puis modifiez
les méthodes de LoginForm pour appeler les méthodes du UserService :
import UserService from '@/services/UserService.js'
export default {
methods: {
async register () {
try {
const response = await UserService.register({
email: this.email,
password: this.password,
firstname: 'John',
lastname: 'Smith'
})
this.$store.dispatch('login', { user: response.user, token: response.token })
this.$router.push('/search')
} catch (error) {
this.error = error.toString()
}
XX },
async login () {
try {
const response = await UserService.login({ email: this.email, password: this.password })
this.$store.dispatch('login', { user: response.user, token: response.token })
this.$router.push('/search')
} catch (error) {
this.error = error.toString()
}
}
}
}
4. Notez qu'en cas d'erreur, on stocke le message d'erreur retourné dans une variable error. Déclarez cette variable
dans les data du composant et utilisez-là dans le template pour afficher le message d'erreur en cas d'échec
d'authentification.
5. Notez également que la réponse du back-end au login contient un token permettant d'authentifier l'utilisateur, qui
est transmis au store dans les paramètres de l'action login. Modifiez store.js pour stocker ce token dans le store, en
ajoutant une mutation setToken appelée par l'action login.
6. Le service api est déjà configuré pour ajouter ce token en header Authorization des requêtes. Vérifiez que le token
est bien envoyé en header HTTP via les outils développeur de votre navigateur.
7. Bonus : Modifier l'action logout du store pour supprimer le token et les infos utilisateur du store à la déconnexion,
et rediriger vers le formulaire de login.
8. Créez un service FilmService avec une méthode pour rechercher les films, en suivant la documentation de l'API (GET
/movies/search).
9. Modifier la page de recherche de films pour appeler le back-end et permettre à l'utilisateur d'entrer le nom d'un
film, et d'avoir tout le détail de ce film en sortie.
TP – Questions subsidiaires (Suite / Tests unitaires)
1. Créer un fichier de spec de tests unitaires pour tester votre composant Film.vue.
2. Dans votre test, monter le composant, ajouter une assertion basique et lancer les tests.
3. Simuler les valeurs d'un film et vérifier le rendu HTML.
4. Ajouter le calcul de la couverture de code. Que constatez-vous ?
5. Bonus : Tester le composant LoginForm.vue, en simulant les appels externes HTTPS ainsi que les appels au store et
au routeur. Tester le cas nominal et d'erreur du login.
11
Atelier n° 12 – Animations
Sur une simple page HTML, insérer des transitions pour animer l’ajout ou la suppression d’item dans la liste dans un menu
comme sur cette copie écran :
Atelier n° 13 – Mixins
Instructions :
1. Migrez tous les styles des sites statiques styles.css dans les fichiers des composants respectifs.
2. Utilisez votre préprocesseur préféré si vous le souhaitez !
12

VusJs - Ateliers

Transféré par

Informations du document

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

VusJs - Ateliers

Transféré par

Droits d'auteur :

Formats disponibles

Cahier d’ateliers et de démonstrations - Formation Vue.

Formation framework Vue.Js

Atelier n°8 – Routage .................................................................................................................................................................. 6

Prendre le ZIP P1C2

1. Ajoutez Vue.js à index.html pour le convertir en application monopage.

3. Le nom du restaurant doit être rendu à l'aide de la syntaxe en moustache.

Atelier n°2 – Directives

Reprendre le support d’exercice fourni (P1C4)

1. Utilisez la directive v-for pour afficher tous les éléments de simpleMenu.

Atelier n°3 – Composants

Reprendre le support d’exercice fourni (P2C2)

1. Migrez le contenu de index.html vers cli-version/src/App.vue

2. Migrez le répertoire des images vers cli-version/public

4. Créez un composant pour MenuItem.vue et migrez les éléments (items) du menu.

Atelier n°4 – Définition de propriétés

Reprendre le support d’exercice fourni (P3C2)

Atelier n°5 – Hooks

Atelier n°6 – Emit

1. Supprimez la prop addToShoppingCart du MenuItem

Atelier n°7 – Slots

2. Créer un nouveau composant LoginForm.vue contenant un formulaire d'authentification :

8. Sous le formulaire d'authentification, ajoutez le HTML ci-après

10. Ajoutez la variable suivante dans l'option data du composant :

Atelier n°8 – Routage

4. Afficher le composant SearchFilm seulement si l'utilisateur est loggé.

Atelier n° 9 – State Management

2. Créez un plan ou un document visuel représentant la structure du state de l'application.

1. Ajoutez Vuex à l'application.

Atelier n° 11 – Vuex (suite)

1. Migrez les données du shoppingCart vers Vuex.

TP – Questions subsidiaires (Suite / Store)

npm install vuex vuex-persistedstate

import Vue from 'vue'

export default new Vuex.Store({

Question : pourquoi on ne retourne plus sur le formulaire de login après actualisation ?

TP – Questions subsidiaires (Suite / HTPP)

TIP : Avoir un contrat d'interface du backend (ex : Heroku)

✓ Le header Authorization est utilisé pour envoyer le token d'authentification au back-end.

import store from '@/store.js'

export const BASE_URL = 'https://vue-js-backend.herokuapp.com'

export async function api (url, params = {}) {

let response = await fetch(BASE_URL + url, params)

import { api } from '@/services/api.js'

import UserService from '@/services/UserService.js'

TP – Questions subsidiaires (Suite / Tests unitaires)

Vous aimerez peut-être aussi