Você está na página 1de 114

Desarrollo de

aplicaciones
mviles II - iOS

DESARROLLO DE APLICACIONES MOVILES iOS

CARRERA DE COMPUTACIN E INFORMTICA

CIBERTEC

DESARROLLO DE APLICACIONES MOVILES II - iOS

ndice
Presentacin
Red de contenidos

5
7

Unidad de Aprendizaje 1

INTRODUCCIN A iOS Y SWIFT


1.1 Tema 1 : Conceptos bsicos de iOS
1.1.1 : Qu es el iOS?
1.1.2 : Flujo de vida de una aplicacin iOS
1.1.3 : Arquitectura de una aplicacin iOS
1.1.4 : Fundamentos de Swift
1.1.5 : Creacin y administracin de cuentas en iTunes Connect y
Member Center
1.2 Tema 2
1.2.1
1.2.2
1.2.3
1.2.4
1.2.5

:
:
:
:
:
:

Creacin y manejo del WorkSpace


Caractersticas y funciones del XCode
Caractersticas y funciones del PlayGround
Instalacin y manejo del CocoaPods
Creacin de un WorkSpace
Descarga e instalacin de libreras Pods

9
11
11
12
15
15
16

32
32
35
37
39
41

Unidad de Aprendizaje 2

DESARROLLO DE PANTALLAS
2.1 Tema 3 : Navegacin bsica
2.1.1 : Manejo de StoryBoards
2.1.2 : Creacin de flujo de pantallas por ViewControllers
2.1.3 : Ciclo de vida del UIViewController (ViewDidLoad,
ViewDidAppear, ViewWillAppear, etc.)
2.1.4 : Manejo de pantallas por UINavigationController
2.1.5 : Manejo de pantallas por UITabBarController

45
47
47
50
53
57
61

2.2 Tema 4 : Manejo de elementos en pantalla


2.2.1 : Componentes bsicos de interfaz de usuario (UILabel,
UITextField, UIImage, UIButton, etc.)
2.2.2 : Configuracin de UIScrollViewController
2.2.3 : Configuracin de tablas con celdas dinmicas
(UITableViewController)
2.2.4 : Configuracin de colecciones con tems dinmicos
(UICollectionViewController)
2.2.5 : Configuracin de paginadores (UIPageViewController)
2.2.6 : Creacin y manejo de CustomViews

66
66

2.3 Tema 5
2.3.1
2.3.2
2.3.3
2.3.4

90
90
90
92
93

:
:
:
:
:

Constrains
Fundamentos sobre Constrains
Creacin de Constrains por StoryBoard
Creacin de Constrains por cdigo
Manejo de Constrains en tiempo de ejecucin

68
70
75
79
86

Unidad de Aprendizaje 3

ACCESO A DATOS
3.1 Tema 6 : Implementacin de un API y Servicios Rest
3.1.1 : Creacin de un Rest Api Manager
3.1.2 : Consumo de servicios Rest

CIBERTEC

97
99
99
101

CARRERA DE COMPUTACIN E INFORMTICA

DESARROLLO DE APLICACIONES MOVILES iOS

3.1.3 : Envo y recepcin de Datos JSON


3.2 Tema 7
3.2.1
3.2.2
3.2.3

:
:
:
:

Almacenamiento de Datos
Implementacin de UserDefaults
Implementacin de Base de datos en Core Data
Implementacin del KeyChain para datos protegidos

CARRERA DE COMPUTACIN E INFORMTICA

101
105
105
105
112

CIBERTEC

DESARROLLO DE APLICACIONES MOVILES II - iOS

Presentacin
En la actualidad, el uso de los dispositivos mviles se ha vuelto una tendencia entre
las personas. Estos forman parte de las actividades rutinarias y de empleabilidad. La
tecnologa ha avanzado al nivel de crear una dependencia, tanto laboral como social
por parte de las personas y sus comunidades.
En el pasado, la globalizacin de la informacin permiti a muchas personas tener
acceso a la informacin desde todas partes del mundo, siempre que tuviesen un punto
de acceso al internet. Ahora, en la actualidad, los puntos de acceso al internet estn
al alcance de nuestras manos, los dispositivos mviles poseen la gran capacidad de
mantenernos conectados a la informacin global en todo momento y en todo lugar.
Las aplicaciones mviles permiten a los usuarios dar una interfaz grfica y de mayor
comodidad a esta informacin. Las empresas buscan crear aplicaciones que integren
las actividades diarias de las personas, que ofrezcan soluciones a sus necesidades y
que posean una experiencia de usuario distintiva de las dems.
Apple es una empresa que dedic gran parte de su tiempo en desarrollar un
dispositivo que permita al usuario no solo poseer una distincin econmica y social
respecto a otros usuario, tambin buscaba otorgarles una experiencia de usuario
cmoda y que les facilite la implementacin de aplicaciones en sus vidas cotidianas.
El desarrollo de aplicaciones mviles para usuario de iOS trata de buscar complacer al
usuario dndole la informacin que requiere de forma rpida y agradable.

CIBERTEC

CARRERA DE COMPUTACIN E INFORMTICA

DESARROLLO DE APLICACIONES MOVILES iOS

CARRERA DE COMPUTACIN E INFORMTICA

CIBERTEC

DESARROLLO DE APLICACIONES MOVILES II - iOS

Red de contenidos

Aplicaciones Mviles iOS

Unidad 1

Introduccin
a iOS y Swift

CIBERTEC

Unidad 2

Desarrollo de
Pantallas

Unidad 3

Acceso a
Datos

CARRERA DE COMPUTACIN E INFORMTICA

DESARROLLO DE APLICACIONES MOVILES iOS

CARRERA DE COMPUTACIN E INFORMTICA

CIBERTEC

DESARROLLO DE APLICACIONES MOVILES II - iOS

UNIDAD

1
INTRODUCCIN A iOS Y SWIFT
LOGRO DE LA UNIDAD DE APRENDIZAJE
Al trmino de la unidad, el alumno podr reconocer el flujo de vida de una
aplicacin mvil iOS, tambin podr crear ambientes de desarrollo en XCode y
dar uso a las herramientas CocoaPods y Playground.
TEMARIO
1.1 Tema 1
1.1.1
1.1.2
1.1.3
1.1.4
1.1.5

:
:
:
:
:
:

Conceptos bsicos de iOS


Qu es el iOS?
Flujo de vida de una aplicacin iOS
Arquitectura de una aplicacin iOS
Fundamentos de Swift
Creacin y administracin de cuentas en iTunes Connect y Member
Center

1.2 Tema 2
1.2.1
1.2.2
1.2.3
1.2.4
1.2.5

:
:
:
:
:
:

Creacin y manejo del WorkSpace


Caractersticas y funciones del XCode
Caractersticas y funciones del PlayGround
Instalacin y manejo del CocoaPods
Creacin de un WorkSpace
Descarga e instalacin de libreras Pods

ACTIVIDADES PROPUESTAS

Los alumnos crearn sus propias cuentas en iTunes Connect y en


Member Center.
Los alumnos crearn sus primeros prototipos en PlayGround.
Los alumnos descargarn e instalarn el CocoaPods.
Los alumnos crearn su primer proyecto en XCode y su primer
WorkSpace.
Los alumnos descargaran y actualizaran libreras Pods.

CIBERTEC

CARRERA DE COMPUTACIN E INFORMTICA

DESARROLLO DE APLICACIONES MOVILES iOS

CARRERA DE COMPUTACIN E INFORMTICA

10

CIBERTEC

DESARROLLO DE APLICACIONES MOVILES II - iOS

1.1

11

CONCEPTOS BSICOS DE iOS

1.1.1 Qu es el iOS?
iOS es un sistema operativo mvil creado por la multinacional Apple Inc.
Originalmente, desarrollado para el iPhone y, posteriormente, utilizado en dispositivos,
como el iPod touch y el iPad. Es exclusivo de la marca Apple y no permite la
instalacin en terceros.
<Wikipedia>

Figura 1: cono de la marca Apple Inc


Fuente.- Tomado de https://image.freepik.com/free-icon/apple-logo_318-40184.png

iOS se deriva de OS X (sistema operativo utilizado para las computadoras de Apple),


que a su vez est basado en Darwin BSD; por lo tanto, es un sistema operativo Tipo
Unix. iOS cuenta con cuatro capas de abstraccin: la capa del ncleo del sistema
operativo, la capa de Servicios Principales, la capa de Medios y la capa de Cocoa
Touch.
El sistema operativo cuenta con una serie de caractersticas que permiten su
identificacin inmediata, entre ellas estn:
Pantalla principal. Es en donde se ubican los conos de las aplicaciones y el Dock,
que est en la parte inferior de la pantalla, donde se pueden anclar aplicaciones de
uso frecuente. Esto aparece al desbloquear el dispositivo o presionar el botn de
inicio.
Carpetas. Posee un sistema simple de carpetas. Con solo arrastrar una aplicacin
sobre otra, se generar una carpeta para las aplicaciones, un ttulo por defecto y se
permitir su edicin.
Seguridad. Con el uso de la activacin por iCloud, que solicita los datos de acceso de
la cuenta del usuario original, el usuario puede bloquear y hasta inutilizar el equipo en
caso de prdida o ser vctima de robo. De igual manera, permite conocer la ubicacin
de va GPS y mostrar mensajes en pantalla. No existen mtodos comprobados para
saltarse la activacin del iCloud sin inutilizar el dispositivo. Es reconocido como el
mvil ms seguro del mercado.
Centro de notificaciones. El sistema de notificaciones fue rediseado y, ahora, las
notificaciones se colocan en un rea por la cual se puede acceder mediante un deslice

CIBERTEC

CARRERA DE COMPUTACIN E INFORMTICA

DESARROLLO DE APLICACIONES MOVILES iOS

12

desde la barra de estado hacia abajo. Al hacer toque en una notificacin, el sistema
abrir la aplicacin.
Multitarea Opcional.
Permite el uso de varias aplicaciones en simultneo.
Antiguamente, estaba reservado nicamente para aplicaciones por defecto del
sistema, debido al consumo de la batera. Esto nicamente estaba permitido para
dispositivos de tercera generacin en adelante.
Game Center. Es la aplicacin que integra todos los juegos mviles del dispositivo,
permitiendo la integracin entre usuarios y dando facilidades a los desarrolladores,
como tablas de posicin y tablas de puntuacin. Esto permite, tambin, el uso de un
servidor para juegos entre varios jugadores y el guardado de la informacin de los
usuarios en la nube para poder acceder a ellos desde cualquier dispositivo Apple.
Tecnologas no admitidas. Las versiones anteriores a iOS 8 no permiten el uso de la
Plataforma Java y Adobe Flash por su gran inseguridad, y su gran consumo de
batera, medida muy criticada. Posteriormente, se permiti el uso de Adobe Flash
para dispositivos iOS 8 y posteriores.

Figura 2: Llave termomagntica


Fuente.- Tomado de
https://developer.apple.com/library/ios/documentation/iPhone/Conceptual/iPhoneOSProgrammingGuide/Art/ios_pg_intr
o_2x.png

1.1.2 Flujo de vida de una aplicacin iOS


Las aplicaciones poseen una sofisticada relacin entre el cdigo personalizado del
desarrollador y el framework de iOS. El framework de iOS ofrece la infraestructura
base que todas las aplicaciones necesitan para funcionar y el desarrollador
personaliza la aplicacin por medio del cdigo para darle la visualizacin y la
experiencia de usuario que se desea obtener. Para realizar esta tarea de forma
efectiva, es de ayuda entender un poco sobre la infraestructura de iOS y cmo
funciona.
El iOS frameworks se basa en patrones de diseo, tales como Modelo-VistaControlador y delegados en su implementacin. Entender los patrones de diseo es
parte crucial para poder crear una aplicacin de forma exitosa.

CARRERA DE COMPUTACIN E INFORMTICA

CIBERTEC

DESARROLLO DE APLICACIONES MOVILES II - iOS

13

La funcin main

El punto de inicio, para todas las aplicaciones basadas en C, es la funcin


main y, en las aplicaciones de iOS, no es la diferencia. En lo que difieren de
las dems, es que en las aplicaciones de iOS no se escribe la funcin main, el
Xcode crea esta funcin como parte de las bases de tu proyecto. Esta funcin
nunca debe ser modificada salvo por algunas excepciones.
El main se encarga de dar control del UIKit Framework. La funcin
UIApplicationMain se encarga de este proceso creando objetos base para la
aplicacin; adems, carga la interfaz de usuario de un archivo StoryBoard
llamando al cdigo personalizado para realizar cualquier configuracin inicial y
poniendo el ciclo de la aplicacin en movimiento.

Estructura de una aplicacin

Al iniciar la aplicacin, la funcin UIApplicationMain crea varios objetos clave


y pone a andar la aplicacin. En el corazn de toda aplicacin iOS, est el
objeto UIApplication, cuyo trabajo es facilitar las interacciones entre el sistema
y otros objetos en la aplicacin.
El siguiente diagrama muestra los objetos ms comnmente encontrados en
Aplicaciones iOS. Lo principal que se puede notar es la arquitectura MVC.
Este patrn separa los datos de la aplicacin de la lgica del negocio y de la
presentacin visual de la informacin.

Figura 3: Objetos clave en una aplicacin iOS


Fuente.- Tomado de
https://developer.apple.com/library/ios/documentation/iPhone/Conceptual/iPhoneOSProgrammingGuide/Art/core_object
s_2x.png

Estados de ejecucin

Not running: La aplicacin no ha sido iniciada o ha estado funcionando, y fue


cerrada por el sistema.

CIBERTEC

CARRERA DE COMPUTACIN E INFORMTICA

DESARROLLO DE APLICACIONES MOVILES iOS

14

Inactive: La aplicacin se encuentra en primer plano, pero no est recibiendo


