• 12 heures
  • Difficile

Ce cours est visible gratuitement en ligne.

course.header.alt.is_video

course.header.alt.is_certifying

J'ai tout compris !

Mis à jour le 05/01/2022

Plongez-vous dans le code

Connectez-vous ou inscrivez-vous gratuitement pour bénéficier de toutes les fonctionnalités de ce cours !

Dans ce chapitre, nous allons parler code ! Je sais, ça fait du bien. Je vous vois déjà reprendre des couleurs.

Je vous propose qu'on explore rapidement notre projet pour que vous ne soyez pas perdu par la suite!

Commençons par la View

Évidemment, l'application est construite selon le modèle MVC :

Nous retrouvons des dossiers Model, Controller et View dans l’arborescence de Cekikapeye
L’arborescence de Cekikapeye

Et je vous propose de commencer par la vue avec le storyboard.

Storyboard

Les 4 interfaces ListViewController, AddSpendingViewController, PeopleViewController et SettingsViewController, plus NavigationController
Les 4 interfaces, plus Navigation Controller

Rien de très particulier ici. On a déjà parlé des 4 interfaces de cette application dans le premier chapitre, et vous les retrouvez naturellement dans le storyboard :

  • ListViewController  qui affiche la liste des dépenses.

  • AddSpendingViewController  pour ajouter une dépense.

  • PeopleViewController  pour ajouter un participant.

  • SettingsViewController  pour modifier la monnaie utilisée.

CircleButton

Côté vue, vous avez également une classe CircleButton  qui permet simplement d'obtenir une forme arrondie pour certains boutons, comme le bouton + de la page d'accueil.

Le rendu de CircleButton : une cercle bleu en bas à droite de l’écran avec un +
CircleButton

Découvrez le Model

Allons maintenant côté modèle. Il y a deux fichiers.

Spending

Le premier, Spending.swift  , contient une structure très simple qui gère les dépenses :

struct Spending {
var content: String
var amount: Double
}

content  est une description de la dépense, et amount  , le montant.

SpendingRepository

Ensuite, vous avez SpendingRepository.swift  qui est une classe dont le rôle consiste à sauvegarder des données dans un tableau spendings  .

final class SpendingRepository {
// MARK: - Properties
private(set) var spendings = [Spending]()
static let sharedInstance = SpendingRepository()
// MARK: - Initializer
init() {}
// MARK: - Repository
func add(spending: Spending) {
spendings.append(spending)
}
}

Appréhendez le Controller

Il y a bien sûr 4 contrôleurs, un par interface.

ListViewController

Ce contrôleur affiche la liste des dépenses récupérées dans le tableau spendings  . C'est le cas d'école de l'implémentation d'une Table View, donc rien à dire là-dessus.

AddSpendingViewController

C'est la classe qui gère l'ajout d'une dépense. Dans cette classe, on récupère simplement les informations des champs de texte lors de l'appui sur le bouton Save, et on ajoute une dépense dans le tableau spendings.

Vous avez ensuite deux extensions :

  • La première permet de remplir notre PickerView. Pour l'instant, il est caché, mais il servira en partie 3 à sélectionner la personne qui a effectué la dépense.

  • La seconde gère la disparition du clavier.

PeopleViewController

Cette classe permet d'ajouter des personnes. Dans l'extension, vous avez une méthode qui permet de rajouter une personne lors de l'ajout sur le bouton Terminé  du clavier. Cette personne est ajoutée à la suite des éventuelles précédentes dans la Text View.

SettingsViewController

Vous avez une seule méthode intéressante ici qui est appelée lors de l'appui de n'importe lequel des trois boutons du bas : changeCurrency  . Cette méthode modifie le label qui affiche la monnaie utilisée par l'utilisateur en récupérant cette information sur le texte du bouton tapé.

Vous noterez que cette méthode est incomplète. En effet, l'information du changement de monnaie n'est enregistrée nulle part ! Nous allons corriger ça ensemble dans la prochaine partie.

En résumé

  • L’application Cekikapeye est construite avec le modèle MVC :

    • En ce qui concerne la vue, on retrouve 4 interfaces dans le storyboard.

    • Côté modèle, nous avons les 2 fichiers, Spending et SpendingRepository. 

    • Enfin, nous avons 4 contrôleurs, un pour chaque interface.

Je vous ai concocté un premier quiz pour valider vos connaissances de cette première partie. On se retrouve dans la partie 2 – à tout de suite !

Exemple de certificat de réussite
Exemple de certificat de réussite