Aprende a programar para iOS: Introducción

maquecitos iphone ipad ipod touch programacion español sdk tutoriales aplicacion aprender

¿Alguna vez habéis sentido curiosidad por empezar a programar para iOS? Pues ahora estáis de suerte porque en Maquecitos vamos a hacer un pequeño curso para introducirse en el mundo de la programación para iOS. El sistema operativo móvil de Apple tiene millones de usuarios repartidos por todo el mundo, y ya cuenta con más de 500.000 aplicaciones en el App Store.

Para empezar con la programación es fundamental disponer de Xcode instalado en tu Mac, ya que es desde este desde donde se crean las aplicaciones. Xcode está ahora mismo de forma gratuita en el Mac App Store, y recomendamos tenerlo siempre actualizado. Hay que decir que para programar en iOS hay que tener un nivel mínimo de inglés, pues Xcode entero está en este idioma, así como el código que vamos a escribir posteriormente. Sin más dilación, empecemos a manejar Xcode.

Nada más abrir Xcode, nos encontraremos con esta pantalla:

A la izquierda tenemos una serie de opciones, como empezar un proyecto nuevo, conectarse a un repositorio, ir al centro de desarrollo de Apple… Y a la derecha tenemos una lista de los últimos proyectos que hemos empezado o que hemos abierto recientemente. Para empezar un proyecto nuevo, debemos hacer click en la primera opción de la izquierda de la ventana emergente: Create a new Xcode project (Crear un nuevo proyecto de Xcode). A continuación nos aparecerá esta otra ventana, para elegir la plataforma en la que queremos desarrollar, así como qué tipo de aplicación queremos hacer.

iphone ipad ipod touch programacion español sdk tutoriales aplicacion aprender
Aquí tenemos varias opciones a elegir, donde cada una tendrá una función distinta.

-. Master-Detail Application: Este tipo de proyecto es para aplicaciones que usen bases de datos, ya sea Core Data (la de iOS) o otras de terceros como SQL.
-. OpenGL Game: Como su propio nombre indica, es para aplicaciones que usen el motor gráfico de OpenGL, como por ejemplo un juego.
-. Page-Based Application: Es para aplicaciones que usen el efecto de pasar página presente en iBooks. Este sería ideal para, por ejemplo, un libro.
-. Single View Application: Este proyecto es para aplicaciones simples que sólo usen una vista, es decir, una pantalla. Pero como todos los proyectos, se pueden añadir más posteriormente.
-. Tabbed Application: Este es para aplicaciones que usen un Tab Bar. Pero, ¿qué es un Tab Bar? Es la típica barra negra que aparece en la parte de abajo de la aplicación, con varias pestañas, como por ejemplo el App Store, Instagram, Twitter for iPhone…
-. Utility Application: Suele usarse en aplicaciones que disponen de una vista principal, y a partir de ahí llevan a otras vistas, como por ejemplo un menú, que te lleva a todas sus secciones según que botón pulses.
-. Empty Application: Si seleccionamos este proyecto, dispondremos de un proyecto vacío (a excepción de los Frameworks y los archivos esenciales).

A Grosso Modo, estas serían las descripciones de cada tipo de proyecto. Ahora, para aprender de verdad cómo se programa una aplicación, debemos de elegir un tipo de proyecto para empezar a trabajar sobre él. Por ejemplo, vamos a seleccionar Single View Application, y hacemos click en Next.

iphone ipad ipod touch programacion español sdk tutoriales aplicacion aprender

Ahora, en la ventana que nos ha aparecido, vamos a rellenarla según los datos de nuestra aplicación. Debemos de asegurarnos de que estén marcados los tres ticks de la parte inferior de la ventana. Para configurar nuestro proyecto, ponemos en Product Name el nombre que llevará el proyecto. En Company Identifier el nombre de nuestra compañía y nos aseguramos de que en Device Family está seleccionado iPhone. Una vez rellenado todo, hacemos click en Next. Seleccionamos la ruta donde vamos a guardar el proyecto y hacemos click nuevamente en Next.

Si habéis seguido todos los pasos correctamente os debe de haber salido algo así:

iphone ipad ipod touch programacion español sdk tutoriales aplicacion aprender

Esta ventana va a ser desde donde vais a poder modificar el icono de la aplicación, la pantalla de carga, añadir Frameworks…

