Creaci贸n App’s #06 iOS Primera aplicaci贸n: Hola mundo

A continuaci贸n, vamos a ver c贸mo desarrollar nuestro primer 鈥淗ola Mundo鈥 introduci茅ndonos en el mundo de Xcode.

Nos basaremos principalmente en la creaci贸n de elementos gr谩ficos y la interconexi贸n con sus respectivos objetos, d谩ndole cierta funcionalidad.

Para empezar, seguimos los mismos pasos indicados al principio:

  • Creamos un proyecto nuevo 鈥淗olaMundo鈥.
    • Para ello abrimos Xcode y le damos a聽鈥淐reate a new Xcode project鈥.
    • Seleccionamos el tipo聽Single View Application聽en la secci贸n de aplicaci贸n y rellenamos los datos solicitados.

Al abrir Xcode, podemos observar en la columna de la izquierda varios tipos de grupos de ficheros:聽Classes, Other Sources, Resources, Frameworks, HolaMundoTest聽s, etc.

Introducci贸n al entorno de desarrollo

Introducci贸n al entorno de desarrollo

Diferencias entre la jerarqu铆a de directorios de un proyecto con Swift y uno con Objective-C

Los archivos a los que les prestaremos atenci贸n de momento son:

  • AppDelegate.swift:聽se encarga de gestionar los cambios de estado dentro de la aplicaci贸n y notificarlo al resto de componentes. Ser铆a una especie de 鈥済estor de eventos鈥.
  • ViewController.swift:聽esta clase se encarga de administrar lo que se ve en la pantalla (la vista). Aqu铆 es donde se define c贸mo los m茅todos y funciones har谩n funcionar el storyboard. Aqu铆 tambi茅n se establecen los m茅todos o funciones para agregar o extraer datos del modelo, gestionando as铆 la relaci贸n entre 茅ste y la vista.
  • Main.storyboard:聽Este archivo contiene la colecci贸n de pantallas que ser谩n gestionadas y mostradas por el ViewController, por tanto contiene todos los componentes de la interfaz de usuario como botones, sliders, etiquetas, campos聽de texto, etc. Debes saber que tambi茅n se pueden administrar los componentes gr谩ficos a mano (directamente desde el c贸digo), sin necesidad de un storyboard.

En las dem谩s carpetas, como sus respectivos nombres indican, 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.

Lo m谩s importante a la hora de desarrollar una aplicaci贸n es un entorno de trabajo c贸modo. Vamos a aprender c贸mo poner las ventanas a nuestro gusto, de forma que podamos trabajar con varios ficheros a la vez.

Para ello, vamos a pulsar sobre el聽Main.storyboardy luego pulsaremos sobre el聽Assistant Editor(icono de traje con pajarita en la parte superior derecha).

Introducci贸n al entorno de desarrollo

Ocultamos el聽Project Navigator(la barra de la izquierda donde se muestran los archivos del proyecto) pulsando聽el tercer icono desde la derecha de la imagen de arriba (el que tiene una columna sombreada a la izquierda). Tambi茅n podemos hacerlo pulsando聽鈥淐md + 0鈥.聽Nuestra vista quedar铆a as铆:

Introducci贸n al entorno de desarrollo

Ahora que tenemos un entorno de trabajo c贸modo. Comencemos:

Lo primero es indicarle a Xcode que vamos a hacer una aplicaci贸n para iPhone 5. Para eso debemos ir al InterfaceBuilder y seleccionar el icono聽ViewController(el amarillo), y nos apacerecer谩 a la derecha el聽Attributes Inspector,donde pondremos una configuraci贸n como la siguiente:

Introducci贸n al entorno de desarrollo

Ahora toca agregar los componentes de la interfaz gr谩fica de nuestra aplicaci贸n: botones, texto, sliders鈥

Por ejemplo, vamos a poner un mensaje (Label)聽y un bot贸n (Button). Lo arrastraremos desde la parte inferior derecha (Object Library). Los textos de cada componente se pueden modificar pulsando dos veces sobre los mismos. Sus propiedades gr谩ficas (color, tama帽o, tipograf铆a, color de fondo鈥) se pueden modificar en la barra derecha (Attribute Inspector)聽una vez pulsado el compontente.

Introducci贸n al entorno de desarrollo

Tu layout debe tener el siguiente aspecto:

Introducci贸n al entorno de desarrollo

Bien, ya hemos programado la pantalla de nuestra primera aplicaci贸n. Ahora solo nos falta dotarla de funcionalidad. Lo que queremos es que al pulsar el bot贸n 鈥渟aluda鈥, el mensaje cambie por un 鈥溌ola Mundo!鈥.

Vamos a programar la funcionalidad del bot贸n. Haz clic en 茅l y, pulsando la tecla control sin soltar, arr谩stralo hasta el c贸digo. Cuando empieces a arrastrarlo, ver谩s como el bot贸n se queda en su sitio y en el lugar de destino saldr谩 una l铆nea indicando la zona donde va a crearse el m茅todo.

