lunes, 11 de agosto de 2014

Desarrollo de Apps iOS 2

Capitulo 2

Mi primera app "Hello World"

Imagina, Crea y Desarrolla.


Este sera el resultado de este capítulo en nuestros blog esta semana, para los que no estan siguiendo nuestro avance o no saben como instalar el entorno xCode o crear una application nueva en xCode le sugiero revisen las entradas anteriores les dejo los links:
Bueno gente pues manos a la obra.
Como primer paso es identificar donde se encuentra nuestra aplicacion de xCode en nuestra Mac después de ser instalado se encuentra en Volumen -> Applications -> xCode(Version) y le damos click y esperamos a que se ejecute.
Después crearemos un nuevo Empty Application y en sus parametros de configuración pondremos algo así:
Simplificare un poco estos datos:
  • Product Name : HelloWorld - Este sera el nombre de tu aplicación.
  • Company Identifier : com.Appcoda - Recuerda este es el nombre actual del domino de tus servicios dados de alta en el apple store como desarrollador.
  • Class prefix : XYZ - xCode por default selecciona esta clase en un futuro podremos cambiarla para usar una de nuestra preferencia pero para este tutorial utilizaremos esta.
  • Devices : iPhone - Este es el tipo de dispositivo que sera compatible con nuestra application.
  • Use Core Data : Sin checar - Para este tutorial no se necesita asi que la dejaremos sin seleccionar.
Después tendremos que dar click en next y nos preguntara donde queremos guardar nuestra aplicacion y le daremos next, una vez que nuestro xcode termino de cargar todo lo necesario nos aparecera la siguiente pantalla.
 Ahora para probar que le nuestra aplicación esta creada le daremos click al boton de RUN que se encuentra en nuestra barra de herramientas del programa xCode.

Automaticamente nuestro xCode cargara el simulador del dispisitivo que tenemos seleccionado en este caso seria un iPhone Retina de 3.5-pulgadas, y como aún no tenemos nada en nuestro proyecto se cargara una pantalla en blanco se tendria que ver algo así:

Les mensiono que si tienen una mac con poca memoria el simulador podria tardar hasta algunos minutos en ser lanzado en mi caso estoy usando un MacBook Pro con procesador 2.3 GHz Intel Core i5 con 8GB de memoria RAM 1333 MHz DDR3 y corre bastante bien pero como minimo les sugiero unos 4 GB de memoria para tener un rendimiento no tan lento.
Bueno una vez dicho esto tambien les comento que por default aparece este simulador con ese dispositivo pero nosotros podemos cambiarlo simplemente dando click sobre donde dice (iPhone Retina (3.5 - inch)) nos saldra una lista desplegable donde podremos seleccionar el dispositivo que creamos más conveniente.
Regresando al codigo nos posisionamos sobre la carpeta que nuestro xCode nos creo con el titulo HelloWord y daremos click derecho del mouse y seleccionamos New File. Nos aparecera la ventana con las categorias de cocoa-touch, algo así:
Dejamos el tipo de clase que esta seleccionado por default el Objetive-C class y daremos click y nos aparecerá la siguiente pantalla donde nos pedira el nombre de nustra clase y el tipo:
  • Class: HelloWorldViewController: Este sera el nombre con el que identificaremos la clase, ViewController hace referencia hacia que tipo de elemento esta enfocado en este caso para una vista.
  • Subclass of: UIViewController: Este es el tipo de elemento al que estara asociada la clase pero de igualmanera puede ser a varios tipos "Explicación en proximos videos".
  • With XIB for user interface: Opcional: Esta opción si es selecionada nos crea automaticamente una interface o pantalla en blanco asociada a esta clase tambien puede estar sin seleccionar pero nos nos creara una vista para este tutorial la dejaremos seleccionado.
