Votre ViewModel est à jour. Il est temps maintenant d’associer la View au ViewModel et de simplifier le code de la View pour une meilleure lisibilité. Notre objectif est d’avoir une View simple et dépourvue de logique métier.
Intégrez le ViewModel à la View
Pour intégrer correctement le ViewModel dans la View, nous allons tout d’abord devoir injecter le premier dans le second. Il s’agit en fait de créer une dépendance entre les deux fichiers. Plusieurs possibilités s’offrent alors à nous :
Déclarer une variable publique : Vous pouvez rendre le ViewModel accessible en le déclarant comme une variable publique dans la View. Cette approche est simple mais peut ne pas être la meilleure en termes d'encapsulation des données.
Déclarer une variable privée via le constructeur : Cette méthode consiste à déclarer le ViewModel comme une variable privée dans la View et à l'initialiser via le constructeur de la View. Cela renforce l'encapsulation et la sécurité des données, car le ViewModel ne peut être modifié directement par d'autres composants.
Nous devons ensuite injecter les dépendances via des propriétés comme @StateObject ou@ObservedObject.
Par exemple, nous allons initialiser le ViewModel “HomeScreenViewModel” dans la View “HomeScreenView” comme suit.
struct HomeScreenView: View {
@StateObject var viewModel = HomeScreenViewModel(projects: mockData)
var body: some View {
// Votre code ici
}
}Voici une vidéo qui montre les principales étapes pour intégrer le ViewModel dans la View. Dans le cas d’unestruct, le constructeur est automatiquement généré pour les propriétés exposées, j’ai donc choisi implicitement la seconde option pour cette intégration.
Simplifiez le code de la View
Pour remplacer la logique métier dans la View, il faut suivre les étapes suivantes.
Se placer sur les inputs et outputs listés précédemment.
Les supprimer.
Faire les appels nécessaires pour exécuter les actions spécifiées dans le ViewModel et répondre aux changements de données. Cela assure ainsi que la View reste synchronisée avec l'état actuel de l'application.
Voici un exemple de code.
// Avant
Button(action: {
// Logique métier directement dans la View
}) {
Image(systemName: "plus")
}
// Après
Button(action: {
viewModel.addNewProject()
}) {
Image(systemName: "plus")
}Testez et validez l'intégration
Une fois le ViewModel intégré dans la View, il est essentiel de tester cette intégration pour s'assurer que toutes les interactions fonctionnent comme prévu et que les données sont correctement affichées et mises à jour. Pour cela, voici les étapes à suivre.
Exécutez l'application et interagissez avec les différentes fonctionnalités.
Lancez l'application dans le simulateur ou sur un appareil réel.
Interagissez avec toutes les fonctionnalités pour vérifier que les interactions utilisateur, les mises à jour de l'interface utilisateur et les transitions entre les écrans fonctionnent correctement.
Mettez à jour les tests unitaires existants.
Ajoutez des tests pour inclure les nouvelles intégrations et interactions.
Vérifiez que tous les tests passent avec succès, en couvrant tous les cas possibles.
Utilisez les rapports de tests pour identifier et corriger les problèmes potentiels.
Consultez les rapports de test générés après l'exécution des tests unitaires.
Identifiez les échecs ou les avertissements et corrigez les problèmes potentiels.
Assurez-vous d'une couverture de test élevée pour garantir la fiabilité du code.
Pour voir le fichier final de la View, jetez un œil au fichier “HomeScreenView”.
À vous de jouer
Contexte
Vous avez mis à jour votre ViewModel pour gérer la logique métier de manière efficace. Il est maintenant temps de simplifier votre fichier "AddTaskView" et d'intégrer le ViewModel pour assurer une interface utilisateur fluide et maintenable.
Consignes
Injectez le ViewModel dans la View.
Remplacez la logique métier par des appels aux inputs et aux outputs du ViewModel.
Testez et validez l'intégration.
Livrable
Un fichier View simplifié, dépourvu de logique métier, interagissant correctement avec le ViewModel.
Des tests unitaires mis à jour validant les nouvelles intégrations.
En résumé
Pour améliorer la lisibilité et la maintenabilité du code, votre fichier View doit être dépourvu de toute logique métier
La View doit uniquement gérer l'affichage et les interactions utilisateur, tandis que le ViewModel gère toute la logique métier et les manipulations de données.
Il faut utiliser l'injection des dépendances pour relier le ViewModel à la View.
L'intégration du ViewModel dans la View utilise les propriétés
@StateObjectou@ObservedObject.Les tests de l'intégration du ViewModel consistent à exécuter l'application et à vérifier les interactions.
Maintenant que vous avez simplifié votre fichier View et intégré efficacement le ViewModel, vous pouvez tester une dernière fois votre application pour vérifier que tout fonctionne correctement et que les modifications apportées n'ont pas introduit de nouveaux problèmes.