eventos. Las aplicaciones usualmente se encuentran en este estado cuando
transicionan entre estados.
Active: La aplicacin se encuentra en primer plano y se encuentra recibiendo
eventos. Este es el estado comn para las aplicaciones en primer plano.
Background: La aplicacin se encuentra en un plano posterior y se encuentra
ejecutando cdigo. Muchas aplicaciones se encuentran en este estado antes
de pasar al estado Suspended.
Suspended: La aplicacin se encuentra en un plano posterior y no se
encuentra ejecutando cdigo. El sistema mueve las aplicaciones a este estado
automticamente sin notificar sobre ello. Mientras una aplicacin se encuentre
en Suspended, la aplicacion se conserva en memoria, pero no ejecutar ningn
cdigo. Si llega a haber una condicin de poca memoria en el dispositivo, el
sistema ir purgando aplicaciones sin aviso alguno para realizar

Figura 4: Flujo de estados en una aplicacin iOS


Fuente.- Tomado de
https://developer.apple.com/library/ios/documentation/iPhone/Conceptual/iPhoneOSProgrammingGuide/Art/high_level_f
low_2x.png

La mayora de las transiciones entre estados estn acompaadas de un mtodo que


indica a la aplicacin que la transicin se ha realizado. Estos mtodos podemos
encontrarlos en el appDelegate.

CARRERA DE COMPUTACIN E INFORMTICA

CIBERTEC

DESARROLLO DE APLICACIONES MOVILES II - iOS

15

1.1.3 Arquitectura de una aplicacin iOS


Existen muchos patrones de arquitectura en el mundo; sin embargo, el que se utiliza
para programar en iOS es el MVC. Modelo Vista Controlador es el patrn que consiste
en dividir la aplicacin en 3 capas. Cada Clase que se escriba, botn que se ponga en
la interface builder, o trozo de cdigo que se tengas que escribir va a pertenecer a
alguna de estas 3 capas.
Vista. Es todo lo que se puede ver de la aplicacin y con la que se puede interactuar,
dentro de esta encontraos botones, labels, campos de texto, etc. En general, la
mayora de los objetos son subclases de UIView.
Modelo. Son los objetos que nos permiten almacenar y manipulas datos. Esto no
tiene nada que ver con la interfaz de usuario y le dice a la aplicacin qu tareas llevar
a cabo y cmo llevarlas a cabo, as como qu caractersticas van a tener ciertos
objetos.

Figura 5: Arquitectura aplicacin iOS


Fuente.- Tomado de
https://developer.apple.com/library/ios/documentation/General/Conceptual/CocoaEncyclopedia/Art/cocoa_mvc.gif

1.1.4 Fundamentos de Swift


Swift es un nuevo lenguaje de programacin para aplicaciones iOS, OS X, watchOS y
tvOS que implementa lo mejor de C y Objective-C sin las limitantes de la
compatibilidad de C. Swift adopta patrones de programacin seguros y agrega
caractersticas modernas para hacer el programar mucho ms fcil, flexible y divertido.
Swift simplifica el manejo de memoria utilizando el Automatic Reference Counting
(ARC), quien se encarga de conservar y liberar las referencias de memoria en el
cdigo, evitando que el desarrollador tenga que realizar la liberacin de memoria de
forma manual. Las bases de Swift se encuentran en los frameworks Foundation y
Cocoa, los cuales fueron modernizados y estandarizados. Soporta el uso de bloques
de cdigo, colecciones literales, y mdulos permitiendo al framework adoptar
lenguajes de tecnologas modernas sin interrupciones.
Swift es muy familiar a Objetctive-C, conserva las mismas funciones que se
encuentran en Objective-C, llamndolas y utilizando el mismo nombre para las mismas
con una sintaxis diferente. Permite los mismos accesos a Cocoa Frameworks y
permite la interpolacin con cdigo de proyectos hechos en Objective-C.
Respecto a la gua de programacin, se puede encontrar toda la informacin en el
portal de programadores de Apple:

CIBERTEC

CARRERA DE COMPUTACIN E INFORMTICA

DESARROLLO DE APLICACIONES MOVILES iOS

16

https://developer.apple.com/library/ios/documentation/Swift/Conceptual/Swift_Program
ming_Language/TheBasics.html#//apple_ref/doc/uid/TP40014097-CH5-ID309
En este manual, podremos encontrar toda la informacin sobre la sintaxis a utilizar
para el cdigo en Swift.

1.1.5 Creacin y administracin de cuentas en iTunes Connect y Member


Center
Apple, como otras empresas, cuenta con un portal en lnea para que los
desarrolladores puedan inscribirse y tener facilidades y beneficios al desarrollar con su
tecnologa. La inscripcin al grupo de desarrolladores es totalmente gratuita. Sin
embargo, para poder subir aplicaciones al App Store, un desarrollador debe pagar una
membresa anual de aproximadamente 100 dlares americanos, lo cual le otorga
varios beneficios, tanto como desarrollador y como empresa. A continuacin, vamos a
seguir los pasos para poder inscribirnos en el grupo de desarrolladores de Apple.
Para ello, primero, crearemos un Apple ID y, posteriormente, administraremos
nuestras cuentas en el iTunes Connect y en el Member Center. Para todo esto, Apple
cuenta con una pgina para desarrolladores, donde podrn acceder al siguiente
enlace https://developer.apple.com.
Creacin Apple ID
Para poder crear nuestro Apple ID, lo primero que debemos hacer es dirigirnos a la
pgina de desarrolladores de Apple: https://developer.apple.com.

En esta, podemos encontrar informacin sobre la tecnologa y los beneficios de


desarrollar para dispositivos de Apple. Adicionalmente, podemos encontrar, entre las
opciones de la barra superior, la opcin Account. Haremos clic en esta para que se
presente la interfaz de inicio de sesin.

CARRERA DE COMPUTACIN E INFORMTICA

CIBERTEC

DESARROLLO DE APLICACIONES MOVILES II - iOS

17

Una vez que nos encontremos en la interfaz de inicio de sesin, escogemos la opcin
Create Apple ID. Despus de esto, aparecer un formulario donde debemos llenar
nuestros datos para crear la cuenta.

CIBERTEC

CARRERA DE COMPUTACIN E INFORMTICA

DESARROLLO DE APLICACIONES MOVILES iOS

18

Una vez que hayamos llenado el formulario, procedemos a presionar el botn


Continue. Es de suma importancia llenar el formulario con informacin verdica y de
carcter formal, de esta forma no tendremos problemas a futuro cuando queramos
cobrar dinero de las ventas de sus aplicaciones.
Se nos enviar, al correo electrnico, un cdigo de activacin, el cual debemos
ingresar para poder validar el correo electrnico, el cual utilizaremos como nuestro
App ID.

CARRERA DE COMPUTACIN E INFORMTICA

CIBERTEC

DESARROLLO DE APLICACIONES MOVILES II - iOS

19

Una vez que hayamos validado el correo electrnico, nos redirigirn a la pantalla de
inicio de sesin, en donde podemos usar nuestro nuevo AppID y clave para ingresar.

La primera vez que ingresemos a nuestra cuenta de desarrolladores de Apple,


podemos visualizar un Acuerdo de desarrollador de Apple, el cual debemos leer
antes de aceptar, porque necesitamos tener conocimiento de las condiciones de uso
de la cuenta de desarrollador. Posterior a ello, presionamos el botn Submit para
proceder a entrar a nuestra cuenta de desarrollador.

CIBERTEC

CARRERA DE COMPUTACIN E INFORMTICA

DESARROLLO DE APLICACIONES MOVILES iOS

20

Ahora, nos encontramos dentro de nuestra cuenta de desarrolladores. En esta parte,


podemos obtener informacin para poder desarrollar nuestras aplicaciones,
documentacin, foros, reportar bugs, noticias.
Sin embargo, este es el primer paso. Una vez que entremos, podemos ver, en la parte
inferior, una seccin para poder unirnos al Programa de desarrolladores de Apple.
Esto es importante para poder crear aplicaciones para el AppStore. Procedemos a
presionar esta opcin.
Inscripcin al Programa de Desarrolladores de Apple

Esta seccin es la pgina del Programa de Desarrolladores de Apple. Aqu, podemos


encontrar informacin sobre los beneficios de pertenecer al programa de
desarrolladores. En la parte superior derecha, encontramos el botn para inscribirnos,
Enroll.

CARRERA DE COMPUTACIN E INFORMTICA

CIBERTEC

DESARROLLO DE APLICACIONES MOVILES II - iOS

21

Ahora, se nos presentarn los requisitos para poder unirnos al programa, como
desarrolladores independientes o como una organizacin (empresa). Procedemos a
presionar el botn Start Your Enrollment.

CIBERTEC

CARRERA DE COMPUTACIN E INFORMTICA

DESARROLLO DE APLICACIONES MOVILES iOS

22

A continuacin, se nos presenta la informacin de nuestro Apple ID y un desplegable


para seleccionar el tipo de entidad que deseamos inscribir. Luego de seleccionar,
presionamos Continue. En este caso, nos inscribimos como Individual / Sole
Proprietor / Single Person Business. Nos aparecer una alerta a tener en cuenta
antes de inscribirnos.

CARRERA DE COMPUTACIN E INFORMTICA

CIBERTEC

DESARROLLO DE APLICACIONES MOVILES II - iOS

23

Ahora, nos aparecer un formulario de contacto, el cual contendr, en su parte inferior,


un Acuerdo de Licencia, el cual debemos leer antes de proceder con el botn
Continue. La informacin ingresada, en este formulario, debe ser estrictamente
verdica, debido a que se utilizar para la facturacin de recibos al momento de cobrar
el dinero acumulado por las ventas en el AppStore. Luego de aceptar el acuerdo de
licencia, podemos presionar el botn Continue.

Ahora, nos aparecer un resumen de toda la informacin ingresada para poder


revisarla antes de proseguir. Una vez que hayamos revisado la informacin,
procedemos a presionar Continue.

CIBERTEC

CARRERA DE COMPUTACIN E INFORMTICA

DESARROLLO DE APLICACIONES MOVILES iOS

24

Ahora, nos aparecer la informacin del costo del programa de desarrolladores.


Presionamos el botn Purchase.

CARRERA DE COMPUTACIN E INFORMTICA

CIBERTEC

DESARROLLO DE APLICACIONES MOVILES II - iOS

25

Ahora, nos aparecer un formulario que nos solicitar la informacin de nuestra tarjeta
de crdito y la informacin de facturacin. La informacin otorgada, en estos
formularios, es de carcter importante, porque debe ser totalmente verdica y privada.
Asimismo, si se desea hacer los pagos con una tarjeta ajena a la del desarrollador, se
recomienda hacer el pago con una tarjeta de crdito propia. En todo caso, si utilizara
la tarjeta de crdito de una persona ajena, se le solicitar que enve una carta notarial
firmada y con copia de algunos documentos para validar la compra. Este proceso
demora una semana extra de tiempo para la validacin de los datos.
Luego de ingresar los datos, presionamos Continue.

CIBERTEC

CARRERA DE COMPUTACIN E INFORMTICA

DESARROLLO DE APLICACIONES MOVILES iOS

26

Ahora, podemos visualizar un resumen de la compra. Una vez revisada la operacin,


presionamos Place Order.

Una vez terminado el proceso, nos aparecer un resumen de la compra realizada y se


se nos indicar una cantidad de das que podra demorar en procesar la orden. Se
nos informara por correo electrnico una vez que se haya concluido el periodo de
validacin.

CARRERA DE COMPUTACIN E INFORMTICA

CIBERTEC

DESARROLLO DE APLICACIONES MOVILES II - iOS

27

El correo de activacin llegar con un link para poder activar nuestra inscripcin al
programa de desarrolladores de Apple. Presionamos en este link.

Una vez presionado el link, nos redireccionar a la pgina de desarrolladores de Apple


para poder utilizar el cdigo de activacin. Presionamos en Activate.

CIBERTEC

CARRERA DE COMPUTACIN E INFORMTICA

DESARROLLO DE APLICACIONES MOVILES iOS

28

De esta forma, completamos la activacin de nuestra cuenta como miembros del


equipo de desarrollo de Apple. Se nos mostrar una pantalla de confirmacin junto al
Team ID y la fecha de expiracin. El Team ID sirve para poder inscribir a otros
desarrolladores para que puedan trabajar con nosotros en nuestros proyectos. Estos
desarrolladores pueden ayudarte en tus proyectos; sin embargo, la nica persona que
podr lucrar con la cuenta ser el dueo de la misma.
Finalmente, presionamos en Get Started.

Ahora, cada vez que ingresemos a nuestra cuenta de desarrolladores, podemos ver
que se ha activado una serie de secciones nuevas, que son las herramientas para
poder trabajar como desarrolladores de Apple. Estas herramientas nos permitirn
crear certificados para nuestras aplicaciones y, a su vez, entrar al iTunes Connect,
donde podemos administrar nuestras aplicaciones y subirlas al AppStore.
iTunes Connect
El iTunes Connect es el centro de administracin de nuestras aplicaciones. Desde
este, vamos a poder organizar nuestras aplicaciones para poder subirlas al AppStore.
Podemos definir un precio de venta y cobrar por ello, organizar un grupo de testing,
generar versionar nuestros despliegues, etc.

CARRERA DE COMPUTACIN E INFORMTICA

CIBERTEC

DESARROLLO DE APLICACIONES MOVILES II - iOS

29

Para ello, lo primero es ingresar al iTunes Connect. Podemos hacerlo por medio de
nuestro Member Center en el portal de desarrolladores o a travs del siguiente enlace:
https://itunesconnect.apple.com.

Se nos pide iniciar sesin. Si no formamos parte del Equipo de Desarrollo de Apple,
no podremos ingresar.

La primera vez que ingresemos, se nos presentarn los trminos y condiciones del
servicio, el cual debemos leer antes de ingresar.

CIBERTEC

CARRERA DE COMPUTACIN E INFORMTICA

DESARROLLO DE APLICACIONES MOVILES iOS

30

Una vez dentro, podemos ver las diferentes secciones donde se podrn administrar
para generar las diferentes funcionalidades del iTunes Connect. Para poder hacer un
correcto uso de la herramienta, se recomienda leer el manual del lugar, investigar y
hacer un uso correcto del mismo.

CARRERA DE COMPUTACIN E INFORMTICA

