Tutorial 1: Iniciacin al SDK del iPhone 3G

Este tutorial es el primero de una serie que pretenden servir de gua para todos aquellos que queris empezar a programar en entorno Mac / iPhone. Esta estructurado en tres partes. En una primera comentaremos el SDK, los cambios surgidos a lo largo de las distintas versiones del SDK. En la segunda parte instalaremos el SDK y en la ltima parte realizaremos un proyecto para ver lo fcil que es programar aplicaciones para el iPhone / iPod Touch. PARTE 1: SOBRE EL SDK El 6 de Marzo de 2008 Apple nos sorprendi a todos con el anuncio de un SDK para sus dispositivos iPhone y iPod Touch. Han pasado ya meses desde entonces y han sido bastantes los cambios producidos en el SDK. Actualmente est en fase beta, en su versin octava. Antes de comenzar a trabajar con l comentemos un poco las versiones anteriores y los principales cambios sufridos en el mismo: Beta 1: SDK inicial en el cual no se daba soporte a Interface Builder. Toda interfaz haba que programarla. Beta 2: Se da soporte a Interface Builder para el desarrollo de aplicaciones para el iPhone. Beta 3: Se corrigen importantes bugs. Beta 4: Se da soporte a OpenGL ES. Beta 5: Se corrigen bastantes bugs y se mejora la interfaz.

Beta 6: Se corrigen Bugs y viene acompaa de la actualizacin 10.5.3 de Leopard. Beta 7: Mayor estabilidad y se corrigen Bugs.

Desde mi punto de vista los puntos positivos y negativos que trae este SDK: A favor: Facilidad a la hora de programar una aplicacin. Documentacin extensa unida a ejemplos. Conjunto de herramientas muy completas. Todo lo necesario est incluido en el SDK. Emulador : para todos aquellos que no disponen del dispositivo.

Acceso a los Framework ms jugosos del dispositivo: multitouch, acelermetro, localizacin, cmara. Para un programador de Mac le ser transparente programar para dicha plataforma. En contra: Programa de desarrollo: hay que pasar por caja para ver nuestras aplicaciones en el dispositivo fsico. Lenguaje de programacin: Objective-C no es muy extendido a mi punto de vista. SDK solo vlido para la plataforma Mac. No hay herramientas oficiales para Windows. Las aplicaciones no corren en segundo plano. Tenemos que guardar el estado para recuperarlo en cada ejecucin. Para todos aquellos que se estn preguntando porque programar para esta plataforma mvil comentarles que no es una plataforma mvil ms. El ncleo de este dispositivo es el mismo que el de un Mac. No es un mvil con capacidad multimedia, sino un dispositivo multimedia que trae el telfono como una caractersticas ms. Con su interfaz de usuario tiene todas las

papeletas para convertirse en una plataforma de juegos impresionante. Con su explorador safari te puedes pasear por la web 2.0 como si estuvieses en el PC, que digo, es que ests en uno pequeo. En fin, por todo eso y porque al menos todos conocemos a una persona que tiene uno (y si es muy Friki dos). PARTE 2: INSTALACIN En esta segunda parte abordaremos la instalacin de SDK as como una breve descripcin de las herramientas que contiene. Para empezar necesitamos descargarnos el SDK oficial de Apple. Lo localizaremos en el siguiente enlace http://developer.apple.com/iphone/sdk1/. El nico requisito que nos pedirn ser registrarnos en su pgina como desarrollador (es gratis J ).

El archivo pesa unos 1.25GB, armaros de paciencia mientras se descarga (visitar open.movilforum.com mientras tanto ;-) ) . Cuando tengamos el archivo descargado, automticamente se nos montar en el sistema como una unidad ms. Nos vamos al finder y ejecutamos la instalacin. En ese mismo instante se nos guiar por unos asistentes.

