Cómo crear una app para iOS con SwiftUI

¿Quieres saber cómo crear una app para iOS? Si la respuesta es sí, ¡quédate! En este artículo vamos a aprender los fundamentos de la programación con SwiftUI para crear una app de iOS desde cero. 

Nuestro profesor de los ciclos de informática, Pedro González, ha preparado este tutorial para que puedas crear tu primera App con iOS.

En esta aplicación, no solo vamos a mostrar el ya clásico “Hello World”, primer programa que se desarrolla en todos los lenguajes de programación. También incorporaremos la funcionalidad de introducir un nombre para recibir un saludo personalizado, mostraremos la fecha y hora actuales y añadiremos imágenes. Finalmente, para construir una interfaz elegante y eficiente, utilizaremos Xcode, Swift y SwiftUI, el moderno framework de Apple para desarrollar aplicaciones.

Todos los pasos para crear una App desde cero

Antes que nada, vamos a hablar sobre el software que utilizaremos para crear esta aplicación. En este caso, desarrollaremos una App para dispositivos que usan iOS (iPhone, iPad, Apple TV, Apple Watch, Mac, etc.), por lo que las herramientas que utilizaremos serán nativas.

Para empezar, vamos a usar Xcode, un conjunto de herramientas de desarrollo web que permiten crear aplicaciones para dispositivos de Apple. Esta herramienta se puede descargar de manera gratuita en la Mac App Store. Por otro lado, usaremos el lenguaje de programación Swift, diseñado también por Apple.

A continuación, vamos a explicarte cómo crear una App paso a paso. ¡Toma nota y no te pierdas ningún detalle!

Paso 1: configura el entorno de desarrollo

El primer paso para crear tu App es descargar e instalar Xcode desde la Mac App Store. Como ya hemos comentado, Xcode es el entorno de desarrollo integrado (IDE) para todas las aplicaciones de Apple. En este sentido, es fundamental para escribir, compilar y probar tus aplicaciones iOS.

Paso 2: crea un Nuevo Proyecto SwiftUI

Embarcarse en la creación de tu primer proyecto SwiftUI es un momento emocionante y transformador. Como desarrollador, estos son los pasos que tendrás que realizar para crear una App desde cero:

1. Inicia Xcode y elige “Create a new Xcode project”.
2. Selecciona “App” bajo la sección de iOS y haz clic en “Next”.
3. Asegúrate de que “SwiftUI” esté seleccionado en el menú desplegable de “Interface” y “Swift” como el lenguaje de programación (las opciones pueden cambiar dependiendo de tu versión)
4. Nombra tu proyecto, -por ejemplo, “HelloWorld”- y completa los detalles requeridos antes de hacer clic en "Create”.

Con esto, ya tendremos creado nuestro proyecto. Además, como puedes ver, ya viene con una vista predeterminada que incluye una imagen y un saludo.

Los elementos de la vista van dentro del body (cuerpo) y en él están anidados dentro de una estructura VStack. Podemos personalizar estos elementos con atributos como imageScale, foregroundColor o padding.

Paso 3: diseña la Interfaz de Usuario con SwiftUI

El siguiente paso es diseñar la interfaz del usuario. Para ello, vamos a usar SwiftUI, puesto que permite diseñar la UI de manera declarativa, es decir, simplemente describiendo cómo quieres que se vea.

Primero, vamos a crear dos variables para mostrar el saludo personalizado. La primera será una cadena de texto (String) vacía a la que llamaremos name, y la segunda será otra cadena de texto con el mensaje “Hello, world!”, con el nombre greeting.

@State private var name: String = ""
@State private var greeting: String = “Hello, world!”

Dentro del cuerpo (body) de nuestra vista creamos un nuevo campo de texto para que el usuario pueda introducir su nombre.

TextField(“Enter your name”, text: $name)
.textFieldStyle(RoundedBorderTextFieldStyle())
.padding()

Luego crearemos un botón para pasar el nombre introducido a nuestro campo de texto interactivo, que haremos editando el Text que se nos ha autogenerado.

Button(“Greet Me!”) {
greeting = “Hello, (name)!”
}
.padding()
.foregroundColor(.white)
.background(Color.blue)
.cornerRadius(10)

Text(greeting)
.font(.title)
.padding()

Además, vamos a hacer que la aplicación muestre la fecha y la hora actual, así que
necesitaremos crear un método para obtenerla.

var currentDateTime: String {
let formatter = DateFormatter()
formatter.dateFormat = “yyyy-MM-dd HH:mm:ss”
return formatter.string(from: Date())
}
Ya que tenemos la fecha guardada en una variable (var) podemos volver a nuestro body y mostrarla en otro elemento Text.
Text(currentDateTime)
.font(.subheadline)

Paso 4: añade una Imagen a Tu Aplicación

Para hacer tu aplicación aún más atractiva, puedes añadir imágenes. Para ello, tendrás que seguir los siguientes pasos.

1. Prepara tu imagen en diferentes resoluciones y asegúrate de que esté en un formato compatible, como PNG o JPEG.
2. Arrastra la imagen a Assets.xcassets en Xcode.
3. Utiliza la imagen en tu UI con SwiftUI añadiéndola del siguiente modo:
   Image(“nombreDeTuImagen”)
   .resizable()
   .aspectRatio(contentMode: .fill)
   .frame(width: 100, height: 100)

De la misma forma, puedes cambiar el icono de tu aplicación arrastrando la imagen a
AppIcon dentro de Assests.

Paso 5: ejecuta y prueba tu aplicación

Finalmente, ejecuta tu aplicación en un simulador o en un dispositivo real para probar su funcionamiento. 

Introduce un nombre en el campo de texto, haz clic en “Greet Me!”, y observa cómo la aplicación te saluda personalmente, además de mostrarte la fecha y hora actuales junto con la imagen que has añadido.

¡Crear una App al alcance de cualquiera!

¡Felicidades! Ahora ya sabes cómo crear una app en iOS usando SwiftUI. Este proyecto no solo te introduce a los fundamentos del desarrollo de aplicaciones con SwiftUI, sino que también te brinda la oportunidad de experimentar con diferentes aspectos de la creación de aplicaciones, como el diseño de la UI y la personalización de tu aplicación. 

Si te ha gustado este artículo y aprender a desarrollar aplicaciones para todo tipo de dispositivos, te animamos a formarte con el Grado Superior de Desarrollo de Aplicaciones Multiplataforma. Esta práctica es solo una pequeña parte de todo lo que harás en el ciclo formativo de DAM.

Sigue explorando y aprendiendo con ILERNA para desarrollar aplicaciones aún más complejas y funcionales. ¡Este es solo el comienzo!