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

Pinceladas de Objective-C para Rubyistas

 RubyMotion nos permite desarrollar aplicaciones para iOS sin necesidad de escribir código Objective-C. Sin embargo, es muy importante aprender a leerlo, ya que nos facilitará el aprendizaje del SDK de Apple.

A primera vista, Objective-C y Ruby no podrían ser más diferentes el uno del otro. Mientras que Ruby es hermoso y elegante, Objective-C parece un entresijo de corchetes. Sin embargo, si miramos más allá de las diferencias sintácticas, podemos observar que en realidad no difieren mucho uno del otro, ya que ambos lenguajes heredan características de Smalltalk

Mensajes

Al igual que con todos los lenguajes basados ​​en Smalltalk, el modelo de POO de Objective-C se basa en enviar mensajes a instancias de objetos. Veamos la sintaxis:

Equivalente en Ruby:

Ej. Instancia de un NSMutableArray de Cocoa.
En Objective-C

En Ruby:

Clases y objetos

Diseño
El diseño de clases en Objective-C es similar al de C++, ya que ambos requieren que la interfaz e implementación de una clase estén en bloques de códigos separados. Por convención, la interfaz se sitúa en un archivo de cabecera (.h) y la implementación en un archivo de código (.m).
Interface implementation
Veamos la sintaxis:

Equivalente en Ruby:

Instancia
La instanciación de clases en Objective-C es un proceso que consta de dos pasos: primero se  debe asignar una cierta memoria para el objeto llamando al método alloc, y luego lo inicializamos con el método init.
En Objective-C

En Ruby:

Propiedades

Las propiedades de un objeto permiten a otros objetos acceder o cambiar su estado. Como sabemos, en un programa bien diseñado, no es posible acceder directamente al estado interno de un objeto, para ello usamos los métodos de acceso ( getters y setters ).

Properties

Declaración
En Objective-C

En Ruby:

Acceso
En compilador de Objective-C genera un getter y setter para la propiedad. Una vez declara la propiedad, puede llamar a estos métodos como si estuvieran incluidos en la interfaz de la clase y en el fichero de implementación:

Equivalente en Ruby:

Atributos más importantes de las propiedades

getter=Permite usar un nombre personalizado para el método getter.
setter=Permite usar un nombre personalizado para el método setter.
readonlyPropiedad de solo lectura
nonatomicNo garantiza la integridad de los accesores en un entorno multihilo, pero es más eficiente que atomic
strongCrea una relación fuerte entre la propiedad y el valor asignado. Es el valor por defecto.
weakCrea una relación débil entre la propiedad y su valor.
copyCrea una copia del valor asignado en lugar de hacer referencia a la instancia actual

Métodos

En la declaración de métodos se deben especificar varias cosas: el tipo de método (de clase o de instancia) el tipo del valor de retorno, su nombre y sus parámetros (con sus tipos incluidos).
A diferencia de otros lenguajes, el nombre de los métodos en Objective-C es una combinación de su nombre y sus parámetros.
Veamos un ejemplo del SDK de Apple:

  • El guión “-” nos indica que se trata de un método de instancia.
  • El tipo devuelto es un NSInteger.
  • Los parámetros son tableView, y numberOfRowsInSection:section

Equivalente en ruby:

 

Resumen

En este post hemos visto pequeñas pinceladas del runtime de Objective-C, algunas peculiaridades de su sintaxis, y lo excesivamente “verbose” que es en comparación con Ruby.
Hasta la próxima entrada!

Hola mundo! en RubyMotion

Este es el primer post de mi nuevo blog, en él voy a tratar temas relacionados con el desarrollo de aplicaciones web y móviles. Actualmente estoy profundizando en varios frameworks para el lenguaje de programación Ruby, así que los primeros post estarán relacionados con el mundo Ruby. En este post voy a explicar como crear un “hello world” en iOS con uno de estos frameworks, Rubymotion.
Rubymotion es un framework comercial basado en MacRuby, creado por Laurent Sansonetti, para construir aplicaciones nativas para iOS usando el lenguaje de programación Ruby.
RubyMotion compila el código Ruby a código máquina (ARM) utilizando un compilador estático basado en LLVM. La API estándar de iOS está disponible en RubyMotion, lo que significa que todas las funciones disponibles para los desarrolladores de Objective-C en la plataforma iOS, también están disponibles para los desarrolladores de Ruby.

Prerequisitos:

  • Un Mac con OS X 10.6 o superior.
  • Instalar el SDK de iOS, actualmente viene con Xcode, el cual puedes obtener gratuitamente a través de la Mac App Store.
  • Una vez instalado necesitas el Command Line Tools, lo puedes descargar a través de las preferencias del propio Xcode.
  • Por último, instalar Rubymotion, el cual puedes adquirir desde aquí.

Hello World!:

Una vez configurados los prerequisitos ya estamos listos para crear nuestra primera app con Rubymotion. Para ello abre el terminal y dirígete al directorio donde quieras crear el proyecto, luego escribe el siguiente comando.

Este comando creará un proyecto RubyMotion en un nuevo directorio llamado HelloWorld. En caso de que el directorio exista, el comando devolverá un error.
Si accedemos al directorio generado por motion create, podemos comprobar que contiene dos ficheros: Gemfile, en el cual vamos a agregar las gemas que vamos usar en nuestra aplicación, el fichero de configuración Rakefile; y tres directorios: app, resources y spec. El directorio app contiene el código de la aplicación, resources contendrá los ficheros de recursos del proyecto, iconos, imágenes o ficheros de sonido y en spec almacenaremos nuestras clases de test.
Nosotros tan sólo vamos a modificar el archivo que se encuentra dentro del directorio app, app_delegate.rb, el cual es creado por defecto. Este implementa la clase AppDelegate, la cual es responsable de controlar la aplicación.

Abrimos el fichero app/app_delegate.rb con el editor que prefieras, yo voy a usar Sublime Text, y agregamos lo siguiente:

Para ejecutar la aplicación volvemos a la terminal y ejecutamos dentro del directorio del proyecto el comando rake.

Si todo ha salido bien veremos como se ejecuta una alerta dentro del simulador de iOS ;).
Saludos y hasta la próxima!