#Looter

Nous allons développer une application très simple qui permet de gérer une liste des loot de jeux vidéos. Notre application aura une interface simple que vous pourrez personnaliser et améliorer une fois la base terminée.

#📌 Modalités / Rendu

🧑‍🏫 Projet évalué

• Modalités :
  • Travail en solo
  • Durée : ~7h à ~14h
  • Créez un projet public sur Github
  • Incluez dans le projet ou dans un gist un fichier Answers.md avec les réponses aux questions que vous allez rencontrer durant le projet.
  • Notez pour chaque reponse, le numéro de l’étape, son nom et le numéro de l’exercice.
• Dans toutes vos fonctions utilisez des paramètres nommés et des étiquettes de paramètres explicites.
• Vous devrez terminer l’application chez vous pour la prochaine fois.

#L’app

Voici un exemple d’implémentation de ce que vous allez réaliser :

#Création d’un Projet SwiftUI

1. Ouvrez Xcode et sélectionnez “Create a new Xcode project”.
2. Choisissez le modèle “iOS” et sélectionnez “App”.
3. Choisissez “SwiftUI” comme interface utilisateur.
4. Entrez un nom pour votre projet et cliquez sur “Next”.
5. Choisissez un emplacement pour enregistrer votre projet et cliquez sur “Create”.

Vous venez de créer un projet SwiftUI de base !

#Structure du Projet

Un projet SwiftUI de base a une structure simple. Ouvrez le fichier ContentView.swift qui est la vue principale par défaut. Vous verrez quelque chose comme ceci :

import SwiftUI

struct ContentView: View {
    var body: some View {
        Text("Hello, SwiftUI!")
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

• ContentView est votre vue principale. Elle adopte le protocole View.
• body est une propriété calculée qui retourne la structure de la vue que vous souhaitez afficher.
• Text("Hello, SwiftUI!") est une vue texte affichant le texte.

#Liste d’item

Nous allons commencer par simplement lister une liste imaginaire et écrite en dur dans le code d’item.

Tout d’abord nos items ne seront que des String et nous allons les stocker dans un tableau [String] que nous allons appeler loot.

struct ContentView: View {
    var loot = ["Epée", "Bouclier", "Armure"]

    var body: some View {
        List(loot) { item in
            Text(item)
        }
    }
}

#🔧 Exercice 1

1. Essayez de lancer l’application (ou de la visualiser dans la preview), XCode devrait vous afficher une erreur. Que manque-t-il ? Et pourquoi ?
2. Corrigez l’erreur et compiler l’application. Vous devriez voir apparaitre une liste avec les items que nous avons défini.

Vous devriez avoir ça

#Fonction d’ajout

Nous allons créer un bouton qui permettra d’ajouter un item à notre liste. Pour cela nous allons créer une fonction addItem() qui va ajouter un item à notre tableau loot.

struct ContentView: View {
    var loot = ["Epée", "Bouclier", "Armure"]

    func addLoot() {
        loot.append("Magie de feu")
    }

    var body: some View {
        List {
            Button(action: {
                addLoot()
            }, label: {
                Text("Ajouter")
            })

            ForEach(loot, id: \.self) { item in
                Text(item)
            }
        }
    }
}

#🔧 Exercice 2

• Expliquez le changement que j’ai effectué par rapport à l’exemple précédent.
• Pourquoi utiliser un ForEach ? Quel est son rôle ? Et pourquoi séparer le bouton du ForEach ?

#🔧 Exercice 3

• Testez ce code, fonctionne-t-il ? Pourquoi ?
• Corrigez le code pour que le clique sur bouton “Ajouter” fonctionne, utilisez @State pour cela.
• Expliquez pourquoi maintenant cela fonctionne ?

🙌 Si tout fonctionne : Bravo, vous venez d’effectuer un changement d’état. L’avantage est que seul la vue nécessitant un changement à été rechargée grâce à id: \.self et @State.