Creación de una aplicación SIG con OpenLayers, ExtJS y MySQL

Transcripción

1 Departament d Enginyeria Informàtica i Matemàtiques Creación de una aplicación SIG con OpenLayers, ExtJS y MySQL TITULACIÓN: Ingeniería Técnica en Telecomunicaciones, especialidad Telemática AUTOR: Marina Carrillo Baena DIRECTOR: Maria Ferré PONENTE: Joaquín López FECHA: Junio 2011

2 ÍNDICE 1. DESCRIPCIÓN DE LA EMPRESA: AIDDEA LINUX, S.L UBICACIÓN DEL PROYECTANTE DENTRO DE AIDDEA LINUX, S.L DESCRIPCIÓN DE LA TAREA REALIZADA Introducción Objetivos del Proyecto Especificaciones del Proyecto Sistema de Información Geográfica (SIG) Definición y Elementos Principales Cartografía Definición Sistema de Coordenadas Proyecciones Representación de la Información Modelo Raster Modelo Vectorial Comparación entre Modelo Raster y Vectorial Actualidad y Ejemplos de Aplicaciones de un SIG Open Geospatial Consortium (OGC) Web Map Service (WMS) Web Feature Service (WFS) Diseño del Proyecto OpenLayers Qué és? Por qué OpenLayers? Ext JS: Qué es? Ventajas e Inconvenientes de Ext JS Gestión de la información: Base de datos PHP MySQL Lenguaje SQL phpmyadmin Base de Datos

3 Tabla Tipos de dispositivos Tabla Dispositivos Tabla Historial AJAX Ventaja e Inconvenientes de AJAX AJAX: Intercambio de Datos con JSON Comparación entre XML y JSON Desarrollo Archivo SIG.html Archivo Sig_Ext.js Diseño de los Paneles Botones y Formularios Archivo MAPA.js Mapa Controles y Configuración del Mapa Layers o Capas Markers Historial Archivo Conectarse.php Archivo Datos.php Archivo TreeData.php Simulación de la Recepción de Datos Vía SMS Evaluación: Juego de Pruebas Crear un Tipo de Dispositivo Modificar un Tipo de Dispositivo Crear un Dispositivo Simulación Recepción de Datos Visualizar Historial de un Dispositivo Visualizar la Última Posición de un Dispositivo Visualizar el Recorrido de un Dispositivo Eliminar Tipo de Dispositivo Eliminar Dispositivo Recursos utilizados Requisitos hardware y software

4 4. APORTACIONES DEL PROYECTO A LOS CONOCIMIENTOS DEL ALUMNO APORTACIONES DE LOS ESTUDIOS REALIZADOS AL PROYECTO CONCLUSIONES Y LÍNEAS FUTURAS REFERENCIAS

5 1. DESCRIPCIÓN DE LA EMPRESA: AIDDEA LINUX, S.L: Este proyecto se llevará a cabo para la empresa Aiddea Linux, S.L, representada por Joaquín López, y situada en: Camí de Valls, nº 81-87, despacho 61, Reus. Aiddea Linux es una empresa de diseño de ingeniería electrónica especializada en electrónica embedded, RFID, comunicaciones. Dentro de estos campos tiene como objetivo la investigación, fabricación y ensamblaje de productos y otros componentes auxiliares. Ofrece servicios tanto en el campo de la electrónica como de las TIC. Por la parte electrónica, como ya hemos comentado, desarrolla diseños electrónicos a medida desde el concepto inicial hasta la entrega de prototipos funcionales para integrar en el cliente final. Por la parte TIC, Aiddea crea aplicaciones a medida del cliente, tanto sobre Windows como sobre Linux. A continuación listamos algunas de las tecnologías con las que trabajan: - Automatización y robótica. - Bases de datos. - Equipamiento doméstico y domótica. - Equipamiento y dispositivos electrónicos. - Gestión de inventarios. - Gestión documental. - Hardware informático. - Integración de sistemas. - Marketing y promoción digital. - Programario libre. - Sistemas wireless. - Software a medida. En podemos encontrar la oferta completa de servicios y soluciones de Aiddea. Por último comentar que también cuenta con un portal de venda on-line, de productos electrónicos. 5

6 2. UBICACIÓN DEL PROYECTANTE DENTRO DE AIDDEA LINUX, S.L: El acuerdo entre Aiddea Linux, S.L, y Marina Carrillo fue el de realizar un aplicativo web para la gestión de dispositivos remotos. En concreto, un Sistema de Información Geográfica, es decir, un sistema que nos permitirá tener localizados diferentes elementos, en un mapa, podemos resumirlo en la palabra Geolocalización, término nuevo, y muy presente actualmente debido al auge de este tipo de tecnologías, que hace referencia a conocer la ubicación geográfica, de un dispositivo determinado. Como requisitos técnicos el programa debe estar programado en JavaScript y PHP. Por otra parte, Aiddea Linux quiere que la aplicación pueda ser utilizada en distintas situaciones, por lo tanto se hará de forma que se pueda adaptar a diferentes tipos de elementos a localizar, aunque la idea actual se basa en tener localizados a un número determinado de animales, se pretende adaptarla en un futuro a otro tipo de demandas. Otro requisito deseado es que la interfaz debe ser minimalista e intuitiva, al usuario le debe resultar fácil navegar por la página y acceder a las funcionalidades que quiera de forma sencilla. Para realizar el proyecto, durante los meses de trabajo hemos ido realizando reuniones, o nos hemos puesto en contacto vía correo electrónico, para ir acordando los requisitos de la aplicación, tales como: definir las funciones deseadas y necesarias para el proyecto, comprobar y revisar el trabajo realizado, comentar dudas, y en resumen, ir definiendo correctamente el diseño y desarrollo del aplicativo. A continuación, en el apartado 3, se explicará en profundidad la tarea realizada. 6

7 3. DESCRIPCIÓN DE LA TAREA REALIZADA: Este apartado es la parte fundamental del proyecto. Constará de los siguientes apartados: - Introducción: Haremos una introducción general sobre la tarea a realizar, aportando ejemplos actuales que nos ayudaran a ir decidiendo como plantearemos nuestra aplicación. - Objetivos: Se trata de las metas globales del proyecto, es decir, hacer un esquema de todo aquello que necesitamos estudiar previamente para realizar la aplicación, y todas las funciones y características que debe tener el caso práctico final. - Especificaciones del proyecto: En otras palabras podríamos decir que es el enunciado completo de la aplicación, los requisitos principales que ha puesto Aiddea Linux, S.L. - Conceptos básicos: En el cual nos centraremos en dos temas principales, los Sistemas de Información Geográfica (SIG), en el cual se incluye la explicación de este tipo de sistemas y conceptos básicos de cartografía, y el Open Geospatial Consortium (OGC). Se trata de situarnos en el tema, así, a la hora de realizar el proyecto práctico comprenderemos mejor ciertas funciones y decisiones. - Diseño: Se explican detalladamente las tecnologías utilizadas, entre ellas OpenLayers, para la gestión del mapa, Ext JS, para la interfaz y MySQL, para el almacenamiento de los datos, exponiendo las ventajas de cada una de ellas. - Desarrollo: Se hará una descripción de la estructura de la aplicación, es decir, los archivos que la forman y las funciones principales de cada uno de ellos. - Evaluación: Juego de pruebas: En este apartado haremos funcionar la aplicación, para comprobar que todo funciona de acuerdo a los objetivos y especificaciones. - Recursos utilizados: Se expondrá el software y hardware utilizados para el desarrollo del proyecto, y para que la aplicación funcione correctamente. 7

8 3.1. Introducción: La Geolocalización es una de las manifestaciones más populares del desarrollo actual de las Tecnologías de la Información y las Comunicaciones (TIC), y que está experimentando un auge relevante en los últimos tiempos. Hay diferentes formas de saber la ubicación de un elemento físico, pero últimamente con la evolución de la telefonía móvil, podemos ubicarnos en cualquier punto del mundo, ya sea mediante receptores GPS, redes WI-FI inalámbricas, o las propias redes de telefonía móvil, a esto le añadimos el desarrollo de la banda ancha móvil que permite la conexión permanente a internet de los llamados teléfonos inteligentes (smartphones). El uso práctico de este tipo de tecnologías es muy variado, desde el uso en redes sociales como Facebook, como puede ser Facebook Places, aplicación que te proporciona información sobre restaurantes, tiendas, opiniones de los diferentes lugares, etc, hasta utilidades como trazado de rutas, senderismo... Pero no sólo están ideadas para el ocio, en el campo empresarial y profesional también tienen utilidades muy importantes, como por ejemplo sistemas que utilizan algunas compañías de seguros para la localización de vehículos robados o siniestrados, etc. En el proyecto que nos ocupa crearemos la aplicación con la que visualizaremos la información recibida en el mapa. Para entender mejor el funcionamiento general, a continuación explicaremos los elementos básicos de este tipo de sistemas, en nuestro caso estará formado por tres elementos (Véase Figura 1.): - Equipos de localización: Elemento que llevará cada dispositivo que queremos tener posicionado, será el emisor de la posición y por lo tanto estará compuesto por un receptor de GPS 1 y una tarjeta SIM con la cual se enviarán los SMS al servidor, también se puede obtener la posición mediante la localización GSM 2 a través de la SIM, pero es un método menos preciso que mediante GPS. - Servidor: Computadora que gestiona la comunicación entre los equipos de localización y la aplicación web. Es donde se almacena toda la información recibida de los dispositivos remotos, de forma que cuando el usuario la solicite mediante la web, se pueda mostrar. - Aplicativo Web: Será el paso final, la web donde el usuario podrá visualizar la información deseada, y ver todos los dispositivos registrados. Será la tarea principal que se desarrollará en este proyecto. 1 GPS: Global Positioning System - Sistema de Posicionamiento Global 2 Localización GSM: es un servicio ofrecido por las empresas operadoras de telefonía móvil que permite determinar, con una cierta precisión, donde se encuentra físicamente un terminal móvil determinado. 8

9 Figura 1. Esquema simplificado del funcionamiento del Sistema de Localización Objetivos del Proyecto: En este apartado se define como es el proyecto a realizar, así como las funciones y posibilidades que se esperan de él, es decir, lo que se pretende conseguir. El proyecto tiene como finalidad principal el diseño y desarrollo de una aplicación web, en la cual se representa un mapa con la información espacial recibida de unos determinados dispositivos (elementos móviles). Para poder adentrarnos en las características y funcionamiento deseado, primero es conveniente hacer un estudio general de este tipo de tecnologías, por lo tanto, a priori, tendremos una serie de objetivos iniciales, de carácter más teórico, tales como: Conocer que es un SIG (Sistema de Información Geográfica), así como conceptos generales relacionados con la cartografía, como coordenadas, proyecciones, etc. Comprender los estándares más extendidos del OGC (Open Geospatial Consortium). Hacer un estudio sobre el framework OpenLayers, valorando sus capacidades para obtener los resultados deseados y las posibles futuras ampliaciones o modificaciones de la aplicación. Crear la base de datos necesaria mediante MySQL, para poder gestionar la información recibida de forma eficiente. 9