CIBERTEC

DESARROLLO DE APLICACIONES MOVILES II - iOS

31

Resumen
1. iOS es el sistema operativo de Apple para dispositivos iPhone, iPad y Ipod touch.
2. Las aplicaciones de iOS poseen un flujo de vida que pasa por varios estados, tales
como Not Running, Inactive, Active, Background, Suspended.
3. La arquitectura de una aplicacin en iOS se basa en el diseo MVC: Modelo
Vista - Controlador.
4. Swift es un nuevo lenguaje de programacin utilizado para las aplicaciones de
Apple que busca implementar lo mejor de Objective-C y C sin las limitantes de
programar en C.
5. Para poder desarrollar para Apple, solo se necesita disponer de un AppleID; sin
embargo, para poder subir aplicaciones al AppStore, se necesita pertenecer al
programa de desarrolladores que s posee un costo anual.
6. El iTunes Connect es la herramienta que nos permitir subir nuestras aplicaciones
al AppStore y nos permitir administrarlas.
Pueden revisar los siguientes enlaces para ampliar los conceptos vistos en esta
unidad:

https://developer.apple.com/library/ios/documentation/iPhone/Conceptual/iPhon
eOSProgrammingGuide/TheAppLifeCycle/TheAppLifeCycle.html

https://developer.apple.com/library/ios/documentation/Swift/Conceptual/Swift_P
rogramming_Language

https://developer.apple.com

CIBERTEC

CARRERA DE COMPUTACIN E INFORMTICA

DESARROLLO DE APLICACIONES MOVILES iOS

1.2

32

CREACIN Y MANEJO DEL WORKSPACE

1.2.1 Caractersticas y funciones del XCode


El XCode es el entorno de desarrollo integrado ofrecido por la multinacional Apple Inc.
y se suministra por medio del AppStore en las Mac OS X de forma totalmente gratuita,
lo nico que se necesita es poseer una cuenta en Apple con su respectivo Apple ID.
XCode es capaz de compilar cdigo de los siguientes lenguajes de programacin: C,
C++, Swift, Objective-C, Java y AppleScript mediante una amplia gama de modelos de
programacin, incluyendo pero no limitado a las libreras de Cocoa, Carbon y Java.

Conociendo el XCode
Luego de obtener el XCode del App Store, este se instalar de forma automtica en
las aplicaciones de su Mac OS. Procedemos a abrir la aplicacin. Para ello, nos
dirigimos al LauncPad en la parte inferior de nuestro OSX. Luego, escogemos del
grupo de aplicacin el XCode y la seleccionamos.

CARRERA DE COMPUTACIN E INFORMTICA

CIBERTEC

DESARROLLO DE APLICACIONES MOVILES II - iOS

33

Esta es la pantalla de bienvenida de XCode. En ella, podemos ver, a la derecha, los


proyectos en los que hemos estado trabajando ltimamente. Nos permite un acceso
rpido a ellos sin tener que buscarlos en nuestra Mac OS. A la izquierda, podemos
visualizar 3 opciones: la primera nos permite crear un proyecto PlayGround; el
segundo, crear un proyecto XCode; y el ltimo, abrir un proyecto desde un repositorio.
Por defecto, seleccionamos la segunda opcin y procederemos a crear un proyecto.

XCode nos presentar una interfaz donde podremos seleccionar un modelo de plantilla
para el tipo de aplicacin que deseamos realizar. Esto nos entregar un proyecto pre
configurado con las bases para nuestra aplicacin. Todo esto, posteriormente, puede
ser configurado manualmente si se desea realizar un ajuste.
Para fines acadmicos, seleccionamos Single View Application. Es la plantilla bsica
para realizar aplicaciones a dispositivos mviles.

CIBERTEC

CARRERA DE COMPUTACIN E INFORMTICA

DESARROLLO DE APLICACIONES MOVILES iOS

34

Ahora, se nos presentar una interfaz para poner la informacin de nuestro proyecto.
En esta parte, debe destacarse que el bundle identifier es el string identificador nico
de la aplicacin. Este se utilizar en el App Store para poder diferenciar la aplicacin
de otras. Asimismo, se va a seleccionar el lenguaje de programacin que se utilizar y
el dispositivo al cual estar dirigida la aplicacin. Para las dems opciones, se debe
leer el manual del desarrollador para poder hacer modificaciones especficas para
cada proyecto.
Finalmente, nos solicitar que indiquemos en qu carpeta deseamos crear el proyecto
dentro de nuestra Mac OS. Hecho esto, ya disponemos de un proyecto listo para ser
trabajado.

El IDE de desarrollo se divide en 5 partes principales:

Barra de Herramientas: Se encuentra en la parte superior. Nos permite


acceder a diferentes herramientas del IDE, tales como el organizar, los

CARRERA DE COMPUTACIN E INFORMTICA

CIBERTEC

DESARROLLO DE APLICACIONES MOVILES II - iOS

35

dispositivos para pruebas, el Archive del producto para subirlo al iTunes


Connect, etc.

Interfaz de Navegacin: Se encuentra en el lateral izquierdo del IDE. Se


encarga de organizar todos los archivos del proyecto implementando una
organizacin en cascada de carpetas. Tambin, contiene un buscador y
otras herramientas que nos facilitan acceso rpido a diferentes partes del
proyecto.

Interfaz de Utilitarios: Se encuentra en el lateral derecho del IDE.


Contiene varias herramientas que permiten configurar los atributos de los
archivos del proyecto, tales como imgenes, files, storyboards, y elementos
del Cocoa. En su parte inferior, contiene recursos pre fabricados de la
librera Cocoa.

Interfaz de Edicin: Se encuentra en la parte central. Se utiliza para editar


el contenido de los diferentes archivos.

Interfaz de Debug: Se utiliza para ver variables en tiempo de ejecucin,


interactuar con la consola de debug y controlar la ejecucin de la aplicacin.

Figura 6: Divisin del IDE de desarrollo XCode


Fuente.- Tomado de
https://developer.apple.com/library/ios/documentation/ToolsLanguages/Conceptual/Xcode_Overview/Art/XC_O_Wrkspa
ceWindow_2x.png

1.2.2 Caractersticas y funciones del PlayGround


Los PlayGround son ambientes interactivos de programacin en Swift que evalan
linealmente cada enunciado para mostrar resultados de forma inmediata, sin
necesidad de crear un proyecto. Es mayormente utilizado con fines de aprendizaje,
as mismo para realizar prototipos y pruebas de cdigo sin tener que involucrar el
contenido de un proyecto.

CIBERTEC

CARRERA DE COMPUTACIN E INFORMTICA

DESARROLLO DE APLICACIONES MOVILES iOS

36

Creacin de un PlayGround
Para la creacin de un PlayGround, al momento de abrir el XCode y ver la pantalla de
bienvenida, marcamos la opcin Get started with PlayGround, tambin podemos ir a
File / New / Playground en el mismo XCode.

Lo primero que se nos presentar es un formulario donde debemos nicamente


colocar el nombre para el archivo PlayGround y la plataforma en la que deseamos
realizar las pruebas. Posterior a ello, solo debemos seleccionar dnde deseamos
guardar el archivo.

CARRERA DE COMPUTACIN E INFORMTICA

CIBERTEC

DESARROLLO DE APLICACIONES MOVILES II - iOS

37

Una vez que se haya terminado de crear el archivo, se nos mostrar el ambiente de
trabajo. En la zona principal, podemos observar que se importa por defecto una
librera para que podamos empezar a programar y una primera variable String como
parte del saludo. A la mano derecha, podemos observar una zona donde aparecer el
resultado en tiempo real de las frmulas y cdigos que desarrollemos. En la parte
inferior, podemos activar una consola para manejar variables y respuestas en tiempo
de ejecucin y, tambin, encontraremos nuestro Run button para poder hacer correr el
cdigo.
Para ms informacin sobre cmo utilizar el PlayGround y los alcances que puede uno
llegar a tener, se debe revisar la documentacin en la pgina de desarrolladores:
https://developer.apple.com/library/ios/recipes/Playground_Help/Chapters/AboutPlaygr
ounds.html#//apple_ref/doc/uid/TP40015166-CH28-SW1

1.2.3 Instalacin y manejo del Cocoa Pods


CocoaPods es una herramienta que se encarga de administrar dependencias de
libreras para proyectos realizados en XCode. Estas libreras son especificadas en un
simple archivo de texto llamado Podfile. CocoaPods se encargar de leer el
documento y descargar las libreras para su uso en el proyecto y crear los accesos
necesarios para que podamos implementarlas en cualquier parte del mismo.
CocoaPods ha sido creado en Ruby y ser posible instalarlo utilizando la consola de la
Mac OSX. Usar la instalacin por defecto involucra tener permisos de administrador
en el sistema. Ello requiere utilizar la funcin sudo cuando se instalen los archivos
.gems del Ruby. Para ello, abrimos la consola del sistema operativo e ingresamos el
siguiente cdigo. Entonces, vamos a las aplicaciones del OSX y entramos al Terminal.

CIBERTEC

CARRERA DE COMPUTACIN E INFORMTICA

DESARROLLO DE APLICACIONES MOVILES iOS

CARRERA DE COMPUTACIN E INFORMTICA

38

CIBERTEC

DESARROLLO DE APLICACIONES MOVILES II - iOS

39

Una vez hecho esto, se podr observar la instalacin y proceder a utilizar el


cocoapods. Hay ocasiones en que no es necesario utilizar el prefijo sudo y
nicamente es necesario mandar la sentencia sin los permisos de administrador. Esto
depende de la configuracin de permisos del sistema. Si an se cuenta con
problemas para la instalacin, se recomienda leer el siguiente enlace:
https://guides.cocoapods.org/using/getting-started.html

1.2.4 Creacin de un WorkSpace


La diferencia entre un WorkSpace y un proyecto en XCode es mnima. El
WorkSpace consiste en integrarle al Xcode un sistema que maneje las libreras
Pods y permita el uso de las mismas en todo el proyecto. Esto evita que uno
tenga que hacer la implementacin de la librera en cada Clase, adems otorga
un ambiente ordenado y controlado para el manejo de las libreras, as como
para la actualizacin de las mismas de forma ms fcil.
Para poder generar un WorkSpace, lo primero que necesitamos es tener un
proyecto ya creado y configurado. Luego de ello, procedemos a crear un
podfile. Abrimos la consola Terminal y ponemos, en esta, el comando $ pod
init.

Luego de ello, en la carpeta del proyecto, podemos observar el archivo Podfile, el cual
vendr a indicar al proyecto qu libreras deseamos utilizar.

Si entramos en el archivo, podemos ver la estructura del podfile, donde vendremos a


poner los nombres de la librera para que sean descargadas.

CIBERTEC

CARRERA DE COMPUTACIN E INFORMTICA

DESARROLLO DE APLICACIONES MOVILES iOS

40

Lo nico que falta es crear el WorkSpace. Para ello, nos dirigimos nuevamente al
Terminal. Por medio del Terminal, nos ubicamos en la carpeta que contiene el Podfile
y mandamos el comando pod update, el cual proceder a crear el WorkSpace.

Ahora, en la carpeta del proyecto, podemos ver el acceso al WorkSpace. A diferencia


de entrar por medio del cono azul del proyecto, procederemos a ingresar por medio
del cono blanco del WorkSpace.

CARRERA DE COMPUTACIN E INFORMTICA

CIBERTEC

DESARROLLO DE APLICACIONES MOVILES II - iOS

41

Una vez que hemos ingresado al WorkSpace, lo principal que podemos notar, en la
parte inferior izquierda de la pantalla, es un segundo proyecto, el cual contendr a las
libreras Pod y se encargar de administrarlos por nosotros y volverlas accesibles a
todas partes de nuestro proyecto.

1.2.5 Descarga e instalacin de libreras Pods


La descarga e instalacin de libreras Pod es sumamente fcil, de la misma forma el
actualizarlas y eliminarlas del proyecto. Primero que nada, debemos buscar alguna
librera en internet, generalmente las encontramos en algn repositorio en lnea.
Luego de ello, revisamos si la librera tiene una versin POD y, a su vez, revisamos si
la librera es para Swift o para Objective-C. En el caso de trabajar en Swift, podemos
descargar las que estn en Objective-C sin problemas, ya que se crear un Bridge que
nos permitir utilizarlas sin problemas.
Una vez que tengamos el nombre de la librera POD, procedemos a ponerla en
nuestro Podfile. Dependiendo del tipo de proyecto que realicemos, ponemos la librera
POD en los targuest respectivos. Adicionalmente, si trabajamos en Swift, debemos
descomentar la segunda y la cuarta lnea de configuracin de la parte superior del
archivo, y grabar los cambios.

Ahora, con nuestro archivo Podfile configurado, procedemos a actualizarlo. Para ello,
nos dirigimos a nuestro Terminal y ubicndonos en la carpeta del proyecto donde est
el Podfile procedemos a mandar el comando pod update.

CIBERTEC

CARRERA DE COMPUTACIN E INFORMTICA

DESARROLLO DE APLICACIONES MOVILES iOS

42

En la respuesta del comando, podemos ver cmo se ha descargado la librera


correctamente y nos indica la versin que ha sido descargada. De esta misma forma,
podemos actualizar todas las libreras con el mismo comando. Si vamos al
WorkSpace, podemos ver, en la carpeta de Pods, que la librera se encuentra en su
lugar.

CARRERA DE COMPUTACIN E INFORMTICA

CIBERTEC

DESARROLLO DE APLICACIONES MOVILES II - iOS

43

Resumen
1. XCode es el IDE de desarrollo de Apple y es gratuito en el AppStore de las OSX.
2. Playground es un ambiente de pruebas que permite programar sin necesidad de
un proyecto.
3. Cocoa Pods es una herramienta que nos permitir manejar libreras para nuestros
proyectos.

Pueden revisar los siguientes enlaces para ampliar los conceptos vistos en esta
unidad:

https://guides.cocoapods.org/using/getting-started.html

https://developer.apple.com/library/ios/recipes/Playground_Help/Chapters/Abou
tPlaygrounds

CIBERTEC

