Home » Cursos » Curso de Apps (I): estructura básica y primera app
Curso de Apps, Lección 1

Curso de Apps (I): estructura básica y primera app

Una app o aplicación es el software específico que se ejecuta en un dispositivo u ordenador. Y crear apps es uno de los principales motivos por el que la gran mayoría entráis en este blog, lo consultáis y aprendéis con él.

Desde que Steve Jobs dio el pistoletazo de salida a la App Store en 2008, el desarrollo se ha convertido en una de esas cosas que cualquiera con tiempo, ilusión y ganas puede realizar y vender al mundo, con las mismas posibilidades y en los mismos canales que grandes empresas. Pero…

¿Qué es una app en iOS? Modelo MVC

Un app de iOS es, básicamente, un proyecto de Xcode donde tenemos 3 componentes principales:

  • La vista: Nuestra interfaz y todos los elementos que la componen: etiquetas, botones, campos, tablas, imágenes…
  • El modelo: Donde se almacena aquello que procede o se muestra en la vista. Contiene el código que da la funcionalidad a esta.
  • El controlador: es lo que conecta la interfaz con el correspondiente código que da la funcionalidad. Si pones un dato en la vista, el controlador lo recoge y lo envía al modelo. Por ejemplo, puede preguntar al modelo si el dato es válido y si no lo es, informa a la vista para que vuelva a pedirlo.

Esta conjunción de elementos es lo que comúnmente se denomina modelo-vista-controlador o MVC. La base sobre la que se sustenta el desarrollo en iOS para las apps y uno de los modelos de desarrollo posibles para trabajar con videojuegos.

Cuando queremos crear una app, hemos de tener presente que en iOS esta estará basada en una serie de ficheros esenciales y que podremos crear diferentes tipos. Para empezar, vamos a centrarnos en el más sencillo: la aplicación de vista sencilla o single view application.

Creando nuestra primera app

Comenzamos a crear nuestra primera app. Llegado este punto, bajo estas líneas tenéis la vídeo lección que hemos creado como complemento al artículo. Para entender todo bien deberéis leer también los conceptos teóricos que aquí se explican, además de poder tener la opción de ver el vídeo. Sin este podéis hacer la lección sin problema, pero solo el vídeo puede que no os sea suficiente.

Abrimos Xcode, nuevo proyecto en Create a new Xcode project y elegimos en iOS subsección Applications la opción Single View Application. Pulsamos Next. Ahora le damos un nombre, el lenguaje que queramos usar, elegimos que sea Universal y dejamos sin marcar Use Core Data. Le damos a Next. Elegimos la carpeta donde queremos grabar y listo: ya tenemos creado el proyecto.

Curso de Apps I, Single View Application

Es importante notar que aunque esta lección y el vídeo están en Swift, en Objective-C los cambios son menores, principalmente porque el único código que realmente vamos a generar es una única línea. El resto de posible código lo genera Xcode automáticamente y si el proyecto es en Objective-C, ya se encargará él de hacerlo correctamente. Por lo tanto, podéis hacer la lección con el lenguaje que os resulte más cómodo.

Repasemos el contenido del proyecto para ver exactamente en qué consiste una app en su estructura:

AppDelegate

Este fichero es el que delega el comportamiento básico de la app y donde están las funciones que se lanzan cuando se arranca esta, cuando se cierra, cuando se entra en background o se vuelve de dicho estado, etc…

Aquí podemos programar el comportamiento de nuestra app controlando cosas como qué necesitamos que arranque cuando se inicie la misma (iniciar las analíticas o la configuración de Facebook, por ejemplo), si recibimos alguna notificación o si se ha ido a un proceso en segundo plano.

El fichero viene pre-cargado con las funciones básicas y si entramos, veremos una clara explicación de cuándo se ejecuta cada una de estas funciones.

Main.storyboard

Aquí es donde están todos los ficheros de la interfaz de nuestra app. Al pulsar en él veremos que se nos muestra el editor de interfaces y los elementos necesarios para construir esta como etiquetas, campos, botones, contenedores de imágenes, etc…

También tenemos todas las herramientas que nos permiten crear las constraints o restricciones que permitirán definir interfaces que se adapten automáticamente a cualquier tamaño, resolución y/o orientación de un dispositivo.

