Introducción a Swift : To do list App

Buenas tardes a todos, ahora que me encuentro con un poco de tiempo libre me dedico el tiempo para hacer unos tutoriales de iOS y el nuevo lenguaje de programación: Swift.

La verdad, si ya has leído de Swift sabrás el gran cambio que se ha visto desde Objective-C. Objective C solo es de aprender a quererlo, y ya no habrá problemas. Pero la verdad con Swift es una gran maravilla, porque vamos, todos programamos en más de un lenguaje, y que puedas programar en iOS o OS X con un lenguaje que no está peleado con la sintaxis de los demás lenguajes es una maravilla. Soy C# developer y como todos ocupo javascript, esto para mi es un avance muy “rico” :).

Lo que vamos a hacer en esta entrada, es una aplicación simple donde existan tareas estáticas y cargarlas en un listado, muy simple para comenzar.

Para comenzar rápidamente, vamos a crear un nuevo proyecto en Xcode 6 no necesitas tener OS X Yosemite, pero si para descargarlo necesitas ser iOS developer, pero puedes pedírselo a alguien que ya lo haya bajado.

Nuevo proyecto en Xcode 6 beta

Damos en “Create a new Xcode project” y seleccionamos “Single View Application”:

Single View Application

Esto no es nuevo para ti si ya has desarrollado para iOS, pero será una aplicación prácticamente vacía, pero utilizando Swift como lenguaje. En esta ocasión será solo para iPhone.

Swift

Si nos vamos al Storyboard que se nos ha creado por default, veremos algo medio extraño:
Screen Shot 2014-08-03 at 2.40.59 PM

Vemos que la pantalla que se nos creó en el Storyboard es algo ancha y no hace “match” al tamaño de dispositivos que nosotros ya conocemos de iOS. Esta opción no la he explorado del todo, pero es una opción de “Auto Layout” que es para que se haga la interfaz gráfica una sola vez y pueda ser utilizada sin problemas en todos los dispositivos de la manzana. Pero a nosotros no nos interesa eso por ahora, solo lo queremos para iPhone.

Seleccionamos la vista que apareció por Default y en las opciones de la derecha damos click en la hoja en blanco “File Inspector” y nos aparecerá la opción que dice si queremos usar “Auto Layout”, la desmarcamos y nos aparecerán advertencias, le decimos que sí, que nos vale su nueva tecnología! (ok, es broma, está bien padre 🙂 ).

Screen Shot 2014-08-03 at 2.41.10 PM

Screen Shot 2014-08-03 at 2.41.18 PM

Y ahora sí, tendremos nuestra interfaz normal para un iPhone…

Screen Shot 2014-08-03 at 2.41.31 PM

En esta vista, vamos agregar un UITableView desde la lista de controles, y lo arrastramos a nuestra vista. También agregamos un Prototype Cell, esto ya debes de saberlo si has trabajado con iOS, y sino, lo siento.

Screen Shot 2014-08-03 at 2.47.26 PM

Al Prototype Cell le vamos a poner un identificador desde el panel de propiedades al seleccionarlo primero:

Screen Shot 2014-08-03 at 2.47.34 PM

Un nombre super informativo… “My Cell” !

Una vez teniendo nuestro UITableView y un Prototype Cell con un identificador, vamos a enlazar esos elementos con nuestro controlador, porque la tabla UITableView tiene “Protocolos” que deben de ser implementados para que desde nuestro controlador podamos llenarlo de datos o poder interactuar con el, esto seguro ya lo sabes…

Seleccionamos la tabla y dejando presionado el click derecho (soy usuario PC, tu sabes a lo que me refiero) arrastramos la flecha hacia el circulo amarillo (el controlador) y aparecerán estas dos opciones:

Screen Shot 2014-08-03 at 2.48.17 PM

Screen Shot 2014-08-03 at 2.47.53 PM

 

Esto lo hacemos con dataSource y con delegate. Datasource es para que nuestro TableView le pregunte al controlador por sus datos, y el delegate es para programar la lógica de interacción con la tabla (si se selecciona un elemento o se quiere eliminar uno, etc)

Una vez teniendo esto enlazado, vamos a crear la liga de nuestro objeto tal cual de nuestro Table View en nuestro controlador, lo hacemos de forma similar, seleccionando el Table View y lo arrastramos a nuestro controlador, para eso, yo uso la vista divida de Xcode:

Screen Shot 2014-08-03 at 2.49.02 PM

Screen Shot 2014-08-03 at 2.49.09 PM

En este caso, lo nombré tableView.