CARRERA DE COMPUTACIN E INFORMTICA

DESARROLLO DE APLICACIONES MOVILES iOS

CARRERA DE COMPUTACIN E INFORMTICA

44

CIBERTEC

DESARROLLO DE APLICACIONES MOVILES II - iOS

45

UNIDAD

2
DESARROLLO DE PANTALLAS
LOGRO DE LA UNIDAD DE APRENDIZAJE
Al trmino de la unidad, el alumno podr crear un flujo de navegacin para su
aplicacin y dispondr de elementos como tablas y colecciones .

TEMARIO
2.1 Tema 3
2.1.1
2.1.2
2.1.3

:
:
:
:

Navegacin bsica
Manejo de StoryBoards
Creacin de flujo de pantallas por ViewControllers
Ciclo de vida del UIViewController (ViewDidLoad, ViewDidAppear,
ViewWillAppear, etc.)
2.1.4 : Manejo de pantallas por UINavigationController
2.1.5 : Manejo de pantallas por UITabBarController

2.2 Tema 4 : Manejo de elementos en pantalla


2.2.1 : Componentes bsicos de interfaz de usuario (UILabel, UITextField,
UIImage, UIButton, etc.)
2.2.2 : Configuracin de UIScrollViewController
2.2.3 : Configuracin de tablas con celdas dinmicas
(UITableViewController)
2.2.4 : Configuracin de colecciones con tems dinmicos
(UICollectionViewController)
2.2.5 : Configuracin de paginadores (UIPageViewController)
2.2.6 : Creacin y manejo de CustomViews
2.3 Tema 5
2.3.1
2.3.2
2.3.3
2.3.4

:
:
:
:
:

Constrains
Fundamentos sobre Constrains
Creacin de Constrains por StoryBoard
Creacin de Constrains por cdigo
Manejo de Constrains en tiempo de ejecucin

ACTIVIDADES PROPUESTAS

Los alumnos procedern a crear una aplicacin empleando StoryBoars.


Los alumnos crearn un flujo de pantallas con diferentes ViewControllers.
Los alumnos implementarn tablas y colecciones en su proyecto.
Los alumnos implementarn el Navigation Controller y el TabBar para su
proyecto.
Los alumnos implementarn constraints para su proyecto.

CIBERTEC

CARRERA DE COMPUTACIN E INFORMTICA

DESARROLLO DE APLICACIONES MOVILES iOS

CARRERA DE COMPUTACIN E INFORMTICA

46

CIBERTEC

DESARROLLO DE APLICACIONES MOVILES II - iOS

2.1

47

NAVEGACIN BSICA

2.1.1 Manejo de StoryBoards


Los StoryBoards vienen a ser herramientas visuales en el XCode que nos permiten
organizar y desarrollar las pantallas de nuestra aplicacin. Si bien no estamos
limitados a utilizarlos, estos ayudan de forma muy significativa al manejo de elementos
de la interfaz de usuarios.
Por medio de ellos, podemos indicar el flujo de pantallas de nuestra aplicacin, qu
herramientas de interfaz deseamos utilizar en cada pantalla y qu herramientas de la
librera de Cocoa deseamos implementar en cada pantalla. Asimismo, el StoryBoard
guarda la referencia de memoria de cada una de las herramientas que se creen en
este, haciendo de esta forma ms ligero el manejo de memoria de la aplicacin.
Nuestro proyecto por defecto nos crear un StoryBoard; sin embargo, utilizar un solo
StoryBoard para todo el proyecto es una mala prctica, la mejor alternativa es dividir el
proyecto en varios mdulos dependiendo de las funcionalidades, definir qu pantallas
necesitamos para cada mdulo y, por ltimo, crear un StoryBoard para cada grupo de
pantallas. Esto nos permitir trabajar de forma ordenada, inclusive el tiempo de carga
al querer visualizar un StoryBoard ser menor ya que tendr menos informacin que
mostrar.
Por ltimo, manejar varios StoryBoards nos permitir trabajar en equipo con otras
personas, ya que el StoryBoard se considera como un solo archivo y su contenido
puede ser modificado por un desarrollador a la vez. Si nos encontramos trabajando
con un grupo de desarrolladores y dos de ellos hacen modificaciones al mismo tiempo
en un StoryBoard, estos no podrn integrarse al momento de unificar la informacin en
el repositorio. Para ello, la mejor opcin es subir uno de los cambios al repositorio y
descartar el otro grupo de cambios, y volver a realizarlos sobre el proyecto
actualizado.
Para poder crear un StoryBoard, dentro del WorkSpace, procedemos a crear un
archivo nuevo. Para ello, podemos hacer clic derecho sobre las carpetas o acceder a
crear un archivo desde la barra superior de herramientas.

CIBERTEC

CARRERA DE COMPUTACIN E INFORMTICA

DESARROLLO DE APLICACIONES MOVILES iOS

48

Una vez creado el StoryBoard, podemos observarlo dentro del proyecto.


Adicionalmente, cuando se crea el proyecto, se crean 2 StoryBoards por defecto. Uno
de ellos viene a ser el Main, el cual es creado para que uno pueda empezar a
implementar las pantallas de su proyecto, bien podemos utilizarlo o eliminarlo y crear
el nuestro. El segundo llamado Launch Screen viene a ser el que contenga a la
pantalla de carga cuando abrimos la aplicacin. Este ltimo StoryBoard es de mucha
importancia y no debemos eliminarlo, incluso reemplazarlo requiere de un proceso que
no vendr a ser explicado en este material.

Al seleccionar nuestro LaunchScreen.StoryBoard, podemos observar, dentro de l, un


ViewController en donde podemos configurar nuestra pantalla de carga. En este,

CARRERA DE COMPUTACIN E INFORMTICA

CIBERTEC

DESARROLLO DE APLICACIONES MOVILES II - iOS

49

podemos indicar qu imagen deseamos que se muestre mientras se carga la


aplicacin. Se debe indicar que realizar, en esta pantalla, animaciones no es posible,
pero si se puede cargar rpidamente una primera pantalla donde se haga la carga de
la informacin y presentar la animacin en esa pantalla.
Como podemos ver, el ViewController posee una forma cuadrada. Esto es debido a
que est configurado para visualizarse en todos los tamaos de dispositivos. Esto
puede ser de gran ayuda si deseamos realizar la aplicacin para diferentes
dispositivos con diferentes resoluciones de pantalla. Otra opcin, en caso nos
sintamos ms cmodos desarrollando nicamente para iPhone, es deshabilitar esta
configuracin y definir exactamente para qu tipo de dispositivo vamos a desarrollar, y
tener, de esta forma, una mejor previsualizacin al desarrollar.
Si deseamos desactivar esta opcin que permite ver el ViewController como un
elemento cuadrado, procedemos a seleccionar el ViewController. Luego de ello, en la
parte superior de los Utilitarios, en la primera opcin, el file inspector, buscamos la
opcin Use size classes para desactivarla.

Una vez que hayamos desactivado esta opcin, se nos mostrar una interfaz donde se
nos indicar para qu tipo de dispositivo deseamos trabajar, iPhone o iPad.

Una vez que hayamos escogido una opcin (en este caso, escogeremos iPhone),
veremos cmo el ViewController, dentro de nuestro StoryBoard, se ver de forma
rectangular y vertical. Este cambio no solo se aplica al ViewController sino a todos los
ViewControllers dentro del StoryBoard, y debe hacerse por cada StoryBoard dentro del
proyecto. De esta forma, podemos disear StoryBoards para cada dispositivo si lo
deseamos y llamar a los ViewControllers por cdigo segn identifiquemos el
dispositivo mediante la programacin del cdigo. Debemos tomar en cuenta que esto

CIBERTEC

CARRERA DE COMPUTACIN E INFORMTICA

DESARROLLO DE APLICACIONES MOVILES iOS

50

no limita que podamos crear la aplicacin para varios dispositivos, solo nos indica
cmo se ver dentro del IDE de desarrollo. Para poder realizar un correcto diseo, lo
ms recomendable es probar la aplicacin en todos los dispositivos en que se va a
utilizar y condicionar el diseo para cada pantalla. No es necesario tener todos los
dispositivos, ya que contamos con un emulador de todos los dispositivos en nuestro
entorno de desarrollo.

2.1.2 Creacin de flujo de pantallas por ViewControllers


Dentro del StoryBoard, podemos crear el flujo de pantallas que debera seguir nuestra
aplicacin. Esto nos permite visualizar cmo deberamos organizar el flujo de
informacin de nuestra aplicacin y, dentro de las pantallas, podemos colocar las
herramientas de interfaz que necesitamos.
Para poder crear un ViewController, por medio del StoryBoard, procedemos a
buscarlos dentro de las herramientas de la librera del Cocoa. En la seccin de
Utilitarios, si buscamos en la parte inferior, podemos ver un grupo de secciones de las
cuales elegiremos la tercera, Librera de Objetos.
Dentro de esta librera,
encontramos las herramientas del Cocoa y varias herramientas pre fabricadas que nos
facilitarn poner en nuestra pantalla objetos de la interfaz de usuario. En el buscador,
escribimos ViewController para poder filtrar las herramientas y encontrar varias que
heredan de la Clase UIViewController. Entre estas, escogemos la que se llama View
Controller, la seleccionamos y procedemos a arrastrarla al StoryBoard.

CARRERA DE COMPUTACIN E INFORMTICA

CIBERTEC

DESARROLLO DE APLICACIONES MOVILES II - iOS

51

Una vez que tenemos nuestro View Controller, procedemos a crear otros
ViewControllers segn el diseo de nuestra aplicacin. Una vez hecho esto,
procedemos a crear el flujo de la aplicacin.
Primero, seleccionamos un
ViewController. Luego de ello, en la seccin de Utilitarios, seleccionamos la opcin
Connections, que es la que se encuentra a la derecha de las dems.
En esta ventana, encontramos los Triggered Segues. Estos se utilizaban hace tiempo
para indicar a dnde debe dirigirse una pantalla segn una accin determinada. Sin
embargo, esto se plante como una mala prctica, debido a que una ventana no debe
estar limitada por el StoryBoard para indicar el flujo de la aplicacin, ya que el
desarrollador debera controlar esto por cdigo. Buscamos la propiedad manual y la
enlazamos al ViewController al que debera seguir el flujo de la aplicacin.
Podemos, adicionalmente, enlazar el ViewController con ms de un ViewController,
pero esto no limita al desarrollador a solo utilizar estos enlaces. El desarrollador
puede llamar a cualquier ViewController que se encuentre en los StoryBoards segn lo
desee, adems puede crear manualmente ViewControllers por cdigo si as lo desea.
Una vez que se haya hecho el enlace nos indicar qu tipo de enlace deseamos. En
este caso, marcaremos la opcin push. Una vez hecho esto, podemos visualizar el
segue en pantalla.

CIBERTEC

CARRERA DE COMPUTACIN E INFORMTICA

DESARROLLO DE APLICACIONES MOVILES iOS

52

Existen varios tipos de View Controllers en las herramientas del Cocoa. Varios de
ellos vienen con funciones ya realizadas por defecto para facilitarnos el trabajo; sin
embargo, estos no se vern en el Manual debido a que los objetivos del curso
requieren que uno pueda desarrollar sus propios View Controllers desde uno ms
bsico y as tener mayor control por cdigo.
Por ltimo, debemos indicar cul es el primer View Controller que se va a llamar. El
programa por defecto indica que el View Controller creado por defecto en el Main
StoryBoard sea el primero en llamarse. Esto lo indica poniendo una flecha a su lateral
izquierdo. Esta flecha indica el StoryBoard Entry Point, que viene a ser el primer
ViewController en mostrarse.

Esta flecha, que vemos en pantalla, podemos asignarla a cualquier View Controller
dentro de los StoryBoards. Esta indica el punto de ingreso al StoryBoard. Cuando
designemos cul StoryBoard es el que debe cargarse primero, el programa sabr cul
es el primer ViewController en mostrar. Para poder asignarla, podemos seleccionarla
y arrastrarla adentro del StoryBoard o a otro ViewController, o tambin podemos
seleccionar el ViewController que deseamos sea nuestro StoryBoard Entry Point. En
la seccin de Utilitarios, seleccionamos la cuarta opcin Attributes y buscamos la
opcin Is Initial View Controller, la marcamos y automticamente se va a desmarcar
de cualquier otro View Controller que tenga esta opcin activada. Luego de ello,
podemos ver que la flecha del StoryBoard Entry Point se ubica al lateral izquierdo de
nuestro View Controller indicando que ser el primero en mostrarse y donde empezar
toda nuestra aplicacin.

CARRERA DE COMPUTACIN E INFORMTICA

CIBERTEC

DESARROLLO DE APLICACIONES MOVILES II - iOS

53

Para indicar qu StoryBoard ser cargado, primero, debemos ir al InfoPlist. En este,


debemos buscar la opcin Main storyboard file base name y poner el nombre del
Storyboard que se cargar inmediatamente luego del Launch Screen. De igual forma,
podemos indicar qu StoryBoard contiene el Launch Screen. Para ello, buscamos la
propiedad Launch Screen interface file base.

2.1.3

Ciclo de vida del UIViewController (ViewDidLoad, ViewDidAppear,


ViewWillAppear, etc.)

Todos los ViewControllers heredan de la Clase UIViewController, la cual les da


funciones del ciclo de vida. Nos indican eventos claves del View Controller: cundo se
crea, cundo va a aparecer, cundo va a desaparecer, cundo va a destruirse, etc.
Estos eventos deben der manejados por el programador para poder configurar las
funcionalidades del ViewController.
Antes de ello, a cada ViewController del StoryBoard, debemos asignarle una Clase y
un identificador con el cual podrn ser identificados y llamados por cdigo. Asimismo,
podremos reconocer sus atributos y propiedades para poder configurarlos.
Para poder asignarles un Identificador, debemos seleccionar el ViewController dentro
del StoryBoard. Luego, en la seccin de Utilitarios, seleccionamos la tercera opcin
Identity. En esta, veremos un cuadro de texto con el nombre StoryBoard ID, en el
cual ponemos el identificador que deseamos para este ViewController. Recordemos
que estos identificadores no deben repetirse dentro del StoryBoard.

