Wednesday, June 11, 2014

HOLA HONDURAS


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.


Wednesday, March 19, 2014

¿Por dónde empiezo?

Que tal gente?, talvez estan preguntandose en este momento, por donde empiezo?, sera que tengo lo que necesito para desarrollar para iOS, que lenguaje de programación tengo que saber, etc...

Hago estos comentarios porque hace algunos años pasé por esto mismo; al principio cuando se quiere aprender algo nuevo se tiene la incertidumbre de si vale la pena, si se podra hacer y demás. Pues me gustaría decir que desarrollar para iOS Vos Podes.

Lo primero que me gustaría hacer en este Blog es animarte y decirte que con un poco de esfuerzo y  determinación en cuestión de algún tiempo estarás subiendo tu primera App en el App Store.

Creo que si venis empezando has de estar pensando "Necesito una infinidad de cosas para desarrollar en esta plataforma", pues te informo que NO, lo único que necesitas para empezar es:
- Una computadora con OS X
- XCode
- Internet
- Tu Cerebro

Creo que esto es algo de lo que te empiezan a hablar en todos los libros y tutoriales de iOS que empezas a leer y fue de las primeras cosas que me pasó a mi: "Que monton de términos!!!!"


NOTA:
Como todos tenemos Wikipedia no voy a dar definiciones exactas de los términos nuevos que vayamos utilizando en este Blog, si no que trataré de dar una pequeña y facil explicacion de lo que yo he ido comprendiendo que es cada cosa (Asi que no esperen definiciones exactas ni perfectas, es mas estoy seguro que voy a tener algunos términos equivocados y más bien espero que algunos de los usuarios más avanzados vayan diciendome si algo esta mal y con gusto lo voy editando.  Tampoco esperen la mejor redacción ya que esto lo estaré haciendo en mi tiempo libre y no dedicare tanto esfuerzo en la revision del texto, si no de transmitir un poco de mis experiencias al momento de entrar en esta plataforma).


Trataré de hacerme las preguntas que me hice hace algunos años para responderme como un yo del futuro y tal vez de esta forma le pueda servir a alguien que vaya leyendo este Blog.

¿Que es OS X?
- Para empezar OS X es el sistema operativo que utilizan las computadoras personales de Apple en sus Mac's. Una Mac es como tu PC pero hecha por Apple, PC es un termino que no les  gusta que se utilice para referenciarlos a ellos porque lo introdujo IBM uno de los grandes competidores de Apple.

¿Que es XCode?
- XCode Es la herramienta que nos brinda Apple para hacer Aplicaciones, segun lo veo yo lo que le conviene a apple es darnos las herramientas de desarrollo lo mas facil posible ya que asi podemos subir nuestras Apps y empezarlas a vender cuanto antes.
Y como todo es negocio, sin animos de desilucionarte te informo que un porcentaje de las apps que vendas en el App Store es de Apple, la ultima vez que lei creo que estaba un 30% para Apple y un 70% para el desarrollador. Asi que de ahi podes ver cual es la urgencia de Apple de que subas buen contenido y que se pueda vender lo mas rapido posible. Esta herramienta es bastante intuitiva y asi como los productos de Apple tiene un sin fin de utilidades que facilitan el uso de la misma.

-- ¿Pero entonces solo puedo hacer Apps para Apple con sus computadoras?
La respuesta corta es SI, algunos tutoriales o lecturas te van a salir con que si podes compilar en otras plataformas o que podes hacer tu maquina pirata que pueda correr OS X, pero para efectos de no complicarte mas tu lectura te recomiendo mejor buscar hacerte con tu Mac

-- Pero es que las Mac's son carisimas, ¿Que Mac debo comprar y me va a servir?
Pues como les digo hay bastante lectura ya por internet de que si me va a servir una Mac para desarrollo o no, lo que les quiero compartir es por lo que pase yo. Pues asi como algunos aqui me imagino se han puesto a leer miles de cosas que no se entienden a primera vista, pero yo habia tomado la decision de comprarme una Mac Mini del 2011 que segun lo que habia leido era lo suficiente para empezar a desarrollar para iOS, así que esto ya depende de su presupuesto, en lo personal al final pude conseguir un poco mas de dinero y me compré una MacBook Pro del 2011 la cual sigo utilizando para mis proyectos personales y responde de lo mejor. No me he considerado un "FanBoy" de ninguna marca y primero me gusta evaluar cada aparato antes de criticar, pero en lo personal Apple me compró después de utilizar esta Mac por casi 3 años ya y sin ningun problema.

-- Ya tengo mi Mac y XCode ¿Y ahora que?
Pues aqui fue donde empece a ver todo al revés, ya tengo todo lo que necesito pero no se por donde arrancar, empece a ver que existen miles de tutoriales y manuales en internet, incluso libros completos for dummies, etc... pero lo que queria en ese momento era ya poder ver mi primera aplicacion funcionando en mi iPhone para enseñarselas a mis amigos. Pues solo te digo "Calma mi querido Padawan" es un camino largo, pero como te dije al principio con esfuerzo y determinación en poco tiempo podras tener tu aplicacion lista.

Para los que ya tienen su Mac Lista, en el próximo Post les traere el famoso "Hola Mundo" de nosotros los programadores y algunas de las experiencias que pasé yo al momento de querer ver

Mas adelante les ire comentando un poco de donde me iba estancando un poco porque eran demasiados términos a la vez.

Espero que esta lectura te ayude un poco en tu inicio como iOS Developer o por lo menos espero poder compartir experiencias con otras personas que han entrado a este mundo del desarrollo movil.