Pero el storyboard es mucho más que eso, porque permite crear lo que se denominan escenas, que son las diferentes pantallas que mostrará nuestra app. En el storyboard, como si se tratara de un guión gráfico, podremos crear toda la estructura de navegación de la misma, cómo se interconectan o invocan los diferentes elementos y cuál es la secuencia de navegación que queramos darle.

ViewController

Este fichero es la parte de modelo de la vista que representa el storyboard y la vista principal: su correspondiente controlador de vista. Es donde le diremos a un botón de la interfaz que, al pulsarse, ejecute un procedimiento que está en este fichero y quién se encargará de almacenar los resultados.

Viene pre-cargado con dos funciones vacías: viewDidLoad que se lanza cuando se termina de cargar la vista correspondiente, y didReceiveMemoryWarning cuando hay una advertencia de memoria en el dispositivo.

Otros posibles que podemos usar son viewWillAppear cuando la vista va a aparecer (antes de empezar con su dibujado, por lo que podemos personalizar su resultado), viewDidAppear cuando ha aparecido (y se han terminado de dibujar sus elementos), viewWillDismiss cuando se llama a una vista para que desaparezca (aunque no se ha procedido a borrar la misma) y viewDidDismiss cuando una vista ha desaparecido (y ha sido borrada).

Supporting files

Una carpeta donde tenemos un fichero llamado info.plist que define determinados comportamientos básicos de la app, como la inclusión de tipos de letra personalizados, las orientaciones soportadas, los iconos que se usen, el identificador o nombre de la app… una serie de datos que definen la misma y en que, en algunos casos, se definen en otros sitios y se actualizan automáticamente en su valor en este fichero.

Images.xcassets

Son los sets de gráficos que podamos querer usar en la app, donde también se incluyen los ficheros de iconos para cada dispositivo y resolución. Podemos crear diferentes sets de imágenes en la zona de la izquierda y luego arrastrar las imágenes a la derecha.

Es un buen lugar para tener toda la información de imágenes organizada, aunque no es obligatorio salvo para los iconos de la app. Podemos tener las imágenes como recursos fuera de este set o incluso crear nuevos aparte de este.

Opcionalmente podemos poner aquí las imágenes de lanzamiento de la app (las llamadas splashscreen) aunque se recomienda usar mejor el último elemento que vamos a comentar.

Launchscreen.xib

Un fichero de interfaz más, pero esta es especifica para el lanzamiento de la app. A través del uso de las citadas constraints, podemos crear una interfaz estática que nos permita tener una única pantalla de arranque que se adapte a todas las resoluciones.

Creación de interfaces

Ya hemos comentado qué es un storyboard, donde no solo tenemos una interfaz, sino que podemos crear todo el árbol de navegación de la app como elementos de una escena que son capaces de invocar a otras (normalmente botones).

Pero existen otras dos formas de crear interfaces. La más artesanal es mediante código y a su vez la más compleja en cuanto a número de cosas a tener en cuenta. No obstante, si lo deseamos podemos crear los objetos y crear nuestras propias funciones para colocar elementos en pantalla y calcular las posiciones relativas en función de las resoluciones.

Si dejamos el storyboard vacío, la app al terminar de lanzarse ejecutará viewDidLoad en el fichero viewController y desde ahí podemos empezar a construir nuestra interfaz con los diferentes objetos que nos proporciona la librería UIKit. Todo con código.

La otra opción, algo intermedio entre las dos comentadas, es creando archivos xib, es decir, definiciones de interfaces con su correspondiente controlador de vista. Si creamos 5 archivos xib, deberemos crear 5 controladores de vista para cada uno de ellos y controlar cómo se invocan y se inter-relacionan unos con otros. Originalmente era así como se programaban las apps antes de la introducción de los storyboards en iOS 5 y sigue siendo la forma preferida de algunos desarrolladores pues da mayor flexibilidad en determinados detalles que los storyboard, que están más pensados para un tipo de app más específica.

Apprendiendo

