martes, 4 de octubre de 2016

SQL Espacial y PostGIS para apps móviles

SQL Espacial para aplicaciones móviles

El SQL espacial es la base para desarrollar aplicaciones basadas en la localización, que permitan a sus usuarios consultar elementos que se encuentren a su alrededor, o cerca de un lugar, expresado éste por su nombre (París, Parque Nacional de Ordesa, Francia, etc). Recientemente hemos publicado varias aplicaciones Android que precisamente hacen uso del SQL espacial.

En estas aplicaciones, como por ejemplo en "Rutas MTB", los usuarios pueden realizar dos tipos de búsquedas relacionadas con la localización:
  • Búsqueda "Cerca de tí".
  • Búsqueda de "elementos cerca de una referencia geográfica".
Antes de ver el detalle de como implementar estas búsquedas con SQL, hay que hacer una aclaración: los datos a consultar residen en un servidor. Desde la app móvil se envían peticiones a un servicio web que reside en el servidor, y éste es el que hace las consultas a la base de datos y envía a las aplicaciones el resultado en formato JSON.

La otra alternativa (datos en el móvil) haría que el tamaño de la aplicación para su descarga fuese excesivo.


Captura de pantalla de la app "Rutas Senderismo" de la búsqueda por referencia geográfica.

SQL para implementar la búsqueda "Cerca de tí".

Esta consulta es la más sencilla, pues tan solo necesitamos tener nuestros datos en una tabla, y que ésta tenga una columna geométrica. Supongamos que esta tabla se llame MAPAS, y la columna geométrica GEOMETRY. Nuestra posición nos la proporciona el dispositivo móvil (ya sea en Java, Javascript, o cualquier otra plataforma de desarrollo para dispositivos móviles). 
Si el GPS nos da la posición latitud = 41, longitud = 1, la consulta que se ejecutaría en el servidor sería:

SELECT  t.TITLE, t.DESCRIPTION, FROM MAPAS AS t WHERE MBRIntersects( t.GEOMETRY, GeomFromText('POLYGON((1 41, 1 41, 1 41, 1 41,  1 41))') 

Tan simple como una operación MBRIntersects entre la geometría de nuestros datos, y una geometría construída "al vuelo" con la coordenada que nos ha dado nuestro GPS.
 

SQL para implementar la búsqueda de "elementos cerca de una referencia geográfica".


En este caso, además de la tabla con los datos principales (MAPAS), necesitamos tener una tabla con la referencias geográficas (topónimos) que se vaya a usar como referencia. Para cada referencia geográfica, esta tabla tiene que tener un nombre (por ejemplo: Sevilla (España), Estados Unidos, Parque Nacional de Ordesa, etc), y una geometría. Por ejemplo, GEOGRAPHIC_REFERENCES, NAME y GEOMETRIA.

El proceso para realizar la búsqueda es muy simple: a partir del texto introducido por el usuario, localizamos la referencia geográfica que casa con dicho texto, cogemos su geometría, y hacemos una búsqueda espacial cruzando las dos capas.

El SQL que expresa estas condiciones es el siguiente:

SELECT SQL_CALC_FOUND_ROWS X.* FROM (SELECT  t.TITLE, t.DESCRIPTION FROM MAPAS AS t JOIN GEOGRAPHIC_FILTER AS g ON MBRIntersects( t.GEOMETRIA, g.GEOMETRIA )  WHERE g.name = 'Madrid' ) AS X


Es decir, hacemos una operación JOIN SQL entre las dos tablas (la de los datos y la de las referencias geométricas), usando como condición de unión que intersecten sus geometrías (ON MBRIntersects(g1,g2) ) y luego filtramos los resultados por el texto de búsqueda (WHERE g.name = "Madrid").

En este enlace podemos ver un ejemplo de esta consulta en funcionamiento, localizando rutas de mountain bike en el entorno de Barcelona (España)

Si queréis probar como funciona en la aplicación, podéis instalar alguna de las siguientes aplicaciones:

Rutas MTB

Rutas Senderismo

martes, 17 de mayo de 2016

El infierno de los campos TEXT en MySQL

¡CUIDADO CON LOS CAMPOS TEXT / BLOB en MySQL!

Esta semana nos hemos dado bastantes estocazos contra la pared por culpa de los campos Text en MySQL. El principal motivo es que MySQL no los carga en  memoria, de tal forma que si una consulta tiene tablas con campos Text, MySQL accede a disco para manipular cada una de las filas. Esto ralentiza mucho ciertas operaciones, además de que consume muchísima CPU.

La cosa se hace mucho más grave si encima en la consulta no hacemos uso de esos campos. ¡A MySQL le da igual! Si la tabla tiene campos Text, le da igual que tu no los vayas a manipular en tu consulta. Esto es así porque en la estructura interna de datos que emplea para manejar los registros de una tabla, si ésta tiene campos Text no almacena el valor del campo, sino un puntero a un recurso a disco. Es como si el campo Text fuera un fichero, y MySQL en sus registros internos lo que almacena es la URL / Path del fichero.

Ejemplos de este tipo podemos encontrar muchos:
  • Un sistema de blogging, en el que el contenido de los posts lo tengamos en campos Text, mientras que los metadatos (autor, fecha de creación, categoría de contenido) en campos estructurados.
  • etc

Moraleja: A la hora de diseñar tu tabla, si junto con los campos Text tienes otro tipo de campos, que vayas a utilizar de forma independiente, separalos en tablas distintas. Optimizarás mucho las operaciones que no involucren campos Text, hasta tal forma que te compensará hacer un JOIN cuando sí lo involucren.


martes, 7 de octubre de 2014

Textos completos en JQuery Mobile

Por defecto, cuando el framework Jquery Mobile detecta que un texto excede del tamaño reservado de la barra de título, lo recorta y pone unos puntos suspensivos.

Para evitar esto, hay que modificar el estilo CSS del emento html utilizado para el título, añadiendo la propiedad white-space:normal.
white-space: normal

lunes, 6 de octubre de 2014

Leaflet: la importancia de map.invalidateSize()

Ultimamente me he estado pegando más de la cuenta con Leaflet, así que comparto aquí el problema encontrado, y la solución, por si le puede servir de ayuda a alguien.

Origen del problema: tenemos un objeto javascript L.Map de Leaflet, al que hemos añadido una serie de elementos vectoriales (objetos de tipo L.Layer).

Si queremos cambiar la capa, y mostrar otra distinta, reutilizando el objeto mapa existente, tenemos que seguir estos dos pasos:

a) Eliminar los objetos "Layer" previamente cargados. En este caso lo más comodo es haberlos agrupado previamente en un contenedor denominado "LayerGroup".

