Creación de Vistas Amigables en SwiftUI para Aplicaciones de Tareas

La funcionalidad de una aplicación debe ir más allá de su operatividad básica para ofrecer una experiencia visualmente atractiva. Crear vistas personalizadas puede resolver el problema de visualizar pantallas que resultan visualmente vacías cuando no tenemos tareas ni archivadas ni no archivadas. Tomemos el ejemplo de crear una nueva vista en SwiftUI llamada NoTodoView para evitar que el fondo quede simplemente en color negro o blanco.

¿Cómo implementamos NoTodoView en SwiftUI?

Primero, diseñamos la estructura para mostrar un mensaje claro que invite a crear nuevas tareas:

import SwiftUI

struct NoTodoView: View {
    @Binding var showCreationSheet: Bool

    var body: some View {
        VStack(spacing: 8) {
            Text("No hay tareas aún.")
                .font(.title2)

            Button(action: {
                self.showCreationSheet.toggle()
            }) {
                Text("Intenta crear una tarea")
                    .font(.headline)
                    .foregroundColor(.white)
                    .padding()
                    .background(Color.teal)
                    .cornerRadius(5)
            }
        }
        .offset(y: UIScreen.main.bounds.height * 0.3)
    }
}

El VStack nos permite organizar los elementos verticalmente, mientras que el botón está preparado para activar un sheet de creación cuando no hay tareas presentes. La propiedad offset sitúa el contenido en el centro de la pantalla para una mejor visualización.

¿Cómo aplicamos validaciones de visualización?

Este no todos view debe integrarse en la estructura de nuestra aplicación. Hazlo donde inicialmente la aplicación no mostraba nada si no había listas de tareas. Por ejemplo, dentro de la función de validación del TodoList:

if todos.isEmpty {
    NoTodoView(showCreationSheet: $showSheet)
} else {
    // Mostrar lista de tareas normal
}

La variable todos representa la lista de tareas; si está vacía, la aplicación presentará NoTodoView. Esto proporciona un flujo visual más coherente y evita que los usuarios se enfrenten a pantallas vacías.

¿Cómo crear una vista para tareas archivadas?

Al igual que implementamos NoTodoView, también podemos diseñar un NoArchivedView para la sección de tareas archivadas, asegurando así que todas partes de nuestra aplicación brindan una experiencia de usuario homogénea.

¿Qué es NoArchivedView y cómo se implementa?

Este es un ejemplo de cómo estructuramos la vista para los archivos sin contenido:

import SwiftUI

struct NoArchivedView: View {
    @Environment(\.dismiss) var dismiss

    var body: some View {
        VStack(spacing: 8) {
            Text("No existen notas archivadas.")
                .font(.title2)

            Button(action: {
                dismiss()
            }) {
                Text("Ver todas las notas")
                    .font(.headline)
                    .foregroundColor(.white)
                    .padding()
                    .background(Color.teal)
                    .cornerRadius(5)
            }
        }
        .frame(maxWidth: 200)
        .offset(y: UIScreen.main.bounds.height * 0.35)
    }
}

Aquí usamos un Environment para permitir que la vista se cierre cuando no hay notas archivadas, y el botón nos dirige a visualizar todas las notas disponibles, mejorando la navegabilidad dentro de la aplicación.

¿Cómo implementar una arquitectura MVVM en una aplicación?

Para el desarrollo de la aplicación hicimos uso del patrón modelo-vista-vista-modelo (MVVM), que proporciona una organización clara y facilita el mantenimiento a largo plazo. Separamos responsabilidades en tres capas clave:

1. Modelo (Model): Define los datos que maneja la aplicación. Por ejemplo, el objeto Item que representa tareas con su id, título, descripción, fechas, y estados de archivo o completado.

2. Vista de Modelo (ViewModel): Actúa como intermediario entre la vista y el modelo, manejando la lógica de negocio. Usa ObservableObject para que las vistas se actualicen automáticamente. Esta mediación es crucial para que cualquier cambio en los datos refleje inmediatamente en la interfaz de usuario.

3. Vista (View): Presenta la interfaz al usuario basándose en la lógica proporcionada por el ViewModel, asegurando que las acciones del usuario se traduzcan apropiadamente en cambios de estado o de interfaz.

La arquitectura MVVM se enfoca principalmente en la presentación, manteniendo el código organizado y separando las preocupaciones, lo cual facilita la escalabilidad y el mantenimiento. Sin embargo, no es la única ni necesariamente la mejor opción organizativa, ya que futuras implementaciones podrían requerir estructuras más complejas que se adapten mejor a necesidades específicas.

¡A seguir aprendiendo y construyendo aplicaciones más eficientes y atractivas!