Módulo 04

Página principal del curso

Unidad 4 : Ruta de aprendizaje 1 -> TRAINING ->ANDROID BASICS WITH COMPOSE -> NAVIGATION AND ARCHITECTURE -> ARCHITECTURE

TODO: Realizar el codelab en Practice: Add a ViewModel to Dessert Clicker –> Codelab
En GitHub : Dessert Clicker (Viewmodel Branch)

Starter App: Partimos de la aplicación Dessert Clicker que hemos realizado anteriormente, con las instrucciones del codelab juntoc con estas

Instrucciones adicionales:

• (Step 4) Dentro del package data creamos la nueva clase UI State Class (Step 4) que pide el tutorial, que podemos llamar DessertUiState en este fichero colocaremos todas las variables que actualmente componen el estado en nuestro componente DessertClickerApp, en concreto revenue, dessertsSold, currentDessertIndex, currentDessertPrice y currentDessertImageId que serán parámetros inmutables (val) de nuestra DataClass DessertUiState
  Recordar marcar con @DrawableRes el parámetro currentDessertImageId
• (Step 5) Dentro del package ui creamos la clase ViewModel que podemos llamar DessertViewModel y que nos pide en el Step 5.
  Crearemos la clase y editaremos para añadir la herencia de ViewModel(), importando por tanto androidx.lifecycle.ViewModel
  En la vista Android al hacer click derecho y añadir el Data Class lo mete dentro the ui.theme, por lo que si queremos que cuelgue directamente del package ui y no de ui.theme tendremos que o bien moverlo, con refactor -> move, o bien crearlo directamente en la vista Project Files y seleccionar ui al hacer click derecho para añadir el Data Class.
  
• (Step6) Pasamos la lógica al ViewModel
  
  Primero creamos una variable privada _dessertStateFlow que es un MutableStateFlow al que se pasa como parametro nuestra Data Class DessertUiState
  
  Luego creamos una variable pública dessertStateFlow que es la que se comparte cuyo tipo de datos es un StateFlow<DessertUiState> que se inicializa a _dessertStateFlow.asStateFlow()
  Recordar que hemos creado una clase que guarda un estado (conjunto de variables que pueden cambiar).
  
  Que podemos tener tantas clases de estado como conjuntos de variables van a gestionarse en distintos momentos y vistas de nuestra interfaz de usuario.
  
  En este caso hemos creado sólo un estado, que hemos llamado DesssertUiState.
  
  Y que un ViewModel es una clase que me ayuda a gestionar ese estado ofreciéndome métodos que llamaré para que hagan cosas con el estado o que en función del estado me devuelvan valores que me interesen… Es decir es una clase que me ofrece métodos para ser llamados en respuesta a eventos del usuario y a otras cosas que como programador necesito que me resuelva, ya que conoce bien el estado.
  
  En nuestra App el estado cambia cuando el usuario hace click en el dibujo del dulce, por tanto nuestra clase DessertViewModel deberá ofrecer un método para ese evento, que llamaremos onDessertClicked()
  
  En nuestro método onDessertClicked() tenemos pues que cambiar el estado y esto lo hacemos llamando al método update de la variable privada que mantiene el Flow de nuestro estado, es decir a nuestra variable _dessertStateFlow.
  
  LLamamos por tanto a update() (método de la clase StateFlow), es decir llamamos a _dessertStatFlow.update() que es un Lambda que recibe un estado y devuelve un estado. El estado que recibe es del tipo que se puso en su creación, en nuestro caso un DessertUiState, por lo que recibe un objeto de ese tipo y devuelve un objeto de este tipo, pero cambiando lo que necesite en el código del lamba que ejecutamos cuando el usuario lance el evento (haga click).
  
  Como ya sabemos de los lambdas de kotlin, en el código del lamda, el parametro lo podemos llamar como queramos o no ponerle nombre en cuyo caso lo referenciaremos como it. Podemos llarmarlo postreState ->
  
  Nota: Al abrir las llaves { para poner el código de nuestro lambda onDessertClicked() Android Studio nos ofrece la posibilidad de crear una función de extensión, podemos hacerlo u obviar el mensaje y hacer lo que tenemos que hacer en nuestro código. Hasta que no pongamos postreState.copy para darle valor al objeto de retorno no parará de mostar las lineas rojas de posible error.
  
  Lo que tiene que hacer nuestro onDessertClicked() por tanto es modificar el valor del estado que recibe, eso lo hacemos con el operador copia, es decir con postreSate.copy( …. ) y en los parámetros vamos diciendo cómo cambia cada una de las variables de nuestro data class DessertUiState.
  
  Cuando queremos cambiar el valor de currentDessertIndex nos damos cuenta que necesitamos una lógica que determine el siguiente estado, por eso definimos antes del postreState.copy una variable nextIndex (por ejemplo) que llamará a una función de nuestro ViewModel que sepa cual es el siguiente índice.
  
  Creamos pues la función determineDessertIndex que recibe un parametro Int (el número de postres vendidos) y devuelve un Int, el nuevo índice del array de datos que corresponde con el postre a mostrar.

• (Step 7) Usar el DessertViewModel
  Tendremos que crear una instancia del DessertViewModel en algún sitio que perdure a la rotación del dispositivo…. ¿donde? Podemos colocarlo como variable global de nuestro módulo MainActivity (fuera de la propia activity, pues esta se destruye).
  Entonces en el SetContent() podemos llamar a DessertClickerApp(dessertViewModel) pasándole la variable global de tipo DessertViewModel que hemos declarado global.

(Step7) Forma correcta.
En la forma anterior, se crea una variable global que tiene el ViewModel, pero si revisamos el tutorial antrior, vemos que no es necesario, que se puede pasar como parámetro que se inicializa genéricamente con viewModel().

Finalmente el prototipo de nuestra función principal queda así:

@Composable
private fun DessertClickerApp(
    dessertViewModel: DessertViewModel = viewModel()
) {

En el SetContent() no pasamos el parámetro, con lo que se ejecuta la inicalización del por defecto con =viewModel()

Que según la ayuda contextual al colocarnos encima dice:

Returns an existing ViewModel or creates a new one in the given owner (usually, a fragment or an activity), defaulting to the owner provided by LocalViewModelStoreOwner.
The created ViewModel is associated with the given viewModelStoreOwner and will be retained as long as the owner is alive (e.g. if it is an activity, until it is finished or process is killed).

Es decir, hay un elemento en Android que se llama LocalViewModelStoreOwner que básicament lo que hace es crear un ViewModel del tipo indicado en la declaración si no está creado ya. Es decir crea una instancia única de un DessertViewModel. Única porque cuando alguien más en otra parte de la aplicación pida un viewModel para un DessertViewModel, nuestro amigo el LocalViewModelStoreOwner devolverá el mismo objeto DessertViewModel que creó la primera vez, por lo que los datos que se ven serán los mismos se llamen desde donde se llamen. Esto veremos que es útil cuando trabajemos con fragments y navegación.

Por toro lado el LocalViewModelStoreOwner asigna ese viewModel al ciclo de vida del propietario al que se vincula en su creación, en nuestro caso a una Activity, puesto que nuestra función DessertClickerApp se está llamando desde el onCreate de una Activity. De forma que nuetro amigo el LocalViewModelStoreOwner guarda el viewModel durante todo el ciclo de vida de la activity hasta que se destruye finalmente, perdurando a los cambios de rotación y asignandoselo de nuevo a la nueva Activity que se crea tras la rotación en el onRestart().