Apple ha creado un nuevo lenguaje de programación, el cual durante su creación y según los rumores, estuvo en proceso de desarrollo cerca de 4 años, seguramente Jobs alcanzó a poner su magia allí. Swift fue lanzado en el WWDC 2014 y ya que hemos estado practicando con este nuevo lenguaje debo decir que facilita muchísimo la vida de todo developer existente de iOS y la curva de aprendizaje para los nuevos en la plataforma es increíblemente corta.
En este post haremos un “Hola Mundo” integrando el lenguaje con los componentes gráficos. Hay muchas cosas interesantes en Swift como el playground, aunque ahora nos enfocaremos en algunos conceptos de la nueva sintaxis, UI y como crear el proyecto en Xcode 6.
Este post esta pensando principalmente para todos aquellos developers que quieran iniciar en el mundo de iOS para el cual usaremos Swift, NO es necesario saber Objective-C para poder realizar este ejercicio y mucho menos para comenzar a desarrollar tu App para iPhone o iPad.
Para comenzar es necesario contar con lo siguiente:
- Una mac con Mavericks, no es necesario tener Yosemite instalado
- Cuenta de iOS Developer Program para poder descargar Xcode 6 aunque si googleas adecuadamente encontraras mas opciones
![😛]()
- Si es posible un dispositivo con iOS 8 instalado, si no con el simulador que viene en Xcode 6 es suficiente
- Un par de tazas de cafe, tus audífonos, música cool para programar del Music Inspector
![😀]()
Después de instalar Xcode 6 lo abrimos y en la primer pantalla seleccionemos la opción “Create a new Xcode project”, en caso de que no te aparezca el Splash Screen ve al menú File->New->Project o en su defecto el juego de teclas shift+command+N.
En la siguiente pantalla busquemos la opción iOS->Application->Single View Application y pulsamos el botón next.
Llenamos las opciones de Product Name, Organization Name y Organization Identifier. En la opción de Language seleccionamos Swift y en Devices para este caso dejamos la opción Universal. Las otras opciones es si deseas que tu aplicación sea especifica de iPhone o iPad. La opción de Core Data la dejamos sin seleccionar. En la siguiente imagen veras como queda al final.
En el siguiente paso elegimos la carpeta donde deseamos guardar nuestra aplicación. La opción de “Create Git repository” podemos dejarla sin seleccionar por ahora. En otro post explicaremos como integrar Git con Xcode.
Una vez creado el proyecto veremos la estructura del lado izquierdo en el explorador. Los que ya han trabajado con Objective-C verán la diferencia de los archivos, ya no existen los archivos con extensión .h ni .m solo están los archivos con extensión .swift.
Los archivos que nos interesan principalmente son:
- AppDelegate.swift: La función primaria de esta clase es la de manejar las transiciones de estado dentro de la aplicación y notificar de estos cambios y así detectar cuando se entra, sale, o se va a segundo plano la aplicación entre otros eventos.Una de las principales funciones del AppDelegate es la de crear el ViewController una vez que ha detectado el evento de que la aplicación a sido lanzada.
- ViewController.swift: Este objeto administra la presentación del contenido de tu aplicación en pantalla, gestiona una sola vista que a su vez puede tener una o varias subvistas. Cuando la vista va a ser presentada, este controlador la hace visible al insertarla en una ventana de la aplicación.En este archivo es donde se establece el comportamiento (métodos o funciones) que harán que la vista definida en el Main.storyboard funcione. De igual forma se establecen los métodos o funciones para agregar o extraer datos del modelo gestionando así la relación entre la vista y el modelo.
- Main.storyboard: Este archivo contiene la colección de vistas que serán presentadas en la aplicación por el ViewController, por tanto contiene todos los componentes de la interfaz de usuario como botones, sliders, etiquetas, campos de texto, etc. Dependiendo de como crees tu proyecto puede o no existir este archivo y tendrás que crear y gestionar los componentes gráficos de tu app directamente en código. Ojo! Cuando creas un prototipo o cuando estas aprendiendo, como este caso, los storyboard son muy funcionales, pero ya para una aplicación que mandaras a la tienda no son tan recomendables. Acá un artículo detallando mas sobre el tema por Fernando Rodriguez instructor iOS en Big Nerd RanchCuando tenemos este storyboard es posible trabajar con el Interface Builder con el cual tendremos una representación visual de los componentes y su distribución en la vista.
Puedes encontrar más información sobre estos archivos en la documentación oficial de Apple Developer
En las demás carpetas encontraremos los archivos para realizar pruebas unitarias y los binarios del proyecto.
Los archivos con los que trabajaremos principalmente en este ejemplo son ViewController.swift y Main.storyboard. Para poder tener ambos archivos en la misma pantalla y sacar mayor provecho del IDE abramos primero el archivo Main.storyboard y posteriormente localicemos en la parte superior derecha un icono representando un traje con moño (Assistant Editor) y busquemos ocultar las ventanas que no usaremos. Como ejemplo tu pantalla deberá quedar de la siguiente manera.
Nuestra pantalla deberá quedar de la siguiente forma, ocultamos el Project Navigator pulsando command + 0,del lado izquierdo nuestra vista queda el Interface Builder y del lado derecho el archivo ViewController.swift y a continuación queda la vista Utilities
Una vez configuradas nuestras ventanas, establezcamos el layout de un iPhone, para esto ubiquemos vayamos al Interface Builder y seleccionemos el primer icono llamado ViewController, una vez seleccionado ubiquemos en el panel del lado derecho el Attributes Inspector y en la sección de Simulated Metrics seleccionemos en el apartado Size la opción iPhone 4-inch y del apartado Orientation la opción Portrait.
Ya con el layout establecido pasemos a agregar los componentes gráficos de nuestra app. Ubiquemos el panel Object Library en la parte inferior derecha de nuestra pantalla. De esta necesitaremos por ahora dos componentes, Label y Button, al ubicarlos habrá que arrastrarlos hasta el Interface Builder y allí ordenarlos. Los textos de cada componente podemos modificarlos al dar doble click sobre cada uno. Las propiedades gráficas de cada uno como color de fondo, color y tamaño de textos y demás se pueden editar al dar un click en cada uno y ubicar la propiedad deseada en el panel de Attributes Inspector en la parte izquierda de tu pantalla. Los colores y tamaños son a tu gusto ;).
Tu layout ya con los componentes debe quedar de la siguiente forma.
La idea es que logremos hacer que, al pulsar el boton con la leyenda “Saludar”, se muestre en la etiqueta el texto “Hola Mundo”. Para esto trabajaremos ya con el ViewController donde estaremos trabajando con 2 propiedades @IBAction y @IBOutlet, que son las propiedades que nos servirán de puente para detonar acciones en el controlador(@IBAction) y recibir o enviar los datos que se muestran o reciben en pantalla (@IBOutlet).
Escribamos el primer método haciendo click sobre el botón con la leyenda saludar, sin soltar el botón del mouse pulsemos la tecla control (ctrl) y arrastremos el botón hacía el viewController justo debajo del método didReceiveMemoryWarning. Cuando comenzamos el proceso de arrastrado el botón se mantendrá en su lugar y se mostrará una línea para indicar que se esta relacionando el botón con un método.
Una vez que terminado el proceso de arrastrado o dragging, se desplegará una ventana de opciones donde deberemos seleccionar los siguientes valores:
- Connection: Seleccionar la opción action, pues el tipo de conexión que detonará es una acción del usuario sobre el componente.
- Name: El nombre que llevará el método, en este caso escribamos saludar.
- Type: Seleccionemos para este caso la opción UIButton pues es este quien detonará una acción y en caso de recibir parámetros se puede relacionar a este tipo de dato.
- Event: Dejamos el valor por default “Touch Up Inside”. De cualquier forma si deseamos que sea otro tipo de evento el que detone esta función podemos elegir cualquiera de las opciones desplegadas en la lista. Los eventos mostrados son los relacionados al tipo de objeto, por lo que pueden variar según su función.
- Arguments: Son los parámetros que recibirá el método. Para este caso no se estará recibiendo ninguno por lo que seleccionamos la opción none.
No es necesario que hagamos siempre este proceso para crear y relacionar los métodos con los componentes gráficos. Ya sea que necesitemos agregar una nueva relación, modificar una ya existente o hacer que de un evento se detonen uno o más métodos, lo que tenemos que hacer es dar click derecho sobre el componente y se desplegará una lista de todas las opciones disponibles para el objeto. Para eliminar una relación deberemos pulsar el símbolo de X que esta sobre el nombre de la relación y para agregar una nueva relación existente o crear una deberemos hacer un click sobre el circulo a la derecha de cada opción deseada y hacer el proceso de arrastre y demás acciones explicadas anteriormente. Recordemos que podemos escribir todas las funciones y variables necesarias y al finalizar realizar las relaciones necesarias.
Cuando terminamos de hacer la relación aparecerá el método escrito y desde allí podremos escribir las acciones a ejecutar en la función. Antes de escribir dichas acciones establezcamos la relación para la etiqueta.
Esta relación tendrá una conexión de tipo Outlet y de nombre saludo.
Ahora en nuestro ViewController el código se verá de la siguiente forma
@IBAction func saludar() {
}
@IBOutlet var saludo: UILabel
Lo que sigue es sumamente sencillo, en el método que acabamos de crear, saludar(), indicaremos a la etiqueta relacionada con la variable saludo que tenga un valor y dado que es de tipo @IBOutlet automáticamente se mostrará el valor nuevo en pantalla. La variable saludo al ser de tipo UILabel tiene una propiedad text que es a donde asignaremos la cadena texto “Hola Mundo!”. Nuestro código quedará de la siguiente forma:
@IBAction func saludar() {
saludo.text = "Hola Mundo!"
}
@IBOutlet var saludo: UILabel
Ya con este código podemos compilar y probar la aplicación ya sea en nuestro dispositivo con iOS8 o en el simulador. Al probar nuestra app y pulsar en el botón con la leyenda saludar se modificará el valor de la etiqueta mostrando ahora la cadena de texto “Hola Mundo!”.
Ahora pongamos una funcionalidad extra para recibir datos desde un campo de texto, procesarlo en el ViewController y modificar la etiqueta con el nuevo texto.
Desde la librería de objetos busquemos un text field y un label y habrá que arrastrarlos al Interface Builder, reorganicemos los componentes de nuestro layout para que quede de la siguiente forma
Ahora hagamos una relación del text field con una conexión de tipo Outlet pues solo recibiremos el valor de este objeto mas no se reaccionará ante un evento de este. En la opción name pongamos nombre, que valga la redundancia, será el nombre de dicha variable.
Ahora tendremos una nueva variable, y para mostrar como quedaría un método sin relación con la vista así como la forma de invocar métodos, agregaremos una función llamada armaSaludo() la cual se encargará de concatenar el valor estático de “Hola ” y concatenarlo con el contenido variable de la propiedad text del objeto nombre de tipo UITextField o en palabras más comunes concatenar con lo que sea que se escriba en el campo de texto. Nuestro código ya modificado quedará de la siguiente forma
@IBAction func saludar() {
armaSaludo()
}
func armaSaludo()
{
saludo.text = "Hola " + nombre.text + "!!!"
}
@IBOutlet var saludo: UILabel
@IBOutlet var nombre: UITextField
Pueden notar como la función que no está relacionada con la vista no hay nada que anteceda a la palabra reservada func. El flujo de nuestra app queda entonces de la siguiente forma:
- Escribimos un nombre en el campo de texto
- Pulsamos el botón con la leyenda “Saludar”
- Una vez pulsado el botón se invoca la función saludar() la cual a su vez invoca a la función armaSaludo(). Claro que pudimos brincarnos este paso, pero el objetivo era ver los métodos no relacionados a la vista y como es que se invocan métodos desde el ViewController
- Al ser detonada la función armaSaludo() se concatenan el valor estático “Hola ” con el valor dinámico contenido en nombre.text y se asigna el nuevo valor generado a la variable saludo que esta ligada a un label en la vista.
- La variable saludo al ser de tipo Outlet automáticamente notifica a la vista para mostrar el valor que tenga actualmente.
En los tipos de variables observamos que tanto los Action como los Outlet tienen el prefijo @IB el cual significa Interface Builder indicando así, ya sea para el Action o Outlet que están relacionados con la vista generada en el Interface Builder.
Probemos ahora nuestra aplicación y veamos el resultado.
Como ven, Swift es un lenguaje de programación que nos facilita muchísimo la tarea de desarrollar apps para iOS, creo que esto será un parteaguas interesante en el mundo de desarrollo móvil.
Les dejo está galeria de la aplicación corriendo en un iPad Mini con iOS8, solo modifique un poco el acomodo de los componentes en el layout para que se vieran mejor 
de allí en fuera todo es idéntico!
El código completo de este código puedes encontrarlo en nuestro repositorio de GitHub en https://github.com/riactive/RIActive-Swift-HelloWorld/ para que que puedas hacer un fork, modificar y probar a tu gusto.
En el siguiente listado encontrarás algunos recursos que te serán interesantes para aprender más sobre Swift y gratis 
- Presentación en SG Conference & Expo 2014: http://www.slideshare.net/yacaFx/hola-swift
- Blog Oficial: https://developer.apple.com/swift/blog/
- Book 1, Swift Programming Series: http://goo.gl/xOos0X
- Book 2, Swift Programming Series: http://goo.gl/BclW5n
- iOS Human Interface Guidelines: http://goo.gl/6Ye5JI *Este no habla de Swift como tal pero si sobre las guías de diseño para iOS en las cuales Apple es demasiado estricto.
Hay otro link bastante ilustrativo de Video2Brain que, aunque no es gratuito, pero vale mucho la pena https://www.video2brain.com/mx/cursos/introduccion-a-swift
Espero que este tutorial les sea de mucha utilidad y que puedan empezar en este fabuloso camino de desarrollo de apps móviles. El 26 de septiembre estaremos impartiendo un BootCamp de Swift y tenemos un lugar para regalar en la comunidad! Así que pendientes de la dinámica que estaremos publicando para que puedas asistir.
Cualquier duda o comentario no duden en postearlo por esta vía o en nuestras redes sociales
Saludos y Happy Coding!!!
Sergio Brito – @yacaFx