if(currentLayer){
    if(currentLayer instanceof L.LayerGroup)
         currentLayer.clearLayers();
         map.removeLayer(currentLayer);
    }
}

b) Añadir la nueva capa (objetos Layer) agrupada en un contenedor.

 var lyrs = [];//array donde guardar las geometrias
var layerGroup = L.featureGroup(lyrs); 

c) Cambiar el nivel de zoom del mapa, para que se nos muestra la nueva "capa" que vamos a añadir.
map.fitBounds(layerGroup.getBounds());

Y ¡ojo! Aquí empiezan a aparecer los problemas. Es muy posible que el nivel de zoom que se nos muestre sea siempre el máximo,  y que el mapa (la capa de tiles con ortofoto, open street map, o lo que sea que hayamos querido cargar como capa de base) no aparezca centrado. ¿Cual es el motivo?

Si cambiamos nuestro código de cambio del nivel de zoom, por el siguiente:
var bounds = _layerGroup.getBounds();
var center = bounds.getCenter();
var zoomLevel = map.getBoundsZoom(bounds);

map.setView(center, zoomLevel, true);

Veremos que zoomLevel toma el valor 0.


 ACTUALIZACIÓN: En este bug reportado en la web del proyecto Leaflet se describe perfectamente el problema. No solo zoomLevel toma el valor 0, getSize() devuelve un objeto con valores w=0 y h=0.

En este punto es cuando entra en juego el método invalidateSize() del objeto map. Si lo hacemos así:

          var layerGroup = L.featureGroup(lyrs);
         map.invalidateSize();
         map.fitBounds(layerGroup.getBounds()); 

Nuestro mapa se dibujará sin problemas, mostrando la capa que acabamos de añadir.


