Exercice : ajouter ViewModel à l'application DessertClicker

1. Avant de commencer

Introduction

DessertClicker fonctionne avec les données et l'état intégrés. Dans cet exercice, vous supprimerez l'état, les données et la logique intégrés de MainActivity et les déplacerez vers un objet ViewModel.

Extraire la logique d'une application de la vue pour en faire un ViewModel est une pratique moderne pour le développement sur Android. Cette pratique présente les avantages suivants :

• Le code devient plus lisible pour les autres développeurs.
• Le code devient plus facile à tester.
• Plusieurs développeurs peuvent travailler simultanément sur une application sans interférer avec le travail des autres développeurs.

Le code de solution est disponible à la fin, mais essayez de résoudre les exercices par vous-même avant de consulter les réponses. La solution représente un moyen d'implémenter l'application.

Conditions préalables

• Vous avez suivi la formation aux principes de base d'Android dans Compose via l'atelier de programmation ViewModel et état dans Compose.

Ce dont vous avez besoin

• Un ordinateur avec un accès à Internet et Android Studio installé
• Le code de solution de l'application DessertClicker

Objectifs de l'atelier

Dans ces exercices pratiques, vous améliorerez l'architecture de l'application DessertClicker en ajoutant un ViewModel pour gérer les données et la logique de l'application.

Ces exercices sont divisés en sections dans lesquelles vous devrez effectuer les étapes suivantes individuellement :

• Mettre à jour et ajouter les dépendances nécessaires
• Créer une classe ViewModel

2. Télécharger le code de démarrage

1. Dans Android Studio, ouvrez le dossier basic-android-kotlin-compose-training-dessert-clicker.
2. Ouvrez le code de l'application DessertClicker dans Android Studio.

3. Configurer des dépendances

1. Ajoutez la variable suivante au fichier build.gradle de votre projet :

buildscript {
   ext {
       ...
       lifecycle_version = '2.5.1'
   }
}

2. Ajoutez la dépendance suivante au fichier app/build.gradle :

dependencies {
    ...implementation "androidx.lifecycle:lifecycle-viewmodel-compose:$lifecycle_version"
}

4. Créer une classe d'état d'interface utilisateur

Actuellement, le composable DessertClickerApp() dans MainActivity contient les données et l'état qui pilotent l'UI.

Créez une classe de données contenant toutes les données nécessaires à l'interface utilisateur. Les données de cette classe remplaceront celles actuellement gérées par le composable DessertClickerApp().

5. Créer une classe ViewModel

Créez une classe ViewModel à l'aide du composant ViewModel de Jetpack. Vous utiliserez ViewModel pour gérer l'état de l'interface utilisateur.

6. Déplacer la logique et les données de l'application vers ViewModel

Déplacez la logique de MainActivity vers ViewModel et rendez les données d'état de l'UI accessibles à l'aide de la classe d'état d'interface utilisateur que vous avez créée. Supprimez toute la logique de gestion des données et des états de MainActivity.

Essayez d'effectuer cette tâche par vous-même. Si nécessaire, reportez-vous à l'atelier de programmation ViewModel et état dans Compose pour en savoir plus.

7. Appeler ViewModel

Utilisez les données et les méthodes fournies par ViewModel pour piloter l'UI dans MainActivity.

8. Code de solution