Ahora lo que vamos a hacer es crear nuestra clase “Task” o tareas o “to do”, porque se supone que queremos hacer una App donde se muestren tareas pendientes. Por ahora, como les comenté al inicio, será solo estático.

Creamos un nuevo archivo:

Screen Shot 2014-08-03 at 2.42.02 PM

Será una clase cocoa (mmmm como el cacao):

Screen Shot 2014-08-03 at 2.42.08 PM

Se llamará TaskModel, y será una clase que tendrá solo DOS propiedades: una la tarea y otra una mini descripción de la tarea que tenemos pendiente por hacer.

Screen Shot 2014-08-03 at 2.42.18 PM

Screen Shot 2014-08-03 at 2.46.51 PM

Aquí lo que estamos viendo es dos cosas, la declaración de una clase TaskModel y la declaración de una estructura TaskStructure: Para este escenario aplica cualquiera de los dos, porque es una representación simple de una tarea (solo porque tiene dos propiedades). Esa es la sintaxis para crear clases y estructuras en Swift y la que vamos a usar es la clase, la estructura solo era para estar al tanto.

En Swift, puedes ser explícito en el tipo de dato o no, en este caso yo sí estoy siendo explícito diciendo en la declaración el tipo de dato que será mi variable. En este caso, dos strings.

init es mi constructor, pude no haberlo puesto, porque a mis variables task y desc las estoy inicializando como vacías, en Swift siempre deben de estar inicializadas, si yo quito el constructor init, no pasa nada, pero si quito la inicialización de mis variables (ósea la igualdad a cadena vacía) y quito el constructor, existirá un error de compilación porque esas variables deben de tener un valor (vacío es un valor). A menos de que yo le indique a Swift que son variables “nulleables” como en C#, podré lograr lo que les comento, se hace con un signo de admiración (!) al final del tipo de dato (ejem: var task: String!)

Una vez teniendo nuestra super clase TaskModel, ahora nos vamos al controlador de nuestra vista ViewController.swift y agregamos lo siguiente:

Screen Shot 2014-08-03 at 2.54.11 PM

Hemos agregado una variable Global, pero es literalmente GLOBAL. Esa variable (taskCollection) será accesible por cualquier clase Swift hecha en nuestro proyecto. Por ahora así ha sido para mi, en teoría no sé como se llama esto. Pero la verdad que esto es muy util.

En el evento viewDidLoad estamos creando un nuevo objeto de nuestra clase TaskModel y le estamos dando valor a sus dos propiedades desde su constructor. Y de una vez, lo estamos agregando a nuestro arreglo ultra hiper global taskCollection.

Pues ya tenemos amenos un dato, y ya queremos mostrarlo en nuestro TableView, pues haremos lo siguiente:

Screen Shot 2014-08-03 at 3.16.09 PM

Aquí ya estamos implementando el protocolo UITableViewDataSource que como se los expliqué anteriormente, es para ver de que datos vamos a llenar nuestro UITableView.

Esto es EXACTAMENTE igual a que como se haría con objective c, esto no ha cambiado, solo ha cambiado el lenguaje y una que otras cosas en la vista (Auto layout) pero esto es igual que antes.

Usamos el método numberOfRowsInSection para determinar cuantos rows habrá por sección y como no le estamos diciendo cuantas secciones hay, solo habrá una (Realmente es necesario esto?? hate this about iOS), Y el otro método es para crear la celda que estará posicionado en ese Row.

Para mas referencia, favor de revisar la documentación sobre UITableView

Si corremos nuestra aplicación, ya se verá así:

Screen Shot 2014-08-03 at 3.16.13 PM

Pero la verdad no me gusta como se ve, entonces lo normal es tener un Navigation Bar. Se lo agregamos fácil de esta forma:

Nos vamos al StoryBoard, seleccionamos nuestra vista y hacemos lo que muestra la imagen

Screen Shot 2014-08-03 at 3.16.57 PM

Y automaticamente nos agregará un Navigation Controller, y ya tendrá su NavigationBar y le podemos cambiar el título:

Screen Shot 2014-08-03 at 3.17.18 PM

Y el resultado será el siguiente:

Screen Shot 2014-08-03 at 3.17.55 PM

Esto por ahora será todo, más tarde estaré trabajando en una serie de totorales que tienen que ver con está misma aplicación. Tengo pensado utilizar back-end (con ruby y sinatra) y consumir los webservices para realmente si hacer una aplicación que sea un “To do List”.

Espero les sea de ayuda y me comentan cualquier cosa.

Saludos y Code4Fun! yei!! 😀

PD. Aquí les dejo el repositorio que iré actualizando

Anuncios

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s