Entradas

“Hola mundo!” con Swift

El pasado mes de Junio, Apple anunció el lanzamiento de su nuevo lenguaje de programación Swift. Un lenguaje que, comparado con Objective-C, posee una sintaxis más moderna y limpia.

En este artículo, vamos a realizar la típica aplicación de ejemplo”Hola Mundo!” en Swift, además cubriremos algunos de los fundamentos básicos del desarrollo de apps para iOS.

Requisitos

Para este pequeño tutorial, necesitamos un equipo con OSX (mac o hackintosh) y la última versión de Xcode, el cual podemos descargar gratuitamente de la Mac App Store.  Xcode es el IDE más utilizado para desarrollar aplicaciones para iOS o Mac.

Paso 1: Crear el proyecto

Abrimos Xcode y hacemos clic en  el menú “Archivo -> Nuevo -> Proyecto”.

Nos aparece una pantalla con una serie de plantillas para la creación de aplicaciones iOS. Dichas plantillas incluyen código por defecto que nos pueden ayudar a ahorrar tiempo. Para nuestro ejemplo vamos a elegir la opción “Single View Application”. Esta opción es la mejor para el aprendizaje de los conceptos básicos.

Hacemos clic en el botón “Next” y rellenamos los siguientes datos:

  • Product Name: Nombre de la aplicación
  • Organization Name. Tu nombre o el de tu compañía.
  • Organization Identifier. Este campo suele escribirse como un nombre de dominio inverso. (ej. es.appdev)
  • Language. Elegimos “Swift”.
  • Devices. Elegimos “iPhone”.
  • Use Core Data. Lo mantenemos sin marcar.

Una vez rellenados los datos volvemos a hacer clic en “Next” , aparecerá un cuadro de diálogo para guardar el proyecto,  elegimos la ubicación que queramos y guardamos. Una vez que guardado el proyecto, aparecerán una serie de opciones, no nos asustemos, para este ejemplo vamos a pasar por alto la mayor parte de lo que vemos en pantalla. Por ahora solo nos preocuparemos de lo básico.

Paso 2: Diseño de la interfaz

En el lado izquierdo de la pantalla, podemos ver el panel “Navigator”. Este nos permite navegar a través de los ficheros que componen nuestro proyecto. Como podemos observar hay algunos archivos que Xcode genera automaticamente, para empezar hagamos click sobre el fichero “Main.storyboard”.

Debería aparecer lo siguiente:

La imagen anterior nos muestra un “View Controller” en blanco. Un “View Controller” es  básicamente el equivalente a una pantalla. Por ejemplo, la app “Reloj”  del iPhone, consta de cuatro pantallas principales, y por lo tanto, al menos, cuatro view controllers:

  • Reloj Mundial
  • Alarma
  • Cronómetro
  • Temporizador

Esta no es una definición purista de lo que es un “View controller”, pero por el momento nos basta para comprender básicamente para que sirven.

Por defecto la ventana del “View controller” aparece cuadrada,  Apple la dispone de esta manera para que realicemos una interfaz adaptativa, pero esto se escapa del alcance de este tutorial. Nosotros vamos a hacerla rectangular, para ello seguimos los siguientes pasos:

  1. Hacemos clic en cualquier lugar dentro del cuadrado blanco, para seleccionar el view controller.
  2. En la barra de herramientas de la derecha seleccionamos “Attributes Inspector”.
  3. En la opción “Size” seleccionamos algún tamaño de iPhone.

En este punto, vamos a crear nuestra interfaz  añadiendo un botón para el medio de ella. Para ello, nos vamos a la “Biblioteca de objetos”. Esta biblioteca contiene una serie de objetos que se pueden introducir en nuestra interfaz, si nos desplazamos a través de la lista podemos encontrar el objeto “Button”:

Arrastramos el objeto botón de la biblioteca al view controller. Para cambiar el texto del botón, hacemos doble clic en él y escribimos, por ejemplo, “Click Me”. Una vez situado, hacemos clic en “run” en la esquina superior izquierda de Xcode. Esto ejecutará nuestra aplicación dentro de un simulador de iOS:

Paso 3: Escribir código Swift

Para empezar a escribir algo de código Swift, abrimos el “Assistant Editor“. Podemos encontrar el botón para ello en la esquina superior derecha de la pantalla. Después de hacer clic en el botón, aparecerá un archivo con algo de código.

Por el momento, ignoramos todo el código, excepto esta parte:

En el código anterior, tenemos una función llamada viewDidLoad,  esta función se ejecutará inmediatamente después de que se cargue nuestra vista, en nuestro caso, como solo tenemos una vista, se ejecutará una vez se haya cargado la aplicación.

Para ver esto en acción, vamos a escribir lo siguiente dentro de la función:

La función println se utiliza para enviar texto a la consola. En este caso, “Hello world!”. Si nos fijamos, no hemos utilizado un punto y coma al terminar la declaración, en Swift no son necesarios, pero se pueden escribir opcionalmente.

Ejecutamos el simulador de nuevo, una vez cargada la aplicación,  aparece otro panel en la parte inferior de la ventana de Xcode. Este es el panel de “depuración” , en el lado derecho del mismo, podemos ver la consola con nuestro texto “Hello world!”.

Paso 4: Crear una acción

El siguiente paso es hacer que aparezca un mensaje en la consola cuando el usuario haga clic en el botón “Click Me”, en lugar de cuando se carga la vista.

Para ello:

  1. Mantenemos pulsada la tecla CTRL.
  2. Hacemos clic en el botón “Click Me”.
  3. Arrastramos el cursor hasta el fichero ViewController.swift.

Aparecerá una ventana con una serie de opciones. Vamos a cambiar dos de ellas:

  1. En “connection” seleccionamos “action”.
  2. En “name” escribimos “buttonPressed”.

De esta manera se crea una acción. Las acciones permiten que los elementos de la interfaz respondan a los eventos. En este caso, el botón “Click Me” va  a responder al evento “Touch Up Inside”. Una vez le damos a conectar aparece el siguiente código:

Vamos a comprobar que sucede con esta función, para ello vamos a agregar el siguiente código dentro de ella:

Si volvemos a ejecutar el simulador, debería aparecer dentro de la consola el mensaje “Ha hecho clic en el botón”.

Paso 5: Crear un Outlet

En este último paso vamos a mostrar en la interfaz de usuario el resultado de pulsar el botón, para lograr esto, vamos a utilizar los “Outlets”. Los Outlets nos permiten modificar partes de nuestra interfaz a través de código. Para ver cómo funcionan, vamos a arrastrar un objeto “label” de la biblioteca. En este objeto simplemente vamos a mostrar una cadena de texto.

A continuación repetimos los pasos que seguimos con el botón:

  1. Mantenemos pulsada la tecla CTRL.
  2. Hacemos clic en el botón “Click Me”.
  3. Arrastramos el cursor hasta el fichero ViewController.swift.

Esta vez no cambiamos la opción “Connection”, simplemente la dejamos en Outlet. Ló unico que vamos a cambiar es el nombre, para ello escribimos en name “ourLabel”. Una vez le damos a conectar debería aparecer el siguiente código:

Gracias a esta declaración, ahora podemos hacer referencia a la variable ourLabel desde código, lo que nos permite modificar nuestra label programaticamente. Vamos a comprobarlo para ello escribimos lo siguiente dentro de la función buttonPressed:

¿Qué hemos hecho?

  1. Referenciamos el objeto ourLabel.
  2. Modificamos la propiedad text del objeto.
  3. Asignamos el string “Has hecho clic en el botón” a dicha propiedad.

Si volvemos a ejecutar el simulador y hacemos haga clic en el botón “Click Me” se va a cambiar el valor de label por el texto que hemos escrito.

Hasta aquí este tutorial, he tratado de cubrir algunos aspectos básicos del desarrollo de apps para iOS con el lenguaje Swift.