NikeStore (Exo)
NikeStore (Exo)
Consigne
Pour prendre en main et apprendre à manipuler @EnvironmentObject, je te propose cette fois une petite app complète. Elle te prendra un peu plus de temps que les exercices précédents, tout simplement parce qu’il y a plus de vues à gérer. Mais si tu as bien suivi le dernier exercice et que tu es à jour sur toutes les notions vues jusqu’à maintenant, cet exercice sera plutôt simple à réaliser.
L’idée est de créer une app de type store Nike. On retrouvera trois familles d’articles : les sneakers, les t-shirts et enfin les shorts. Un utilisateur pourra ajouter n’importe quel article à son panier. Pour comptabiliser les articles, tu devras créer une classe observable avec une propriété @Published de type Int, initialisée à 0 (car le panier est censé être vide au départ).
Le bouton d’ajout sur chaque fiche produit permettra d’incrémenter cette propriété. Cette valeur sera ensuite lue dans toute l’app grâce à @EnvironmentObject. Pour vérifier que la valeur se met bien à jour sur toutes les piles de vues, tu ajouteras sur chaque famille (sneakers, t-shirts, shorts) une toolbar avec un panier affichant un badge indiquant le nombre d’articles ajoutés.
Ce caddie redirigera l’utilisateur vers un écran panier. Sur cette vue, on retrouvera également le total d’articles présents dans le panier, c’est-à-dire la valeur actuelle de la propriété observable. Et pour finir, tu ajouteras un bouton simulant un paiement. Lorsqu’on appuie dessus, une alerte apparaît pour féliciter l’utilisateur de son achat. Une fois l’alerte validée, le panier est remis à zéro.
À toi de jouer maintenant !
.
→ Tu peux télécharger les images du projet ici : Télécharger les images
Maquette
Tips
En soi, cet exercice n’a rien de compliqué, mais il demande pas mal de fichiers. Je t’invite ici à être bien carré dans la création de tes composants. On a déjà vu ça dans la formation précédente, je te mets d’ailleurs en lien le cours sur le sujet dans la section « liens utiles ».
C’est important d’isoler tes composants, comme le bouton qui se retrouve sur chaque écran, ou encore la carte produit qui s’affiche dans la liste. Plus tu isoleras correctement tes composants, plus ton code sera maintenable, clair et lisible.
Autre tips, pour afficher un badge sur le caddie, j’ai simplement utilisé un Text en overlay sur l’icône, avec un fond et un .clipShape(Circle) pour lui donner une forme circulaire.
Enfin, comme pour chaque projet, je te fournis la liste des SF Symbols utilisés :
→ Pour le panier : « cart »
→ Pour les icônes de la TabView : shoe.fill pour les sneakers, tshirt.fill pour les t-shirts, et figure pour les shorts
→ Pour le bouton d’ajout au panier : cart.fill
→ Et pour l’icône de paiement : creditcard.fill
Embed
Note
Toujours dans les raccourcis qui font gagner du temps, quand tu veux accéder rapidement à un élément de ton app, par exemple une classe, une struct, une fonction ou une View que tu as créée, tu peux simplement faire un clic droit (ou un double clic sur le trackpad) sur son nom, puis sélectionner la première option, Jump to Definition.
Cette option te téléporte directement dans le fichier où se trouve ta cible. Par exemple, si tu cliques sur Cart() dans ton code, tu seras immédiatement redirigé vers la déclaration de la classe Cart.
Les raccourcis clavier
Note
Toujours dans les raccourcis qui font gagner du temps, quand tu veux accéder rapidement à un élément de ton app, par exemple une classe, une struct, une fonction ou une View que tu as créée, tu peux simplement faire un clic droit (ou un double clic sur le trackpad) sur son nom, puis sélectionner la première option, Jump to Definition.
Cette option te téléporte directement dans le fichier où se trouve ta cible. Par exemple, si tu cliques sur Cart() dans ton code, tu seras immédiatement redirigé vers la déclaration de la classe Cart.