fbpx
 

Crea una App de Gestión de Tareas

Crea una App de Gestión de Tareas

1. Introducción

Una App de Gestión de Tareas. El tutorial de esta semana lo vamos a dedicar a desarrollar una aplicación desde cero en la que podamos ir añadiendo tareas a una lista.

Creo que es una buena opción para crear una aplicación sencilla donde veremos algunos aspectos básicos de la programación iOS.

Si estás comenzando a desarrollar aplicaciones iOS, este tutorial te servirá para crear una aplicación con funcionalidad completa de forma fácil y comprendiendo todos los pasos que vamos dando.

Veremos de forma rápida la teoría que necesitas conocer y después, vas a poder desarrollar una app de Gestión de Tareas paso a paso.

De esta forma cuando tengas que desarrollar algún proyecto por tu cuenta, tendrás una base sobre la que poder apoyarte.

2. ¿Qué vamos a ver en este Tutorial?

Estos son los puntos más importantes en los que nos centraremos:

  • ¿Qué es un IBAction?
  • ¿Qué es un IBOutlet?
  • ¿Como crear un UIAlertController mediante código?
  • ¿Cómo añadir de forma rápida un Navigation Controller a nuestra app?
  • ¿Cómo añadir un UIBarButtonItem a nuestra interfaz?

Ante de comenzar con todo esto me gustaría que vieras la app de gestión de tareas que vamos a desarrollar.

3. Echando un vistazo a nuestra App de Gestión de Tareas

Vamos a ver el aspecto que tendrá nuestra aplicación cuando hayamos terminado.

app de gestion de tareas mockup iphone

Constará de una table view donde se irán listando las tareas que vayamos añadiendo. Para añadir estas tareas, habrá que pulsar el botón + situado en la esquina superior derecha. Al pulsar se mostrará un UIAlertController que nos permitirá darle un nombre a nuestra tarea y añadirla a la lista de tareas.

Se trata de una app de gestión de tareas muy sencilla pero que te servirá para comprender conceptos fundamentales en Desarrollo iOS.

Antes de comenzar con nuestra app, veamos de forma muy breve algo de teoría.

4. ¿Qué es un IBAction?

Apple define un IBAction como un calificador de tipo utilizado por Interface Builder para asociar un método de nuestro código a un evento de un elemento de nuestra interfaz.

Es decir, un IBAction nos permite enlazar un evento de un elemento de nuestra interfaz con un método de nuestro código.

Un ejemplo muy sencillo. Si tienes un UIButton en la interfaz de tu aplicación y lo que quieres es especificar que tu aplicación debe hacer algo concreto cuando el usuario pulse ese botón, puedes utilizar un IBAction para realizar esta conexión.

Utilizando un IBAction harías que cuando el usuario pulse el botón se ejecute por ejemplo el método buttonTapped().

5. ¿Qué es un IBOutlet?

Por otro lado, un IBOutlet, según Apple, es la propiedad de un objeto que referencia a otro objeto. Se basa en la misma filosofía que el IBAction. Nos permite conectar nuestra interfaz con nuestro código, pero con una diferencia. No sirve para enlazarlo con un método concreto como el IBAction, sino para referenciar un elemento de la interfaz.

Veámoslo con un ejemplo, que será más sencillo. Imagina que diseñas una interfaz para tu app que consta de un botón y de una table view. Lo que queremos es que cuando el usuario pulse el botón, nuestra table view muestre un listado de usuarios. Utilizaremos un IBAction para enlazar el evento de pulsado del botón con nuestro método showUsers().

Pero, ¿cómo podemos hacer referencia en nuestro código a la table view que tenemos en nuestra interfaz. Ahí es donde entra el IBOutlet. El IBOutlet nos permite enlazar una variable tableView que crearemos en nuestro código con la table view que tenemos en nuestra interfaz. De esta manera, cada vez que queramos trabajar con la table view de nuestra interfaz, lo haremos a través de nuestra variable tableView.

Si estos dos conceptos no te han quedado del todo claros, no te preocupes, en el desarrollo de nuestra aplicación vas a ver un ejemplo concreto de como utilizar tanto un IBOutlet como un IBAction. Simplemente es suficiente con que te quedes que sirven para enlazar nuestra interfaz con nuestro código.

[caja-roja]Los IBOutlets y los IBActions te permiten enlazar tu interfaz con el código de tu app[/caja-roja]

