sábado, septiembre 19, 2009

GeneXus y iPhone II

En este post les cuento como transformar tu aplicación web para iPhone en una aplicación nativa Objective-C.
La ventaja es que no parece una aplicación web y no muestra las barras de dirección y la barra de navegación del browser, permitiendo aprovechar al máximo la pantalla.
Las desventajas (al menos las que me encontré yo en mi primer aplicación) son que no podes abrir nuevas ventanas (tipo target=_blank) y que no podés guardar cookies como lo harías en el browser común.

La primer desventaja es facil de sobrellevar ya que no hay necesidad de navegar hacia otra ventana, es más, se me ocurre que lo mas prolijo y el mejor método para que parezca una aplicación no-web es diseñar la pantalla utilizando un "gran" div que sirva de contenedor e ir modificando sus elementos via ajax, asi nunca "cambiamos" ni siquiera de pagina.
Yo haría una pagina, llamemosle aindex.aspx (es un procedure GX main http). Esta pagina tiene dentro un div "contenedor" con 2 divs hijos "header" y "body". El div header se reescribe por javascript, si es necesario, cada vez que se cargan nuevos contenidos en el div body y al div body se le va cambiando el contenido via ajax usando jquery (para aprovechar los efectos de transicion), de esta forma siempre estariamos parados en index.aspx. Pero esto es solo una idea.

La segunda desventaja se puede solucionar utilizando el motor de base de datos que tiene incorporado el iPhone y crear una tabla donde almacenar las cookies, sesiones o cualquier otro dato que se necesite.

Bien, tenemos nuestra aplicación web (ver post GeneXus y iPhone) y queremos transformarla en una aplicación nativa iPhone. Voy a tratar de hacerlo en forma de wizard asi queda mas ordenado:

1) Conseguite una Mac o una maquina Intel, instalate el MacOS Leopard 10.5.X o instalate alguna distro de MacOSX86 para pc e instalá el SDK del iPhone.

2) Abrí el XCode y seleccioná crear una aplicación "view-based", ponele un nombre que tenga que ver con tu aplicación web, para este ejemplo le pongo "Eventos".




3) Localizá el archivo EventosViewController.h, abrilo en el editor y modifcalo para dejarlo asi:

#import <>
@interface EventosViewController:UIViewController {
IBOutlet UIWebView *webView;

}
@property (nonatomic, retain) UIWebView *webView;
@end




4) Localizá el archivo EventosViewController.xib y abrilo haciendo doble click, te debería abrir un editor llamado Interfase Builder que sirve para diseñar las pantallas. Arrastrá desde la librería de controles el control llamado UIWebView.
Luego tenés que hacer un link entre el objeto File's Owner y la UIWebView que agregaste... esto lo haces cliqueando con el botón derecho en File's Owner y arrastrando hasta la UIWebView y seleccionando "view" en las opciones que te presenta. Ya podés salvar y cerrar el Interfase Builder.






5) Localizá el archivo EventosViewController.m, abrilo y modificalo para dejarlo asi (cambiando la url para apuntar a tu aplicacion) ... aca se ve feo, pero en el editor no es tan entreverado:

#import "EventosViewController.h"
@implementation EventosViewController
@synthesize webView;
-(id)initWithNibName:(NSString *)nibNameOrNil bundle:(NSBundle *)nibBundleOrNil {
if (self = [super initWithNibName:nibNameOrNil bundle:nibBundleOrNil]) {
}
return self;
}
-(void)viewDidLoad {
NSString *urlAddress = @"http://www.miservidor.com/eventos/aindex.aspx";
//Create a URL object. NSURL *url = [NSURL URLWithString:urlAddress];
//URL Requst Object
NSURLRequest *requestObj = [NSURLRequest requestWithURL:url];
//Load the request in the UIWebView.
[webView loadRequest:requestObj];
}
-(BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation {
// Return YES for supported orientations
return (interfaceOrientation == UIInterfaceOrientationPortrait);
}
-(void)didReceiveMemoryWarning {
[super didReceiveMemoryWarning];
}
-(void)dealloc {
[webView release];
[super dealloc];
}
@end



6) Cliqueá el boton Build & Go del XCode y listo!! Ya tenes una aplicación iPhone nativa!
Luego podes modificar el archivo Eventos-info.plist (es el archivo de configuración de la aplicación) para agregarle datos, como por ejemplo, el nombre, el ícono (debe ser un png de 57x57 pixels), etc etc.

Resumiendo, poniendo un poco de pienso en alguna funcionalidad de la aplicación que utilice cookies u otra funcionalidad que no se comporte como debe (que a mi no me sucedió) y escribiendo solo unas pocas lineas de código, tenemos una aplicación iPhone ... lo bueno, además, es que esta aplicación "cambia" segun cambiemos el código en nuestro server ya que esta hosteada allí.
Se podría también importar todos los fuentes de la aplicación web al proyecto en XCode y apuntar la UIWebView a un archivo local a la aplicación ... pero esto depende de la naturaleza de la aplicación... si se nutre de la web no tiene sentido ya que de todos modos consumiría datos el server... no se.. es otro approach válido.

Una vez que lograste compilar y ejecutar esto en el simulador del iPhone en el SDK, seguramente te sientas entusiasmado y quieras transferir la aplicación a tu celular para probarla y para mostrarle a tus amigos!!!
Bueno... no te emociones mucho, porque eso que parece una tontería no es para nada sencillo (@Enrique: ojalá fuera solo transferirla con iTunes al teléfono).

Pero esto.... esto es lo que guardamos para el siguiente post!!!
( y si che... tanto tiempo sin escribir nada que tengo que ir largando de a poco las cosas!!)

Si te sirvió el tutorial, regalanos una cerveza!!










2 comments:

Enrique Almeida dijo...

Buen aporte..
Seguimos esperando la serie completa!.

Gabriel dijo...

Impecables los 2 posts.
No creo que siga los pasos ya que no paso del primero, me tengo que comprar una Mac.
Pero es bueno que compartas esta experiencia y que lo dejes documentado en algun sitio, me voy a guardar la pagina para un futuro.

muchas gracias