universidad de el salvador facultad de ingeniería y...

Descripción General del Proyecto y

Guía de desarrollo para el primer día del Taller

Docente Coordinador

Ing. MAF César Augusto González Rodríguez

Equipo de Desarrollo

Bryan Josué Rodríguez Parada Alexandra María Cañas Tovar José Antonio Sánchez Delgado Luis Alejandro González William Giovanni Abarca Pérez

Taller

Sistema de geo localización de espacios físicos versión IOS

Universidad de El Salvador

Facultad de Ingeniería y Arquitectura

Escuela de Ingeniería en Sistemas Informáticos

Contenido Generalidades del Proyecto ................................................................................................................ 1

Descripción y antecedentes del proyecto: ...................................................................................... 1

Detalle de la Tecnologías y conceptos aplicados ........................................................................... 2

Requerimientos y elementos utilizados .......................................................................................... 2

Metodología Básica del Taller: ........................................................................................................ 3

Guía de desarrollo para el primer día del Taller.................................................................................. 4

Parte 1. Crear el Proyecto de Servicios Web en Netbeans ............................................................. 5

Creación del proyecto ................................................................................................................. 5

Conectando a la Base de Datos ................................................................................................... 8

Creando los Paquetes ................................................................................................................ 11

Creando las Clases Entidad........................................................................................................ 13

Creando los Servicios Web ............................................................................................................ 18

Probando los Servicios Web ...................................................................................................... 20

Parte 2. Creación de la Aplicación Xcode para realizar un Mantenimiento sobre una base de

datos Sqlite(librería). ..................................................................................................................... 29

Anexos ............................................................................................................................................. - 1 -

Aplicación Web ............................................................................................................................ - 1 -

Base de Datos .............................................................................................................................. - 2 -

Guía N° 1 Universidad de El Salvador

2013 Página 1

Generalidades del Proyecto

Tema: Sistema de geo localización de espacios físicos

Descripción y antecedentes del proyecto: Como producto del intercambio realizado en el IV COMPDES realizado en San Salvador

el año 2011 y nuestra participación a las ponencias y talleres de la Semana Universitaria 2011

organizada por la Carrera de Computación del Tecnológico de Costa Rica, sede San Carlos, se

desarrolló para el V COMPDES(León, Nicaragua) un proyecto, que consistió en implementar

algunas de las tecnologías móviles vistas e investigar otras relacionadas, específicamente para

el año 2012 se desarrolló la aplicación sobre el sistema operativo ANDROID y para este año se

mostrara la versión para el sistema operativo IOS. Este proyecto es parte de un sistema de

información que utiliza datos geo referenciados relativos a puntos de interés (inicialmente la

aplicación tendrá puntos sobre la Facultad de Ingeniería y Arquitectura de la UES,

posteriormente se puede ampliar la cobertura a otras sedes del COMPDES), el cual ya tiene

desarrollados servicios web y una aplicación web en un servidor funcionando en El

Salvador(UES/FIA/EISI).

En el desarrollo del taller comprendemos dos partes:

1) Aplicación Local:

*Aplicación de Servicios Web realizados en Netbeans(java) para realizar un CRUD

a una base de datos en Mysql externa/

*Aplicación en Xcode que realice un CRUD en Sqlite /Extracción de coordenadas

geográficas y consumo de servicios web.

2) Realidad Aumentada:

*Aplicación Xcode de Captura de datos mediante un QR creado previamente y

*Aplicación Xcode de Sincronización de datos SQLite-Mysql y Parseo de datos Json

en el consumo de los servicios web.

*Integración de las funcionalidades de la aplicación dentro de Mixare.

Mixare es un motor de Realidad Aumentada el cual además es un navegador de realidad

aumentada, que es gratuito y de código abierto (publicado bajo la licencia GPLv3).

Producto Esperado del taller: Al finalizar el alumno tendrá nociones básicas de cómo realizar

un mantenimiento(CRUD) en Xcode sobre la librería Sqlite, como crear servicios web en


2013 Página 2

Netbeans con asistente y consumirlos desde un navegador o una aplicación en Xcode. Además

poseerá las bases poder desarrollar una aplicación que interactúe Realidad Aumentada.

Detalle de la Tecnologías y conceptos aplicados

a. Arquitectura de la aplicación: Cliente Servidor

b. Sistema Operativo de dispositivos Móviles : IOS

c. Conceptos Aplicados

1. Mapas digitales

2. Realidad aumentada

3. GPS

4. Referencia por cámara y brújula del dispositivo móvil

Requerimientos y elementos utilizados d. Requerimientos de software:

1. Sistema Operativo MAC OS 10.8

2. Netbeans IDE para MAC 7.3 o superior(full)

3. SQLITE Browser (última versión disponible)

4. Xcode (última versión disponible)