CIBERTEC

CARRERA DE COMPUTACIN E INFORMTICA

DESARROLLO DE APLICACIONES MOVILES iOS

54

Ahora, procedemos a crear la Clase que configurar nuestro ViewController. Para


ello, procedemos a crear un nuevo archivo, vamos a la barra de herramientas y
presionamos en File/new/File, entonces se nos abrir una pantalla para escoger qu
tipo de archivo deseamos crear.

En esta pantalla, escogeremos la opcin iOS/Source de la barra izquierda. Luego,


dentro de estas opciones, escogemos Cocoa Touch Class.

CARRERA DE COMPUTACIN E INFORMTICA

CIBERTEC

DESARROLLO DE APLICACIONES MOVILES II - iOS

55

Luego, veremos la interfaz donde podemos decidir qu nombre deseamos ponerle a


nuestra Clase e indicar qu debe heredar de UIViewController, as como el lenguaje
a utilizar para esta Clase.

Finalmente, podemos seleccionar en qu carpeta deseamos guardar el archivo.

Ahora, podemos visualizar el archivo dentro de nuestro proyecto y, al hacerle clic,


podemos ver que se gener el cdigo base para la programacin de nuestro View
Controller.

CIBERTEC

CARRERA DE COMPUTACIN E INFORMTICA

DESARROLLO DE APLICACIONES MOVILES iOS

56

En el cdigo, podemos observar que la Clase hereda de UIViewController dos


funciones: ViewDidLoad y DidReceiveMemoryWarning.
Las principales funciones del ciclo de vida de un ViewController vienen a ser seis:

ViewDidLoad: Esta funcin se llama cuando el ViewController va a ser


creado, es la primera funcin en ser llamada.

ViewWillAppear: Esta funcin se llama cuando el ViewController va a


aparecer en pantalla, justo al empezar la animacin de trancisin que lo
pone en pantalla.

ViewWillDisappear: Esta funcin de llama cuando el ViewController va a


desaparecer de la pantalla, justo al empezar la animacin de transicin que
lo va a ocultar.

ViewDidAppear: Esta funcin se llama una vez que el ViewController se


encuentra totalmente en pantalla, justo cuando finaliza la animacin de
transicin que lo presenta en pantalla.

ViewDidDisappear: Esta funcin se llama una vez que el ViewController se


encuentra totalmente fuera de pantalla, justo cuando finaliza la animacin
de transicin que lo presenta en pantalla.

DidReceiveMemoryWarning: Esta funcin se llama cuando la aplicacin


empieza a tener una advertencia de memoria, en este caso debemos
decidir qu ViewControllers deseamos remover de memoria para poder dar
paso a los nuevos y manejar la informacin de forma que no la perdamos.

CARRERA DE COMPUTACIN E INFORMTICA

CIBERTEC

DESARROLLO DE APLICACIONES MOVILES II - iOS

57

El uso adecuado de estas funciones del ciclo de vida es de suma importancia para
poder manejar la informacin de la aplicacin. Adicionalmente, existen ms funciones
del ciclo de vida. Para ello, habr que leer la documentacin en la pgina de
desarrolladores y saber cundo debemos utilizarlos.
Finalmente, nos queda nicamente asignar la Clase al ViewController de nuestro
StoryBoard. Para ello, seleccionamos el ViewController dentro de nuestro StoryBoard
y, en la tercera pestaa de la seccin de Utilitarios, Identity, en la opcin Clase,
ponemos el nombre de la Clase que hemos creado.

Una vez hecho esto, podemos ver que al ViewController se le asign la Clase en el
nombre que lo representa en el StoryBoard. Ahora, nuestro ViewController est
conectado a la Clase que hemos creado.

2.1.4 Manejo de pantallas por UINavigationController


El Navigation Controller es una herramienta perteneciente a la librera del Cocoa, que
contiene un grupo de herramientas que nos facilita el manejo de transicin entre
ViewControllers de la aplicacin. Esta herramienta nos permite avanzar y retroceder
entre ViewController con mayor facilidad. Provee de una barra superior, muy utilizada
en aplicaciones iOS, donde podemos ubicar botones de acceso rpido para el usuario
y el ttulo de la seccin en que se encuentra el usuario. Tambin, permite anexar una

CIBERTEC

CARRERA DE COMPUTACIN E INFORMTICA

DESARROLLO DE APLICACIONES MOVILES iOS

58

gran variedad de herramientas y funcionalidades como el esconder o mostrar la barra


superior con animaciones. Las transiciones animadas entre pantallas, etc.
Para poder hacer uso del Navigation View Controller, primero, debemos crear uno en
nuestro proyecto. En la parte inferior derecha de la seccin de Utilitarios, buscamos
Navigation Controller.

El Navigation Controller, al ser creado, viene por defecto con un UIViewController, que
posee un TableView, como su RootViewController. El RootViewController viene a ser
el primer ViewController que ser mostrado por el Navigation View. Si nuestro inters
es el de dar uso al ViewController que viene por defecto, lo conservamos; en caso
contrario, lo eliminamos y asignamos otro ViewController como el RootViewController.
Para poder asignarle al Navigation View un RootViewController, nos dirigimos a la
seccin de utilitarios y, en la pestaa de Connections, la que se encuentra ms a la
derecha, buscamos la opcin root view controller. Conectamos esta opcin
presionando la tecla Control y arrastrando la propiedad hasta el ViewController que
deseemos sea el nuevo RootViewController.
Es recomendable indicar que el NavigationViewController es el StoryBoard Entry Point.
De esta forma, podemos organizar las transiciones de pantalla de nuestra aplicacin
desde el inicio de la aplicacin.

CARRERA DE COMPUTACIN E INFORMTICA

CIBERTEC

DESARROLLO DE APLICACIONES MOVILES II - iOS

59

Actualmente, deberamos contar en nuestro DemoStoryBoard con 1


NavigationView que viene a ser nuestro Entry Point.

Poseemos 3 ViewControllers, uno de ellos es el DemoViewController que


pose el Script DemoViewController y es el RootViewController del
NavigationView.

Crearemos dos Scripts adicionales que hereden de UIViewController:


DemoTableViewController y DemoCollectionViewController.

Asignaremos estos a los otros ViewControllers y con el mismo nombre les


asignaremos su Storyboard ID.

Asignaremos 3 colores diferentes a los backgrounds de cada


UIViewController para poder diferenciarlos al implementar el
NavigationViewController.
o
o
o

Rojo -> DemoViewController


Verde -> DemoTableViewController
Azul -> DemoCollectionViewController

Ahora, procedemos a presionar el botn Build y podemos ver que primero se cargar
una pantalla blanca que pertenece al Launch Screen seguida de la pantalla roja que
pertenece a nuestro DemoViewController. (Podemos utilizar un simulador o un
dispositivo).

CIBERTEC

CARRERA DE COMPUTACIN E INFORMTICA

DESARROLLO DE APLICACIONES MOVILES iOS

60

La barra blanca, que vemos en la parte superior del ViewController, corresponde al


NavigationView. Ahora, procedemos a poner un botn y un ttulo a nuestro
DemoViewController. Creamos la funcin SetNavigationBar. Esta funcin la
ponemos en el script de nuestro DemoViewController y, junto con esta, creamos dos
funciones: pressRightNavigationButton y pressLeftNavigationButton.

La funcin primero define un String para el ttulo del NavigationBar. Luego de ello,
configura el botn izquierdo, el cual no ser utilizado; por ello, lo llenamos con un texto
vaco. Adems, al botn derecho, que s posee un texto, le configuramos el tamao, la
fuente y el color de texto. A ambos botones, les agregamos una funcin por medio de
un Targuet, de esta forma, al ser presionados, llamarn a las funciones respectivas
de cada uno.
Ahora, ponemos la funcin en el ViewDidLoad y veremos cmo se configura el
NavigationBar cuando damos Build al proyecto.

Ahora, si deseamos cambiar de pantalla utilizando el NavigationBar, solo debemos


indicar un mtodo que se active con algn evento. En este caso, lo realizaremos en el
pressRightNavigationButton. Una vez presionado, podemos ver cmo cambiamos al
DemoTableView.

CARRERA DE COMPUTACIN E INFORMTICA

CIBERTEC

DESARROLLO DE APLICACIONES MOVILES II - iOS

61

Como podemos observar, se genera automticamente un botn para retornar al


ViewController previo; sin embargo, es muy posible que este no coincida con nuestros
diseos.
Procedemos a crear las mismas funciones en el DemoTableViewController y, en este
caso, configuraremos el botn izquierdo del NavigationController para que lleve el
nombre DemoView y el ttulo TableView

Para poder regresar al anterior ViewController, procedemos a crear la funcin


PopViewController del NavigationController. Hecho esto, notaremos que el botn del
DemoView controller que nos cambiaba de pantalla ya no funcionaba, y eso es debido
a que reconfiguramos los botones superiores. Por ello, en la funcin ViewWillAppear,
volvemos a llamar a la funcin SetNavigationBar.

Con la informacin obtenida hasta el momento, debemos ser capaces de


navegar hasta la pantalla del CollectionView y regresar hasta el inicio.

2.1.5 Manejo de pantallas por UITabBarController


El TabBar es una herramienta que facilita la transicin entre pantallas. A diferencia del
Navigation, el TabBar muestra un men inferior que nos permite conocer la totalidad
de pantallas que maneja y, con un clic, podemos pasar a cualquier pantalla que
contenga el TabBar sin tener que pasar por las dems.
Para crear un TabBar, debemos dirigirnos a la seccin de Utilitarios. En la parte
inferior, buscamos TabBar y escogemos el TabBar Controller, lo arrastramos a nuestro
StoryBoard.

CIBERTEC

CARRERA DE COMPUTACIN E INFORMTICA

DESARROLLO DE APLICACIONES MOVILES iOS

62

El TabBar se crea con 2 ViewControllers por defecto, los eliminamos. Luego de ello,
procedemos a indicar el TabBar como el nuevo StoryBoard Entry Point. Ahora,
cuando empieze la aplicacin, podemos ver primero el TabBar.
Retiramos el RootViewController del NavigationController y los segues de los 3
ViewControllers. Luego de ello, procedemos a insertar los 3 ViewControllers en el
TabBar. Para ello, en la seccin de Utilitarios, buscamos la pestaa ms a la derecha,
connections, y buscamos la propiedad view controllers. Presionando la tecla
Control, arrastramos esta propiedad a los 3 ViewControllers, esto los aadir al arreglo
de ViewControllers del TabBar. Recordemos que el orden en que son ingresados es
el mismo orden en que se mostrarn en la parte inferior del TabBar.

CARRERA DE COMPUTACIN E INFORMTICA

CIBERTEC

DESARROLLO DE APLICACIONES MOVILES II - iOS

63

Ahora, debemos indicar qu ttulo y qu imagen deben llevar cada uno de los
ViewControllers en el TabBar.
Para ello, escogemos la opcin tem en los
ViewControllers.

En Utilitarios, en la pestaa de atributos, podemos configurar el ttulo y la imagen que


llevar. Bien podemos usar las opciones del TapBar tem que nos crear un cono y
un texto predeterminado, o usar las opciones del Bar tem que nos permitir configurar
un ttulo y una imagen personalizados.

CIBERTEC

CARRERA DE COMPUTACIN E INFORMTICA

DESARROLLO DE APLICACIONES MOVILES iOS

64

Antes de presionar Build, nos aseguramos de comentar el cdigo que habamos


realizado para el Navigation Controller. Ahora, podemos observar el TabBar con los
botones que nos llevarn a las diferentes pantallas.

Finalmente, ambas herramientas, el TabBar y el NavigationController, no son


excluyentes. Podemos poner un TabBar dentro del Navigation controller o un
Navigation dentro del TabBar, depende del desarrollador como organizarse para
utilizar las herramientas.

CARRERA DE COMPUTACIN E INFORMTICA

CIBERTEC

DESARROLLO DE APLICACIONES MOVILES II - iOS

65

Resumen
1. Los StoryBoards son los archivos que nos ayudarn a manejar el flujo de pantallas
y las herramientas que implementaremos en cada ViewController.
2. El ciclo de vida de un ViewController est definido por varias funciones que
disparan eventos en momentos cruciales del ViewController.
3. El Navigation Controller es una herramienta que nos facilita la transicin entre
pantallas de forma ordenada y presenta una barra superior donde podemos poner
tems personalizados.
4. El TabBar es una herramienta que nos facilita la transicin entre pantallas de forma
directa. Los tems inferiores son personalizables y no requiere de cdigo para su
implementacin.
5. Tanto el TabBar como el Navigation Controller, no son herramientas excluyentes.
Depende del desarrollador combinarlas de forma eficiente.
Pueden revisar los siguientes enlaces para ampliar los conceptos vistos en esta
unidad:

https://www.raywenderlich.com/113388/storyboards-tutorial-in-ios-9-part-1

https://developer.apple.com/library/ios/documentation/WindowsViews/Conceptu
al/ViewControllerCatalog/Chapters/TabBarControllers.html

https://developer.apple.com/library/ios/documentation/WindowsViews/Conceptu
al/ViewControllerCatalog/Chapters/NavigationControllers.html

CIBERTEC

CARRERA DE COMPUTACIN E INFORMTICA

DESARROLLO DE APLICACIONES MOVILES iOS

2.2

66

MANEJO DE ELEMENTOS EN PANTALLA

2.2.1 Componentes bsicos de interfaz de usuario (UILabel, UITextField,


UIImage, UIButton, etc.)
Existe una gran variedad de elementos para la interfaz de usuario, los ms bsicos
podemos encontrarlos en la librera del Cocoa, en Utilitarios en la parte baja. Para
poder agregarlos al ViewController, lo nico que debemos hacer es arrastrarlos desde
ah al ViewController y posicionarlos.

Todas estas herramientas deben ser referenciadas en nuestra Script del View
Controller. Para ello, habilitamos el Asistant Editor, se encuentra encima de la seccin
de Utilitarios y tiene la imagen de dos circunferencias interseccionndose. Cuando lo

