HOLA MUNDO
Y como mencione en mi Post anterior, ya es costumbre que el primer paso para entrar a un nuevo lenguaje de programación sea el más sencillo. Actualmente Apple está introduciendo un nuevo lenguaje propietario de ellos llamado Swift, pero para efectos de este tutorial estaré utilizando Objective-C que es el principal lenguaje que ha implementado apple para sus plataformas y que seguirán utilizando por varios años, mas adelante mostrare la misma guia utilizando como base Swift.
Estoy asumiendo que tienen lo siguiente para seguir este tutorial:
-Una Mac
-Xcode
En realidad esto es lo único que necesitan, la versión de Xcode que estoy utilizando para el tutorial es la Version 5.1.1 (5B1008), pero en teoria pueden utilizar cualquier versión porque es un ejemplo bastante básico.
Algunos tutoriales y guías mencionan que se necesita una cuenta developer de apple la cual cuesta $100.00 al año, pero esto es únicamente necesario si quieren probar sus aplicaciones en un dispositivo fisico iPod, iPhone o iPad. De nuevo para mantener las cosas lo más sencillo posible únicamente vamos a utilizar los simuladores que vienen incluidos con Xcode.
Pues si ya tienen lo necesario arrancamos; una de las primeras confusiones que tuve al momento de empezar a programar para iOS fue al entrar a Xcode, esta es la primera pantalla que se nos mostrará cuando iniciemos la herramienta, la cual es para seleccionar proyectos existentes o crear uno nuevo, seleccionaremos “Create a new Xcode project”
Aquí es donde vino mi confusión, Xcode viene con varios templates de tipos de aplicaciones que podemos seleccionar para empezar a programar y no tener que hacerlo nosotros desde cero, en tutoriales mas adelante mostrare la diferencia de cada uno de ellos y algunos ejemplos de en que caso se deberían utilizar, para completar este tutorial solamente necesitamos una aplicacion que nos muestre una pantalla dentro del dispositivo para lo cual la opción que utilizaremos es la de “Single View Application”.
Este tipo de template ya trae una vista que se muestra dentro del dispositivo para el cual estamos desarrollando.
Vista: Una vista es el objeto más simple para mostrar contenido dentro de un aparato, una vista puede contener varias vistas dentro de ella misma. En el template que estamos utilizando la vista principal es llamada window(Si apple una window jeje), dentro de esta vista principal es donde se irán agregando las demás vistas para mostrarle contenido al usuario.
Seleccionemos la opción “Single View Application” y le damos Next, nos aparecerá la siguiente ventana:
El Product Name es el nombre que le queremos dar a nuestro proyecto, para efectos del tutorial le pondremos “HolaMundo”, en Organization Name pueden utilizar el nombre de su empresa o en cualquier caso su propio nombre, en Company Identifier lo que se sugiere es utilizar el nombre de dominio al inverso example.com seria com.example.
Cada Aplicacion debe tener un identificador unico para apple, por lo cual Xcode trata de generar uno en el Bundle Identifier concatenando los dos campos anteriores. De igual forma las Clases necesitan un prefijo y por defecto Xcode le coloca XYZ de igual forma lo dejaremos así para este tutorial. Por último se debe seleccionar para que aparato estamos queriendo desarrollar nuestra aplicacion pudiendo ser iPhone, iPad o Universal. Seleccionamos iPhone y damos Next.
NOTA: Estoy asumiendo que tienen conocimiento basico de programacion para poder seguir este tutorial, ya que se necesita saber un poco que son Clases, métodos, variables, constantes, metodologías de programación como ser MVC, etc… etc…
Por último cuando le demos Next nos preguntará donde queremos guardar nuestro proyecto, en este caso pueden guardarlo en el escritorio para que sea de facil acceso.
Una vez creado nuestro proyecto se nos mostrará nuestro espacio de trabajo de la siguiente manera, iré explicando poco a poco como se divide este espacio a medida vayamos avanzando con nuestras aplicaciones.
Como les mencione anteriormente estamos utilizando un template de lo más básico que nos da apple, el cual en sí ya es una aplicacion y si son un poco desesperados como yo, queremos ver nuestra aplicacion lo mas pronto posible, para esto podemos correr este template y ver que es lo que nos muestra apple ya predefinido en su “Single View Application”, asi que presionemos el boton de correr(Play) que se encuentra en la parte superior izquierda seleccionando antes un simulador en el cual queremos ver lo que estamos desarrollando.
Una vez que corramos nuestra primera App y sin haber escrito ni una linea de código, esto es lo que veremos
Un iPhone simulado dentro de nuestra mac, mostrando una view llamada window de color blanco, y pues felicidades tienen su primera aplicacion corriendo en un dispositivo apple, claro esta aplicacion no ganara ningun premio ni estara en el top de las descargas en algún tiempo cercano, pero es un inicio.
UN POCO DE DISEÑO
Bueno algo que me costó entender al principio fue lo siguiente, Todo lo que podes agregar visualmente desde el asistente de diseño de Xcode se puede agregar Programáticamente.
El asistente de diseño se llama “Interface Builder” en muchos tutoriales lo escucharan como IB, este asistente nos permite agregar botones, campos de texto, etiquetas en fin cualquier vista que queramos agregar a nuestra window (Recuerdan que les dije que window era nuestra primera vista y que las vistas podian tener mas vistas dentro de ella pues esto es lo que haremos acontinuacion).
Lo que les mencionaba anteriormente en Interface Builder se puede agregar cualquier vista que necesitemos, pero de igual forma esta misma vista se puede hacer programáticamente desde cero, pero gracias a apple nos ahorramos bastante tiempo haciéndolo de forma visual.
Agreguemos visualmente una vista que nos muestre algo en la pantalla a parte de una ventana blanca, para abrir Interface Builder o IB en corto solo tenemos que hacer click en el storyboard de nuestra aplicacion, mas adelante explicare que es un storyboard pero para avanzar únicamente hagan 1 click el archivo que se muestra en la siguiente imagen llamado Main.storyboard
Esto nos abrirá la siguiente interfaz donde podremos empezar a agregar visualmente lo que necesitamos dentro de nuestra aplicacion (hago énfasis en lo de visualmente porque aún no se ha tocado ni una sola linea de codigo pero ya el usuario puede ver cosas en la pantalla de sus dispositivo), esto es lo que que veremos en nuestro asistente visual
Y si, para los que ya se estan imaginado, esta es nuestra pantalla en blanco que estamos viendo en nuestro simulador, nuestra primera y principal vista. Una vez abierto nuestro asistente visual en la parte inferior derecha se mostrará una lista de objetos que podemos utilizar dentro de nuestra aplicacion, los cuales incluyen controladores y vistas, mas adelante explicare que es un controlador y como funciona pero por los momentos concentrémonos en las vistas
Busquemos dentro de nuestra lista de objetos una llamada label. Como pueden leer en lapequeñaa descripción es un objeto que nos permite agregar una cantidad variable de texto estático(Algo un poco descriptivo para decir Texto en la pantalla que el usuario no puede tocar)
Para agregar nuestro label a nuestra pantalla lo único que tenemos que hacer es mantener presionado el objeto y jalarlo a nuestra Main View. Una vez agregado el label deberemos tener algo como la siguiente imagen en nuestro interface builder, coloquemoslo en el centro de la pantalla y modifiquemos el ancho para que sea el de toda la view principal
Una vez que tenemos nuestro label en la view podemos seleccionarlo, cada vista dentro del interface builder cuenta con sus propiedades que pueden ser modificadas en esta interfaz visual, para un ejemplo podemos seleccionar el label y luego hacer click en este icono
El cual es llamado muy inteligentemente “Attribute inspector”, cada vista cuenta con sus propias propiedades que pueden ser modificadas desde aquí. Hagamos una pequeña prueba, agreguemos visualmente nuestro texto “Hola mundo” en esta interfaz, para esto modificamos el texto que aparece en lugar de label y le pones el Alignment en el centro
Ahora nuevamente corramos nuestra aplicacion y veamos que aparece en pantalla
Y ahora podemos ver en nuestro simulador un label en el centro de la pantalla con el texto “Hola mundo”, algo útil y sin haber tocado una sola linea de codigo, excelente.
Pueden hacer las pruebas que quieran modificando las propiedades, como cambiar la alineacion, modificar la fuente y su tamaño, color etc…
EMPECEMOS A PROGRAMAR
Como se habran podido dar cuenta todo esto ha sido visualmente que se ha creado, una parte muy importante de una buena aplicacion es un buen diseño iremos viendo un poco de integración de diseño y programación a lo largo de estos tutoriales, por los momentos dejemos nuestro diseño lo más simple, hasta ahora tenemos una main window y dentro de esa main window una subvista de tipo label con el texto “Hola mundo”.
Ahora pasemos a otra parte importante de nuestra estructura de archivos, nuestro controlador. Para algunos programadores que ya tienen experiencia en la metodoligia de desarrollo MVC(Model View Controller) esto se les hará muy familiar, para los que aún no tienen experiencia pues una forma sencilla de verlo es: el controlador(ViewController) es lo que controla(valga la redundancia) lo que sucede entre la vista y el modelo, un pequeño diagrama que me sirvió cuando estaba empezando fue este
El proposito de esta guia no es ahondar mucho en estos temas, para lo cual recomiendo al programador curioso buscar un poco mas de informacion de esta metodología MVC.
Por los momentos es suficiente entender que nuestra vista principal necesita de un controlador que “controle” su codigo, nuestra vista principal por ejemplo esta siendo controlada por el archivo ViewController
Algo que no entendía al principio era la diferencia entre la extensión .h y .m se los digo en corto, entre los dos forman una clase que es ViewController, la extensión .h le permite a otras clases saber los métodos y propiedades con los que cuenta esta clase ViewController.m así que deben estar juntos, luego veremos como agregar mas clases manualmente nosotros, por ahora estemos tranquilos que el template que nos genero Xcode hizo todas las conexiones necesarias entre el controlador y la vista.
Si seleccionamos nuestro archivo ViewController.h veremos el siguiente codigo
No explicare a detalle lo que hace este código ya que es un template y hay bastante informacion en internet, así que al lector curioso le recomiendo haga una búsqueda con nuestro amigo google si quiere más información.
Una parte muy importante que tuve que entender con el tiempo fue al responder esta pregunta ¿Como conecto mi parte visual con mi código? La respuesta corta es mediante Outlets, gracias a una opción muy simple que nos proporciona Xcode esto se hace en un segundo, únicamente se debe seleccionar la parte visual y jalar hacia la parte programática lo cual generara un Outlet, en pocas palabras un Outlet es la conexión que se ha hecho entre un objeto visual con nuestro código.
¿Como hago esto de Outlets?
Esto puede resultar un poco confuso la primera vez que se hace pero luego será lo que haremos a cada momento entonces trataré de explicarlo de la manera más sencilla.
1. Seleccionamos nuestro Main.storyboard desde nuestra estructura de archivos en la parte superior izquierda
2. Abrimos una opción que se llama Assistant Editor que se encuentra en la parte superior derecha de Xcode
3. Esto nos separara nuestra interface en 2 partes de la siguiente manera
Ahora ya se va viendo un poco mejor lo que necesitamos, la conexión de nuestro label deberá ser hecha primero como un Outlet para poner este Outlet lo podemos hacer en el archivo ViewController.h o ViewController.m, lo mas recomendable seria hacerlo en la extensión .h ya que esa es la cabecera de nuestra clase pero por cuestiones de simplicidad lo mantendremos en un solo archivo en nuestra clase ViewController.m
4. Para hacer la conexión entre nuestro label con el codigo lo unico que tenemos que hacer es jalar nuestro label manteniendo presionada la tecla Ctrl de nuestra mac hacia la el código de nuestra derecha, exactamente entre @interface ViewController() y @end de la siguiente manera
5. Esto nos abrirá la siguiente ventana con algunas opciones que debemos llenar
Para no complicar más las cosas por el momento dejaremos las opciones tal y como estan unicamente agregando el nombre de nuestro outlet al cual llamaremos “miLabel” sin comillas
esto agregara el siguiente código dentro de nuestra clase ViewController
Felicidades acabas de hacer tu primera conexión entre la parte visual con tu código, esto se llama un Outlet, si te fijas en el lado izquierdo hay un pequeño círculo justo a la par de @property, esto quiere decir que nuestro outlet está bien conectado con nuestra parte visual, algunas veces esta conexión se puede perder ya sea porque borramos el objeto en el interface builder u alguna otra acción, si se pierde la conexión entre tu outlet y el código, el círculo aparecerá con el centro vacío.
Hasta el momento hemos generado este código de forma automática, ahora escribiremos nuestro primer código, algo muy sencillo pero necesario para que nuestro Outlet pueda ser modificado desde nuestro código.
6. En nuestra implementación(@implementation) del código agregamos lo siguiente
@synthesize miLabel;
Nuestro código quedará de la siguiente manera
Ahora para explicar en forma general, al sintetizar nuestra propiedad miLabel le estamos dando automáticamente nuestros métodos setters y getters al mismo tiempo (para los que tienen un poco de experiencia entenderán este concepto) lo cual permite acceder a propiedades dentro de nuestra clases como ser el texto lo cual haríamos de la siguiente forma miLabel.text, es más lo haremos en este momento.
Hasta este momento tenemos bien conectado nuestro Outlet(Nuestro label dentro de nuestro codigo como una propiedad) y lo sintetizamos para poder acceder a sus propiedades desde cualquier parte de nuestra clase, ahora haremos lo siguiente.
miLabel.text = @"Hola como estas?";
¿Pero que es esto? se preguntaran, de esta forma es como le decimos exactamente a nuestra parte visual que queremos darle ese texto en la propiedad text que modificamos en el interface builder (Espero que recuerden -_-), lo que estaríamos modificando desde nuestro código seria lo siguiente
De esta forma mostraremos el texto “Hola como estas?” en vez de nuestro “Hola mundo” inicial
La otra pregunta que me costó entender
¿Donde agrego este codigo -_-?
Pues hay varios métodos que permiten acceder a nuestra vista en determinado momento, nuestro querido template fue suficientemente cortez para agregar 2 metodos a nuestro código el método viewDidLoad() y el método didReceiveMemoryWarning() y si como se lo imaginan el método que estaremos utilizando es el de cuando nuestra vista haya cargado y tal como Apple trata de describir la forma que utilizan Objective-C, lo más descriptivo y humanamente legible que se pueda, viewDidLoad() vistaHayaCargado()
¿Ahora que queremos que haga nuestro código cuando nuestra vista haya cargado? Pues sencillo que modifique el texto de nuestro label y de nuevo les muestro este pequeño código que hace lo que necesitamos con nuestro outlet
miLabel.text = @"Hola como estas?";
y como habrán adivinado lo agregamos a nuestro método viewDidLoad() de la siguiente manera
Y para los que estan desesperados para ver que pasa, de nuevo corran el programa en su simulador y deberán ver lo siguiente.
Como ven combinamos las dos cosas lo que añadimos en la parte visual con la parte programática, de esta forma se abren un sin fin de oportunidades donde podemos conectar los varios tipos de objetos que trae Xcode y utilizarlos dentro de nuestra aplicacion. Ire explicando poco a poco cada uno de ellos e iré agregando más funcionalidades a nuestro primer proyecto Hola Mundo, puede escribir preguntas o consultas en los comentarios de este blog, o si sienten que le hizo falta algo a la pequeña guia solo haganmelo saber y lo que quiero mostrarles con esto es que iOS vos Podes.