Una vez instalado, observamos que las herramientas no estn en la carpeta Aplicaciones. Que no cunda el pnico. La herramientas esenciales del SDK las podemos encontrar en Developer/Applications. Si lo deseis, y as os lo recomiendo, crear un enlace en Dock para que su acceso futuro sea ms sencillo.

En la carpeta nos encontramos con las siguientes aplicaciones: Xcode: editor IDE para nuestras aplicaciones. Similar a Visual Studio.

Interface Builder: Aplicacin para disear el interfaz grfico de nuestras aplicaciones. DashCode: Aplicaciones para crear aplicaciones web (para Cocoa y Cocoa Touch) y widgets para Mac. Iphone Simulator: Simulador del iPhone al estilo del emulador de Windows Mobile de Visual Studio. Muy prctico ya que hasta septiembre no podremos probar las aplicaciones en el propio terminal. Instruments: aplicacin para monitorizar los recursos de una aplicacin. Nos ayudar a localizar esos memory leaks que siempre nos

dejamos por ah perdidos. PARTE 3: MI PRIMER PROYECTO HELLO WORLD Una vez acaba la instalacin nos ponemos manos a la obra con nuestra primera aplicacin.La idea es construir la tpica aplicacin hello Word. El usuario introduce su nombre, pulsa un botn y recibe una saludo personalizado por parte de la aplicacin. Para ello ejecutaremos Xcode. Nos aparecer la siguiente pantalla de bienvenida. Nos vamos a Archivo -> Nuevo proyecto

Nos saldr una ventana con las dos plataformas disponibles a la derecha y el tipo de proyecto que queremos crear a la izquierda. Como nos interesa la parte del iPhone escogemos la nica posibilidad disponible Applications. A continuacin se nos mostrar los diferentes tipos de proyectos (plantillas) disponibles en este momento: Navigation-Based Application: plantilla para crear una aplicacin con el objecto de navegacin. OpenGL ES Applications: plantilla para aplicaciones que hagan uso del motor grfico OpenGL.

Tab Bar Application: plantilla para aquellas aplicaciones donde necesitemos el elemento Tab Bar (como iPod o contactos). Utility Application: plantilla para aplicaciones tipo Widget (Bolsa, Mapas, Tiempo). View_Based Application: plantilla para aplicaciones tipo VistaControlador. Ideal para aplicaciones sencillas. Window-Based Application: plantilla por defecto. Preparada para personalizarla como queramos. Para nuestro primer ejemplo seleccionaremos View-Based Application. El resto de las plantillas las trataremos en prximos tutoriales (paciencia J).

A continuacin nos pedir el nombre que queramos darle al proyecto y su ubicacin:

Una vez completado el paso anterior accederemos a la interfaz de Xcode:

A continuacin pasaremos a describir los componentes del proyecto: Explorador de los archivos del proyecto: Nos muestra todos los elementos pertenecientes a nuestro proyecto. Como vemos tenemos dos clases: Mi_ProyectoAppDelegate: encargado de la gestin de memoria del programa,de lanzar los controladores para cada

vista que creemos. Vamos, el que corta el bacalao. Para este caso lo nico de lo que se encarga es de lanzar el controlador de nuestra vista. Mi_ProyectoViewController: encargado de mostrar y definir los elementos de la vista que creemos y de mostrarla por pantalla. Recoge y enva los eventos de la misma. Vista Carpeta: Vista de la carpeta seleccionada desde el explorador.

Vista Cdigo:

Barra de Herramientas: Opciones ms comunes.

Build: accin de compilar nuestro proyecto. Build & Go: compilar y ejecutar nuestro proyecto. Info: propiedades del proyecto. Editor: vista con solo el editor de cdigo.

Una vez explicada la interfaz de xcode con los componentes de proyecto

