Exercice Pokédex Vuetify

Introduction

Dans cet exercice, vous allez créer un Pokédex interactif avec Vue.js 3, Vuetify 3, Pinia et Axios.

Chaque nouveau concept est d'abord appris ici, puis transposé dans votre projet personnel.

La progression suit le même chemin dans les deux projets :

Exemple de solution : https://fallinov.github.io/esig-141-pokedex-vuetify/

Mise en place

1. Démarrer le serveur API

L'API Pokédex est un serveur Express local qui fournit les données des Pokémon.

Terminal

git clone https://github.com/fallinov/2025-sfa-pokedex-api.git
cd 2025-sfa-pokedex-api
npm install
npm run dev

WebStorm

1. Ouvrir : github.com/fallinov/2025-sfa-pokedex-api
2. Cliquer sur "Code" → copier l'URL
3. WebStorm : File → New → Project from Version Control...
4. Coller l'URL → Clone
5. Terminal intégré : npm install && npm run dev

Le serveur démarre sur le port 3535. Vérifiez que l'API répond : ouvrez http://localhost:3535/pokemons dans votre navigateur.

Deux projets, deux terminaux

Pendant le cours, vous aurez deux projets ouverts dans WebStorm :

• L'API Pokédex (terminal avec npm run dev → port 3535)
• Le Pokédex Vuetify (terminal avec npm run dev → port 3000)

Les deux doivent tourner en même temps.

2. Cloner le projet Pokédex

Créer votre copie du projet

1. Ouvrir le dépôt template : github.com/fallinov/esig-141-pokedex-vuetify
2. Cliquer sur "Use this template" → "Create a new repository"
3. Repository name : pokedex-vuetify
4. Visibilité : Public
5. Cliquer sur "Create repository"

Terminal

git clone https://github.com/VOTRE-PSEUDO/pokedex-vuetify.git
cd pokedex-vuetify
npm install
npm run dev
# → Ouvrir http://localhost:3000

WebStorm

1. Copier l'URL de votre dépôt
2. WebStorm : File → New → Project from Version Control...
3. Coller l'URL → Clone
4. Terminal intégré : npm install && npm run dev
5. Ouvrir http://localhost:3000

Structure du projet

src/
├── components/         # Composants réutilisables (auto-importés)
│   └── AppHeader.vue   # Barre de navigation
├── pages/              # Chaque fichier .vue = une route automatique
│   ├── index.vue       # Page d'accueil (/)
│   └── [...path].vue   # Page 404
├── plugins/            # Configuration Vuetify, Pinia, Router
├── stores/             # Magasins Pinia (état global)
│   └── index.js        # Instance Pinia (vide)
├── styles/
│   └── settings.scss   # Personnalisations SCSS + animations
├── utils/              # Fonctions utilitaires
│   └── imageUrl.js     # Helper pour les chemins d'images
├── App.vue             # Composant racine (layout)
└── main.js             # Point d'entrée

Routing automatique : créer un fichier dans src/pages/ crée automatiquement une route. Par exemple, src/pages/favoris.vue → route /favoris.

Auto-import : ref, computed, onMounted, useRoute, useRouter sont disponibles sans import dans les <script setup>.

SCSS — qu'est-ce que c'est ?

Le fichier src/styles/settings.scss utilise SCSS (Sassy CSS), un préprocesseur CSS qui ajoute des fonctionnalités au CSS standard : variables, imbrication, mixins, etc.

Dans ce projet, SCSS est déjà configuré par Vuetify via le plugin vite-plugin-vuetify. Vous n'avez rien à installer. Le fichier settings.scss contient les personnalisations Vuetify et les animations CSS globales (comme @keyframes heartbeat).

Pour activer SCSS dans un autre projet Vite (sans Vuetify) :

npm install -D sass

C'est tout — Vite détecte automatiquement les fichiers .scss après l'installation.

Documentation : SCSS officiel · Vite + CSS

Séquences

Séq.	Thème	Étapes
1	Setup + Composants + Routes	E1 · E2 · E3 · E4 · E5
2	Pinia (state management)	E6 · E7 · E8
3	Axios + .env + robustesse API	E9 · E10 · E11
4	Recherche, filtre, tri	E12 · E13 · E14
5	Favoris + persistance	E15 · E16 · E17
6	Formulaires + POST	E18
7	Auth + guards + suppression	E19 · E20 · E21
8	UX, responsive, polish	E22 · E23 · E24
9	Publication et déploiement	E25 · E26 · E27 · E28 · E29

Séquence 9 — Publication et déploiement

Votre Pokédex est en local — voici comment le mettre dans les mains des utilisateurs. Cette séquence présente d'abord les 6 modes de publication (théorie), puis met en pratique les deux plus accessibles : PWA et app mobile native via Capacitor.

• E25 — Modes de publication : SPA, PWA, SSG, SSR, ISR, Native — théorie + tableau récap — ~30 min — Toutes plateformes
• E26 — Transformer en PWA (vite-plugin-pwa) : installable + hors ligne — ~30 min — Toutes plateformes
• E27 — Capacitor + build Android (JDK 21, Gradle, émulateur AVD) — ~1h — Windows, Mac et Linux
• E28 — Build iOS dans Xcode (simulateur iPhone) — ~1h30 — Mac uniquement (bonus)
• E29 — Adaptations UI mobile : bottom navigation, safe areas iOS, status bar native — ~1h — Toutes plateformes

Quelle plateforme de développement ?

Votre ordinateur	E25 théorie	E26 PWA	E27 Android	E28 iOS	E29 UI mobile
Windows	Oui	Oui	Oui	Non — Xcode = macOS	Oui
Mac	Oui	Oui	Oui	Oui (bonus)	Oui
Linux	Oui	Oui	Oui	Non	Oui

Parcours recommandé

• Sur Windows ou Linux (99% des cas) : E25 → E26 (optionnel) → E27 (Android) → E29 (UI). E28 ignorée.
• Sur Mac : E25 → E26 → E27 (Android) → E28 (iOS bonus) → E29 (UI).
• Pressé(e) : E25 (théorie obligatoire) puis seulement E26 (PWA en 30 min) — vous avez déjà une app installable sans Android Studio ni Xcode.

E28 (iOS) est un bonus pour ceux qui ont un Mac — elle n'est pas requise pour valider la séquence 9.

Pas de Mac à disposition ?

Pour tester iOS sans Mac :

• Emprunter un Mac (école, ami)
• Service en ligne type MacInCloud (~20 USD/mois)
• Ou tout simplement se concentrer sur Android, qui couvre 70% du marché mondial mobile

Connexion internet requise

L'application utilise l'API en ligne https://2025-sfa-pokedex-api.vercel.app. Si vous n'avez pas internet (ou si l'API tombe), démarrez l'API en local (voir étape E25 §2) et basculez via .env.local.

Code source de référence

Repo	Branche	Description
divtec-cejef/2024-SFA-TTI-JS-Vue-Vuetify-Pokedex	magasin-API-2026	Code solution complet (séquences 1 à 8), point de départ de la séquence 9
divtec-cejef/2024-SFA-TTI-JS-Vue-Vuetify-Pokedex	feat/mobile-capacitor	Code de la séquence 9 terminée (Capacitor + UI mobile)