5. COCOA REST CLIENT PARA MAC:

http://code.google.com/p/cocoa-rest-client/downloads/list

e. Requerimientos de red:

1. Acceso a internet en las Pcs y disponible de manera

inalámbrica para los móviles.

f. Otros Elementos utilizados en el desarrollo de la aplicación

i. IDE para desarrollo de Web services NetBeans 7.3

ii. Servidor de Aplicaciones Glassfish 3.1.4

iii. Sybase Power Designer 15.



2013 Página 3

Metodología Básica del Taller: El taller se divide en dos días: el primero se espera realizar la codificación de dos

aplicaciones, una de Servicios Web en Netbeans(con asistente)y otra que es un

mantenimiento con SQLite en el ide XCODE, ambas se podrán probar de forma parcial.

El sistema de navegación de la aplicación a desarrollar en el presente taller se muestra

a continuación:

LOGIN

MENÚ DE OPCIÓN

CREAR POI SINCRONIZACION


2013 Página 4

Guía de desarrollo para el primer día del Taller

Requisitos de los participantes

Conocimientos básicos de JAVA y de Base de Datos.

Preferiblemente un móvil mac(iphone, ipad o ipod) con gps, Sistema operativo IOS 6 o

superior.

Duración del taller

3 horas


2013 Página 5

Parte 1. Crear el Proyecto de Servicios Web en Netbeans

Creación del proyecto

1. Como primer paso ejecutamos NetBeans IDE y seleccionamos el icono “New Project” dentro de la barra de herramientas.

2 Con esto se abrirá una ventana donde establecemos el tipo de proyecto, seleccionamos “Web Application” y presionamos el botón “Next”.


2013 Página 6

3 En la siguiente ventana establecemos el nombre y la ubicación del proyecto, luego presionamos el botón “Next”.

4 A continuación establecemos el servidor de aplicaciones GlassFish Server y la versión de Java EE 6, luego presionamos el botón “Next”.


2013 Página 7

5 Por último podemos seleccionar un Framework de aplicación, para nuestro caso dentro del desarrollo de este taller no utilizaremos alguno de estos, por lo tanto presionamos el botón “Finish”.

Una vez creado tendremos la siguiente estructura dentro de la vista de Proyectos:


2013 Página 8

Conectando a la Base de Datos

6 Ahora crearemos la conexión a nuestra base de datos, dentro del panel del proyecto iremos a la pestaña “Services” y al hacer click derecho sobre “Databases” seleccionamos “New Connection”.

7 Se desplegará un asistente para la nueva conexión, en la opción “Driver” seleccionamos “MySQL (Connector/J driver)”.


2013 Página 9

8 Una vez seleccionado MySQL presionamos sobre el botón “Next”.

9 En la siguiente ventana establecemos los valores para la conexión a la Base de Datos, el nombre, usuario y password (Estos valores serán indicados por el instructor). Para comprobar que los valores son correctos presionamos el botón “Test Connection”.


2013 Página 10

10 Presionamos sobre el botón “Next” y se abrirá la siguiente ventana.

11 Presionamos nuevamente “Next” para poder establecer un nombre a nuestra conexión, el cual será “compdes13”.


2013 Página 11

12 Una vez correcta la conexión presionamos sobre el botón “Finish” y ahora la conexión se puede visualizar dentro de la pestaña “Services”.

Creando los Paquetes

Ahora dentro de la pestaña “Projects” crearemos dos paquetes, el primero llamado

“org.compdes.entidades” que contendrá las clases entidad generadas de nuestra base de datos, el

segundo “org.compdes.servicios” tendrá las clases que contienen los servicios web.

13 Hacemos click derecho sobre “Source Packages” → “New” → “Java Package”.


2013 Página 12

Si esta opción no aparece directamente, podemos ir a “New” → “Other” y buscar la opción “Java”

→ “Java Package” y luego presionar “Next”:

14 Luego establecemos el nombre del paquete y presionamos sobre el botón “Finish”


2013 Página 13

Una vez creados ambos paquetes la estructura de nuestro proyecto se visualizara de la siguiente

manera:

Creando las Clases Entidad

15 Ahora hacemos click derecho sobre el paquete “org.compdes.entidades” y buscamos

la opción “New” → “Entity Classes from Database”.

Si no aparece esta opción también podemos acceder seleccionando “New” → “Other” lo que

desplegará la siguiente ventana y dentro de la carpeta “Persistence” encontramos la opción antes

mencionada:


2013 Página 14

16 Después de seleccionar “Entity Classes from Database” se muestra la siguiente ventana donde debemos indicar la conexión que corresponde a nuestra Base de Datos, en la opción “Data Source” seleccionamos “New Data Source”.


2013 Página 15