compilaremos el proyecto sin ms. Para ello pulsaremos en Build and Go de la barra de herramientas. Vemos como no se generan errores y a continuacin se ejecutara la aplicacin en el simulador. Nos aparecer la pantalla en blanco debido a que todava no la hemos definido. Si pulsamos en botn Home saldremos de la aplicacin. Recordamos que una de las principales pegas a la hora de programar aplicaciones para el iPhone es que estas no se puede ejecutar en segundo plano. Tanto si pulsamos en botn de Home como si ocurre un evento del sistema (llamada, SMS) nuestra aplicacin se cerrar, y al menos que guardemos el estado, la prxima vez que la ejecutemos ser como la primera vez. Para este ejemplo no es crtico el guardar el estado. En el futuro explicaremos el proceso de guardar el estado de la aplicacin para que parezca que nunca se cierra para el usuario. Cdigo: Empezaremos definiendo los elementos necesarios en nuestro controlador de vista que necesitamos para crear nuestra aplicacin. En resumen necesitamos: Etiquetas: Una para el ttulo y otra para pedir al usuario que introduzca el nombre. Una ltima para saludar al usuario de forma personalizada. Campo de texto: donde el usuario introducir su nombre.

Imagen: Que mostraremos junto con la etiqueta de saludo cuando el usuario pulse el botn. Botn: Por el cual ejecutaremos el mtodo de saludo.

Imagen de fondo: imagen de la interfaz para que no quede la aplicacin muy sosa.

Pulsaremos en el archivo de definicin del controlador, Mi_ProyectoViewController.h y aadimos las siguientes lneas: #import <UIKit/UIKit.h>

@interface Mi_ProyectoViewController : UIViewController { IBOutlet UILabel *saludo; IBOutlet UITextField *nombre; IBOutlet UIImageView *imagenSaludo; }

@property (nonatomic, retain) UILabel *saludo; @property (nonatomic, retain) UITextField *nombre; @property (nonatomic, retain) UIImageView *imagenSaludo;

- (IBAction) clickSaludo: (id) sender;

@end IBOutlet sirve para indicar al compilador que este elemento lo enlazaremos en la herramienta Interface Builder. Solo necesitamos la etiqueta saludo, el campo de texto para capturar el nombre y la imagen a mostrar cuando saludemos. A continuacin definimos las propiedades de los elementos para facilitar el

acceso a las mismos. Es decir, en Objective-C el acceso a los mtodos o propiedades de las clases se realiza entre corchetes, con estas propiedades podremos acceder por puntos ahorrndonos cdigo. Lo ltimo que haremos ser definir la cabecera del mtodo que lanzar el botn. Para ello, y por defecto, recibe un objeto Id y devuelve un IBAction (recordar, todo lo que comience por IB sern acciones que enlazaremos con la herramienta Interface Builder). Implementacin: La idea es que una vez que el usuario haya introducido su nombre pulse el botn y aparezca un saludo en forma de etiqueta junto con una imagen. Para ello aadimos el siguiente cdigo al archivo de implementacin Mi_ProyectoViewController.m: #import "Mi_ProyectoViewController.h"

@implementation Mi_ProyectoViewController

@synthesize saludo, nombre, imagenSaludo;

- (IBAction) clickSaludo: (id) sender { saludo.text = [NSString stringWithFormat:@"Hola %@!!!",nombre.text]; imagenSaludo.hidden = FALSE; }

- (BOOL)textFieldShouldReturn:(UITextField *) theTextField {

if (theTextField == nombre) [nombre resignFirstResponder]; return YES; }

clickSaludo es el mtodo que se lanzar cuando pulsemos en botn. Como veis captura el texto y lo muestra en la etiqueta antes definida mostrando adems una imagen. El mtodo textFieldShouldReturn es para que al pulsar done cuando terminamos de introducir nuestro nombre desaparezca el teclado. Por omisin no desaparece. Por ltimo, insertaremos los archivos correspondientes a las imgenes que necesitamos: Background.png : Imagen de fondo. Hello.png: Imagen que usaremos como saludo. Icon.png: Nuestro icono de la aplicacin.

