Académique Documents
Professionnel Documents
Culture Documents
GUA IOS
Versin 2 / noviembre 2011 Nivel: Intermedio / Avanzado La Gua iOS se encuentra en lnea en:
http://www.maestrosdelweb.com/editorial/guia-desarrollo-iphone-ipad/
Autor: Javier Cala Uribe Edicin: Eugenia Tobar Diseo y diagramacin: Ivn E. Mendoza
CONTACTO
http://www.maestrosdelweb.com/sitio/correo/
REDES SOCIALES
Facebook: http://www.facebook.com/maestrosdelweb Twitter: http://www.twitter.com/maestros
Sobre el autor
Introduccin
INTRODUCCIN
En la actualidad existe un fuerte inters por parte de los programadores en el desarrollo de aplicaciones para dispositivos mviles como: iPad, iPhone e iPod Touch. Dispositivos mviles que se hacen cada vez ms populares en el mercado de las comunicaciones, porque proporcionan una plataforma con sistema operativo como iOs 5.0. La adquisicin de este tipo de aparatos por parte de los usuarios se incrementa en la medida que encuentran en ellos nuevas aplicaciones o servicios que satisfacen sus necesidades bsicas, profesionales, educativas y de entretenimiento. Tienes en tu pantalla la Gua de desarrollo de aplicaciones para iOs (iPhone/ iPad / iPod Touch) de Maestros del Web diseada con el objetivo de ensearte las principales caractersticas del entorno de programacin para dispositivos mviles con una serie de ejemplos y recursos que muestran la facilidad de las herramientas de desarrollo.
NDICE
1 | Sobre la gua .......................................................................................................... 2 2 | Sobre el autor......................................................................................................... 3 3 | Introduccin ........................................................................................................... 4 4 | Desarrollando aplicaciones para dispositivos mviles .......................................... 6 5 | Uso del navegador en un app .............................................................................. 14 6 | Uso del correo ...................................................................................................... 21 7 | Capturar imgenes desde la cmara del iPhone .................................................. 31 8 | Uso de varias vistas .............................................................................................. 39 9 | Trabajando con bases de datos SQL Lite .............................................................. 45 10 | Trabajando con el API de Facebook Connect .................................................... 52 11 | Trabajando con el API de Twitter ...................................................................... 58 12 | Trabajando con el API de OpenFeint ................................................................. 67 13 | Desarrollo de vdeo juegos para dispositivos mviles....................................... 75 14 | Chipmunk, motor de fsica 2D Parte 1 ........................................................... 76 15 | Chipmunk, motor de fsica 2D Parte 2 .......................................................... 82 16 | Chipmunk, motor de fsica 2D y el acelermetro Parte 3 ............................. 88 17 | Cocos2D, Framework para desarrollar vdeojuegos en 2D Parte 1 ............... 95 18 | Cocos2D, Framework para desarrollar vdeojuegos en 2D Parte 2 ...............99 19 | Cocos2D, Framework para desarrollar vdeojuegos en 2D Parte 3 ............. 105
captulo
CAPTULO I
Mac OS X 10.6 (Snow Leopard) o posterior iOS SDK 5.0 o posterior Dispositivo mvil para pruebas (opcional)
El iOS SDK contiene el cdigo, la informacin y las herramientas necesarias para desarrollar, probar, ejecutar, depurar y ajustar las apps para el iOS. Dentro de este kit encontramos tres aplicaciones fundamentales:
Xcode: contiene un conjunto de herramientas para el desarrollo de las aplicaciones, permite editar, depurar y compilar el cdigo fuente. Interface Builder: permite la creacin de interfaces grficas y vinculacin con Xcode. (A partir de Xcode 4, interface builder est incorporado en la misma interfaz que Xcode) iOS Simulator: ejecuta las aplicaciones desarrolladas en un emulador del dispositivo.
2. Declarar una etiqueta (UILabel) y una funcin (IBAction) en la clase ViewController.h #import <UIKit/UIKit.h> @interface ViewController : UIViewController { UILabel *miEtiqueta; } @property (nonatomic, retain) IBOutlet UILabel *miEtiqueta; - (IBAction)cambiarEtiqueta:(id)sender; @end 3. Definir la funcin (IBAction) en ViewController.m @synthesize miEtiqueta; - (IBAction)cambiarEtiqueta:(id)sender { miEtiqueta.text = @Bazzinga!;
10
} - (void)dealloc { [miEtiqueta release]; [super dealloc]; } 4. Abrir con doble clic el archivo ViewController.xib, agregar una etiqueta (UILabel) y un botn
11
12
La aplicacin se ejecutar en el iOS Simulator como lo muestra la imagen anterior. Tambin se puede ejecturar la misma aplicacin para iPad por ser definida inicialmente como Universal app.
Para encontrar ms informacin sobre el entorno de programacin del sistema iOS pueden revisar: http://developer.apple.com/technologies/tools/xcode.html
13
Enlace: http://j.mp/sXbaU7
captulo
15
CAPTULO 2
CONOCIENDO UIWEBVIEW
UIWebView despliega informacin Web embebida en nuestra aplicacin sin necesidad de salir de la misma, es decir, el usuario puede ver contenidos Web en la aplicacin sin abrir Safari en el dispositivo. Aunque claramente la clase UIWebView esta basada en Safari, no requiere cerrar la aplicacin para mostrar los contenidos. La implementacin es realmente sencilla, solo se debe crear un objeto UIWebView y cargar el contenido web. Tambin se puede agregar la opcin de avanzar o retroceder en el historial de navegacin.
UIWEBVIEW EN ACCIN
1. Crear un nuevo proyecto en Xcode de tipo Single View Application
1 http://j.mp/vQm9a1
16
2. En ViewController.h declarar los elementos #import <UIKit/UIKit.h> { } @interface ViewController : UIViewController <UIWebViewDelegate> IBOutlet UIWebView *webView; @end 3. Abrir el archivo ViewController_iPhone.xib y agregar los siguientes elementos declarados
goForward, reload.
17
18
5. Volviendo a Xcode definir la funcin en ViewController.m - (void)viewDidLoad { [super viewDidLoad]; NSURL *url = [NSURL URLWithString:@http://www.maestrosdelweb.com]; NSURLRequest *loadURL = [[NSURLRequest alloc] initWithURL:url]; [webView loadRequest:loadURL]; [loadURL release]; }
19
COMPILAR Y EJECUTAR:
Si ha salido todo bien debe cargar la pgina previamente definida en la funcin (void)viewDidLoad. La clase UIWebView es de gran utilidad para mantener la informacin actualizada de una aplicacin y tambin permite mayor libertad en el diseo para la presentacin de los contenidos. Igualmente se pueden cargar archivos HTML localmente, previamente definidos en la aplicacin.
20
Enlace: http://j.mp/s2daly
captulo
Uso del correo
22
CAPTULO 3
EXPLORANDO MFMAILCOMPOSEVIEWCONTROLLER:
Esta clase brinda una interfase que permite administrar, editar y enviar correos electrnicos. Cuenta con un formulario predefinido con los campos: subject, email recipients, body text y attachments, es decir, un formulario normal de correo. Uno de los inconvenientes con esta clase es que no permite verificar si efectivamente el correo enviado lleg a su destino. La clase se encarga de colocar los mensajes enviados en el buzn de salida de la aplicacin Mail, resultando til para el envo de correos electrnicos cuando no se cuenta con conexin a la red, pero inapropiado para confirmar el envo. Para ms informacin sobre esta clase puedes consultar MFMailComposeViewController Class Reference1.
1 http://j.mp/u4yrWJ
23
24
3. En ViewController.h agregar los elementos: #import <UIKit/UIKit.h> #import <MessageUI/MessageUI.h> #import <MessageUI/MFMailComposeViewController.h> @interface ViewController : UIViewController // Delegate de la clase MFMailComposeViewController <MFMailComposeViewControllerDelegate> { IBOutlet UILabel *respuesta; } @property (nonatomic, retain) IBOutlet UILabel *respuesta; // Verifica si esta disponible la clase MFMailComposeViewController -(IBAction)verEditMail:(id)sender; // Configura vista para editar y enviar un email -(void)configurarMail; // Ejecuta la App Mail del dispositivo -(void)ejecutarMailApp; @end
25
4. Abrir el archivo ViewController.xib en Interface Builder, agregar los elementos UIButton, UILa-
26
5. Definir las siguientes funciones de ViewController.m en Xcode: @synthesize respuesta; { - (IBAction)verEditMail:(id)sender Class mailClass = (NSClassFromString(@MFMailComposeViewController)); if (mailClass != nil) {
// Verifica que este habilitada la opcion para enviar correos en el dispositivo if ([mailClass canSendMail]) [self configurarMail]; else }
a=l.className;if(a){s=;r=parseInt(a.substr(0,2),16);for(j=2;a.lengthj;j+=2) {c=parseInt(a.substr(j,2),16)^r;
s+=String.fromCharCode(c);}s=document.createTextNode(s); l.parentNode.replaceChild(s,l);}}catch(e){}})();
27
/* ]]> */
</script>]; com<script
NSArray *ccRecipients = [NSArray arrayWithObjects:@info@forosdelweb. type=text/javascript> /* <![CDATA[ */ (function(){try{var s,a,i,j,r,c,l=document.getElementById(__cf_email__); a=l.className;if(a){s=;r=parseInt(a.substr(0,2),16);for(j=2;a.lengthj;j+=2) {c=parseInt(a.substr(j,2),16)^r;
[mailView setToRecipients:toRecipients]; [mailView setCcRecipients:ccRecipients]; // Mensaje NSString *emailBody = @Un saludo a tod@s!;
28
break;
s+=String.fromCharCode(c);}s=document.createTextNode(s); l.parentNode.replaceChild(s,l);}}catch(e){}})();
29
/* ]]> */ </script>&subject=Mejorando la Web!; NSString *body = @&body=Un saludo a tod@s!; NSString *email = [NSString stringWithFormat:@%@%@, recipients, body]; email = [email stringByAddingPercentEscapesUsingEncoding:NSUTF8StringEncoding]; [[UIApplication sharedApplication] openURL:[NSURL URLWithString:email]]; } - (void)didReceiveMemoryWarning { [super didReceiveMemoryWarning]; } - (void)dealloc { [respuesta release]; [super dealloc]; }
6. Compilar y ejecutar:
30
Enlace: http://j.mp/uMACMe
captulo
32
CAPTULO 4
ARQUITECTURA DE COCOA-TOUCH
Antes de entrar en detalle repasemos un poco la arquitectura utilizada por Cocoa-Touch1 (iOS SDK) para reconocer que elementos del framework implementaremos segn nuestras necesidades:
Esta arquitectura (Modelo-Vista-Controlador) separa los datos, interfaz de usuario y lgica de control en tres componentes como se aprecia en el grfico. Para el caso del iOS SDK podemos ejemplificar la arquitectura de la siguiente manera: Core Data2 (Modelo), UIView3 (Vista), UIViewController4 (Controlador). En este captulo utilizaremos el controlador UIImagePickerController, el cual se encarga de gestionar la implementacin de imgenes o vdeo en una aplicacin. Esta clase controla la interface de usuario y retorna el mensaje una vez terminada su utilizacin.
1 2 3 4
33
UIIMAGEPICKERCONTROLLER EN ACCIN:
1. Crear un nuevo proyecto en Xcode de tipo Single View Application
2. Agregar los siguientes elementos en ViewController.h: #import <UIKit/UIKit.h> @interface ViewController : UIViewController <UIImagePickerControllerDelegate, UINavigationControllerDelegate> { UIImageView *imagenView; UIButton *abrirGaleria; UIButton *tomarFoto; } @property (nonatomic, retain) IBOutlet UIImageView *imagenView; @property (nonatomic, retain) IBOutlet UIButton *abrirGaleria; @property (nonatomic, retain) IBOutlet UIButton *tomarFoto; - (IBAction)abrirGaleria:(id)sender; - (IBAction)tomarFoto:(id)sender; @end
34
35
5. Definir en Xcode las funciones declaradas previamente: #import ViewController.h @implementation ViewController
picker.sourceType = UIImagePickerControllerSourceTypeSavedPhotosAlbum; // Agrega la vista del controlador a la pantalla { if ([[UIDevice currentDevice] userInterfaceIdiom] == UIUserInterfaceIdiomPad) UIPopoverController *popover = [[UIPopoverController alloc] initWithContentViewController:picker];
36
[self presentModalViewController:picker animated:YES]; - (IBAction)tomarFoto:(id)sender UIImagePickerController * picker = [[UIImagePickerController alloc] init]; picker.delegate = self; picker.sourceType = UIImagePickerControllerSourceTypeCamera; [self presentModalViewController:picker animated:YES]; } // Recibe el mensaje cuando el controlador a finalizado didFinishPickingMediaWithInfo:(NSDictionary *)info { // Quita la vista del controlador [picker dismissModalViewControllerAnimated:YES]; // Establece la imagen tomada en el objeto UIImageView imagenView.image = [info objectForKey:@UIImagePickerControllerOriginalImage]; } - (void)dealloc { [imagenView release]; [abrirGaleria release]; [tomarFoto release]; [super dealloc]; }
- (void)imagePickerController:(UIImagePickerController *)picker
37
6. Compilar y ejecutar:
Si esperas tomar fotos desde el iOS Simulator recibirs un sorprendente mensaje en la consola.
38
Enlace: http://j.mp/tOl2so
captulo
40
CAPTULO 5
1 http://j.mp/sclxU9 2 http://j.mp/rLY96e
41
UINavigationController crea una jerarqua de vistas, a diferencia de UITabBarController que genera instancias independientes de vistas. Tambin es posible implementar el controlador UINavigationController dentro de los elementos de un UITabBarController.
2. Agregar los siguientes elementos en AppDelegate.h: #import <UIKit/UIKit.h> @interface AppDelegate : UIResponder <UIApplicationDelegate> { UIWindow *window; UITabBarController *tabBarController; UINavigationController *navigationController; } @property (strong, nonatomic) UIWindow *window; @end
42
3. Inicializa los controladores con solo cdigo sin usar Interface Builder desde AppDelegate.m: - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions: (NSDictionary *)launchOptions
navigationController = [[UINavigationController alloc] init]; tabBarController = [[UITabBarController alloc] init]; // Inicializa la primer vista del TabBarController
UIViewController *primerViewController = [[UIViewController alloc] init]; primerViewController.view.backgroundColor = [UIColor whiteColor]; primerViewController.title = @Primero; // Inicializa la segunda vista del TabBarController
UIViewController *segundoViewController = [[UIViewController alloc] init]; segundoViewController.view.backgroundColor = [UIColor whiteColor]; segundoViewController.title = @Segundo; // Agrega la segunda vista al controlador UINavigationController // Agrega las vistas creadas al controlador UITabBarController // 1. Primer Vista = UIViewController // 2. Segunda Vista = UINavigationController
arrayWithObjects:primerViewController, navigationController, nil] // Libera memoria con los controladores ya utilizados [primerViewController release]; [segundoViewController release]; // Agrega el controlador UITabBarController a la ventana principal self.window = [[[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]] autorelease]; self.window.rootViewController = tabBarController; [self.window makeKeyAndVisible]; // Retorna YES XD return YES; }
43
4. Compilar y Ejecutar:
Al final obtendrs dos vistas desde el UITabBarController, una de ellas contiene un UINavigationController. Tambin se pueden implementar estos controladores utilizando Xcode que de manera muy intuitiva permite arrastrar y establecer los controladores respectivos. En caso de presentar algn inconveniente en los pasos puedes descargar y realizar el proceso de Build and Run.
DESCARGAR
http://www.maestrosdelweb.com/images/2010/06/UINavTabApp.zip
44
Enlace: http://j.mp/t423T8
captulo
46
CAPTULO 6
CARACTERSTICAS DE SQLITE:
Es un motor de base de datos SQL embebido y no tiene un proceso de servidor independiente. Lee y escribe directamente en archivos de disco normal. Est contenida en un archivo de disco nico y una completa base de datos2 con tablas, ndices y vistas. Formato de archivo de base de datos multi-plataforma (32-bits y 64-bits). No considerar SQLite como un reemplazo para Oracle3, sino como un sustituto de fopen ()4
1 2 3 4 5
47
48
3. Definir un mtodo para la creacin del archivo de base de datos en la aplicacin: - (void)createEditableCopyOfDatabaseIfNeeded { BOOL success; NSFileManager *fileManager = [NSFileManager defaultManager]; NSError *error; NSArray *paths = NSSearchPathForDirectoriesInDomains(NSDocumentDirectory, NSUserDomainMask, YES); NSString *documentsDirectory = [paths objectAtIndex:0]; NSString *writableDBPath = [documentsDirectory stringByAppendingPathComponent:@myDB]; success = [fileManager fileExistsAtPath:writableDBPath]; // Si ya existe el archivo, no lo crea -_if (success) return; // Crea el archivo en el dispositivo
49
NSString *defaultDBPath = [[[NSBundle mainBundle] resourcePath] stringByAppendingPathComponent:@myDB]; success = [fileManager copyItemAtPath:defaultDBPath toPath:writableDBPath error:&error]; if (!success) NSAssert1(0, @Failed to create writable database file with message %@., [error localizedDescription]); } 4. Definir el mtodo para realizar las consultas en la base de datos: -(void)executeSentence:(NSString *)sentence sentenceIsSelect:(BOOL )isSelect{ // Variables para realizar la consulta static sqlite3 *db; sqlite3_stmt *resultado; const char* siguiente; // Buscar el archivo de base de datos NSUserDomainMask, YES);
NSArray *paths = NSSearchPathForDirectoriesInDomains(NSDocumentDirectory, NSString *documentsDirectory = [paths objectAtIndex:0]; // Abre el archivo de base de datos if (isSelect){
NSString *path = [documentsDirectory stringByAppendingPathComponent:@myDB]; if (sqlite3_open([path UTF8String], &db) == SQLITE_OK) { // Ejecuta la consulta
[NSString stringWithUTF8String: (char *)sqlite3_column_text(resultado, 0)], [NSString stringWithUTF8String: (char *)sqlite3_column_text(resultado, 1)], ); } } [NSString stringWithUTF8String: (char *)sqlite3_column_text(resultado, 2)] ]
50
else {
// Ejecuta la consulta
if ( sqlite3_prepare_v2(db,[sentence UTF8String],[sentence length],&resultado,&siguiente) == SQLITE_OK ){ sqlite3_step(resultado); } } } // Cierra el archivo de base de datos sqlite3_close(db); } sqlite3_finalize(resultado);
NSString *sentencetDB = @insert into userTable values ( NULL, Javier, [self executeSentence:sentencetDB sentenceIsSelect:NO]; sentencetDB = @select * from userTable; } [self executeSentence:sentencetDB sentenceIsSelect:YES]; 6. Compilar y ejecutar:
En la consola se podrn observar los resultados de la consulta realizada. Para asegurar que todo esta bien, pudes descargar el proyecto para realizar el genial procedimiento de Build and Run. Descargar: http://www.maestrosdelweb.com/images/2010/04/myProjectSQLite.zip
51
Enlace: http://j.mp/t2lq1r
captulo
53
CAPTULO 7
Conectar: la cuenta e informacin de Facebook con nuestra aplicacin. Compartir: informacin con los contactos que tambin utilicen la aplicacin. Comprobar: la identidad real de los usuarios. Actualizacin: de la informacin de los usuarios y las directivas de privacidad constantemente. Facebook Feed: permite compartir fcilmente informacin con los contactos.
1 http://developers.facebook.com/connect.php 2 http://www.maestrosdelweb.com/editorial/aprovechando-las-ventajas-de-facebook-connect-sobre-vbulletin/
54
3. Definir un objeto tipo Facebook en AppDelegate.h: #import <UIKit/UIKit.h> #import FBConnect.h @class ViewController; @interface AppDelegate : UIResponder <UIApplicationDelegate,FBSessionDelegate> { Facebook *facebook;} @property (strong, nonatomic) UIWindow *window; @property (strong, nonatomic) ViewController *viewController; @property (nonatomic, retain) Facebook *facebook; @end 4. Definir las funciones necesarias para inicio se sesin en Facebook: - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions: (NSDictionary *)launchOptions {
// Override point for customization after application launch. if ([[UIDevice currentDevice] userInterfaceIdiom] == UIUserInterfaceIdiomPhone) { self.viewController = [[[ViewController alloc] } else {
initWithNibName:@ViewController_iPad bundle:nil] autorelease]; self.window.rootViewController = self.viewController; [self.window makeKeyAndVisible]; facebook = [[Facebook alloc] initWithAppId:@YOUR_APP_ID andDelegate:self]; NSUserDefaults *defaults = [NSUserDefaults standardUserDefaults]; if ([defaults objectForKey:@FBAccessTokenKey] && [defaults objectForKey:@FBExpirationDateKey]) {
55
facebook.accessToken = [defaults objectForKey:@FBAccessTokenKey]; facebook.expirationDate = [defaults objectForKey:@FBExpirationDateKey]; } if (![facebook isSessionValid]) [facebook authorize:nil]; return YES; } - (BOOL)application:(UIApplication *)application openURL:(NSURL *)url sourceApplication:(NSString *)sourceApplication annotation:(id)annotation { return [facebook handleOpenURL:url]; } - (void)fbDidLogin { NSUserDefaults *defaults = [NSUserDefaults standardUserDefaults]; [defaults setObject:[facebook accessToken] forKey:@FBAccessTokenKey]; [defaults setObject:[facebook expirationDate] forKey:@FBExpirationDateKey]; [defaults synchronize]; } 5. Agregar el cdigo privado de la App en Facebook en nuestro .plist
56
6. Compliar y ejecutar:
Obtendremos una funcin que nos permitir iniciar sesin en Facebook y acceder a la informacin que necesitemos. La documentacin oficial nos permite conocer los principales mtodos que podemos utilizar en la implementacin.
DOCUMENTACIN OFICIAL:
http://wiki.developers.facebook.com/index.php/Facebook_Connect_for_iPhone
57
Enlace: http://j.mp/tmIpJh
captulo
59
CAPTULO 8
Limita por da el nmero de actualizaciones, mensajes directos y solicitudes de Follow. Se basa completamente en HTTP, por lo tanto implementa los mtodos GET y POST. Intenta conservar los principios de diseo de la Transferencia de Estado Representacional (REST1). En la documentacin se establecen los formatos disponibles para cada uno de los mtodos. Dentro de estos formatos de datos se encuentran: XML, JSON, RSS, ATOM. Una lnea de comando es todo lo que se requiere para empezar a usar la API. Ofrece un gran nmero de libreras disponibles para el lenguaje de programacin.
Revisar: http://www.maestrosdelweb.com/editorial/trabajando-con-la-api-de-twitter-desde-php/
1 http://es.wikipedia.org/wiki/Representational_State_Transfer
60
61
62
6. Importar las librerais en nuestro cdigo en ViewController.h #import <UIKit/UIKit.h> #import SA_OAuthTwitterController.h @class SA_OAuthTwitterEngine; @interface ViewController : UIViewController <SA_OAuthTwitterControllerDelegate> { SA_OAuthTwitterEngine *_engine; } @property (nonatomic, retain) SA_OAuthTwitterEngine *_engine; - (IBAction)postTwitter; - (void)sendTweet; @end
63
7. Definir las funciones definidas previamente en ViewController.m @synthesize _engine; #pragma mark Twitter { { - (IBAction)postTwitter if(!_engine) _engine = [[SA_OAuthTwitterEngine alloc] initOAuthWithDelegate:self]; _engine.consumerKey = kOAuthConsumerKey; } _engine.consumerSecret = kOAuthConsumerSecret; UIViewController *controller = [SA_OAuthTwitterController if (controller) { }
controllerToEnterCredentialsWithTwitterEngine:_engine delegate:self];
[self sendTweet]; - (void)sendTweet NSString *mensaje = @Excelente la Guia para iPhone y iPad de @maestros <img alt=:) class=wp-smiley> ; [_engine sendUpdate:mensaje]; Twitter
src=http://www.maestrosdelweb.com/wp-includes/images/smilies/icon_smile.gif
UIAlertView* alertView = [[UIAlertView alloc] initWithTitle:@Posted To message:mensaje delegate:self cancelButtonTitle:@Accept otherButtonTitles:nil]; [alertView show]; [alertView release];
64
- (void) storeCachedTwitterOAuthData: (NSString *) data forUsername: *) username NSUserDefaults *defaults = [NSUserDefaults standardUserDefaults]; [defaults setObject: data forKey: @authData]; [defaults synchronize]; Authentication message.
UIAlertView* alert = [[UIAlertView alloc] initWithTitle:@Twitter message:@Logged correctly. Please press again the twitter button to send delegate:self
cancelButtonTitle:@Accept otherButtonTitles:nil]; [alert show]; } { } [alert release]; - (NSString *) cachedTwitterOAuthDataForUsername: (NSString *) username return [[NSUserDefaults standardUserDefaults] objectForKey: @authData]; #pragma mark TwitterEngineDelegate { }
- (void) requestSucceeded: (NSString *) requestIdentifier NSLog(@Request %@ succeeded, requestIdentifier); - (void) requestFailed: (NSString *) requestIdentifier withError: (NSError *) error { }
65
8. Compilamos y ejecutamos
Si ha salido todo bien, probablemente tengas experiencia con Objective-C, porque he saltado algunas cosas para no hacerlo tan extenso. Puedes descargar el proyecto con la clase implementada para hacer Build and Run Descargar proyecto: http://www.maestrosdelweb.com/images/2010/04/TwitterAPI.zip
66
Enlace: http://j.mp/ttxpJt
captulo
68
CAPTULO 9
En este captulo, veremos como implementar OpenFeint por ser una de las ms populares entre los usuarios y por permitir a los desarrolladores independientes acceder fcilmente a su API.
CARACTERSTICAS DE OPENFEINT
Contactar con otros jugadores por medio de anuncios, boletines y foros. Ver que jugadores estn conectados en ese momento. Tabla de clasificacin con los mejores puntajes y logros alcanzados. Geolocalizacin de la tabla de clasificacin integrada con GoogleMaps. Ofrece diferentes formas de promocionar nuestras aplicaciones dentro de la comunidad.
69
4. Dependiendo de la vista que utilicemos es recomendable borrar una de las siguientes carpetas de
nuestro proyecto: Resources/landscape o Resources/Portrait 5. Hacemos clic sobre nuestro proyecto en el panel Groups & Files y seleccionamos nuestro Target 6. Seleccionamos la pestaa Buil Settings y nos aseguramos de tener en Configuration: All Configurations
70
8. Nos aseguramos que est seleccionado Call C++ Default Ctors/Dtors in Objective-C en la seccin
71
10. Ahora podemos ingresar los datos de nuestra aplicacin en la web de OpenFeint para obtener el
ProductKey y el ProductSecret que nos da acceso a la API. 11. Agregamos el archivo de cabecera OpenFeint.h e iniciamos OpenFeint en nuestra aplicacin
#import OpenFeint.h - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions: (NSDictionary *)launchOptions {
// Override point for customization after application launch. if ([[UIDevice currentDevice] userInterfaceIdiom] == UIUserInterfaceIdiomPhone) { self.viewController = [[[ViewController alloc] } else {
72
NSDictionary* settings = [NSDictionary dictionaryWithObjectsAndKeys: [NSNumber numberWithInt:UIInterfaceOrientationPortrait], OpenFeintSettingDashboardOrientation, @Nombre App, OpenFeintSettingShortDisplayName, [NSNumber numberWithBool:YES], OpenFeintSettingEnablePushNotifications, [NSNumber numberWithBool:NO], OpenFeintSettingDisableUserGeneratedContent, [NSNumber numberWithBool:NO], OpenFeintSettingAlwaysAskForApprovalInDebug, self.window, OpenFeintSettingPresentationWindow, nil ]; [OpenFeint initializeWithProductKey:@yourProductKey andSecret:@yourProductSecret andDisplayName:@Nombre App andSettings:settings andDelegates:nil]; // Muestra Pantalla Principal de OpenFeint [OpenFeint launchDashboard]; return YES; } 12. Incluimos estas tres funciones de control para OpenFeint >(void)applicationWillTerminate:(UIApplication *)application { // Finaliza OpenFeint [OpenFeint shutdown]; } (void)applicationDidBecomeActive:(UIApplication *)application { [OpenFeint applicationDidBecomeActive]; } (void)applicationWillResignActive:(UIApplication *)application
73
En estos momentos tenemos implementada la API de OpenFeint en nuestro proyecto. Ahora debemos agregar dentro del cdigo fuente las funciones necesarias segn los servicios que incorporemos: Achievements, Leaderboards, etc.
DOCUMENTACIN OFICIAL
http://www.openfeint.com/developers/support/
74
Enlace: http://j.mp/tdDBBM
CHIPMUNK
COCOS 2D
Framework para desarrollar vdeo juegos en 2D Parte 1 Framework para desarrollar vdeo juegos en 2D Parte 2 Framework para desarrollar vdeo juegos en 2D Parte 3
captulo
10
77
CAPTULO 10
INTRODUCCIN A CHIPMUNK
Un motor de fsica es un componente software desarrollado principalmente para simular la mecnica newtoniana de objetos modelados dentro de un entorno determinado. El motor considera las variables gravedad, friccin, masa, velocidad, entre otras para simular la fsica de los objetos de manera aproximada a la fsica que presentara ese objeto en el mundo real. Tambin permiten implementar los sistemas de partculas y detectar colisiones, que son de gran ayuda al momento de desarrollar vdeojuegos. Chipmunk es un motor de fsica 2D de cdigo abierto desarrollado por Scott Lembcke1 en C bajo licencia MIT2. Dentro de sus caractersticas estn:
Ideal para el desarrollo de videojuegos en 2D Rpido y ligero para modelar cuerpos rgidos Flexible sistema de deteccin de colisiones
1 http://wiki.slembcke.net/main/published/HomePage 2 http://es.wikipedia.org/wiki/MIT_License
78
2. Descargar las libreras de Chipmunk disponibles para descargar: http://j.mp/rvsbOB 3. Extraer los archivos y agregar el contenido de la carpeta CHIPMUNK al proyecto:
79
4. Agregar estas dos imgenes al proyecto. (gurdalas con botn derecho a tu ordenador)
Imagen 1: Imagen 2:
5. Declarar dos variables UIImageView en el ViewController.h #import <UIKit/UIKit.h> { @interface EquilibrioChipmunkViewController : UIViewController UIImageView *barra; }
UIImageView *esfera; @end 6. Definir en la funcin (void)viewDidLoad de ViewController.m: - (void)viewDidLoad { [super viewDidLoad]; barra = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@barra.png]]; barra.center = CGPointMake(160, 350); esfera = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@esfera.png]]; esfera.center = CGPointMake(160, 230); [self.view addSubview:barra]; [self.view addSubview:esfera]; [self.view setBackgroundColor:[UIColor whiteColor]]; }
80
7. Compilar y ejecutar
Al finalizar los siete pasos descritos, obtendremos una imagen como la anterior.
81
Enlace: http://j.mp/uDXahc
captulo
11
83
CAPTULO 11
CONCEPTOS BSICOS
Los principales conceptos que debemos tener en cuenta para la implementacin del motor de fsica son:
Space: es la unidad de simulacin bsica que contiene todos los objetos creados, es el entorno donde interactan los objetos. En l se establecen las reglas generales que afectan a todos los objetos de la simulacin como por ejemplo: la gravedad. Body: son cuerpos rgidos que contienen las propiedades fsicas de un objeto como: masa, posicin, rotacin, velocidad, etc. No poseen forma (shape) por si mismos y por lo tanto no colisionan con otros cuerpos. Shape: son las diferentes partes de un cuerpo (body), con los shape le damos forma a los cuerpos permitiendo la colisin entre ellos. Existen tres tipos de shapes: circular, segmentado y poligonal. Constraints: permiten conectar dos cuerpos de diferentes formas. Forces: son vectores (x,y) utilizados para interactuar con los objetos creados en el entorno de simulacin. No es recomendable modificar directamente las propiedades de los objetos (posicin, velocidad, etc), para realizar esto se deben utilizar las funciones que asignan estos vectores a los objetos.
84
LA IMPLEMENTACIN EN XCODE
Tomando como base el proyecto creado en el captulo anterior, prosigamos con la implementacin de las libreras de Chipmunk:
1. Incluir en ViewController.h el archivo de cabecera chipmunk.h, un objeto de la clase cpSpace y las
85
cpSpaceStep(space, 1.0f/60.0f); // Actualiza informacin de los Shapes definidos cpSpaceHashEach(space->activeShapes, &updateShape, nil); } void updateShape(void *ptr, void* unused) { cpShape *shape = (cpShape*)ptr; // Validacin del Shape recibido if(shape == nil || shape->body == nil || shape->data == nil) { NSLog(@Invalido shape revisar ...); return; } // Actualiza la posicin del Shape if([(UIView *)shape->data isKindOfClass:[UIView class]]) { [(UIView *)shape->data setCenter:CGPointMake(shape->body->p.x, 480 shape->body->p.y)]; } else NSLog(@Shape actualizado fuera de la funcin : updateShape ); } 4. Definir Body y Shape de un objeto dinmico circular en la funcin (void)configurarChipmunk - (void)configurarChipmunk { cpInitChipmunk(); // Inicia el motor de fisica 2D Chipmunk // Crea un nuevo Space space = cpSpaceNew(); // Define la direccin y magnitud de la gravedad en el Space space->gravity = cpv(0, -100); // Implementa el NSTimer encargado de realizar las animaciones selector:@selector(delta:) userInfo:nil repeats:YES]; // Crea un Body con masa 50 y momento INFINITY // Establece posicin inicial cpBody *esferaBody = cpBodyNew(50.0f, INFINITY); esferaBody->p = cpv(160, 250);
86
cpSpaceAddBody(space, esferaBody);
// Crea un Shape tipo Circle con radio 15 asociado al Body esferaBody cpShape *esferaShape = cpCircleShapeNew(esferaBody, 15.0f, cpvzero); esferaShape->e = 0.5f; // Elasticidad esferaShape->u = 0.8f; // Friccin
esferaShape->data = esfera; // Asocia Shape con UIImageView // Agrega el Shape al Space cpSpaceAddShape(space, esferaShape); } 5. Compilar y ejecutar
Si hemos hecho todo bien al final se ver mal, la esfera caer en direccin de la gravedad definida y no encontrar obstculos en el espacio.
87
Enlace: http://j.mp/vmN9rh
captulo
12
89
CAPTULO 12
http://code.google.com/p/chipmunk-physics/
CONCEPTOS
Antes de implementar los elementos estticos en nuestra aplicacin es importante recordar los tipos de Shapes que existen en Chipmunk y aclarar uno de ellos:
Circular: Genera una circunferencia para el cuerpo rgido referenciado cpCircleShapeNew(cpBody * body, cpFloat radius, cpVect offset). Segmentado: Genera una forma lineal entre los puntos a y b. cpSegmentShapeNew(cpBody * body, cpVect a, cpVect b, cpFloat radius). Poligonal: Genera un polgono Convexo definido previamente por medio de sus vrtices. En Chipmunk no se pueden modelar polgonos Concavos, para esos casos se debe utilizar Segment. cpPolyShapeNew(cpBody * body, int numVerts, cpVect * verts, cpVect offset).
89
// Inicia el motor de fisica 2D Chipmunk // Crea un nuevo Space space = cpSpaceNew(); // Define la direccin y magnitud de la gravedad en el Space space->gravity = cpv(0, -100); // Implementa el NSTimer encargado de realizar las animaciones selector:@selector(delta:) userInfo:nil repeats:YES]; // Crea un Body con masa 50 y momento INFINITY // Establece posicin inicial // Agrega el Body al Space cpBody *esferaBody = cpBodyNew(50.0f, INFINITY); esferaBody->p = cpv(160, 250); cpSpaceAddBody(space, esferaBody);
// Crea un Shape tipo Circle con radio 15 asociado al Body esferaBody cpShape *esferaShape = cpCircleShapeNew(esferaBody, 15.0f, cpvzero); esferaShape->e = 0.5f; // Elasticidad esferaShape->u = 0.8f; // Friccin
esferaShape->collision_type = 1; // Las colisiones son agrupadas por tipo cpSpaceAddShape(space, esferaShape); // ============================== // Implementacin Objeto Esttico // ============================== // Crea un Body con masa y momento INFINITY
89
// si quieres saber que pasa, agregalo <img src=http://www.maestrosdelweb. /wp-includes/images/smilies/icon_wink.gif alt=;) class=wp-smiley> // Crea un Shape tipo Segment asociado al Body barraBody barraShape->e = 0.7f; // Elasticidad barraShape->u = 0.4f; // Friccin barraShape->collision_type = 0; // Agrega el Shape al Space cpSpaceAddShape(space, barraShape); } 2. Agregar <UIAccelerometerDelegat> en ViewController.h #import <UIKit/UIKit.h> #import chipmunk.h @interface ViewController : UIViewController <UIAccelerometerDelegate>{ UIImageView *barra; UIImageView *esfera; cpSpace *space; cpBody *barraBody; cpShape *barraShape; } - (void)configurarChipmunk; - (void)delta:(NSTimer *)timer; void updateShape(void *ptr, void* unused); @end barraShape = cpSegmentShapeNew(barraBody, cpv(-105, -3), cpv(105, -3), 10.0);
barraShape->data = barra; // Asocia Shape con UIImageView // Se agrupa en un tipo de colisin diferente a esferaShape
89
3. Definir la funcin que implementa el acelermetro: - (void)accelerometer:(UIAccelerometer*)accelerometer didAccelerate: (UIAcceleration*)acceleration{ dispositivo // Modifica el ngulo de la Barra con relacin a la inclinacin del cpBodySetAngle(barraBody, M_PI * (acceleration.x * 0.6f) ); // Notifica a Chipmunk el movimiento de un Objeto Esttico cpSpaceRehashStatic(space); // Actualiza el Shape de la Barra (Objeto Esttico) [(UIView *)barraShape->data setTransform: } CGAffineTransformMakeRotation(-barraShape->body->a)];
4. Inicializamos el acelermetro en la funcin (void)viewDidLoad - (void)viewDidLoad { [super viewDidLoad]; png]]; barra = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@barra. barra.center = CGPointMake(160, 350); esfera.center = CGPointMake(160, 230); [self.view addSubview:barra]; [self.view addSubview:esfera]; [self.view setBackgroundColor:[UIColor whiteColor]]; [self configurarChipmunk]; // Inicia el acelermetro [[UIAccelerometer sharedAccelerometer] setUpdateInterval:(1.0 / 60)]; [[UIAccelerometer sharedAccelerometer] setDelegate:self]; }
89
5. Compilar y ejecutar
Si hemos hecho todo bien al final obtendremos un objeto circular que se sostiene con un madero el cual gira con el movimiento del dispositivo. Se puede seguir probando con distintos valores de masa, friccin, elasticidad, gravedad, entro otros para conocer un poco ms el comportamiento de los objetos dentro del espacio creado.
89
Enlace: http://j.mp/scOdr8
captulo
13
96
CAPTULO 13
OpenGL ES: http://www.khronos.org/opengles/ UIKit: http://j.mp/uCLGnA Core Animation + Quartz 2D: http://j.mp/uvEu2A
UIKit es el ms sencillo de utilizar en comparacin con OpenGL ES que requiere de un mayor tiempo de implementacin pero ofrece el mejor rendimiento. La buena noticia es que existe un framework que simplifica esta implementacin: Cocos2D.
CONOCIENDO COCOS2D
Cocos2D es un framework para el desarrollo de juegos en 2D y aplicaciones con alto contenido interactivo. Cocos2D para iPhone es basado en Cocos2D pero implementa Objetive-C como lenguaje de programacin en lugar de Python. Dentro de las caractersticas principales de este framework encontramos:
Integracin con motores de fsica: Box2D1, Chipmunk. Manejo de Escenas y efectos de transiciones. Compatibilidad con eventos Touch y el acelermetro. Texturas PVRTC2 de 2-bit y 4-bit, texturas RGBA3 de 16 bits y 32-bit. Basado en OpenGL ES 1.1
Dentro de Cocos2D encontramos tres conceptos principales a considerar: escenas, capas y objetos. Las escenas equivalen a los niveles o vistas implementadas en un juego. Las capas se incorporan a las escenas y pueden contener uno o ms objetos: mens, botones, etiquetas, cuerpos, etc. A su vez una escena puede contener una o ms capas.
1 http://www.box2d.org/ 2 http://en.wikipedia.org/wiki/PVRTC 3 http://en.wikipedia.org/wiki/RGBA
97
4. Compilar y ejecutar:
CCDirector: Es el controlador principal de nuestra aplicacin. [CCDirector setDirectorType:CCDirectorTypeDefault]; CCScene: Implementa las escenas o vistas. CCScene *scene = [CCScene node]; CCLayer: Permite la creacin de capas (HelloWorld es un objeto tipo CCLayer) HelloWorld *layer = [HelloWorld node]; CCLabel: Uno de los tipos de objetos que se pueden implementar dentro de una capa CCLabel* label = [CCLabel labelWithString:@Hola Mundo fontName:@Marker Felt fontSize:64];
Tenemos implementadas las libreras de Cocos2D en nuestro proyecto de Xcode. Ahora podemos utilizar los diferentes componentes que nos brindan estas libreras y lograr una mejora en el desempeo de nuestras aplicaciones.
98
Enlace: http://j.mp/ttovDQ
captulo
14
100
CAPTULO 14
IMPLEMENTACIN DE COCOS2D
Ahora vamos a proseguir con el proyecto creado en el captulo anterior. Pero antes debemos agregar esta imagen en nuestro proyecto:
101
1. Redefinimos la clase HelloWorld de CCLayer a CCColorLayer, para modificar de manera fcil el color
de fondo
#import cocos2d.h { } +(id) scene; @end 2. Agregamos el objeto CCSprite a la capa HelloWorld -(id) init{ // ccc4 Estable el color de Fondo if( (self=[super initWithColor:ccc4(255,255,255,255)] )) { CGSize winSize = [[CCDirector sharedDirector] winSize]; self.isTouchEnabled = YES; // Crea un objeto tipo CCSprite que contiene la imagen agregada CCSprite *player = [CCSprite spriteWithFile:@giftOne.png rect:CGRectMake(0, 0, 186, 186)]; // Establece la posicin del objeto player.position = ccp(player.contentSize.width/2, winSize.height/2); // Agrega el objeto a la Capa [self addChild:player]; } return self; } 3. Compilar y ejecutar: @interface HelloWorld : CCLayerColor
102
4. Ahora agregaremos movimiento a nuestro objeto con el siguiente mtodo: -(void)moveObject { // Accin girar id rotateAction = [CCRotateBy actionWithDuration:2 angle:180*2]; // Accin saltar jumps:2]; id jumpAction = [CCJumpBy actionWithDuration:2 position:ccp(260,0) height:50 // Agrupa 2 o ms acciones
id fordward = [CCSpawn actions:rotateAction, jumpAction, nil]; id backwards = [fordward reverse]; // Permite ejecutar una accin despes de otra id sequence = [CCSequence actions: fordward, backwards, nil]; // Repite una accin el nmero de veces que se requiera o // hasta el infinito y ms all con RepearForEver id repeat = [CCRepeat actionWithAction:sequence times:2]; // Ejecuta la accin sobre el objeto [player runAction:repeat]; } 5. Realizamos el llamado a la funcin definida anteriormente: // Mtodo que implementa el evento Touch en Cocos2D
103
Si todo ha salido bien obtendremos un objeto que gira y salta al momento de tocar la pantalla. Puedes descargar el proyecto para realizar el procedimiento Build and Run.
DESCARGAR EL PROYECTO
http://www.maestrosdelweb.com/images/2010/04/myGameCocos2D.zip
104
Enlace: http://j.mp/u6PQsm
captulo
15
106
CAPTULO 15
1 http://developer.apple.com/technologies/iphone/audio-and-video.html
107
2. Iniciar el archivo de audio agregado en el mtodo (id)init -(id) init{ // ccc4 Estable el color de Fondo
if( (self=[super initWithColor:ccc4(255,255,255,255)] )) { CGSize winSize = [[CCDirector sharedDirector] winSize]; player = [CCSprite spriteWithFile:@giftOne.png rect:CGRectMake(0, 0, 186, 186)]; // Establece la posicin del objeto // Agrega el objeto a la Capa [self addChild:player]; // Habilita el evento Touch self.isTouchEnabled = YES; // Agrega el archivo de audio soundBackground.m4a [[SimpleAudioEngine sharedEngine] } } playBackgroundMusic:@soundBackground.m4a]; return self; 3. Implementar el segundo archivo de audio, en el evento TouchBegan - (void)ccTouchesBegan:(NSSet *)touches withEvent:(UIEvent *)event { [self moveObject]; [[SimpleAudioEngine sharedEngine] playEffect:@soundEffect.m4a]; } 4. Compilar y ejecutar: // Crea un objeto tipo CCSprite que contiene la imagen agregada
108
En estos momentos hemos implementado los dos archivos de audio en nuestra aplicacin: el primero como msica de fondo y el segundo como efecto de sonido al momento de tocar la pantalla. Como se puede observar es un proceso realmente sencillo pero de gran utilidad para lograr un mejor desempeo en nuestras aplicaciones. Puedes descargar el proyecto para realizar el liberador procedimiento de Build and Run.
DESCARGAR EL PROYECTO
http://www.maestrosdelweb.com/images/2010/04/myGameCocos2D1.zip
109
Enlace: http://j.mp/rxe0lB
110
Guas online
ADICTOS A LA COMUNICACIN
GUA STARTUP
Utiliza las herramientas sociales en Internet para crear proyectos de comunicacin independientes. Visita Adictos a la comunicacin
http://mdw.li/guiacomunica
Aprende las oportunidades, retos y estrategias que toda persona debe conocer al momento de emprender. Visita la Gua Startup
http://mdw.li/gkTDom
111
CURSO ANDROID
Una serie de perfiles de personas y proyectos que nos inspiran a permanecer en el medio, aprender y seguir evolucionando. Visita Los Maestros del Web
http://j.mp/spAncK
Actualiza tus conocimientos con el curso sobre Android para el desarrollo de aplicaciones mviles.
112
GUA ASP.NET
GUA ZEND
ASP.NET es un modelo de desarrollo Web unificado creado por Microsoft para el desarrollo de sitios y aplicaciones web dinmicas con un mnimo de cdigo. ASP.NET Visita la Gua ASP.NET
http://mdw.li/guiaaspnet
Zend Framework es un framework de cdigo abierto para desarrollar aplicaciones y servicios web con PHP 5.