Ahora si, ¡Comenzamos!

6. Creando la Interfaz de nuestra App

Comencemos a desarrollar nuestra aplicación. Abre Xcode y haz clic en Create a new Xcode project.

 

app de gestion de tareas creating proyect

 

Elige el template Single View Application

app de gestion de tareas single view app

Especifica el nombre que quieras darle al proyecto. En mi caso lo he llamado TaskManager. El resto de opciones puedes dejarlas como ves en la imagen:

app de gestion de tareas project properties

 

La opción que es obligatorio que esté marcada es la de Use Core Data. Verás al final del tutorial el motivo por el que hemos dejado marcada esta opción.

Pulsa en Next y guarda el proyecto en el directorio que prefieras.

Perfecto, has creado correctamente el proyecto con el que vamos a trabajar.

Como hemos visto al comienzo del tutorial, la idea de nuestra app de gestión de tareas es muy sencilla. Simplemente tendremos una table view que mostrará una serie de tareas. Estas tareas se irán añadiendo a la aplicación a través de un botón que tendremos en la parte superior derecha. Para añadir las tareas utilizaremos un UIAlertController que nos permitirá introducir el nombre de cada una de ellas.

DISEÑANDO NUESTRA INTERFAZ

Lo primero que vamos a hacer es diseñar nuestra interfaz. Será extremadamente sencilla, constará de estos elementos:

  • Navigation Controller donde mostraremos el título de la App y el botón de Añadir
  • Una Table View donde mostraremos el listado de tareas
  • Un Alert Controller que nos permitirá introducir nuevas tareas a la lista

Comencemos entonces por el Navigation Controller. Haz clic en Main.storyboard y añade el View Controller inicial a un Navigation Controller. Puedes hacerlo de forma fácil seleccionando el View Controller y pulsando en el menú Editor>Embed In>Navigation Controller.

app de gestion de tareas adding nav controller

 

El siguiente paso será añadir la tabla a nuestra interfaz. Para ello, desde la librería de objetos arrastra una table view dentro de nuestro View Controller.

Al añadirla, verás que no ocupa toda nuestra View, sino que tiene unas dimensiones demasiado reducidas.

app de gestion de tareas adding table view

 

Redimensiona la tabla hasta que ocupe toda la View de nuestra interfaz. Tu table view debe quedar así:

app de gestion de tareas resizing table view

 

AÑADIENDO LAS CONSTRAINTS

Si has seguido nuestros tutoriales de semanas anteriores sobre Auto Layout, sabrás cual es el siguiente paso que debes dar. Hay que añadir las constraints a nuestra tabla. Las constraints permiten que la tabla ocupe toda la pantalla sea cual sea el tamaño del dispositivo donde ejecutemos nuestra app.

Si no has trabajado antes con constraints y te interesa este tema puedes acceder a nuestra serie de tutoriales sobre Auto Layout & Constraints desde aquí.

Para añadir las constraints, selecciona la table view y pulsa en el botón situado en la parte inferior, que nos permite añadir las constraints:

app de gestion de tareas adding constraints button

Como queremos que nuestra table view ocupe toda la pantalla, haremos que los 4 márgenes (Superior, Inferior, Derecho, Izquierdo) sean 0. Para ello haz clic en las 4 lineas rojas que aparecen en la parte superior y pulsa en el botón Add 4 constraints.

app de gestion de tareas adding constraints

 

Una vez que hemos añadido nuestro Navigation Controller y nuestra Table View, nos quedaría definir el título de la App y el botón para añadir elementos a nuestra lista.

Añadimos el bar button a nuestro view controller y especificamos en su propiedad System Item el valor Add. Puedes ver el proceso en el siguiente video:

app de gestion de tareas adding add button

 

Para añadir el título a nuestra app de gestión de tareas, simplemente tienes que seleccionar el navigation item de nuestro view controller y en su propiedad Title escribir Lista de Tareas.

app de gestion de tareas naming title

 

Con este último paso habríamos terminado de crear la interfaz de nuestra aplicación. Sin embargo, una interfaz no está realmente terminada hasta que no añades su funcionalidad. Esto lo veremos en el siguiente punto.

7. Añadiendo funcionalidad a nuestra App

