View Models en Android: Gestión de la Lógica de Negocio y UI

Bienvenido a este recorrido fascinante en el desarrollo de aplicaciones móviles con la arquitectura MVVM. Hoy, nos sumergiremos en uno de los componentes más vitales: el ViewModel. Aprenderemos sobre su rol crucial para manejar la lógica de negocio y mantener la UI correctamente actualizada. Nos centraremos en cómo asegurar que nuestras aplicaciones sean testeables, mantenibles y fáciles de entender. Así que, comencemos.

¿Por qué cada pantalla necesita su propio ViewModel?

El uso de un ViewModel específico para cada pantalla obedece al principio de responsabilidad única del paradigma SOLID, fundamental en el desarrollo de software robusto. Tener un ViewModel dedicado:

• Facilita que el código sea más fácil de mantener y entender.
• Permite una mejor separación de las preocupaciones, mejorando la modularidad.
• Capacitina la aplicación para realizar pruebas unitarias eficaces, asegurando que cada componente funcione como se espera.

Además, cada ViewModel puede manejar los cambios de orientación del dispositivo o el cambio de lenguaje, sin perder datos críticos de la UI, como el contenido de una caja de texto.

¿Qué características debe manejar el ViewModel en la caja de texto?

Cuando se trata de una caja de texto, el ViewModel debe gestionarla eficientemente para mantener la integridad de los datos. Algunas de las características a considerar son:

• Estado del error: Manejando adecuadamente los errores que puedan surgir por valores inválidos o entradas incorrectas.
• Lógica de validación: Como por ejemplo, asegurarse de que los campos numéricos contengan únicamente dígitos.
• Formato del texto: La lógica que permite formatear la entrada de manera adecuada.
• Acciones de continuación: Determinar cuándo y cómo seguir a la siguiente pantalla o proceso tras la validación correcta de los datos.

Código para un ViewModel básico en una aplicación

Aquí te presento un ejemplo de cómo podrías manejar la creación de un ViewModel para una aplicación Android usando Kotlin:

// Declaración de un ViewModel
class AgeViewModel : ViewModel() {

    // Variable mutable para la edad
    var age = mutableStateOf("20")
        private set

    // Evento UI para manejar el estado del SnackBar
    private val _uiEvent = Channel()
    val uiEvent = _uiEvent.receiveAsFlow()

    // Método para manejar la entrada de la edad
    fun onAgeEnter(input: String) {
        // Lógica para filtrar y validar la entrada
        if (input.length <= 3) {
            age.value = input.filter { it.isDigit() }
        }
    }

    // Método para manejar el clic 'Next'
    fun onNextClick() {
        viewModelScope.launch {
            if (age.value.isNotEmpty()) {
                _uiEvent.send(UIEvent.Success)
            } else {
                _uiEvent.send(UIEvent.ShowSnackBar("La edad no puede ser vacía"))
            }
        }
    }
}

// Evento UI para diferentes estados
sealed class UIEvent {
    object Success : UIEvent()
    data class ShowSnackBar(val message: String) : UIEvent()
}

¿Cómo aplicar el ViewModel dentro de la vista?

La integración del ViewModel con la UI se realiza principalmente en la pantalla donde se necesita su funcionalidad. Aquí, te muestro cómo podrías hacerlo en la pantalla de entrada de datos:

@Composable
fun AgeScreen(viewModel: AgeViewModel = viewModel()) {
    val age by viewModel.age.collectAsState()

    // Muestra la caja de texto para la edad
    TextField(
        value = age,
        onValueChange = viewModel::onAgeEnter,
        label = { Text("Ingrese su edad") }
    )

    // Botón para avanzar y manejar el evento de clic
    Button(onClick = viewModel::onNextClick) {
        Text("Next")
    }
}

¿Cómo mantener la UI y el estado de negocio desacoplados?

Un aspecto crucial en MVVM es mantener la lógica de negocio fuera de la vista. Aquí te proporciono algunas prácticas recomendadas:

• Usar observables (LiveData, StateFlow, etc.) para manejar cambios de estado.
• No incluir lógica de negocio en la UI; en su lugar, delegar estos procesos al ViewModel.
• Utilizar eventos UI para comunicar cambios desde el ViewModel hacia la vista.

La ventaja de esta separación es que permite reutilizar y mantener el código fácilmente, ofreciendo una transición más fluida entre las pantallas.

Animamos a todos los desarrolladores en sus etapas de aprendizaje a seguir explorando los ViewModels y sus aplicaciones. Mejora tus habilidades y continúa construyendo aplicaciones potentes y eficientes con esta arquitectura. ¡Adelante, el mundo del desarrollo móvil te espera!