CARRERA DE COMPUTACIN E INFORMTICA

CIBERTEC

DESARROLLO DE APLICACIONES MOVILES II - iOS

67

habilitamos, vemos que se abren dos ventanas. En una de ellas, ubicamos nuestro
StoryBoard y, en el otro, la Clase DemoViewController.

Para poner referencias de las herramientas rpidamente, seleccionamos y


presionando la tecla Control, arrastramos a la parte superior del cdigo, entonces se
crear una variable que contendr la referencia de la herramienta. Recordemos que
se abrir una interfaz para definir las propiedades de la variable.

Todas estas herramientas son completamente intuitivas, tanto su programacin como


su configuracin en el StoryBoard. Se debe tomar en cuenta que todas estn
referenciadas en el Storyboard y que, para poder ser modificadas, el ViewController
debe primero haber sido cargado en memoria. Estas herramientas se cargan por
defecto con la informacin que est configurada en el StoryBoard. Luego de ello, se
pueden programar segn convenga. Se deben realizar ejercicios en Clase con el
profesor para el uso de las herramientas.

CIBERTEC

CARRERA DE COMPUTACIN E INFORMTICA

DESARROLLO DE APLICACIONES MOVILES iOS

68

2.2.2 Configuracin de UIScrollViewController


Una de las herramientas ms usadas en el desarrollo de vistas en aplicaciones viene a
ser el Scroll. Herramienta que facilita poder poner en pantalla ms informacin que la
que alcanza en los lmites de la pantalla. El usuario puede deslizar su dedo en
pantalla de forma vertical u horizontal para visualizar el contenido completo de la
pantalla.
Para crear un ScrollView, debemos, primero, crear un ViewController, utilizaremos
nuestro DemoViewController. Para ello, eliminamos los objetos que estn dentro del
View principal. De la lista de herramientas del Cocoa, buscamos el Scroll View,
arrastramos la herramienta a nuestro DemoViewController.

Luego de poner el ScrollView, lo extendemos hasta llegar a los lmites del


DemoViewController.
Ahora, todas las herramientas que correspondan al
DemoViewController deben ir dentro del ScrollView, de tal forma que puedan
acumularse a lo largo y ancho del ScrollView, aun saliendo de los lmites visibles del
ViewController.
Ahora, necesitamos determinar los atributos del ScrollView.

CARRERA DE COMPUTACIN E INFORMTICA

CIBERTEC

DESARROLLO DE APLICACIONES MOVILES II - iOS

69

Estas propiedades nos ayudan a determinar la apariencia del ScrollView. Podemos


activar y desactivar los indicadores del Scroll, activar y desactivar la funcin del Scroll
y los rebotes del Scroll. Finalmente, para poder realizar un cdigo ms profundo,
procedemos a agregar el ScrollView a nuestro Script, de la misma forma que
agregamos cualquier otra herramienta.

Lo ms importante es el manejo de las medidas del frame y del contenido. Para esto,
debemos recordar que, si deseamos que el Scroll funcione, el contenido debe ser
mayor al frame en alguna de las dimensiones, height o width. Para que el contenido
se vea completamente dentro del ScrollView, debemos calcular matemticamente la
totalidad de elementos y definir el tamao del contenido dependiendo de ello.
Para poder indicar todo esto, poseemos dos variables dentro del ScrollView: el frame y
el contentsize. El frame nos dar el tamao y la ubicacin de la herramienta, mientras
que el contentsize nos dar las medidas para el alto y ancho del contenido.

CIBERTEC

CARRERA DE COMPUTACIN E INFORMTICA

DESARROLLO DE APLICACIONES MOVILES iOS

2.2.3 Configuracin
de
(UITableViewController)

70

tablas

con

celdas

dinmicas

Para poder crear una tabla, debemos, primero, tener un ViewController. Para ello,
usaremos nuestro DemoTableViewController.
Buscamos el TableView en las
herramientas del Cocoa y, luego de ello, procedemos a arrastrarlo al
DemoTableViewController. Hecho esto, agrandamos la tabla a la medida deseada; sin
embargo, notaremos que viene sin celdas. Para poder agregar una celda, debemos
buscar en las herramientas del Cocoa una llamada Table View Cell, la arrastramos y la
ponemos dentro de la Tabla.

CARRERA DE COMPUTACIN E INFORMTICA

CIBERTEC

DESARROLLO DE APLICACIONES MOVILES II - iOS

71

Ahora, debemos asegurarnos que, al configurar la tabla, podamos indicar qu celdas


deseamos poner en ella. Para ello, lo primero que hacemos es configurar la celda,
todas las celdas poseen un identificador; por ello, es importante que este tenga un
nombre totalmente diferente a las dems. Para poder programar una celda, debemos
asociarla a una Clase, que herede de UITableViewCell, de la misma forma que
asociamos los ViewControllers a una Clase. Entonces, procederemos a asignar un
identificador para la celda y crear una Clase para la celda.
El identificador podemos ubicarlo en la parte de utilitarios en la opcin de atributos.

CIBERTEC

CARRERA DE COMPUTACIN E INFORMTICA

DESARROLLO DE APLICACIONES MOVILES iOS

72

Podemos crear la Clase de la misma forma que creamos otros Script, indicando que
herede de la Clase TableViewCell.

Ahora que tenemos la Clase creada, procedemos a asociar nuestra celda.

CARRERA DE COMPUTACIN E INFORMTICA

CIBERTEC

DESARROLLO DE APLICACIONES MOVILES II - iOS

73

Ahora que tenemos la celda asociada a su Clase, debemos poder indicar, en la tabla,
qu informacin deseamos ponerle y cundo. Para ello, debemos indicarle a la tabla
dos atributos importantes: Delegate y DataSource. El Delegate indica qu Clase es la
encargada de manejar los eventos relacionados a la tabla; y el DataSource, qu
informacin debe ser presentada en la tabla.
Para poder asociar estos atributos a la Clase, seleccionamos el TableView. Nos
dirigimos a la seccin de Utilitarios y, en la pestaa de conecciones, podemos ver los
atributos Delegate y DataSource. Seleccionamos cada uno de los atributos y los
conectamos con el DemoTableViewController.

CIBERTEC

CARRERA DE COMPUTACIN E INFORMTICA

DESARROLLO DE APLICACIONES MOVILES iOS

74

Ahora que hemos asociado la tabla, debemos preparar nuestro Script para que pueda
proporcionar la informacin necesaria a la tabla. Primero que nada, procedemos a
heredar las Clases necesarias: UITableViewDelegate y UITableViewDataSource.
Ambas Clases, poseen protocolos con una gran variedad de funciones que nos
permiten implementar diversas funcionalidades a nuestra tabla. Un protocolo es un
grupo de propiedades y mtodos que conforman una tarea particular para una
funcionalidad. Estos pueden ser adoptados por Clases, estructuras o enumeradores
para proveer implementaciones adicionales a los delegados de una Clase.
Para ms informacin sobre protocolos, podemos leer la teora en la pgina de
desarrolladores de Apple en el siguiente link:
https://developer.apple.com/library/ios/documentation/Swift/Conceptual/Swift_Program
ming_Language/Protocols.html

Ahora, podemos notar que aparece un error al heredar estas funciones. Para
solucionarlo, debemos cumplir con el protocolo necesario para la herencia. Es
necesario que llamemos a un grupo de funciones para cada caso.
UITableViewDataSource:

Existen 4 funciones bsicas que debemos configurar para presentar la tabla con los
datos mnimos.

numberOfSections: Esta funcin nos indica cuntas secciones tendr


nuestra tabla.

numberOfRows: Esta funcin nos indica cuntas filas tendr cada seccin.

cellForRowAtIndexPath: Esta funcin nos indica qu celda debe ubicarse


en una determinada posicin. Para ello, primero utilizamos la celda que ya
hemos creado en el StoryBoard.

heightForRowAtIndexPath: Esta funcin nos indica el tamao de una


determinada celda.

Al finalizar, podemos ver las celdas y la tabla cuando presentemos el ViewController.

CARRERA DE COMPUTACIN E INFORMTICA

CIBERTEC

DESARROLLO DE APLICACIONES MOVILES II - iOS

75

UITableViewDelegate
Existe una funcin que debemos manejar, es la que se usa cuando una persona
realiza un clic en una celda determinada.

Esta funcin nos permite realizar un bloque de cdigo cuando una de las celdas sea
presionada.
Existen muchas ms funciones para el DataSource y el Delegate. Para hacer uso de
ellas, debemos investigar sobre las mismas y darles el uso adecuado.

2.2.4 Configuracin
de
colecciones
(UICollectionViewController)

con

tems

dinmicos

El manejo de las colecciones es altamente similar al de una tabla. Debemos tener un


ViewController, al cual anexamos una herramienta CollectionView. Tambin, debemos
anexar un CollectionViewCell con su propia Clase y, finalmente, asociar su
DataSource y Delegate con el DemoCollectionViewController.

CIBERTEC

CARRERA DE COMPUTACIN E INFORMTICA

DESARROLLO DE APLICACIONES MOVILES iOS

CARRERA DE COMPUTACIN E INFORMTICA

76

CIBERTEC

DESARROLLO DE APLICACIONES MOVILES II - iOS

CIBERTEC

77

CARRERA DE COMPUTACIN E INFORMTICA

DESARROLLO DE APLICACIONES MOVILES iOS

78

Una vez que hayamos configurado nuestro CollectionView, debemos dirigirnos al


Script. A diferencia del TableView, el Collection tiene un par de funciones que
debemos configurar. Primero, importamos las funciones UICollectionViewDataSource,
UICollectionViewDelegate y UICollectionViewDelegateFlowLayout.

Ahora, nos encargamos de poner las funciones del protocolo.


UICollectionViewDataSource

Estas funciones son iguales a las del TableView, la nica diferencia es la llamada de la
celda a poner.
UICollectionViewDelegateFlowLayout

La Clase UICollectionViewDelegateFlowLayout nos permite modificar las medidas de


los tems que se presentarn en el CollectionView y, con ello, los mrgenes que
manejarn un tem con otros.

CARRERA DE COMPUTACIN E INFORMTICA

CIBERTEC

DESARROLLO DE APLICACIONES MOVILES II - iOS

79

UICollectionViewDelegate

Finalmente, la funcin que nos permitir realizar un bloque de cdigo si es que se


presiona un tem de la coleccin.
Hecho todo esto, podemos visualizar el
CollectionView.

2.2.5 Configuracin de paginadores (UIPageViewController)


Los paginadores son herramientas que permiten a los usuarios deslizarse entre varios
ViewControllers. A diferencia del Navigation y el TabBar, estos no abarcan el tamao
total de la pantalla, abarcan un espacio definido por el desarrollador.
Para la creacin de un paginador, necesitamos de un PageViewController. Esta
herramienta la podemos ubicar en el listado de herramientas del Cocoa. Tambin,
necesitaremos de un ViewController que vaya a contener al PageView y, finalmente,
los ViewControllers que vayan dentro del PageView. Crearemos estas herramientas
en nuestro StoryBoard.

CIBERTEC

CARRERA DE COMPUTACIN E INFORMTICA

DESARROLLO DE APLICACIONES MOVILES iOS

80

En estos momentos, debemos posee un ViewController que contendr el PageView (el


de color blanco), un PageViewController que contendr nuestro grupo de
ViewControllers (el de color gris) y, finalmente, un grupo de ViewControllers que se
mostrarn en el paginador (los de color rojo, azul y verde).
Ahora, debemos crear un contenedor para el PageView dentro de nuestro
ViewController. De las herramientas del Cocoa, obtenemos un View y lo ponemos
dentro de nuestro ViewController, le asignamos las medidas que deseamos.

CARRERA DE COMPUTACIN E INFORMTICA

CIBERTEC

DESARROLLO DE APLICACIONES MOVILES II - iOS

81

Ahora, tenemos un contenedor para el PageView (el view amarillo). Lo que debemos
hacer, ahora, es otorgar los StoryBoards a los respectivos ViewControllers y al
PageView. Luego de ello, debemos crear los Scripts respectivos para cada uno de
ellos y asociarlos.

CIBERTEC

CARRERA DE COMPUTACIN E INFORMTICA

DESARROLLO DE APLICACIONES MOVILES iOS

82

Debemos tener 4 Scripts, uno para el MainViewController y otros 3 para cada


ViewController de diferente color, cada uno con un StoryBoardId. Adicionalmente, el
PageViewController, tambin, debe poseer un StoryBoardId.
Ahora, debemos proceder a implementar el Script para el funcionamiento de nuestro
PageView.
Lo primero que tenemos que hacer es jalar la referencia del
ViewContenedor (el amarillo) al script de nuestro MainViewController.

CARRERA DE COMPUTACIN E INFORMTICA

CIBERTEC

DESARROLLO DE APLICACIONES MOVILES II - iOS

83

Una vez hecho esto, creamos una variable que pueda contener nuestro
PageViewController. Luego de ello, llevamos la referencia del PageViewController del
StoryBoard por cdigo, le indicamos su DataSource, su Delegate, un tamao y una
posicin. Finalmente, lo introducimos al ViewContainer.

Ahora, es necesario heredar las dos Clases para el DataSource y el Delegate. Por
temas de orden, realizaremos esta parte de la herencia y protocolo en una extensin
de la Clase, en el mismo Script al final de la Clase MainViewController.

CIBERTEC

CARRERA DE COMPUTACIN E INFORMTICA

DESARROLLO DE APLICACIONES MOVILES iOS

84

Ahora, debemos crear dos funciones antes de empezar a implementar el protocolo


necesario. Primero, necesitamos de una funcin que nos permita indicarle al
PageView que ViewController corresponde a un determinado ndice. En esta funcin,
podemos realizar cualquier configuracin adicional que el ViewController necesite,
adems debemos conservar una referencia del ndice del ViewController. Esta
referencia la guardaremos en el Tag del View principal del ViewController. De esta
forma, cuando obtengamos informacin de un ViewController en el Delegate, podemos
identificarlo por este medio. Esta funcin ViewControllerAtIndex recibir como
parmetro un Index, de tipo Int y nos devolver un UIViewController.

