Este  tutorial es el primero de una serie que pretenden servir de guía para todos aquellos que queréis 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 fácil 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 versión 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 había 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 acompaña de la actualización 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 aplicación. Documentación 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 más jugosos del dispositivo: multitouch, acelerómetro, localización, cámara….

-       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 físico.

-       Lenguaje de programación: Objective-C no es muy extendido a mi punto de vista.

-       SDK solo válido 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 ejecución.

Para todos aquellos que se estén preguntando porque programar para esta plataforma móvil comentarles que no es una plataforma móvil más. El núcleo de este dispositivo es el mismo que el de un Mac. No es un móvil con capacidad multimedia, sino un dispositivo multimedia que trae el teléfono como una características más. 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 estás en uno pequeño…. 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: INSTALACIÓN

  En esta segunda parte abordaremos la instalación de SDK así como una breve descripción 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 pedirán será registrarnos en su página 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, automáticamente se nos montará en el sistema como una unidad más. Nos vamos al finder y ejecutamos la instalación. En ese mismo instante se nos guiará por unos asistentes.

  Una vez instalado, observamos que las herramientas no están en la carpeta Aplicaciones. Que no cunda el pánico. La herramientas esenciales del SDK las podemos encontrar en Developer/Applications. Si lo deseáis, y así os lo recomiendo, crear un enlace en Dock para que su acceso futuro sea más sencillo.

 

 En la carpeta nos encontramos con las siguientes aplicaciones:

-       Xcode: editor IDE para nuestras aplicaciones. Similar a Visual Studio.

-       Interface Builder: Aplicación para diseñar el interfaz gráfico 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 práctico ya que hasta septiembre no podremos probar las aplicaciones en el propio terminal.

-       Instruments: aplicación para monitorizar los recursos de una aplicación.  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 instalación nos ponemos manos a la obra con nuestra primera aplicación.La idea es construir la típica aplicación hello Word. El usuario introduce su nombre, pulsa un botón y recibe una saludo personalizado por parte de la aplicación.

  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 continuación se nos mostrará los diferentes tipos de proyectos (plantillas) disponibles en este momento:

-       Navigation-Based Application: plantilla para crear una aplicación con el objecto de navegación.

-       OpenGL ES Applications: plantilla para aplicaciones que hagan uso del motor gráfico 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 Vista-Controlador. 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 próximos tutoriales (paciencia J).

  A continuación nos pedirá el nombre que queramos darle al proyecto y su ubicación: 

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

  A continuación 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 gestión 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 envía los eventos de la misma.

Vista Carpeta: Vista de la carpeta seleccionada desde el explorador.

Vista Código:

Barra de Herramientas: Opciones más comunes.

-       Build: acción de compilar nuestro proyecto.

-       Build & Go: compilar y ejecutar nuestro proyecto.

-       Info: propiedades del proyecto.

-       Editor: vista con solo el editor de código.

Una vez explicada la interfaz de xcode con los componentes de proyecto compilaremos el proyecto sin más. Para ello pulsaremos en “Build and Go” de la barra de herramientas. Vemos como no se generan errores y a continuación se ejecutara la aplicación en el simulador.

 Nos aparecerá la pantalla en blanco debido a que todavía no la hemos definido. Si pulsamos en botón Home saldremos de la aplicación.  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 botón de Home como si ocurre un evento del sistema (llamada, SMS…) nuestra aplicación se cerrará, y al menos que guardemos el estado, la próxima vez que la ejecutemos será como la “primera” vez.

 Para este ejemplo no es crítico el guardar el estado. En el futuro explicaremos el proceso de guardar el estado de la aplicación para que parezca que nunca se cierra para el usuario.

Código:

 Empezaremos definiendo los elementos necesarios en nuestro controlador de vista que necesitamos para crear nuestra aplicación. En resumen necesitamos:

-       Etiquetas: Una para el título 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 botón.

-       Botón: Por el cual ejecutaremos el método de saludo.