Podéis ver que a la izquierda aparecen una serie de archivos. Básicamente, cada pareja de archivos .h y .m se van a encargar de una pantalla (vista a partir de ahora) de la aplicación. Los archivos AppDelegate.h y AppDelegate.m van a estar siempre presentes ya que van a ser los encargados de decidir en qué vista arranca la aplicación, entre otras cosas. Pero ¿y por qué un archivo .h otro .m? ¿Qué diferencia hay entre ellos? Pues bien, aunque los dos sirven para una única vista. Digamos que el .h complementa al .m. En el archivo .h (header o de cabecera) vamos a poner todos los elementos que van a componer la interfaz gráfica de la aplicación, desde una simple etiqueta hasta un deslizador o un switch de ON/OFF. En cambio, el archivo .m (implementation o de implementación) va a decidir qué va a hacer cada elemento que hemos declarado en el .m. Desde el título de la etiqueta o la acción de deslizador o del switch.

Además, hay por ahí un archivo que no se parece en nada a lo que hemos comentado. Es el Storyboard, y ahí es donde vamos a diseñar la interfaz gráfica de la aplicación. Ahí vamos a poner todos los elementos declarados en el .h, vamos a colocarlos donde queramos y vamos a modificar ciertas características como el tamaño, la fuente de letra, el fondo… Además, todos los elementos que hemos declarado anteriormente en el .h y .m vamos a tener que conectarlos con su elemento correspondiente de la interfaz gráfica.

Así que vamos a empezar por hacer algo sencillo como escribir en un cuadro de texto una frase y que al pulsar un botón aparezca una etiqueta con ese texto, y que el cuadro de texto, posteriormente, se quede en blanco.

Así que para empezar vamos a hacer click en ViewController.h, que es el controlador de la primera y única vista que tiene nuestra aplicación. Nos encontraremos algo así (vuestra pantalla aparecerá con el fondo blanco por defecto, pero puede cambiarse en las preferencias de Xcode):

iphone ipad ipod touch programacion español sdk tutoriales aplicacion aprender

El texto que aparece con // delante se llama comentarios en programación. Sirve para hacer anotaciones, cosa que es muy útil una vez que te dedicas de forma profesional a esto y el código es cada vez más difícil. No os asustéis si no comprendéis nada de lo que ha aparecido, para ello vamos a explicar en que consiste cada línea.

#import <UIKit/UIKit.h> -> Esta línea indica que se importe a ese archivo el Framework UIKit, esencia para que funcione nuestra aplicación.

@interface ViewController : UIViewController -> Esta otra indica que el nombre del archivo es ViewController y que la subclase es UIViewController (la más usada).

@end -> Esto siempre se pone al final del archivo, e indica el final del mismo.

Para empezar a añadir elementos, necesitamos añadir una { a continuación de UIViewController. Al pulsar enter, veremos como se nos crea otra } en la línea de abajo. Las llaves indican el inicio y el final de un método. Dentro de las llaves vamos a añadir los elementos. A la hora de añadirlos, hay que cumplir unas normas básicas:

-. Siempre y cuando vayamos a representarlo en Storyboard, debemos poner delante IBOutlet
-. Delante de cada nombre de un elemento hay que poner UI. Por ejemplo, etiqueta es UILabel.
-. Detrás hay que poner un puntero o pointer, que es como le vamos a llamar al elemento empezando por un *.
-. Al final siempre hay que poner ; .

De esta forma, debemos declarar un cuadro de texto (donde escribiremos el texto) y una etiqueta (donde representaremos el texto). Los botones no hace falta declararlos casi nunca, sólo en casos excepcionales. Además, debemos crear una acción, que será la que realice el botón. Estas siempre se representan después de las llaves, entre } y @end. Siempre tienen la misma forma:

-(IBAction)nombreDeLaAcción:(id)sender;

Siempre que declaramos algún elemento de la interfaz gráfica tenemos que crear una propiedad para ese objeto. Se representa así en el .h, en el mismo sitio que las acciones:

@property (nonatomic, strong) UILabel *label;

Una vez hecho, nos tendrá que quedar así:

Ahora vamos a editar el .m. Al abrirlo, nos encontraremos con algo bastante diferente del .h. Siempre debemos de escribir debajo del @interface (si estamos en el .h) o del @implementation (si estamos en el .m). Ahora, las propiedades que hemos declarado en el .h debemos de implementarlas en el .m con los @synthesize, de forma que pongamos un @synthesize y a continuación el puntero de nuestro objeto pero sin * seguido de ; . También tenemos que copiar la acción, pero esta vez reemplazando el ; por un par de llaves. Debería quedar así:

iphone ipad ipod touch programacion español sdk tutoriales aplicacion aprender

Ahora tenemos que poner qué queremos que realice la acción. Para ello vamos a escribir lo siguiente dentro de las llaves de dicha acción:

label.text=textField.text;
[textField setText: @” ”];

