Curso Primeros Pasos con Swift – Clase 2/6

Tu primera App con Swift

xCode 6

Antes de nada debes saber, que para crear tu primera App con Swift es necesario descargar la última versión de xCode.

xCode es el IDE que vamos a usar para crear Apps, en su última versión (la 6.01 a día de hoy) incluye soporte para programar en Objective-C y también con Swift.

Puedes descargar xCode de forma gratuita en el App Store.

Hola Mundo con Swift

Pues sí, queridos amigos, como no podía ser de otra manera, vamos a crear nuestro primer «Hola Mundo» con Swift.

¿Habéis descargado xCode? ¿Tenéis la mente abierta para descubrir uno de los lenguajes de programación más sencillos y con la curva de aprendizaje más liviana del mundo? (experts dixit, que no yo)

Pues basta de hacer preguntas y voy a daros respuestas.

Crear un nuevo proyecto

Abrir xCode y seleccionar «Créate a new xCode project».

En la siguiente pantalla xCode nos pedirá que seleccionemos una de las plantillas que existen por defecto, en nuestro caso seleccionaremos la plantilla «Single View Application».

A continuación debemos configurar algunos parámetros generales del proyecto, como son el nombre, el lenguaje de programación que vamos a usar, así como si queremos hacer una aplicación para iPhone, para iPad, o Universal, es decir que sirva para ambos dispositivos; los que habéis hecho alguno de mis cursos, ya sabéis cual de las tres opciones es conveniente poner aquí 😉

Por último, debemos seleccionar un sitio dónde guardar nuestro proyecto, en mi caso lo guardaré en la carpeta «Documentos».

Hacemos clic en «Create» para crear el proyecto.

Bien pues ya estamos dentro de nuestro proyecto en xCode. Cómo podéis ver, en la parte izquierda tenemos lo que yo llamo el grupo de carpeta y archivos. Aquí estarán todos los objetos, clases, y demás componentes que contendrá nuestra aplicación.

Hay dos archivos que son muy importantes, el archivo AppDelegate.swift y el archivo ViewController.swift, ambos son dos clases. Uno, el AppDelegate se encargará de gestionar todo el funcionamiento de nuestra App, el ViewController por su parte, es un objeto que se va a encargar de controlar nuestras vistas, es decir es un controlador de vista, y es aquí dónde trabajaremos.

Crear la Interfaz

Primero de todo vamos a crear la interfaz de nuestra aplicación, será una interfaz muy sencilla, sólo vamos a necesitar un botón y una etiqueta.

El botón al ser pulsado ejecutará una función, y esta función tendrá programado un algoritmo que hará que en la etiqueta aparezca: «Hola Mundo».

Vamos allá, pulsa sobre el archivo Main.storyboard del grupo del carpetas y archivos, deberías tener algo similar a esto:

Cómo ves la parte central de xCode ha cambiado, ahora tenemos un lienzo dónde poder «dibujar» lo que queramos.

Si te fijas en la parte inferior derecha, tienes unos objetos que Apple ha tenido la amabilidad de crear para que nosotros los usemos, sí, sí, así es, no es necesario programar estos objetos escribiendo código, ya están creados para nosotros 🙂

Antes de seleccionar cualquier objeto, lo primero que vamos a hacer es adaptar un poco la vista que de primeras nos ofrece xCode. En la parte central, debajo de la vista, hay un texto que dice: wAny hAny, vamos a hacer clic sobre este texto y nos aparecerá una vista modal con un rectángulo de color azul.

Si pasamos el ratón por ese espacio, podemos hacer ese rectángulo de color azul más largo, ancho, etc. Lo que estamos haciendo es seleccionar el tamaño de nuestra vista, en nuestro caso nos vale con una vista para iPhone, por lo que pasando el ratón por el rectángulo dejaremos la siguiente medida que es valida para todos los iPhone en modo portrait o vertical:

Cómo veis la imagen ha cambiado, ahora tiene un aspecto más vertical, y es aquí dónde vamos a empezar a poner nuestros objetos.

De la biblioteca de objetos que tenemos en la parte inferior derecha, vamos a seleccionar un botón, observa que debajo de los objetos que puedes ver, tienes un buscador para facilitarte la tarea de encontrar el objeto que quieres. Una vez lo veas haz clic sobre él y arrastrado dentro de la vista.

Vamos a hacer lo mismo con una etiqueta o label, deberías tener algo parecido a esto:

Conectar los puntos 😉

Decía Steve Jobs que los puntos sólo puedes conectarlos mirando hacía atrás, nunca hacía adelante, esto tenía más sentido cuándo empecé a crear Apps, pues no existían los storyboards, ni las conexiones se hacían como se hacen ahora, pero siempre me gusta enseñar el tema de las conexiones con esta frase.

En la esquina superior derecha, verás que hay seis botones, estos botones son organizadora de vistas, es decir nos van permitir cambiar la distribución de lo que vemos en xCode, si te fijas en los primeros tres botones, hay uno que es muy característico, y que tiene cierta similitud con lo que sería un smoking, con su americana y pajarita, haz clic sobre el.

La pantalla se ha dividido en dos, al margen del grupo de carpetas y archivos en la parte izquierda, y el inspector en la parte derecha, la zona central está dividida en dos partes. La parte de la izquierda es nuestra vista, el

Storyboard dónde hemos estado trabajando hasta ahora, la parte derecha es el archivo ViewController.swift, y lo que estás viendo es el lenguaje de programación Swift y algunas clases y métodos de Cocoa.

