Contenido del curso

Fundamentos de SwiftUI y desarrollo de Interfaces

Crea tu primera app de notas en SwiftUI

Resumen

Aprender a crear una aplicación con SwiftUI en Xcode es el primer paso para desarrollar interfaces nativas en iOS. Aquí construyes la base de una app de notas funcional, exploras la estructura inicial de un proyecto y descubres cómo funcionan las views y los previews en tiempo real.

¿Qué hace una app de notas en SwiftUI?

La aplicación que vas a construir te permite gestionar tus notas desde el iPhone con varias funciones integradas.

  • Visualizar todas tus notas en una lista principal.
  • Marcar notas como favoritas y filtrarlas en otra sección.
  • Agregar nuevas notas desde un formulario.
  • Ver el detalle de cada nota al seleccionarla.

Este flujo cubre los componentes esenciales de una app iOS moderna, así que es una excelente puerta de entrada al framework.

¿Cómo crear el proyecto base en Xcode?

Antes de escribir código, necesitas configurar correctamente el proyecto en Xcode [00:32]. La configuración inicial define cómo se compilará tu app y qué dispositivos podrán ejecutarla.

¿Qué opciones elegir al crear el proyecto?

Al abrir Xcode, selecciona App dentro de la categoría iOS y completa el formulario con estos parámetros.

  • Nombre del producto: Notes.
  • Team: tu personal team.
  • Organization identifier: por ejemplo, com.santi.
  • Interface: SwiftUI.
  • Language: Swift.
  • Las demás opciones quedan en none.

Un detalle clave: cambia el minimum deployment de 18 a 16 [01:34]. Esto amplía la compatibilidad de tu app con versiones anteriores de iOS y te da mayor alcance de usuarios.

¿Qué es el minimum deployment en Xcode? Es la versión mínima de iOS en la que tu app puede ejecutarse. Si lo fijas en iOS 16, los dispositivos con esa versión o superior podrán instalarla.

¿Qué archivos genera Xcode por defecto?

Cuando Xcode termina de crear el proyecto, te encuentras con varios archivos que conviene reconocer desde el inicio.

El archivo de configuración del proyecto guarda parámetros globales como el minimum deployment. El archivo Assets [01:42] funciona como contenedor de recursos visuales: imágenes, colores, símbolos y datasets que usarás a lo largo del desarrollo.

Después está el archivo principal NotesApp, que actúa como punto de entrada y referencia a la primera vista: ContentView [02:05]. Ahí es donde empieza la interfaz que verá el usuario.

¿Qué es una view en SwiftUI?

Una view es cualquier elemento visible en pantalla dentro de SwiftUI [02:17]. Puede ser un botón, una imagen, un texto o una composición de varios elementos.

Cada vista contiene un elemento central llamado body, donde se dibuja toda la interfaz mediante código declarativo. Dentro del body aparecen estructuras como VStack, Image o Text, que son los bloques de construcción de cualquier pantalla.

El import SwiftUI al inicio del archivo te habilita el acceso a protocolos esenciales como View, Image y padding, que son la materia prima del framework.

¿Qué es el body en una view de SwiftUI? Es la propiedad que define qué se muestra en pantalla. Todo lo que escribas dentro del body se renderiza como parte de esa vista.

¿Cómo funcionan los previews en SwiftUI?

La parte más poderosa de SwiftUI es el sistema de previews [02:55]. Te permite ver los cambios de tu interfaz en tiempo real sin necesidad de compilar ni ejecutar el simulador completo.

Si cambias un texto que dice "Hello, World" por "Hello, Platzi", el cambio se refleja al instante en el panel derecho. Esto acelera muchísimo el ciclo de iteración visual.

¿Qué variantes puedes probar en el preview?

El preview incluye opciones para validar tu interfaz en distintos contextos sin salir de Xcode.

  • Color scheme variants: alterna entre light mode y dark mode.
  • Orientaciones: portrait, landscape right y landscape left.
  • Tamaños de letra: small, medium y otros para probar accesibilidad.
  • Simuladores específicos: iPhone 16, iPad o un iPhone más compacto.

Probar tu app en estas variantes desde el inicio te ahorra problemas de diseño en producción y garantiza que la interfaz responda bien a las preferencias del usuario.

¿Qué sigue después de crear la base?

Con el proyecto creado, la view identificada y los previews funcionando, ya tienes el cimiento para construir la app de notas. El siguiente paso es aprender a personalizar las vistas con modifiers, que son las herramientas que transforman el aspecto y el comportamiento de cada elemento.

¿Cuál fue la primera vista que renderizaste con éxito en tu preview? Cuéntame en los comentarios cómo te fue al configurar tu proyecto.