Plan d'enseignement - Cours 141

📌 Accéder au Padlet du cours

Vue d'ensemble des 15 séances

Séance	Date	Thème	Contenu principal
1 ✓	21.01	Introduction	Environnement, Vue DevTools, Structure projet
2 ✓	28.01	Création projet + Bases	Vuetify, Vue DevTools, ref(), ESLint
3 ✓	04.02	Bases Vue.js + Exercices	Demo Vue.js, Exercices Classroom, Début Infomaniak
4 ✓	11.02	Déploiement Infomaniak/Vercel	Projet individuel, GitHub Actions, FTP, Vercel
5 ✓	25.02	Cycle de vie & Watchers	Tuto 8-10, Exercices 5-7, Présentation lifecycle
6 ✓	04.03	Composants Vue.js	Props, Emits, Slots, Tuto 11-14, Exercices 8-9
7	11.03	Vuetify + API	Démo Rick & Morty Explorer, lancement projet perso
8	25.03	Pokédex Vuetify — Début	Anatomie projet Vuetify, étapes 1-5
9	01.04	Pokédex — Vue Router	Étapes 6-9, navigation, routes
10	22.04	Pokédex — Recherche & Favoris	Étapes 10-13, filtres, localStorage
11	29.04	Pokédex — Pinia	Étapes 14-17, state management
12	06.05	Pokédex — API & Finalisation	Étapes 18-19, Axios, polish
13	13.05	Épreuve formative	Évaluation mi-parcours
14	20.05	Approfondissement	Retour épreuve, Concepts avancés
15	27.05	EXAMEN	Pokédex avec API, DevOps

Semaines sans cours

• 18 février (vacances)
• 18 mars (vacances)
• 8 avril (vacances de Pâques)
• 15 avril (vacances de Pâques)

Séance 1 - 21 janvier 2026 ✓

Thème : Introduction à Vue.js et Vuetify

Objectifs :

• Mettre en place l'environnement de développement
• Comprendre Vue.js et Vuetify
• Installer Vue DevTools
• Créer sa première application Vue

Contenu couvert :

• Reconnexion WebStorm/GitHub
• Création projet avec npm create vuetify
• Explication npm et npmjs.com (packages)
• Choix TypeScript vs JavaScript (JS pour débutants)
• Lancement serveur avec npm run dev
• Installation et utilisation Vue DevTools (Firefox/Brave)
• Inspection des composants avec DevTools
• Structure projet : public/ vs src/
• Flux de démarrage : index.html → main.js → App.vue
• Hot Reload (rechargement automatique)
• Modification du template App.vue

Ressources :

• Introduction à Vue et Vuetify
• Présentation interactive
• Démo Hello World Vue

Devoirs : Tutoriel Vue.js officiel (étapes 1-7)

Séance 2 - 28 janvier 2026 ✓

Thème : Création projet Vuetify et bases Vue.js

Objectifs :

• Créer un nouveau projet Vuetify
• Comprendre la structure d'un projet Vue.js
• Découvrir les variables réactives et les directives

Devoirs préalables : Tutoriel Vue.js officiel (étapes 1 à 7)

Contenu couvert :

1. Configuration environnement (15 min)

   • Reconnexion WebStorm/GitHub (token)
   • Vérification Git et terminal

2. Création projet Vuetify (30 min)

   • Commande npm create vuetify
   • Preset "Everything" (toutes les options)
   • Choix JavaScript (pas TypeScript pour débutants)
   • Installation dépendances avec npm
   • Explication npm et npmjs.com

3. Lancement et outils (20 min)

   • Lancement serveur npm run dev
   • Installation Vue DevTools (Firefox/Brave)
   • Inspection des composants

4. Structure projet Vue.js (30 min)

   • Dossier public/ : fichiers statiques (favicon, images)
   • Dossier src/ : fichiers traités par Vue.js
   • Flux de démarrage : index.html → main.js → App.vue
   • Hot Reload (rechargement automatique)