Nuestro primero paso en este punto es muy importante y cuando estás comenzando con el Desarrollo iOS es probable que se te olvide bastantes veces llevarlo a cabo. Esto provoca errores que al principio pueden ser difíciles de identificar.

Tenemos que especificar el dataSource y el delegate de nuestra table view.

Si no tienes mucha experiencia trabajando con table views y no entiendes exactamente a que nos referimos con dataSource y Delegate, te aconsejo que eches un vistazo a este Tutorial de Introducción a TableViews.

Para especificar esto, selecciona la table view y dejando la tecla Ctrl pulsada, arrastra el puntero hasta el view controller y selecciona dataSource. Repite el proceso una vez más y selecciona delegate. Puedes verlo más claramente en el siguiente video:

app de gestion de tareas adding delegate and dataSource

 

[caja-gris]Realmente, para esta aplicación no es necesario especificar el delegate de nuestra table view, sin embargo es importante que te acostumbres a añadirlo en todas tus aplicaciones donde trabajes con table views[/caja-gris]

PASANDO AL CÓDIGO DE NUESTRA APLICACIÓN

Una vez que hemos realizado este paso ya podemos centrarnos en el código de nuestra app.

Lo primero que necesitaremos es un array donde almacenaremos nuestras tareas. Añádelo a ViewController.swift, justo después de la linea import UIKit:

Después, en el método viewDidLoad() tendremos que añadir la siguiente linea:

Esta linea lo que hace es registrar un identificador para las celdas de nuestra tabla. Este identificador nos servirá en el método cellForRowAt para inicializar nuestra celda.

Para poder dotar de funcionalidad a nuestra table view y a nuestro botón + tendremos que añadir respectivamente un IBOutlet y un IBAction.

Además tenemos que hacer que nuestra clase ViewController conforme el protocolo UITableViewDataSource. El código para esto, junto con el IBOutlet y el IBAction lo tienes a continuación:

Es probable que al añadir el protocolo UITableViewDataSource, recibas el siguiente error en Xcode:

app de gestion de tareas protocol error

 

Esto se debe a que hemos añadido el protocolo pero no hemos añadido los métodos obligatorios que debe implementar nuestro ViewController si queremos que se ajuste a dicho protocolo.

Por tanto, nuestro siguiente paso es añadir los métodos numberOfRowsInSection() y cellForRowAt() a nuestro ViewController.swift. Puedes añadirlos justo después del método viewDidLoad():

Si ves que no entiendes el código de estos dos métodos, te recomiendo que eches un vistazo a nuestro Tutorial de introducción sobre Table Views.

IMPLEMENTANDO EL MÉTODO AÑADIR TAREA

Para terminar la funcionalidad de nuestra interfaz, solo nos quedaría implementar el método addTask() asociado al botón +.

Este método tendrá que mostrar un UIAlertController con un UITextField que nos permitirá escribir el nombre de la nueva tarea y añadirla a nuestro array tasks.

Este es el código completo del método addTask():

Lo que hacemos en este método es crear un UIAlertController con el título “Nueva Tarea” y que contendrá un UITextField y dos UIButtons. A través de estos UIButtons tendrás dos opciones: Guardar o Cancelar.

La opción Cancelar lo único que hace es ocultar el alert controller.

La opción Guardar, coge el texto que hayamos escrito en el UITextField y lo añade a nuestro array tasks para después llamar al método reloadData(). De esta forma, se actualiza el contenido de la table view y la tarea que acabamos de crear aparece en pantalla.

Como último paso antes de probar nuestra aplicación, tendremos que enlazar el IBOutlet y el IBAction a la tableView y al botón + respectivamente.

ENLAZANDO EL IBOUTLET

Accede a Main.storyboard. Vamos a enlazar el IBOutlet con nuestra table view. Selecciona el view controller y dejando pulsada la tecla Ctrl, arrastra hasta la table view, después selecciona el Outlet tableView. Puedes ver el proceso en el siguiente video:

app de gestion de tareas linking iboutlet

 

ENLAZANDO EL IBACTION

Para enlazar el IBAction, el proceso es el mismo, solo que hay que realizar el enlace desde el botón + hasta el view controller y después seleccionar el nombre del método addTaskWithSender: (Recuerda dejar pulsado el botón Ctrl). Aquí tienes en video el proceso:

app de gestion de tareas linking ibaction

 

