Categorías

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

A continuación, vamos a ver cómo desarrollar nuestro primer “Hola 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 “HolaMundo”.
    • Para ello abrimos Xcode y le damos a “Create 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 “gestor 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.storyboard y 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 “Cmd + 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 “saluda”, el mensaje cambie por un “¡Hola 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 “Hola 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 “Breakpoint Navigator”:

Introducción al entorno de desarrollo

Abajo del todo hay un pequeño botón “+”. Haz clic en él y selecciona “Add 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.