10 Elegir un framework Javascript adecuado para la creación del portal, en este caso EXT JS. Trabajar con los objetos y funciones de OpenLayers para, posteriormente, implementar un visor con OpenLayers y mostrar las diferentes rutas y posiciones. Una vez situados en el tema, definiremos los objetivos básicos del funcionamiento de la aplicación. Debido a que está ideada para poderla adaptar a diferentes situaciones temáticas, es decir, no sabemos qué tipos de elementos (por ejemplo: coches, animales, etc) serán los que queramos posicionar, siempre hablaremos de dispositivos en general: Recibir y almacenar la información de cada dispositivo. Tener la posibilidad de crear, eliminar y modificar dispositivos. Mostrar en el mapa la última posición recibida de cada uno de los dispositivos. Visualizar la ruta seguida por un elemento a partir de los diferentes datos espaciales recibidos. Estos serían los objetivos principales, tanto a nivel teórico, como práctico. A continuación, en el apartado especificaciones se expondrán más a fondo todas las características y funciones que queremos que realice la aplicación Especificaciones del Proyecto: El proyecto trata de desarrollar una aplicación Web capaz de gestionar y monitorizar una serie de dispositivos wireless. En un principio la aplicación está ideada para cualquier tipo de dispositivo a localizar, ya que se pretende que pueda ser utilizada en distintas situaciones, aunque como ejemplo e idea principal será utilizada para localizar un número determinado de animales en un terreno. Por lo tanto no habrá un número elevado de elementos, sobre unos 100 aproximadamente. Los dispositivos podrán ser agrupados en clases, es decir, tipos de dispositivos. La aplicación constará de varias partes diferenciadas para facilitar la gestión de la información recibida, como mínimo con las siguientes: - Pantalla de visualización del mapa, en la cual se mostrará, cuando el usuario lo indique, la última posición de un elemento en concreto o la ruta que ha seguido a partir de todos los datos que hayamos recibido. - Árbol: Deberemos tener un panel que tenga un árbol con todos los dispositivos registrados, para marcar cuales queremos visualizar en el mapa. - Pantalla con la lista de tipos de dispositivos y sus características (id, nombre, icono, número máximo de dispositivos que admite, número de dispositivos que 10

11 tiene actualmente, observaciones), en esta pantalla también tendremos opciones para modificarlos, eliminarlos o crear nuevos tipos. - Pantalla con la lista de dispositivos, será prácticamente igual a la explicada para los tipos de dispositivo, en este caso tendremos id, tipo, icono, nombre, y observaciones, de cada uno de ellos. También tendremos los botones que nos permitirán acceder a modificarlos, eliminarlos o crear nuevos, además se añadirá el botón historial que nos mostrará las posiciones recibidas del dispositivo seleccionado. - Como ya hemos dicho la aplicación nos debe facilitar las opciones para crear, modificar y eliminar los tipos de dispositivos y dispositivos, se crearán y modificarán mediante formularios que piden los datos necesarios y validan la información introducida por el usuario. En el caso de eliminar, siempre se pedirá al usuario que confirme que desea eliminarlos, para asegurarnos que no borre información accidentalmente. La aplicación está ideada para que la información de cada dispositivo se reciba mediante SMS. Se tendrá que tener en cuenta que se debe utilizar el protocolo/servicio más simple posible, ya que el encargado de enviar la información será un dispositivo embedded, con una capacidad de proceso limitada. Se recibirá un mensaje, vía SMS, con al menos la posición GPS, el resto de información se podrá obtener si ese número de teléfono está dado de alta en la configuración. En el tema de recepción de datos no nos adentraremos mucho, simplemente haremos una pequeña simulación para poder utilizar las funciones de la aplicación Sistema de Información Geográfica (SIG): Definición y Elementos Principales: El término SIG procede del acrónimo de Sistema de Información Geográfica (en inglés GIS, Geographic Information System). Como definición general podríamos decir que se trata de sistemas que permiten integrar y analizar información geográfica, los cuales proporcionan herramientas al usuario para editar, analizar e incluso visualizar los datos obtenidos en un mapa. De manera más técnica añadiríamos que están formados por equipos electrónicos (hardware), que están programados adecuadamente (software) para permitir el manejo de una serie de datos espaciales (información geográfica) y realizar análisis complejos de éstos, siguiendo los criterios impuestos por el equipo científico (equipo humano). Podemos identificar fácilmente los elementos principales (Ver Figura 2.), cada uno de ellos realiza su tarea para, en conjunto, obtener un SIG funcional: - Hardware: Ordenador o grupo de ordenadores y periféricos de entrada y salida que constituyen el soporte físico del SIG. 11

12 - Software: Los programas SIG proveen las herramientas y funcionalidades necesarias para almacenar, analizar y mostrar información geográfica, los componentes principales son: o Sistemas para administrar bases de datos. o Una interfaz gráfica de usuarios para el fácil acceso a las herramientas. o Herramientas para captura y gestión de la información. o Herramientas para soporte de consultas, análisis y visualización de los datos espaciales. Actualmente, con el mayor acceso a Internet y a la demanda de datos geográficos distribuidos, el software SIG ha cambiado gradualmente su perspectiva hacia la distribución de datos a través de la red. Los SIG que en la actualidad se comercializan son combinaciones de varias aplicaciones interoperables y APIs. - Datos geográficos: Es el componente más importante. Pueden obtenerse por recursos propios o a través de proveedores de datos. A su vez es el elemento diferenciador de un SIG frente a un Sistema de Información, ya que este tipo de datos contiene dos vertientes: la espacial y la temática. Para aclarar estos dos conceptos pondremos un ejemplo. Si tenemos un SIG que nos muestra los niveles de contaminación en el agua, un lago tendrá dos tipos de información: la que nos indica sus magnitudes en el mapa y aspecto, la espacial, y la que nos muestra los niveles de contaminación, la temática. Por lo tanto, el sistema tiene que trabajar con cartografía y con bases de datos a la vez, de forma que al unirlo obtendremos una base de datos geográfica. - Procedimientos: Para que un SIG tenga éxito, este debe operar de acuerdo a un plan bien diseñado y estructurado y acorde a las reglas de la empresa, que son los modelos de las actividades propias de cada organización. - Equipo humano: Hay distintas formas de interactuar con este tipo de programas, dependiendo del tipo de usuario: o Usuario final el cual obtiene información del sistema. o Técnico o especialista que configura y define las herramientas a utilizar, los datos, etc., dependiendo de la finalidad exacta del programa. o Informáticos, dependiendo de la magnitud del sistema, son los encargados de su administración. 12

13 Figura 2. Elementos principales de un SIG Cartografía: Antes de adentrarnos más en los sistemas GIS, explicaremos conceptos geográficos básicos, tales como longitud, latitud, proyecciones, etc. Los cuales nos ayudaran a comprender mejor su funcionamiento Definición: La cartografía es la ciencia que se encarga del estudio y de la elaboración de los mapas geográficos y territoriales, entre otros. A grandes rasgos, se trata de implementar una representación de la Tierra sobre una superficie plana llamada mapa. De manera simple, un mapa es la representación del mundo real reducido a puntos, líneas y polígonos mediante el uso de símbolos gráficos. Debido a que la Tierra tiene una forma esférica, se debe utilizar un sistema de proyecciones para poder representar una superficie esférica en una superficie plana. El problema es que en realidad no es exactamente esférica, su forma es más achatada en los polos que en la zona ecuatorial. Además de representar los contornos, las superficies y los ángulos, se ocupa de representar la información sobre el mapa. Estas representaciones, actualmente se están realizando con los sistemas SIG, en los que se puede georeferenciar (dotar de coordenadas geográficas (longitud, latitud), ubicar en el espacio) Sistema de Coordenadas: Se trata del conjunto de valores que permiten definir unívocamente la posición de cualquier punto de un espacio geométrico respecto de un punto denominado origen. El conjunto de ejes, puntos o planos que confluyen en el origen y a partir de los cuales se 13

14 calculan las coordenadas de cualquier punto, constituyen lo que se denomina sistema de referencia. Sistema de Coordenadas Geográficas: El sistema de coordenadas geográfico está alineado con los ejes de rotación de la Tierra. Define dos ángulos desde el centro de la Tierra: latitud y longitud (Ver Figura 3.), que explicamos a continuación: - Latitud: Mide el ángulo entre cualquier punto y el ecuador. Las líneas de latitud se llaman paralelos y son círculos paralelos al Ecuador en la superficie de la tierra. - Longitud: Mide el ángulo a lo largo del ecuador desde cualquier punto de la tierra. Se acepta que Greenwich, en Londres, es la longitud cero. Las líneas de longitud son círculos máximos que pasan por los polos y se llaman meridianos. Figura 3. Sistema de Coordenadas Geográficas. Longitud y latitud. Combinando estos dos ángulos, se puede expresar la posición de cualquier punto de la superficie de la Tierra Proyecciones: Las proyecciones estudian las distintas formas de mostrar la superficie terrestre en un plano. Un mapa, es una representación en dos dimensiones, de un objeto tridimensional (la Tierra), por lo tanto, cuando lo creamos, estamos perdiendo una dimensión, por este motivo el plano obtenido no será perfecto, habrá una pequeña distorsión. Esto supone un problema ya que no hay forma de representar la esfera sobre una superficie plana, sin que exista un error mínimo. Las proyecciones vienen a solventar este problema, estudiando las distintas opciones para obtener la forma más exacta posible en el mapa. Existen diferentes tipos de proyecciones pero nos centraremos en la proyección Spherical Mercator, que es de la que hablaremos durante el proyecto. 14

15 Proyección de Mercator: Este tipo de proyección consiste en representar la superficie esférica terrestre sobre una superficie cilíndrica, tangente al ecuador, que al desplegarse genera un mapa terrestre plano. Con otras palabras, diríamos que se basa en el modelo ideal que trata a la Tierra como un globo hinchable, el cual se introduce en un cilindro y empieza a inflarse ocupando el volumen del cilindro e imprimiendo el mapa en su interior. Este cilindro cortado longitudinalmente y ya desplegado sería el mapa (Ver Figura 4.). Esta proyección presenta una buena aproximación en su zona central, pero las zonas superior e inferior correspondientes a norte y sur presentan grandes deformaciones. Google Maps y Virtual Earth 2d, actualmente usan la proyección de Mercator. A pesar de sus relativas distorsiones de escala, esta proyección está muy indicada para mapas interactivos en que se hacen desplazamientos y acercamientos de regiones pequeñas, donde las formas se distorsionan relativamente poco. Figura 4. Proyección Spherical Mercator Representación de la Información: En este apartado explicaremos las principales técnicas que utilizan los SIG para representar la información, es decir, el mundo real, datos como carreteras, uso del suelo, contaminación, etc. Estos a su vez se pueden dividir en dos tipos: objetos discretos (ejemplo: casa, carretera) y continuos (ejemplo: nube de contaminación, acuíferos). Para almacenar estos datos hay dos formas principales de hacerlo, se trata del modelo raster y el vectorial, a continuación se explicará cada uno de ellos y por último, se compararan Modelo Raster: La idea principal del modelo de datos raster, es una imagen digital dividida en mallas. Se divide el espacio en celdas regulares (píxeles) y cada una de ellas representa un único valor, el cual puede ser discreto, como el uso del suelo, o un valor continuo, como una temperatura, o un valor nulo, si no existe información. 15

16 Como ya hemos dicho la imagen queda como una rejilla de celdas, por lo tanto la posición de cada una viene implícita según el orden que ocupa en la malla, el espacio no es continuo sino que se divide en unidades discretas. Este tipo de estructuras puede implicar un incremento del espacio de almacenamiento, ya que guardan cada celda de la matriz sin tener en cuenta si se trata de una entidad o simplemente de un espacio vacío, información no significativa. Para obtener una descripción precisa de los objetos geográficos contenidos en la base de datos, el tamaño del píxel ha de ser reducido (en función de la escala), lo que dotará a la malla de una resolución alta. Sin embargo, a mayor número de filas y columnas, más resolución, pero también, mayor esfuerzo en el proceso de captura de la información y mayor costo computacional a la hora de procesarla. Los datos raster se almacenan en diferentes formatos, desde un archivo estándar basado en la estructura de TIFF, JPEG, etc. a grandes objetos binarios Modelo Vectorial: En este caso modelamos digitalmente las entidades del mundo real a partir de elementos geométricos. Para ello se utilizan vectores definidos por pares de coordenadas relativas a algún sistema cartográfico. Los principales componentes son: - Punto o nodo: unidad básica para representar entidades geográficas que pueden ser expresadas por un único punto de referencia, en otras palabras, la simple ubicación. - Línea: a partir de dos puntos, como mínimo, formaremos las líneas. En este tipo de elementos se puede medir la distancia. - Polígono: en este caso a partir de líneas o agrupaciones de puntos crearemos polígonos. El interés de este tipo de representaciones se centra en la precisión de localización de los elementos geográficos sobre el espacio, donde los fenómenos a representar son discretos, es decir, de límites definidos. 16

