Desarrollo de una aplicación web basada en el módulo ZI_GTC

En este post se trata el proceso de creación de una aplicación web que está basada en el módulo “Càlcul de Zona d’Influència (Graf de Trams de Carrer)” (ZI_GTC) para QGIS. El trabajo realizado por Ignasi Argemí Puig y Josep López Xarbau en la adaptación web del módulo CTE ha servido como base teórico-práctica para el desarrollo de la nueva aplicación. Para obtener más información sobre esta otra aplicación se puede consultar el post “Desenvolupament d’un mòdul en un entorn web”.

Debido a que con el módulo CTE se había conseguido un resultado satisfactorio, el equipo del CCU decidió utilizarlo como punto de partida para poder desarrollar nuevos plugins cuya funcionalidad fuese relativamente fácil de portear al entorno web.

El objetivo del ZI_GTC es calcular la zona de influencia (en distancia o en tiempo) de las entidades que el usuario desee con una dispersión que se adapta a la forma del grafo que conforman todas las calles Mataró.

Estructura interna

La estructura del programa y el diagrama de flujo de la transmisión de información es exactamente igual a la del CTE (Fig 1).

Fig 1. Diagrama de flujo de la transmisión de información (Fuente: Ignasi Argemí Puig)

En el front-end estarán el HTML y CSS, los cuales se encargan de la estructura y el estilo de la página web; mientras que el funcionamiento interno de la página en el cliente estará gestionado por Javascript y AJAX que, además, serán los encargados de realizar las peticiones al servidor web cuando sea necesario.

En el back-end está el servidor web en el cual se almacena la página web y que se comunica con un PHP que se conecta con el servidor de datos de Postgres en el cual está la base de datos del CCU. Finalmente, para poder devolver el resultado al front-end se utiliza un formato de intercambio de datos que deriva JSON: GeoJSON.

Desarrollo

Se comenzó a trabajar sobre una copia de la aplicación del CTE y lo primero que se hizo fue modificar el HTML para dotarlo de los campos necesarios que necesitaba el ZI_GTC (Fig 2) e ir empezando a hacer pruebas conceptuales. Se tuvo en cuenta el diseño de la interface del CTE para que hubiera una coherencia estética entre ellos.

Fig 2. Apariencia del formulario de la aplicación

Se optó por hacer una versión reducida del plugin de QGIS (Fig 3). Una de las funcionalidades importantes que se ha decidido omitir es la que implica el método de trabajo con la población. Esta decisión tiene que ver con la complicación que supondría tener que pedirle al usuario una “Taula Resum”, las cuales a día de hoy sólo se generan en QGIS.

Fig 3. Módulo ZI_GTC de QGIS

El siguiente paso fue adaptar el Javascript a la nueva funcionalidad, es decir, se introdujo la gestión de la información (enviada y recibida) y la lógica interna de la selección de un coste u otro para después poder lanzarle la información a PHP. En un primer momento quedó pendiente resolver la recepción del GeoJSON ya que no se tenía muy claro cómo se llevaría a cabo en el caso de este plugin.

Finalmente se tradujo la funcionalidad básica del módulo de QGIS a PHP, el cual estaba escrito en Python. La mayor parte del trabajo estaba hecho ya que el módulo ZI_GTC trabaja realizando operaciones sobre el servidor. Sin embargo, puesto que no se tenían conocimientos previos de PHP, esta parte supuso un reto debido a determinados cambios de sintaxis, del planteamineto y la dificultad añadida que supone debugar en PHP. Fue necesario modificar varias consultas SQL y hacer un procedimiento específico para poder enviarle el GeoJSON de vuelta al Javascript. El siguiente paso fue volver a editar el Javascript para interpretar el GeoJSON y representarlo el resultado en pantalla.

Fig 4. Ejemplo de resultado del ZI_GTC web tras calcular el área de influencia de 150m de los IES de Mataró

Llegados a este punto la aplicación estaba prácticamente terminada. En un primer momento el resultado mostrado en pantalla no tenía la forma deseada a pesar de mostrar las zonas correctas. Este error (fundamentalmente visual) se debía a una consulta SQL que fue necesario localizar y modificar.

Para terminar, se añadieron marcadores a cada una de las zonas para que el usuario pudiera consultar su nombre con un simple click (Fig 5).

Fig 5. Ejemplo de resultado del ZI_GTC web, mostrando el nombre de una entidad.

Publicación

La aplicación ya se encuentra disponible en Internet. Se puede probar en http://geoportalccu.tecnocampus.cat/ZI_GTC/ZI_GTC.html, preferiblemente utilizando Google Chrome o Mozilla Firefox.

Publicat per Manuel Duro Santos

Estudiant de la Doble Titulació en Enginyeria Informàtica i Disseny i Producció de Videojocs al TecnoCampus de Mataró i actualment treballant com a becari en pràctiques del Centre de Coneixement Urbà (CCU) de la Fundació TecnoCampus Mataró-Maresme. Per altre banda, també sóc tècnic de so i Graduat en Producció d'Audio (SAE Institute).

Deixa un comentari

L'adreça electrònica no es publicarà Els camps necessaris estan marcats amb *