-       Imagen de fondo: imagen de la interfaz para que no quede la aplicación muy sosa.

 Pulsaremos en el archivo de definición del controlador, Mi_ProyectoViewController.h y añadimos las siguientes líneas:

#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 continuación definimos las propiedades de los elementos para facilitar el acceso a las mismos. Es decir, en Objective-C el acceso a los métodos o propiedades de las clases se realiza entre corchetes, con estas propiedades podremos acceder por puntos ahorrándonos código.

 Lo último que haremos será definir la cabecera del método que lanzará el botón. Para ello, y por defecto, recibe un objeto Id y devuelve un IBAction (recordar, todo lo que comience por IB serán acciones que enlazaremos con la herramienta Interface Builder).

Implementación: La idea es que una vez que el usuario haya introducido su nombre pulse el botón y aparezca un saludo en forma de etiqueta junto con una imagen.

 Para ello añadimos el siguiente código al archivo de implementación 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 método que se lanzará cuando pulsemos en botón. Como veis captura el texto y lo muestra en la etiqueta antes definida mostrando además una imagen.

El método textFieldShouldReturn es para que al pulsar  “done” cuando terminamos de introducir nuestro nombre desaparezca el teclado. Por omisión no desaparece.

Por último, insertaremos los archivos correspondientes a las imágenes que necesitamos:

-       Background.png : Imagen de fondo.

-       Hello.png: Imagen que usaremos como saludo.

-       Icon.png: Nuestro icono de la aplicación.

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.

Diseño de la interfaz:

La parte de código 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 continuación se ejecutará la segunda herramienta que más usaremos en estos tutoriales : Interface Builder.

 Seguramente esta sea vuestra primera experiencia con el SDK. Creerme, habéis hecho bien. Para los ansiosos que hemos estado trasteando con el SDK en su primera versión os comentaré que esta parte era una pesadilla. La interfaz gráfica la teníamos que crear con código puro y duro. Daban ganas de llorar cada que vez creabas una botón porque se te iban fácilmente 5 líneas de código en solo definir su posición y aspecto.  Ahora comprobareis lo fácil que es crear una interfaz para el iPhone.

De izquierda a derecha describiremos los componentes más importantes de un archivo xib.

Vista: Este componente es lo que realmente veremos en el iphone. Aquí es donde diseñaremos la interfaz.

File´s Owners: Objeto responsable de controlar la vista. En este caso nuestro controlador Mi_ProyectoViewController.

Atributos: Atributos del objeto que seleccionamos.

Library: Librería de objetos junto con su descripción: 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 petición del nombre:  Elegimos el objeto Label para quede de esta forma:

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

-       Botón: de tipo Rounded Buttom.

-       Saludo: Etiqueta vacía.

-       Imagen para el saludo: de tipo Image View asociada a la imagen “Hello.png” como hicimos con la imagen de fondo. Seleccionaremos también la propiedad “Hidden”. 

Muy bien, a continuación enlazaremos la interfaz con el código. Para ello, seleccionamos File´s Owner y manteniendo pulsado el botón Ctrl arrastramos el ratón hacia los componentes diseñados.

Ahora toca con los componentes. Solo lo haremos con aquellos que hemos definido en el código.

Primero enlazamos el campo de texto:

Enlazamos la etiqueta vacía:

Enlazamos la imagen del saludo:

Para enlazar el botón con el método hacemos la siguiente: click sobre el ratón con la tecla ctrl. Presionada. Nos aparecen todos los eventos relacionados con el botón. 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, además de la función que implementamos en el código 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 aplicación seleccionamos el archivo “Info.plist” dentro de Xcode. El campo “Icon” lo completamos con el nombre de la imagen que queramos añadir.

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!.

También esta disponible este tutorial en formato video:

Se requiere Quicktime                       

Espero que os haya gustado. Nos vemos en el siguiente tutorial!!

 

 

Adjunto	Tamaño
Mi Proyecto.zip	82.15 KB