IPHONE

LABORATORIO IPHONE Duracin Prevista: 30 MINUTOS Introduccin Los principales componentes de la plataforma para desarrollo en iPhone son: el sistema operativo iOS, el SDK xcode con su emulador y editor de interfaces Interface Builder adems del editor de texto y elcompilador. Por esta razn en el presente trabajo se ver la utilizacin de cada uno del os elementos antes mencionados en la implementacin de un ejemplo en clase y de un ejemplo desarrollado con los compaeros de clase. Como primer ejercicio se har el ejemplo bsico del hola mundo, para luego utilizando el framework de JSON poder implementar el API del Google Translate en iPhone. Requisitos del sistema y y y y y Sistemas operativos soportados: Mac OS X, Se recomienda usar Snow Leopard 10.6.3 Requisito de memoria: se recomienda 1 GB Necesidad de espacio en disco: mnimo 40 GB Requisito de procesador: mnimo Intel Core 2Duo 2.0 Mhz, Core i3,i5, i7. Requisito SDK: Xcode 4.0 o superior.

Software necesario para el laboratorio y y Xcode JSON Framework 2.3.1

Ejercicios del Laboratorio Ejercicio 0:Hola mundo utilizando interface builder Ejercicio 1:Aplicacin Google Translate utilizando el Framework de JSON.

Ejercicio 0: Hola mundo utilizando interface builder Introduccin: El objetivo de este ejercicio es crear un ejemplo simple de hola mundo utilizando el constructor de Interfaces interface Builder.

IPHONE
Paso 1: Creacin del Proyecto

El primer paso para cualquier aplicacin para iPhone es abrir el xcode y crear un nuevo proyecto. Al momento de la creacin del proyecto se incluirn los archivos necesarios para que funcione la aplicacin. 1. Para crear un nuevo proyecto, ejecutamos el xcode, elegimos la opcin Create a new Xcode Project.

2. 3.

En la pantalla escogemos View BasedAplication. Damos doble click en la opcin escogida y nos pedir que pongamos un nombre al proyecto en este caso le pondremos ejemplo 1.

4.

Escoger el archivo con extensin.xib y abrirlo.

IPHONE

5. 6.

En las opciones de la librera del Interface Builder escogemos un label para mostrar en la pantalla. Modificamos el valor del a Etiqueta por el de Hola mundo, guardamos los cambios y luego ejecutamos el proyecto escogiendo el dispositivo iPhone.

Ejercicio 1: Aplicacin Google Translate utilizando el Framework de JSON. Introduccin: El objetivo de este ejercicio es hacer uso del framework de JSON para consumir el API Google Translate. Descripcin: En laboratorio muestra cmo se puede utilizar esta API en una aplicacin para iPhone para traducir texto que un usuario ingresa (de espaol a ingls). Para lo cual se plantea una introduccin a JSON, as como de la API de Google Translate. y Google translate proporciona un API que se puede utilizar de forma rpida y fcil en aplicaciones para traducir texto entre varios idiomas. y JSON es un formato de texto utilizado para enviar datos a travs de una conexin de red. Informacin: Para complender de mejor manera el funcionamiento de JSON considere el siguiente ejemplo, si se tiene una serie de tres Strings, la representacin JSON sera:

Si se tiene un objeto de mascotas con variables miebros de nombre name, breed y age; la representacin JSON sera:

Es as de simple, es por esto que es tan popular. Para mayor informacin puede leer JSON format home page. Qu es un JSON Web Service? Muchos desarrolladores de api como Google o Yahoo ofrecen servicios web que devuelven datos en formato JSON cuando se utiliza algunas de sus apis. Para el caso del servicio web de Google Translate, puede traducir un texto mediante una peticin GET (GET request) al siguiente URL: http://ajax.googleapis.com/ajax/services/language/translate