Ya tenemos nuestra app y sabemos cómo funciona. Vamos a pulsar Main.storyboard. En la parte inferior de la barra lateral derecha tenemos cuatro iconos. Si ponemos el puntero del ratón encima nos dirá qué es cada uno:

  • Show the File Template Library: Mostrar la librería de plantillas de ficheros, lugar donde tenemos los diferentes tipos de ficheros que podemos crear. Si pulsamos uno y lo arrastramos a la estructura de archivos de la barra lateral izquierda (al navegador), nos pedirá un nombre y crearemos ese tipo de archivo sin tener que ir al menu File de Xcode.
  • Show the Code Snippet Library: Mostrar la librería de ayuda de código, donde tenemos un listado de posibles estructuras vacías de diferente tipo: clases, structs, subclases, switch… son plantillas que pulsando sobre ellas y dejando el ratón sobre estas, nos mostrarán ayudas genéricas de estructura. Si lo arrastramos a un editor de código, lo copiará y pegará.
  • Show the Object Library: Mostrar la librería de objetos. Aquí es donde tenemos todos los elementos necesarios para construir nuestra interfaz. Es la que se abre por defecto y la que nos interesa para esta parte.
  • Show the Media Library: Mostrar la librería de medios. Todos los ficheros que tengamos de medios en el proyecto, aparecerán aquí.

Es importante que veamos la caja inferior: es un campo de búsqueda muy útil para buscar elementos concretos.

Estamos en el storyboard y en el centro vemos la vista de controlador (o view controller) y a la izquierda una barra con la escena View Controller Scene. Vamos a la librería de objetos y buscamos “text”. Aparecen dos resultados: Text Field y Text View. El primero es un campo de texto de una sola línea y el segundo un campo de texto multilínea que admite retorno de carro.

Cogemos el Text Field y lo arrastramos al cuadro de nuestra interfaz. Vemos que unas guías automáticas nos ayudan en la tarea de colocar, por ejemplo, en el centro.

Ahora buscamos “label” y lo colocamos en el centro, debajo de nuestro campo. Buscamos “button” y lo arrastramos debajo del label. En este caso, el primero que es solo Button. Listo. Ya hemos creado nuestra primera interfaz.

Vamos a darle funcionalidad. Para ello hemos de conectar las partes de la interfaz con el código. Arriba a la derecha tenemos tres botones esenciales para ello. Tenemos 2 grupos de tres botones y hemos de fijarnos en el de más a la izquierda ya que los de la derecha solo sirven para mostrar u ocultar los paneles o barra laterales que forman la interfaz de Xcode:

  • Show the Standard Editor, mostrar el editor estándar que es la opción normal donde tenemos en el centro aquello que hayamos seleccionado en la navegación de la barra lateral izquierda. Es la que tenemos activada en este momento de la lección.
  • Show the Assistant Editor, mostrar el editor asistente. Se nos divide la pantalla central en dos, donde vemos en un lado la interfaz y en el otro el código. Esta es la que nos sirve para crear los outlets o las acciones que conectan interfaz y código.
  • Show the Version Editor, mostrar el editor de versiones, que permite comparar nuestra actual versión con cualquiera del gestor de versiones, además que nos marca las diferencias.

Vamos a pulsar en el botón de los dos círculos que tienen una zona en intersección. Vemos que la pantalla se divide en dos. A la izquierda nuestra interfaz (dependiendo de nuestra resolución de pantalla, deberemos mover un poco el scroll para ir hacia nuestros elementos) y a la derecha el código del archivo viewController.

Lo que queremos hacer es escribir un nombre en el campo de texto y que al pulsar el botón la etiqueta nos diga: “Ola k ase” con el nombre de la persona (la versión 2.0 del “Hola Mundo”). Y para ello tenemos que hacer dos cosas: la primera, tener una función que salte cuando pulsemos el botón y la segunda, poder acceder a la etiqueta y al campo para conocer o modificar sus valores.

Curso de Apps I, ActionVamos a pulsar en el botón marcándolo. Pulsamos la tecla CTRL y sin soltarla, pulsamos el botón y lo arrastramos al código, en una zona que quede debajo del didReceiveMemoryWarning.