CARRERA DE COMPUTACIN E INFORMTICA

CIBERTEC

DESARROLLO DE APLICACIONES MOVILES II - iOS

85

Lo que necesitamos, a continuacin, es la funcin que inicializa nuestro PageView, en


el cual indicaremos el ViewController que deseamos utilizar como primer
ViewController.

Esta funcin la llamaremos en el ViewDidLoad despus de haber agregado el


PageView dentro del ViewContainer.
Finalmente, cuando agregamos un
ViewController, el DataSource por defecto buscar generar los ViewControllers
laterales. Para ello, poseen dos funciones: ViewControllerBeforeViewController y
ViewControllerAfterViewController, las cuales deben ser configuradas segn las
necesidades de la aplicacin. A continuacin, se mostrar un ejemplo de ello.

Estas funciones revisan del ViewController actual cul es su ndice, del cual habamos
guardado previamente la referencia en su Tag. Luego de ello, segn el ndice, indican
cul debera ser el siguiente ViewController o el anterior.
Para cumplir con el protocolo del DataSource, hacen falta dos funciones, las cuales
devolveremos con un valor de 0.

CIBERTEC

CARRERA DE COMPUTACIN E INFORMTICA

DESARROLLO DE APLICACIONES MOVILES iOS

86

Finalmente, debemos conservar una referencia del ViewController que se est


mostrando en todo momento.
Para ello, vamos a utilizar el mtodo
DidFinishAnimating, el cual pertenece al Delegate y con el cual obtendremos el ndice,
el ViewController que se est mostrando en el momento, y almacenaremos ese ndice
como referencia en el Tag del PageView.

Finalmente, para poder ubicar el PageControl (los puntos inferiores que indican el
avance del PageView), podemos hacerlo por medio de los mtodo del DataSource o
preferible por medio de la creacin de un PageControl. Esto debe ser indicado
durante las horas de Clase por el profesor.

2.2.6 Creacin y manejo de CustomViews


De la misma forma, como se crean los ViewControllers, tambin, podemos crear Views
pre fabricados para su utilizacin. Estos son los CustomViews. Estos pueden ser
configurados y luego llamados por cdigo segn nuestra conveniencia. Para crear un
CustomView, necesitamos crear un archivo .xib. Para ello, vamos a File / New /File y
se nos presentar una ventana donde podremos seleccionar la opcin UserInterface y
escogeremos la opcin View.

CARRERA DE COMPUTACIN E INFORMTICA

CIBERTEC

DESARROLLO DE APLICACIONES MOVILES II - iOS

87

Para poder indicar el tamao del View, nos dirigimos a la opcin de atributos en la
seccin de Utilitarios. En estos, ubicamos la opcin size y la configuramos como
FreeForm.

Una vez hecho esto, podemos cambiar el tamao del CustomView a una medida ms
conveniente para trabajarlo. Para ello, vamos al Size Inspector y, en la opcin Width y
Height, indicamos las medidas convenientes.

CIBERTEC

CARRERA DE COMPUTACIN E INFORMTICA

DESARROLLO DE APLICACIONES MOVILES iOS

88

Hecho esto, podemos modificar el View de la misma forma como si se tratase de un


ViewController. Podemos agregar cualquier herramienta del Cocoa y configurarlas.
Finalmente, podemos crear un Script para el View que herede de UIView y, en este,
hacer referencia de las herramientas del Cocoa y trabajarlas igual que de si fuera un
UIViewController.
Finalmente, solo nos queda referenciar y agregar el Custom View por cdigo donde lo
necesitemos. Para ello, se utiliza el siguiente cdigo.

CARRERA DE COMPUTACIN E INFORMTICA

CIBERTEC

DESARROLLO DE APLICACIONES MOVILES II - iOS

89

Resumen
1. El UIScrollView nos permite mostrar informacin al usuario con una herramienta
que permite deslizar informacin ms all de los lmites de la pantalla.
2. Las tablas nos permiten mostrar al usuario informacin ordenada en forma, solo es
posible configurar la altura de la celda ms no las otras dimensiones.
3. Las colecciones nos permiten mostrar al usuario una serie de tems con un orden
definido por el desarrollador. Las dimensiones de los tems son configurables.
4. El PageView nos permite mostrar al usuario un grupo de ViewControllers al
usuario, los cuales podr deslizar uno tras otro sin abarcar necesariamente el total
de la pantalla.
5. Los CustomViews nos permiten configurar Views para luego ser llamados por
cdigo segn la conveniencia del desarrollador.
Pueden revisar los siguientes enlaces para ampliar los conceptos vistos en esta
unidad:

https://developer.apple.com/library/ios/documentation/UIKit/Reference/UIViewC
ontroller_Class/index.html

https://developer.apple.com/library/ios/documentation/UIKit/Reference/UIPageV
iewControllerClassReferenceClassRef/index.html

https://developer.apple.com/library/ios/documentation/UIKit/Reference/UITable
View_Class/

https://developer.apple.com

CIBERTEC

CARRERA DE COMPUTACIN E INFORMTICA

DESARROLLO DE APLICACIONES MOVILES iOS

2.3

90

CONSTRAINTS

2.3.1 Fundamentos sobre Constrains


Los Constraints dependen totalmente del sistema de AutoLayout, el cual se encarga
de calcular dinmicamente el tamao para todas las vistas internas segn las medidas
dadas por los Constraints. Por ello, el uso de los Constraints permite conservar las
medidas proporcionales de los Views para que sin importar el tamao de la pantalla o
la resolucin de la misma se pueda conservar el diseo en los diferentes dispositivos.
El sistema de AutoLayout se activa siempre que se d un cambio externo sobre los
ViewControllers. Estos cambios se activan cuando sucede uno de los siguientes
eventos:

El usuario modifica el tamao de la pantalla. Esto se da en aplicaciones de


escritorio.

El usuario entra o sale de vistas divididas en un Ipad.

El dispositivo rota.

La vista de llamada entrante o de grabado de voz se activan.

Cuando deseamos manejar diferentes tamaos de pantalla o de resolucin.

El AutoLayout, tambin, se activa cuando uno realiza un cambio interno sobre los
ViewControllers. Estos cambios se activan cuando sucede uno de los siguientes
eventos:

El contenido mostrado por la aplicacin cambia.

Cuando la aplicacin soporta configuracin internacionalizada.

Cuando la aplicacin soporta Estilos Dinmicos.

2.3.2 Creacin de Constraints por StoryBoard


Para poder crear un Constraint, por medio del Storyboard, existen dos medios:
seleccionamos nuestro View al que deseamos colocarle un Constrain y presionamos la
segunda opcin en la parte inferior de la interfaz del StoryBoard. Esto nos abrir un
panel con opciones para colocar diferentes Constraints.

CARRERA DE COMPUTACIN E INFORMTICA

CIBERTEC

DESARROLLO DE APLICACIONES MOVILES II - iOS

91

En esta ventana, encontramos una gran variedad de Constrains que podemos


implementar en el View seleccionado. Adicionalmente, tenemos otra forma de
implementar un Constrain: podemos seleccionar un View y establecer un Constraint
con respecto a otro View. Para realizar esto, debemos seleccionar el View y
presionando la tecla Control arrastramos al View con el que deseamos realizar un
Constraint. Aparecer un panel que nos permitir crear un Constraint.

Por otro lado, si deseamos crear un Constraint del View consigo mismo, debemos
arrastrar el View a s mismo presionando la tecla Control, mostrando otro panel que
permitir agregar otro grupo de Constraints.

Ahora que hemos agregado los Constraints en nuestros Views, podemos configurarlos
en el panel de Utilitarios. Seleccionamos el View respectivo, vamos a la seccin de
Utilitarios y, en el Size Inspecter, podemos encontrar los Constraints relacionados al
View seleccionado. Hacemos doble clic en el Constraint y abriremos una interfaz para
poder modificarlo.

CIBERTEC

CARRERA DE COMPUTACIN E INFORMTICA

DESARROLLO DE APLICACIONES MOVILES iOS

92

De esta forma, podemos crear y configurar Constraints por medio del StoryBoard.

2.3.3 Creacin de Constrains por cdigo


Los Constraints creados por cdigo tienen la misma funcionalidad que los creados por
medio del StoryBoard. Estos son creados dentro de variables que los contengan y son
agregados a los Views apilados uno sobre otros. Se debe mantener la referencia de
estos para poder modificarlos en tiempo de ejecucin y, dependiendo del tipo de
Constaint, pueden variar los campos a modificar.
El siguiente es un ejemplo de Constraints agregados a un UIView creado por cdigo.

CARRERA DE COMPUTACIN E INFORMTICA

CIBERTEC

DESARROLLO DE APLICACIONES MOVILES II - iOS

93

2.3.4 Manejo de Constrains en tiempo de ejecucin


Cambiar un Constraint en tiempo de ejecucin, requiere tener una referencia del
Constraint por cdigo. Si has creado el Constraint por cdigo, entonces ya se posee
una variable con su referencia; en caso contrario, si la hemos creado por medio del
StoryBoard, debemos referenciar el Constraint de la misma forma que referenciamos
cualquier otra herramienta al Script, presionando la tecla Control la arrastramos al
Script.

CIBERTEC

CARRERA DE COMPUTACIN E INFORMTICA

DESARROLLO DE APLICACIONES MOVILES iOS

94

Si bien al tener nuestra referencia del Constraint nos permite cambiar el valor del
Constraint en cualquier momento, existe un momento en el ciclo de vida del
ViewController en que se deben reasignar los Constraints de ser necesario. La
funcin ViewDidLayoutSubviews se activa cada vez que se realiza un evento que
afecte al ViewController. Estos eventos fueron explicados con anterioridad. En esta
funcin, podemos reasignar los Constraints y configurarlos segn sea necesario.

CARRERA DE COMPUTACIN E INFORMTICA

CIBERTEC

DESARROLLO DE APLICACIONES MOVILES II - iOS

95

Resumen
1. El AutoLayout es el sistema que se encarga de reasignar las medidas del View de
forma dinmica por medio de los Constraints.
2. Los Constraints pueden ser creados por medio del StoryBoard de formas
diferentes. Todas estas permiten que se relacione un View con su contenedor, con
otro View o consigo mismo.
3. Los Constraints pueden ser creados por medio de cdigo, ser referenciados a una
variable y de esta forma agregados a un View.
4. Los Constraints pueden ser modificados por cdigo en tiempo de ejecucin,
siempre que se tenga una referencia al Constraint en una variable.
5. El evento del ciclo de vida del ViewController, que es llamado cuando un
ViewController es afectado por eventos internos o externos, se llama
ViewDidLayoutSubviews y permite que se vuelvan a configurar los Constraints.

Pueden revisar los siguientes enlaces para ampliar los conceptos vistos en esta
unidad:

https://developer.apple.com/library/ios/documentation/UserExperience/Concept
ual/AutolayoutPG/

https://developer.apple.com

CIBERTEC

CARRERA DE COMPUTACIN E INFORMTICA

DESARROLLO DE APLICACIONES MOVILES iOS

CARRERA DE COMPUTACIN E INFORMTICA

96

CIBERTEC

DESARROLLO DE APLICACIONES MOVILES II - iOS

97

UNIDAD

3
ACCESO A DATOS
LOGRO DE LA UNIDAD DE APRENDIZAJE
Al trmino de la unidad, el alumno podr acceder a servicios REST, manejar archivos
JSON, almacenar informacin en el dispositivo y acceder a la informacin de forma
ordenada.

TEMARIO
3.1 Tema 6
3.1.1
3.1.2
3.1.3

:
:
:
:

Implementacin de un API y Servicios Rest


Creacin de un Rest Api Manager
Consumo de servicios Rest
Envo y recepcin de Datos JSON

3.2 Tema 7
3.2.1
3.2.2
3.2.3
3.2.4

:
:
:
:
:

Almacenamiento de Datos
Implementacin de UserDefaults
Implementacin de Base de datos en Core Data
Implementacin del KeyChain para datos protegidos
Consumo de datos guardados

ACTIVIDADES PROPUESTAS

Los alumnos procedern a crear una aplicacin empleando StoryBoars.


Los alumnos crearn un flujo de pantallas con diferentes ViewControllers.
Los alumnos implementaran tablas y colecciones en su proyecto.
Los alumnos implementan el Navigation Controller y el TabBar para su
proyecto.
Los alumnos implementaran Constrians para su proyecto.

CIBERTEC

CARRERA DE COMPUTACIN E INFORMTICA

DESARROLLO DE APLICACIONES MOVILES iOS

CARRERA DE COMPUTACIN E INFORMTICA

98

CIBERTEC

DESARROLLO DE APLICACIONES MOVILES II - iOS

99

3.1 IMPLEMENTACIN DE UN API Y SERVICIOS REST

3.1.1 Creacin de un Rest Api Manager


Para la creacin de nuestro Rest Api Manager, vamos a hacer uso de una librera Pod
muy conocida y gratuita, Alamofire. Para ello, creamos un nuevo proyecto. En base a
ese proyecto, crearemos nuestro WorkSpace usando nuestro Terminal y habiendo ya
instalado nuestro CocoaPods. En nuestro archivo Podfile, agregamos nuestra librera
pod 'Alamofire'. Luego de ello, haremos un pod install al podfile y creamos, con ello, la
librera en nuestro WorkSpace.

CIBERTEC

CARRERA DE COMPUTACIN E INFORMTICA

DESARROLLO DE APLICACIONES MOVILES iOS

100

Ahora que tenemos nuestro WorkSpace con el Pod de Alamofire, necesitamos crear
un Script que nos permita manejar las llamadas Rest. Creamos un archivo Swift con
nombre NetworkManager. En este, crearemos una Clase NetworkManager y, dentro
de ella, una funcin con la cual podremos hacer llamado a un servicio Rest.

CARRERA DE COMPUTACIN E INFORMTICA

CIBERTEC

DESARROLLO DE APLICACIONES MOVILES II - iOS

101