IPHONE
Cuando se emite la peticin GET, es necesario pasar algunos parmetros para el servicio web. Esto se hace aadiendo un querystring al final de la URL. En resumen, se inicia el queystring con un "?"y luego se agrega una secuencia de pares "name = value", separados por el smbolo "&". El servicio web define los argumentos que le deben ser pasados . Para Google Translate (en resumen), tienen que pasarse tres argumentos: y v: Abreviatura de "versin", y siempre debe estar en 1.0. y q: Abreviatura de "query", donde se debe establecer el texto a traducir. y langpair: Abreviatura de "languagepair", definido en un String el par de cdigos de dos letras de los idiomas a traducir, separados por el signo "|". Se debe tener en cuenta que en los valores para cada uno de estos argumentos hay que aadir caracteres de escape de acuerdo con las reglas de codificacin URL. Por ejemplo, para el signo "|" sus caracteres son: "7C%". Por suerte, no se tiene que preocupar de esto en iPhone porque existe una funcin en NSString que se puede utilizar para realizar la URI sin necesidad estos caracteres. Por lo tanto, la direccin URL completa con el querystring para traducir un texto sera algo como esto: http://ajax.googleapis.com/ajax/services/language/translate?q=where's%20the%20bathroom?&v=1.0&lang pair=en%7Cja Una vez que se realiza la solicitud GET con esta URL, Google responder con un string en formato JSON:

Basado en lo que se ha definido sobre JSON, esto significa que nos ha devuelto un objeto con tres variables miembros: responseData, responseDetails, and responseStatus. En el caso de "responseData", hay un sub-objeto con una variable llamado "translatedText". El valor de "translatedText" muestra el texto traducido. Aadir el framework de JSON al proyecto Aunque se puede escribir el cdigo para realizar el parse del cdigo devuelto en JSON, es mucho ms fcil y menos propenso a errores si se utiliza una de las bibliotecas disponibles para hacerlo. Para este tutorial, se va a usar el cdigo abierto del frameworkObjective-C JSON elaborado por StigBrautaset. 1. 2. 3. 4. 5. Una vez que se haya descargado, crear una nueva View-basedApplication en XCode y nombrar el proyecto como GoogleTranslate. Haga clic en "GoogleTranslate" bajo "Groups& Files", y hacer clic en "Add\New Group" y nombar al grupo como "JSON". A continuacin, abrir la imagen del framework de JSON que se ha descargado, la carpeta JSON y Classes (JSON/Classes), y arrastrar todos los archivos de esta a la recien creada "JSON" creada en el proyecto. Cuando el cuadro de dilogo aparezca, comprobar que la opcin "Copyitemsintodestinationgroups folder (ifneeded)" est activada. A continuacin, abrir GoogleTranslateViewController.m dentro de Classes y agregar el siguiente import al principio del archivo: Compilar el proyecto, si se compila bien se ha integrado con xito el framework de JSON!

6.

Como trabaja el framework de JSON? La clase principal en el framework de JSON se denomina SBJsonParser. Una vez que obtenga los resultados de JSON desde el servidor web, se le pasa a SBJsonParser a travs del mtodo objectWithString. El parser va a hacer todo el trabajo para analizar el String y convertir los valores en el tipo ms adecuado de Objective-C. Los tipos de datos de JSON se convierten en tipos de Objective-C de la siguiente manera (establecidos en SBJsonParser.h): y Null - NSNull y String - NSMutableString y Array - NSMutableArray y Object - NSMutableDictionary y Boolean - NSNumber (inicializada con initWithBool:) y Number - NSDecimalNumber

IPHONE
As que en nuestro caso, la respuesta de Google Translate se convertir en un NSMutableDictionary con tres keys: responseData, responseDetails, and responseStatus. El que ms nos importa es ResponseData. En realidad es un NSMutableDictionary con un solo key: translatedText. Y translatedText es un NSString simple (el resultado que se estaba buscando). En este punto se ah cubierto con la informacin de fondo, por lo que es tiempo de configurar la interfaz. Interfaz Antes de empezar, se va a establecer algunas variables en la clase GoogleTranslateViewController para que se pueda conectar con Interface Builder en poco tiempo. 1. Abre GoogleTranslateViewController.h y edite el archivo en el siguiente aspecto:

2. 3.

Ampliar la ficha Resources y abrir el GoogleTranslateViewController.xib. Abre la vista principal, y el uso de la biblioteca para aadir un textfieldview, button, textview y label que se ver:

4. 5. 6. 7.

En las propiedades, eliminar todo el texto en Text View y desmarcar Editable. Arrastre desde FilesOwner al textview, textfield, and button en la ventana XIB y conctelos a sus outlets. Finalmente, arrastre desde el button back a FilesOwner para conectar a la llamada doTranslationcallback. Guardar el XIB, compilar y ejecutar el proyecto para asegurarse de que todo se muestra bien hasta el momento.

Llevando a cabo la traduccin Ahora vamos a obtener el resultado JSON desde el servidor web de forma asincrnica. Aadimos tres variables ms a nuestra clase GoogleTranslateViewController.h:

IPHONE

NSMutableData*responseData; NSMutableArray*translations; NSString*_lastText; Y una propiedad: @property(nonatomic, copy)NSString*lastText; 1. Ahora vamos a GoogleTranslateViewController.m y aadimos la siguiente cabecera: import "JSON.h" y la siguiente lnea bajo @implementation: @synthesize lastText= _lastText; 2. Modificamos el mtodo dealloc para incluir nuestro cdigo de limpieza: -(void)dealloc{ [translations release]; [_lastText release]; [super dealloc]; } 3. La ltima parte del trabajo es crear una matriz de traducciones en el mtodo ViewDidLoad aadiendo el siguiente cdigo: -(void)viewDidLoad{ [super viewDidLoad]; translations=[[NSMutableArray alloc]init]; }

4.

Una vez realizado esto, es hora de llevar a cabo la traduccin. Aadimos los siguientes mtodos al final de archivo:

- (void)performTranslation { responseData = [[NSMutableData data] retain]; NSString *langString = @"es|en"; NSString *textEscaped = [_lastTextstringByAddingPercentEscapesUsingEncoding:NSUTF8StringEncoding]; NSString *langStringEscaped = [langString stringByAddingPercentEscapesUsingEncoding:NSUTF8StringEncoding]; NSString *url = [NSStringstringWithFormat:@"http://ajax.googleapis.com/ajax/services/langua ge/translate?q=%@&v=1.0&langpair=%@",textEscaped, langStringEscaped]; NSURLRequest * request = [NSURLRequestrequestWithURL:[NSURLURLWithString:url]]; [[NSURLConnectionalloc] initWithRequest:request delegate:self]; } - (IBAction)doTranslation { [translationsremoveAllObjects]; [textFieldresignFirstResponder]; button.enabled = NO;

IPHONE
self.lastText = textField.text; [translationsaddObject:_lastText]; textView.text = _lastText; textView.editable=NO; [selfperformTranslation]; } Anlisis: En el mtodo doTranslation, se borra el contenido de las variables que se van a utilizar para almacenar las traducciones. Tambin se elimina el teclado de la pantalla llamando al mtodo resignFirstResponder en el textfield. Deshabilitamos el botn, almacenamos el texto que el usuario desea traducir en lastText y establecemos el valor inicial del textview con este valor, y luego llamamos al mtodo performTranslation. En el mtodo performTranslation, inicializamos un objeto del tipo NSMutableData que ser usado para almacenar la respuesta JSON como es devuelto desde el servidor. A continuacin se construye la URL para obtener la traduccin desde el servidor Google usando stringByAddingPercentEscapesUsingEncoding. 5. Finalmente, creamos un objeto NSURLConnection con un NSURLRequest con el fin de inicializar el proceso de descarga asincrnica de los datos. - (void)connection:(NSURLConnection *)connection didReceiveResponse:(NSURLResponse *)response { [responseDatasetLength:0]; } - (void)connection:(NSURLConnection *)connection didReceiveData:(NSData *)data { [responseDataappendData:data]; } - (void)connection:(NSURLConnection *)connection didFailWithError:(NSError *)error { textView.text = [NSStringstringWithFormat:@"Connection failed: %@", [error description]]; button.enabled = YES; } - (void)connectionDidFinishLoading:(NSURLConnection *)connection { [connection release]; NSString * responseString = [[NSStringalloc] initWithData:responseDataencoding:NSUTF8StringEncoding]; [responseDatarelease]; NSMutableDictionary *luckyNumbers = [responseString JSONValue]; if (luckyNumbers != nil) { NSDecimalNumber * responseStatus = [luckyNumbers objectForKey:@"responseStatus"]; if ([responseStatus intValue] != 200) { button.enabled = YES; return; } NSMutableDictionary *responseDataDict = [luckyNumbers objectForKey:@"responseData"];

IPHONE
if (responseDataDict != nil) { NSString * translatedText = [responseDataDict objectForKey:@"translatedText"]; [translationsaddObject:translatedText]; self.lastText = translatedText; textView.text = [textView.textstringByAppendingFormat:@"\n%@", translatedText]; button.enabled = YES; } } } Anlisis: En este mtodo se ve el modo de recolectar los datos en la misma forma como se almacenan en nuestro objeto NSMutableArray tipo array. Sin embargo lo ms importante e interesante ocurre en el mtodo connectionDidFinishLoading. Convertimos nuestro NSData a un string, luego llamamos a una extensin en NSString para invocar el parser de JSON y convertimos el string de JSON en un objeto apropiado (en este caso ser un objeto NSMutableDisctionary). Notemos que podramos haber hecho esto inicializando un objeto SBJsonParser y llamando al objectWithString. Ahora podemos ver la respuesta obtenida revisando su estado para asegurarnos que hemos tenido xito. Entonces extraemos nuestro texto traducido y aadimos los resultados al textview. 6. 7. Por ltimo delegamos el mtodo doTranslate al botn Go desde Interface Builder arrastrando el mtodo hacia el botn. Compilamos y ejecutamos el proyecto, y si todo sale bien se puede observar lo siguiente:

IPHONE
Ejercicio en clase: 1. Para el ejercicio en clase vamos a realizar traducciones de espaol a ingls y viceversa hasta llegar a un resultado final. Modificamos el comienzo del mtodo performTranslation para que tenga el siguiente aspecto: -(void)performTranslation{ // Sale del bloque if si excedemos el lmite if(translations.count>50){ button.enabled=YES; return; } responseData=[[NSMutableData data] retain]; BOOL translateToEnglish=([translations count]%2==0); // if(!translateToEnglish&&[translations count]>=3){ NSString * oldString=[translations objectAtIndex:[translations count]3]; if([oldStringcaseInsensitiveCompare:_lastText]==NSOrderedSame){ button.enabled=YES; return; } } NSString * langString; if(translateToEnglish){ langString=@"es|en"; }else{ langString=@"en|es"; } NSString * textEscaped=[_lastText stringByAddingPercentEscapesUsingEncoding:NSUTF8StringEncoding];

Anlisis: Observamos que se ha aadido un ciclo para llevar a cabo 50 traducciones de espaol a ingls y viceversa, adems realizamos una verificacin para saber si estamos traduciendo a ingls o no, esto a travs de un chequeo del tamao de nuestro array de traduccin. Alternamos de la traduccin de espaol a ingls y cada vez que el conteo sea divisible para 2 traducimos de ingls a espaol. Se chequea si el ltimo resultado en espaol concuerda con el resultado actual; sabremos que est bien si estos concuerdan. Por ltimo, establecemos el string de lenguaje. 2. Ahora vamos al mtodo connectionDidFinishLoading y dentro de este aadimos la siguiente lnea al final del bloque if(responseDataDict != nil): [self performTranslation]; 3. Compilamos y ejecutamos el proyecto y podremos ver algo parecido a esto:

IPHONE

Referencia: y http://www.raywenderlich.com/1448/how-to-translate-text-with-google-translate-and-json-on-theiphone