5. Bases Vue.js - Pratique (60 min)

   • Modification App.vue
   • Variables réactives avec ref()
   • Interpolation
   • Directive v-model (liaison bidirectionnelle)
   • Directive v-bind (liaison d'attributs)

6. Configuration ESLint (15 min)

   • Fichier eslint.config.js
   • Activer "Run eslint --fix on save" dans WebStorm
   • Formatage automatique du code

Reporté à la séance 3 :

• Publication sur GitHub
• Hébergement Infomaniak
• Correction tutoriel Vue.js (étapes 1-7)

Ressources :

• Tutoriel Vue.js officiel
• Configuration WebStorm

Séance 3 - 4 février 2026 ✓

Thème : Bases de Vue.js et début Infomaniak

Objectifs :

• Approfondir les bases de Vue.js en codant ensemble
• Distribuer les exercices pratiques
• Démarrer la configuration Infomaniak

Devoirs préalables : Relire le tutoriel Vue.js (étapes 1 à 7)

Contenu :

1. Rappels et démarrage projet (15 min)

   • Démarrer le serveur (npm run dev ou panneau NPM WebStorm)
   • Ouvrir la console du navigateur (débogage)
   • Vue DevTools pour inspecter les composants

2. Demo Vue.js - Coder ensemble (90 min)

   • Rappel structure composant : <script>, <template>, <style>
   • Flux de démarrage : index.html → main.js → App.vue
   • Variables réactives ref() et .value
   • Interpolation et v-model
   • Événements @click et fonctions
   • Raccourci clavier @keyup.enter
   • Références d'éléments useTemplateRef() pour le focus
   • Propriétés calculées computed() pour filtrer un tableau
   • Checkbox avec v-model (booléen)
   • Débogage : console, messages d'erreur, ligne/caractère

3. Distribution exercices "Bases de Vue.js" (30 min)

   • Exercices via GitHub Classroom
   • Clonage du dépôt dans WebStorm (File > New > Project from Version Control)
   • npm install + npm run dev
   • Exercice 1 réalisé ensemble en classe
   • Solutions : kode.ch/vue-bases/

4. Début configuration Infomaniak (30 min)

   • Activation compte étudiant gratuit
   • Création hébergement web et nom de domaine
   • Création utilisateur FTP

Reporté à la séance 4 :

• Finalisation déploiement Infomaniak (workflow GitHub Actions)
• Introduction SASS/SCSS

Ressources :

• Exercices "Bases de Vue.js"
• Exercices - Solutions
• Déployer sur GitHub Pages
• Déployer sur Infomaniak (FTP)
• Tutoriel Vue.js officiel
• Infomaniak - Programme étudiant

Séance 4 - 11 février 2026 ✓

Thème : Déploiement Infomaniak/Vercel et présentation du projet

Objectifs :

• Finaliser le déploiement automatisé sur Infomaniak
• Déployer l'application sur Vercel
• Présenter le projet individuel

Contenu couvert :

1. Correction exercices 1 à 4 (30 min)

   • Revue des exercices "Bases de Vue.js" en classe
   • Correction des exercices 1, 2, 3 et 4 ensemble

2. Présentation du projet individuel (15 min)

   • Projet Vue.js 3 avec Vuetify, Pinia et API externe
   • Système d'évaluation (30 pts projet + 50 pts oral)
   • Critères d'une bonne API (images, endpoint liste + détail, contenu riche)
   • Utilisation de Postman pour tester les APIs
   • 👉 Détails du projet

3. Finalisation déploiement Infomaniak (~2h30)

   • Configuration compte FTP (mots de passe sécurisés)
   • Secrets GitHub (FTP_USER, FTP_PASSWORD, FTP_SERVER)
   • Workflow GitHub Actions pour déploiement automatique via tags/releases
   • Staging (GitHub Pages) vs Production (Infomaniak)
   • Dépannage individuel (configuration, erreurs de déploiement)
   • Importance de l'automatisation pour la sécurité (plus de mots de passe FTP partagés)

4. Déploiement sur Vercel (30 min)

   • Création d'un compte Vercel par les apprentis
   • Connexion avec GitHub
   • Déploiement automatique de l'application

Reporté à la séance 5 :

• Tutoriel Vue.js étapes 8-10 (cycle de vie, computed, watchers)
• Exercices 5 à 7

Note : Le déploiement Infomaniak a pris beaucoup plus de temps que prévu (dépannage individuel). Pas de devoirs donnés.

Ressources :

• Projet individuel C141
• Exercices - Solutions
• Déployer sur Infomaniak (FTP)
• Vercel

Séance 5 - 25 février 2026 ✓

Thème : Cycle de vie & Watchers

Objectifs :

• Comprendre le cycle de vie d'un composant
• Découvrir les watchers (watch, watchEffect)
• Pratiquer avec le tutoriel et les exercices

Devoirs préalables : Terminer exercices 1 à 4 (GitHub Classroom)

Contenu couvert :

1. Rappel séance 4 (10 min)

   • Recap déploiement : CI/CD, GitHub Actions, Infomaniak, Vercel
   • Vercel pour les POC (Proof of Concept), test smartphone
   • Question technique : cloner un projet sur un autre PC (ne jamais copier un dossier Git)

2. Présentation théorique - Cycle de vie & Watchers (30 min)

   • Cycle de vie : hooks (crochets), onMounted, onUnmounted
   • Exemples concrets : appel API avant affichage, confirmation avant perte de données
   • Skeleton loaders avec Vuetify (v-skeleton-loader)
   • Problématique scroll dans les SPA
   • Rappel computed() : cache intelligent vs fonctions
   • watch() et watchEffect() : surveiller des données réactives
   • Bonnes pratiques : computed pour données dérivées, watch pour effets

3. Tutoriel Vue.js - Étapes 8 à 10 (travail autonome)

   • Étape 8 : Cycle de vie (onMounted, onUnmounted)
   • Étape 9 : Propriétés calculées (computed)
   • Étape 10 : Observateurs (watch, watchEffect)

4. Exercices "Bases de Vue.js" 5 à 7 (travail autonome)

   • Exercice 5 : Computed
   • Exercice 6 : Watch
   • Exercice 7 : WatchEffect

Devoirs pour la séance 6 :

• Terminer tout le tutoriel Vue.js officiel (étapes 1 à 15)
• Terminer les exercices "Bases de Vue.js" 1 à 7

Ressources :

• Présentation - Cycle de vie & Watchers
• Exercices "Bases de Vue.js" - Solutions
• Tutoriel Vue.js officiel

Séance 6 - 4 mars 2026 ✓

Thème : Composants Vue.js — Props, Emits & Slots

Objectifs :

• Comprendre le découpage en composants
• Passer des données avec les props (defineProps)
• Communiquer via les événements (defineEmits)
• Injecter du contenu avec les slots

Devoirs préalables :

• Terminer tout le tutoriel Vue.js officiel (étapes 1 à 15)
• Terminer les exercices "Bases de Vue.js" 1 à 7

Contenu couvert :

1. Présentation théorique - Composants (~1h15)

   • Introduction aux composants : découpage, import, réutilisation
   • Lien avec le vibe coding (composants = meilleure testabilité avec l'IA)
   • Démo interactive sur le Playground Vue.js :
     • Créer un composant enfant et l'importer
     • PascalCase vs kebab-case pour les balises
     • scoped CSS : portée limitée au composant
   • Props : defineProps(), passage statique vs dynamique (:)
   • Props en lecture seule, validation avec v-if
   • Emits : defineEmits(), communication enfant → parent
   • Slots : injection de contenu HTML (défaut, nommés, valeur par défaut)
   • Exemple concret avec les slots Vuetify (v-card, v-text-field)

2. Choix des API pour le projet personnel

   • Validation des API choisies par les apprentis
   • Vérification : gratuite, publique, avec images

3. Travail autonome (~1h30)

   • Tutoriel Vue.js étapes 11-14 (composants)
   • Exercices "Bases de Vue.js" 8 et 9
   • Finalisation du choix d'API

Ressources :

• Présentation - Composants Vue.js
• Exercices "Bases de Vue.js" - Solutions
• Tutoriel Vue.js officiel

Séance 7 - 11 mars 2026

Thème : Vuetify + API — Rick & Morty Explorer

Voir la démo en ligne | Dépôt GitHub

Objectifs :

• Consommer une API REST et afficher des données dans Vuetify
• Découvrir les composants Vuetify (v-card, v-img, v-chip, v-list)
• Comprendre le routage Vue Router (2 pages, navigation drawer)

Devoirs préalables :

• Terminer le tutoriel Vue.js (étapes 1 à 15)
• Terminer les exercices "Bases de Vue.js" 1 à 9

Récupérer le projet Rick & Morty Explorer

Étape 1 — Créer votre copie du projet

1. Ouvrir le dépôt template : github.com/fallinov/esig-141-demo-vuetify-api
2. Cliquer sur le bouton vert "Use this template" → "Create a new repository"

3. Cocher "Include all branches" (pour avoir la branche solution)
4. Repository name : esig-141-demo-vuetify-api
5. Visibilité : Public
6. Cliquer sur "Create repository"

Étape 2 — Cloner et ouvrir dans WebStorm

1. Copier l'URL de votre dépôt : https://github.com/VOTRE-PSEUDO/esig-141-demo-vuetify-api.git

2. Dans WebStorm : File → New → Project from Version Control...
3. Coller l'URL et cliquer sur Clone
4. Ouvrir le terminal intégré et lancer :

npm install
npm run dev

5. L'application s'ouvre sur http://localhost:3000

Contenu

1. P1-P2 : Démo collective — Rick & Morty Explorer (~1h30)

   • Suivre le guide étape par étape (étapes 0 à 5, + bonus étape 6)
   • Appel API avec fetch() dans onMounted — 3 états : loading, error, data
   • Affichage dans des v-card avec v-img, v-chip et grille responsive
   • Page statique À propos avec v-card, v-list, v-icon
   • Navigation : v-navigation-drawer avec hamburger et v-list-item :to
   • Déploiement sur Vercel

2. P3-P4 : Mise en pratique individuelle (~1h30)

   • Créer un projet Vuetify : devjs.ch/vue/creer-app-vuetify (npm create vuetify, preset Recommended)
   • Créer un dépôt GitHub et pousser le projet
   • Rédaction du README (nom, API, description)
   • Test de l'API avec Bruno ou Postman
   • Reproduction de la démo avec leur propre API
   • Déploiement sur Vercel
   • Suivre la checklist du projet personnel en bas du guide

Objectif de fin de séance : chaque apprenti a une app Vuetify qui affiche les données brutes de son API.

Ressources :

• Guide étape par étape — Rick & Morty Explorer
• Dépôt GitHub du projet (branche main = code de départ, branche solution = résultat final)
• Créer un projet Vuetify
• Projet individuel C141
• Introduction à Vue et Vuetify
• Anatomie d'un projet Vuetify
• API — Introduction
• API — Utilisation en projet
• Vue Router — Introduction

Lancement du projet personnel

À partir de cette séance, chaque nouveau concept est appris via le Pokédex puis transposé dans le projet personnel.

Séance 8 - 25 mars 2026

Thème : Pokédex Vuetify — Début

Objectifs :

• Comprendre l'anatomie d'un projet Vuetify
• Démarrer le Pokédex (exercice fil rouge)
• Transposer les acquis dans le projet personnel

Devoirs préalables : Avoir son projet personnel initialisé et son API fonctionnelle

Contenu :

1. P1-P2 : Pokédex — Étapes 1 à 5 (~1h30)

   • Anatomie d'un projet Vuetify (dossiers, fichiers clés)
   • Layout Vuetify : v-app, v-app-bar, v-main
   • Composants v-card pour afficher les Pokémon
   • Liste avec v-for et données statiques
   • Introduction à la correction collective

2. P3-P4 : Transposition projet personnel (~1h30)

   • Appliquer le même layout Vuetify à son projet
   • Afficher les données de son API dans des v-card
   • Aide individuelle selon les API

Ressources :

• Exercice Pokédex Vuetify

Séance 9 - 1er avril 2026

Thème : Pokédex — Vue Router

Objectifs :

• Configurer Vue Router (navigation entre pages)
• Créer des routes et des liens de navigation
• Implémenter une page de détail

Devoirs préalables : Pokédex étapes 1 à 5 terminées

Contenu :

1. P1-P2 : Pokédex — Étapes 6 à 9 (~1h30)

   • Installation et configuration de Vue Router
   • Création des routes (liste, détail, favoris)
   • Navigation avec <router-link> et v-btn
   • Paramètres de route (:id) et page de détail
   • Correction collective

2. P3-P4 : Transposition projet personnel (~1h30)

   • Ajouter Vue Router à son projet
   • Créer les pages de son application
   • Navigation adaptée à son API

Ressources :

• Vue Router
• Exercice Pokédex Vuetify

Séance 10 - 22 avril 2026

Thème : Pokédex — Recherche & Favoris

Objectifs :

• Implémenter un champ de recherche avec filtre
• Gérer une liste de favoris (localStorage)
• Découvrir computed() pour filtrer des listes

Devoirs préalables : Pokédex étapes 6 à 9 terminées

Contenu :

1. P1-P2 : Pokédex — Étapes 10 à 13 (~1h30)

   • Barre de recherche avec v-text-field et computed()
   • Système de favoris avec localStorage
   • Tri et filtres
   • Correction collective

2. P3-P4 : Transposition projet personnel (~1h30)

   • Implémenter recherche et/ou filtres sur son API
   • Ajouter des favoris si pertinent

Ressources :

• Exercice Pokédex Vuetify

Séance 11 - 29 avril 2026

Thème : Pokédex — Pinia (state management)

Objectifs :

• Comprendre le rôle d'un store centralisé
• Installer et configurer Pinia
• Migrer les données vers un store

Devoirs préalables : Pokédex étapes 10 à 13 terminées

Contenu :

1. P1-P2 : Pokédex — Étapes 14 à 17 (~1h30)

   • Introduction à Pinia : pourquoi un store ?
   • Création d'un store Pokémon
   • Actions, getters, state
   • Persistance avec pinia-plugin-persistedstate
   • Correction collective

2. P3-P4 : Transposition projet personnel (~1h30)

   • Ajouter Pinia à son projet
   • Migrer les données de l'API vers un store

Ressources :

• Pinia — State management
• Exercice Pokédex Vuetify

Séance 12 - 6 mai 2026

Thème : Pokédex — API & Finalisation

Objectifs :

• Consommer une API REST avec Axios
• Finaliser le Pokédex
• Avancer le projet personnel

Devoirs préalables : Pokédex étapes 14 à 17 terminées

Contenu :

1. P1-P2 : Pokédex — Étapes 18 à 19 (~1h30)

   • Remplacement des données statiques par l'API REST
   • Axios : installation, configuration, intercepteurs
   • Gestion du chargement (v-skeleton-loader)
   • Gestion des erreurs API
   • Correction collective

2. P3-P4 : Projet personnel (~1h30)

   • Intégration Axios dans le projet
   • Finalisation des fonctionnalités
   • Préparation pour l'épreuve formative

Ressources :

• Consommer une API
• Exercice Pokédex Vuetify
• Pokedex API

Séance 13 - 13 mai 2026

ÉPREUVE FORMATIVE

Format :

• Évaluation pratique sur poste
• Couvre les modules 1-12 du Pokédex
• Utilisation de Vue.js, Vuetify, Vue Router

Séance 14 - 20 mai 2026

Thème : Approfondissement

Objectifs :

• Analyser les résultats de l'épreuve
• Découvrir des concepts avancés
• Explorer les frameworks dérivés

Contenu :

• Retour épreuve formative
• Inception → Frameworks dans les frameworks
• v-container (plusieurs instances)
• Electron.js (apps desktop)

Séance 15 - 27 mai 2026

EXAMEN DE MODULE

Contenu :

• Pokédex avec API REST
• Corrigé complet
• Introduction à Ionic Framework (apps mobiles)
• GitHub Actions (DevOps)

Ressources :

• Pokedex API

Récapitulatif des compétences

Compétence	Séances
Vue.js 3 - Composition API	1-6
Déploiement (GitHub Pages, Infomaniak, Vercel)	4, 7
Vuetify - Material Design	7-15
Appel API (fetch, Axios)	7-8, 12-15
Vue Router - Navigation	9-15
Pinia - State management	11-15
Projet personnel (API externe)	7-15
Apps hybrides (Capacitor)	14-15