17 Figura 5. A la izquierda modelo de datos raster, a la derecha modelo de datos vectorial Comparación entre Modelo Raster y Vectorial: Después del estudio de los dos modelos, podemos observar que una de las diferencias principales es la exactitud de representación, es decir, el modelo raster, al contrario que el vectorial, es especialmente útil cuando tenemos que describir objetos geográficos con límites difusos, como por ejemplo la dispersión de una nube de contaminantes, donde los contornos no son absolutamente nítidos, normalmente con tratamiento de objetos continuos. Por otro lado el modelo vectorial es más exacto. Otros aspectos a tener en cuenta es el coste computacional, en el caso raster se necesita más espacio de memoria, aunque la estructura de los datos es muy simple. En el caso vectorial, sólo se almacenan los datos digitalizados por lo tanto no necesita tanto espacio de memoria, por el contrario la estructura de datos es más compleja. En algunos casos se podrán utilizar los dos modelos para cubrir las necesidades completas de la aplicación Actualidad y Ejemplos de Aplicaciones de un SIG: En la actualidad es una herramienta muy utilizada en muchos ámbitos, debido a que permite elaborar cartografía temática sobre cualquier aspecto ambiental y socioeconómico de la superficie terrestre. Aunque no nos demos cuenta, en nuestro día a día están presentes en muchos ámbitos. Por ejemplo, las mercaderías que consumimos habitualmente son transportadas a través de vehículos monitoreados por sistemas satelitales, con los SIG se puede hacer un seguimiento de todas las unidades de transporte para obtener datos como la ruta por la que 17

