Conexión de datos en apps con Environment Object en SwiftUI

Curso de Desarrollo de Aplicaciones con SwiftUI

Contenido del curso

Fundamentos de SwiftUI y desarrollo de Interfaces

Interacción del Usuario y Componentes de Entrada

Manejo del Estado y Arquitectura con ViewModels

Navegación Avanzada

Lanzamiento de la app

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:006:10

Conexión de datos en apps con Environment Object en SwiftUI

Curso de Desarrollo de Aplicaciones con SwiftUI

Clase 18 de 23

Clase 18 / 23

Comentarios (4)4 comentarios

Juan Tapias

Hace un año•editado

En IOS 17, cambiaron algunas sintaxis

para el archivo appInfo ObservableObject cambia a solo Observable

@Observable class AppInfo { ... }

En el contentModel que daria

struct ContentView: View {
    @State private var appInfo = AppInfo()

    
     var body: some View {
         
         NListView()
             .environment(appInfo)
        
    }
}

Y el NListView quedaría de está forma con el cambio de sintexis

@Environment(AppInfo.self) private var appInfo

Alejandro Ivan Mendieta

Hace 2 años

excelente, es algo similar al react context

Brian Chuquiruna

Hace un año

@EnvironmentObject se utiliza en SwiftUI para compartir datos entre diferentes vistas de una aplicación sin necesidad de pasar esos datos explícitamente a través de cada vista. Al crear un objeto que implementa el protocolo ObservableObject, puedes marcarlo como un EnvironmentObject, permitiendo que cualquier vista que lo necesite acceda a él. Esto es especialmente útil para gestionar estados de forma centralizada y mantener la sincronización de datos en toda la aplicación, mejorando la organización y la escalabilidad del código.

Kevin Niño guerrero

Hace 6 meses

Deberían actualizar esta parte del curso pliiiis

Recursos

Es esencial contar con una estructura que permita compartir información de manera eficiente entre las distintas vistas y componentes. El uso de un EnvironmentObject es clave para lograr esto, al permitirnos crear un contenedor de datos compartidos que sincroniza el contenido de toda la aplicación de manera fluida.

¿Cómo crear un Environment Object en Swift?

Para comenzar, es necesario establecer una estructura de datos compartidos:

Creación de la carpeta 'appinfo':

En el proyecto, crea una nueva carpeta denominada appinfo.

Archivo 'AppInfo':

Dentro de appinfo, crea un archivo nombrado AppInfo.swift.

Definición de la clase:

Define AppInfo como sigue, asegurándote de implementar el protocolo ObservableObject para que funcione correctamente con las vistas. Esto es necesario ya que gestionará estados observables.

import Foundation

class AppInfo: ObservableObject { @Published var cards: [NCard] = [] // Inicializa el array 'cards' con datos generados
```
   init() {
       // Código para inicializar con datos
   }
```
}

Importación de librerías:

Asegúrate de importar la librería Foundation para evitar errores comunes al manejar objetos observables.

¿Cómo integrar el EnvironmentObject en la vista principal?

Una vez que hemos establecido AppInfo, es hora de integrarlo en nuestra vista principal.

Modificación en 'ContentView':

Eliminar cualquier variable que represente los cards antiguos.
Introducir el AppInfo como un @StateObject.

