Bueno en la Primera Leccion aprendimos un poco de teoria. En la Segunda Leccion nos metimos directamente a ver un poco de codigo y creamos nuestra primera aplicacion Hello World! Ahora vamos a comenzar a trabajar en un proyecto para crear una aplicación realmente util. Se trata de una aplicación de tipo Twitter, o Twitter-esca. Tenemos una base muy sencilla hasta ahora pero con esta leccion agregaremos un par de piedras angulares.

Hasta ahora hemos visto que las aplicaciones pueden ser para distintos iOS devices:

1) iPhone (con pantalla normal de 320 x 480 y con pantalla retina)
2) iPad (con pantalla 1024 x 768)
3) Universal (una aplicación donde se crean imágenes para ambos y depende del dispositivo donde corre la aplicación)

También aprendimos que una aplicación consta de archivos .h/.m con los siguientes por default:

1) AppDelegate Class que es la que basicamente maneja la logica macro. En nuestro caso llama a MainWindow.xib
2) MainWindow es un archivo xib, el cual es configurable graficamente, osea, WYSIWYG.
3) AppDelegate Class consta principalmente del metodo appDidFinishLaunching que llama la ventana principal del programa.
4) AppDelegate Class puede contener instance variables, ivars, que usamos para almacenar contenido.

Ahora veremos los siguientes temas:

1) AppDelegate Class puede llamar otras ventanas, no solo la MainWindow.xib.
2) Podemos crear mas ventanas xib’s asociadas con su respectiva .h/.m Class y usarlas en lugar del MainWinow.
3) Cada clase que creamos tiene sus ivars y las podemos convertir en properties.
4) Los ivars sirven como objetos para ser usados en los distintos metodos de la clase.
5) Podemos mandar mensajes entre objetos para realizar ciertas funciones.

Veamos un poco la etapa de diseño donde determinamos que es lo que la app hará!

1. Layout. Aqui esta un layout sencillo de esta aplicación. Siempre es importante disenarlo para visualizar como funcionara y aclarar las ideas.

Sketched layout
En este diseno podemos ver que la aplicacion inicia con una ventana y la imagen de bienvenido. Al inicio la app debe realizar tareas basicas de cargado y al terminar esto nos presentara la ventana principal. En nuestro caso la ventana principal se llama My Users Screen. Un tap a cualquier usuario nos llevara al Detail Screen. Finalmente, si mira en la parte inferior de My Users Screen, vera 2 tabs; My Users & PublicTimeline. My Users tab esta sombreada para representar que esta seleccionada. Si el usuario hace tap en PublicTimeline, la app lo llevara al tab del Public Timeline de los usuarios (esta es nuestra Public Screen).

2. Tipo de App. Como pueden ver, esta aplicacion sera un par de tabs cada uno con su propio contenido. Este es un diseno muy comun y se llama y es controlado por un Tab Bar Controller. Un TabBar Controller es un controlador que administra varios tabs. (En un curso completo revisaremos esos temas. Por mientras puede ver el curso en ingles aqui). Cada vista en la pantalla se llama un view y debe tener un controlador. La view sencilla o mas basica es administrada por un UIViewController. Una view de tipo lista de celdas es administrada por una UITableViewController. En nuestro caso una serie de UIViewControllers estaran encaspsulados en los tabs y por ende deberan ser administrados por un UITabBarController.

Un Table View Controller es un controlador de una list de celdas, cada una con su propia informacion. En nuestro case, para el My Users Screen, esa information sera el nombre de usuario de Twitter y su foto de perfil. Cuando hagamos tap sobre una celda de usuario nos llevara al Detail Screen. Este detail screen contiene los tweets individuales del usuario que seleccionamos en la pantalla anterior. La Public Screen tambien es una tabla con datos de usuarios publicos. Para hacer la aplicación facil de navegar hemos dividido la aplicación en 2 tabs: una privada y una publica. La tab privada contiene los usuarios que nos interesan y la tab publica contendrá todos los usuarios de Twitter, conocido como el Public Timeline.

3. Logica del App. Como sera el cerebro de esta aplicación?