17 En el siguiente cuadro colocamos WSCOMPDES en la opción “JNDI Name”, y en “Database Connection” deberá aparecernos la que fue creada con anterioridad, la seleccionamos y presionamos el botón “OK”.

Nos quedará de la siguiente manera:

18 Una vez realizado podemos observar que aparecerán las tablas de nuestra base, seleccionamos la tabla “poi” y presionamos el botón “Add”.


2013 Página 16

Nos quedará de la siguiente manera, luego presionamos el botón “Next”:

19 En la siguiente ventana verificamos que el paquete que contendrá nuestras clases sea “org.compdes.entidades”, y estén seleccionadas solamente las opciones que muestra la siguiente imagen, luego presionamos el botón “Next”.


2013 Página 17

20 Por ultimo especificamos las opciones del mapeo de entidades, en la opción “Association Fetch” seleccionamos “lazy” y en “Collection Type” seleccionamos “java.util.List” y las demás opciones tal como muestra la siguiente imagen. Para finalizar presionamos el botón “Finish”

Una vez completado podemos visualizar las clases creadas dentro de nuestro paquete, como se

puede observar cada una representa la abstracción de la correspondiente tabla con sus campos:


2013 Página 18

Creando los Servicios Web

Ahora crearemos las clases controladoras que implementan los servicios web, para ello

seguiremos los siguientes pasos:

21 Seleccionamos nuestro paquete “org.compdes.servicios” y hacemos click derecho, luego buscamos la opción “New” → “RESTful Web Services from Entity Classes”.

Si no aparece esta opción también podemos acceder seleccionando “New” → “Other” lo que

desplegará la siguiente ventana y dentro de la carpeta “Web Services” encontramos la opción

antes mencionada:


2013 Página 19

22 Presionamos “Next” y nos mostrará la siguiente ventana donde se muestras las clases entidad disponibles, presionamos el botón “Add All” para generar los servicios de todas las clases.

23 Luego presionamos el botón “Next”.


2013 Página 20

24 En la siguiente ventana verificamos que nuestros servicios sean creados en el paquete especificado “org.compdes.servicios” y luego presionamos sobre el botón “Finish”.

Una vez creados los servicios web podemos observar las clases controladoras dentro de la vista del

proyecto.

Probando los Servicios Web

Hasta este punto ya tenemos todo listo para probar los servicios web, para ello primero es

necesario desplegar la aplicación dentro del servidor.


2013 Página 21

25 Seleccionamos el proyecto haciendo click derecho sobre él y buscando la opción “Deploy”.

Esperamos mientras carga el servidor GlassFish y se despliegan los servicios, podemos consultar la

consola del servidor para verificar el correcto despliegue:

Para verificar el funcionamiento de los servicios web existen herramientas especiales que nos

permiten una mejor depuración, en este taller utilizaremos el programa “Cocoa REST Client”

