Documente Academic
Documente Profesional
Documente Cultură
AUTOR: Marina Carrillo Baena DIRECTOR: Maria Ferr PONENTE: Joaqun Lpez FECHA: Junio 2011
NDICE
1. 2. 3. DESCRIPCIN DE LA EMPRESA: AIDDEA LINUX, S.L............................................... 5 UBICACIN DEL PROYECTANTE DENTRO DE AIDDEA LINUX, S.L ..................... 6 DESCRIPCIN DE LA TAREA REALIZADA ................................................................... 7 3.1. 3.2. 3.3. 3.4. Introduccin...................................................................................................................... 8 Objetivos del Proyecto ..................................................................................................... 9 Especificaciones del Proyecto ........................................................................................ 10 Sistema de Informacin Geogrfica (SIG) ................................................................... 11 Definicin y Elementos Principales ........................................................................ 11 Cartografa............................................................................................................... 13 Definicin ........................................................................................................ 13 Sistema de Coordenadas ................................................................................ 13 Proyecciones .................................................................................................... 14
3.4.1. 3.4.2.
Representacin de la Informacin.......................................................................... 15 Modelo Raster ................................................................................................. 15 Modelo Vectorial ............................................................................................ 16 Comparacin entre Modelo Raster y Vectorial ........................................... 17
Open Geospatial Consortium (OGC) ........................................................................... 20 Web Map Service (WMS) ........................................................................................ 21 Web Feature Service (WFS) ................................................................................... 21
Diseo del Proyecto ........................................................................................................ 21 OpenLayers .............................................................................................................. 21 Qu s? ......................................................................................................... .21 Por qu OpenLayers? .................................................................................. 22
3.6.1.
3.6.3.1. 3.6.3.2.
3.6.3.2.1. Lenguaje SQL ............................................................................................... 26 3.6.3.2.2. phpMyAdmin ................................................................................................ 27 3.6.3.3. Base de Datos .................................................................................................. 27 2
3.6.3.3.1. Tabla Tipos de dispositivos ........................................................................... 27 3.6.3.3.2. Tabla Dispositivos ......................................................................................... 29 3.6.3.3.3. Tabla Historial ............................................................................................... 30 3.6.4. AJAX ........................................................................................................................ 32 Ventaja e Inconvenientes de AJAX .............................................................. 33 AJAX: Intercambio de Datos con JSON ...................................................... 34 Comparacin entre XML y JSON ................................................................ 34
Desarrollo ........................................................................................................................ 35 Archivo SIG.html..................................................................................................... 35 Archivo Sig_Ext.js ................................................................................................... 37 Diseo de los Paneles ...................................................................................... 38 Botones y Formularios ................................................................................... 42
3.7.1. 3.7.2.
Archivo MAPA.js ..................................................................................................... 45 Mapa ................................................................................................................ 46 Controles y Configuracin del Mapa............................................................ 46 Layers o Capas ............................................................................................... 50
3.7.3.3.1. Markers.......................................................................................................... 51 3.7.3.3.2. Historial ......................................................................................................... 52 3.7.4. 3.7.5. 3.7.6. 3.7.7. 3.8. Archivo Conectarse.php .......................................................................................... 53 Archivo Datos.php ................................................................................................... 54 Archivo TreeData.php ............................................................................................. 55 Simulacin de la Recepcin de Datos Va SMS ..................................................... 57
Evaluacin: Juego de Pruebas ...................................................................................... 57 Crear un Tipo de Dispositivo .................................................................................. 57 Modificar un Tipo de Dispositivo............................................................................ 60 Crear un Dispositivo ................................................................................................ 61 Simulacin Recepcin de Datos .............................................................................. 64 Visualizar Historial de un Dispositivo .................................................................... 65 Visualizar la ltima Posicin de un Dispositivo .................................................... 66 Visualizar el Recorrido de un Dispositivo .............................................................. 66 Eliminar Tipo de Dispositivo .................................................................................. 67 Eliminar Dispositivo ................................................................................................ 67
3.8.1. 3.8.2. 3.8.3. 3.8.4. 3.8.5. 3.8.6. 3.8.7. 3.8.8. 3.8.9. 3.9.
3.9.1.
4. 5. 6.
APORTACIONES DEL PROYECTO A LOS CONOCIMIENTOS DEL ALUMNO ... 69 APORTACIONES DE LOS ESTUDIOS REALIZADOS AL PROYECTO.................... 70 CONCLUSIONES Y LNEAS FUTURAS .......................................................................... 71
REFERENCIAS ............................................................................................................................. 73
1.
Este proyecto se llevar a cabo para la empresa Aiddea Linux, S.L, representada por Joaqun Lpez, y situada en: Cam de Valls, n 81-87, despacho 61, Reus. Aiddea Linux es una empresa de diseo de ingeniera electrnica especializada en electrnica embedded, RFID, comunicaciones. Dentro de estos campos tiene como objetivo la investigacin, fabricacin y ensamblaje de productos y otros componentes auxiliares. Ofrece servicios tanto en el campo de la electrnica como de las TIC. Por la parte electrnica, como ya hemos comentado, desarrolla diseos electrnicos 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 continuacin listamos algunas de las tecnologas con las que trabajan: Automatizacin y robtica. Bases de datos. Equipamiento domstico y domtica. Equipamiento y dispositivos electrnicos. Gestin de inventarios. Gestin documental. Hardware informtico. Integracin de sistemas. Marketing y promocin digital. Programario libre. Sistemas wireless. Software a medida.
En http://www.aiddea.com/ podemos encontrar la oferta completa de servicios y soluciones de Aiddea. Por ltimo comentar que tambin cuenta con un portal de venda on-line, http://www.aidealo.com , de productos electrnicos.
2.
3.
Este apartado es la parte fundamental del proyecto. Constar de los siguientes apartados: Introduccin: Haremos una introduccin general sobre la tarea a realizar, aportando ejemplos actuales que nos ayudaran a ir decidiendo como plantearemos nuestra aplicacin. Objetivos: Se trata de las metas globales del proyecto, es decir, hacer un esquema de todo aquello que necesitamos estudiar previamente para realizar la aplicacin, y todas las funciones y caractersticas que debe tener el caso prctico final. Especificaciones del proyecto: En otras palabras podramos decir que es el enunciado completo de la aplicacin, los requisitos principales que ha puesto Aiddea Linux, S.L. Conceptos bsicos: En el cual nos centraremos en dos temas principales, los Sistemas de Informacin Geogrfica (SIG), en el cual se incluye la explicacin de este tipo de sistemas y conceptos bsicos de cartografa, y el Open Geospatial Consortium (OGC). Se trata de situarnos en el tema, as, a la hora de realizar el proyecto prctico comprenderemos mejor ciertas funciones y decisiones. Diseo: Se explican detalladamente las tecnologas utilizadas, entre ellas OpenLayers, para la gestin 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 descripcin de la estructura de la aplicacin, es decir, los archivos que la forman y las funciones principales de cada uno de ellos. Evaluacin: Juego de pruebas: En este apartado haremos funcionar la aplicacin, 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 aplicacin funcione correctamente.
3.1.
Introduccin:
La Geolocalizacin es una de las manifestaciones ms populares del desarrollo actual de las Tecnologas de la Informacin y las Comunicaciones (TIC), y que est experimentando un auge relevante en los ltimos tiempos. Hay diferentes formas de saber la ubicacin de un elemento fsico, pero ltimamente con la evolucin de la telefona mvil, podemos ubicarnos en cualquier punto del mundo, ya sea mediante receptores GPS, redes WI-FI inalmbricas, o las propias redes de telefona mvil, a esto le aadimos el desarrollo de la banda ancha mvil que permite la conexin permanente a internet de los llamados telfonos inteligentes (smartphones). El uso prctico de este tipo de tecnologas es muy variado, desde el uso en redes sociales como Facebook, como puede ser Facebook Places, aplicacin que te proporciona informacin sobre restaurantes, tiendas, opiniones de los diferentes lugares, etc, hasta utilidades como trazado de rutas, senderismo... Pero no slo estn ideadas para el ocio, en el campo empresarial y profesional tambin tienen utilidades muy importantes, como por ejemplo sistemas que utilizan algunas compaas de seguros para la localizacin de vehculos robados o siniestrados, etc. En el proyecto que nos ocupa crearemos la aplicacin con la que visualizaremos la informacin recibida en el mapa. Para entender mejor el funcionamiento general, a continuacin explicaremos los elementos bsicos de este tipo de sistemas, en nuestro caso estar formado por tres elementos (Vase Figura 1.): Equipos de localizacin: Elemento que llevar cada dispositivo que queremos tener posicionado, ser el emisor de la posicin y por lo tanto estar compuesto por un receptor de GPS1 y una tarjeta SIM con la cual se enviarn los SMS al servidor, tambin se puede obtener la posicin mediante la localizacin GSM2 a travs de la SIM, pero es un mtodo menos preciso que mediante GPS. Servidor: Computadora que gestiona la comunicacin entre los equipos de localizacin y la aplicacin web. Es donde se almacena toda la informacin 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 informacin deseada, y ver todos los dispositivos registrados. Ser la tarea principal que se desarrollar en este proyecto.
1 2
GPS: Global Positioning System - Sistema de Posicionamiento Global Localizacin GSM: es un servicio ofrecido por las empresas operadoras de telefona mvil que permite determinar, con una cierta precisin, donde se encuentra fsicamente un terminal mvil determinado.
3.2.
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 diseo y desarrollo de una aplicacin web, en la cual se representa un mapa con la informacin espacial recibida de unos determinados dispositivos (elementos mviles). Para poder adentrarnos en las caractersticas y funcionamiento deseado, primero es conveniente hacer un estudio general de este tipo de tecnologas, por lo tanto, a priori, tendremos una serie de objetivos iniciales, de carcter ms terico, tales como: Conocer que es un SIG (Sistema de Informacin Geogrfica), as como conceptos generales relacionados con la cartografa, como coordenadas, proyecciones, etc. Comprender los estndares ms 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 aplicacin. Crear la base de datos necesaria mediante MySQL, para poder gestionar la informacin recibida de forma eficiente.
9
Elegir un framework Javascript adecuado para la creacin 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 bsicos del funcionamiento de la aplicacin. Debido a que est ideada para poderla adaptar a diferentes situaciones temticas, es decir, no sabemos qu tipos de elementos (por ejemplo: coches, animales, etc) sern los que queramos posicionar, siempre hablaremos de dispositivos en general: Recibir y almacenar la informacin de cada dispositivo. Tener la posibilidad de crear, eliminar y modificar dispositivos. Mostrar en el mapa la ltima posicin recibida de cada uno de los dispositivos. Visualizar la ruta seguida por un elemento a partir de los diferentes datos espaciales recibidos.
Estos seran los objetivos principales, tanto a nivel terico, como prctico. A continuacin, en el apartado especificaciones se expondrn ms a fondo todas las caractersticas y funciones que queremos que realice la aplicacin.
3.3.
El proyecto trata de desarrollar una aplicacin Web capaz de gestionar y monitorizar una serie de dispositivos wireless. En un principio la aplicacin 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 nmero determinado de animales en un terreno. Por lo tanto no habr un nmero elevado de elementos, sobre unos 100 aproximadamente. Los dispositivos podrn ser agrupados en clases, es decir, tipos de dispositivos. La aplicacin constar de varias partes diferenciadas para facilitar la gestin de la informacin recibida, como mnimo con las siguientes: Pantalla de visualizacin del mapa, en la cual se mostrar, cuando el usuario lo indique, la ltima posicin 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 caractersticas (id, nombre, icono, nmero mximo de dispositivos que admite, nmero de dispositivos que
10
tiene actualmente, observaciones), en esta pantalla tambin tendremos opciones para modificarlos, eliminarlos o crear nuevos tipos. Pantalla con la lista de dispositivos, ser prcticamente igual a la explicada para los tipos de dispositivo, en este caso tendremos id, tipo, icono, nombre, y observaciones, de cada uno de ellos. Tambin tendremos los botones que nos permitirn acceder a modificarlos, eliminarlos o crear nuevos, adems se aadir el botn historial que nos mostrar las posiciones recibidas del dispositivo seleccionado. Como ya hemos dicho la aplicacin nos debe facilitar las opciones para crear, modificar y eliminar los tipos de dispositivos y dispositivos, se crearn y modificarn mediante formularios que piden los datos necesarios y validan la informacin introducida por el usuario. En el caso de eliminar, siempre se pedir al usuario que confirme que desea eliminarlos, para asegurarnos que no borre informacin accidentalmente.
La aplicacin est ideada para que la informacin de cada dispositivo se reciba mediante SMS. Se tendr que tener en cuenta que se debe utilizar el protocolo/servicio ms simple posible, ya que el encargado de enviar la informacin ser un dispositivo embedded, con una capacidad de proceso limitada. Se recibir un mensaje, va SMS, con al menos la posicin GPS, el resto de informacin se podr obtener si ese nmero de telfono est dado de alta en la configuracin. En el tema de recepcin de datos no nos adentraremos mucho, simplemente haremos una pequea simulacin para poder utilizar las funciones de la aplicacin.
3.4.
El trmino SIG procede del acrnimo de Sistema de Informacin Geogrfica (en ingls GIS, Geographic Information System). Como definicin general podramos decir que se trata de sistemas que permiten integrar y analizar informacin geogrfica, los cuales proporcionan herramientas al usuario para editar, analizar e incluso visualizar los datos obtenidos en un mapa. De manera ms tcnica aadiramos que estn formados por equipos electrnicos (hardware), que estn programados adecuadamente (software) para permitir el manejo de una serie de datos espaciales (informacin geogrfica) y realizar anlisis complejos de stos, siguiendo los criterios impuestos por el equipo cientfico (equipo humano). Podemos identificar fcilmente 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 perifricos de entrada y salida que constituyen el soporte fsico del SIG.
11
- Software: Los programas SIG proveen las herramientas y funcionalidades necesarias para almacenar, analizar y mostrar informacin geogrfica, los componentes principales son: o Sistemas para administrar bases de datos. o Una interfaz grfica de usuarios para el fcil acceso a las herramientas. o Herramientas para captura y gestin de la informacin. o Herramientas para soporte de consultas, anlisis y visualizacin de los datos espaciales. Actualmente, con el mayor acceso a Internet y a la demanda de datos geogrficos distribuidos, el software SIG ha cambiado gradualmente su perspectiva hacia la distribucin de datos a travs de la red. Los SIG que en la actualidad se comercializan son combinaciones de varias aplicaciones interoperables y APIs. - Datos geogrficos: Es el componente ms importante. Pueden obtenerse por recursos propios o a travs de proveedores de datos. A su vez es el elemento diferenciador de un SIG frente a un Sistema de Informacin, ya que este tipo de datos contiene dos vertientes: la espacial y la temtica. Para aclarar estos dos conceptos pondremos un ejemplo. Si tenemos un SIG que nos muestra los niveles de contaminacin en el agua, un lago tendr dos tipos de informacin: la que nos indica sus magnitudes en el mapa y aspecto, la espacial, y la que nos muestra los niveles de contaminacin, la temtica. Por lo tanto, el sistema tiene que trabajar con cartografa y con bases de datos a la vez, de forma que al unirlo obtendremos una base de datos geogrfica. - Procedimientos: Para que un SIG tenga xito, este debe operar de acuerdo a un plan bien diseado y estructurado y acorde a las reglas de la empresa, que son los modelos de las actividades propias de cada organizacin. - Equipo humano: Hay distintas formas de interactuar con este tipo de programas, dependiendo del tipo de usuario: o Usuario final el cual obtiene informacin del sistema. o Tcnico o especialista que configura y define las herramientas a utilizar, los datos, etc., dependiendo de la finalidad exacta del programa. o Informticos, dependiendo de la magnitud del sistema, son los encargados de su administracin.
12
3.4.2. Cartografa:
Antes de adentrarnos ms en los sistemas GIS, explicaremos conceptos geogrficos bsicos, tales como longitud, latitud, proyecciones, etc. Los cuales nos ayudaran a comprender mejor su funcionamiento.
3.4.2.1. Definicin:
La cartografa es la ciencia que se encarga del estudio y de la elaboracin de los mapas geogrficos y territoriales, entre otros. A grandes rasgos, se trata de implementar una representacin de la Tierra sobre una superficie plana llamada mapa. De manera simple, un mapa es la representacin del mundo real reducido a puntos, lneas y polgonos mediante el uso de smbolos grficos. Debido a que la Tierra tiene una forma esfrica, se debe utilizar un sistema de proyecciones para poder representar una superficie esfrica en una superficie plana. El problema es que en realidad no es exactamente esfrica, su forma es ms achatada en los polos que en la zona ecuatorial. Adems de representar los contornos, las superficies y los ngulos, se ocupa de representar la informacin sobre el mapa. Estas representaciones, actualmente se estn realizando con los sistemas SIG, en los que se puede georeferenciar (dotar de coordenadas geogrficas (longitud, latitud), ubicar en el espacio).
calculan las coordenadas de cualquier punto, constituyen lo que se denomina sistema de referencia. Sistema de Coordenadas Geogrficas: El sistema de coordenadas geogrfico est alineado con los ejes de rotacin de la Tierra. Define dos ngulos desde el centro de la Tierra: latitud y longitud (Ver Figura 3.), que explicamos a continuacin: Latitud: Mide el ngulo entre cualquier punto y el ecuador. Las lneas de latitud se llaman paralelos y son crculos 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 lneas de longitud son crculos mximos que pasan por los polos y se llaman meridianos.
Combinando estos dos ngulos, se puede expresar la posicin de cualquier punto de la superficie de la Tierra.
3.4.2.3. Proyecciones:
Las proyecciones estudian las distintas formas de mostrar la superficie terrestre en un plano. Un mapa, es una representacin en dos dimensiones, de un objeto tridimensional (la Tierra), por lo tanto, cuando lo creamos, estamos perdiendo una dimensin, por este motivo el plano obtenido no ser perfecto, habr una pequea distorsin. Esto supone un problema ya que no hay forma de representar la esfera sobre una superficie plana, sin que exista un error mnimo. Las proyecciones vienen a solventar este problema, estudiando las distintas opciones para obtener la forma ms exacta posible en el mapa. Existen diferentes tipos de proyecciones pero nos centraremos en la proyeccin Spherical Mercator, que es de la que hablaremos durante el proyecto.
14
Proyeccin de Mercator: Este tipo de proyeccin consiste en representar la superficie esfrica terrestre sobre una superficie cilndrica, tangente al ecuador, que al desplegarse genera un mapa terrestre plano. Con otras palabras, diramos 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 sera el mapa (Ver Figura 4.). Esta proyeccin presenta una buena aproximacin 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 proyeccin de Mercator. A pesar de sus relativas distorsiones de escala, esta proyeccin est muy indicada para mapas interactivos en que se hacen desplazamientos y acercamientos de regiones pequeas, donde las formas se distorsionan relativamente poco.
Como ya hemos dicho la imagen queda como una rejilla de celdas, por lo tanto la posicin de cada una viene implcita segn 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 vaco, informacin no significativa. Para obtener una descripcin precisa de los objetos geogrficos contenidos en la base de datos, el tamao del pxel ha de ser reducido (en funcin de la escala), lo que dotar a la malla de una resolucin alta. Sin embargo, a mayor nmero de filas y columnas, ms resolucin, pero tambin, mayor esfuerzo en el proceso de captura de la informacin y mayor costo computacional a la hora de procesarla. Los datos raster se almacenan en diferentes formatos, desde un archivo estndar basado en la estructura de TIFF, JPEG, etc. a grandes objetos binarios.
El inters de este tipo de representaciones se centra en la precisin de localizacin de los elementos geogrficos sobre el espacio, donde los fenmenos a representar son discretos, es decir, de lmites definidos.
16
van, clculos de distancia hasta al punto de destino, ubicacin, distancia recorrida otra muestra de la utilidad de estos programas la encontramos en las compaas elctricas, las cuales pueden gestionar toda su red de servicios a travs de ellos, en el caso de una avera podrn ver fcilmente toda el rea afectada, ayudando as a la pronta solucin del problema. En general, el mundo de la informacin a la vez que Internet ha experimentado una evolucin muy importante en los ltimos aos. Gracias a esto, el mundo de los SIG ha asistido a una explosin de aplicaciones destinadas a mostrar y editar cartografa en entornos web, hoy da cualquier usuario que navegue por la red, por muy pocos conocimientos que tenga sabr de la existencia, por ejemplo, de Google Maps. Ms recientemente, estas aplicaciones tambin se estn extendiendo muy rpidamente a terminales de telefona mvil y otros sistemas como tablets. Este tipo de aplicaciones da acceso al pblico de enormes cantidades de datos geogrficos, por esta razn es necesario establecer unos estndares, creados por la organizacin OGC3, que facilitan la interoperabilidad de los datos espaciales. Muchas disciplinas se han beneficiado de las tecnologas SIG. Esto ha producido una reduccin de costes y mejoras en componentes de hardware y software de sistemas. Adems, esta tecnologa ha sido asimilada por multitud de universidades e instituciones. A continuacin nombramos algunas de ellas: La Infraestructura de Datos Espaciales de Espaa (IDEE) tiene como objetivo el integrar a travs de Internet los datos, metadatos, servicios e informacin de tipo geogrfico que se producen en Espaa, facilitando a todos los usuarios la localizacin, identificacin, seleccin y acceso a tales recursos, a travs del Geoportal de la IDEE (http://www.idee.es). A nivel europeo, existe el proyecto INSPIRE (Infrastructure for Spatial Information in Europe), iniciativa de la Comisin Europea cuyo objetivo es la creacin 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 informacin geoespacial a travs de Internet, en la cual participan todas las administraciones pblicas (entes locales, Generalitat, estado) y tambin otras instituciones pblicas y privadas.
18
Ejemplo de SIG aplicado al mbito del Patrimonio Histrico-Artstico. Se trata de una aplicacin que hace recorridos virtuales por las rutas del Camino de Santiago, adems nos proporciona informacin sobre pueblos, alojamientos, restaurantes.
Geoportalbcn:
En el pasado saln GlobalGeo 2011 se present la actualizacin 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 aplicacin, calculando distancias, buscando puntos en concreto de la ciudad, obteniendo informacin cartogrfica, etc.
19
Ideclocal:
Se trata de una iniciativa de IDEC (Institut de Dades Espacials de Catalunya), el cual es la base tcnica para la organizacin, promocin, explotacin y mantenimiento de las infraestructuras de datos espaciales, con la finalidad de difundir geoinformacin y servicios conexos, y que sean ms accesibles para asegurar el uso compartido.
3.5.
El Open Geospatial Consortium (OGC) es una organizacin internacional que agrupa a 416 compaas y organismos pblicos. Trabaja en la definicin de especificaciones pblicas para el intercambio de datos entre los sistemas de informacin geogrfica. El principal objetivo de dicho consorcio es la definicin de estndares abiertos e interoperables dentro de los GIS y de la World Wide Web que faciliten el intercambio de la informacin geogrfica, entre distintos sistemas, en beneficio de los usuarios y de la industria [16].
Dentro de las especificaciones definidas por el OGC destacamos dos por su importancia y grado de implantacin en el mundo de los GIS: Web Map Service (WMS) y Web Feature Service (WFS).
20
3.5.1.
Es un estndar OGC, que produce mapas de datos referenciados espacialmente, de forma dinmica a partir de informacin geogrfica. Este estndar internacional define un "mapa" como una representacin de la informacin geogrfica, en forma de un archivo de imagen digital conveniente para la exhibicin en una pantalla de ordenador. Est organizada en una o ms capas, que pueden visualizarse u ocultarse una a una. Se puede consultar cierta informacin disponible y las caractersticas 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 grficos.
A continuacin, con la Figura 11. y los conceptos Web Map Client y Web Map Server, acabaremos de aclarar el significado de qu OpenLayers sea una librera del lado cliente. Esto es llamado Client/Server Model y es, bsicamente, como trabajan la mayora de aplicaciones web.
21
En el caso de las web map application, algn tipo de cliente (por ejemplo OpenLayers) comunica con alguna clase de Web map server (por ejemplo un servidor WMS o Google Maps).
Web Map Client: Como ya hemos dicho, OpenLayers trabaja en el lado cliente. Una de las principales tareas que el cliente realiza es conseguir imgenes 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 travs de Javascript asncrono (AJAX5), llamadas a un servidor de mapas. OpenLayers une todas las imgenes 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 captulo anterior como un estndar OGC, en este apartado lo veremos de una forma ms prctica. 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 bsico detrs de todos ellos es que permiten especificar el rea que queremos ver (mediante el envo 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 algn servidor de mapas, no se debe hacer nada, tan slo introducir la direccin 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).
22
informacin espacial a travs de las aplicaciones propias de los creadores o proveedores de datos geogrficos. En resumen, nos permite elaborar nuestros mapas haciendo uso de su propia base de informacin cartogrfica o usar su estructura para hacer uso de otros servicios. Adems, si comparamos OpenLayers con otros frameworks con la misma finalidad, el punto fuerte lo encontramos en que es un software gratuito, de cdigo abierto, de uso totalmente libre bajo la licencia BSD6. Est desarrollado por y para la comunidad de software libre ya que actualmente es un proyecto de la Open Source Geoespatial Foundation (OSGeo). Adems, implementa mtodos estndar de la industria para el acceso a los datos geogrficos, 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.
Antes de explicar ms caractersticas sobre ExtJS hablaremos sobre RIA, acrnimo 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 ms importante en nuestras aplicaciones. ExtJS nos ayuda a mejorar la interaccin con el usuario, pues nos proporciona componentes con funcionalidades avanzadas y de sencilla implementacin. Se trata de que resulten fciles de usar e intuitivas. Volviendo a qu es ExtJS podemos hablar de sus orgenes, fue construida como una extensin de la librera Yahoo! User Interface (YUI), gracias a su buena estructura
6
BSD: (Berkeley Software Distribution). Es una licencia de software libre muy cercana al dominio pblico. La licencia BSD permite el uso del cdigo fuente en software no libre.
23
actualmente puede interactuar como extensin para las bibliotecas jQuery y Prototype. Desde la versin 1.1 puede ejecutarse tambin como una aplicacin independiente, ya que adems cuenta con su propia librera 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 librera basada sobre Ext JS.
Para acabar de explicar y valorar este framework a continuacin se comentan las principales ventajas e inconvenientes.
24
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 librera de OpenLayers y los ricos componentes grficos de ExtJS. La cual tiene componentes destinados a aplicaciones SIG, permitiendo crear potentes webs de mapas basadas en Javascript.
Principales desventajas de ExtJS: Javascript no es tan rpido como quisiramos, sin embargo con los nuevos navegadores es un factor que puede mejorar. La librera tiene un tamao 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 tamao son aspectos a tener en cuenta pero que se contrarrestan con los beneficios que nos aporta. Ya que es muy flexible y adems nos permite realizar de una manera muy rpida 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 aplicacin de escritorio.
3.6.3.1. PHP:
PHP es un lenguaje de alto nivel embebido en pginas 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 pginas van a poder ser vistas en cualquier ordenador, independientemente del navegador que tenga.
25
La funcin principal que realizar PHP en el aplicativo web ser la de gestionar la informacin de la base de datos que tenemos almacenada en el servidor. Otro punto fuerte de PHP es que se trata de un lenguaje de programacin totalmente gratuito. Cuando decimos que PHP es un lenguaje del lado del servidor significa que el usuario abre la pgina html en su navegador y hace una peticin de interactuar. PHP instalado en dicho servidor web interpreta o procesa el script, es decir, la peticin, y enva dicha respuesta al usuario en forma de documento html. Esto es una breve explicacin del funcionamiento de PHP que podemos ver grficamente en la Figura. 14.
3.6.3.2.
MySQL:
Se trata de una base de datos que soporta el lenguaje SQL y la conexin de varios usuarios, en general se utiliza para aplicaciones de tamao pequeo-medio como la que nos ocupa. Como PHP es gratuito.
26
Est compuesto por comandos, clusulas, 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 estndar por haberse visto consolidado por el Instituto Americano de Normas (ANSI) y por la Organizacin de Estndares Internacional (ISO). Para el uso y manejo de la base de datos MySQL, vamos a emplear una aplicacin muy usual y extendida llamada phpMyAdmin.
3.6.3.2.2. phpMyAdmin:
PhpMyAdmin es una herramienta escrita en PHP con la intencin de manejar la administracin de MySQL a travs de pginas web, utilizando Internet. Actualmente puede crear y eliminar Bases de Datos, crear, eliminar y alterar tablas, borrar, editar y aadir 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.
3.6.3.3.
Base de Datos:
En nuestra aplicacin utilizamos una base de datos, que est formada por tres tablas:
Tamao (bytes) 3 10 12 3 3 30 61
Tabla 1. Tabla Tipos de Dispositivos, con sus campos correspondientes y el tamao 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
Tiene seis campos, a continuacin explicaremos cada uno de ellos: El id, se trata de un valor numrico que identifica al grupo de dispositivos, se ha configurado en phpMyAdmin como un tipo de datos Tinyint y adems como unsigned, es decir, deber ser un nmero entero positivo comprendido entre 0 y 255. Esto significa que la aplicacin como mximo tendr 256 tipos de dispositivos. No podr haber dos id iguales ni valores nulos, ya que se ha definido como clave primaria. En el diseo de bases de datos relacionales, se llama clave primaria a un campo o a una combinacin 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 tenamos 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 adems 4 espacios vacos hasta llegar al nmero mximo de caracteres que hemos establecido en 10. En el caso de VARCHAR(10) se guardarn slo los 6 caracteres de la palabra ms un byte para indicar la longitud de la columna, por lo tanto 7 bytes.
Llegados a este punto parece ilgico haber elegido como tipo de datos CHAR, la razn es que con CHAR accedemos ms rpido a la informacin 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 ms, para saber el tamao 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 despus se utilizar en la interfaz de la aplicacin. Tambin es definido como CHAR(10). maxdisp y numdisp ambas sern variables de tipo Tinyint por lo tanto no podrn ser superiores a 255. La primera ser introducida por el usuario que nos indicar el nmero mximo de elementos que puede tener un tipo
28
de dispositivo, como mximo 255. Debido al tipo de variable que le hemos asignado, como mximo sern 255, dependiendo del uso exacto que se le quiera dar a la aplicacin podemos modificarlo y ponerle otra clase de dato, que nos permita tener ms 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 algn tipo de observacin 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 mximo tendremos 256 tipos de dispositivos, la tabla t_disp tendr un tamao mximo de: 15.616 bytes = 15,25 KB.
Tabla 2. Tabla de Dispositivos, con sus campos correspondientes y el tamao de cada uno de ellos.
En esta tabla se almacenarn los dispositivos o elementos a localizar. Est compuesta por: telfono o identificador numrico del elemento, ser el nmero de telfono del dispositivo a localizar, el cual nos enviar la informacin mediante mensajes de texto, esta decisin de diseo formaba parte de los requisitos iniciales de la aplicacin. Lo hemos configurado como un nmero entero de 9 cifras de valor positivo, por lo tanto ir de 0 a 999.999.999. Es la clave primaria de la tabla.
29
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 fornea. 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 LineString8 del dispositivo. Le hemos puesto una longitud mxima 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 mximo tendremos 255 dispositivos por tipo de dispositivo, y un mximo de 256 tipos, la tabla disp tendr un tamao mximo de: 4.634.880 bytes = 4,42 MB aproximadamente.
Tabla 3. Tabla del Historial de cada Dispositivo, con sus campos correspondientes y el tamao de cada uno de ellos.
30
En esta tabla tendremos la informacin recibida de todos los dispositivos, los campos que la forman son: telfono campo descrito en la tabla anterior. En este caso acta como clave fornea ya que relaciona la tabla de dispositivos con la del historial de informacin 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 9999. El formato de almacenamiento es de ao-mesda. Se debe tener en cuenta que Mysql simplemente comprueba que el mes est comprendido entre 0 y 12 y que el da 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 telfono, 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 precisin exacta. El tipo de datos se define como DECIMAL (8, 5) dnde 8 es el nmero mximo de dgitos que tendr el nmero contando tambin los decimales, y 5 ser el nmero 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 posicin mostrada ser ms o menos fiable en funcin de esto. La longitud total de cada fila de esta tabla ser de 35 bytes. En este caso es ms difcil hacer un clculo aproximado de la medida ya que es muy variable, no sabemos exactamente las posiciones que se van a recibir.
31
Por ltimo ver de forma prctica (Vase 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 telfono con la tabla que guarda las posiciones, a la vez con la tabla que contiene los tipos de dispositivos a travs del campo idtipo que es el mismo valor que tenemos en la tabla t_disp dentro del campo id.
3.6.4. AJAX:
En este apartado se definirn y explicaran los trminos AJAX, y JSON. Tecnologas que nos permitirn intercambiar informacin del servidor al cliente y a la inversa, valorando su eficacia, sus ventajas e inconvenientes. Inicialmente definiremos Ajax, acrnimo de Asynchronous JavaScript And XML (JavaScript asncrono y XML), es una tcnica 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 comunicacin asncrona con el servidor en segundo plano. La caracterstica fundamental de AJAX es permitir actualizar partes de una pgina, con informacin que se encuentra en el servidor, sin tener que refrescar completamente la pgina. Como ya hemos dicho, se trata de una tecnologa asncrona, en el sentido de que los datos adicionales se requieren al servidor y se cargan en segundo plano sin interferir con la visualizacin ni el comportamiento de la pgina. JavaScript es el lenguaje con el cual se efectan, normalmente, las funciones de llamada de Ajax.
32
3.6.4.1.
A continuacin haremos un resumen de las ventajas e inconvenientes de AJAX: Ventajas: Utiliza tecnologas existentes. Es una tcnica vlida para mltiples plataformas y utilizable en muchos sistemas operativos y navegadores, dado que est basada en estndares abiertos como JavaScript y Document Object Model (DOM). Interactividad: es posible realizar cambios sobre las pginas 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 pgina nuevamente. La pgina se asemeja a una aplicacin de escritorio, aplicaciones RIA.
33
Se pierde el concepto de volver a la pgina anterior. Dependiendo de la carga del servidor podemos experimentar tiempos tardos de respuesta.
34
El problema principal en AJAX es mover datos entre el servidor y el cliente, este problema se suele resolver usando XML. La mayora de las aplicaciones AJAX, en el cliente la programacin 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 vlido. De modo que podamos acceder a los datos de una manera orientada a objetos. Cada vez hay ms 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 prximo captulo, 3.7. Desarrollo, lo veremos de forma prctica. En resumen, el menor peso de los datos en JSON y la comodidad de trabajar en JavaScript facilitndonos la manera de acceder a la informacin, nos ha convencido para utilizar est tcnica. En los siguientes apartados se ver desarrollada de forma ms concreta en nuestro aplicativo.
3.7.
Desarrollo:
- Librera JavaScript de ExtJS: Para utilizar esta librera 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
o En la primera lnea del Cdigo 4. tenemos la carpeta resources en la cual se encuentran las imgenes y estilos necesarios para los componentes del framework. o Lnea 2 Cdigo 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 libreras, como por ejemplo JQuery o Prototype, nosotros hemos optado por elegir la librera propia de ExtJS por lo tanto importamos el archivo extbase.js. (Vase lnea 3 del Cdigo 4.) o Por ltimo, importamos el archivo ext-lang-es.js, el cual hace que todos los mensajes y advertencias nos salgan en espaol, ya que por defecto estn en ingls. Tambin tenemos la posibilidad de ponerlo en otros idiomas como francs, alemn, italiano, etc - Librera OpenLayers: La ltima versin de librera se encuentra en la siguiente URL: http://www.openlayers.org/api/OpenLayers.js Para utilizarla basta con apuntar a esa direccin en nuestra pgina web. Utilizando el fichero .js, en la carpeta api, estaremos seleccionando la ltima versin estable de la librera. Si cambiamos la carpeta api por dev apuntaremos a la versin en desarrollo (dev-elopment), la cual nos permitir probar las funcionalidades en marcha. En nuestro caso hemos utilizado la versin en desarrollo ya que tiene una interfaz ms vistosa. Nuestro cdigo quedar:
<script src="http://www.openlayers.org/dev/OpenLayers.js"> </script>
Cdigo 5. Llamada a la librera OpenLayers
Si se desea tambin existe la opcin de descargar una versin concreta de la librera y desplegarla en nuestro servidor web. - Google Maps: Debemos hacer referencia a la librera de Google ya que utilizaremos sus mapas.
<script src="http://maps.google.com/maps/api/js?sensor=false"> </script>
Cdigo 6. Llamada a la librera Google Maps
- Librera GeoExt: Igual que hemos hecho con las libreras anteriores debemos hacer con la de GeoExt para utilizar sus funciones. Por lo tanto nos descargaremos el
36
Llamada a los archivos que forman la aplicacin: Para introducir el cdigo JavaScript de la aplicacin introducimos:
<script type="text/javascript" src="mapa.js"></script> <script type="text/javascript" src="sig_ext.js"></script>
Cdigo 8. Llamada a los archivos que forman la aplicacin.
Hemos creado dos archivos para conseguir una mejor organizacin del cdigo, a continuacin explicaremos en profundidad cada uno de ellos. A rasgos generales, podemos decir que mapa.js contiene la creacin del mapa y elementos que visualizaremos en l, y ext.js contiene principalmente la interfaz de la aplicacin. Por otra parte para la gestin de los datos tenemos el archivo conectarse.php, Datos.php, TreeData.php.
37
Ext utiliza paneles, los cuales son la base de muchos diseos. Vemos que nuestra aplicacin (Figura 17.) est dividida en tres partes o paneles bien diferenciados, todos ellos estn dentro de uno especial que los engloba a todos, llamado Viewport. La diferencia con otro tipo de paneles es que contiene todo el layout9 y adems se adapta al rea visible de nuestro navegador, lo que queremos decir con esto es que si cambiamos el tamao de la pantalla, se adaptan todos los paneles a la nueva medida. Dentro de esta ventana tenemos un layout llamado border el cual contiene regin norte (en la Figura 17. Nmero 1), centro (en la Figura 17. Nmero 2) y este (en la Figura 17. Nmero 3). A continuacin explicaremos cada una de ellas de forma detallada. Regin Norte (1) - Ttulo: En la regin Norte simplemente creamos un panel dnde estar el ttulo de la aplicacin, lo creamos mediante xtype: panel. Xtype nos ofrece la posibilidad de instanciar un nuevo componente de forma rpida, lo veremos durante la aplicacin en muchos casos. Este mtodo puede ayudar a conservar memoria en nuestra aplicacin web.
Layout: En una ventana, la clase que decide cmo se reparten los botones (y dems controles) dentro de ella.
38
Regin 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 pestaas que hay en la parte superior.
o Tab MAPA: Al iniciar la aplicacin siempre estar activada la pestaa nmero 1 (Ver Figura 18. Nmero 1), esto es gracias a la propiedad: activeTab: 0. Dentro de esta pestaa tenemos un panel especial para mapas gracias al framework GeoExt10 se trata de xtype: gx_mappanel que nos permite cargar el mapa directamente. o Tab TIPO DE DISPOSITIVOS: (Ver Figura 18. Nmero 2) En esta pestaa mostramos la tabla de todos los tipos de dispositivos y sus caractersticas, que tenemos almacenados en la base de datos. Para visualizar la informacin en forma de tabla necesitamos dos componentes: Objeto Ext.Data.Store: Un Store es un componente que almacena temporalmente informacin 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 mtodo HTTP que se utilizar para las solicitudes. El formato en el que estn 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
39
array (root) que contiene toda la informacin, y los diferentes campos (fields) que debe leer. Por ltimo con la funcin load(), cargamos los datos. Objeto Ext.Grid.GridPanel: los argumentos principales que debemos pasarle sern el Store creado en el paso anterior, y las columnas que queremos que muestre. A cada columna le pasamos el parmetro 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).
Tab DISPOSITIVOS: (Ver Figura 18. Nmero 2) Este apartado es similar al de tipos de dispositivos, tambin tenemos una tabla con todos los dispositivos que hay registrados en la aplicacin, la nica diferencia es que hemos utilizado un tipo de Store diferente que nos permite clasificarlos segn al grupo de elementos al que pertenecen. Se trata del objeto Ext.data.GroupingStore y el nico parmetro extra que le pasaremos ser groupField: 'nomt' que nos indicar a partir de que campo los clasificamos (Ver Figura. 20.).
40
Figura 20. Panel de dispositivos clasificados por Tipos de Dispositivos. En los recuadros rojos los nombres de los tipos de dispositivos.
Regin Este (3) rbol de dispositivos: Por ltimo, la regin 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 posicin de un elemento, es decir, nos activar un Marker11 o varios, y el otro nos permitir ver la ruta que ha hecho el dispositivo, nos mostrar las LineString12 correspondientes.
11 12
41
El cdigo 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 parmetro se le indica la url a dnde debe ir para buscar la informacin en formato JSON. o Root Node: Cada rbol requiere un root node o nodo principal, del cual descendern el resto de elementos. Para crearlo utilizamos: Ext.tree.AsyncTreeNode. La razn por la que usamos AsyncTreeNode en lugar del TreeNode bsico, que tambin 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 parmetros como el nombre, el icono, el checkbox, etc. Una vez creado el treepanel le aadimos una barra en la parte inferior la cual tiene dos botones, uno que permite expandir todo el rbol y otro que hace la funcin contraria.
Explicaremos todas las opciones que contiene la pestaa dispositivos, ya que es la ms completa, ya que los botones que hay en tipo de dispositivos son prcticamente 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, ttulo, tipo de layout, en este caso ser tipo form ya que dentro tendremos un formulario a rellenar, etc.
42
En la aplicacin utilizamos formularios en varias ocasiones, principalmente para guardar un elemento o modificarlo. Dentro de la ventana explicada anteriormente, tendremos un parmetro 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 tambin tendr una serie de caractersticas como bodystyle o url (nos indicar la url a la cual se debe ir para guardar los datos, se explicar a continuacin) y de la misma forma que el objeto Window, tambin tendr el parmetro tems, que esta vez contendr los diferentes campos del formulario. A continuacin, 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 parmetros bsicos: Xtype: que nos dir exactamente de qu tipo de campo se trata. En la aplicacin tenemos los siguientes tipos: o Numberfield: Se trata de un campo que slo nos permite introducir nmeros. o Textfield: En este campo se podr introducir una lnea de texto el nmero mximo de caracteres ir en funcin del parmetro maxLength. o Textarea: En este tipo de campos se permite al usuario introducir varias lneas de texto. En nuestro caso lo hemos utilizado para el campo observaciones y est limitado a 30 caracteres, que es el mximo que permite guardar la base de datos en este campo. Por lo tanto, si el usuario introduce ms de 30 caracteres le aparecer un aviso.
43
o Combo: (Ver Figura 24.) Se trata de un campo que despliega un men permitindonos elegir una de las opciones. En nuestro caso nos aparece en el formulario que aade dispositivos, para elegir a qu clase de dispositivos pertenece. Est formado por varios parmetros 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. Tambin le indicamos el estilo, para poder ver varios datos en cada opcin, aunque el valor real del campo es el que se indica en el atributo valueField.
FieldLabel: que nos indicar el string que aparecer en pantalla para indicarle al usuario que datos debe introducir. Name: Es un parmetro muy importante, ya que se trata del nombre con el cual se envan los datos, que contiene el campo, al servidor.
Otros parmetros opcionales que hemos utilizado, pueden ser: La medida del campo (maxLength) la cual se ha puesto en funcin de las medidas mximas aceptadas en la base de datos. La posibilidad de que el campo quede vaco (allowblank: true o false). readOnly: esta opcin 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 parmetro indicamos que slo se puede leer.
Cuando no se cumplen algunos de los requisitos determinados por los parmetros anteriores, la interfaz de ExtJS mostrar al usuario los mensajes de advertencia
44
correspondientes, gracias a la clase Ext.QuickTips.init();, se trata de una clase singleton13. Dentro de la ventana tenemos tres botones que nos permiten enviar la informacin al servidor (botn guardar), borrar todos los datos que hayamos introducido en el formulario (botn Restablecer) y por ltimo, el botn Cancelar que hace que se cierre la ventana sin guardar nada. Cuando se selecciona la opcin guardar, se enva la informacin mediante el mtodo POST y automticamente el servidor nos contesta informndonos de si se ha grabado correctamente o no. En caso afirmativo, actualizaremos los gridpanels y treepanels necesarios para visualizar los cambios. La siguiente opcin que tenemos en la Figura 22. es modificar dispositivo, funciona igual que la explicada para aadir 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 informacin correspondiente a la seleccin 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 informacin al servidor para actualizar la base de datos) o cancelar. A continuacin en la Figura 22. tenemos el historial, cuando seleccionamos un dispositivo del gridpanel y a continuacin pulsamos este botn, 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 opcin eliminar, comentar que cuando indiquemos que queremos eliminar un dispositivo, se preguntar al usuario si est seguro de realizar esa accin, 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 informacin recibida de cada uno de ellos. Lo mismo pasa a la hora de eliminar un dispositivo, tambin elimina las posiciones recibidas de este.
13
Clase singleton: Su intencin consiste en garantizar que una clase slo tenga una instancia y proporcionar un punto de acceso global a ella.
45
3.7.3.1. Mapa:
Uno de los elementos principales de la aplicacin es el mapa. En este archivo hemos creado una variable global llamada map:
var map = new OpenLayers.Map(options);
Cdigo 10. Creacin 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 cdigo. 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 aplicacin, llamaremos a sus funciones para hacer zoom, aadir capas, etc como veremos a continuacin. El resto de cdigo que nos queda referente al mapa, lo podemos dividir en dos partes bsicas:
46
La clase Control es la que nos permite interactuar con nuestro mapa. Tambin nos permite visualizar informacin adicional, como pueden ser valores de escala, longitud, latitud, etc. Se pueden aadir tantos controles como se quieran. En las siguientes lneas explicaremos la funcionalidad de los que hemos credo conveniente poner en nuestra aplicacin: 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 botn 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 parmetro le pasamos la posicin, para situarlo sobre el mapa en la posicin deseada, mediante el objeto OpenLayers.Pixel, evidentemente esta funcin 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.
o PanZoomBar(): Esta funcin 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
o MouseDefaults(): Con esta lnea de cdigo habilitamos hacer zoom mediante el ratn. o LayerSwitcher(): Con el control LayerSwitcher(), nos aparece una lista con las capas que hemos aadido al mapa, cada una con un checkbox, el usuario puede decidir que capas quiere visualizar y cules no, activndolo y desactivndolo.
o MousePosition: Nos muestra la posicin (Longitud, Latitud) en la que se encuentra el ratn. Al objeto OpenLayers.MousePosition le pasamos por parmetro dos strings, el primero llamado prefix, ser el texto que queremos poner delante de las coordenadas, el segundo, separator se trata del signo o carcter que queremos que haya entre el valor de la longitud y el de la latitud.
48
Una vez definidos todos los controles tenemos una serie de propiedades que definiremos a continuacin, estas son debidas a la utilizacin de mapas con proyeccin Spherical Mercator (por ejemplo Google Maps). o Projection: Aqu establecemos la proyeccin del mapa que es ESPG14:900913, es decir, la correspondiente a Spherical Mercator. Si queremos trabajar con Longitud, Latitud, u otro tipo de proyeccin en otra capa tendremos que transformar las coordenadas. o DisplayProjection: Esta es una propiedad que es utilizada por los controles que muestran informacin de las coordenadas, como puede ser MousePosition, explicado anteriormente. Este control utiliza otro tipo de proyeccin 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 proyeccin del mapa a la proyeccin del display. o Units: Esta propiedad indica que el mapa est en metros. Si no se indica nada, por defecto est en grados. La proyeccin Spherical Mercator utiliza metros. o MaxResolution: Esta propiedad especifica cul es la resolucin mxima 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 mximo posible. o MaxExtent: Con esta propiedad le decimos a OpenLayers los lmites mximos del mapa. Los cuatro nmeros representan el mnimo de x, el mnimo de y, el mximo de x y el mximo de y.
49
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 aadimos. Cada una puede tener sus propiedades como por ejemplo la transparencia, la proyeccin, etc. En nuestro aplicativo tenemos tres capas base, pudiendo elegir cual visualizamos en cualquier momento mediante el control LayerSwitcher() explicado en el captulo anterior. Adems de las capas bases tenemos dos vector layer, las cules nos permiten aadir varios objetos geomtricos 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 parmetro el nombre que se visualizar en el LayerSwitcher, pero en el caso de la capa Google Hybrid le aadimos el argumento tipo, para que nos muestre el mapa hbrido:
50
type: google.maps.MapTypeId.HYBRID
Cdigo 12. Parmetro 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 tambin existe una subclase para OpenStreetMap.
new OpenLayers.Layer.OSM("OpenStreetMap");
Cdigo 13. Creacin 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 slo el rea indicada. Para esto se necesitara crear nuestro propio servidor de mapas.
-
Vector Layers15: Un vector usa formas geomtricas basadas en ecuaciones matemticas para formar las imgenes. 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 deformara fcilmente. Adems las capas vectoriales nos permiten aadir ms informacin, para acabar de entenderlo pondremos un ejemplo de forma prctica. Si tenemos una imagen raster con un edificio no sabremos nada sobre l, nicamente la forma, con las capas vectoriales podemos tener ms 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, lneas, polgonos, etc. A continuacin explicaremos las capas creadas en nuestra aplicacin y los objetos creados, los cules son llamados Features.
3.7.3.3.1. Markers
En la capa Markers, se mostrar la ltima posicin del dispositivo que el usuario seleccione, si en ese momento hay informacin de este. Cuando hablamos de un Marker nos referimos a una posicin, un punto en el mapa, que ser definido mediante la longitud y la latitud y en el cul se colocar el icono que le pasemos por parmetro al crear el objeto.
15
51
Figura 30. Ejemplo de Marker situado en la posicin: Longitud: 2.35098, Latitud: 48.85667.
Con la clase LonLat nos referimos al punto deseado. Como se puede ver en el Cdigo 14. Transformamos los datos de LonLat a la proyeccin de nuestro mapa, con la funcin transform. Para que el icono se site en la posicin correcta, debemos definir el tamao de este, mediante el mtodo size, (Vase Cdigo 14.), adems tambin debemos calcular el offset. De esta forma el icono se situar en la posicin indicada sin desplazamientos errneos. Por lo tanto nuestra aplicacin tendr fiabilidad respecto a los datos recibidos, otro tema es que el dispositivo que nos enve la informacin no sea totalmente exacto, pero eso no lo podemos controlar desde la aplicacin. Una vez tenemos los valores size, offset y la imagen para el icono, crearemos el objeto icono. Finalmente, crearemos el Marker pasndole dos argumentos, el punto donde queremos situarlo (posicin lonlat que hemos transformado a la proyeccin 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);
Cdigo 14. Como hacer un marker.
3.7.3.3.2. Historial
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 mnimo dos puntos.
52
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 posicin de esta tabla ser un objeto Geometry.Point (x, y), dnde x e y sern longitud y latitud, respectivamente. Como hemos podido ver Point es una subclase de Geometry, como veremos ms adelante, LineString tambin. La clase Geometry guarda informacin sobre un objeto geomtrico 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)) pasndole el array de puntos como argumento. Una vez tenemos creado el objeto geomtrico, ya podemos crear el feature object para poder aadirlo a la capa vectorial, esto lo haremos a travs 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 pasndole tres argumentos, el objeto LineString (puede ser otro tipo de elemento geomtrico), y dos parmetros opcionales: atributos, en nuestro caso, los hemos puesto como NULL y estilo para indicar el color, grueso, etc de la lnea.
o Password: contrasea del usuario. A continuacin, con la funcin mysql_connect abriremos una conexin al servidor MySQL, pasndole por parmetros las variables: host, usuario y password, est nos devolver un identificador de conexin, o false en caso de error. Por ltimo, mediante la funcin 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 conexin realizada en el paso anterior mediante mysql_connect. Ejecutando esta funcin ya podremos trabajar con nuestros datos.
54
elemento a modificar, del cual sabremos el id o telfono que nos habrn enviado mediante POST. En el caso Markers seleccionamos la informacin necesaria de la tabla del historial (es decir, telfono, longitud y latitud) y de la tabla dispositivos (telfono, 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 informacin en nuestra aplicacin. Por lo tanto para pasarla del servidor al navegador se enva en formato JSON, con la funcin json_encode(informacin 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 indicndole en que tabla se debe guardar y pasndole los valores que queremos almacenar, sern los valores que haya introducido el usuario en los formularios.
3. UPDATE, actualizar datos: Con la accin UPDATE ms la condicin WHERE, modificaremos los campos correspondientes a la fila que tenga el id igual al valor pasado en la condicin WHERE.
4. DELETE, eliminar datos: Por ltimo, para eliminar dispositivo o tipos de dispositivos utilizaremos DELETE ms la condicin WHERE para indicar que fila queremos eliminar. Se debe tener en cuenta que cuando se elimine un dispositivo tambin se eliminar toda la informacin 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.
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 Cdigo 15. que muestra un ejemplo de lo que retorna la funcin, y en la Figura 32. El resultado visual que conseguiramos en la aplicacin.
[{"checked":false, "singleClickExpand":true, "text":"Coches", "id":"1", "icon":"imag\/coche.gif", "children": [{"icon":"imag\/uno_coch.png", "text":"Ferrari", "id":"619202020", "leaf":true },{ "icon":"imag\/tres_coc.png", "text":"Mercedes", "id":"650808080", "leaf":true },{ "icon":"imag\/dos_coch.png", "text":"Scenic", "id":"615323435", "leaf":true }] }]
Cdigo 15. Ejemplo cdigo JSON.
56
3.8.
En este apartado pondremos en prctica todas las funciones de la aplicacin. La pantalla inicial la vimos en la Figura 17., lo primero que haremos ser crear un tipo de dispositivo, para eso seleccionaremos la pestaa TIPOS DE DISPOSITIVOS.
57
(Ver Figura 33.)Vemos que simplemente pasando el ratn por encima del botn, se marca, y adems nos aparece un mensaje informativo o tooltip. Le damos al botn y nos aparece la ventana para rellenar el formulario (Ver Figura 34.).
Una vez le damos al botn guardar nos aparece un mensaje confirmando que se ha grabado correctamente. (Ver Figura 35.) Adems vemos que aparece el nuevo tipo en el GridPanel y en el rbol de dispositivos.
58
A continuacin volveremos a crear un tipo de dispositivo pero esta vez introduciremos algn dato errneo, por ejemplo: dejar algn campo, de los que son obligatorios rellenar, en blanco, como puede ser el nmero mximo de dispositivos (Ver Figura 37.); o introducir un nombre que tenga ms 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 38. El campo Nombre est configurado para 10 caracteres como mximo.
59
Figura 39. Como hemos introducido un ID repetido cuando le damos al botn guardar nos aparece un mensaje de advertencia de que los datos no son correctos.
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 informacin correspondiente al elemento seleccionado.
60
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 aplicacin (GridPanel y TreePanel) y en la base de datos.
Figura 42. En la parte superior vemos los cambios que se han hecho en la aplicacin. En la parte inferior la base de datos.
61
Igual que en el caso de Crear Nuevo Tipo de Dispositivo, los campos tambin muestran mensajes de advertencia si son incorrectos o si el Telfono introducido ya existe. De la misma forma, cuando se graba correctamente, el sistema tambin 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 aplicacin, 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 Nmero de Dispositivos Actuales (Ver Figura 45.).
62
Figura 46. El campo nmero de dispositivos actuales tambin se ha actualizado en la base de datos.
Para ver que verdaderamente tienen utilidad las variables que indican el mximo nmero de elementos que puede tener un Tipo de dispositivo y la que indica cuantos tenemos actualmente, vamos a crear 2 dispositivos ms dentro de la categora Camiones. A continuacin intentaremos crear un cuarto dispositivo. El resultado es el que podemos ver en la Figura 47. no nos permite guardarlo ya que superamos el lmite.
Figura 47. Cuando intentamos guardar el cuarto dispositivo de la clase Camiones, no nos deja ya que hemos superado el nmero mximo de dispositivos para esta clase.
A continuacin crearemos otro tipo de dispositivo y algn dispositivo perteneciente a este, para ver que se muestran correctamente en el rbol de dispositivos y en las tablas (Ver Figura 48.).
63
Figura 48. Vemos que en el GridPanel los dispositivos se clasifican segn el Tipo, y que en el rbol se visualizan correctamente.
En el caso de los dispositivos tambin es posible modificarlos, no pondremos ningn ejemplo ya que es igual que la prueba realizada en el apartado 3.8.2 la nica diferencia es que se hace con los campos y tabla referente a los dispositivos.
64
Tenemos dos opciones: introducir la informacin mediante el formulario o introducirla mediante la url con el formato mostrado en el Cdigo 17. Introduciremos en la url de nuestro navegador el siguiente cdigo:
http://localhost/sms.php?telefono=600606060&fecha=2011-0515&hora=13:30&latitud=41.11866&longitud=1.24533
Cdigo 17. Cdigo que introduciremos en la URL.
Figura 50. Vemos que la informacin 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).
65
Figura 52. Vemos como los dispositivos que estn marcados en el treepanel, se puede ver donde estn situados en el mapa.
Figura 53. En esta imagen podemos ver el recorrido que ha hecho el dispositivo M1, el cual est seleccionado en el rbol.
66
Cada vrtice de la lnea roja que vemos en la Figura 53. Es un punto desde donde se nos ha enviado informacin.
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 informacin referente a este tipo de dispositivo.
3.9.
Recursos utilizados:
Por ltimo, hemos utilizado el editor de texto Crimson Editor para la codificacin de los ficheros de la aplicacin. Los usuarios que quieran hacer uso de la aplicacin deben tener como mnimo un ordenador personal que disponga de navegador Web y conexin a Internet. Aunque la aplicacin se ha probado en varios navegadores y su funcionamiento parece ser correcto, se asegura que todas las funciones explicadas en este proyecto funcionan en Firefox 4, ya que ha sido el ms utilizado durante la creacin de la aplicacin.
68
4.
De forma general, en un principio me ha aportado conocimientos sobre las tecnologas GIS. Las cuales estn ms presentes, de lo que nosotros creemos, en el da a da. Ya que un usuario de Internet utiliza Google Maps o aplicaciones similares, pero no se hace a la idea de la repercusin que estas tienen y de las infinitas posibilidades que nos pueden ofrecer para gestionar informacin en muchos mbitos. Se trata de un tema que est en plena fase de explotacin, son utilizados tanto en la administracin pblica, en reas como la gestin de recursos naturales, de patrimonio, urbanismo, medio ambiente, trfico urbano, control de carreteras y sealizaciones, etc. Adems de que existe una importante normativa europea que obliga a los estados miembros a poner esta informacin accesible al ciudadano. Como en la empresa privada, en temas como la planificacin de campaas de marketing, el seguimiento de la fuerza de ventas, logstica, etc. Por otra parte, me ha aportado experiencia en lenguajes de programacin como JavaScript, PHP, MySQL, tecnologas como AJAX, OpenLayers, ExtJS, algunos de ellos los desconoca o nicamente tena nociones bsicas. Actualmente, he alcanzado conocimientos para poder crear una aplicacin web con una buena interfaz de usuario mediante JavaScript (en este caso ExtJS y GeoExt), relacionndola con informacin almacenada en una base de datos (MySQL), con la posibilidad de gestionar su informacin, ya sea guardando, borrando o actualizndola, mediante AJAX y PHP. Conocimientos bsicos que se pueden poner en prctica en cualquier tipo de aplicacin, en general aplicaciones RIA, y no nicamente a sistemas SIG. Adems, he aprendido a utilizar OpenLayers, trabajando con algunos de sus elementos, como pueden ser los controles, features (markers, linestring, etc), descubriendo la cantidad de posibilidades que ofrece para personalizar, adaptar y mejorar nuestra aplicacin. En definitiva, creo que ha sido una buena introduccin al mundo de la programacin de aplicaciones web.
69
5.
En Telemtica hemos desarrollado diferentes prcticas y proyectos programando en distintos lenguajes. Aunque la programacin es un campo ms enfocado a informtica hemos obtenido la base suficiente para poder crear aplicaciones como la de este proyecto. Si pensamos en las asignaturas que tienen ms conocimientos relacionados con el proyecto las primeras que debemos considerar es Fundamentos de programacin I y II. En las cules estudiamos y pusimos en prctica la programacin en lenguaje Java. En Fonaments de Programaci I, entre otras cosas diseamos algoritmos para la resolucin de problemas simples, estudiando la sintaxis y semntica de las instrucciones y expresiones del lenguaje. Empezamos a conocer los tipos bsicos de datos, vectores, tablas, etc. Y algoritmos bsicos de programacin estructurada, como pueden ser los algoritmos de bsqueda, recorrido y ordenacin. Adems de comprender el proceso de compilacin. En Fonaments de Programaci II, se present la programacin orientada a objetos para el desarrollo de aplicaciones. Se disearon programas escogiendo la opcin ms ptima y eficiente dependiendo de la complejidad de los algoritmos. Todos estos conocimientos adquiridos en estas asignaturas fueron la base para empezar a programar, Java y JavaScript son lenguajes distintos pero comparten sintaxis y algunas estructuras. Por ejemplo, en el caso de OpenLayers, un aspecto en comn a Java es la programacin orientada a objetos. Por otra parte en la asignatura Xarxes i Serveis se llev a cabo la realizacin de una aplicacin web en lenguaje PHP y HTML, la cual estaba formada por una base de datos MySQL que se cre con la herramienta phpMyAdmin, y se almacenaba en el servidor apache, tambin hicimos uso del paquete Xampp. Para acceder al servidor y a la informacin, como ya hemos dicho, se hizo mediante PHP y lenguaje SQL. Por lo tanto, antes de realizar este proyecto tena algunos conocimientos sobre estas tecnologas, y sobre conceptos como lenguajes del lado cliente, lenguajes del lado del servidor, etc. Que ayudan a comprender el funcionamiento general de este tipo de aplicaciones. Por ltimo comentar que el apartado incluido en este proyecto sobre la representacin de la informacin16, que habla sobre el modelo raster y el modelo vectorial est relacionado con parte del temario visto en la optativa de Transmissi Multimdia en la cual se habla sobre la representacin de imgenes. En conclusin, con los conocimientos adquiridos de los estudios realizados y el autoaprendizaje diario a partir de los errores y problemas encontrados durante la programacin he podido realizar este proyecto formado por diferentes tecnologas.
16
70
6.
Conclusiones: Llegados a este punto podemos decir que se han cumplido los objetivos del proyecto. La idea bsica de este era la de realizar una aplicacin que permitiera situar dispositivos remotos en un mapa. A medida que hemos ido avanzando se han ido implementando las funciones deseadas, la aplicacin permite registrar tipos de dispositivos y dispositivos, tambin incluye la opcin de modificarlos o eliminarlos guardndose toda la informacin en la base de datos. Se crean los objetos necesarios para representar los elementos en el mapa, los cuales se sitan en la posicin correcta, dependiendo de la informacin recibida. El aplicativo permite situar la ltima posicin del elemento o ver sus ltimos movimientos gracias al objeto LineString. Parte de la aplicacin se ha desarrollado en JavaScript, mediante ExtJS y OpenLayers. ExtJS ha facilitado crear una interfaz clara e intuitiva para el usuario. OpenLayers, una librera totalmente libre, que en un futuro nos permitir aadir mapas propios y ms funciones a la aplicacin. El resto se ha programado en PHP utilizando bases de datos MySQL. Lneas Futuras de Trabajo: Como lneas futuras consideraremos aquellos aspectos que podemos mejorar en la aplicacin, tambin debemos tener en cuenta que depende de la finalidad exacta de sta, ya que no sabemos el nmero de dispositivos que se quieren utilizar, aunque la idea inicial es que no ser un nmero muy elevado. En el caso de tener ms elementos a localizar, se podran aadir mejoras como: Crear un filtro buscador en cada Gridpanel y en los Treepanel para poder localizar fcilmente el dispositivo deseado. Si adems la aplicacin es utilizada por varios usuarios crear sesiones, para que cada uno de los clientes tenga la opcin de eliminar, crear o modificar los dispositivos sin afectar al resto de usuarios, esto supondra una modificacin i/o ampliacin importante en la base de datos.
Estudiar ms a fondo y poner en prctica el sistema para recibir la informacin desde los dispositivos remotos. Implementar un servicio de actualizacin de posiciones. Aunque Aiddea Linux propuso que se recibieran las posiciones va SMS, considero que se podran buscar alternativas ms viables como por ejemplo va internet. Como dijimos en el apartado 2 del proyecto, Aiddea Linux quiere que la aplicacin se pueda adaptar a distintas situaciones, por lo tanto, se podrn aadir ms funcionalidades
71
segn la finalidad. Tambin depende de cmo se comercialice la aplicacin. Consideraremos dos opciones: El cliente final nicamente accede al aplicativo web, es decir, en este caso Aiddea Linux debera llevar el mantenimiento del servidor y de los dispositivos remotos. El cliente se encarga de todo, es decir, Aiddea Linux nicamente le vende todo el sistema y el usuario final se debe de preocupar de ir manteniendo todos los equipos.
A continuacin listamos diferentes aspectos que se podran ampliar o mejorar en la aplicacin actual: Carga de imgenes (iconos) mediante los formularios. Aadir paleta de colores en los formularios para seleccionar el color del LineString del dispositivo. Mediante un Web Map Server proporcionar mapas de zonas concretas, as como poder utilizar mapas que estn guardados en nuestro servidor sin necesidad de descargarlos de Internet continuamente.
En conclusin, para la mejora de la interfaz y de las funciones del programa, JavaScript, y OpenLayers nos facilitan muchas herramientas con aplicaciones muy vistosas e interesantes.
72
REFERENCIAS:
SIG:
[1] http://www.mapaeducativo.edu.ar/encontrar/?a=qsig [Definicin SIG] Abril 2011 [2] http://recursos.gabrielortiz.com/index.asp?Info=012 [Definicin SIG y Tipos de representar la informacin] Abril 2011 [3] http://es.wikipedia.org/wiki/Sistema_de_Informacin_Geogrfica [SIG] Abril 2011 [4] http://www.monografias.com/trabajos14/informageogra/informageogra.shtml#com [SIG] Abril 2011 [5] http://www.procoopsrl.com.ar/sistgis.htm [Definicin SIG y sus componentes] Abril 2011 [6]http://www.iea.es/_docum/SIG2.PDF?IEA=e1cdcf4caac2168d092b113e58c38c3b&IEA=bb087d0367fd4c516595ce17 d07b888e [Ejemplos SIG, normalizacin de la informacin] Abril 2011 [7] http://jacobeo.tracasa.es/ [Ejemplo SIG: Camino de Santiago] Abril 2011 [8] http://w24.bcn.cat/GWMPNet61_bcn/extlayout.aspx [Ejemplo SIG: Geoportalbcn] Abril 2011 [9] http://delta.icc.es/ideLocal/IdecServ?codi=xgl&tipus=L&schema=c_ideclocal [Ejemplo SIG: IdecLocal] Abril 2011 [10] http://www.geolocal.cat/geoportal/cat/que-es/som-i-fem/# [Infraestructura de Dades Espacials de Catalunya] Abril 2011 [11] http://www.idee.es/resources/presentaciones/JIDEE06/ARTICULOS_JIDEE2006/articulo19.pdf
CARTOGRAFIA:
[12] http://enciclopedia.us.es/index.php/Sistema_de_coordenadas [Sistema de coordenadas] Abril 2011 [13] http://creciendojuntos.bligoo.com/content/view/151311/Sistema-de-coordenadas-geograficas.html coordenadas] Abril 2011 [Sistema de
[14] http://googleware.blogspot.com/2008/01/cmo-funciona-google-maps.html [Sistema de coordenadas y proyeccin de Mercator] Abril 2011 [15] http://es.wikipedia.org/wiki/Proyecci%C3%B3n_cartogr%C3%A1fica [Proyeccin cartogrfica] Abril 2011
OGC:
[16] http://www.opengeospatial.org/ogc [Pgina oficial OGC] Abril 2011 [17] http://es.wikipedia.org/wiki/Open_Geospatial_Consortium [OGC] Abril 2011 [18] http://www.idee.es/show.do?to=pideep_OGC.ES [Especificaciones OGC] Abril 2011 [19] http://www.idee.es/show.do?to=pideep_proyectoIDEE.ES [Infraestructura de datos espaciales de Espaa] abril 2011
OPENLAYERS:
[20] Erik Hazzard, OpenLayers 2.10 Beginers Guide, Ed. Packt Publishing, 2011. [21] http://openlayers.org/ [Pgina oficial OpenLayers] Abril 2011
73
[22] http://dev.openlayers.org/releases/OpenLayers-2.10/doc/apidocs/files/OpenLayers-js.html [API OpenLayers] Abril 2011 [23] http://es.wikipedia.org/wiki/OpenLayers [Definicin] Abril 2011 [24] http://openlayers.ingemoral.es/manualOpenLayers.html [Manual OpenLayers] Abril 2011 [25] http://www.ideandalucia.es/index.php/es/visores [Visores Web] Abril 2011 [26] http://openlayers.org/dev/examples/?q=mobile [API OpenLayers para mviles] Abril 2011 [27] http://blog.sonxurxo.com/2011/03/29/tutorial-de-openlayers-i-introduccion/ [Tutorial OpenLayers] Abril 2011
EXT JS:
[28] Jos Lpez Quijado, Domine JavaScript, Ed. Ra-Ma, 2004. [29] Frank W. Zammetti, Practical Ext JS Projects with Gears, Ed. Apress, 2009. [30] Jesus D. Garcia, Jr. , Ext JS in Action, Ed. Meap Edition, 2009. [31] Shea Frederick, Colin Ramsay, Steve Cutter Blades, Learning Ext JS, Ed. Packt Publishing, 2008. [32] http://dev.sencha.com/deploy/ext-3.3.1/docs/ [API ExtJS] Abril 2011 [33] http://www.sencha.com/learn/Tutorial:Introduction_to_Ext_(Spanish) [Tutorial ExtJS] Abril 2011 [34] http://www.quizzpot.com/2009/01/ext-js-framework/ [Tutorial ExtJS] Abril 2011 [35] http://www.webprogramo.com/tutoriales-extjs/ [API OpenLayers para mviles] Abril 2011 [36] http://www.geoext.org/ [Pgina oficial GeoExt] Abril 2011 [37] http://www.geoext.org/examples.html#examples [Ejemplos GeoExt] Abril 2011
[38] Jacobo Pavn Puertas, Creacin de un portal con PHP y MySQL, Ed. Ra-Ma, 2006. [39] http://es.wikipedia.org/wiki/PhpMyAdmin [Definicin phpMyAdmin] Mayo 2011 [40] http://es.wikipedia.org/wiki/Base_de_datos_relacional [Definicin Base de datos relacional] Mayo 2011 [41] http://www.maestrosdelweb.com/editorial/tutsql1/ [Tutorial SQL] Mayo 2011 [42] http://www.desarrolloweb.com/articulos/262.php [SQL] Mayo 2011 [43] http://objetivophp.com/?p=86 [Tipos de datos MySQL] Mayo 2011
[44] http://www.maestrosdelweb.com/editorial/ajax/ [AJAX y las aplicaciones Web] Mayo 2011 [45] http://geeks.ms/blogs/rcorral/archive/2006/06/23/545.aspx [Intercambio de datos con JSON] Mayo 2011 [46] http://webelop.com.ar/ajax/comunicacion-ajax-php-con-json/ [PHP, JSON] Mayo 2011 [47] http://www.ajaxya.com.ar/ [AJAX, JSON y PHP] Mayo 2011 [48] http://www.desarrollosweb.net/2008/11/13/introduciendo-extjs-llamadas-ajax/ [Llamadas AJAX] Mayo 2011 [49] http://es.wikipedia.org/wiki/AJAX [Definicin AJAX] Mayo 2011
74
[50] http://es.wikipedia.org/wiki/XML [Definicin XML] Mayo 2011 [51] http://es.wikipedia.org/wiki/JSON [Definicin JSON] Mayo 2011
75