Étape 11 — Transposition projet personnel (récap séquence 3)

Objectif

Appliquer les concepts de la séquence 3 (Axios, variables d'environnement, gestion des 3 états API) à votre projet individuel.

Ce que vous avez appris

Concept	Pokédex	Votre projet
Axios (client HTTP)	api.get('/pokemons')	api.get('/vos-données')
Plugin centralisé	src/plugins/axios.js	Même fichier, votre base URL
Variables d'environnement	VITE_API_URL dans .env	Votre URL d'API
.env.example	Modèle commité	Idem
Skeleton loader	v-skeleton-loader pendant le chargement	Adapter à vos cartes
Alerte d'erreur	v-alert si API indisponible	Message adapté à votre contexte
Mock JSON	public/mock.json avec 5 Pokémon	Votre fichier de données test

Checklist projet perso

Avant de quitter, vérifiez que votre projet individuel a :

• axios installé (npm install axios)
• src/plugins/axios.js configuré avec baseURL depuis .env
• .env avec VITE_API_URL=http://localhost:XXXX
• .env.example commité (sans secrets)
• .env dans .gitignore
• Store migré de fetch() vers api.get()
• v-skeleton-loader affiché pendant le chargement
• v-alert affiché si l'API ne répond pas
• public/mock.json avec des données de test
• Test : couper l'API → l'alerte s'affiche (pas d'écran blanc)
• 0 erreurs dans la console (quand l'API tourne)
• Commit poussé sur GitHub
• Version en ligne vérifiée (Vercel ou GitHub Pages)

Récapitulatif — fetch vs Axios

// ❌ Avant (fetch brut)
const response = await fetch('http://localhost:3535/pokemons')
const data = await response.json()

// ✅ Après (Axios configuré)
import api from '@/plugins/axios'
const response = await api.get('/pokemons')
const data = response.data

Aspect	fetch()	Axios
URL	Complète à chaque appel	Relative (base URL centralisée)
JSON	await response.json()	Automatique (response.data)
Erreurs HTTP	Pas d'exception sur 404/500	Exception automatique
Headers	Manuels à chaque appel	Configurés une fois
Auth (plus tard)	Header manuel	Intercepteur automatique

Récapitulatif — Les 3 états API

Ne jamais oublier un de ces 3 états. Un utilisateur qui voit un écran blanc ne sait pas si l'app charge, si elle a planté, ou s'il n'y a pas de données.

Prochaine séance — Recherche et tri

La semaine prochaine, on ajoutera la recherche dynamique et le tri alphabétique avec des propriétés calculées (computed). Préparez-vous à comprendre :

• computed() — une valeur qui se recalcule automatiquement quand ses dépendances changent
• Array.filter() — filtrer un tableau selon une condition
• Array.sort() + localeCompare() — trier par ordre alphabétique

Préparation oral — Concepts clés de la séquence 3

Questions que vous devez savoir expliquer :

1. Pourquoi utiliser Axios plutôt que fetch ? Axios offre une configuration centralisée (base URL, headers, intercepteurs) et parse automatiquement le JSON. Dans un vrai projet avec authentification et gestion d'erreurs, c'est indispensable.

2. Qu'est-ce qu'une variable d'environnement ? Une valeur de configuration stockée en dehors du code source. Elle permet de changer le comportement de l'application (URL d'API, mode debug, clés) sans modifier le code.

3. Pourquoi .env ne doit pas être commité ? Il peut contenir des secrets (clés API, mots de passe). On commite .env.example comme modèle, et chaque développeur crée son propre .env.

4. Quels sont les 3 états d'un appel API ? Loading (requête en cours), Error (requête échouée), Data (requête réussie). Les trois doivent toujours être gérés dans l'interface.

5. Que fait import.meta.env.VITE_API_URL ? Lit la variable VITE_API_URL depuis le fichier .env. Le préfixe VITE_ est obligatoire pour que Vite expose la variable au code côté client.

6. Qu'est-ce qu'un mock JSON et pourquoi en créer un ? C'est un fichier de données statiques (ex : public/mock.json) qui simule la réponse de l'API. Il permet de développer et tester l'interface sans dépendre du serveur backend. Utile quand l'API n'est pas encore prête ou quand on veut travailler hors-ligne.