• La app obviamente tendra que conectarse a Twitter via su API.
• La app debera mantener un almacén para los usuarios que seguimos y los del timeline publico. Asi cuando el usuario haga tap sobre la celda con cualquier nombre, sea llevado al listado de los tweets respectivos.
• La app también deberá poder escribir tweets.

4. Avanzado. Hay ciertos aspectos que no vamos a cubrir en este tutorial inicial porque seran muy facil de agregarlos mas adelante. Sin embargo hacen que una app sea muy amigable, lo cual para Apple es importante. Tan importante que tienen un Human Interface Guidelines PDF el cual detalla el tipo de facilidades que debe tener una app para ser aprobada. En el caso de nuestra aplicación de Twitter:

• Vamos a hard-code la cuenta de usuario de Twitter. Porque? Porque no hacerlo asi requeriria de atravesar un proceso de ingreso y verificacion de usuario que es un poco mas avanzado que nuestro nivel en este momento. Hard-code el usuario quiere decir que la aplicación posteara tweets usando el usuario que dejemos fijo dentro del código de la app en lugar de permitir que el usuario use su propia cuenta.
• Vamos a hard-code los usuarios a seguir. Porque? Por la misma razón mencionada arriba. Mas adelante cubriremos temas como el uso de botones y controles que permitirán hacer eso.
• Obviamente excluiremos el proceso de ingreso a la cuenta. Porque? Ademas de la misma razon de arriba, los APIs de servicios como Twitter & Facebook evolucionan muy rapido y ahorita acaban de hacer cambios muy fuertes a esos procesos por razones de privacidad y seguridad. Por los momentos concentremonos en lo básico.

Ok ya tenemos nuestro diseno propuesto y la idea basica del tipo de proyecto que sera. Abramos XCode y comencemos!
———-

———-
Como pueden ver en el video, decidimos entre una aplicacion Window Based o View Based. Seleccionamos la Window Based porque es la mas basica que nos da una ventana vacia como punto de partida. Tambien notaran que las aplicaciones Window Based se pueden crear especificamente para iPhone, iPad o Universal. Universal significa que creamos el codigo para ambos dispositivos en un solo proyecto y la aplicación funciona para ambos.

Seleccionamos la Window Based porque como dijimos es el punto de partida básico para una aplicación. Esto nos da la libertad de agregar cualquier elemento en esta ventana. Si recuerdan, nuestra aplicación tiene como base 1 UITabBarViewController con 3 UIViews. Empezar desde cero únicamente con una ventana nos dará la flexibilidad de simplemente agregar el TabBarVC y luego asignar sus UIViews.

De haber escogido una View Based app; ya exisitiria una view adentro de la mainWindow como punto de partida. Eso significa que hubieramos tenido que borrar todo el codigo correspondiente para poder crear el TabBarVC como el punto de partida.

En este momento deberíamos tener dentro de nuestro proyecto, los siguientes archivos:

- Un AppDelegate (h & m)

- Una MainWindow.xib

Recuerden que todo los elementos visuales que creamos en XCode lo podemos codificar programaticamente o en InterfaceBuilder (IB). Tipicamente se combinan las dos metodologias por facilidad. En nuestro caso el AppDelegate contiene un metodo llamado appDidFinishLoading que es donde todo comienza.

Concepto.

Queremos crear un TabBarVC y poblar sus taba con los UIViews necesarios. UITabBarController es una clase como cualquier otra que se usa para crear objetos de ese tipo. Las clases son los planos para crear objetos. Asi que vamos a crear un objeto de este tipo alocando e iniciando una instancia de esa clase.

UITabBarController

También necesitamos agregar unos UIViews a cada tab del TabBarVC que recién creamos así que necesitamos alocar e iniciar instancias de esos objetos usando el llamado a sus clases respectivas. Asi cuando el usuario haga tap sobre el primer tab, TabBarVC llamara el primer UIVC. Cuando el usuario haga tap sobre el segundo tab, TabBarVC llamara el segundo UIVC.

————-

Osea que los pasos son:

1. Crear un objeto contenedor (TabBarVC usado como plano constructivo la clase UITabBarController)

2. Crear 3 objetos para los taba (UIViews usando como plano constructivo la clase UIViewController)