struct ContentView: View { @StateObject private var appInfo = AppInfo() // Continuar con la implementación de la vista }

Configurar el EnvironmentObject:

Utiliza el modificador environmentObject para pasar el AppInfo a la lista dentro de la vista.

List { ... } .environmentObject(appInfo)

Actualizar vistas secundarias:

En vistas donde se requiera acceder a la información de AppInfo, agrega el decorador @EnvironmentObject.

struct ExampleView: View { @EnvironmentObject var appInfo: AppInfo
```
   // Utilizar appInfo.cards dentro de la vista
```
}

¿Cómo manejar la creación y actualización de notas?

Para completar la funcionalidad, debemos permitir la adición de nuevas notas:

Añadir función en 'AppInfo':

Implementa una función para agregar nuevas notas al array de tarjetas.

func createNote(card: NCard) { cards.append(card) }

Invocar función desde la vista:

Al crear una nueva nota desde el formulario, llama a createNote.

Button(action: { appInfo.createNote(card: nuevoCard) }) { // Implementación del botón }

Estas implementaciones aseguran que las listas y formularios estén sincronizados, permitiendo reflejar los cambios en tiempo real.

En el mundo del desarrollo de aplicaciones, el uso de un EnvironmentObject es una práctica esencial para mantener la escalabilidad y la organización del código. ¡Continúa aprendiendo y explorando más técnicas de Swift para mejorar tus habilidades de programación! En la siguiente clase nos adentraremos en el concepto de binding para la creación de componentes reutilizables. ¡No te lo pierdas!

Resumen

¿Cómo crear un Environment Object en Swift?

Para comenzar, es necesario establecer una estructura de datos compartidos:

Creación de la carpeta 'appinfo':

En el proyecto, crea una nueva carpeta denominada appinfo.

Archivo 'AppInfo':

Dentro de appinfo, crea un archivo nombrado AppInfo.swift.

Definición de la clase:

Define AppInfo como sigue, asegurándote de implementar el protocolo ObservableObject para que funcione correctamente con las vistas. Esto es necesario ya que gestionará estados observables.

import Foundation

class AppInfo: ObservableObject { @Published var cards: [NCard] = [] // Inicializa el array 'cards' con datos generados
```
   init() {
       // Código para inicializar con datos
   }
```
}

Importación de librerías:

Asegúrate de importar la librería Foundation para evitar errores comunes al manejar objetos observables.

¿Cómo integrar el EnvironmentObject en la vista principal?

Una vez que hemos establecido AppInfo, es hora de integrarlo en nuestra vista principal.

Modificación en 'ContentView':

Eliminar cualquier variable que represente los cards antiguos.
Introducir el AppInfo como un @StateObject.

struct ContentView: View { @StateObject private var appInfo = AppInfo() // Continuar con la implementación de la vista }

Configurar el EnvironmentObject:

Utiliza el modificador environmentObject para pasar el AppInfo a la lista dentro de la vista.

List { ... } .environmentObject(appInfo)

Actualizar vistas secundarias:

En vistas donde se requiera acceder a la información de AppInfo, agrega el decorador @EnvironmentObject.

struct ExampleView: View { @EnvironmentObject var appInfo: AppInfo
```
   // Utilizar appInfo.cards dentro de la vista
```
}

¿Cómo manejar la creación y actualización de notas?

Para completar la funcionalidad, debemos permitir la adición de nuevas notas:

Añadir función en 'AppInfo':

Implementa una función para agregar nuevas notas al array de tarjetas.

func createNote(card: NCard) { cards.append(card) }

Invocar función desde la vista:

Al crear una nueva nota desde el formulario, llama a createNote.

Button(action: { appInfo.createNote(card: nuevoCard) }) { // Implementación del botón }

Estas implementaciones aseguran que las listas y formularios estén sincronizados, permitiendo reflejar los cambios en tiempo real.

Fundamentos de SwiftUI y desarrollo de Interfaces

Creación de Apps Modernas con SwiftUI

Crea tu primera app de notas en SwiftUI

Uso de Modifiers en SwiftUI para Personalizar Vistas

Dibujo y Personalización de Íconos e Imágenes en Xcode

Creación de Layouts Complejos con Stacks en SwiftUI

Scroll View y Stacks: Creación de Listas y Carruseles en SwiftUI

Listas nativas en SwiftUI con datos reales

Buenas prácticas en SwiftUI: Creación y organización de vistas y modelos

Interacción del Usuario y Componentes de Entrada

Creación y Funcionalidad de Botones en SwiftUI

TextField y TextEditor en SwiftUI

Uso de Pickers en SwiftUI para Selección de Fechas y Opciones

Implementación de Sliders y Toggles en SwiftUI

Formulario de notas con SwiftUI

Alerts y Sheets para mostrar formularios

Gestos en SwiftUI: tap, drag y long press

Animaciones y Transiciones en SwiftUI con ProgressView

Manejo del Estado y Arquitectura con ViewModels

Cómo crear tu primer ViewModel en SwiftUI

Conexión de datos en apps con Environment Object en SwiftUI

Creación de Componentes Reutilizables con @Binding en SwiftUI

Navegación Avanzada

Navegación SwiftUI de lista a detalle

Personalización de Tool Bar y Navegación con TabViews en SwiftUI

Lanzamiento de la app

Añadir botón de favoritos y configurar icono de aplicación

Lanzamiento de tu Primera App con SwiftUI en el Simulador

Conexión de datos en apps con Environment Object en SwiftUI

Progreso del curso

Fundamentos de SwiftUI y desarrollo de Interfaces

Interacción del Usuario y Componentes de Entrada

Manejo del Estado y Arquitectura con ViewModels

Navegación Avanzada

Lanzamiento de la app

Recursos

Recursos