Los seleccionamos desde el finder y los arrastramos hasta la carpeta Resources de nuestro proyecto. Nos aparecer una pantalla confirmando si deseamos enlazar los archivos al proyecto. Pulsamos en Add y con esto termina la parte de Xcode.

Diseo de la interfaz: La parte de cdigo la acabamos de completar, ahora pasaremos a definir la interfaz. Para empezar, pulsaremos dos veces encima del archivo Mi_ProyectoViewController.xib dentro del explorador de archivos. Este archivo es el que define la vista de nuestro controlador. A continuacin se ejecutar la segunda herramienta que ms usaremos en estos tutoriales : Interface Builder. Seguramente esta sea vuestra primera experiencia con el SDK. Creerme, habis hecho bien. Para los ansiosos que hemos estado trasteando con el SDK en su primera versin os comentar que esta parte era una pesadilla. La interfaz grfica la tenamos que crear con cdigo puro y duro. Daban ganas de llorar cada que vez creabas una botn porque se te iban fcilmente 5 lneas de cdigo en solo definir su posicin y aspecto. Ahora comprobareis lo fcil que es crear una interfaz para el iPhone.

De izquierda a derecha describiremos los componentes ms importantes de

un archivo xib. Vista: Este componente es lo que realmente veremos en el iphone. Aqu es donde disearemos la interfaz. Files Owners: Objeto responsable de controlar la vista. En este caso nuestro controlador Mi_ProyectoViewController. Atributos: Atributos del objeto que seleccionamos. Library: Librera de objetos junto con su descripcin: botones, etiquetas. Bueno, pues manos a la obra. Empezaremos arrastrando los componentes necesarios, recordemos: Imagen de fondo: Elegimos el objeto Image View y lo arrastramos a la ventana.

En la ventana Image View Attributes, elegimos como valor para Image la imagen Background.png. Titulo y peticin del nombre: Elegimos el objeto Label para quede de esta forma:

Campo de texto donde el usuario introducir el nombre: Seleccionamos TextField.

Botn: de tipo Rounded Buttom.

Saludo: Etiqueta vaca.

Imagen para el saludo: de tipo Image View asociada a la imagen Hello.png como hicimos con la imagen de fondo. Seleccionaremos tambin la propiedad Hidden.

Muy bien, a continuacin enlazaremos la interfaz con el cdigo. Para ello, seleccionamos Files Owner y manteniendo pulsado el botn Ctrl arrastramos el ratn hacia los componentes diseados. Ahora toca con los componentes. Solo lo haremos con aquellos que hemos definido en el cdigo. Primero enlazamos el campo de texto:

Enlazamos la etiqueta vaca:

Enlazamos la imagen del saludo:

Para enlazar el botn con el mtodo hacemos la siguiente: click sobre el ratn con la tecla ctrl. Presionada. Nos aparecen todos los eventos relacionados con el botn. Con el ctrl. pulsado hacemos click sobre Touch Up Inside y lo arrastramos hacia File`s Owner seleccionando clickSaludo.

Ahora, para que nuestro teclado desaparezca al introducir el nombre, adems de la funcin que implementamos en el cdigo necesitamos que nuestro controlador sea el delegate del campo de texto. Para ello lo enlazamos desde el campo de texto hacia nuestro controlador:

Por ltimo, para asociar un icono a nuestra aplicacin seleccionamos el archivo Info.plist dentro de Xcode. El campo Icon lo completamos con el nombre de la imagen que queramos aadir.

Con esto ya hemos terminado el desarrollo del proyecto. Ahora solo nos queda probarlo. Para ello, una vez guardado el archivo de Interface Builder, volvemos a Xcode y pulsamos el Buid and Go!.

Tambin esta disponible este tutorial en formato video: Video 1:Introduccin al SDK Se requiere Quicktime Espero que os haya gustado. Nos vemos en el siguiente tutorial!!