Crear aplicaciones para Apple Vision Pro con SwiftUI es más parecido a desarrollar para Mac o iPad de lo que imaginas. Si ya conoces Swift, puedes adaptar tus proyectos a visionOS y desplegarlos en realidad mixta sin reescribir toda tu lógica. Aquí te muestro cómo configurar el entorno, estructurar el proyecto y construir una app de ejemplo que liste cursos de Platzi dentro de las gafas Vision Pro.
¿Qué es la realidad mixta de Apple Vision Pro?
La realidad mixta combina realidad virtual y realidad aumentada en una sola experiencia. Con las Vision Pro, tus aplicaciones pueden flotar dentro del entorno físico del usuario, abrir ventanas adicionales en el espacio y aprovechar gestos para navegar entre ellas [0:10].
¿Qué diferencia hay entre desarrollar para iPhone y para Vision Pro? En iPhone trabajas con pantallas pequeñas que exigen configuraciones específicas. Para Vision Pro, iPad y Mac usas un diseño parecido porque las tres plataformas comparten un lienzo grande y la misma lógica de SwiftUI.
¿Cómo configurar el simulador de Vision Pro en Xcode?
Antes de escribir código necesitas un lugar donde probar la app. El simulador de visionOS se descarga aparte y pesa alrededor de 10 GB [1:05].
- Abre Xcode y entra a la sección de administrar dispositivos.
- Ve a simuladores y haz clic en el botón de añadir.
- Selecciona Apple Vision Pro y descarga la versión del sistema operativo si no la tienes.
- Asigna un nombre al simulador y créalo.
Una vez listo, el simulador te permite navegar en tres dimensiones, cambiar de plano y simular escenas como una cocina de día o una habitación de noche para validar cómo se ve tu app en distintos entornos [4:50].
¿Cómo se estructura un proyecto en visionOS?
Al crear un proyecto nuevo eliges la plantilla de visionOS en lugar de iOS o macOS [2:30]. El asistente te pregunta si quieres una pantalla inicial, si necesitas integrar RealityKit o Metal para gráficos y realidad aumentada, y si vas a incluir testing.
Para la app de ejemplo se trabaja con tres capas:
- Un modelo Course con identificador único, título, descripción, syllabus, nivel, profesor, puntuación e imagen.
- Un view model llamado CoursesVM que carga los datos desde un archivo PlatziDB.json mediante la función loadCourse.
- Vistas como CourseRow para cada elemento de la lista y CourseDetail para el detalle del curso.
¿Qué hace cada vista del proyecto?
El CourseRow arma un VStack con el título y el nombre del profesor. El CourseDetail descarga la imagen del póster de forma asíncrona, muestra una imagen del sistema mientras carga, incluye un botón para abrir el póster en una ventana flotante y presenta un rating bar personalizado con estrellas. En el panel lateral aparecen el nivel, descripción y syllabus [6:30].
¿Cómo construir una vista dividida con NavigationSplitView?
El componente clave para pantallas grandes es NavigationSplitView, que divide la interfaz en un panel izquierdo de navegación y un panel derecho de detalle [9:15].
Primero conectas el view model con la vista usando la anotación @Bindable:
swift
@Bindable var vvm = coursesVM
Luego creas la lista del panel izquierdo iterando los cursos:
swift
NavigationSplitView {
List(selection: $vvm.selection) {
ForEach(coursesVM.courses) { course in
CourseRow(course: course)
}
}
.navigationTitle("Cursos")
} detail: {
if let selection = coursesVM.selection {
CourseDetail(course: selection)
} else {
ContentUnavailableView(
"Nunca pares de aprender",
image: "Platzi",
description: Text("Selecciona un curso de la izquierda")
)
}
}
¿Qué es ContentUnavailableView? Es un componente que Apple lanzó este año para mostrar estados vacíos de forma más amigable. Acepta un título, una imagen y una descripción, y reemplaza los textos planos como "No se ha seleccionado ningún curso".
¿Cómo se ven las ventanas flotantes en Vision Pro?
Al ejecutar la app en el simulador aparece el logo de Platzi, el listado de cursos y el detalle. Si presionas el botón de mostrar póster se abre una ventana adicional que puedes maximizar con gestos, mover por el espacio o cerrar. Esa es la magia de la realidad mixta: cada ventana vive en tu entorno y puedes acercarte para verla mejor [13:40].
¿Necesito RealityKit para crear apps de Vision Pro? Solo si quieres elementos flotantes en 3D, reconocimiento de espacios u objetos anclados al entorno. Para ventanas tradicionales con interfaz, SwiftUI por sí solo es suficiente.
¿Qué limitaciones tiene reutilizar código entre plataformas?
La misma app de cursos corre en Mac, iPad y Vision Pro sin cambios mayores. La excepción son los iPhones, donde el tamaño reducido obliga a ajustar diseños. Si tu objetivo es agregar interacciones espaciales reales —como objetos que se quedan sobre una mesa— necesitas integrar librerías de realidad aumentada específicas de visionOS [15:20].
Mientras tanto, con SwiftUI y NavigationSplitView tienes una base sólida para llevar tus apps existentes al espacio inmersivo. ¿Qué tipo de app llevarías primero a Vision Pro? Cuéntame en los comentarios.
