En esta parte del tutorial vamos a cubrir como crear un cliente de Twitter para iOS que despliega tweets de una cuenta y del cual se puede enviar tweets tambien.  El objetivo principal es aprender a usar los viewcontrollers, que son objetos muy comunes en aplicaciones iOS.

Mi primer paso al crear una app siempre es esto.  Asi puedo ver que tipo de viewcontrollers voy a necesitar.  Un viewcontroller es necesario para manejar ciertos tipos de views como los tableviews y simples UIViews.

Aplicación de Twitter

Esto me dice que necesito una app de un solo view con una especie de pop-up view para poder enviar tweets.  Puede parecer ridiculo para una app tan pequena pero las apps mas complejas empiezan sencillas y van creciendo.  Es importante tener una idea del bosque y no solo de un arbol en el.

Ok iniciemos creando nuestro proyecto en XCode desde el menu File>New>Project>Single View Application.

Creating Single View Application XCode4

Ahora llena los datos del proyecto.  Dale al proyecto un nombre descriptivo.  Es importante no incluir espacios ya que algunas funciones avanzadas de Xcode suelen dar problemas con nombres que contienen espacios.  En lugar de ello podemos usar el guion bajo, _.

El nombre de la Organizacion puede ser el que quieras, asi como el Company Identifier.  El Bundle Identifier suele ser el dominio en reversa, com.tuempresa.tuapp. En realidad no importa cual sea, con tal que sea el mismo de tu AppID en el Provisioning Portal.

El Class prefix se usa para darle un prefijo a todas las clases de tu proyecto sin que se te olvide.  Osea, lo hace de forma automatica de manera que si usas como prefijo “Santiapps”, todas las clases que se generen automaticamente asi como las que agregues luego de crear el proyecto, se llamaran “SantiappsClaseXYZ”.  Es util para uniformar los nombres de las clases en un proyecto.

Nuestro proyecto sera diseñado exclusivamente para iPhone.  De otra forma podemos seleccionar iPad o Universal para ambos.

Finalmente usaremos Storyboards & ARC.  El primero es una ayuda visual que provee un tabla de diseño grafica en la cual se pueden diseñar las apps.  La segunda es una nueva forma de manejar memoria en las aplicaciones y casi siempre la vamos a querer usar.

Dejemos Unit Testing sin marcar.

Al finalizar podemos seleccionar o crear un nuevo folder para almacenar nuestro proyecto.

Ahora deberiamos estar en una pantalla asi:

New Project in XCode4

La ventana izquierda es el Project File Navigator que muestra todos los archivos en un proyecto.  Al seleccionar algun archivo, su contenido se ve reflejado en la ventan central, la ventana de Editor donde se crea y modifica codigo.  Finalmente la ventana de la derecha es para los inspectores.  Hay varios inspectores que nos dan informacion adicional, a veces modificable, sobre el archivo que tenemos seleccionado en ese momento.  Iremos conociendo estas segun avanzamos.

Como podemos ver, XCode ha creado las siguientes clases para nosotros:

1)   AppDelegate

2)   ViewController

3)   MainStoryboard

Otros archivos importantes son:

1)   Twitter-Info.plist

2)   Twitter-Prefix.pch

3)   Main.m

El Info.plist contiene informacion basica sobre nuestra aplicación y lo veremos mas adelante.  El Prefix.pch contiene algunos headers especiales que importamos para tener accesible a lo largo de todo nuestro proyecto.  Main.m es el archivo principal que arranca la aplicación y su funcion principal es correr el AppDelegate.

Ahora veamos archivos un poco mas interesantes.  Ya vimos que Main.m corre el AppDelegate el cual corre las pantallas de la aplicacion.  Toda app contiene estos archivos.  El AppDelegate tiene un metodo principal:

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions

En nuestra aplicacion que usa Storyboards, esta misma determina cual escena o pantalla correr primero.  En las que no usan Storyboards, el AppDelegate determina cual clase llamar primero.

Si corres la aplicacion ahora se nos presenta una pantalla en blanco.  Esta es la pantalla del ViewController que por el momento no contiene nada mas que un fondo blanco. (SALUD!)

Antes de seguir codificando, revisemos nuestro diseño:

Aplicación de Twitter

Nuestra primera version de la app solo hara una cosa, Tweetear!  Esto significa que tendremos una pantalla con un boton y un metodo que tweeteara algun texto.  Una tecnica que utilizo es ir creando metodos que solo contienen comentarios sobre lo que quiero que ese metodo haga sin agregar codigo especifico al inicio.  Estoy ayuda a estructurar el codigo antes de empezar a codificar.

Asi que empecemos por agregar esto arriba del ViewController.m:

#import “ViewController.h”

 

@interface ViewController ()

- (IBAction)tweet:(id)sender;

@end

 

@implementation ViewController

 

- (IBAction)tweet:(id)sender {

//App requires internet, check connection

//App requires credentials, check credentials

//Other checks

//Build tweet data

//Perform tweet

}

Primero, agregamos una parte del @interface que declara el metodo tweet: de tipo IBAction.  IBAction quiere decir que esta conectado a un IBOutlet, donde IB significa Interface Builder, el motor grafico de diseño que se usa para agregar UIControls.  Los UIControls son objetos del UI, User Interface.  Esto simplemente significa que este metodo va conectado a un UIControl diseñado en IB.  Otros métodos, como los void, no van conectados a nada.  Los IBActions tipicamente van conectados a UIButtons ya que son los objetos encargados de llamar esos metodos.

Como programador es importante mantener el codigo organizado y el uso de comentarios es buena practica.  Esto puede parecer insignificante ahorita pero segun nuestros proyectos crecen y se complican, se vuelve totalmente necesario.

Estamos declarando el metodo tweet: en el @interface y definiendo ese metodo en @implementation. Podriamos crear todo el UI o ViewController programaticamente, pero para ello existe Storyboards, para ayudar con algunos elementos gráficos.  Asi que vamos a MainStoryboard.storyboard y veremos lo siguiente:

Storyboards in XCode 4

Ahora arrastra un Round Rectangular Button desde el Object Library en la derecha hasta el view del ViewController (el rectangulo blanco) en el centro del storyboard.  Hacemos doble click sobre la Label del boton y escribimos Tweet.  Finalmente agreguemos algo para hacer la app mas bonita.  Yo encontre una pajaro en Google.

Esto es importante aprender a hacerlo de forma correcta asi que pongamos atencion.  En la ventana izquierda creamos un New Group para poner nuestras imágenes de forma ordenada.  Seleccionamos un espacio en el arbol de archivos del Project Navigator y hacemos click derecho para tener el submenu del cual seleccionamos New Group.  Lo nombramos Imagenes.  Ahora seleccionamos ese nuevo folder y hacemos click derecho para ahora seleccionar Add Files.  Ahora busca en tu mac la imagen que bajaste y seras presentado con una pantalla asi:

Adding new files to XCode4 project

Asegurate de seleccionar “Copy items into destination…”.  Esto quiere decir que el archivo que esta en algun folder de tu mac, sera copiado al folder de tu Xcode project.  Esto es porque si en un futuro borras aquella imagen que descargaste, tu imagen siempre estara disponible en tu proyecto de Xcode y tu proyecto no tirara error al compilar y correr.

Ahora en la ventana derecha cambiamos del Object Library al Media Library pasando del icono de Cubo al icono de Cinta de Pelicula.  Aqui encontraras la imagen importada y la puedes arrastrar al view controller en el centro.  Posiciona la imagen y el boton dentro del view controller (vc) como quieras.

Ahora conectemos el boton para que haga algo.  El boton es un UIButton, osea, un tipo de UIControl.  De nuevo presta mucha atencion para que aprendas esto bien porque lo haras infinidad de veces.  Selecciona toda la escena del vc en storyboard hasta que se vea asi:

Selected Scene in Storyboards

Con el marco azul alrededor de la escena, observaras en el Connections Inspector en la ventana derecha que aparecen unos parametros llamados outlets.  Estos outlets son las conexiones que nuestro objeto seleccionado, en este caso el vc, puede tener.  Y nosotros queremos conectar el metodo que definimos, al boton que acabamos de crear.  Asi que en la lista del Connections Inspector, seleccionemos el metodo tweet: y haciendo clic, arrastremos hasta el boton de Tweet en la escena.

Al hacer esto aparece otro menú popup donde seleccionamos la opcion de TouchUpInside que significa que ese boton llamara ese metodo cuando el usuario haga “touch” sobre ese boton pero también que el touch sea de tipo “up inside” ósea, que levante el dedo del boton estando adentro del boton.  Una alternativa a esto podria ser TouchUpOutside que solo llama el metodo si el usuario toca el boton pero antes de levantar el dedo de la pantalla, mueve el dedo hacia afuera del botón.

Ya tienes una aplicacion que funciona.  Solo que el metodo no hace nada.  Antes de llenarlo de código, vamos a importar el Twitter framework.  Es algo aburrido pero rápido asi que salgamos de ello.

En la ventana izquierda selecciona el Icono de Proyecto azul y de la ventana principal selecciona “Target”.  Ahora en “Build Phases” expande la Link Library y haz clic sobre “+”.  En el campo de busqueda escribe Twitter y aparecera el Twitter framework.

