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

Contenido del curso

No sé dónde empezar

Introducción al Patrón MVVM

Estructura de un Proyecto con MVVM

Operaciones CRUD en un proyecto con MVVM

Clean Architecture

MVVM y Clean Architecture

28
Resumen de Clean Architecture y MVVM
06:29 min

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:0019:52

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

Curso de Patrones MVVM en iOS

Clase 19 de 28

Clase 19 / 28

Recursos

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:

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.
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.
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!

Resumen

¿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)
    }
}

¿Cómo aplicamos validaciones de visualización?

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

¿Cómo crear una vista para tareas archivadas?

¿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)
    }
}

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

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.
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.
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.

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

Introducción al Patrón MVVM

Implementación de MVVM en Swift: Organiza y Optimiza tus Apps

Patrones de Arquitectura y Diseño en Desarrollo de Software iOS

MVC vs MVP en iOS: diferencias clave

Qué son los principios SOLID

MVVM y SOLID en SwiftUI

Estructura de un Proyecto con MVVM

Proyecto MVVM en Swift: Buenas Prácticas y Configuración Inicial

Cómo crear el modelo Item con MVVM en Swift

Modelo de datos con Core Data en Swift

Vistas en MVVM con SwiftUI

Cómo conectar CoreData y Combine en MVVM

Operaciones CRUD en un proyecto con MVVM

Función addTodo con Core Data en SwiftUI

Funcionalidades básicas para gestionar tareas en SwiftUI

Listado y detalle de notas en SwiftUI

Editar todos con SwiftUI y Core Data

Archivar tareas en SwiftUI con Core Data

Cómo desarchivar tareas con unarchiveTodo

Eliminar un to do definitivamente con Core Data

Marcar tareas completadas en SwiftUI

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

Clean Architecture

Qué es Clean Architecture y por qué supera a MVVM

Estructura y Ventajas de la Clean Architecture

Estructura de proyecto iOS con Clean Architecture

Mapeo de JSON a structs Swift con Codable

Capa de datos con Clean Architecture en Swift

Casos de uso en la capa de dominio Swift

Capa de presentación con MVVM en SwiftUI

Navegación y detalle con Clean Architecture en SwiftUI

MVVM y Clean Architecture

Resumen de Clean Architecture y MVVM

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