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! ;)

Comentarios

  1. dice

    Me parece una muy buena propuesta! La verdad es que falta contenido sobre programación para iOS en castellano y se agradecen ejemplos y explicaciones como esta.

    Yo personalmente hace relativamente poco tiempo empecé con un Screencast sobre programación que se puede encontrar en iTunes: “Rumbo a la AppStore”.

    Encuentro que al post le faltan referencias a libros interesantes (la mayoría en inglés), o a otras alternativas como por ejemplo:
    – Podcast de José Antonio Lobato (85% cocoa)
    – Screencas de Diego Freniche (www.cafeycocoa.com.es)
    Ambos en castellano e imprescindibles si se está empezando.

    Espero que no abandonéis la idea de seguir con estos tutoriales.

    Ánimo y un saludo!

  2. dice

    Hola!

    Sí, esperemos que el proyecto funcione y gracias por los ánimos. Ya iremos metiendo más contenido y daremos referencias para que los lectores puedan disponer de más herramientas para trabajar.

    Un saludo

  3. dice

    Hola iJoe

    Muchísimas Gracias, la verdad es que llevamos ya bastante tiempo trabajando en esta sección y teníamos muchas ganas de lanzarla. Será un placer tenerte como lector, y para cualquier problema, duda o sugerencia, estamos a tu entera disposición.

    Un saludo

  4. dice

    Mmm es raro, a mi nunca me ha salido (ni me sale) la opción de Single View Application, siempre he trabajado con la View-Based Application que veo que no te sale en.

    Tengo el Xcode a la última versión, ¿Cuál es la que has usado para el tutorial? Tengo curiosidad.

      • dice

        Vale si, cierto, se me ha rallado la App Store. Me salía como que tenía la última versión (4.1) pero acabo de darme cuenta dede la web que la última es la 4.2.1 (y por tu comentario).

        Lo estoy actualizando manualmente porque desde la App Store no me deja.

        Thx!

  5. SNiPeR dice

    Tengo millones de dudas que me surgen, me ha sido prácticamente súper difícil encontrar un buen sitio (ojo!) donde venga algo explicado en español, y los totorales son geniales, a falta de que fueran en HD para poder ver las letras perfectamente mientras lo dejas en pause… jejeje pero por el resto perfecto, pero aún me quedan muchas lagunas en los tutoriales, como…

    @synthesize esto que hace..

    -(IBAction)texto:(id)sender; <- esto vale.. la acción pero, … no tiene por que estar relacionado al botón si no que sea crea y punto, IBaction, nombre interno.. texto el nombre que tu quieras darle para identificar… ese id pinta algo especial ahí ? y el sender.. enviar.. vale, pero tiene algún valor más posible que ponerse ahí ? o eso va así a capón.

    Creo deducir que en .h solo se declaran acciones y en .m se declaran lo que va a ejecutar.. como en el caso que cuando se pulse.. el primer paso se da valor al campo de arriba, y luego se pone en blanco.. si no me equivoco.. corregidme..

    @property (nonatomic, strong) UILabel *puntero;

    property… no se que realiza, nonatomic qué es? que propiedades pueden tener esos paréntesis tanto nonatomic como strong, están por algo ? puede haber otros valores?

    Lo siento… estas son mis dudas..! es que no encuentro un pdf o un algo que explique todo este tipo de cosas, si podéis orientarme con algo… buscare soluciones o echaré un ojo o algo.. podíamos intentar crear una comunidad/foro para aprendices y dudas,… etc.. no sé!

    saludos y gracias!

    • Álvaro dice

      Hola SNiPeR,

      Es normal que te surjan dudas, y más en temas de programación. Te cuento, @synthesize sirve para terminar la declaración de la propiedad de una variable. Es siempre así. En cuanto a (nonatomic, strong) son las dos propiedades que se le dan a las declaraciones.

      Lo de IBAction es la forma general de las acciones, lo único que hay que editar es el nombre, que puede ser el que prefieras.

      Un saludo.

  6. dice

    Hola SNiPeR,

    No te cortes al preguntar, para eso estamos, para ayudarte en todo lo que podamos. Solo puedo decir, de momento, que el vídeo si lo pones en 720p se ve bien el texto, así que si no quieres perder detalle con el texto, sube la calidad ;)

    Sobre las dudas, el propio Álvaro te lo aclarará ;)

    Un saludo

  7. SNiPeR dice

    Hola Hugo, .. joe acabo de echar un vistazo y si da la opción de 720.. te aseguro que anoche no me la daba :S y vi varios vídeos de youtube y me dejaba los ojos como un bobo jaja

    pero vaya… bueno obviar esa parte y disculpad!

  8. dice

    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

Deja un comentario