(http://code.google.com/p/cocoa-rest-client/downloads/list) esta herramienta nos permite

establecer varias opciones de petición de datos a los servicios web, como por ejemplo obtener en

formato JSON los datos de nuestra base.

La URL de los servicios en este caso por defecto empieza de la siguiente manera:

http://localhost:8080/WSCOMPDES/webresources/ y para cada controlador de servicios se

especifica su dirección mediante la anotación @Path como se muestra en la imagen:


http://localhost:8080/WSCOMPDES/webresources/


2013 Página 22

26 Guardar un POI en la base de datos central.

Primero probaremos los servicios como se crearon automáticamente, luego haremos unas

pequeñas modificaciones para un mejor manejo de los datos.

Método: POST

URL: http://localhost:8080/WSCOMPDES/webresources/org.compdes.entidades.poi/

Dentro de “Cocoa Rest Client” escribimos la URL y en la opción “Method” seleccionamos POST”,

luego dentro del apartado “Request Body” chequeamos “Raw Input” y dentro de eso colocamos

los siguientes datos en formato JSON:

{

"nombrePoi": "COMPDES2013",

"descripcionPoi": "Congreso 2013",

"fechaCreacionPoi": 1373715429000,

"urlWebPoi": "http://www.compdes.org/",

"privacidadPoi": false,

"idUbicacion": {

"idUbicacion": 15

},

"idTipoPoi": {

"idTipoPoi": 11

},

http://localhost:8080/WSCOMPDES/webresources/org.compdes.entidades.poi/


2013 Página 23

"idUsuario": {

"idUsuario": "compdesX"

}

}

Observación: cambiar dentro del JSON en la parte de “idUsuario”: “compdesX” y colocar el usuario

asignado por el instructor.

La petición quedará de la siguiente manera:

Por ultimo accedemos al apartado “Request Headers” y modificaremos el “Content-Type” para

colocar “application/json”


2013 Página 24

Quedando de la siguiente manera:

Luego presionamos el Botón “Submit” y se realizara nuestra petición POST y la respuesta del

servidor se puede observar en la parte inferior, específicamente en el apartado “Response

Headers”, el servidor regresa el estatus 204 (No content), el cual nos indica que la respuesta no

contiene ningún dato, sin embargo los datos si se guardan correctamente.

27 Puedes verificar el POI creado accediendo a tu cuenta asignada en GTWorld (http://168.243.8.13:8080/GTWorld/) y dentro del menú POIs → Gestionar Pois te mostrará lo siguiente:

http://168.243.8.13:8080/GTWorld/


2013 Página 25

Hacemos click sobre el icono del mundo para ver detalladamente la ubicación:

28 Eliminaremos este poi para realizar nuevamente la prueba, cambiando un poco el

código del servicio, para ello hacemos click sobre el botón y nos pedirá confirmar la eliminación:


2013 Página 26

29 Ahora modificaremos el método que recibe la petición POST (create) de la clase PoiFacadeREST.java para que nos regrese una respuesta favorable si la inserción se realizó de manera correcta, al final el método debe quedar de la siguiente manera:

Es necesario renombrar el método create ya que la clase hereda de AbstractFacade y está ya

contiene dicho método create pero sin retornar valores.

Verificar que el import necesario para la clase Response sea el siguiente:

30 De igual manera hacemos los cambios necesarios para los métodos PUT y DELETE, al final nuestro código debe quedar de la siguiente manera:


2013 Página 27

31 Guardamos los cambios, esto desplegará nuevamente los servicios con los cambios realizados.

32 Si realizamos nuevamente la petición desde “Cocoa Rest Client” con los mismos parámetros de la prueba anterior, ahora la respuesta del servidor será OK (Estatus 200).

33 Como último cambio se modificara el método “find” para que regrese únicamente datos en formato JSON, quedará de la siguiente manera:


2013 Página 28

34 Guardamos nuevamente los cambios

Haremos uso de este servicio en la próxima parte de este taller, donde se consumirá desde la

aplicación para iOS.


2013 Página 29

Parte 2. Creación de la Aplicación Xcode para realizar un Mantenimiento

sobre una base de datos Sqlite(librería).

1. A lo largo de esta segunda parte de la guia, se hará uso de una base de datos SQLite.

Cuando se hace uso de la herramienta Xcode y los simuladores de dispositivos iOS es

posible acceder al archivo de la base de datos, para ello se debe seguir estos pasos

preliminares. En el Finder dirígete al menú Ir.

2. Presiona la tecla Alt y veras que aparece una nueva opción Biblioteca, haz clic izquierdo en

ella.


2013 Página 30

3. Navega hacia la carpeta Application Support.

4. Ahora haz accede a la carpeta iPhone Simulator

5. Dependiendo de las versiones del simulador puede aparecer más de una carpeta dentro

de iPhone Simulator, en este caso solamente aparece la carpeta 6.0. Haz clic en la que

corresponda.

6. Ahora busca la carpeta Applications


2013 Página 31

7. Dependiendo del número de aplicaciones instaladas desde Xcode en tu simulador,

aparecerá una carpeta por cada una de esas aplicaciones. SUPONIENDO que ya tienes

instalada la aplicación final que se pretende realizar en esta guía, debería aparecer una

carpeta que donde se guarde la Base de Datos de la misma. Nota que no está nombradas

con un lenguaje entendible, así que deberás revisar cada una de ellas para encontrar la

indicada.

8. Dentro de la carpeta Documents encontrarás la base de datos de la aplicación, como

veremos más adelante la base de datos que crearemos será nombrada FIAWORLD.db, por

lo que al finalizar esta guía deberás ver un archivo nombrado de la misma manera en la

carpeta Documents ya mencionada.

9. Inicia Xcode y a continuación en la ventana de bienvenida haz clic en Create a new Xcode

Project.


2013 Página 32

10. En el apartado de iOS, selecciona Application, de las plantillas de proyecto selecciona

Single View Application y haz clic en Next.

11. Ingresa las opciones para el nuevo proyecto iOS y a continuación clic en Next.


2013 Página 33

12. Selecciona la ubicación donde guardarás el proyecto.


2013 Página 34

13. Configura la orientación de la Interfaz únicamente para Portrait

14. Más abajo en la misma ventana, haz clic derecho sobre el área que almacena el icono de la

aplicación, y selecciona la opción Select File.


2013 Página 35

15. Busca dentro de la carpeta proporcionada RECUROS TALLER el icono nombrado

compdesx57.png., selecciónalo y haz clic en Choose.

16. Haz lo mismo para el siguiente tamaño de icono (Retina Display), pero esta vez selecciona

el icono compdesx114.png


2013 Página 36

17. Busca y elimina las imágenes Default.png y [email protected]. Ubicadas en el grupo

Supporting Files. Dando clic derecho y seleccionando la opción Delete, y a continuación la

opción Move to Trash.

mailto:[email protected]


2013 Página 37

18. De regreso a las opciones del proyecto, haz clic derecho sobre el área de Launch images y

selecciona la opción Select File, busca la imagen compdes320x480.png y cuando aparezca

el mensaje “Remplace File” haz clic en Replace. Haz lo mismo para el área de imagen de

Retina 3.5-inch pero esta vez selección la imagen compdes640x950.png.


2013 Página 38

19. Clic en el objeto ViewController.xib

20. Aparecerá el área de trabajo del Interface Builder, donde crearás la interfaz inicial. En este

caso agrega un botón (Round Rect Button) dando clic y arrastrándolo del listado de la

librería de Objetos hacia la ubicación de la pantalla de interfaz que desees.


2013 Página 39

21. Renombramos el texto del botón por Ir a gestión de POI. Y reajusta el tamaño del botón

para que el texto pueda ser visible correctamente.

22. Damos clic en el Asistente Editor. Esto abrirá la clase cabecera ViewController.h que

controlará la interfaz ViewController.xib.


2013 Página 40

23. Damos clic derecho sobre el Botón y lo arrastramos hacia el área del código indicada.

24. En la ventana que se muestra, en el parámetro Connection, seleccionamos Action. Y

damos como nombre al objeto irGestionPoi. A continuación damos clic en Conncet.


2013 Página 41

Veremos cómo al realizar el paso anterior Xcode nos asiste para conectar el botón con un

método llamado irGestionPoi el cual ejecutará una acción concreta (que programaremos más

adelante) cada vez que demos clic sobre el botón Ir a gestion de POI. Ahora crearemos una

nueva clase controladora con su respectiva interfaz .xib la cual será llamada cuando demos clic

en el botón Ir a gestión de POI.

25. Ahora damos clic sobre View, y cambiamos la opción Size por Retina 3.5 de la barra de

opciones que se muestra en la parte derecha de la pantalla.

1

2


2013 Página 42

26. Clic derecho sobre el grupo MantenimientoSQLite -> New file…

27. Del grupo iOS, en Cocoa Touch, selecciona Objective-C Class y clic en Next.


2013 Página 43

28. Renombra la clase por POIController y haz clic en Next.

29. En la ventana siguiente haz clic en Create. Sin realizar cambio alguno.


2013 Página 44

30. Ahora haz clic en ViewController.m, y agrega el siguiente código, cuya finalidad es llamar a

POIController y pueda ser vista en pantalla (Las líneas de código resaltadas son las que se

debe agregar al código ya existente).

#import "ViewController.h" ++++++++ CODIGO 1 ++++++++++ @interface ViewController () @end @implementation ViewController - (void)viewDidLoad { [super viewDidLoad]; // Do any additional setup after loading the view, typically from a nib. } - (void)didReceiveMemoryWarning { [super didReceiveMemoryWarning]; // Dispose of any resources that can be recreated. } - (IBAction)irGestionPoi:(id)sender { ++++++++ CODIGO 2 ++++++++++ } @end

31. Agregaremos un framework para el uso del GPS y una librería para manejar Bases de

Datos SQLite; haz clic en el proyecto MantenimientoSQLite.


2013 Página 45

32. Clic en Target: MantenimientoSQLite.

33. En la pestaña Summary desplázate hacia abajo hasta el área Linked Frameworks and

Libraries, y haz clic en el botón con el ícono Más.

34. Busca y selecciona la librería libsqlite3.0.dylib y haz clic en Add.


2013 Página 46

35. Ahora busca y selecciona el Framework CoreLocation.framework


2013 Página 47

36. Ahora crea una nueva clase Objective-C, que representara la clase de objetos POI con

todos sus atributos como nombre, url, latitud, longitud, altitud, etc. Clic derecho sobre el

grupo MantenimientoSQLite -> New File….

37. En el grupo de iOS selecciona Objective-C Class y haz clic en Next.


2013 Página 48

38. Nombra la clase como POI, busca y selecciona en las opciones de Subclass of el elemento

NSObject.

39. Modifica la nueva clase POI.h con el siguiente código.

#import <UIKit/UIKit.h> @interface POI : NSObject ++++++++ CODIGO 3 ++++++++++ @end

40. Buscan en la carpeta RECURSOS TALLER la carpeta poi_icon, agrega toda la carpeta al

proyecto MantenimientoSQLite.


2013 Página 49

41. Marca las opciones tal y como se muestra en la siguiente imagen y haz clic en Finish.

42. Ahora haz clic en el objeto POIController.xib.


2013 Página 50

43. Haz clic sobre View y cambia la opción a Freeform.

44. Agrega un Scroll View y procura que cubra toda el área de la interfaz.


2013 Página 51

45. Agrega un Navigation Bar, y nómbrala POI

46. Agrega un botón Round Rect Button al Navigation Bar.

47. En las propiedades del botón (para que aparezcan las propiedades mostradas en la imagen

mostrada abajo, generalmente se debe hacer doble clic al botón), selecciona Style

Bordered, y en la propiedad Indentifier selecciona la opción Edit, y Nombra el botón en la

propiedad Title como Regresar. (Notarás que la propiedad Identifier regresara a Custom

pero no le des importancia).


2013 Página 52

48. Agrega a la interfaz cuatro Labels y nómbralos como se muestra a continuación.

49. Agrega tres Text Fields.


2013 Página 53

50. Agrega un Switch.

51. Agrega un Label más y un Image View para este último redimensiónalo para que se vea de

la siguiente manear.


2013 Página 54

52. Alarga un poco más la interfaz para poder agregar los componentes faltantes.


2013 Página 55

53. Añade un Objecto Picker View.


2013 Página 56

54. Agrega siete Labels y un botón.

55. Abre el Asistente Editor.


2013 Página 57

56. Agrega los siguientes import al área de trabajo del POIController.h.

57. Haz clic derecho sobre el primer Text Field, y arrástralo al área de trabajo.

58. Configúralo con los siguientes parámetros y haz clic en Connect.

59. Haz lo mismo con los otros dos Text Field.

++++++ CODIGO 4: +++++++


2013 Página 58

60. Agrega el siguiente código para que se vea de acuerdo a la imagen:

61. Clic derecho sobre el Switch, y de la misma manera que los Text Field arrástralo al área de

trabajo y nómbralo publicoPOI.

62. Haz lo mismo con el Image View.

++++++ CODIGO 4 A: +++++++


2013 Página 59

63. Clic derecho sobre el Picker View y arrástralo dentro del área de llaves.

64. Nómbralo tipoPOISPicker.

65. Clic derecho sobre los Label de Valor1, Valor2 y Valor3 y nómbralas de la siguiente

manear.


2013 Página 60

66. Agrega un botón al lado derecho de Navigation Bar, selecciona Bordered de la propiedad

Style, y Search de la propiedad Identifier.


2013 Página 61

67. Clic derecho sobre el botón Regresa y arrástralo al área de trabajo. Selecciona Action de la

propiedad Connection e ingresa el nombre regresarMenu, haz clic en Connect.

68. Realiza el mismo procedimiento del paso anterior para el botón con la lupa, y el botón de

guardar.


2013 Página 62

69. Clic derecho nuevamente sobre el primer Text Field y arrástralo al área de trabajo, pero

esta vez selecciona Action en la propiedad Connection, y selecciona Did End On Exit de la

propiedad Event.

70. Conectaremos los otros dos Text Field al mismo método textFieldReturn. Haz clic derecho

en el segundo Text Field de Descripción y arrástralo sobre el método dicho anteriormente.


2013 Página 63

71. Con el Text Field de Descripción seleccionado, dirígete a las opciones de Connections

Inspector.

72. Elimina la referencia del evento Editing Did End, dando clic sobre la “x”.


2013 Página 64

73. Ahora haz clic sobre el círculo del evento Did End On Exit y arrástralo al método

textFieldReturn.

74. Realiza el mismo paso para el Text Field de URL Web:


2013 Página 65

75. Ahora modifica el objeto POIController.m con el siguiente código, agrega solamente las

líneas de código resaltadas.

#import "POIController.h"

++++++ CODIGO 5: +++++++ @interface POIController ()

++++++ CODIGO 6: +++++++ @end @implementation POIController

++++++ CODIGO 7: +++++++ - (id)initWithNibName:(NSString *)nibNameOrNil bundle:(NSBundle *)nibBundleOrNil { self = [super initWithNibName:nibNameOrNil bundle:nibBundleOrNil]; if (self) { // Custom initialization } return self;


2013 Página 66

} - (void)viewDidLoad { [super viewDidLoad];

++++++ CODIGO 8: +++++++ } - (void)didReceiveMemoryWarning { [super didReceiveMemoryWarning]; // Dispose of any resources that can be recreated. } - (IBAction)guardarPOI:(id)sender {

++++++ CODIGO 9: +++++++ } - (IBAction)irBuscarPOI:(id)sender {

++++++ CODIGO 10: +++++++ } - (IBAction)regresarMenu:(id)sender {

++++++ CODIGO 11: +++++++ }

++++++ CODIGO 12: +++++++ //metodo para ocultar el teclado -(IBAction)textFieldReturn:(id)sender {

++++++ CODIGO 13: +++++++ }

++++++ CODIGO 14: +++++++ @end

76. Crea otra clase con su respectiva interfaz .xib y nómbrala BuscarPOIController, hazlo de la

misma manera que los pasos 18, 19, 20 y 21.


2013 Página 67

77. Cambia su interfaz por Retina 3.5 inch

78. Añade un Navigation bar y ponle como título BUSCAR POI.


2013 Página 68

79. Agrega un botón de Regresar al Navigation Bar.

80. Agrega seis Labels y nómbralos de la siguiente manera:


2013 Página 69

81. Agrega Cuatro Text Field y un Switch.


2013 Página 70

82. Busca y agrega el objeto Table View y ajústalo como en la siguiente imagen.


2013 Página 71

83. Agrega dos botones, y nombralos Buscar y Actualizar respectivamente.


2013 Página 72

84. Abre el Asistente Editor.

85. Añade el siguiente código.

86. Ahora de la interfaz de BuscarPOIControlle.xib, clic derecho sobre los Text Field y arrastra

hacia el área de trabajo. Nómbralos como nombrePOI, descripcionPOI, urlPOI, idPOI.

++++++ CODIGO 15 +++++++


2013 Página 73

87. Así mismo arrastra con clic derecho el objeto Switch y el objeto Table View y nómbralos

publicoPOI y poiTabla respectivamente.


2013 Página 74

88. De la misma manera clic derecho y arrastra al área de trabajo los botones Regresa, Buscar

y Actualzar, nómbralos regresarMenu, buscarPOI y actualizarPOI respectivamente.

Recuerda esta vez seleccionar la opción Action en el parámetro Connection.


2013 Página 75

89. Ahora clic derecho y arrastra el primer Text Field de Nombre hacia el área de trabajo, y

esta vez selecciona Action del parámetro Connection, y nómbralo como textFieldReturn.

Además selecciona Did End On Exit del parámetro Event.

90. Clic derecho y arrastra los tres Text Field restantes sobre el mismo método de

textFieldReturn.


2013 Página 76


2013 Página 77

91. Ahora haz clic sobre el Text Field de Descripción, y en el Inspector elimina el evento

Editing Did End.

92. Enlaza el nuevo evento Did End On Exit al método textFieldReturn.


2013 Página 78

93. Realiza los pasos 83 y 84 para los dos Text Field restantes.


2013 Página 79

94. Agrega el siguiente código a BuscarPOIController.m.

#import "BuscarPOIController.h"

++++++ CODIGO 16 +++++++ @interface BuscarPOIController ()

++++++ CODIGO 17 +++++++ @end @implementation BuscarPOIController

++++++ CODIGO 18 +++++++ - (id)initWithNibName:(NSString *)nibNameOrNil bundle:(NSBundle *)nibBundleOrNil { self = [super initWithNibName:nibNameOrNil bundle:nibBundleOrNil];


2013 Página 80

if (self) { // Custom initialization } return self; } - (void)viewDidLoad { [super viewDidLoad]; // Do any additional setup after loading the view from its nib.

++++++ CODIGO 19 +++++++ } - (void)didReceiveMemoryWarning { [super didReceiveMemoryWarning]; // Dispose of any resources that can be recreated. } - (IBAction)regresarPOI:(id)sender {

++++++ CODIGO 20 +++++++ } - (IBAction)buscarPOI:(id)sender {

++++++ CODIGO 21 +++++++ } - (IBAction)actualizarPOI:(id)sender {

++++++ CODIGO 22 +++++++ } - (IBAction)textFieldReturn:(id)sender {

++++++ CODIGO 23 +++++++ }

++++++ CODIGO 24 +++++++ @end


2013 Página 81

95. Crea una nueva clase con su respectiva interfaz .xib y nómbrala

ConsumoServicioController, que será utilizada para conectar al servidor local (que se

realizó al inicio de este taller en Netbeas) y cuya finalidad será obtener el nombre de un

POI y mostrarlo en un Dialog usando como parámetro un Identificador que será leído

desde ConsumoServicioController a partir de una caja de texto.


2013 Página 82

96. Clic en ConsumoServicioController.xib, y arrastramos a la interfaz un botón (Round Rect

Button) y una caja de texto (Text Field)

97. Renombra el boton por Obtener Nombre POI y conecta el boton con la clase

ConsumoServicioController de la misma manera que el paso 10, y nombre el método

como obtenerNombrePoi.


2013 Página 83

98. Ahora conecta la caja de texto de la misma manera, haz y manten clic derecho y arrastra

hacia el área de código.

99. Nombra el objeto como txtIDPoi, selecciona Strong de la propiedad Storage y para

terminar haz clic en Connect.


2013 Página 84

100. Ahora haz clic derecho sobe el Text Field nuevamente y arrástralo a la misma área

de trabajo, pero esta vez selecciona en la propiedad Connection la opción Action y

nombre el método como cerrarTeclado, y en la propiedad Event selecciona Editing Did

End.

101. De la lista de Objetos View selecciona y arrastra una barra de encabezado

(Navigation Bar) y nómbrala a CONSUMO SERVICIO.


2013 Página 85

102. Ahora selecciona un Botón (Round Rect Button) y arrástralo dentro de la barra

recién agregada. Renombre el botón por Regresar.


2013 Página 86

103. Nuevamente abre el Asistente Editor y haz clic derecho sobre el botón Regresa y

arrástralo al área de trabajo, nombra el método como regresarMenu.

El código de ConsumoServicioController.h quedará de la siguiente manera:


2013 Página 87

104. Ve a la carpeta de LIBRERIAS TALLER y arrastra a tu proyecto la carpeta json, que

contiene las librerías necesarias para trabajar con formatos JSON.


2013 Página 88

105. Verifica que las opciones siguientes estén marcadas tal como se muestra a

continuación, y para terminar haz clic en Finish.

106. Ahora haz clic sobre la clase ConsumoServicioController.m, y agrega el siguiente

código.

#import "ConsumoServicioController.h" ++++++ CODIGO 25 +++++++

@interface ConsumoServicioController () @end @implementation ConsumoServicioController @synthesize txtIDPoi; - (id)initWithNibName:(NSString *)nibNameOrNil bundle:(NSBundle *)nibBundleOrNil { self = [super initWithNibName:nibNameOrNil bundle:nibBundleOrNil]; if (self) { // Custom initialization } return self; }


2013 Página 89

- (void)viewDidLoad { [super viewDidLoad]; // Do any additional setup after loading the view from its nib. } - (void)didReceiveMemoryWarning { [super didReceiveMemoryWarning]; // Dispose of any resources that can be recreated. } - (IBAction)obtenerNombrePoi:(id)sender { ++++++ CODIGO 26 +++++++ } //Cierra el teclado al precionar la tecla DONE - (IBAction)cerrarTeclado:(id)sender { ++++++ CODIGO 27 +++++++ } //Regresa al menu - (IBAction)regresarMenu:(id)sender { ++++++ CODIGO 28 +++++++ } @end

107. Regresa a la clase ViewController.h, e Inserta dos botónes y nómbralos Ir

Consumo de Servicio y Regresar respectivamente, y realiza los mismos pasos anteriores,

conectando el botón Ir Consumo de Servicio con un método llamado irConsumoServicio,

el botón Regresar con un método llamado regresarMenu.


2013 Página 90

108. Agrega el siguiente código al objeto ViewController.m

#import "ViewController.h" #import "POIController.h" ++++++ CODIGO 29 +++++++

@interface ViewController () @end @implementation ViewController - (void)viewDidLoad { [super viewDidLoad]; // Do any additional setup after loading the view, typically from a nib. } - (void)didReceiveMemoryWarning {


2013 Página 91

[super didReceiveMemoryWarning]; // Dispose of any resources that can be recreated. } - (IBAction)irGestionPoi:(id)sender { POIController *vista=[[POIController alloc]initWithNibName:nil bundle:nil]; [self presentViewController:vista animated:YES completion:nil]; } - (IBAction)irConsumoServicio:(id)sender { ++++++ CODIGO 30 +++++++

} @end

109. Una vez terminado, puedes probar la aplicación dando clic en el botón RUN de

Xcode, verifica que IPhone 6.0 Simulator este seleccionado.

110. Deberías ver la aplicación funcionando correctamente.


2013 Página 92

111. Una vez finalizado el proyecto,h aremos uso de una herramienta llamada SQLite

Database Browser para Mac, que nos permitirá explorar la Base de Datos FIAWORLD.db

mencionada al inicio de esta guía. La herramienta puedes descargarla de este enlace:

http://sourceforge.net/projects/sqlitebrowser/

112. Una vez instalada la aplicación, puedes abrir el archivo FIAWORLD.bd y explorar su

contenido y estructura. La pestaña Database Estructure te permite ver el esquema de la

Base de datos, la pestaña Browse Data permite explorar el contenido de las tablas, y la

pestaña Execute Sql te permite realizar consultas mediante lenguaje SQL a la base de

datos. Usa esta herramienta para averiguar si los datos que se han insertado mediante la

aplicación son correctos.

http://sourceforge.net/projects/sqlitebrowser/


2013 Página 93


2013 Página 94


2013 Página - 1 -

Anexos Glosario

Reference Counting:, que no es más que un contador de los sitios donde se está utilizando un

objeto de la aplicación Xcode. De este modo, cuando las diferentes partes de nuestra

aplicación se van liberando este objeto mediante su método RELEASE, el contador va

disminuyendo, y al llegar a cero, se destruye automáticamente liberando ese espacio en

memoria.

Aplicación Web


2013 Página - 2 -

Base de Datos