Fake AirBnB (Exo)
Fake AirBnB (Exo)
Consigne
On va commencer à faire des exercices vraiment intéressants à partir de maintenant, et c’est une excellente nouvelle ! Si tu es arrivé jusqu’ici et que tu as compris les notions précédentes, c’est que tu peux commencer à t’amuser un peu plus.
Dans cet exercice, on va combiner les deux derniers cours sur la création de tes propres composants et sur le @Binding, avec une interface inspirée d’Airbnb. L’idée est d’avoir trois boutons permettant de sélectionner une ville (Paris, New York et Tokyo). En fonction de la ville sélectionnée, tu devras afficher deux cartes proposant des logements dans cette ville. Si ce n’est pas clair, regarde le GIF ci-dessous pour mieux comprendre l’objectif.
Une seule règle s’impose pour cet exercice, tu dois extraire tes vues. Tout ce qui se répète doit avoir sa propre vue. Pose-toi cette question, qu’est-ce qui se répète dans cette app ? Les boutons de sélection des villes ? Les cartes des logements ? Exactement, ça fait deux composants à isoler. Le reste, c’est de la mise en forme, et ça, tu sais déjà faire.
Maquette
. Trucs et astuce
→ Dans cet exercice, il y a un minimum de trois vues, il faudra donc créer trois fichiers distincts. Comme d’habitude, pense à bien les nommer de manière claire et précise.
→ Le modificateur .constant() permet de faker une valeur immuable dans une Preview lorsqu’une View attend un @Binding, évitant ainsi d’avoir à gérer un @State juste pour tester l’affichage. Ça te sera utile si tu veux prévisualiser ton bouton extrait par exemple.
→ La structure ContentView n’a plus d’intérêt pour nous à ce stade. C’est une structure par défaut mise à disposition par Apple lorsque tu ouvres un nouveau projet dans Xcode, mais elle ne décrit rien de spécifique à notre projet. Supprime-la et n’oublie pas de renommer la vue principale dans le fichier racine, celui qui se termine par App.
→ Cet exercice n’est en réalité pas très compliqué (juste des vues extraites, de la mise en forme et une petite condition en fonction de la ville sélectionnée). Prends le temps de bien analyser, ne te précipite pas. Si besoin, n’hésite pas à poser sur papier ce que tu dois faire, ça peut parfois t’aider à y voir plus clair.
→ Tu peux télécharger les images du projet ici : Télécharger les images
Correction
Tips
Les images que je te fournis pour cet exercice ont été compressées, mais elles restent beaucoup trop grandes dans leur état actuel. Je te recommande de les redimensionner en fonction de leur utilisation, par exemple 300 x 170 px si elles sont affichées dans une carte.
Pourquoi ? Parce que tu as tout à y gagner. Sur une application mobile, une image en 2000 x 1500 px n’a aucun intérêt, elle est bien trop grande pour l’écran et sera lourde à charger, ce qui impactera directement les performances de ton application. Cependant, la taille idéale dépend du contexte :
→ Pour une image dans une carte ou une miniature, 300 x 170 px est un bon compromis.
→ Si l’image est affichée en pleine largeur sur un iPhone grand format (ex. iPhone 15 Pro Max), il vaut mieux une résolution autour de 750 x 400 px minimum pour un bon rendu sur un écran Retina.
Pense aussi à utiliser le bon format d’image. Pour une photo, JPEG est généralement plus adapté que PNG, qui est préférable si tu as besoin de transparence.
→ Tu peux utiliser ce site pour travailler tes images : iloveimg
Tips
Les images que je te fournis pour cet exercice ont été compressées, mais elles restent beaucoup trop grandes dans leur état actuel. Je te recommande de les redimensionner en fonction de leur utilisation, par exemple 300 x 170 px si elles sont affichées dans une carte.
Pourquoi ? Parce que tu as tout à y gagner. Sur une application mobile, une image en 2000 x 1500 px n’a aucun intérêt, elle est bien trop grande pour l’écran et sera lourde à charger, ce qui impactera directement les performances de ton application. Cependant, la taille idéale dépend du contexte :
→ Pour une image dans une carte ou une miniature, 300 x 170 px est un bon compromis.
→ Si l’image est affichée en pleine largeur sur un iPhone grand format (ex. iPhone 15 Pro Max), il vaut mieux une résolution autour de 750 x 400 px minimum pour un bon rendu sur un écran Retina.
Pense aussi à utiliser le bon format d’image. Pour une photo, JPEG est généralement plus adapté que PNG, qui est préférable si tu as besoin de transparence.
→ Tu peux utiliser ce site pour travailler tes images : iloveimg