Workout time ! (Exo)
Workout time ! (Exo)
Consigne
On se fait un peu de remise en forme ?
Ok, l’objectif de cet exercice est simplement de manipuler et de mettre en pratique tout ce qu’on a vu dans le cours sur la navigation. Cet exercice reprend d’ailleurs plusieurs notions clés de la formation, affichage d’une liste de données, utilisation d’un ScrollView, extraction de vue (facultatif, mais recommandé pour un code propre) et bien sûr, la mise en forme de l’app.
Comme d’habitude, si tu ressens un blocage, prends le temps de revoir le cours correspondant. Il n’y a aucune notion cachée dans les exercices, si tu as suivi la formation jusqu’ici, tu as toutes les clés en main !
PS : Pour te faire gagner un peu de temps, je te fournis le modèle de données et les données correspondantes, ainsi que les images du projet (que tu retrouveras dans la partie Trucs et Astuces).
struct Workout: Identifiable {
let id = UUID()
let name: String
let image: String
let category: String
let difficulty: String
let description: String
}
let workouts = [
Workout(name: "Burpees", image: "burpee", category: "Cardio", difficulty: "Intermédiaire", description: "Un exercice complet sollicitant tout le corps."),
Workout(name: "Squats", image: "squat", category: "Musculation", difficulty: "Facile", description: "Idéal pour renforcer les jambes et les fessiers."),
Workout(name: "Push-ups", image: "pompes", category: "Musculation", difficulty: "Intermédiaire", description: "Un classique pour le haut du corps et les bras."),
Workout(name: "Jump Rope", image: "rope", category: "Cardio", difficulty: "Avancé", description: "Parfait pour améliorer l'endurance et la coordination."),
Workout(name: "Plank", image: "plank", category: "Gainage", difficulty: "Intermédiaire", description: "Un exercice statique pour un gainage efficace.")
]
Maquette
. Trucs et astuce
→ Dans la vue enfant, tu remarqueras un trait qui sépare les éléments. Tu peux très bien utiliser un Rectangle avec une hauteur très fine pour créer cette ligne, mais il y a encore plus simple, SwiftUI possède un composant Divider() spécialement conçu pour cet usage.
→ Si tu observes bien les images, tu remarqueras un léger dégradé de noir à transparent (Color.clear). Pour reproduire cet effet, pense à utiliser le modificateur .overlay().
→ Sur cet exercice, j’ai changé la couleur du bouton “Back” (le retour de navigation), il est en .purple ici. Comment j’ai fait ? Excellente question… À toi de trouver !
→ Tu peux télécharger les images du projet ici : Télécharger les images
Correction
Tips
Parlons un peu organisation. À partir de maintenant, les exercices commencent à devenir plus conséquents en termes de structure de vues et de modèles. Plus tard, sur Pixel Swift, on verra comment utiliser des design patterns pour optimiser l’organisation du code avec une certaine logique. Mais pour l’instant, on va commencer par des bases de bon sens.
Sur un cas de figure comme cet exercice, tu devrais avoir au minimum trois fichiers, voire quatre si tu fais de l’extraction de vue pour la carte de la liste. Voici comment organiser ton projet :
→ Un fichier Swift pour le modèle de données (Workout.swift) → Il contient la structure Workout et le tableau avec les instances des workouts.
→ Un fichier pour la vue de la liste (WorkoutListView.swift) → Il affiche tous les workouts.
→ Un fichier pour la vue détail (WorkoutDetailView.swift) → Il affiche les détails d’un workout sélectionné.
→ (Bonus) Un fichier pour la carte de la liste (WorkoutCardView.swift) → Si tu extrais la vue de la carte de la liste, c’est encore plus propre.
Je souligne ici l’importance de l’organisation du code. Beaucoup de débutants négligent cette partie, et ils en paient rapidement le prix. Dès que l’application prend de l’ampleur, ils finissent perdus dans un véritable bourbier ! 😱
Ça demande juste un peu de rigueur, et le tour est joué.
Petit rappel, on en a déjà parlé durant la formation, mais sois toujours descriptif quand tu nommes tes éléments. Une vue qui liste des workouts ? WorkoutListView est parfait. En un coup d’œil, je sais exactement ce que fait la vue.
Tips
Parlons un peu organisation. À partir de maintenant, les exercices commencent à devenir plus conséquents en termes de structure de vues et de modèles. Plus tard, sur Pixel Swift, on verra comment utiliser des design patterns pour optimiser l’organisation du code avec une certaine logique. Mais pour l’instant, on va commencer par des bases de bon sens.
Sur un cas de figure comme cet exercice, tu devrais avoir au minimum trois fichiers, voire quatre si tu fais de l’extraction de vue pour la carte de la liste. Voici comment organiser ton projet :
→ Un fichier Swift pour le modèle de données (Workout.swift) → Il contient la structure Workout et le tableau avec les instances des workouts.
→ Un fichier pour la vue de la liste (WorkoutListView.swift) → Il affiche tous les workouts.
→ Un fichier pour la vue détail (WorkoutDetailView.swift) → Il affiche les détails d’un workout sélectionné.
→ (Bonus) Un fichier pour la carte de la liste (WorkoutCardView.swift) → Si tu extrais la vue de la carte de la liste, c’est encore plus propre.
Je souligne ici l’importance de l’organisation du code. Beaucoup de débutants négligent cette partie, et ils en paient rapidement le prix. Dès que l’application prend de l’ampleur, ils finissent perdus dans un véritable bourbier ! 😱
Ça demande juste un peu de rigueur, et le tour est joué.
Petit rappel, on en a déjà parlé durant la formation, mais sois toujours descriptif quand tu nommes tes éléments. Une vue qui liste des workouts ? WorkoutListView est parfait. En un coup d’œil, je sais exactement ce que fait la vue.