Lo que vamos a hacer ahora es crucial para el buen funcionamiento de la aplicación, por lo que estate atento a la jugada 😉

Vamos a hacer clic sobre el botón para seleccionarlo, después vamos a pulsar la tecla «ctrl» de nuestro teclado, y con la tecla pulsada vamos a hacer clic de nuevo sobre el botón, ¡ojo no sueltes el clic! manténlo pulsado y desplaza el ratón, deberías ver una flecha de color azul.

Arrastra esta flecha hasta el archivo ViewController.swift justo después de  esta linea:

class ViewController: UIViewController {

Suelta el clic del ratón, te aparecerá una ventana modal con una seríe de atributos, vamos a crear la conexión del botón con el controlador de nuestra vista.

Lo único que tienes que hacer aquí es cambiar el tipo de conexión y poner un nombre a la función. En Connection selecciona «Action» y en Name escribe el nombre que quieras darle a tu función, yo la he llamado miFunción, por ser original más que nada, y haz clic en Connect.

En nuestro archivo ViewController.swift se ha generado como por arte de magia una linea de código.

@IBAction func miFuncion(sender: AnyObject) {
    }

Lo que acabamos de hacer es crear una función, en esta función implementaremos el algoritmo que hará que al pulsar el botón en la etiqueta aparezca «Hola Mundo».

Repite el mismo proceso para la etiqueta, es decir selecciona la etiqueta, pulsa la tecla «ctrl» vuelve a hacer clic sobre la etiqueta y arrastra la flecha justo debajo de la función que acabamos de crear, después suelta el clic del ratón para que aparezca de nuevo la ventana modal dónde configuraremos la conexión.

En este caso sólo tenemos que poner un nombre a la etiqueta, ¿por qué? Muy sencillo, cuándo pulsemos el botón se ejecutará una función, en esta función vamos a decir: «oye etiqueta que ahora debes poner un texto» y si al ejecutar la función, no se encuentra la etiqueta, el programa no funcionará, por lo que debemos poner un nombre a nuestra etiqueta, en mi caso la he llamado miEtiqueta.

Otra linea de código ha aparecido en nuestro archivo.

 @IBOutlet var miEtiqueta: UILabel!

Lo que acabamos de hacer es declarar una variable. Para ser más exactos hemos declarado una variable de instancia a las clase UILabel que hemos llamado miEtiqueta.

Una vez hemos creado la interfaz en el Storyboard, una vez que hemos creado las conexiones, es hora de implementar la lógica de nuestra App. Me explico, si ahora ejecutáramos la aplicación funcionaria perfectamente, y al pulsar sobre el botón, se ejecutaría la función miFuncion, pero no pasaría nada, ¿porqué? pues porque no hemos implementado el algoritmo para que haga algo, vamos a ello.

Pulsa en el primer botón del editor de vistas para volver a la vista clásica, el que tiene tres lineas horizontales, ya que si no estamos creando conexiones es más fácil trabajar sobre esta vista.

Selecciona el archivo ViewController.swift en el grupo de carpetas y archivos si no lo tienes seleccionado. En la parte central de xCode debemos ver nuestro archivo ViewController con la función y la variable que acabamos de declarar en todo su esplendor.

Implementar la lógica para que nuestra App con Swift haga algo

Para que en la etiqueta aparezca «Hola Mundo» cuándo pulsemos sobre el botón, debemos escribir las instrucciones precisas para que al ejecutarse la función, esta función haga algo, por ello vamos a escribir dentro de las llaves de la función que acabamos de declarar.

Escribimos la siguiente linea de código:

miEtiqueta.text = "Hola Mundo"

Vuestra función debería quedar así:

@IBAction func miFuncion(sender: AnyObject) {
        
        miEtiqueta.text = "Hola Mundo"
    }

¡Pues ya está! Enhorabuena, esto es todo.

En la esquina superior izquierda, puedes seleccionar en que simulador quieres hacer funcionar tu aplicación, en mi caso tengo seleccionado iPhone 6, justo a la izquierda puedes ver un botón que tiene el símbolo de Play, haz clic sobre el mismo para ejecutar el simulador y compilar la aplicación.

Verás un botón, pulsalo y en la etiqueta debe aparecer: «Hola Mundo»

Un detalle

Si te fijas, cuándo ejecutas la aplicación en la pantalla se ve «Label» que es el texto que la etiqueta tiene por defecto.

Sí vas al Storyboard y haces doble clic sobre la etiqueta podrás editar este texto, en este caso déjalo en blanco no pongas nada.

Mismo perro con distinto collar (diferencias Objective-C y Swift)

Tanto si programas con Objective-C o con Swift vas a trabajar con Cocoa y Cocoa Touch, ¿que significa esto? pues que con la llegada de Swift no cambia todo, los objetos de los diferentes Frameworks que Apple pone a nuestra disposición, no han cambiado con la llegada de Swift.

Por ejemplo, la función que acabamos de crear y su implementación con Swift, en Objective-C sería así:

- (IBAction)miMetodo:(id)sender {
    
    _miEtiqueta.text = @"Hola Mundo";
}

La declaración de la variable de instancia a la clase etiqueta en Objective-C se declararía así:

@property (strong, nonatomic) IBOutlet UILabel *miEtiqueta;

 Sí, desde luego que hay diferencias, básicamente de sintaxis, pero si os fijáis, el objeto, la clase de Cocoa Touch, en este caso UILabel, es la misma en ambos casos.

VIDEO-TUTORIAL

Después de la teoría viene la práctica, si quieres ver el video de como crear tu primera App, ¡adelante!