ILERNA Online Logo
Llámanos gratis de lunes a viernes de 9:00h. a 20:00h.
ILERNA Online Logo

Cómo crear una app para iOS con SwiftUI

Informática, 26 FEB 2024, ILERNA

¿Quieres más info?

Solicita información

Ver el dosier
Escribe tu nombre y apellidos
Escribe un email válido
Escribe un teléfono válido
Escribe tu código postal
Escoge la opción en la que estás interesado
Escoge la formación en la que estás interesado

INFORMACIÓN PROTECCIÓN DE DATOS DE ILERNA

Finalidades: Responder a sus solicitudes de información y mantenerle informado de nuestros cursos y servicios, incluso por medios electrónicos. Derechos: Puede retirar su consentimiento en cualquier momento, así como acceder, rectificar, suprimir sus datos y demás derechos en [email protected].

Información adicional: Política de Privacidad.

Este campo es obligatorio

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

️ Guía Gratis: ¿Qué titulaciones de FP tienen más salidas laborales en 2023?

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.

cómo crear la imagen y saludo de una app
cómo crear mi primera app móvil

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()

código para crear una aplicación móvil desde cero

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)

código cómo crear app
cómo poner nombre a una app de ios

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.

Añadir imagen a tu app

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!

Descubre tu futuro profesional en Sanidad

Compartir en:
ILERNA
ILERNA

En el grupo de redactores de ILERNA somos curiosos por naturaleza, nos encanta estar al tanto de todo e ir siempre un paso más allá. El mundo de la Formación Profesional nos apasiona y siempre estamos informados de las últimas novedades. Gracias a este blog podemos compartir toda nuestra sabiduría sobre el sector y acercar esta rama de la educación a todo el que le interese. En estos artículos queremos compartir especialmente contigo el conocimiento necesario para que saques el máximo rendimiento a tu FP.

Tu éxito profesional a un CLICK.

Solicita información

¿Quieres seguir
estudiando FP?

Quieres estudiar una FP, pero no tienes claro por dónde empezar. ¿Será mejor la modalidad a distancia, la presencial o un mix de las dos? ¿En cuántas asignaturas me puedo matricular? ¿Qué salidas profesionales hay? Pincha abajo e infórmate sobre la Formación Profesional que más se adapta a ti.

Conoce a nuestros autores y colaboradores

Reclutamos a los mejores para ofrecerte información de primera mano sobre la Formación Profesional. Son profesionales de diferentes sectores, que escriben sobre las novedades que te interesan en el blog de ILERNA.

Conócelos