Creación de un ViewModel para Gestión de Tareas en Pantalla

¿Cómo se implementa la lógica detrás de una UI para la creación de tareas?

Implementar la lógica detrás de una interfaz de usuario es un paso crucial para cualquier aplicación funcional. Este proceso implica crear un modelo de vista (ViewModel) que maneje los estados, acciones y eventos asociados. En esta ocasión, trabajaremos este elemento para una pantalla de tareas. Separa el estado de la pantalla de tareas en una clase independiente y utiliza un estado especializado, como TextFieldState, para mejorar la eficacia y evitar el manejo de estados de strings individualmente.

¿Cómo se definen acciones y eventos en una UI de tareas?

Iniciares con la creación de una sealed class para describir las acciones posibles. Esto incluye acciones como guardar una tarea (save task), regresar a una lista (back), cambiar de categoría (change category) o marcar una tarea como completada (change task done).

sealed interface ActionTask {
    data object SaveTask: ActionTask
    data object Back: ActionTask
    data class ChangeCategory(val category: Category?): ActionTask
    data class ChangeTaskDone(val done: Boolean): ActionTask
}

Los eventos, en este escenario, son más sencillos dado que solo necesitamos un evento para cuando una tarea se ha almacenado: TaskSaved.

¿Cómo se modela un ViewModel para manejar el estado y las acciones?

Una vez definidas las acciones y eventos, se procede a crear el ViewModel. Este hereda de una clase ViewModel base, permite gestionar el estado a través de un MutableStateOf y maneja los diferentes tipos de acciones utilizando una sentencia when.

class TaskViewModel : ViewModel() {
    private val _state = mutableStateOf(TaskScreenState())
    val state: State<TaskScreenState> get() = _state

    private val eventChannel = Channel<TaskEvent>()
    val eventsFlow = eventChannel.receiveAsFlow()

    fun onAction(action: ActionTask) {
        when(action) {
            // Manejo acciones aquí
        }
    }
}

¿Cómo se gestionan las acciones de cambio de estado?

Lograr que cada acción modifique el estado adecuadamente, le asegura al usuario una experiencia fluida. Los métodos como copy son útiles para actualizar solo las partes relevantes del estado.

fun onAction(action: ActionTask) {
    when(action) {
        is ActionTask.ChangeCategory -> {
            _state.value = state.value.copy(category = action.category)
        }
        is ActionTask.ChangeTaskDone -> {
            _state.value = state.value.copy(done = action.done)
        }
        // Continuar con otras acciones
    }
}

¿Cuál es la importancia del manejo del evento al guardar una tarea?

La gestión efectiva de eventos es clave para mantener la aplicación interactiva. Almacenaremos la tarea creada usando un UUID para asegurar que cada tarea tenga un identificador único. Una vez completa, enviamos un evento para notificar que la tarea ha sido guardada con éxito.

fun onAction(action: ActionTask) {
    when(action) {
        is ActionTask.SaveTask -> {
            val newTask = Task(
                id = UUID.randomUUID().toString(),
                title = state.value.title,
                // Añadir campos adicionales
            )
            fakeTaskLocalDataSource.addTask(newTask)
            viewModelScope.launch {
                eventChannel.send(TaskEvent.TaskCreated)
            }
        }
    }
}

¿Cómo actualizar la UI para reflejar el nuevo estado y eventos?

Finalmente, adaptamos la interfaz gráfica para que responda a estos nuevos estados y eventos. Al agregar un icono de navegación, un checkbox o un selector de categorías, se puede enlazar con los cambios de estado correspondientes.

if (event is TaskEvent.TaskCreated) {
    Toast.makeText(context, R.string.task_saved, Toast.LENGTH_SHORT).show()
}

// Ejemplo de acción en un botón
Button(onClick = { onAction(ActionTask.SaveTask) }) {
    Text("Guardar Tarea")
}

¡Enhorabuena! Has aprendido a implementar la lógica detrás de una UI de creación de tareas mediante el uso de eventos y acciones en ViewModel. Con esta base, estás preparado para explorar interacciones más complejas en tus aplicaciones. Anímate a seguir expandiendo tus habilidades de programación.