Le daremos click en Next, para que nos cargue nuestro espacio de trabajo con nuestro XIB pantalla en blanco y nuestras dos clases, deberia verte mas o menos así:
El XIB es el rectangulo en blanco que se ve en la imagen y las clases que creamos estan seleccionadas de lado izquierdo en nuestro árbol de archivos.
Ahora del lado inferior derecho de nuestra zona de trabajo aparece una serie de objetos si bajamos o subimos el cursor nos mostrara más, para este tutorial usaremos uno llamado Button, que se encuentra al inicio de la lista y lo agregaremos a nuestro XIB, pero ¿Como lo agrego? muy facil solo seleciona el objeto que usaras y si soltarlo lo pones en tu XIB y Magia nuestro objeto ha sido agregado.
Ahora nos pondremos sobre el boton que acabamos de agregar y le daremos un dobre click pausado "Como cuando cambiamos el nombre a un archivo o a otra carpeta" para que podamos editar el nombre y le pondremos a nuestro boton "Hello World", tendria que verse algo así:
Hasta este punto si corremos nuestra aplicacion nos seguira poniendo en blanco aun que ya tengamos un boton que dice "Hello World" en nuestra interface, ¿Por que pasa esto? Si bien ya tenemos una interface no le hemos echo saber eso a nuestra aplicacion asi que sigue ejecutando un pantalla en blanco, para solucionar eso debemos ir a nuestra clase AppDelegate.m (que se encuentra en nuestro árbol de archivos) y debemos importar nuestra nueva clase para esto al inicio de la clase AppDelegate.m ye tenemos un impor asi que seguido de ese debemos porner nuestra clase así:
#import "HelloWorldViewController.h"
y en nuestro metodo llamado application debemos decir que inicie con nuestra pantalla XIB, ¿Como?
agregandi las siguientes lineas de codigo despues de 
“self.window.backgroundColor = [UIColor whiteColor]“.
 así:
HelloWorldViewController *viewController = [[HelloWorldViewController alloc] initWithNibName:@"HelloWorldViewController" bundle:nil];
self.window.rootViewController = viewController;
Al final nuestra clase AppDelegate.m debe verse de esta forma:
 Ahora SI,  al correr nuestra application nos mostrara esto:
Es tiempo de pasar a nuestras propias clases.
Nos iremos a nuestra clase que se llama HelloWolrdViewController.h y antes del codigo @end
pondremos nuestra siguente linea:
-(IBAction)showMessage;
El codigo completo debe verse asi:
#import <UIKit/UIKit.h>

@interface HelloWorldViewController : UIViewController

-(IBAction)showMessage;

@end
Después debemos ir a nuestra clase HelloWolrdViewController.m y antes del codigo @end pondremos
estas lineas:
- (IBAction)showMessage
{
    UIAlertView *helloWorldAlert = [[UIAlertView alloc]
                                    initWithTitle:@"My First App" message:@"Hello, World!" delegate:nil cancelButtonTitle:@"OK"
                                                                                        otherButtonTitles:nil];
   
    // Display the Hello World Message
    [helloWorldAlert show];
}
Al final nuestra clase debe verse de esta forma:

 Conectar mis metodos con mis objetos

Ya tenemos el codigo creado que se ejecutara cuando nuestro boton Hello World sea pulsado pero ¿Cómo
enlazamos los dos? Bueno si damos click sobre nuestra XIB nos abrirá la pantalla de diseño de pantalla 
en la parte inferior izquierda de nuestra area de trabajo tenemos un triangulo inclinado si le damos click
nos mostrara nuestro menú de objetos y metodos, cuando sea visible daremos click a nuestro boton y sin
soltarlo(Como si fueramos a moverlo de lugar) mantendremos presionada nuestra tecla de "Control" o "ctrl"
y trataremos de arrastrar nuestri boton hacia la opcion de "File's Owner" se daran cuenta que el boton no
se mueve, en su lugar aparece una linea azul.

Cuando ya estemos sobre el "File's Owner", soltaremos el boton "ctrl" y el Click del mouse y nos aparecera
una pequeña lista donde mostrara el nombre del metodo que ya hemos creado antes en nuestra clase .h
Seleccionamos nuestro metodo creado "showMessage" y asi nuestro boton queda asociado con nuestro metodo
cada vez que le demos click sobre el boton Hello World ejecutara el metodo showMessage.
 
Felicidades Gente acaban de crear su primer application de xCode para iOS en dispositivos iPhone.

Trate de explicar lo mejor posible cada paso si necesitan o tienen algún comentario la parte de abajo es para eso. Cualquier aporte es bienvenido.!!
Si te gusto o sirvio este tutorial compartelo o comenta, te dejo mis contactos y espero verlos en el proximo tuto mi gente.

Twitter
iOSev3n

Gmail
+Eric Vargas “iOSev3n”

"El Lenguaje de la Informática es binario, eres un 1 o un 0, vives o mueres! "

No hay comentarios.:

Publicar un comentario