Introducci贸n al entorno de desarrollo

Una vez que terminado el proceso de arrastrado o聽dragging, se desplegar谩 una ventana de opciones donde deberemos seleccionar los siguientes valores:

Introducci贸n al entorno de desarrollo

No es necesario hacer esto cada vez que queramos crear y relacionar los m茅todos con los componentes gr谩ficos. Tambi茅n puedes hacer clic derecho sobre el compontente y te saldr谩 un men煤 oscuro donde poder crear y eliminar las relaciones. Para eliminar relaciones pulsa sobre la X del nombre de la relaci贸n. Para agregar debemos hacer clic sobre el circulito peque帽o y arrastrarlo tal como hicmos al princpio, salvo que esta vez no hay que pulsar la tecla control.

Otra forma de programar es hacer la funcionalidad primero y luego crear las relaciones entre funciones y componentes.

Introducci贸n al entorno de desarrollo

Cuando terminamos de hacer esto, aparecer谩 el m茅todo escrito en el c贸digo. Rellenando este m茅todo podremos escribir聽las acciones a ejecutar.

Realiza el mismo proceso pero esta vez con el componente del mensaje.

Introducci贸n al entorno de desarrollo

Esta relaci贸n tendr谩 una conexi贸n聽de tipo聽Outlet聽y de nombre聽mensaje.

Introducci贸n al entorno de desarrollo

Ahora en nuestro聽ViewController聽a帽adimos la l铆nea faltante para que sea similar a este:

Introducci贸n al entorno de desarrollo

Lo que hemos hecho es indicarle a la aplicaci贸n que cuando se pulse el bot贸n saluda, el texto mensaje cambie a 鈥淗ola Mundo!鈥.

Ahora podemos compilar y probar la aplicaci贸n en el simulador pulsando sobre el bot贸n de play y comprobando que funciona bien:

Introducci贸n al entorno de desarrollo

Depurando

Cuando una aplicaci贸n falla, a la izquierda de la pantalla principal de Xcode podemos ver los errores cometidos:

Introducci贸n al entorno de desarrollo

Para ver m谩s detalle de la l铆nea del error, pulsa encima de cada error y se abrir谩 el editor de c贸digo, resaltando en rojo la parte err贸nea.

Introducci贸n al entorno de desarrollo

Una聽excepci贸n聽ocurre normalmente cuando el programa realiza algo que no debiera hacer, como por ejemplo realizar una divisi贸n por cero. Lo que nos interesa es ver d贸nde fue lanzada esa excepci贸n exactamente.

Afortunadamente, podemos decirle a Xcode que pause el programa justo en ese momento, usando un聽breakpoint. Un聽breakpoint聽es una herramienta de depuraci贸n que pausa tu programa en un momento espec铆fico. En nuestro caso se pausar谩 justo antes de que se produzca la excepci贸n.

Para a帽adir un punto de interrupci贸n (Breakpoint), tenemos que irnos a la vista de 鈥淏reakpoint Navigator鈥:

Introducci贸n al entorno de desarrollo

Abajo del todo hay un peque帽o bot贸n 鈥+鈥. Haz clic en 茅l y selecciona 鈥淎dd Exception Breakpoint鈥:

Introducci贸n al entorno de desarrollo

Un nuevo Breakpoint se a帽adir谩 a la lista.

Ejecuta la aplicaci贸n de nuevo y ver谩s c贸mo el editor de c贸digo se posiciona ahora en una l铆nea concreta de nuestro c贸digo fuente.

F铆jate tambi茅n en la pila de llamadas de la izquierda (deber谩s ir o no a dicha vista de 鈥Debug Navigator鈥 dependiendo de c贸mo tengas configurado Xcode) se muestra algo diferente.

Importante

  • Para trabajar de forma c贸moda con Cocoa, Apple nos proporciona un entorno de desarrollo integrado (IDE), llamado Xcode. Este entorno s贸lo funciona con el sistema operativo OS X y podemos descargarlo gratuitamente desde la App Store.
  • El principal lenguage de programaci贸n con el que se desarrollaba era Objetive-C, pero a partir de la WWDC de 2014 se puede usar de forma indistinta tanto Objetive-C como Swift: el nuevo lenguaje de programaci贸n de Apple.
  • Cuando creamos un proyecto se genera una estructura de carpetas de forma autom谩tica.
  • Para probar la aplicaci贸n, el SDK nos proporciona un simulador de dispositivos iPhone y iPad.
  • Cuando una aplicaci贸n falla, a la izquierda de la pantalla principal de Xcode podemos ver los errores cometidos
  • Una聽excepci贸n聽ocurre normalmente cuando el programa realiza algo que no debiera hacer, como por ejemplo realizar una divisi贸n por cero.