Los SIG en dispositivos móviles y más concretamente en tabletas se han convertido en una eficaz herramienta para la recogida de datos en campo y su integración directa en un SIG corporativo, permitiendo al usuario no solo ahorrar tiempo en la entrada de datos, sino integrarlos de forma directa en el SIG y visualizar en tiempo real las actualizaciones desde cualquier otro dispositivo conectado a la red.
La GEOwebinar trata aspectos relacionados con el desarrollo de una aplicación SIG web para gestionar datos geográficos y alfanuméricos desde un dispositivo móvil tipo tableta, partiendo de la experiencia del SIGTE de la Universitat de Girona en desarrollos similares.
A cargo de Alexandre Busquets, programador analista SIG del Servicio de SIG y Teledetección (SIGTE) de la Universidad de Girona.
How to use Redis with MuleSoft. A quick start presentation.
SIG en dispositivos móviles - GEOwebinar UNIGIS
1. SIG en dispositivos móviles
Alexandre Busquets, programador analista SIG.
SIGTE - Universitat de Girona
2. SIG
SIG: visualizar y gestionar datos geográficos
SIG de escritorio:
QGis
gvSIG
ArcGIS
Librerías para SIG WEB (mobile support)
OpenLayers
LeaFlet
3. Objetivos
Mapa como punto central de la aplicación
Gestión y visualización "in situ" de los datos geográficos y
alfanuméricos
Consulta de datos
Edición de cartografía
Edición de datos alfanuméricos
Online / Offline
Seguridad
7. Componentes
Mapa base
– Servidor de mapas (WMS) del SIG
– Servidor de mapas externo (IGN, ICC,..)
– API
• Google Maps
• Bing Maps
Edición de datos
– API REST
– WFS-T
Puntos a tener en cuenta:
– Autentificación
– Validaciones
– Imágenes y archivos
9. Componentes
Mapa base
– Tiles
• Directorio local
• Mbtiles
– Canvas
Edición de datos
– Plugin persistencia
Sistema de sincronización
10. Solución tecnológica
Apache Cordova + HTML5, CSS3 y Javascript
Solución híbrida
Apache Cordova
Framework gratuito y open source
HTML5, CSS3 y Javascript
Aplicaciones móviles multiplataforma: iOS, Android, Windows
Phone,...
Conjunto de APIs que permiten controlar características como
el acelerómetro, la cámara, las notificaciones, la
geolocalización,...
11. Solución tecnológica
Ventajas vs aplicación nativa:
– Entorno WEB. Ecosistema muy popular
– Código Javascript de proyectos consolidados
– Versión para distintos OS
Ventajas vs publicación en web:
– Aplicación empaquetada
– Api para usar elementos del sistema (Notificaciones,
LocalStorage, Cámara,...)
12. Librerías
Interfaz de usuario
– JqueryMobile
– Backbone
– FastClick
– OpenLayers
Servidor
API REST
– php, python, nodejs
Base de datos
– Postgres+postgis
– Oracle Spatial
14. Valoraciones
Resultado final bueno
Rendimiento inferior a aplicación nativa
Algunos problemas
Rendimiento del componente navegador (WebView)
Problemas aceleración GPU para SVG y CSS en OL
Las transiciones entre pantallas lentas cuando hay un mapa
Hola a todos,
En la siguiente xarla veremos un caso real de desarrollo de aplicación web para móviles.
La aplicación que expondré se trata de "Parques de y Jardines de Figueres". La aplicación si bien está muy terminada aún se encuentra en fase de desarrollo.
Login
Existen 2 roles de usuario:
Lectura
Lectura/escriptura
Mapa
Mapa punto central de la aplicación.
Herramientas de navegación:
Zoom (evento touch con dos dedos a la vez.) Separa o unir dos dedos
Desplazamiento (evento touch), movemos el dedo por la pantalla.
Posición de Inicio.
Posición GPS.
Herramientas de información:
Información/identificación.
Medición.
Datos y leyenda:
Toc (Fuentes de datos)
Capas
Tapa base
Capas de soporte a la edición
Leyenda
Herramientas de edición
Crear objeto (Fotografia)
Modificar objeto (Espai verd)
Login
Existen 2 roles de usuario:
Lectura
Lectura/escriptura
Mapa
Mapa punto central de la aplicación.
Herramientas de navegación:
Zoom (evento touch con dos dedos a la vez.) Separa o unir dos dedos
Desplazamiento (evento touch), movemos el dedo por la pantalla.
Posición de Inicio.
Posición GPS.
Herramientas de información:
Información/identificación.
Medición.
Datos y leyenda:
Toc (Fuentes de datos)
Capas
Tapa base
Capas de soporte a la edición
Leyenda
Herramientas de edición
Crear objeto (Fotografia)
Modificar objeto (Espai verd)
Además, podemos incluir código nativo.
JqueryMobile (bàsicamente para la tematización)
requirejs
Para tener nuestor código ordenado y separado en varios archivos. Correspondientes a
Backbone
Nos ha permitido implementar el patron modelo-vista -control y tener todo organizado en classes
Backbone-Forms
Para crear los formualrios a partir de la definición de una clase
Openlayers 2.13.1
FastClick (delay de 300 m cuando hacemos click)
JqueryMobile (bàsicamente para la tematización)
requirejs
Para tener nuestor código ordenado y separado en varios archivos. Correspondientes a
Backbone
Nos ha permitido implementar el patron modelo-vista -control y tener todo organizado en classes
Backbone-Forms
Para crear los formualrios a partir de la definición de una clase
Openlayers 2.13.1
FastClick (delay de 300 m cuando hacemos click)