18 van, cálculos de distancia hasta al punto de destino, ubicación, distancia recorrida otra muestra de la utilidad de estos programas la encontramos en las compañías eléctricas, las cuales pueden gestionar toda su red de servicios a través de ellos, en el caso de una avería podrán ver fácilmente toda el área afectada, ayudando así a la pronta solución del problema. En general, el mundo de la información a la vez que Internet ha experimentado una evolución muy importante en los últimos años. Gracias a esto, el mundo de los SIG ha asistido a una explosión de aplicaciones destinadas a mostrar y editar cartografía en entornos web, hoy día cualquier usuario que navegue por la red, por muy pocos conocimientos que tenga sabrá de la existencia, por ejemplo, de Google Maps. Más recientemente, estas aplicaciones también se están extendiendo muy rápidamente a terminales de telefonía móvil y otros sistemas como tablets. Este tipo de aplicaciones da acceso al público de enormes cantidades de datos geográficos, por esta razón es necesario establecer unos estándares, creados por la organización OGC 3, que facilitan la interoperabilidad de los datos espaciales. Muchas disciplinas se han beneficiado de las tecnologías SIG. Esto ha producido una reducción de costes y mejoras en componentes de hardware y software de sistemas. Además, esta tecnología ha sido asimilada por multitud de universidades e instituciones. A continuación nombramos algunas de ellas: - La Infraestructura de Datos Espaciales de España (IDEE) tiene como objetivo el integrar a través de Internet los datos, metadatos, servicios e información de tipo geográfico que se producen en España, facilitando a todos los usuarios la localización, identificación, selección y acceso a tales recursos, a través del Geoportal de la IDEE ( - A nivel europeo, existe el proyecto INSPIRE (Infrastructure for Spatial Information in Europe), iniciativa de la Comisión Europea cuyo objetivo es la creación de una Infraestructura de Datos Espaciales en Europa. - La Infraestructura de Dades Espacials de Catalunya es una plataforma para el intercambio y cambio de la información geoespacial a través de Internet, en la cual participan todas las administraciones públicas (entes locales, Generalitat, estado) y también otras instituciones públicas y privadas. 3 Ver apartado 3.5. Open Geospatial Consortium 18

19 A continuación se muestran algunos ejemplos de SIG: - Camino Jacobeo: Ejemplo de SIG aplicado al ámbito del Patrimonio Histórico-Artístico. Se trata de una aplicación que hace recorridos virtuales por las rutas del Camino de Santiago, además nos proporciona información sobre pueblos, alojamientos, restaurantes. - Geoportalbcn: Figura 6. SIG Camino de Santiago [7] En el pasado salón GlobalGeo 2011 se presentó la actualización del Geoportalbcn. El Geoportal es el punto de entrada a la Infraestructura de Datos Espaciales del Ayuntamiento de Barcelona. El usuario puede interactuar con la aplicación, calculando distancias, buscando puntos en concreto de la ciudad, obteniendo información cartográfica, etc. Figura 7. Geoportalbcn [8] 19

20 - Ideclocal: Se trata de una iniciativa de IDEC (Institut de Dades Espacials de Catalunya), el cual es la base técnica para la organización, promoción, explotación y mantenimiento de las infraestructuras de datos espaciales, con la finalidad de difundir geoinformación y servicios conexos, y que sean más accesibles para asegurar el uso compartido. Figura 8. IdecLocal [9] 3.5. Open Geospatial Consortium (OGC): El Open Geospatial Consortium (OGC) es una organización internacional que agrupa a 416 compañías y organismos públicos. Trabaja en la definición de especificaciones públicas para el intercambio de datos entre los sistemas de información geográfica. El principal objetivo de dicho consorcio es la definición de estándares abiertos e interoperables dentro de los GIS y de la World Wide Web que faciliten el intercambio de la información geográfica, entre distintos sistemas, en beneficio de los usuarios y de la industria [16]. Figura 9. Logotipo OGC [16] Dentro de las especificaciones definidas por el OGC destacamos dos por su importancia y grado de implantación en el mundo de los GIS: Web Map Service (WMS) y Web Feature Service (WFS). 20

21 Web Map Service (WMS): Es un estándar OGC, que produce mapas de datos referenciados espacialmente, de forma dinámica a partir de información geográfica. Este estándar internacional define un "mapa" como una representación de la información geográfica, en forma de un archivo de imagen digital conveniente para la exhibición en una pantalla de ordenador. Está organizada en una o más capas, que pueden visualizarse u ocultarse una a una. Se puede consultar cierta información disponible y las características de la imagen del mapa. Los mapas producidos por WMS se generan normalmente en un formato de imagen como PNG, GIF o JPEG, y opcionalmente como gráficos Web Feature Service (WFS): Es un servicio estándar, que ofrece un interfaz de comunicación que permite interactuar con los mapas servidos por el estándar WMS, como por ejemplo, editar la imagen que nos ofrece o analizarla siguiendo criterios geográficos. Para realizar estas operaciones se utiliza el lenguaje GML 4 (Lenguaje de Marcado Geográfico) que deriva del XML, que es el estándar a través del que se transmiten la ordenes WFS. Los WFS pueden ser del tipo no transaccional o transaccional. La diferencia es que el transaccional sólo permite hacer consultas y recuperación de elementos geográficos, frente al transaccional que permite además la creación, eliminación y actualización de estos elementos geográficos del mapa Diseño del Proyecto: OpenLayers: Qué és? OpenLayers es una librería escrita en JavaScript, orientado a objetos, que nos facilita acceder, manipular y mostrar mapas en cualquier página web o aplicación, del lado cliente, por lo tanto sin necesidad de un servidor ni configuración. Figura 10. Logotipo OpenLayers [21] A continuación, con la Figura 11. y los conceptos Web Map Client y Web Map Server, acabaremos de aclarar el significado de qué OpenLayers sea una librería del lado cliente. Esto es llamado Client/Server Model y es, básicamente, como trabajan la mayoría de aplicaciones web. 4 GML: lenguaje utilizado para el modelaje, transporte y almacenamiento de información geográfica. 21

22 En el caso de las web map application, algún tipo de cliente (por ejemplo OpenLayers) comunica con alguna clase de Web map server (por ejemplo un servidor WMS o Google Maps). Figura 11. Client / Server Model [20] - Web Map Client: Como ya hemos dicho, OpenLayers trabaja en el lado cliente. Una de las principales tareas que el cliente realiza es conseguir imágenes de mapas de un servidor. El cliente irá pidiendo al servidor de mapas aquello que quiere ver. Cada vez que navega o hace zoom en el mapa, el cliente tiene que hacer nuevas peticiones, ya que está solicitando cosas diferentes. OpenLayers se encarga de manejar estas tareas a través de Javascript asíncrono (AJAX 5 ), llamadas a un servidor de mapas. OpenLayers une todas las imágenes que recibe de forma que obtiene el mapa tal y como el usuario lo visualiza. - Web Map Server: Este concepto ha sido explicado en el capítulo anterior como un estándar OGC, en este apartado lo veremos de una forma más práctica. Un servidor de mapas nos proporciona el propio mapa. Hay muchos servidores de este tipo, un ejemplo son Google Maps, mapas de Yahoo, mapas OpenStreet, etc. El principio básico detrás de todos ellos es que permiten especificar el área que queremos ver (mediante el envío de una solicitud), una vez recibida la solicitud, el servidor se encarga de enviar una respuesta que contiene la imagen. Con OpenLayers se pueden utilizar diversos servidores incluso combinarlos. OpenLayers no es un servidor de mapas, por lo tanto, el cliente deberá tener acceso a algún servidor de mapas, no se debe hacer nada, tan sólo introducir la dirección URL en OpenLayers. Mapas OpenStreet, Google, Yahoo, etc proporcionan acceso a sus servidores de mapas (algunos de ellos son comerciales y es posible que le apliquen restricciones en algunos de los servicios) Por qué OpenLayers? Una característica positiva de OpenLayers es que ha sido desarrollado para promover información geográfica de todo tipo, es decir, puede mostrar mapas y marcadores cargados de cualquier fuente. Uno de sus objetivos principales consiste en separar las herramientas para la visualización de los mapas, de los datos, de manera que todas las funciones se pueden utilizar a partir de diferentes fuentes. De esta forma, no estamos obligados a ver la 5 Ver apartado AJAX 22

23 información espacial a través de las aplicaciones propias de los creadores o proveedores de datos geográficos. En resumen, nos permite elaborar nuestros mapas haciendo uso de su propia base de información cartográfica o usar su estructura para hacer uso de otros servicios. Además, si comparamos OpenLayers con otros frameworks con la misma finalidad, el punto fuerte lo encontramos en que es un software gratuito, de código abierto, de uso totalmente libre bajo la licencia BSD 6. Está desarrollado por y para la comunidad de software libre ya que actualmente es un proyecto de la Open Source Geoespatial Foundation (OSGeo). Además, implementa métodos estándar de la industria para el acceso a los datos geográficos, tales como el Open Geospatial Consortium: Web Map Service (WMS) y Web Feature Service (WFS), explicados anteriormente. A diferencia de otras APIs, como por ejemplo Google Maps, se trata de un paquete creado por una comunidad open source. Esto puede resultar útil para aquellos que no quieren mostrar el logo de Google, ya que debido a la licencia de Google Maps no está permitido ocultarlo Ext JS: Qué es? De acuerdo a la definición de la página web ExtJS es una librería Javascript que permite construir aplicaciones complejas en Internet, las llamadas RIA. Figura 12. Logotipo Ext JS [32] Antes de explicar más características sobre ExtJS hablaremos sobre RIA, acrónimo de Rich Internet Applications (Aplicaciones Ricas en Internet). Lo que RIA intenta proveer es una experiencia de usuario muy parecida o igual a la que se tiene en las aplicaciones de escritorio. Uno de los objetivos de ExtJS es crear este tipo de aplicativos. Actualmente, es importante tener en cuenta el aspecto de las pantallas de los sistemas que desarrollamos, ya que los consumidores son la parte más importante en nuestras aplicaciones. ExtJS nos ayuda a mejorar la interacción con el usuario, pues nos proporciona componentes con funcionalidades avanzadas y de sencilla implementación. Se trata de que resulten fáciles de usar e intuitivas. Volviendo a qué es ExtJS podemos hablar de sus orígenes, fue construida como una extensión de la librería Yahoo! User Interface (YUI), gracias a su buena estructura 6 BSD: (Berkeley Software Distribution). Es una licencia de software libre muy cercana al dominio público. La licencia BSD permite el uso del código fuente en software no libre. 23

24 actualmente puede interactuar como extensión para las bibliotecas jquery y Prototype. Desde la versión 1.1 puede ejecutarse también como una aplicación independiente, ya que además cuenta con su propia librería la cual se llama Ext-base, es la que se ha utilizado en este proyecto. Otro punto a tener en cuenta son las licencias, tiene tres tipos: - Licencia comercial: esta licencia se debe comprar cuando necesitas desarrollar software propietario. - Licencia Opens Source: este tipo de licencia se aplica cuando se desea desarrollar un proyecto Open Source, esto implica liberar el proyecto con licencia GNU GPL V3. - Licencia Revendedor: este tipo de licencia es necesaria adquirirla cuando se desea realizar un framework o librería basada sobre Ext JS. Para acabar de explicar y valorar este framework a continuación se comentan las principales ventajas e inconvenientes Ventajas e Inconvenientes de Ext JS: Principales ventajas de ExtJS: - AJAX 7 : Las aplicaciones web tradicionales tienen problemas como la recarga continua de las páginas cada vez que el usuario pide nuevo contenido. ExtJS permite la comunicación con el servidor en segundo plano, sin la necesidad de actualizar la página por completo. De esta forma se pueden solicitar o enviar datos hacia o desde su servidor web utilizando AJAX, y procesar la información recibida en tiempo real. - Compatibilidad con los navegadores: Permite crear aplicaciones complejas utilizando componentes predefinidos así como un manejador de layouts similar al que provee Java Swing, gracias a esto provee una experiencia consistente sobre cualquier navegador, evitando el tedioso problema de validar que el código escrito funcione bien en cada uno (Firefox, IE, etc.). - Un modelo de componentes muy bien diseñado: a parte del punto anterior respecto a la compatibilidad con los navegadores, un ejemplo de que se trata de unos componentes muy eficientes es la ventana viewport, la cual al moverla o redimensionarla se adapta, es decir, se dibujan sólo los bordes haciendo que el movimiento sea fluido. - Cuenta con distintos tipos de licencias, explicados anteriormente. 7 Ver apartado Ajax 24

25 - Por último, comentar que otro punto fuerte que nos ha convencido para elegir este framework es la existencia de GeoEXT, se trata de una herramienta construida a partir de la robusta librería de OpenLayers y los ricos componentes gráficos de ExtJS. La cual tiene componentes destinados a aplicaciones SIG, permitiendo crear potentes webs de mapas basadas en Javascript. Principales desventajas de ExtJS: Figura 13. Logotipo GeoExt [36] - Javascript no es tan rápido como quisiéramos, sin embargo con los nuevos navegadores es un factor que puede mejorar. - La librería tiene un tamaño considerable, aunque se puede recortar para incluir aquellas funcionalidades que en realidad se van a utilizar. En resumen, podemos decir que las desventajas de velocidad y tamaño son aspectos a tener en cuenta pero que se contrarrestan con los beneficios que nos aporta. Ya que es muy flexible y además nos permite realizar de una manera muy rápida interfaces con un look and feel muy profesional. Creando aplicaciones vistosas y sobre todo operacionales en el ambiente web, y con un flujo de datos como si se tratará de una aplicación de escritorio Gestión de la información: Base de datos: La combinación del lenguaje PHP junto con la base de datos MySQL es una combinación muy utilizada en un gran número de páginas web que podemos encontrar hoy en día mientras navegamos por internet, debido a la potencia que se consigue utilizando estas dos aplicaciones juntas. A continuación explicaremos cada una de ellas, y también haremos referencia a phpmyadmin herramienta que nos facilitará el trabajo con las bases de datos PHP: PHP es un lenguaje de alto nivel embebido en páginas html que se ejecuta en el servidor, por lo tanto no es necesario ser compilado, al contrario de otros lenguajes que son ejecutados en el propio navegador. Es un lenguaje multiplataforma, funciona bajo diferentes sistemas operativos. Una de las ventajas que ofrece este tipo de lenguajes es que al ejecutarse en el servidor, todas nuestras páginas van a poder ser vistas en cualquier ordenador, independientemente del navegador que tenga. 25

26 La función principal que realizará PHP en el aplicativo web será la de gestionar la información de la base de datos que tenemos almacenada en el servidor. Otro punto fuerte de PHP es que se trata de un lenguaje de programación totalmente gratuito. Cuando decimos que PHP es un lenguaje del lado del servidor significa que el usuario abre la página html en su navegador y hace una petición de interactuar. PHP instalado en dicho servidor web interpreta o procesa el script, es decir, la petición, y envía dicha respuesta al usuario en forma de documento html. Esto es una breve explicación del funcionamiento de PHP que podemos ver gráficamente en la Figura MySQL: Figura 14. Funcionamiento de PHP. Se trata de una base de datos que soporta el lenguaje SQL y la conexión de varios usuarios, en general se utiliza para aplicaciones de tamaño pequeño-medio como la que nos ocupa. Como PHP es gratuito Lenguaje SQL: El lenguaje SQL (Structured Query Languaje - Lenguaje de consultas estructurado) es una herramienta para organizar, gestionar y recuperar datos almacenados en una base de datos informática. Como su propio nombre indica, SQL es un lenguaje informático que se puede utilizar para interaccionar con una base de datos y más concretamente con un tipo específico llamado base de datos relacional. Este tipo de base de datos permite establecer interconexiones (relaciones) entre los datos (que están guardados en tablas), y a través de dichas conexiones relacionar los datos de ambas tablas, de ahí proviene su nombre: "Modelo Relacional". 26

27 Está compuesto por comandos, cláusulas, operadores y funciones de agregado. Estos elementos se combinan en las instrucciones para crear, actualizar y manipular las bases de datos. Por último, decir que es un lenguaje estándar por haberse visto consolidado por el Instituto Americano de Normas (ANSI) y por la Organización de Estándares Internacional (ISO). Para el uso y manejo de la base de datos MySQL, vamos a emplear una aplicación muy usual y extendida llamada phpmyadmin phpmyadmin: PhpMyAdmin es una herramienta escrita en PHP con la intención de manejar la administración de MySQL a través de páginas web, utilizando Internet. Actualmente puede crear y eliminar Bases de Datos, crear, eliminar y alterar tablas, borrar, editar y añadir campos, ejecutar cualquier sentencia SQL, administrar claves en campos, administrar privilegios, exportar datos en varios formatos y está disponible en 62 idiomas. Se encuentra disponible bajo la licencia GPL Base de Datos: En nuestra aplicación utilizamos una base de datos, que está formada por tres tablas: Tabla Tipos de dispositivos: - Una tabla para guardar los tipos de dispositivos: Tabla: t_disp Campos Tipo de datos Tamaño (bytes) id TINYINT(3) 3 nomt CHAR(10) 10 icono CHAR(12) 12 maxdisp TINYINT(3) 3 numdisp TINYINT(3) 3 ob_tipo CHAR(30) 30 TOTAL: 61 Tabla 1. Tabla Tipos de Dispositivos, con sus campos correspondientes y el tamaño de cada uno de ellos. Esta tabla almacenará los tipos de dispositivos, es decir, podemos agrupar los elementos a localizar en diferentes clases o grupos. 27

28 Tiene seis campos, a continuación explicaremos cada uno de ellos: El id, se trata de un valor numérico que identifica al grupo de dispositivos, se ha configurado en phpmyadmin como un tipo de datos Tinyint y además como unsigned, es decir, deberá ser un número entero positivo comprendido entre 0 y 255. Esto significa que la aplicación como máximo tendrá 256 tipos de dispositivos. No podrá haber dos id iguales ni valores nulos, ya que se ha definido como clave primaria. En el diseño de bases de datos relacionales, se llama clave primaria a un campo o a una combinación de campos que identifica de forma única a cada fila de una tabla. Una clave primaria comprende de esta manera una columna o conjunto de columnas. No puede haber dos filas en una tabla que tengan la misma clave primaria. nomt hace referencia al nombre que le pondremos al tipo de dispositivo. En este tipo de campos en los cuales se almacenan cadenas de caracteres teníamos dos opciones a elegir para definir el tipo de datos, VARCHAR y CHAR. En ambos tipos el rango de caracteres que se pueden guardar va de 1 a 255. Para ver la diferencia pondremos un ejemplo, imaginemos que guardamos la palabra Coches la cual tiene 6 caracteres: En el caso de CHAR(10), guardaremos los 6 caracteres correspondientes a Coches y además 4 espacios vacíos hasta llegar al número máximo de caracteres que hemos establecido en 10. En el caso de VARCHAR(10) se guardarán sólo los 6 caracteres de la palabra más un byte para indicar la longitud de la columna, por lo tanto 7 bytes. Llegados a este punto parece ilógico haber elegido como tipo de datos CHAR, la razón es que con CHAR accedemos más rápido a la información porque sabemos que todas las filas son de la misma longitud, a diferencia de lo que pasa con VARCHAR que se tiene que ir mirando el byte que se ha guardado de más, para saber el tamaño de cada fila. icono en este campo guardaremos el nombre del archivo que haga referencia a la imagen que represente al grupo de dispositivos, que después se utilizará en la interfaz de la aplicación. También es definido como CHAR(10). maxdisp y numdisp ambas serán variables de tipo Tinyint por lo tanto no podrán ser superiores a 255. La primera será introducida por el usuario que nos indicará el número máximo de elementos que puede tener un tipo 28

29 de dispositivo, como máximo 255. Debido al tipo de variable que le hemos asignado, como máximo serán 255, dependiendo del uso exacto que se le quiera dar a la aplicación podemos modificarlo y ponerle otra clase de dato, que nos permita tener más dispositivos. Por el momento, creemos que el uso no será a gran escala. La segunda numdisp nos informará de la cantidad de dispositivos que tiene actualmente. ob_tipo por último tendremos un campo por si queremos hacer algún tipo de observación respecto a un grupo de elementos. Tendremos capacidad para 30 caracteres. Una vez definidos todos los campos, sabemos que una fila nos ocupará 61 bytes, teniendo en cuenta que como máximo tendremos 256 tipos de dispositivos, la tabla t_disp tendrá un tamaño máximo de: bytes = 15,25 KB Tabla Dispositivos: - Una tabla para guardar los dispositivos: Tabla: disp Campos Tipo de datos Tamaño (bytes) teléfono INT(9) 9 idtipo TINYINT(3) 3 iconodisp CHAR(12) 12 nombre CHAR(10) 10 observaciones CHAR(30) 30 color CHAR(7) 7 TOTAL: 71 Tabla 2. Tabla de Dispositivos, con sus campos correspondientes y el tamaño de cada uno de ellos. En esta tabla se almacenarán los dispositivos o elementos a localizar. Está compuesta por: teléfono o identificador numérico del elemento, será el número de teléfono del dispositivo a localizar, el cual nos enviará la información mediante mensajes de texto, esta decisión de diseño formaba parte de los requisitos iniciales de la aplicación. Lo hemos configurado como un número entero de 9 cifras de valor positivo, por lo tanto irá de 0 a Es la clave primaria de la tabla. 29

30 idtipo es igual que el id que hemos definido en la tabla anterior, la única diferencia es que en este caso no es la clave primaria de la tabla. Hace referencia al grupo de dispositivos al que pertenece el dispositivo. Se trata de una clave foránea. iconodisp se trata del nombre del archivo del icono que representará al dispositivo remoto en la interfaz, es decir, en el mapa y en el árbol de dispositivos. Será una imagen propia del dispositivo e independiente a la del grupo de dispositivos. Los campos nombre y observaciones corresponden al nombre y a las observaciones del dispositivo, respectivamente. Por último color corresponde al color que le asignaremos al LineString 8 del dispositivo. Le hemos puesto una longitud máxima de 7 caracteres ya que corresponde a un color en HTML con el siguiente formato: #XXXXXX. Esta vez, sabemos que una fila nos ocupará 71 bytes, teniendo en cuenta que como máximo tendremos 255 dispositivos por tipo de dispositivo, y un máximo de 256 tipos, la tabla disp tendrá un tamaño máximo de: bytes = 4,42 MB aproximadamente Tabla Historial: - Una tabla para guardar el historial, o información recibida de cada dispositivo: Tabla: historial Campos Tipo de datos Tamaño(bytes) teléfono INT(9) 9 fecha DATE 3 hora TIME 3 latitud DECIMAL(8,5) 10 longitud DECIMAL(8,5) 10 TOTAL: 35 Tabla 3. Tabla del Historial de cada Dispositivo, con sus campos correspondientes y el tamaño de cada uno de ellos. 8 LineString: Ver capítulo Layers o capas. 30

31 En esta tabla tendremos la información recibida de todos los dispositivos, los campos que la forman son: teléfono campo descrito en la tabla anterior. En este caso actúa como clave foránea ya que relaciona la tabla de dispositivos con la del historial de información recibida. fecha configurado como tipo de datos Date, como es evidente se almacenará una fecha. El rango de valores va desde el 1 de enero del 1001 al 31 de diciembre de El formato de almacenamiento es de año-mesdía. Se debe tener en cuenta que Mysql simplemente comprueba que el mes está comprendido entre 0 y 12 y que el día está comprendido entre 0 y 31. hora almacenará una hora. El rango de horas va desde -838 horas, 59 minutos y 59 segundos a 838 horas, 59 minutos y 59 segundos. El formato de almacenamiento es de 'HH:MM:SS'. En esta tabla la clave primaria estará formada por el teléfono, la fecha y la hora. latitud y longitud se definen como decimales, este tipo se usa para guardar valores para los que es importante tener una precisión exacta. El tipo de datos se define como DECIMAL (8, 5) dónde 8 es el número máximo de dígitos que tendrá el número contando también los decimales, y 5 será el número de decimales. El tema de la cantidad de decimales que se guardan, en un futuro se podrá cambiar, ya que depende del GPS que tenga el dispositivo. La posición mostrada será más o menos fiable en función de esto. La longitud total de cada fila de esta tabla será de 35 bytes. En este caso es más difícil hacer un cálculo aproximado de la medida ya que es muy variable, no sabemos exactamente las posiciones que se van a recibir. 31

32 Figura 15. Relación entre las bases de datos. Por último ver de forma práctica (Véase Figura 15.), el modelo de Base de datos relacional comentado en el aparatado anterior. Ya que la tabla de dispositivos está relacionada mediante el campo teléfono con la tabla que guarda las posiciones, a la vez con la tabla que contiene los tipos de dispositivos a través del campo idtipo que es el mismo valor que tenemos en la tabla t_disp dentro del campo id AJAX: En este apartado se definirán y explicaran los términos AJAX, y JSON. Tecnologías que nos permitirán intercambiar información del servidor al cliente y a la inversa, valorando su eficacia, sus ventajas e inconvenientes. Inicialmente definiremos Ajax, acrónimo de Asynchronous JavaScript And XML (JavaScript asíncrono y XML), es una técnica de desarrollo web para crear aplicaciones interactivas o RIA (Rich Internet Applications). Estas aplicaciones se ejecutan en el cliente, es decir, en el navegador de los usuarios mientras se mantiene la comunicación asíncrona con el servidor en segundo plano. La característica fundamental de AJAX es permitir actualizar partes de una página, con información que se encuentra en el servidor, sin tener que refrescar completamente la página. Como ya hemos dicho, se trata de una tecnología asíncrona, en el sentido de que los datos adicionales se requieren al servidor y se cargan en segundo plano sin interferir con la visualización ni el comportamiento de la página. JavaScript es el lenguaje con el cual se efectúan, normalmente, las funciones de llamada de Ajax. 32

33 Figura 16. Ajax en aplicaciones web Ventaja e Inconvenientes de AJAX: A continuación haremos un resumen de las ventajas e inconvenientes de AJAX: - Ventajas: Utiliza tecnologías existentes. Es una técnica válida para múltiples plataformas y utilizable en muchos sistemas operativos y navegadores, dado que está basada en estándares abiertos como JavaScript y Document Object Model (DOM). Interactividad: es posible realizar cambios sobre las páginas sin necesidad de recargarlas, lo que significa aumentar la interactividad, velocidad y usabilidad en las aplicaciones. Mayor velocidad, esto es debido a que no hay que retornar toda la página nuevamente. La página se asemeja a una aplicación de escritorio, aplicaciones RIA. - Desventajas: Debemos dominar varias tecnologías. 33

34 Se pierde el concepto de volver a la página anterior. Dependiendo de la carga del servidor podemos experimentar tiempos tardíos de respuesta AJAX: Intercambio de Datos con JSON: JSON, acrónimo de JavaScript Object Notation, es un formato de intercambio de datos ligero y fácil de leer para humanos y máquinas. En él se describe de qué manera los datos se transfieren. La simplicidad de JSON ha dado lugar a la generalización de su uso, especialmente como alternativa a XML en AJAX. XML es el formato usado generalmente para la transferencia de datos solicitados al servidor, aunque cualquier formato puede funcionar, incluyendo HTML, texto plano, JSON, etc. Ahora viene la pregunta clave, Por qué usar JSON si el estándar habitual es XML?, a continuación haremos un breve estudio sobre ambas tecnologías Comparación entre XML y JSON: Una de las principales ventajas de usar JSON es que los datos ocupan mucho menos que XML, ya que XML, añade bastante sobrecarga a los datos que queremos serializar. Este es un ejemplo de los datos de una persona en XML: <persona> <nombre>rodrigo</nombre> <apellido>corral</apellido> <genero>varón</genero> <edad>29</edad> </persona> Código 1. Ejemplo XML Y estos son los mismos datos en JSON: { "nombre" : "Rodrigo", "apellido" : "Corral", "genero" : "varón", "edad" : 29 } Código 2. Ejemplo JSON 34

35 El problema principal en AJAX es mover datos entre el servidor y el cliente, este problema se suele resolver usando XML. La mayoría de las aplicaciones AJAX, en el cliente la programación la realizan casi siempre con JavaScript, como es el caso de nuestro proyecto. Existen diversas posibilidades para leer XML desde JavaScript, pero todas ellas son farragosas en mayor o menor medida y son bastante lentas y pesadas. JSON en esencia es JavaScript perfectamente correcto, esto nos permite que simplemente podamos tener un objeto JavaScript totalmente válido. De modo que podamos acceder a los datos de una manera orientada a objetos. Cada vez hay más soporte de JSON mediante el uso de paquetes escritos por terceras partes. La lista de lenguajes soportados incluye C, C++, C#, Delphi, Java, JavaScript, Perl, PHP, etc. En nuestro proyecto utilizamos PHP, en el próximo capítulo, 3.7. Desarrollo, lo veremos de forma práctica. En resumen, el menor peso de los datos en JSON y la comodidad de trabajar en JavaScript facilitándonos la manera de acceder a la información, nos ha convencido para utilizar está técnica. En los siguientes apartados se verá desarrollada de forma más concreta en nuestro aplicativo Desarrollo: Archivo SIG.html: HTML (HyperText Markup Language) es el lenguaje utilizado para construir páginas web. Sus comandos se incluyen en documentos que nuestros equipos descargan del servidor y son interpretados por el navegador (Mozilla Firefox, Google Chrome, Internet Explorer...). Nuestro archivo HTML, Sig.html, tendrá la estructura general de un documento de este tipo, en la cabecera o Head tendremos: - Enlace a la hoja de estilos: estilos.css : <link rel="stylesheet" type="text/css" href="estilos.css" /> Código 3. Link a la hoja de estilos.css - Librería JavaScript de ExtJS: Para utilizar esta librería debemos descargarla, está formada por: 1.- <link rel="stylesheet" type="text/css" href="resources/css/ext-all.css" /> 2.- <script type="text/javascript" src="extjs/extall.js"></script> 35

36 3.- <script type="text/javascript" src="extjs/extbase.js"></script> 4.- <script type="text/javascript" src="extjs/ext-langes.js"></script> Código 4. Llamada a la librería JavaScript de ExtJS o En la primera línea del Código 4. tenemos la carpeta resources en la cual se encuentran las imágenes y estilos necesarios para los componentes del framework. o Línea 2 Código 4. contiene el archivo ext-all.js que guarda todos los widgets y componentes del framework. o ExtJS nos ofrece la posibilidad de elegir trabajar con diferentes librerías, como por ejemplo JQuery o Prototype, nosotros hemos optado por elegir la librería propia de ExtJS por lo tanto importamos el archivo extbase.js. (Véase línea 3 del Código 4.) o Por último, importamos el archivo ext-lang-es.js, el cual hace que todos los mensajes y advertencias nos salgan en español, ya que por defecto están en inglés. También tenemos la posibilidad de ponerlo en otros idiomas como francés, alemán, italiano, etc - Librería OpenLayers: La última versión de librería se encuentra en la siguiente URL: Para utilizarla basta con apuntar a esa dirección en nuestra página web. Utilizando el fichero.js, en la carpeta api, estaremos seleccionando la última versión estable de la librería. Si cambiamos la carpeta api por dev apuntaremos a la versión en desarrollo (dev-elopment), la cual nos permitirá probar las funcionalidades en marcha. En nuestro caso hemos utilizado la versión en desarrollo ya que tiene una interfaz más vistosa. Nuestro código quedará: <script src=" </script> Código 5. Llamada a la librería OpenLayers Si se desea también existe la opción de descargar una versión concreta de la librería y desplegarla en nuestro servidor web. - Google Maps: Debemos hacer referencia a la librería de Google ya que utilizaremos sus mapas. <script src=" </script> Código 6. Llamada a la librería Google Maps - Librería GeoExt: Igual que hemos hecho con las librerías anteriores debemos hacer con la de GeoExt para utilizar sus funciones. Por lo tanto nos descargaremos el 36

37 archivo correspondiente y lo llamaremos en el encabezado head de nuestro archivo html. <script type="text/javascript" src="extjs/geoext.js"></script> Código 7. Llamada a la librería JavaScript de GeoExt. - Llamada a los archivos que forman la aplicación: Para introducir el código JavaScript de la aplicación introducimos: <script type="text/javascript" src="mapa.js"></script> <script type="text/javascript" src="sig_ext.js"></script> Código 8. Llamada a los archivos que forman la aplicación. Hemos creado dos archivos para conseguir una mejor organización del código, a continuación explicaremos en profundidad cada uno de ellos. A rasgos generales, podemos decir que mapa.js contiene la creación del mapa y elementos que visualizaremos en él, y ext.js contiene principalmente la interfaz de la aplicación. Por otra parte para la gestión de los datos tenemos el archivo conectarse.php, Datos.php, TreeData.php Archivo Sig_Ext.js: De lo primero que debemos hablar es de una de las funciones principales, Ext.onReady(), se trata de un método que asegura que nuestro documento está listo, ha sido cargado por completo. Y nos garantiza que cualquier elemento de la página al que queramos referenciar ya estará disponible cuando se ejecute el script. A continuación debemos proveer a Ext con una imagen para generar espacios (Ver Código. 9), es importante, ya que algunas veces los componentes no se visualizarán correctamente si no tenemos conexión a Internet, esto ocurre porque esta imagen gif está alojada fuera de nuestro servidor. Ext.BLANK_IMAGE_URL = 'resources/images/default/s.gif'; Código 9. Ruta imagen spacer. 37

38 Diseño de los Paneles: El archivo Sig_ext.js contiene principalmente toda la interfaz gráfica. En la Figura 17. vemos la estructura general: Figura 17. Pantalla inicio de la aplicación. Ext utiliza paneles, los cuales son la base de muchos diseños. Vemos que nuestra aplicación (Figura 17.) está dividida en tres partes o paneles bien diferenciados, todos ellos están dentro de uno especial que los engloba a todos, llamado Viewport. La diferencia con otro tipo de paneles es que contiene todo el layout 9 y además se adapta al área visible de nuestro navegador, lo que queremos decir con esto es que si cambiamos el tamaño de la pantalla, se adaptan todos los paneles a la nueva medida. Dentro de esta ventana tenemos un layout llamado border el cual contiene región norte (en la Figura 17. Número 1), centro (en la Figura 17. Número 2) y este (en la Figura 17. Número 3). A continuación explicaremos cada una de ellas de forma detallada. - Región Norte (1) - Título: En la región Norte simplemente creamos un panel dónde estará el título de la aplicación, lo creamos mediante xtype: panel. Xtype nos ofrece la posibilidad de instanciar un nuevo componente de forma rápida, lo veremos durante la aplicación en muchos casos. Este método puede ayudar a conservar memoria en nuestra aplicación web. 9 Layout: En una ventana, la clase que decide cómo se reparten los botones (y demás controles) dentro de ella. 38

39 - Región Centro (2) Mapa y paneles de dispositivos: En este caso tenemos un tipo de panel diferente, xtype: tabpanel. En un mismo espacio podemos tener tres secciones distintas, iremos de una a otra mediante las pestañas que hay en la parte superior. Figura 18. TabPanel con la segunda pestaña activada. o Tab MAPA: Al iniciar la aplicación siempre estará activada la pestaña número 1 (Ver Figura 18. Número 1), esto es gracias a la propiedad: activetab: 0. Dentro de esta pestaña tenemos un panel especial para mapas gracias al framework GeoExt 10 se trata de xtype: gx_mappanel que nos permite cargar el mapa directamente. o Tab TIPO DE DISPOSITIVOS: (Ver Figura 18. Número 2) En esta pestaña mostramos la tabla de todos los tipos de dispositivos y sus características, que tenemos almacenados en la base de datos. Para visualizar la información en forma de tabla necesitamos dos componentes: Objeto Ext.Data.Store: Un Store es un componente que almacena temporalmente información mediante registros, es utilizado como caché. A este le debemos pasar: Un objeto proxy que tendremos que configurar, el proxy normalmente es HTTP y le indicamos la url para acceder a los datos, y el método HTTP que se utilizará para las solicitudes. El formato en el que están los datos. Para especificar el tipo de datos necesitamos un lector o reader de JSON. Al reader le pasaremos varios argumentos: el nombre del 10 Ver apartado Ventajas e Inconvenientes de ExtJS 39

40 array (root) que contiene toda la información, y los diferentes campos (fields) que debe leer. Por último con la función load(), cargamos los datos. Objeto Ext.Grid.GridPanel: los argumentos principales que debemos pasarle serán el Store creado en el paso anterior, y las columnas que queremos que muestre. A cada columna le pasamos el parámetro Header (Nombre que tendrá en la pantalla), dataindex (para indicarle que columna del data Store es, por lo tanto tendrá que coincidir con alguno de los campos indicados en el JSONreader) y por último sortable: true que permite ocultar columnas y ordenar las filas (Ver Figura. 19). Figura 19. Propiedad Sortable: true. o Tab DISPOSITIVOS: (Ver Figura 18. Número 2) Este apartado es similar al de tipos de dispositivos, también tenemos una tabla con todos los dispositivos que hay registrados en la aplicación, la única diferencia es que hemos utilizado un tipo de Store diferente que nos permite clasificarlos según al grupo de elementos al que pertenecen. Se trata del objeto Ext.data.GroupingStore y el único parámetro extra que le pasaremos será groupfield: 'nomt' que nos indicará a partir de que campo los clasificamos (Ver Figura. 20.). 40

41 Figura 20. Panel de dispositivos clasificados por Tipos de Dispositivos. En los recuadros rojos los nombres de los tipos de dispositivos. - Región Este (3) Árbol de dispositivos: Por último, la región este está formada por un panel que contiene un layout tipo accordion (Ver Figura. 21.). Figura 21. Panel con Layout accordion. Cuando se haga clic en el signo + se desplegará el panel correspondiente. Con este tipo de layout en el mismo espacio tendremos dos paneles, en concreto, dos treepanel. Se trata del listado de los dispositivos con un checkbox para seleccionar que dispositivo o dispositivos queremos visualizar en el mapa. Como podemos ver en la Figura 21. Uno será para ver la posición de un elemento, es decir, nos activará un Marker 11 o varios, y el otro nos permitirá ver la ruta que ha hecho el dispositivo, nos mostrará las LineString 12 correspondientes. 11 Ver apartado Markers 12 Ver apartado Historial 41

42 El código que necesitamos para crear un árbol lo podemos dividir en tres partes diferenciadas: o Creamos el árbol: En nuestro caso lo hemos creado mediante xtype: treepanel es lo mismo que si usamos Ext.tree.TreePanel. o Objeto Ext.Tree.TreeLoader se encarga de buscar los datos para rellenar el árbol, como parámetro se le indica la url a dónde debe ir para buscar la información en formato JSON. o Root Node: Cada árbol requiere un root node o nodo principal, del cual descenderán el resto de elementos. Para crearlo utilizamos: Ext.tree.AsyncTreeNode. La razón por la que usamos AsyncTreeNode en lugar del TreeNode básico, que también existe, es porque estamos esperando a ir cargando los nodos y esperando a que se carguen los hijos des del servidor, rama por rama y no todos a la vez. A este objeto le pasamos parámetros como el nombre, el icono, el checkbox, etc. Una vez creado el treepanel le añadimos una barra en la parte inferior la cual tiene dos botones, uno que permite expandir todo el árbol y otro que hace la función contraria Botones y Formularios: Tanto en la pestaña correspondiente a los tipos de dispositivos como a los dispositivos, tenemos una barra superior en la cual hay diferentes botones (Ver Figura 22.). Figura 22. Botones que se encuentra en la pestaña dispositivos. Explicaremos todas las opciones que contiene la pestaña dispositivos, ya que es la más completa, ya que los botones que hay en tipo de dispositivos son prácticamente iguales. Lo primero que encontramos es Nuevo Dispositivo si hacemos click obtendremos una ventana (Ver Figura 23.) la cual se ha creado mediante new Ext.Window y a la que le pasamos una serie de atributos como pueden ser: medida, título, tipo de layout, en este caso será tipo form ya que dentro tendremos un formulario a rellenar, etc. 42

43 Figura 23. Ventana añadir dispositivo. En la aplicación utilizamos formularios en varias ocasiones, principalmente para guardar un elemento o modificarlo. Dentro de la ventana explicada anteriormente, tendremos un parámetro llamado ítems, el cual contiene todo lo que se mostrará en ella. Por lo tanto, dentro de ítems, crearemos un formulario con new Ext.FormPanel, a la vez este también tendrá una serie de características como bodystyle o url (nos indicará la url a la cual se debe ir para guardar los datos, se explicará a continuación) y de la misma forma que el objeto Window, también tendrá el parámetro ítems, que esta vez contendrá los diferentes campos del formulario. A continuación, explicaremos los principales tipos de campos que hemos utilizado en los formularios, nuestros campos se crearan usando xtype, como ya hemos visto anteriormente xtype es una referencia a un determinado componente Ext. Todo campo debe tener tres parámetros básicos: - Xtype: que nos dirá exactamente de qué tipo de campo se trata. En la aplicación tenemos los siguientes tipos: o Numberfield: Se trata de un campo que sólo nos permite introducir números. o Textfield: En este campo se podrá introducir una línea de texto el número máximo de caracteres irá en función del parámetro maxlength. o Textarea: En este tipo de campos se permite al usuario introducir varias líneas de texto. En nuestro caso lo hemos utilizado para el campo observaciones y está limitado a 30 caracteres, que es el máximo que permite guardar la base de datos en este campo. Por lo tanto, si el usuario introduce más de 30 caracteres le aparecerá un aviso. 43

44 o Combo: (Ver Figura 24.) Se trata de un campo que despliega un menú permitiéndonos elegir una de las opciones. En nuestro caso nos aparece en el formulario que añade dispositivos, para elegir a qué clase de dispositivos pertenece. Está formado por varios parámetros pero destacamos varios: mode: remote, que indica que las opciones del menú son cargadas de la base de datos, para ello le indicamos store: storet, explicado en el apartado anterior, es el mismo utilizado para cargar la tabla de tipos de dispositivos. También le indicamos el estilo, para poder ver varios datos en cada opción, aunque el valor real del campo es el que se indica en el atributo valuefield. Figura 24. Combo. - FieldLabel: que nos indicará el string que aparecerá en pantalla para indicarle al usuario que datos debe introducir. - Name: Es un parámetro muy importante, ya que se trata del nombre con el cual se envían los datos, que contiene el campo, al servidor. Otros parámetros opcionales que hemos utilizado, pueden ser: - La medida del campo (maxlength) la cual se ha puesto en función de las medidas máximas aceptadas en la base de datos. - La posibilidad de que el campo quede vacío (allowblank: true o false). - readonly: esta opción nos resultará útil en el caso modificar dispositivo o tipo de dispositivo ya que el ID del elemento no se podrá cambiar, por lo tanto con este parámetro indicamos que sólo se puede leer. Cuando no se cumplen algunos de los requisitos determinados por los parámetros anteriores, la interfaz de ExtJS mostrará al usuario los mensajes de advertencia 44

45 correspondientes, gracias a la clase Ext.QuickTips.init();, se trata de una clase singleton 13. Dentro de la ventana tenemos tres botones que nos permiten enviar la información al servidor (botón guardar), borrar todos los datos que hayamos introducido en el formulario (botón Restablecer) y por último, el botón Cancelar que hace que se cierre la ventana sin guardar nada. Cuando se selecciona la opción guardar, se envía la información mediante el método POST y automáticamente el servidor nos contesta informándonos de si se ha grabado correctamente o no. En caso afirmativo, actualizaremos los gridpanels y treepanels necesarios para visualizar los cambios. La siguiente opción que tenemos en la Figura 22. es modificar dispositivo, funciona igual que la explicada para añadir uno, la única diferencia es que, antes de hacer clic debemos indicar el elemento a modificar. De esta forma nos aparecerá la misma ventana, pero con la información correspondiente a la selección que hemos hecho previamente, cargada en los campos. Una vez lo modificamos (teniendo en cuenta que el id no se puede cambiar) tenemos las opciones Actualizar (enviamos la información al servidor para actualizar la base de datos) o cancelar. A continuación en la Figura 22. tenemos el historial, cuando seleccionamos un dispositivo del gridpanel y a continuación pulsamos este botón, nos aparece una ventana con todas las posiciones recibidas del elemento seleccionado. Los datos aparecen en un GridPanel como los explicados anteriormente. Por último, tenemos la opción eliminar, comentar que cuando indiquemos que queremos eliminar un dispositivo, se preguntará al usuario si está seguro de realizar esa acción, para comprobar que no ha sido por error. Debemos tener en cuenta que cuando se elimine un tipo de dispositivo borrará todos sus componentes, es decir, todos los dispositivos que lo forman y a su vez toda la información recibida de cada uno de ellos. Lo mismo pasa a la hora de eliminar un dispositivo, también elimina las posiciones recibidas de este Archivo MAPA.js: En este archivo se crea el objeto mapa, por lo tanto es, principalmente, dónde estará todo el desarrollo en OpenLayers. Además del mapa y todos sus ajustes, también crearemos las tablas que contengan todos los Markers y LineString, dependiendo de la información que tengamos en la base de datos en ese momento, así como las funciones que se encargan de visualizarlos, ocultarlos, eliminarlos, etc. 13 Clase singleton: Su intención consiste en garantizar que una clase sólo tenga una instancia y proporcionar un punto de acceso global a ella. 45

46 Mapa: Uno de los elementos principales de la aplicación es el mapa. En este archivo hemos creado una variable global llamada map: var map = new OpenLayers.Map(options); Código 10. Creación del objeto mapa. En JavaScript, en cualquier momento podemos crear una variable poniendo delante de ésta la palabra var, esto significa que la hemos definido a nivel global, de esta forma podremos acceder a ella desde cualquier lugar de nuestro código. Hemos creado el objeto map a partir de la clase OpenLayers.Map. Dicho de otra forma se trata de una instancia de la clase Map de OpenLayers. El objeto map es uno de los puntos esenciales de nuestra aplicación, llamaremos a sus funciones para hacer zoom, añadir capas, etc como veremos a continuación. El resto de código que nos queda referente al mapa, lo podemos dividir en dos partes básicas: Controles y Configuración del Mapa: Como podemos ver le pasamos un argumento al objeto map creado, se trata de la variable options, opciones del mapa, que define los controles del mapa y algunos ajustes como las proyecciones utilizadas. Options está formado por pares de key:value, esta forma de definir los atributos es llamada JavaScript Object Notation (JSON) visto anteriormente. Este argumento no es obligatorio, si no se le pasa nada al objeto map, visualizaremos los controles por defecto. var options = { controls: [new OpenLayers.Control.KeyboardDefaults(), new OpenLayers.Control.NavToolbar({position:new OpenLayers.Pixel(50,5)}), new OpenLayers.Control.PanZoomBar(), new OpenLayers.Control.MouseDefaults(), new OpenLayers.Control.LayerSwitcher(), new OpenLayers.Control.MousePosition({prefix:'Longitud Latitud: ', separator: ' '})], projection: new OpenLayers.Projection("EPSG:900913"), displayprojection: new OpenLayers.Projection("EPSG:4326"), units: "m", maxresolution: , maxextent: new OpenLayers.Bounds( , , , ) }; Código 11. Variable options. 46

47 La clase Control es la que nos permite interactuar con nuestro mapa. También nos permite visualizar información adicional, como pueden ser valores de escala, longitud, latitud, etc. Se pueden añadir tantos controles como se quieran. En las siguientes líneas explicaremos la funcionalidad de los que hemos creído conveniente poner en nuestra aplicación: o KeyboardDefaults(): Nos permite desplazarnos por el mapa, y aumentar o reducir el zoom mediante las teclas +/- y las flechas desde teclado. o NavToolbar(): Este tipo de control crea una barra de herramientas que contiene dos botones (destacados en el cuadro rojo situado a la izquierda en la Figura. 25.). el botón superior permite desplazarse por el mapa, el inferior hace un aumento de zoom de la zona seleccionada (se trata del cuadro rojo que podemos ver a la derecha de la Figura. 25.). Como parámetro le pasamos la posición, para situarlo sobre el mapa en la posición deseada, mediante el objeto OpenLayers.Pixel, evidentemente esta función únicamente afecta a los controles que tienen un componente visible como es el caso de NavToolbar. Al objeto OpenLayers.Pixel le pasamos el par de coordenadas x, y, teniendo en cuenta que el origen es la parte superior izquierda del mapa. Figura 25. Control NavToolbar(). o PanZoomBar(): Esta función nos muestra los elementos que podemos ver en la Figura. 26., en la parte superior tenemos las flechas que nos permiten desplazarnos por el mapa. La barra vertical inferior es el zoom, aumentaremos o reduciremos deslizando el selector de color azul que podemos ver en la imagen. 47

48 Figura 26. Control PanZoomBar(). o MouseDefaults(): Con esta línea de código habilitamos hacer zoom mediante el ratón. o LayerSwitcher(): Con el control LayerSwitcher(), nos aparece una lista con las capas que hemos añadido al mapa, cada una con un checkbox, el usuario puede decidir que capas quiere visualizar y cuáles no, activándolo y desactivándolo. Figura 27. Control LayerSwitcher(). o MousePosition: Nos muestra la posición (Longitud, Latitud) en la que se encuentra el ratón. Al objeto OpenLayers.MousePosition le pasamos por parámetro dos strings, el primero llamado prefix, será el texto que queremos poner delante de las coordenadas, el segundo, separator se trata del signo o carácter que queremos que haya entre el valor de la longitud y el de la latitud. 48

49 Figura 28. Resultado Control MousePosition(). Una vez definidos todos los controles tenemos una serie de propiedades que definiremos a continuación, estas son debidas a la utilización de mapas con proyección Spherical Mercator (por ejemplo Google Maps). o Projection: Aquí establecemos la proyección del mapa que es ESPG 14 :900913, es decir, la correspondiente a Spherical Mercator. Si queremos trabajar con Longitud, Latitud, u otro tipo de proyección en otra capa tendremos que transformar las coordenadas. o DisplayProjection: Esta es una propiedad que es utilizada por los controles que muestran información de las coordenadas, como puede ser MousePosition, explicado anteriormente. Este control utiliza otro tipo de proyección distinta a la de los mapas que nosotros hemos incluido (Google Maps y OpenStreetMap) los cuales usan Spherical Mercator. Por lo tanto, con las propiedades projection y displayprojection se transforma la proyección del mapa a la proyección del display. o Units: Esta propiedad indica que el mapa está en metros. Si no se indica nada, por defecto está en grados. La proyección Spherical Mercator utiliza metros. o MaxResolution: Esta propiedad especifica cuál es la resolución máxima del mapa, en otras palabras, hasta qué punto se puede hacer zoom out es decir, hasta qué punto se puede alejar la imagen. En nuestro caso le hemos puesto el valor auto, de esta forma nos aseguramos que se alejará el zoom al máximo posible. o MaxExtent: Con esta propiedad le decimos a OpenLayers los límites máximos del mapa. Los cuatro números representan el mínimo de x, el mínimo de y, el máximo de x y el máximo de y. 14 EPSG es un tipo de clasificación de proyecciones la cual las identifica mediante números. 49

50 Layers o Capas: OpenLayers nos permite tener múltiples servidores diferentes que nos proporcionen mapas. Para acceder a un web map server simplemente tenemos que crear el objeto layer y añadirlo a nuestro mapa con OpenLayers. Figura 29. Tipos de Capas. Antes de explicar las capas que hemos utilizado, debemos definir exactamente que es una capa y los diferentes tipos que hay. Como si de una cebolla se tratara tendremos las diferentes capas una encima de otra, por lo tanto deberemos tener en cuenta el orden en el cual las añadimos. Cada una puede tener sus propiedades como por ejemplo la transparencia, la proyección, etc. En nuestro aplicativo tenemos tres capas base, pudiendo elegir cual visualizamos en cualquier momento mediante el control LayerSwitcher() explicado en el capítulo anterior. Además de las capas bases tenemos dos vector layer, las cuáles nos permiten añadir varios objetos geométricos en nuestros mapas. Por lo tanto tendremos: - Capas Base: o Capa Google o Capa Google Hybrid: Las capas Google y Google Hybrid se crean con la misma clase Layers.Google, la diferencia la encontramos en los argumentos que le pasamos a cada una de ellas. A las dos les pasamos como primer parámetro el nombre que se visualizará en el LayerSwitcher, pero en el caso de la capa Google Hybrid le añadimos el argumento tipo, para que nos muestre el mapa híbrido: 50

51 type: google.maps.maptypeid.hybrid Código 12. Parámetro que le pasamos a OpenLayers.Layer.Google() para indicarle el tipo de capa que queremos. o Capa OpenStreetMap: Igual que en el caso de Google también existe una subclase para OpenStreetMap. new OpenLayers.Layer.OSM("OpenStreetMap"); Código 13. Creación de una capa OpenStreetMap. Hemos elegido OpenStreetMap porque si en un futuro se quiere tener como mapa, una determinada zona, y no todo el mundo, OpenStreetMap entre otros, nos ofrece la posibilidad de mostrar sólo el área indicada. Para esto se necesitaría crear nuestro propio servidor de mapas. - Vector Layers 15 : Un vector usa formas geométricas basadas en ecuaciones matemáticas para formar las imágenes. Esto significa que cuando se acerque la imagen la calidad será la misma, es decir, no se deformará. Si se tratara de una imagen raster se deformaría fácilmente. Además las capas vectoriales nos permiten añadir más información, para acabar de entenderlo pondremos un ejemplo de forma práctica. Si tenemos una imagen raster con un edificio no sabremos nada sobre él, únicamente la forma, con las capas vectoriales podemos tener más datos como por ejemplo el valor del bloque, el propietario, etc Por último comentar que este tipo de capas, como ya hemos dicho anteriormente, pueden contener elementos vectoriales de todo tipo como por ejemplo: puntos, líneas, polígonos, etc. A continuación explicaremos las capas creadas en nuestra aplicación y los objetos creados, los cuáles son llamados Features Markers En la capa Markers, se mostrará la última posición del dispositivo que el usuario seleccione, si en ese momento hay información de este. Cuando hablamos de un Marker nos referimos a una posición, un punto en el mapa, que será definido mediante la longitud y la latitud y en el cuál se colocará el icono que le pasemos por parámetro al crear el objeto. 15 Mirar apartado Representación de la información 51

52 Figura 30. Ejemplo de Marker situado en la posición: Longitud: , Latitud: Con la clase LonLat nos referimos al punto deseado. Como se puede ver en el Código 14. Transformamos los datos de LonLat a la proyección de nuestro mapa, con la función transform. Para que el icono se sitúe en la posición correcta, debemos definir el tamaño de este, mediante el método size, (Véase Código 14.), además también debemos calcular el offset. De esta forma el icono se situará en la posición indicada sin desplazamientos erróneos. Por lo tanto nuestra aplicación tendrá fiabilidad respecto a los datos recibidos, otro tema es que el dispositivo que nos envíe la información no sea totalmente exacto, pero eso no lo podemos controlar desde la aplicación. Una vez tenemos los valores size, offset y la imagen para el icono, crearemos el objeto icono. Finalmente, crearemos el Marker pasándole dos argumentos, el punto donde queremos situarlo (posición lonlat que hemos transformado a la proyección de nuestro mapa) y el icono (icono que hemos creado a partir de la imagen, la medida y el offset). var center = new OpenLayers.LonLat (json.tabla[j]['longitud'],json.tabla[j]['latitud']).transform ( new OpenLayers.Projection("EPSG:4326"), map.getprojectionobject()); var size = new OpenLayers.Size(30,30); var offset = new OpenLayers.Pixel(-(size.w/2), -size.h); var icono='imag/'+json.disp[i]['iconodisp']; var icon = new OpenLayers.Icon(icono,size,offset); markerlist[i]=new OpenLayers.Marker(center, icon); Historial Código 14. Como hacer un marker. En la capa Historial se representará el recorrido que hayan hecho los dispositivos mediante el objeto LineString de OpenLayers. Para crear un LineString necesitamos como mínimo dos puntos. 52

53 Figura 31. LineString formada por tres puntos. Por lo tanto lo primero que tenemos que hacer es una lista de puntos por cada dispositivo, es decir, almacenar todas las posiciones recibidas en un array. Cada posición de esta tabla será un objeto Geometry.Point (x, y), dónde x e y serán longitud y latitud, respectivamente. Como hemos podido ver Point es una subclase de Geometry, como veremos más adelante, LineString también. La clase Geometry guarda información sobre un objeto geométrico o Feature, un feature es un objeto que pertenece a una capa vectorial. Una vez tenemos la lista de puntos ya podemos crear el objeto LineString (new OpenLayers.Geometry.LineString (pointlist)) pasándole el array de puntos como argumento. Una vez tenemos creado el objeto geométrico, ya podemos crear el feature object para poder añadirlo a la capa vectorial, esto lo haremos a través de la clase Feature que es la que utiliza la clase Vector para mostrar los objetos en el mapa. Lo crearemos de la siguiente forma: new OpenLayers.Feature.Vector pasándole tres argumentos, el objeto LineString (puede ser otro tipo de elemento geométrico), y dos parámetros opcionales: atributos, en nuestro caso, los hemos puesto como NULL y estilo para indicar el color, grueso, etc de la línea Archivo Conectarse.php: Se trata del archivo que nos permitirá crear la conexión con nuestra base de datos, el cual se ha creado independiente ya que, más tarde, lo incluiremos en diferentes archivos. La función que incluye, la cual conecta con la base de datos, está formada por la inicialización de cuatro parámetros: o Host: Host al que conectarnos, habitualmente es el localhost en nuestro caso. o Base de datos: nombre de la BD que queremos utilizar. o Usuario: nombre del usuario con permisos para acceder. Mysql crea por defecto al usuario root con todos los permisos posibles habilitados, podemos utilizar este usuario como administrador o crear otro, en nuestro caso utilizaremos el root, pero antes debemos asignarle una contraseña ya que lo crea sin ella. 53

54 o Password: contraseña del usuario. A continuación, con la función mysql_connect abriremos una conexión al servidor MySQL, pasándole por parámetros las variables: host, usuario y password, está nos devolverá un identificador de conexión, o false en caso de error. Por último, mediante la función mysql_select_db se establece la base de datos activa en el servidor asociado con el identificador de enlace especificado, es decir, le pasamos el nombre de la base de datos que queremos utilizar y el resultado de la conexión realizada en el paso anterior mediante mysql_connect. Ejecutando esta función ya podremos trabajar con nuestros datos Archivo Datos.php: Lo primero que debemos hacer en este archivo es incluir el fichero conectarse.php con el cual nos conectamos a la base de datos para poder trabajar con ella. La estructura principal del archivo Datos.php es un switch que se encarga de realizar una función u otra dependiendo del parámetro recibido mediante POST. Con el método POST se realiza una transacción mediante el protocolo HTTP. Se utiliza para aplicaciones que modifican la base de datos de destino. Se trata del punto intermedio entre la interfaz gráfica y la base de datos, hemos utilizado el lenguaje SQL, lenguaje PHP y el formato de intercambio de datos JSON. A través de las diferentes opciones del switch se realizan cuatro acciones básicas: 1. SELECT, consultar datos: - Listar tabla de tipos de dispositivos y dispositivos: Se realiza mediante la acción SELECT, posteriormente guardamos los datos obtenidos de la consulta de cada tabla en una array, mediante mysql_fetch_array. - A continuación tenemos el caso para listar el historial de la información recibida de cada dispositivo. También utilizaremos SELECT añadiéndole la condición WHERE telefono = '.$_REQUEST['id'].' De esta forma únicamente visualizaremos las filas en las que el campo teléfono sea igual al parámetro recibido mediante POST. Por último, haremos que las filas nos aparezcan ordenadas según los campos fecha y hora: ORDER BY fecha DESC, hora DESC', del más reciente al más antiguo. - Para rellenar los formularios, que se encargan de modificar los tipos de dispositivos y los dispositivos, lo hacemos con SELECT y la condición WHERE. Seleccionamos la fila que contiene la información correspondiente a el 54

55 elemento a modificar, del cual sabremos el id o teléfono que nos habrán enviado mediante POST. - En el caso Markers seleccionamos la información necesaria de la tabla del historial (es decir, teléfono, longitud y latitud) y de la tabla dispositivos (teléfono, iconodisp y color) para crear los objetos Markers y LineString. En todos los casos que se hace una consulta SELECT es porque queremos visualizar esa información en nuestra aplicación. Por lo tanto para pasarla del servidor al navegador se envía en formato JSON, con la función json_encode( información que se quiera enviar ). 2. INSERT, grabar datos: - Se trata de los casos que nos permiten grabar datos en las tablas. Para grabar se utiliza INSERT indicándole en que tabla se debe guardar y pasándole los valores que queremos almacenar, serán los valores que haya introducido el usuario en los formularios. 3. UPDATE, actualizar datos: - Con la acción UPDATE más la condición WHERE, modificaremos los campos correspondientes a la fila que tenga el id igual al valor pasado en la condición WHERE. 4. DELETE, eliminar datos: - Por último, para eliminar dispositivo o tipos de dispositivos utilizaremos DELETE más la condición WHERE para indicar que fila queremos eliminar. Se debe tener en cuenta que cuando se elimine un dispositivo también se eliminará toda la información y posiciones que tenemos de él. Lo mismo pasará a la hora de eliminar un tipo de dispositivo, se eliminará el tipo y todos los elementos que lo formen, incluyendo las posiciones que haya almacenadas de cada uno de ellos Archivo TreeData.php: En el archivo TreeData.php tenemos las funciones necesarias para crear el árbol de dispositivos. Lo primero que hacemos es una consulta a través de SELECT a la tabla tipos de dispositivos, ya que esta es la que contiene todos los nodos padre, es decir, serán los nodos de los cuales colgarán los dispositivos. Se recorre toda la tabla y se crea un array por nodo, que contendrá las propiedades de cada uno de ellos (chekcbox, nombre, icono, id, hijos). En la propiedad hijos se llamará a una función que consultará la tabla de 55

56 dispositivos, y retornará un array con las propiedades (checkbox, icono, nombre, id y leaf, leaf indica que este nodo no podrá tener subnodos) de los childnodes correspondientes al parentnode. El array obtenido se pasará a formato JSON mediante json_encode(). Para hacernos una idea del resultado podemos ver el Código 15. que muestra un ejemplo de lo que retorna la función, y en la Figura 32. El resultado visual que conseguiríamos en la aplicación. [{"checked":false, "singleclickexpand":true, "text":"coches", "id":"1", "icon":"imag\/coche.gif", "children": [{"icon":"imag\/uno_coch.png", "text":"ferrari", "id":" ", "leaf":true },{ "icon":"imag\/tres_coc.png", "text":"mercedes", "id":" ", "leaf":true },{ "icon":"imag\/dos_coch.png", "text":"scenic", "id":" ", "leaf":true }] }] Código 15. Ejemplo código JSON. 56

57 Figura 32. Árbol que obtenemos a partir del Código Simulación de la Recepción de Datos Vía SMS: Para poder hacer uso de la aplicación de forma más real posible, hemos creado una página HTML independiente, la cual simula la recepción de datos mediante GET, es decir puede recibir la información a través de la url. La idea es que el dispositivo envié al servidor un SMS con un formato predeterminado, tal y como podemos ver en el Código 16., se trata de una url que contiene toda la información, permitiendo que se guarden las variables deseadas automáticamente en la base de datos. 22&hora=13:30&latitud= &longitud= Código 16. Información que se introduce en la url Evaluación: Juego de Pruebas: En este apartado pondremos en práctica todas las funciones de la aplicación. La pantalla inicial la vimos en la Figura 17., lo primero que haremos será crear un tipo de dispositivo, para eso seleccionaremos la pestaña TIPOS DE DISPOSITIVOS Crear un Tipo de Dispositivo: Figura 33. Seleccionamos el botón Nuevo Tipo de Dispositivo. 57

58 (Ver Figura 33.)Vemos que simplemente pasando el ratón por encima del botón, se marca, y además nos aparece un mensaje informativo o tooltip. Le damos al botón y nos aparece la ventana para rellenar el formulario (Ver Figura 34.). Figura 34. Formulario para crear un Tipo de Dispositivo. Una vez le damos al botón guardar nos aparece un mensaje confirmando que se ha grabado correctamente. (Ver Figura 35.) Además vemos que aparece el nuevo tipo en el GridPanel y en el árbol de dispositivos. Figura 35. Confirmación de que se ha grabado el tipo de dispositivo. 58

59 Confirmamos que se ha grabado en la base de datos (Ver Figura 36.): Figura 36. El Tipo de Dispositivo se ha grabado en la tabla t_disp de la base de datos. A continuación volveremos a crear un tipo de dispositivo pero esta vez introduciremos algún dato erróneo, por ejemplo: dejar algún campo, de los que son obligatorios rellenar, en blanco, como puede ser el número máximo de dispositivos (Ver Figura 37.); o introducir un nombre que tenga más de 10 caracteres (Ver Figura 38.) o que el ID sea igual al del dispositivo anterior, es decir un ID repetido (Ver Figura 39.). Figura 37. Num. Max. Dispositivos es un campo obligatorio. Figura 38. El campo Nombre está configurado para 10 caracteres como máximo. 59

60 Figura 39. Como hemos introducido un ID repetido cuando le damos al botón guardar nos aparece un mensaje de advertencia de que los datos no son correctos. En el siguiente apartado modificaremos el Tipo de Dispositivo que hemos creado: Modificar un Tipo de Dispositivo: Al hacer clic en el botón Modificar Tipo de dispositivo (Ver Figura 33.) nos aparece un mensaje de error (Figura 40.) ya que no hemos seleccionado el Tipo de Dispositivo a modificar. Figura 40. Se debe seleccionar un elemento de la tabla para indicar que queremos modificar. Si seleccionamos un tipo de dispositivo y pulsamos Modificar, nos aparece la misma ventana que hemos utilizado para crearlo, pero con todos los campos rellenos con la información correspondiente al elemento seleccionado. 60

61 Figura 41. Formulario que nos permite modificar un Tipo de dispositivo. Modificaremos el nombre, la imagen y las observaciones, y pulsaremos en Actualizar, los resultados obtenidos los podemos ver en la Figura 42. Podemos ver los cambios en todas las secciones de la aplicación (GridPanel y TreePanel) y en la base de datos. Figura 42. En la parte superior vemos los cambios que se han hecho en la aplicación. En la parte inferior la base de datos Crear un Dispositivo: Ahora nos iremos a la pestaña DISPOSITIVOS, y crearemos un dispositivo perteneciente al grupo creado en el apartado Rellenamos el formulario que nos aparece al hacer clic en Crear Nuevo Dispositivo (Ver Figura 43.) y le damos al botón Guardar. Vemos que en el menú desplegable donde debemos indicar el Tipo de Dispositivo nos sale el que hemos creado previamente. 61

62 Figura 43. Formulario para crear Dispositivo. Igual que en el caso de Crear Nuevo Tipo de Dispositivo, los campos también muestran mensajes de advertencia si son incorrectos o si el Teléfono introducido ya existe. De la misma forma, cuando se graba correctamente, el sistema también nos avisa. Figura 44. Vemos que el Dispositivo se ha grabado correctamente. Arriba aparece en la tabla de dispositivos y en el Árbol de la aplicación, abajo se ve que ha quedado registrado en la base de datos. Si volvemos a la tabla de Tipos de Dispositivos vemos que se ha actualizado el campo correspondiente a Número de Dispositivos Actuales (Ver Figura 45.). 62

63 Figura 45. El campo Num. Disp. Actuales se ha actualizado. Este campo también se ha actualizado en la base de datos (Ver Figura 46.). Figura 46. El campo número de dispositivos actuales también se ha actualizado en la base de datos. Para ver que verdaderamente tienen utilidad las variables que indican el máximo número de elementos que puede tener un Tipo de dispositivo y la que indica cuantos tenemos actualmente, vamos a crear 2 dispositivos más dentro de la categoría Camiones. A continuación intentaremos crear un cuarto dispositivo. El resultado es el que podemos ver en la Figura 47. no nos permite guardarlo ya que superamos el límite. Figura 47. Cuando intentamos guardar el cuarto dispositivo de la clase Camiones, no nos deja ya que hemos superado el número máximo de dispositivos para esta clase. A continuación crearemos otro tipo de dispositivo y algún dispositivo perteneciente a este, para ver que se muestran correctamente en el árbol de dispositivos y en las tablas (Ver Figura 48.). 63

64 Figura 48. Vemos que en el GridPanel los dispositivos se clasifican según el Tipo, y que en el árbol se visualizan correctamente. En el caso de los dispositivos también es posible modificarlos, no pondremos ningún ejemplo ya que es igual que la prueba realizada en el apartado la única diferencia es que se hace con los campos y tabla referente a los dispositivos Simulación Recepción de Datos: Una vez tenemos Dispositivos para localizar necesitamos recibir los datos de donde se encuentran, utilizaremos una página HTML (Ver Figura. 49). Figura 49. Página que simula la entrada de información. 64

65 Tenemos dos opciones: introducir la información mediante el formulario o introducirla mediante la url con el formato mostrado en el Código 17. Introduciremos en la url de nuestro navegador el siguiente código: 15&hora=13:30&latitud= &longitud= Código 17. Código que introduciremos en la URL. Figura 50. Vemos que la información introducida en la URL (parte superior de la imagen) es la que se ha guardado en la tabla de la base de datos (parte inferior de la imagen) Visualizar Historial de un Dispositivo: Suponiendo que ya hemos recibido información de algún dispositivo, vamos a comprobar que dándole al botón Historial, que tenemos en la pestaña de los Dispositivos, vemos la información que nos ha llegado (Ver Figura 51.). Seleccionamos un elemento y a continuación le damos a Historial. Figura 51. Historial del dispositivo C1. 65

66 Visualizar la Última Posición de un Dispositivo: Marcaremos en el TreePanel Posición aquellos dispositivos de los cuales queramos ver su última posición. Si el dispositivo no tiene información el checkbox no se activará. (Ver Figura 52.) Figura 52. Vemos como los dispositivos que están marcados en el treepanel, se puede ver donde están situados en el mapa Visualizar el Recorrido de un Dispositivo: Igual que para ver la última posición, marcaremos el dispositivo del cual queremos ver su recorrido. Esta vez en el panel Historial. Figura 53. En esta imagen podemos ver el recorrido que ha hecho el dispositivo M1, el cual está seleccionado en el árbol. 66

67 Cada vértice de la línea roja que vemos en la Figura 53. Es un punto desde donde se nos ha enviado información Eliminar Tipo de Dispositivo: Comprobaremos que cuando se elimine un tipo de dispositivo, se eliminen también los dispositivos que lo forman y la información del historial de cada dispositivo. Siempre que se seleccione la opción eliminar se nos pedirá que confirmemos que estamos seguros que queremos hacer está acción (Ver Figura 54.). Figura 54. Mensaje para confirmar que queremos eliminar el elemento seleccionado. Una vez eliminado nos saldrá un mensaje informando que se ha borrado. (Ver Figura 55.) Figura 55. Mensaje que nos informa de que se ha borrado el tipo de dispositivo. Si nos fijamos, se han actualizado la tabla de dispositivos y los TreePanels porque ya no aparece el grupo Motos ni ninguno de sus elementos. Miramos la Base de datos y vemos que se ha borrado toda la información referente a este tipo de dispositivo Eliminar Dispositivo: En este caso nos aseguraremos que al eliminar un dispositivo se eliminan todas las posiciones que nos han llegado de él. Igual que en el apartado anterior también nos pide confirmar la acción. Una vez borrado también nos informará de que se ha borrado correctamente. 67