Moraleja: map.invalidateSize() recalcula los parámetros del objeto map,parámetros que pueden cambiar con un cambio del área de visualización del dispositivo (horizontal a vertical en móvil, cambio del tamaño del navegador en desktop, etc) o con el "bounds" de las geometrías cargadas. Así que es conveniente siempre llamar a map.invalidateSize() antes de cambiar el nivel de zoom, si pensamos que se ha producido un cambio en la inforamación de estado del mapa.

martes, 29 de julio de 2014

Operaciones de mantenimiento sobre tablas MyISAM de MySQL sin bloquearlas

Actualmente lookingformaps tiene indexados en torno al millón de mapas, y aproximadamente 30 o 40 millones de puntos de interés. Esto ha hecho que la base de datos con la que gestiona la información haya alcanzado dimensiones considerables (en torno a 10 Gb. de información, incluyendo índices).






Looking4Maps trabaja con la base de datos MySQL, por ser muy lígera, y estar muy extendida (trabajando con ella la casi totalidad de proveedores de servicios de hosting de Internet). Además, MySQL proporciona capacidades de gestión espacial básicas, con tipos geométricos, índices espaciales y operaciones espaciales básicas a nivel de rectángulos envolventes (bounding box).

Sin embargo, para poder trabajar con los tipos de datos geométricos, el motor de almacenamiento con el que trabaje deberá ser obligatoriamente MyISAM.

MyISAM es el motor más rapido en operaciones de lectura, pero cuando se van a realizar operaciones de escritura tiene un gran inconveniente: hace un bloqueo a nivel de toda la tabla, de tal forma que en muchas ocasiones ni siquiera permite que el resto de usuarios puedan realizar operaciones de lectura.

Muchas operaciones de MyISAM (INSERT, UPDATE, ALTER TABLE) realizan un bloqueo a nivel de tabla.


Esto hace que, operaciones tan simples como pueda ser modificar el esquema de la tabla para añadir un campo, pueda llegar a dejar inoperativo Looking4Maps mientras la base de datos termina de hacer sus operaciones internas para añadir el campo a la tabla, puesto que no permite realizar accesos de lectura para los nuevos usuarios.

Frente a esto, la mejor solución que he encontrado es mantener dos tablas sincronizadas: una de trabajo, que es con la que trabaja lookingformaps para proporcionar mapas a los usuarios, y otra de mantenimiento, que es la tabla sobre la que el motor de indexación realiza los volcados de los nuevos mapas que va encontrado, o sobre la que yo opero (previa interrupción del robot de búsquedas) para hacer modificaciones estructurales de la base de datos.

Para ello, MySQL permite hacer una copia instantánea de una tabla así:

CREATE TABLE COPIA_TABLA LIKE TABLA;
INSERT INTO COPIA_TABLA SELECT * FROM TABLA;



De tal forma que las operaciones que se realicen sobre COPIA_TABLA no estorban en absoluto al resto de usuarios, que pueden seguir trabajando ya que los accesos al sistema en producción se hacen contra TABLA, no contra COPIA_TABLA.


Una vez terminadas las operaciones sobre la tabla de escritura, se propagan a la tabla principal así:

RENAME TABLE TABLA TO TABLA_VIEJA;
RENAME TABLE COPIA_TABLA TO TABLA;
RENAME TABLE TABLA_VIEJA TO COPIA_TABLA;

Esta solución funciona para un sistema como Looking4Maps, pensado solo para la búsqueda e indexación, no para la creación de nuevos contenidos. Obviamente, llegado el caso de evolucionar Looking4Maps para que sea un sistema de creación de mapas, habrá que cambiar la arquitectura.







lunes, 28 de julio de 2014

Ríos que atraviesan Tokio: Sumida y Tama (隅田川,多摩川)

En las últimas dos semanas están llegando múltiples visitas a la web de  lookingformaps en busca de los ríos que atraviesan Tokio. Los dos ríos principales que atraviesan Tokio son el río Sumida y el río Tama. Se pueden localizar a través de la categoría Ríos_de_Tokio


Desembocadura del río Sumida en la bahía de Tokio.


El río Sumida (en japonés: 隅田川, Sumida-gawa) se origina en la bifurcación artificial del  río Arakawa en Iwabuchi, y desemboca en la bahía de Tokio. A su paso por Tokyo el rio es bastante caudaloso con lo que es navegable. A parte de pequeños barcos que navegan por sus aguas también existe, en Tokyo, una red de transporte por el rio con diversas paradas. Esta red es llamada 水上バス  (Suijō Basu) , que se podría traducir como autobuses acuáticos o de agua. Los principales embarcaderos de estas lineas son 4: Asakusa, Hama Rikyu, Hinode y Odaiba. Hay varias combinaciones que se pueden hacer pero la mas común suele ser la que va desde Asakusa hasta Odaiba o viceversa, esta ruta puede ser directa o con paradas en otros puertos.