3. Agregar los 3 objetos al contenedor y decirle a la ventana principal que muestre el view. Como veremos, tendremos que agregar el view del TabBarVC al view the de ventana para hacerlo funcionar.

Codigo.

En su AppDelegate.m file, dentro de applicationDidFinishLaunchingWithOptions agregue:

// Crear el contenedor

UITabBarController *tabBarController = [[UITabBarController alloc] init];

// Crear 2 child views

UIViewController *usersArray = [[UIViewController alloc] init];

UIViewController *tweetView = [[UIViewController alloc]init];

// popular el array para tabBarController

NSArray *vcArray = [NSArray arrayWithObjects:usersArray,tweetView, nil];

// agregar los children al contenedor

[tabBarController setViewControllers:vcArray];

// Agregar el view controller’s view a la window & display

[window addSubview:tabBarController.view];

[window makeKeyAndVisible];

Perfecto! Ahora Great! Build & Run para ver como aparecen ambos tabs. Claro que no tienen nada adentro pero ahora cambiamos eso. Hasta ahora hemos ido paso a paso por lo que hariamos para crear la aplicacion desde cero. Sin embargo vamos a descartar este codigo y ya veremos porque.

Vamos a usar nuestra primera library o framework para conectarnos a Twitter. Ya que ese framework incluye un tweeting viewcontroller, nos ahorraremos ese codigo y el de la conexion a internet para enfocarnos en la estrategia macro. Asi que descarguen el codigo aqui: [Twitter Library Sample Project here].

Unzip el folder completo. Este sera el nuevo folder de nuestra aplicacion. Al abrirlo encontraras:

1. Classes incluyendo TwitterRushAppDelegate & TwitterRushViewController

2. Other Sources con el TwitterOAuth folder que incluye el Libraries y Headers folder, MGTwitterEngine folder y SAOAuthTwitterEngine folder.

Recordando nuestro codigo del inicio, tenemos nuestro delegate y 1 de nuestros child VCs, el tweetView para tweetear. Ahora solo tenemos que crear el usersVC para mostrar nuestros amigos y finalmente insertarlos en el tabBarController VC. Asi que agreguemos lo siguiente:

TwitterRushAppDelegate.h

@class TwitterRushViewController;

@class UsersListViewController;

TwitterRushViewController *viewController;

UsersListViewController *usersVC;

@property (nonatomic, retain) IBOutlet TwitterRushViewController *viewController;

@property (nonatomic, retain) IBOutlet UsersListViewController *usersVC;

Aqui estamos declarando de antemano, o  forward declaring, que usaremos las clases TwitterRushViewController y UsersListViewController classes. Luego agregamos las ivars al @interface para esos 2 objetos. Finalmente los convertimos en propiedades. Solo falta una cosa mas; la clase UsersListViewController sue vamos a crear  ahora.  Hagamoslo ahora hacienda click derecho en el folder Classes, seleccionando Add New File, creando una subclass de UIViewController y de una vez convirtiendolo en un UITableViewController con un XIB asociado. Demosle el nombre UsersListViewController y hagamos click OK. Esto agregara la clase (h&m y en este caso su XIB) a nuestro folder de Classes.

Ahora si tenemos nuestros 2 child VCs declarados y listos para ser creados y luego insertados en nuestro contenedor.  Asi que vamos al TwitterRushAppDelegate.m file y agreguemos:

// Crea el contenedor & declars nuestro usersVC

UITabBarController *tabBarController = [[UITabBarController alloc] init];

viewController = [[TwitterRushViewController alloc] init];

usersVC = [[UsersListViewController alloc] init];

// Popula el array para el tabBarController

NSArray *vcArray = [NSArray arrayWithObjects:usersVC, viewController, nil];

// Agrega el array de VCs a nuestro tabBarController (contenedor)

[tabBarController setViewControllers:vcArray];

// Agrega el view controller’s view a la window & display.

[window addSubview:tabBarController.view];

[window makeKeyAndVisible];