Al soltarlo se nos despliega un cuadro de diálogo emergente. Le decimos que la connection es una action (ya que es la acción de pulsar el botón). Damos un nombre a la función, para el tipo escogemos UIButton que es el que usa el sistema, evento Touch Up Inside (tocar dentro del mismo y levantar el dedo dentro de este, momento en que se lanza el evento. Si el usuario mueve el dedo fuera del botón sin levantar, se considera que ha anulado la pulsación) y en los argumentos dejamos solo Sender que significa que la función recibirá como parámetro de entrada el propio botón. Pulsamos en Connect.

A la izquierda vemos un círculo que si ponemos el ratón encima nos marcará el botón, indicando la conexión entre la interfaz y el código.

Ahora vamos a conectar la etiqueta. Pulsamos en la misma para seleccionarla. Pulsamos CTRL, dejamos pulsado, pinchamos la etiqueta y la arrastramos justo encima de la declaración de viewDidLoad.

Con esto estamos creando un outlet o salida desde la interfaz hacia el código. Damos un nombre a la variable que vamos a crear para el código (etiqueta, por ser originales), dejamos el tipo del sistema UILabel y en storage dejamos weak que indica que la referencia va a ser leve de forma que la variable solo existirá en el contexto de la propia función mientras se ejecute.

Curso Apps I, OutletHacemos lo mismo con el campo de texto (porque si no, no tendremos forma de conocer su contenido) y de esta forma tendremos dos variables creadas que nos permitirán acceder a todas las propiedades de ambos objetos:

Y ahora damos la funcionalidad que queremos:

Pulsamos mostrar el editor estándar, con lo que se cerrará el código y hacemos un poco más grande el label porque si no, no se verá toda la información. En el inspector de atributos, que tendremos abierto al pulsar el elemento, debajo de Text Plain eliminamos Label para que no se vea con un valor previo y elegimos alineación central (alignment).

Vamos ahora a pulsar el botón de Play arriba a la izquierda, para ejecutar nuestra primera y arcaica app. Escribimos algo en el campo, pulsamos el botón y ¡pum!… etiqueta actualizada. Más sencillo que el mecanismo de un botijo.

Ahora podéis probar a que ponga la primera letra en mayúscula, que no haga nada si dejamos el campo vacío, que ponga otros mensajes… ** jugad, probad, experimentad… **

Hasta aquí la primera lección del curso de apps, donde hemos visto los elementos básicos y cómo construir nuestra primera y sencilla app de vista simple.

En la próxima lección hablaremos sobre cómo usar el auto layout (la propiedad de auto-configurar la pantalla automáticamente) para que nuestros elementos queden bien cuadrados y bonitos en pantalla (no como ahora). Hasta entonces, Good Apple Coding.

Acerca de Julio César Fernández

Analista, consultor y periodista tecnológico, desarrollador, empresario, productor audiovisual, actor de doblaje e ingeniero de vídeo y audio.

Otras recomendaciones

Banner Programación Orientada a Protocolos

Programación Orientada a Protocolos

Revisamos con un caso práctico la programación orientada a protocolos, un nuevo mecanismo de abstracción para Swift que permite una gran versatilidad. Vemos un caso donde creamos una simple estructura orientada a objetos para luego ver cómo resolver los problemas que nos plantea con la nueva orientación a protocolos, constituida de protocolos, structs y extensiones.

  • Nico

    Muchas gracias!

  • Pingback: Integrando autenticación con TouchID en iOS 8 | Apple Coding()

  • Pingback: Swift Lección 5, Tuplas | Apple Coding()

  • Super interesante. Gracias por iluminarnos el camino.

  • Roberto

    Muchas gracias. Felicidades por un trabajo bien hecho y de alta calidad

  • Muchísimas gracias. Sencillo y amigable como se corresponde con cualquier inicio. cuando la segunda parte?

    • Julio César Fernández

      Muchas gracias Tomás. La segunda parte está terminando de prepararse. En breve vamos por el auto-layout 🙂

  • Eliseo

    hola Julio Cesar, muchas gracias por tu explicación al crear una app con Xcode , muy fácil de seguir y de mucha ayuda.
    Una pregunta porque al lanzar la app me sale esto? Hola Optional(Eliseo), como estas?
    Como hago para quitar lo de opcional?gracias