Lab 2.7 : Mini-Projet de Modernisation

Projet Final du Jour 2 | ← SlidesDurée : 1 heure Projet d'exemple : hackathon-starter

Le Scénario

Votre équipe a décidé de moderniser un module hérité. En utilisant tout ce que vous avez appris aujourd'hui, vous allez :

1. Planifier les modifications (Plan Mode)
2. Ajouter des filets de sécurité (Génération de Tests)
3. Implémenter une petite fonctionnalité (TDD)
4. Refactoriser le code existant (Refactoring Sécurisé)
5. Valider votre travail (Intégration Git)

Objectifs d'Apprentissage

Ce projet final intègre toutes les compétences du Jour 2 :

• Plan Mode pour l'analyse
• Génération de Tests pour la sécurité
• TDD pour les nouvelles fonctionnalités
• Refactoring Sécurisé pour les améliorations
• Git pour la gestion de versions

Prérequis

• Avoir complété tous les labs du Jour 2 (2.1, 2.2, 2.3, 2.4)
• Projet hackathon-starter configuré

Configuration

# Naviguez vers le projet du projet final
cd sample-projects/hackathon-starter

# Créez une nouvelle branche pour ce travail
git checkout -b day2-capstone

# Lancez Claude Code
claude

La Mission

Complétez ces 6 phases en 1 heure :

Phase	Tâche	Temps
1	Planification	10 min
2	Tests	15 min
3	Fonctionnalité TDD	15 min
4	Refactoring	12 min
5	(Bonus) Hook	5 min
6	Commit	3 min

---

Phase 1 : Créer un Plan

Temps : 10 minutes

Utilisez Plan Mode pour analyser un module.

claude --permission-mode plan

Tâche : Créez un plan de refactoring pour un contrôleur ou un service.

Créez un plan pour améliorer le contrôleur utilisateur. Identifiez :
1. Les code smells
2. La couverture de tests manquante
3. Les opportunités de refactoring
4. L'évaluation des risques

Sortie : Enregistrez votre plan dans REFACTORING_PLAN.md

Critères de réussite :

• [ ] Plan Mode utilisé
• [ ] 3+ améliorations identifiées
• [ ] Risques documentés

---

Phase 2 : Générer des Tests

Temps : 15 minutes

Ajoutez des tests pour le code que vous prévoyez de modifier.

Quittez d'abord Plan Mode :

/exit

Générez les tests :

Générez des tests pour [la fonction que vous prévoyez de refactoriser]. Incluez :
- Les tests du cas nominal
- Les cas limites
- Les scénarios d'erreur

Exécutez les tests :

npm test

Critères de réussite :

• [ ] Fichier de test créé
• [ ] Au moins 5 tests écrits
• [ ] Tous les tests passent

---

Phase 3 : TDD pour une Petite Fonctionnalité

Temps : 15 minutes

Ajoutez une petite fonctionnalité en utilisant le TDD.

Fonctionnalités suggérées :

• Ajouter un horodatage "dernière connexion" à l'utilisateur
• Ajouter une validation d'URL de photo de profil
• Ajouter un indicateur de force de mot de passe

Cycle TDD :

# ROUGE : Écrire un test qui échoue
Écrivez un test pour [fonctionnalité]. Le test devrait échouer car la fonctionnalité n'existe pas.

# Exécutez les tests - devrait échouer
npm test

# VERT : Implémenter
Implémentez le code minimum pour faire passer le test.

# Exécutez les tests - devrait passer
npm test

# REFACTORISER : Améliorer
Améliorez l'implémentation sans changer le comportement.

# Exécutez les tests - devrait toujours passer
npm test

Critères de réussite :

• [ ] Commencé avec un test qui échoue (ROUGE)
• [ ] Fait passer le test (VERT)
• [ ] Amélioré le code (REFACTORISER)
• [ ] Tous les tests passent

---

Phase 4 : Refactoriser le Code Existant

Temps : 12 minutes

Améliorez le code existant en utilisant votre filet de sécurité.

Cible : Choisissez quelque chose de votre plan de la Phase 1.

Étapes de refactoring :

# Étape 1 : Vérifier la base de référence
npm test

# Étape 2 : Faire une amélioration
Refactorisez [élément spécifique] pour améliorer [la lisibilité/la maintenabilité].

# Étape 3 : Vérifier
npm test

# Étape 4 : Répéter

Critères de réussite :

• [ ] Au moins 2 refactorings complétés
• [ ] Les tests passent après chaque modification
• [ ] Le code est plus propre

---

Phase 5 : (Bonus) Configurer un Hook

Temps : 5 minutes

Configurez un hook de linting automatique.

Créez la configuration du hook :

Aidez-moi à configurer un hook PostToolUse qui exécute le linter après chaque modification de fichier.

Cela garantit que le style de code est maintenu automatiquement.

Critères de réussite :

• [ ] Hook configuré dans les paramètres
• [ ] Le hook se déclenche lors de la modification de fichier
• [ ] Le linting s'exécute automatiquement

---

Phase 6 : Valider Votre Travail

Temps : 3 minutes

Créez un commit propre avec vos modifications.

Créez un commit pour toutes les modifications que nous avons faites. Incluez :
- Ce qui a été ajouté
- Ce qui a été refactorisé
- La couverture de tests ajoutée

Vérifiez :

git log -1
git diff HEAD~1 --stat

Critères de réussite :

• [ ] Toutes les modifications validées
• [ ] Message de commit descriptif
• [ ] Branche propre

---

Liste de Vérification Récapitulative

Avant de terminer, vérifiez :

• [ ] Plan créé - Documenté dans REFACTORING_PLAN.md
• [ ] Tests ajoutés - Couverture augmentée
• [ ] Fonctionnalité implémentée - En utilisant le cycle TDD
• [ ] Code refactorisé - Plus propre qu'avant
• [ ] Modifications validées - Historique Git propre
• [ ] Tous les tests passent - Filet de sécurité intact

---

Le Flux de Travail du Jour 2

Vous avez maintenant pratiqué le flux de travail complet de modernisation :

PLANIFIER → TESTER → IMPLÉMENTER → REFACTORISER → VALIDER
     │         │          │              │            │
     │         │          │              │            └─ Contrôle de version
     │         │          │              └─ Améliorer la qualité
     │         │          └─ Ajouter des fonctionnalités en sécurité (TDD)
     │         └─ Construire le filet de sécurité
     └─ Réfléchir avant d'agir

---

Questions de Réflexion

Après avoir complété le projet final :

1. Quelle phase a été la plus précieuse ?
2. Que feriez-vous différemment la prochaine fois ?
3. Combien plus rapide était-ce avec Claude ?
4. Qu'avez-vous appris sur les modifications de code sécurisées ?

---

Livrables

À la fin de ce projet final, vous devriez avoir :

1. REFACTORING_PLAN.md avec l'analyse
2. Nouveau(x) fichier(s) de test avec couverture
3. Nouvelle fonctionnalité implémentée via TDD
4. Code refactorisé (plus propre qu'avant)
5. Commit Git avec toutes les modifications
6. Confiance pour moderniser du code hérité en toute sécurité

---

Félicitations !

Vous avez complété le Jour 2 de Claude pour les Développeurs.

La Suite

Demain (Jour 3) : Vous apprendrez des flux de travail avancés :

• Extended Thinking pour les problèmes complexes
• Commandes slash personnalisées
• Intégration MCP
• Flux de travail Multi-Claude
• Automatisation CI/CD

Continuer vers le Jour 3 →

Reposez-vous bien - le Jour 3 est celui où vous passez au niveau supérieur !