Por fin podemos Build & Run para ver ambos controladores dentro del contenedor.  Podemos ver que el primer controlador tiene filas como un UITableViewController y el segundo tiene una UITextField y un boton para tweetear status updates.El segundo VC fue creado automaticamente para nosotros peru como puede ver, no tiene nada complejo.  Es mas, crearemos uno igual mas adelante.  Antes de terminar esta leccion, agreguemos algunos labels e iconos al tabBarController para que se vea mas presentable.  Asi que nuevamente en el TwitterRushAppDelegate agreguemos:

viewController.title = @”Compose”;

viewController.tabBarItem.image = [UIImage imageNamed:@"user.png"];

usersVC.title = @”Friends”;

usersVC.tabBarItem.image = [UIImage imageNamed:@"user.png"];

Este codigo va justamente despues de los respectivos alloc/init para cada child VC.  Estas lineas agregan una imagen y el titulo para cada tab.  De manera que ahora debemos importar esos respectivos archivos de alguna parte de su computadora.  De otra man era puedes encontrar algunos gratis en www.glyphish.com.  Asignemos los nombres users.png y tweet.png.  Ahora en Xcode seleccione Other Resources folder con un click, ahora en Project, Add To Project, encuentre esas imagenes y dele click Add.  Asegurese de marcar la caja de Copy files to the project folder (if needed).  Asegurese que aparezcan los 2 archivos en su Other Resources folder. Build & Run podemos ver una aplicación mucho mas presentable.

————–

Hasta ahora solo hemos trabajado con el UI, el intefaz de usuario.  Finalmente en esta leccion trabajaremos con data en nuestra application.  Nuestro TwitterRushViewController (viewController) contiene algo pero nuestro UsersListViewController (usersVC) aun no cuenta con el listado de usuarios que seguimos asi que agreguemoslo:

En UsersListViewController.h agregue lo siguiente:

// Aregue un ivar array para los usuarios

NSArray *usersArray;

// Conviertalo en una propiedad

@property (nonatomic,retain) NSArray *usersArray;

Luego en UsersListViewController.m agregue:

// Synthesize el usersArray

@synthesize usersArray;

// Poblemos el array con algunos usuarios (4 es suficiente) & nil terminamos el array como siempre

usersArray = [NSArray arrayWithObjects:@"marciokoko", @"mmars123", @"nrgea", @"santiapps", nil];

Busque el metodo NOSIT y retornemos 1 seccion:

- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView {

// Return the number of sections.

return 1; }

Busque el metodo NORIS y retornemos el numero de items de nuestro array de usuarios

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section { // Return the number of rows in the section.

return [usersArray count]; }

Finalmente en el metodo cellForRowAtIndexPath, CFRAIP, agregue la linea cell.textLabel.text …

// Configure the cell…

cell.textLabel.text = [usersArray objectAtIndex:indexPath.row];

return cell;

Guarde y Build & Run para ver como el listado de usuarios aparece en las files del tableview del primer tab.  La idea sera que cuando hagan tap sobre el usuario deseado, la aplicación navegara 1 nivel mas abajo para llamar los tweets de ese usuario en otra tabla.

Visita nuestro foro para ver la discusión de este tutorial:
Santiapp iOS Forum

Simple App #1

Vamos a crear una Simple App para que vean que facil es. Esta es la tipica Hello World App:

1. Crea un New Project llamado “Time”, que sea tipo Window Based App para iPhone only.

2. En AppDelegate.h agrega un IBOutlet UILabel *theTime; instance variable. Tu archivo .h file debería verse asi:

#import
@interface TimeAppDelegate : NSObject {
UIWindow *window;
IBOutlet UILabel *theTime;
}
@property (nonatomic, retain) IBOutlet UIWindow *window;
@end

3. En AppDelegate.m’s didFinishLaunchingWithOptions method arega:

[theTime setText:@"hello world!"];

4. Abre MainWindow.nib y arrastra una UILabel a la ventana. Luego con el TimeAppDelegate seleccionado, ve al Connections Inspector y conecta el theTime outlet a la UILablel adentro de la ventana. Tus conexiones deberian verse asi:

5. Build & run la aplicacion.

Deberias ver una ventana de condo blanco con la UILabel mostrando el text “hello world!”. Congrats, ha creado su primera aplicación iOS.

Visita nuestro foro para ver la discusión de este tutorial:
Santiapp iOS Forum