Importing Framework XCode4

Seleccionalo y haz clic en Add.  Ya tenemos acceso a Twitter, asi de facil.

Ahora importemos este nuevo framework en nuestra app, en la parte superior de ViewController.m:

#import <Twitter/Twitter.h>

Ahora dentro de nuestro metodo tweet: agreguemos lo siguiente:

//1. Revisamos si tenemos los recursos necesarios para twittear

if ([TWTweetComposeViewController canSendTweet]) {

NSLog(@”Connected and Authorized”);

} else {

// Alertamos si no los tenemos

NSString *message = @”Please check your internet connection or Settings for a configured Twitter Account”;

UIAlertView *alertView = [[UIAlertView alloc] initWithTitle:@”We’re sorry” message:message delegate:nil cancelButtonTitle:@”Dismiss” otherButtonTitles:nil];

[alertView show];

}

Que hicimos?  Primero llamamos un metodo para revisar si podemos tweet y sino altertamos el usuario del problema.  El metodo canSendTweet basicamente revisa si hay conectividad y si tenemos los credenciales adecuados.  Si todo esta bien, retorna TRUE.

Asi no desperdiciamos tiempo y procesos en procesar codigo que no podremos usar.  Si retorna FALSE simplemente nos salimos del metodo y presentamos una alerta al usuario.

Ok, veamos que podemos hacer ahora que podemos enviar un tweet:

//2.

// Iniciamos el TweetComposeViewController

TWTweetComposeViewController *vc = [[TWTweetComposeViewController alloc] init];

// Settear el texto del tweet

[vc setInitialText:@"My first programmer tweet!"];

Aqui instanciamos el TWTweetComposeViewController y setteamos su texto.  Una diferencia importante es que canSendTweet era un metodo de clase que se puede llamar a su clase sin una instancia.  En cambio setInitialText es un metodo de instancia de clase para la cual tuvimos que instanciar un objeto de tipo TWTweetComposeViewController para poderlo llamar.

Solo por curiosidad, pongamos el cursor sobre TWTweetComposeViewController y hagamos clic derecho sobre el para seleccionar Jump to Definition.  Esto nos lleva a la clase donde esta definido este metodo u objeto.  Aqui podemos ver el simbolo “+” frente al metodo canSendTweet versus el “-“ frente al metodo setInitialText.

Ahora aprendamos a agregar una imagen al tweet.  Vamos hardcode una imagen por ahora.  Mi imagen se llama images-27.jpeg.  Asi que agregamos el siguiente codigo:

//3.

// Hardcode una imagen

UIImage *image = [UIImage imageNamed:@"images-27.jpeg"];

[vc addImage:image];

Aqui podemos ver que agregamos la imagen a la instancia del vc.

Otra cosa que podemos hacer es agregar un URL a los tweets.  Lo hacemos agregando el siguiete codigo:

//4.

// Hardcode el URL

NSURL *url = [NSURL URLWithString:@"http://www.santiapps.com"];

[vc addURL:url];

De nuevo vamos a agregarlo a la instancia de vc.  El ultimo paso puede ser un poco confuso pero es una practica muy comun llamado “blocks”.

Normalmente llamamos un metodo y le mandamos datos o variables que producen datos o variables.  Blocks es una tecnica en la cual le pasamos a un metodo un bloque de codigo, en lugar de parametros o variables.  Es una manera de condensar clases con muchos metodos para hacerla mas fácil de leer.  Aqui va:

//5.

// Opcional

[vc setCompletionHandler:^(TWTweetComposeViewControllerResult result) {

[self dismissModalViewControllerAnimated:YES];

}];

//6.

// Presentamo el TweetComposeViewController

[self presentViewController:vc animated:YES completion:nil];

Ok ya hemos armado el tweet con sus propiedades.  Ahora vamos a presentar el TweetComposeViewController para que el usuario haga clic en Send o algo asi.

Lo que hacemos es settear una propiedad del vc llamada Completion Handler que toma el bloque de codigo en lugar de una variable.  Le estamos diciendo a nuestra instancia de vc que ejecute ese codigo dentro de los {}.

Finalmente presentamos el vc para que el usuario pueda modificar el texto o algo mas.  Una vez el usuario haga clic sobre Send, se llamara el completion handler y luego [self dismissModalViewControllerAnimated:YES]; en efecto despachando el TweetComposeViewController.

TweetSheet in iOS6 XCode4

El completion handler es muy util porque espera el resultado del tweet antes de llamar el codigo para dismiss.  De otra forma se podria despachar el TweetComposeViewController sin haber ejecutado apropiadamente el tweet.

Espero que hayan aprovehado esta parte del tutorial y nos vemos en la proxima.