Upload
others
View
8
Download
0
Embed Size (px)
Citation preview
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
Guía N° 1 Universidad de El Salvador
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.
Guía N° 1 Universidad de El Salvador
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
Guía N° 1 Universidad de El Salvador
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
Guía N° 1 Universidad de El Salvador
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”.
Guía N° 1 Universidad de El Salvador
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”.
Guía N° 1 Universidad de El Salvador
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:
Guía N° 1 Universidad de El Salvador
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)”.
Guía N° 1 Universidad de El Salvador
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”.
Guía N° 1 Universidad de El Salvador
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”.
Guía N° 1 Universidad de El Salvador
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”.
Guía N° 1 Universidad de El Salvador
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”
Guía N° 1 Universidad de El Salvador
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:
Guía N° 1 Universidad de El Salvador
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”.
Guía N° 1 Universidad de El Salvador
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”.
Guía N° 1 Universidad de El Salvador
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”.
Guía N° 1 Universidad de El Salvador
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:
Guía N° 1 Universidad de El Salvador
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:
Guía N° 1 Universidad de El Salvador
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”.
Guía N° 1 Universidad de El Salvador
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.
Guía N° 1 Universidad de El Salvador
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:
Guía N° 1 Universidad de El Salvador
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
},
Guía N° 1 Universidad de El Salvador
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”
Guía N° 1 Universidad de El Salvador
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:
Guía N° 1 Universidad de El Salvador
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:
Guía N° 1 Universidad de El Salvador
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:
Guía N° 1 Universidad de El Salvador
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:
Guía N° 1 Universidad de El Salvador
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.
Guía N° 1 Universidad de El Salvador
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.
Guía N° 1 Universidad de El Salvador
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
Guía N° 1 Universidad de El Salvador
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.
Guía N° 1 Universidad de El Salvador
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.
Guía N° 1 Universidad de El Salvador
2013 Página 33
12. Selecciona la ubicación donde guardarás el proyecto.
Guía N° 1 Universidad de El Salvador
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.
Guía N° 1 Universidad de El Salvador
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
Guía N° 1 Universidad de El Salvador
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.
Guía N° 1 Universidad de El Salvador
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.
Guía N° 1 Universidad de El Salvador
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.
Guía N° 1 Universidad de El Salvador
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.
Guía N° 1 Universidad de El Salvador
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.
Guía N° 1 Universidad de El Salvador
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
Guía N° 1 Universidad de El Salvador
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.
Guía N° 1 Universidad de El Salvador
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.
Guía N° 1 Universidad de El Salvador
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.
Guía N° 1 Universidad de El Salvador
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.
Guía N° 1 Universidad de El Salvador
2013 Página 46
35. Ahora busca y selecciona el Framework CoreLocation.framework
Guía N° 1 Universidad de El Salvador
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.
Guía N° 1 Universidad de El Salvador
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.
Guía N° 1 Universidad de El Salvador
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.
Guía N° 1 Universidad de El Salvador
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.
Guía N° 1 Universidad de El Salvador
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).
Guía N° 1 Universidad de El Salvador
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.
Guía N° 1 Universidad de El Salvador
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.
Guía N° 1 Universidad de El Salvador
2013 Página 54
52. Alarga un poco más la interfaz para poder agregar los componentes faltantes.
Guía N° 1 Universidad de El Salvador
2013 Página 55
53. Añade un Objecto Picker View.
Guía N° 1 Universidad de El Salvador
2013 Página 56
54. Agrega siete Labels y un botón.
55. Abre el Asistente Editor.
Guía N° 1 Universidad de El Salvador
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: +++++++
Guía N° 1 Universidad de El Salvador
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: +++++++
Guía N° 1 Universidad de El Salvador
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.
Guía N° 1 Universidad de El Salvador
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.
Guía N° 1 Universidad de El Salvador
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.
Guía N° 1 Universidad de El Salvador
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.
Guía N° 1 Universidad de El Salvador
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”.
Guía N° 1 Universidad de El Salvador
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:
Guía N° 1 Universidad de El Salvador
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;
Guía N° 1 Universidad de El Salvador
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.
Guía N° 1 Universidad de El Salvador
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.
Guía N° 1 Universidad de El Salvador
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:
Guía N° 1 Universidad de El Salvador
2013 Página 69
81. Agrega Cuatro Text Field y un Switch.
Guía N° 1 Universidad de El Salvador
2013 Página 70
82. Busca y agrega el objeto Table View y ajústalo como en la siguiente imagen.
Guía N° 1 Universidad de El Salvador
2013 Página 71
83. Agrega dos botones, y nombralos Buscar y Actualizar respectivamente.
Guía N° 1 Universidad de El Salvador
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 +++++++
Guía N° 1 Universidad de El Salvador
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.
Guía N° 1 Universidad de El Salvador
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.
Guía N° 1 Universidad de El Salvador
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.
Guía N° 1 Universidad de El Salvador
2013 Página 76
Guía N° 1 Universidad de El Salvador
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.
Guía N° 1 Universidad de El Salvador
2013 Página 78
93. Realiza los pasos 83 y 84 para los dos Text Field restantes.
Guía N° 1 Universidad de El Salvador
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];
Guía N° 1 Universidad de El Salvador
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
Guía N° 1 Universidad de El Salvador
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.
Guía N° 1 Universidad de El Salvador
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.
Guía N° 1 Universidad de El Salvador
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.
Guía N° 1 Universidad de El Salvador
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.
Guía N° 1 Universidad de El Salvador
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.
Guía N° 1 Universidad de El Salvador
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:
Guía N° 1 Universidad de El Salvador
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.
Guía N° 1 Universidad de El Salvador
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; }
Guía N° 1 Universidad de El Salvador
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.
Guía N° 1 Universidad de El Salvador
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 {
Guía N° 1 Universidad de El Salvador
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.
Guía N° 1 Universidad de El Salvador
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.
Guía N° 1 Universidad de El Salvador
2013 Página 93
Guía N° 1 Universidad de El Salvador
2013 Página 94
Guía N° 1 Universidad de El Salvador
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
Guía N° 1 Universidad de El Salvador
2013 Página - 2 -
Base de Datos