Ça y est, votre mission est claire et vos écrans sont prêts à être refactorisés avec le modèle MVVM. Commençons par créer le fichier ViewModel. Ce composant essentiel fera le lien entre notre interface utilisateur (la View) et nos données (le Model), permettant une gestion claire et efficace de l’application. Dans cette première étape nous allons créer une version squelette du ViewModel. Elle nous servira de base solide pour écrire les tests et migrer le code lié à la logique métier.
Initiez le fichier ViewModel
Voici une vidéo qui montre les principales étapes pour initier votre fichier ViewModel dans Xcode.
Pour rappel, dans l'architecture MVVM, ce fichier joue un rôle crucial car il permet de :
séparer la logique métier de l'interface utilisateur ;
faciliter les tests unitaires ;
améliorer la réactivité de l'application.
Maintenant que nous avons analysé l’écran "HomeScreenView", nous allons créer le fichier ViewModel correspondant.
Ouvrez votre projet Xcode.
Ajoutez un nouveau fichier.
Cliquez sur le dossier de votre projet dans la barre latérale gauche pour le sélectionner.
Cliquez surFichierdans la barre de menu en haut, puis sélectionnezNouveau et Fichier… (ou utilisez le raccourci Cmd+N).
Choisissez le type de fichier.
Dans la fenêtre qui s'ouvre, sélectionnez Fichier swift sous la section Source et cliquez sur Suivant.
Nommez le fichier.
Donnez un nom explicite à votre fichier, nommez le "HomeScreenViewModel".
Cliquez surCréerpour ajouter le fichier à votre projet.
Organisez correctement le fichier dans le projet.
Placez le fichier "HomeScreenViewModel" dans un dossier approprié, par exemple "Home" pour maintenir une structure de projet claire et organisée.
Respectez les conventions de nommage en Swift
Suivre des conventions de nommage claires est crucial pour maintenir l'organisation et la lisibilité de votre code.
Voici quelques bonnes pratiques :
Utilisez le style CamelCase pour nommer vos classes, structures et énumérations. Par exemple "HomeScreenViewModel".
Ajoutez des préfixes descriptifs pour les types spécifiques. Par exemple, pour un ViewModel, utilisez le suffixe “ViewModel” comme dans “HomeScreenViewModel”.
Choisissez des noms clairs et concis qui décrivent précisément le rôle de la classe ou du fichier.
Initialisez votre ViewModel
À présent, initialisons le fichier "HomeScreenViewModel" afin de le rendre testable. Pour cela, il vous suffit de rédiger ces quelques lignes de code.
import Foundation
final class HomeScreenViewModel {
// MARK: - Init
init() {}
}Définissez les propriétés et les fonctions
Il est temps maintenant de structurer notre ViewModel en définissant ses propriétés et ses fonctions. Ces éléments visent à gérer l'état et les comportements de notre application.
Voici une vidéo qui montre les principales étapes pour définir les propriétés et les fonctions du fichier ViewModel.
Découvrez les types de propriétés propres à SwiftUI
La bibliothèque SwiftUI met à disposition certaines annotations pour faciliter l’implémentation de comportements complexes, comme :
@ObservableObject: Utilisé pour les classes qui contiennent des données dynamiques que plusieurs Views peuvent observer ou écouter activement.@Published: Utilisé dans lesObservableObjectpour indiquer que la propriété déclenche une notification de changement, ce qui met à jour toutes les Views qui observent ou écoutent cette propriété.
Grâce à ces annotations, les Views se mettront à jour automatiquement lorsque les données changent.
Migrez le pseudo-code vers le ViewModel
Nous avons précédemment identifié les outputs et les inputs de notre application.
OK, mais quel est le lien avec les propriétés et les fonctions ?
Eh bien, les outputs seront représentés par des propriétés statiques et/ou dynamiques. Elles seront utilisées pour stocker les données et l'état de l'application.
Les inputs seront quant à eux représentés par des fonctions, avec une implémentation vide (avec des fonctions squelettes) pour que l’application puisse a minima compiler le projet sans erreur.
Regardons ensemble comment migrer le pseudo-code que nous avons réalisé plus tôt vers "HomeScreenViewModel". Pour rappel, voici notre pseudo-code précédemment créé.
// Inputs
add(_ project: Project)
deleteProject(at index: Int)
// Outputs
titleText: String
homeText: String
searchText: String
showAddProjectView: Bool
projects: [Project] Et voici un exemple de sa migration dans le fichier "HomeScreenViewModel", ce code SwiftUI utilise l’annotationObservableObject pour notifier les changements de données. Les propriétés publiées incluent searchText,showAddProjectView et une liste de projets.
Votre squelette est désormais bien en place et voici le code associé.
import SwiftUI
class HomeScreenViewModel: ObservableObject {
// MARK: - Outputs
@Published var searchText: String = ""
@Published var showAddProjectView: Bool = false
@Published var projects: [Project] = []
let titleText = "EPCollaboratif"
let homeText = "Accueil"
// MARK: - Init
init() {
}
// MARK: - Inputs
func add(_ project: Project) {
}
func deleteProject(at index: Int) {
}
}À vous de jouer
Contexte
Maintenant que vous avez compris l'importance du ViewModel dans l'architecture MVVM et avez appris à initialiser et structurer un ViewModel, il est temps de mettre ces connaissances en pratique. Vous allez créer le fichier ViewModel pour l'écran “AddTaskView” de l’application EPCollaboratif.
Consignes
Initiez le fichier ViewModel.
Définissez ses propriétés et ses fonctions.
Migrez le pseudo-code dans le fichier "AddTaskViewModel”.
Assurez-vous que le projet compile sans erreur.
Livrable
Fichier “AddTaskViewModel” avec les propriétés et les fonctions définies.
En résumé
La création du fichier ViewModel est une étape cruciale dans l'adoption du pattern MVVM, car il agit comme médiateur entre le Model et la View.
Les propriétés du ViewModel définissent l'état de l'application, tandis que les fonctions gèrent les comportements et les actions de l'utilisateur.
Utiliser les annotations SwiftUI appropriées comme
@ObservableObjectet@Publishedpermet de rendre les propriétés dynamiques.Initier les propriétés avec des valeurs par défaut et définir des fonctions squelettes dans le ViewModel permet de maintenir un projet qui compile sans erreur, ce qui est essentiel pour progresser de manière structurée et méthodique.
Maintenant que nous avons défini les propriétés et les fonctions squelettes dans notre ViewModel, nous pouvons compiler sans erreur et nous avons une base solide pour notre refactorisation. Dans la prochaine partie, nous créerons un fichier pour écrire des tests sur les inputs et outputs de notre ViewModel.