Con estas dos líneas decimos que al pulsar el botón, el texto que hay en el cuadro de texto se aplique a la etiqueta, y que el cuadro de texto se quede en blanco. Cuando lo que queremos es escribir cómo se llama algo o el texto que contiene, se hace mediante una arroba y comillas “ ” que delimitan el principio y el final y se escriben mediante Shift + 2. Una vez escrito el código, tendrá que quedarnos así:

iphone ipad ipod touch programacion español sdk tutoriales aplicacion aprender

Por último sólo queda añadir estos elementos a la interfaz gráfica y conectarlos con su correspondiente Outlet. Ahora debemos hacer click en el Storybard. Nos aparecerá una cuadrícula y en medio una pantalla de iPhone en blanco. Si nos fijamos a la derecha de la ventana de Xcode, tenemos una columna, y si no aparece tenemos que pulsar el segundo icono empezando por la derecha de arriba del todo. Abajo tenemos una serie de iconos, y arriba varias pestañas. Las que más utilizaremos son la cuarta y la sexta. En la cuarta vamos a modificar los objetos y en la sexta vamos a conectarlos con sus Outlets. Vamos a centrarnos primero abajo. Tenemos un montón de objetos, etiquetas, botones, mapas, navegadores… Primero, tenemos que buscar un Label (etiqueta) y arrastrarlo a nuestra vista en Storyboard. Una vez puesto, podemos modificar su tamaño, y con la cuarta pestaña de la columna izquierda su color, tipo de letra…

A continuación, debemos buscar un Text Field (cuadro de texto) y arrastrarlo como hemos hecho con la etiqueta. Hacemos lo propio con un Round Rect Button (botón). Una vez que los hemos colocado en nuestra pantalla, debemos de conectarlos con sus vistas. Para ello tenemos que seleccionar donde dice View Controller a la izquierda (debajo de First Responder) y hacemos click en la sexta pestaña de la columna izquierda. Nos aparecerán varios nombres y secciones, pero nos interesa en especial las secciones Outlets y Received Actions. En Outlets veremos los punteros de nuestros objetos, y en Received Actions nuestra acción, si nos fijamos, a la derecha tienen unos círculo, unos vacíos y otros negros. Si hacemos click en un círculo y lo arrastramos, veremos como se crea una fecha azul que sigue el puntero. Con ese método vamos a realizar las acciones.

Entonces, en la sección Outlet, arrastramos nuestro círculo de label y lo soltamos sobre nuestra etiqueta, que se habrá remarcado de azul. Hacemos lo mismo con el Text Field. Ahora, vamos a conectar la acción. Nos vamos a Received Actions y cogemos el círculo de nuestra acción texto. Lo arrastramos y lo soltamos sobre el botón. Veremos que nos aparece una serie de opciones, de las cuales tendremos que elegir Touch Up Inside. Nos debería quedar así:

iphone ipad ipod touch programacion español sdk tutoriales aplicacion aprender

Y esto es todo. Para probar la aplicación tenemos que hacer click sobre el botón Run que encontraremos en la parte superior izquierda. Entonces, si todo ha salido bien, nos aparecerá en pantalla Build Succeeded. A continuación, aparecerá el simulador de iOS corriendo la aplicación que acabamos de hacer. Para probarla, hacemos click en el cuadro de texto, escribimos cualquier cosa y pulsamos el botón. Si hemos seguido todos los pasos, aparecerá el texto que hemos escrito en la etiqueta y el cuadro de texto se habrá quedado en blanco.

iphone ipad ipod touch programacion español sdk tutoriales aplicacion aprender

Además, hemos hecho un vídeo muy cortito, donde hacemos rápidamente este pequeño ejemplo por si os habéis perdido en algún paso:

Si el ejemplo no te ha salido bien, te dejamos el proyecto para que te lo descargues, y mirar en que has fallado. Puedes descargarlo desde aquí. Esto ha sido todo en la introducción de nuestro curso de iOS, en el siguiente capítulo aprenderemos a manejar los mapas en iOS usando el Framework MapKit. Si tenéis alguna duda no dudéis en preguntar bien mediante un comentario en este post o bien escribiéndonos un tweet en @Maquecitos.

¡Esperamos que os haya gustado! ;)

16 pensamientos en “Aprende a programar para iOS: Introducción

  1. leonel

    Muy buen tuto, seguire visitandolos, voy comenzando en este mundo del IOS, felicidades por la explicacion, solo me perdi un poco en el detalle cuando mencionabas “columna izquierda” y era la derecha (view) pero nada grave (a lo mejor yo lei mal), LOS FELICITO nuevamente y les agradezco que compartan el conocimiento, espero y puedan continuar, cada vez haciendo cosas mas complejas que por aqui los seguire, un saludos a todos

    Responder

Deja un comentario