Práctica: Cómo agregar un ViewModel a Dessert Clicker

1. Antes de comenzar

Introducción

Dessert Clicker funciona con estado intercalado y datos. En este ejercicio, quitarás el estado intercalado, los datos y la lógica de MainActivity y los moverás a ViewModel.

Abstraer la lógica de la app de la vista a un ViewModel es una práctica moderna para el desarrollo de Android. Esta práctica ofrece los siguientes beneficios:

• El código se vuelve más legible para otros desarrolladores.
• El código se vuelve más fácil de probar.
• Varios desarrolladores pueden trabajar simultáneamente en una app sin interferir en el trabajo de otros desarrolladores.

El código de la solución estará disponible al final, pero intenta resolver los ejercicios antes de comprobar las respuestas. Considera la solución como una forma de implementar la app.

Requisitos previos

• El trabajo de curso Aspectos básicos de Android en Compose con el codelab ViewModel y estado en Compose

Requisitos

• Una computadora con acceso a Internet y Android Studio instalado
• El código de la solución de la app Dessert Clicker

Qué compilarás

En estos problemas prácticos, mejorarás la arquitectura de la app Dessert Clicker agregando un ViewModel para manejar los datos y la lógica de la app.

Los problemas prácticos se dividen en secciones en las que completarás los siguientes pasos de forma individual:

• Actualizar y agregar las dependencias necesarias.
• Crear una clase de ViewModel.

2. Descarga el código de partida

1. En Android Studio, abre la carpeta basic-android-kotlin-compose-training-dessert-clicker.
2. Abre el código de la app Dessert Clicker en Android Studio.

3. Configura dependencias

1. Agrega la siguiente variable al archivo build.gradle de tu proyecto:

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

2. Agrega la siguiente dependencia al archivo app/build.gradle:

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

4. Crea una clase de estado de IU

Actualmente, el elemento de componibilidad DessertClickerApp() en MainActivity contiene los datos y el estado que impulsan la IU.

Crea una clase de datos que retenga todos los datos necesarios para la IU. Los datos dentro de esta clase reemplazan los datos que el elemento de componibilidad DessertClickerApp() administra actualmente.

5. Crea un ViewModel

Crea una clase ViewModel con el componente ViewModel de Jetpack. Usas el ViewModel para administrar el estado de la IU.

6. Reubica la lógica y los datos de la app en ViewModel

Reubica la lógica de MainActivity en el ViewModel y haz que los datos del estado de la IU estén accesibles usando la clase de estado de la IU que creaste. Borra toda la lógica de administración de datos y estados de MainActivity.

Intenta abordar esta tarea por tu cuenta. Si es necesario, consulta el codelab ViewModel y el estado en Compose si quieres obtener orientación.

7. Llama al ViewModel

Usa los datos y métodos que proporciona el ViewModel para controlar la IU en MainActivity.

8. Código de solución