Evitar cache del navegador en Google FT

Seguimos hablando de Google Fusion Tables.

Presentación del problema

A veces podemos encontrarnos con la necesidad de querer actualizar los marcadores de un mapa usando la información actualizada de una tabla de Google Fusion Tables.

El problema que hay, es que si lanzamos una query a la base de datos, si la sentencia es idéntica que en otro caso anterior, el navegador en vez de hacer la llamada al servidor, se pasea por la caché de nuestro navegador en busca del resultado obtenido anteriormente con esa misma sentencia.

Eso puede darnos muchos dolores de cabeza, ya que si estamos haciendo un seguimiento en 'tiempo real' de algún transmisor GPS que nos envía la información en FT, la query puede ser siempre la misma, pero el resultado no debería ser el mismo.

Resumen del problema:
"Hacemos una query a Google Fusion Tables y nos devuelve siempre el mismo resultado aunque la tabla haya sido modificada y sabemos que este resultado no es correcto."

Nuestra query por ahora será algo así:

SELECT lat,lng FROM 2455909 ORDER BY timestamp DESC LIMIT 1

La traducción de esta query a lenguaje humano sería: Seleccionar las columnas Latitud y Longitud de la tabla 2455909 y ordenarla en función de la columna 'timestamp' en decreciente y limita la respuesta a 1 sola fila.

Ahora deberemos añadir alguna fila en nuestra tabla, para ello usaremos la interfaz de Google Fusion Tables y añadiremos manualmente la fila. Tener en cuenta que si usáis mi tabla de prueba, la columna 'timestamp' debéis poner un numero SIEMPRE mayor a cualquier otro. El 'timestamp' es lo que identifica que esa fila añadida sea la última, y si queremos obtener la fila más actualizada, deberemos hacer un SELECT a la fila con un 'timestamp' más grande.

Realizamos otra vez la Query anterior y... Qué observamos? El resultado sigue siendo el mismo que antes de añadir la fila.
Si probamos de borrar la cache del navegador y volver a hacer la query veremos que funciona correctamente.

Solución


Para evitar esto, podemos añadir una condición a la query que SIEMPRE cambie un poco y sobretodo que estemos 100% seguros de que no se repita nunca en cualquiera de los casos.
Para ello podemos jugar con el 'timestamp', en JavaScript podemos usar la funcion Date():
Creamos una función en nuestro JS:

function update() {
    var tempsAct = new Date();
    var milisec = tempsAct.getTime();
    return (milisec);
}

Y en nuestra Query hacemos referencia a nuestra función, para que la llame siempre que hagamos la query:

var query = "SELECT lat,lng FROM 2455909 WHERE lat NOT EQUAL TO "+update()+" ORDER BY timestamp DESC LIMIT 1";

Como veis, hemos añadido la función 'update()' dentro de la query. Esto hará que nuestra Query sea SIEMPRE distinta y de esa forma el navegador nunca podrá usar la caché.

Hay que decir que la variable milisec tendremos que actualizarla cada vez que querramos

Por cierto, 'timestamp' son los milisegundos transcurridos desde el 01/01/1970, con lo cual, como no podemos hacer mas de 1 query por ms en Google FT, esta solución es perfectamente válida.

Espero que os haya servido de ayuda, si tenéis alguna duda poneros en contacto conmigo.

Saludos!

SELECT usando JavaScript en Google FT

Google Fusion Tables


Para los que busquen una base de datos simplificada y que esté siempre disponible, Google nos ofrece una solución muy interesante. Google Fusion Tables es una base de datos relacional en la nube.

Las ventajas que nos aporta es despreocuparnos de toda la infraestructura que conlleva dedicar un servidor a una base de datos, ya sea seguridad, configuraciones, averías, gastos de mantenimiento, ...

Si decidimos usar esta base de datos en nuestra aplicación Web usando JavaScript, debemos tener en cuenta que aún está en desarrollo y que aún le queda añadir algunas funcionalidades para hacer la vida más cómoda a los programadores. El ejemplo clave es no tener un método definido para hacer queries al servicio usando los metodos GET y POST.

Voy a comentar una manera fácil para solicitar datos a Google Fusion Tables, usando el método GET y con la ayuda de JSONP podremos evitar la limitación del Cross-domain en JavaScript de los navegadores modernos:

Codigo JavaScript

function obtenirDadesFT() {

var queryUrlHead = 'http://www.google.com/fusiontables/api/query?sql=';
    //Tenemos que indicar el nombre de la funcion donde enviaremos los datos obtenidos.
var queryUrlTail = '&jsonCallback=tractarDades';
 
   // escribimos la query normal:
var query = "SELECT name FROM 839090 limit 1";
    var queryurl = encodeURI(queryUrlHead + query + queryUrlTail);

          //Hacemos la peticion GET a Fusion Tables usando JSONP:
$.get(queryurl, dataHandler, "jsonp");
}
         //Los datos obtenidos se almacenan en la variable 'data', y tractarDades es la función que hemos indicado más arriba:
        // La variable 'data' es un objeto JSON, por lo tanto usaremos la mecánica propia del objeto para tratar su información, en este caso representamos las filas obtenidas de la Query:

function tractarDades(data) {

alert(data.table.rows);
}

Hay que tener en cuenta que la función $.get es de jQuery, por lo tanto en el HTML deberemos incluir la siguiente etiqueta:

<html>

<head>
                //El codigo JavaScript anterior lo tengo en un archivo en la misma carpeta, llamado funcions.js.
<script src="funcions.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

</head>
<body>
<div>

<input type="button" value="obtenirDadesFT" onclick="obtenirDadesFT()">

</div>
</body>
</html>

Espero que haya sido de utilidad. Solamente comentar que este método nos servirá para hacer Queries del tipo SELECT. Para hacer Queries del tipo INSERT deberemos esperar un tiempo más, porque en JavaScript no existe la posibilidad de hacerlo por el momento. Pronto tendremos alguna solución.

PD: Felices fiestas a tod@s!

Usando PhoneGap

Bueno, para empezar a hablar de algo interesante, hablaré de PhoneGap.

Qué es?

          PhoneGap es un framework basado en HTML5 que nos permite crear aplicaciones web pudiendo acceder a dispositivos del teléfono tales como GPS, agenda, cámara, sistema de archivos, ... como si de una aplicación nativa se tratara.

         Además la principal ventaja que ofrece es que si deseamos hacer una misma aplicación para distintas plataformas (Android, iOS, BlackBerry, Symbian, Windows Phone 7, Web OS) un mismo código nos servirá para todas las plataformas.

Cómo funciona?


          Básicamente tienes que desarrollar una página web teniendo en cuenta que si usas PhoneGap es porqué querrás ejecutarla en un teléfono móvil y por lo tanto deberás tener en cuenta que el tamaño de la pantalla es reducido.

          Hay frameworks como jQuery Mobile que te pueden facilitar mucho el tema de la interfaz y dar la sensación de estar ejecutando una aplicación nativa, hay otros Frameworks como Kendo UI que también ofrece muchas posibilidades.

          Una vez hecha la aplicación web, se empaqueta con PhoneGap para el dispositivo al que vaya destinado. Como ya mencioné antes, el código nos sirve el mismo para todas las plataformas, pero deberemos empaquetarlos de distintas maneras.

Referencia:


http://phonegap.com/


       

Estrenando Blog!

Buenas tardes a tod@s, éste es mi primer mensaje en el Blog.

Espero que el Blog sea una herramienta productiva para mi y todos los que me estéis leyendo ahora.

Un saludo.