El río Tama (多摩川 Tama-gawa) atraviesa Tokio, estableciendo la línea divisoria entre Tokio y Kanagawa. En Tokio es una zona muy popular para la práctica de deportes o simplemente para echar un día de campo, debido a los parques y pistas deportivas que existen a lo largo de la orilla a su paso por Tokio.


viernes, 15 de noviembre de 2013

Velocidad de carga: cómo incrementar un 100% el tráfico a tu página web (II)

En la entrada anterior mostraba una serie de gráficas, basadas en datos empíricos recabados por Google Analytics, en las que se observaba como las mejoras en el rendimiento y en el tiempo de carga de las páginas del portal de búsqueda de mapas Looking4Maps se tradujeron en un incremento de tráfico del 100%, ocasionado por la mejor valoración  que de esta web de mapas hizo el buscador Google, y en un importante aumento de los ingresos recabados por publicidad. En esta entrada, continuación de la anterior, voy a enumerar cuales han sido las técnicas de optimización aplicadas.

  1. Utiliza una herramienta de diagnóstico: Google Page Insights.

    En primer lugar, antes de optimizar a ciegas, lo conveniente es detectar dónde optimizar. Y si uno de los objetivos de optimizar, además de mejorar la experiencia de usuario de nuestros visitantes, es que Google nos ponga una buena nota y así aparezcamos antes en sus resultados de búsqueda, parece razonable utilizar la herramienta de medición de rendimiento Google Page Insights. Para muestra  la nota que Google Page Insights pone ahora mismo al buscador de mapas Looking4Maps.
  2. ¡ Es la base de datos, estúpido!

    En una aplicación web que va a soportar mucho tráfico, y que almacene sus datos en una base de datos relacional (y en la mayoría de los casos MySQL) la base de datos es el principal cuello de botella. Si vuestra web está basada en un gestor de contenidos o plataforma de publicación, como pueden ser WordPress, Joomla, o Drupal, o en algún software de tipo genérico para gestión de foros, comunidades, etc. es probable que los accesos a la base de datos ya estén muy optimizados, pero aún así, estos serán el principal cuello de botella. La base de datos te da muchas cosas (datos ordenados, prevención ante corrupción de los mismos, facilidad de consulta, etc.) pero a cambio, penaliza en el uso de memoria y en el rendimiento. 

    Looking4Maps está programado íntegramente por mí, en PHP, así que al principio los accesos a la base de datos no estaban muy optimizados.  Si éste también es tu caso, y trabajas con tablas grandes (ahora mismo el buscador de mapas tiene indexadas más de 600.000 entradas), desnormaliza, evita los JOINs, evita consultas anidadas, asegurate de que creas índices en aquellas columnas a partir de las que haces consultas, etc. De cara e mejorar el tiempo de carga de una página, es preferible hacer varias consultas muy rápidas, que una única consulta pero más lenta. Por tanto, el contenido principal de la página se puede cargar con una única consulta a la tabla principal de contenido, y contenidos relacionados existentes en otras tablas se pueden cargar de forma asíncrona mediante peticiones AJAX, que no penalizarán el tiempo de carga de la página.

    Cuando trabajamos con un hosting compartido este factor, la velocidad de ejecución de las consultas a la base de datos, cobra todavía una mayor importancia. La razón es que en un hosting compartido cada cuenta de cliente tiene limitado el número simultáneo de conexiones a la base de datos que puede realizar. Supongamos que nuestra web está en un hosting compartido, y que nuestro proveedor nos permite tener 30 conexiones simultáneas a la base de datos. Si nuestras consultas tardan en ejecutarse, o nuestro tráfico es elevado, puede darse el caso de que no queden conexiones disponibles, por lo que las páginas que quieran hacer uso de la base de datos tendrán que esperar a que se liberen conexiones.

    Y este es precisamente el problema relacionado con la base de datos que pueden sufrir los usuarios de productos como WordPress, en los que las consultas sí que están muy optimizadas. Por muy optimizadas que estén nuestras consultas, el número de conexiones que podemos tener con la base de datos es finito, mientras que el número de usuarios que pueden visitar nuestro sitio web no lo es (en términos de órdenes de magnitud ;) ).

    La solución a este problema pasa por cachear los contenidos de la web, en memoria una pequeña cantidad de los contenidos más accedidos, y en fichero todos los contenidos que nuestra cuota de almacenamiento nos permita. Para Wordpress hay disponibles varios plugins de cache. Para Looking4Maps, desarrollado en PHP, he utilizado la libreria PHPFastCache que permite cachear en memoria y también en una base de datos intermedia SQLite. Algunos frameworks de desarrollo PHP como Code Igniter también permiten cachear, tanto los resultados de consulta a base de datos (caché de datos) como las páginas generadas a los usuarios (caché de vista). ¡Todo sea por minimizar las veces que accedemos a la base de datos!
     
  3. Habilita la compresión GZip de tu servidor web.

    Cuando un navegador solicita una página web a un servidor, en realidad se está descargando decenas, incluso cientos, de pequeños recursos en forma de ficheros, a través del protocolo http. Esto lo podeis ver con herramientas de desarrollador como Firebug o Chrome.


    Cuanto mayor sea el tamaño que tienen estos archivos, mayor será el tiempo que el navegador necesita para descargarlos y por tanto el tiempo necesario para cargar la página desde la que se descargan.

    Afortunadamente, los servidores web están preparados para comprimir estos ficheros (normalmente GZip) y los navegadores para detectar que el servidor permite acceder al contenido comprimido, pedirlo comprimido, y descomprimirlo.

    Si usais un hosting con el panel CPanel, podeis habilitar esta opción en la sección "Software / Services" y entrando en la pantalla "Optimize website". Ahí, podrás optar por comprimir ciertos tipos de contenidos o comprimirlo todo.


    Los archivos de imágen ya suelen utilizar buenos algoritmos de compresión, así que lo ideal es comprimir archivos de texto: html, js, css, etc.

  4. Utiliza CloudFlare CDN (Content Delivery Network).

  5. Una CDN (red de distribución de contenido) es una red de ordenadores distribuída por todo el mundo, que se encarga de cachear tus contenidos estáticos, está diseñado para servirlos por tí a muy alta velocidad (con la que aligera de trabajo a tu servidor) y que además sirve estos contenidos a tus usuarios desde el servidor más cercano a su localización geográfica, con lo que disminuye el "número de saltos" por la red que deben realizar estos contenidos hasta llegar a tus usuarios. En la siguiente figura vemos la distribución de servidores por el mundo del CDN CloudFlare.



    ¿Por qué recomiendo CloudFlare? Es el CDN que yo he utilizado, y además de ofrecer un servicio básico gratuito, ofrece una serie de servicios adicionales de valor añadido que también tienen un impacto directo sobre el tiempo de carga de vuestra web. Una vez que el CDN se descarga nuestro contenido estático, y antes de servirlo desde el servidor más próximo a nuestros usuarios, aplica una serie de optimizaciones de rendimiento sobre dichos archivos.
  • "Minimiza" al vuelo los caracteres innecesarios de ficheros de texto, llegando a reducir su tamaño un 20 %, con el consiguiente ahorro en los tiempos de descarga. 

  • Utiliza las características de almacenamiento local de los navegadores modernos (basadas en html 5) para cachear en el cliente.

  • Ajusta automáticamente las cabeceras http de respuesta de los servidores para que den instrucciones a los navegadores sobre cómo deben cachear los recursos servidos, para minimizar el número de peticiones http que éstos le realizan.
  • Modifican el código HTML de las páginas servidas por las webs originales, para que los recursos que bloqueen la carga de la página (archivos javascript, etc) se carguen al final, de forma que parezca que la página se carga más rápido. 

  • Combina múltiples ficheros javascript en un único fichero, de forma que en lugar de a través de múltiples peticiones http se sirvan a través de una única petición.

Con estos sencillos pasos he conseguido la sensible mejora de tráfico descrita en la entrada anterior. Todavía quedan algunos pasos, especialmente de cara a optimizar la carga de la web para dispositivos móviles, pero parece claro que el retorno de inversión en optimizar la carga de una web es inmediato en términos de posicionamiento en Google.