Esta funcin requiere de un CompletionBlock, el cual definimos fuera de la Clase.


Luego, tenemos una variable String que conservar la raz de la URL de los servicios
Rest a llamar. Podemos ver que se crea una variable esttica que nos referencia a la
Clase para hacer llamados de la funcin en cualquier parte del proyecto y, finalmente,
el mtodo solicita entre sus parmetros el resto de la URL del servicio, los parmetros
del servicio llamado, y el CompletionBlock que se llamar al regreso del servicio.

3.1.2 Consumo de servicios Rest


Para realizar el consumo de un Api Rest, debemos primero en nuestro cdigo definir
en qu parte deseamos realizar el consumo, sea bien presionando un botn, llenando
una tabla o iniciando un ViewController. El siguiente cdigo muestra una forma en que
podramos llamar a nuestra funcin creada previamente.

En el ejemplo, vemos que la primera variable a enviar es la URL que concatena con la
URL base que tenemos registrada en la Clase esttica. Como parmetro, deberamos
enviar un Dictionary; sin embargo, esto lo hacemos solo si es necesario. Esta opcin
tambin acepta un nulo. Finalmente, el CompletionBlock est definido por una
respuesta manejada por dos variables: el boleano finished y el diccionario result.
En caso se haya logrado finalizar con xito el llamado al Api, entonces se llamar al
CompletionBlock y el valor del booleano finished determinar si se complet o no con
xito. De ser exitoso, vendr con valor true; en caso contrario, vendr con valor
false. Luego de ello, podemos procesar la informacin como mejor creamos
conveniente. Tomemos en cuenta que la informacin relevante, que nos devuelva el
servicio, se encuentra en el diccionario result, el cual procesaremos en nuestra
aplicacin.

3.1.3 Envo y recepcin de Datos JSON


La librera Pod Alamofire nos hace el trabajo de encriptar y desencriptar la informacin
que nos llega en formato JSON y la convierte en un amable Diccionario fcil de leer
para nosotros. Sin embargo, es necesario tener conocimiento de la estructura de los
mismos.
Veamos el caso del iTunes, este posee un servicio Rest gratuito, el cual se consume
nicamente por medio de una URL. Esta posee una estructura raz seguida de un
comando de bsqueda.
La URL raz:

A esta URL raz, debemos agregarle un comando de bsqueda. Para fines didcticos,
utilizaremos el siguiente comando:

CIBERTEC

CARRERA DE COMPUTACIN E INFORMTICA

DESARROLLO DE APLICACIONES MOVILES iOS

102

La siguiente URL har un llamado al Api Rest y nos devolver las bsquedas en el
iTunes. Estas sern hechas en el store de Per con la palabra britney.

La respuesta nos traer un diccionario con 2 valores: uno es resultCount, que nos
indica la cantidad de resultados que se encontraron; y result, que viene a ser un
arreglo que contiene varios diccionarios, cada diccionario con la informacin de cada
cancin encontrada con dichos parmetros.
Ahora, analicemos a detalle los parmetros enviados por el servicio de iTunes.

CARRERA DE COMPUTACIN E INFORMTICA

CIBERTEC

DESARROLLO DE APLICACIONES MOVILES II - iOS

103

Este nodo representa a la informacin de una cancin determinada. El leer la


informacin que viene del servicio antes de empezar a procesarla es importante, de
esta forma sabremos cmo castear correctamente los datos. Primero, vemos, en el
diccionario, aquellas palabras que estn de color rojo que son las Keys para cada uno
de los atributos que nos envan. Luego, podemos ver que hay datos que son valores
Int y otros que son valores String. Hay datos tipo float que deben ser identificados,
son los nmeros con un valor decimal. Tambin, podemos visualizar valores true
que representan booleanos.
Gran parte de los datos son direcciones URL que apuntan a imgenes para mostrar.
Estas pueden ser mostradas por medio de una imagen web. La mayor consideracin
que se debe tomar es que es posible que los arreglos vengan vacos; por ello, deben
ser casteados primero como arreglos simples y, luego, con ese dato, inicializar
cualquier otro tipo de arreglo que se necesite.

CIBERTEC

CARRERA DE COMPUTACIN E INFORMTICA

DESARROLLO DE APLICACIONES MOVILES iOS

104

Resumen
1. Alamofire es la librera Pod que nos ayudara a realizar el consumo de servicios
Rest.
2. La librera alamofire se encarga de encriptar y desencriptar la data enviada y nos la
otorga en formato JSON.
3. Es importante que se posea una funcin esttica que nos permita consumir los
servicios Rest desde cualquier parte de nuestra aplicacin.
4. Los servicios Rest, el JSON otorgado por la librera, se otorgara en formato
Dictionary, el cual debe ser procesado por el usuario para obtener la data y
presentarla.

Pueden revisar los siguientes enlaces para ampliar los conceptos vistos en esta
unidad:

https://github.com/Alamofire/Alamofire

https://www.raywenderlich.com/121540/alamofire-tutorial-getting-started

https://developer.apple.com

CARRERA DE COMPUTACIN E INFORMTICA

CIBERTEC

DESARROLLO DE APLICACIONES MOVILES II - iOS

105

3.2 ALMACENAMIENTO DE DATOS

3.2.1 Implementacin de UserDefaults


La Clase NSUserDefaults provee una interfaz pragmtica para interacutar con las
preferencias de la aplicacin. Podemos pensar en ella como un diccionario para
almacenar los datos de configuracin de la aplicacin. Es comn utilizar este
diccionario para guardar informacin del usuario que se encuentra utilizando la
aplicacin. Esta data se conserva despus de que hayamos cerrado la aplicacin,
pero se borra si eliminamos la aplicacin del dispositivo.
La informacin debe ser guardada de la misma forma como si se tratase de un
diccionario, usando una key que nos permita reconocer la data que deseamos guardar
y al obtenerla pasearla de forma adecuada. Si no indicamos el tipo de dato correcto,
entonces la aplicacin se caer.
Para poder guardar informacin en el
NSUserDefaults, usaremos el siguiente cdigo:

En este caso, vamos a guardar un String (dato a guardar) bajo la key the_key. El
dato puede ser cualquier otro, recordemos que este diccionario acepta cualquier tipo
de objeto. Es importante sincronizar la data luego de haber hecho algn cambio en el
diccionario del NSUserDefaults. Como se trata de una Clase esttica, podemos
acceder desde cualquier parte de nuestra aplicacin para guardar los datos que
necesitemos. A continuacin, se muestra un ejemplo de cmo obtener informacin del
NSUserDefault.

Ahora que hemos obtenido el dato del NSUserDefaults, es muy importante saber qu
tipo de dato estamos obteniendo, para poder castearlo adecuadamente y para que no
nos traiga problemas al implementarlo.

3.2.2 Implementacin de Base de Datos en Core Data


Para la implementacin de Base de datos en Core Data, haremos uso de una librera
Pod que nos facilitar el manejo de datos de la tabla. Para ello, primero, creamos una
aplicacin que indique el uso de Core Data. Al momento de poner el identificador de la
aplicacin y el nombre, seleccionamos, en la parte inferior, la opcin Use Core Data.

CIBERTEC

CARRERA DE COMPUTACIN E INFORMTICA

DESARROLLO DE APLICACIONES MOVILES iOS

106

Luego de crear la aplicacin, procedemos a crear el Podfile para tener nuestro


WorkSpace, ponemos el nombre de la librera que utilizaremos en nuestro Podfile y,
por medio del Terminal, realizaremos el PodInstall. MagicalRecord es una librera
gratuita y que nos facilitar el acceso al uso de base de datos en los proyectos de iOS.

Hecho esto, podemos visualizar, en nuestro proyecto, un archivo que nos permitir la
creacin de tablas y relacin entre ellas. En este ejemplo, solo realizaremos la
creacin de una tabla simple y el almacenamiento de datos. Busquemos en nuestro
proyecto el archivo .xcdatamodeid.

CARRERA DE COMPUTACIN E INFORMTICA

CIBERTEC

DESARROLLO DE APLICACIONES MOVILES II - iOS

107

Este archivo nos mostrar una interfaz para la creacin de una tabla. Presionamos la
opcin Add Entity y veremos cmo se agrega una entidad en la parte superior
derecha. Luego de ello, podremos editar el nombre de la entidad hacindole doble
clic.

CIBERTEC

CARRERA DE COMPUTACIN E INFORMTICA

DESARROLLO DE APLICACIONES MOVILES iOS

108

Ahora que tenemos nuestra entidad DemoTable, procedemos a agregar un par de


atributos. En este caso, simularemos los datos de un usuario.

CARRERA DE COMPUTACIN E INFORMTICA

CIBERTEC

DESARROLLO DE APLICACIONES MOVILES II - iOS

109

Ahora que tenemos nuestros atributos creados, procedemos a crear un objeto que
maneje nuestra entidad por medio de cdigo. Para ello, en la barra de herramientas,
escogemos la opcin Editor / Create NSManageObject Subclass.

CIBERTEC

CARRERA DE COMPUTACIN E INFORMTICA

DESARROLLO DE APLICACIONES MOVILES iOS

110

Una vez que hemos creado los Script, previamente escogiendo la entidad que
deseamos enlazar a los Scripts, podemos llamar la referencia a ellos por medio de la
Clase creada.

Ahora, debemos crear una Clase que nos permita acceder a la base de datos, guardar
datos y poder acceder a nuestros datos guardados. Creamos un archivo Swift, este lo
generamos desde a File / New / File. Importamos la librera MagicaRecord y creamos
la Clase DataBaseManager.

CARRERA DE COMPUTACIN E INFORMTICA

CIBERTEC

DESARROLLO DE APLICACIONES MOVILES II - iOS

111

Esta Clase tiene su propia referencia esttica para poder ingresar a ella desde
cualquier parte de nuestro proyecto. Ahora, crearemos una funcin que nos permita
crear una entidad y agregarla a nuestra base de datos.

La funcin CreateEntity nos permite crear una nueva entidad. Esta se inicializa con
valores predeterminados y nos devuelve dicha entidad para utilizarla como
consideremos. Ahora, cuando creamos una entidad, esta se agrega a la base de
datos; sin embargo, para guardar los cambios realizados a la tabla, debemos crear
una funcin que nos permita guardar dichos cambios.

Esta funcin nos permite guardar los cambios realizados en la tabla de la base de
datos. Lo siguiente que deseamos es crear una funcin que nos devuelva las
entidades de la tabla.

Estas 3 funciones nos permiten obtener entidades de la base de datos, la primera nos
devuelve todas las entidades dentro de la tabla DemoTable; la segunda, la primera
entidad encontrada con un valor definido en un atributo; y la ltima, un arreglo de
entidades con un valor definido en un atributo.
Finalmente, necesitamos un par de funciones para eliminar entidades de la tabla,

CIBERTEC

CARRERA DE COMPUTACIN E INFORMTICA

DESARROLLO DE APLICACIONES MOVILES iOS

112

Estas dos ltimas funciones nos permitirn eliminar entidades de la tabla, la primera
nos permite borrar una entidad mientras que la segunda borra todas las entidades de
la tabla. Todas estas funciones son accesibles desde cualquier parte del proyecto,
debido a que se encuentran en una referencia esttica, y depende del orden que
maneje el desarrollador para hacer buen uso de ellas.

3.2.3 Implementacin del KeyChain para datos protegidos


El KeyChain es una herramienta para el guardado de datos privados del usuario.
Estos se guardan en el dispositivo y permanecen en el dispositivo, aun despus de
eliminar la aplicacin. Son datos como claves, correo electrnico, id de Facebook, etc.
Para hacer uso del KeyChain, vamos a utilizar la librera, la cargamos con nuestro
Podfile. Esta librera facilita, en gran medida, el uso de nuestro KeyChain. Se encarga
de cargar y descargar la data por nosotros por medio de simples comandos, solo con
importar la librera en la Clase deseada.

Para la importacin de esta librera, debemos tomar en cuenta que la versin 3.0 es
funcional con Swift 2.2 y la versin 4.0 es funcional con Swift 3.0. Se debe tomar en
cuenta esto para hacer la exportacin adecuada.

CARRERA DE COMPUTACIN E INFORMTICA

CIBERTEC

DESARROLLO DE APLICACIONES MOVILES II - iOS

113

Ahora que tenemos la librera KeychainSwift, procedemos a importarla en la Clase que


vamos a usar. Luego de ello, procedemos a crear una variable tipo KeyChainSwift, la
cual usaremos como instancia de la Clase para guardar y obtener datos del KeyChain.

Ahora, debemos recordar que los valores guardados en el KeyChain deben ser String,
Bool o NSData, y podemos utilizar estas funciones para administrar estos valores
guardados.

La primera funcin nos permite guardar un dato especfico bajo una llave en el
KeyChain. La segunda funcin nos permite obtener un dato especfico bajo una llave
tomando en cuenta que se conoce el tipo de dato para castearlo. Finalmente, la ltima
funcin borra todas las variables guardadas en el KeyChain. Utilizar estas funciones
adecuadamente permite el uso correcto de los datos del KeyChain.

CIBERTEC

CARRERA DE COMPUTACIN E INFORMTICA

DESARROLLO DE APLICACIONES MOVILES iOS

114

Resumen
1. El NSUserDefaults es un sistema de guardado de datos de las aplicaciones,
generalmente usado para informacin de configuracin de la aplicacin.
2. Para el uso de la base de datos en Core Data, utilizamos la librera MagicalRecord
que nos facilitar el almacenar y obtener data de nuestras tablas.
3. El KeyChain es un sistema de guardado de datos protegidos en nuestro
dispositivo. Estos datos permanecen en el dispositivo aun despus de eliminar la
aplicacin; asimismo, utilizamos la librera KeyChainSwift para facilitar su
utilizacin.

Pueden revisar los siguientes enlaces para ampliar los conceptos vistos en esta
unidad:

https://github.com/magicalpanda/MagicalRecord

https://github.com/marketplacer/keychain-swift

https://developer.apple.com

CARRERA DE COMPUTACIN E INFORMTICA

CIBERTEC

Você também pode gostar