¡Perfecto! Hemos acabado de desarrollar nuestra aplicación.

8. Probando nuestra App de Gestión de Tareas

Una vez que hemos terminado el desarrollo de nuestra aplicación, lo que haremos será realizar pruebas de ejecución.

Lanza la aplicación (Puedes utilizar el atajo de teclado cmd+R) para ejecutarla rápidamente.

Como puedes ver, nuestra table view está vacía, ya que todavía no hemos creado ninguna tarea. Pulsa en el botón + y añade la primera tarea:

  • Comprar pan

Pulsa en el botón Guardar y al momento verás como aparece correctamente en nuestra table view. Prueba a añadir más tareas:

  • Echar un vistazo al último tutorial de EfectoApple
  • Ver último capítulo de Black Mirror
  • Comprar libro Clean Code

Verás que se van añadiendo a nuestra table view perfectamente. Funciona tal y como esperábamos. Sin embargo, me gustaría que hicieras una prueba final.

9. Prueba Final

Este tutorial, además de servirnos para desarrollar una app de gestión de tareas muy básica va a servirnos para comprender perfectamente el concepto de Persistencia.

Ejecuta la app y crea una serie de tareas. Comprueba que se muestran correctamente en nuestra table view. Ahora lo que vamos a hacer es volver a ejecutar la aplicación. Es decir, cierra el simulador y vuelve a lanzar nuestra aplicación. Como puedes ver, todas las tareas que habías creado han desparecido.

Esto se debe a que no hemos implementado ningún sistema de persistencia en nuestra aplicación. Todas las tareas que hemos ido creando se han ido almacenando en memoria, pero no las hemos guardado en disco. Por tanto, al finalizar la ejecución de una aplicación, todo lo que está almacenado en memoria desaparece, perdiendo por tanto listado de tareas.

Imagina que añadimos algunas características más a nuestra aplicación, como la posibilidad de eliminar tareas y algunas otras funcionalidad más que hicieran que nuestra app de gestión de tareas estuviera completa. Después de todo esto, subimos nuestra aplicación al App Store y los usuarios comienzan a descargarla. Un usuario la utiliza por primera vez y añade algunas tareas en su lista. Si ese usuario “mata” la aplicación, accediendo a la multitarea y cerrando el proceso de nuestra app, algo que es bastante normal, la próxima vez que ejecute la app, su lista aparecerá vacía y habrá perdido todas sus tareas.

Para solucionar esto deberíamos implementar algún sistema de persistencia en nuestra aplicación. Esto es algo que veremos la semana que viene en un nuevo Tutorial de Introducción a Core Data.

10. Resumen Final y Descarga del Proyecto

En este tutorial has podido conocer conceptos básicos como IBOutlets e IBActions. Has visto como trabajar con un UIAlertController y como añadir de forma rápida un UINavigationController que contenga un UIBarButtonItem a tu aplicación. Todo esto te ha permitido desarrollar de forma sencilla una app de gestión de tareas.

Ten en cuenta que el lunes de la semana que viene continuaremos viendo como podemos añadir Persistencia a nuestra aplicación, a través de Core Data, ¡no te lo pierdas!

Puedes descargar la aplicación terminada desde aquí.

11. Has terminado el Tutorial

Espero que hayas disfrutado este tutorial y sobre todo te sirva para ver que con unos conocimientos básicos de Desarrollo iOS puedes crear tus propias aplicaciones.

Como siempre, aquí tienes el video-chorra de esta semana:

[ejercicio titulo = “Frustración Máxima” num=”1″]

[/ejercicio]

12. ¿Donde ir ahora?

Puedes acceder a más tutoriales disponibles en EfectoApple aquí.

Si este artículo te ha parecido útil, me harías un gran favor compartiéndolo en tus redes sociales.

Como siempre, para cualquier duda, tienes los comentarios a tu disposición.

Recuerda, cada lunes un nuevo Tutorial sobre Desarrollo iOS.

Esto ha sido todo, gracias por leer EfectoApple.

Etiquetas:
2 Comentarios

Escribe un comentario

10AppsIpad

Descarga las 10 Aplicaciones

Introduce tu Nombre y tu Email para recibir las Apps en tu Correo

Acabo de enviarte un email. Sigue las instrucciones para descargar las Aplicaciones. Puede que tengas que revisar tu buzón de correo no deseado. Gracias.