Cuántas veces me habrá pasado por la cabeza hacer algo así XD

Como supongo que muchos ya sabréis, una especificación de HTML5 es Web SQL Database para persirtir datos en una base de datos relacional embebidos en el navegador web(la otra alternativa es Web Storage, para persistir datos como clave valor). Esto puede tener muchas aplicaciones, en mi caso lo he utilizado para implementar el sistema de favoritos de DNDzgz.

Cuando pretendamos sacar partido de las nuevas características de HTML5 debemos tener en cuenta que cada navegador puede soportar sólo algunas especificaciones, no es un todo o nada, por lo que lo primero que deberemos hacer es comprobar que soporta la especificación que queremos usar, por ejemplo:

function supports_local_database() {
return !!window.openDatabase;
}

Si existe openDatabase, crearemos la conexión a la base de datos:


db = openDatabase('dndzgz', '1.0', 'DNDzgz', 65536);

Una vez abierta la conexión, podremos ejecutar cualquier tipo de query SQL(compatible con SQLite), dentro de una transacción. Por ejemplo crear una tabla:

db.transaction(
function(transaction) {
transaction.executeSql(
'CREATE TABLE IF NOT EXISTS favorites ' +
' (id INTEGER NOT NULL, ' +
' service VARCHAR(255) NOT NULL, ' +
' date DATE NOT NULL,' +
' name VARCHAR(255) NOT NULL, ' +
' latitude REAL NOT NULL, ' +
' longitude REAL NOT NULL, ' +
' PRIMARY KEY (id,service));'
);
}
);

Insertar datos:

db.transaction(
function(transaction) {
transaction.executeSql(
'INSERT INTO favorites (id, service, date, name, latitude, longitude) VALUES (?, ?, ?, ?, ?, ?);',
[id, service, new Date(), name, latitude, longitude],
callBack,
errorCallBack
);
}
);

Eliminar datos:

db.transaction(
function(transaction) {
transaction.executeSql('DELETE FROM favorites WHERE id=? AND service=?;',
[id,service], null, errorCallBack);
}
);

Y por supuesto mostrarlos:

db.readTransaction(
function(transaction) {
transaction.executeSql(
'Select * from favorites;', [],
function(transaction, result){
for (var i=0; i < result.rows.length; i++) {
var row = result.rows.item(i);
alert(row.name);
alert(row.service);
}
},
errorCallBack
);
}
);

Como podéis ver, a executeSql se le pasa primero la query, seguidamente un array con los valores de los argumentos de la query, y finalmente una función de callback y otra de callback para el caso de que existan errores. Y existen dos tipos de transacciones: transaction y readTransaction, la primera es de lectura-escritura, mientras que la segunda es de sólo lectura.

En fin, supongo que a otros también os pasará lo mismo, resulta bastante raro estar tirando queries SQL desde javascript. Pero puede resultar útil para muchos casos, empezando por descargar de responsabilidades y carga al lado servidor.

Lo prometido es deuda, tenía pendiente escribir un poco acerca de la parte técnica del fin de semana del desafío AbreDatos y de DNDzgz. A grosso modo las tecnologías utilizadas fueron Google App Engine(GAE) y Python del lado servidor; del lado cliente fueron Javascript con jQuery, la versión 3 del API de Google Maps, algunas de las novedades de HTML5, unas gotas de CSS3 y jQTouch para ayudarnos para que tuviera pinta de aplicación nativa iPhone. Usamos Git como repositorio de código, el repositorio está concretamente en github; para los documentos, diseños, fotos, etc. utilizamos dropbox(antes del fin de semana yo no tenía ni cuenta :P).

La elección de GAE fue casi instantánea cuando empezamos a hablar con gimenete acerca de presentarnos al AbreDatos, las razones: hosting gratis y capacidad de escalar mucho sin tener que gastarnos ni un euro, despreocuparnos de la parte de sistemas, ningún problema con las limitaciones por correr sobre la plataforma de Google.

Que usáramos Python, aún siendo más javeros que otra cosa, fue por que ninguno de los 2 teníamos experiencia con GAE en Java(okok, yo había hecho un pequeño experimento, pero muy poca cosa para llegar a ninguna conclusión). Por eso preferimos aprovechar su experiencia desarrollando la primera versión de debug_mode=ON con Python+GAE; mientras que varias semanas antes yo me ojeé un par de manuales de inicio rápido, retomé el ebook Python para todos que tenía a medio leer(hace muuuucho :P) y un par de días antes, me hice en poco rato el proyecto de ejemplo de GAE. Para extraer los datos utilizamos tanto Beautiful Soup como expresiones regulares para hacer scraping de HTML o Javascript de Tuzsa y Bizi, y simplejson para cargar los datos JSON de datos.zaragoza.es.

Que utilizáramos jQuery como framework Javascript, fue una elección posterior a jQTouch(que está basado en jQuery) pero de todas formas, seguramente lo hubiéramos elegido. Google Maps es la elección "por defecto" para todo el que quiere hacer algo con mapas :P. Gimenete es quien estuvo peleando con esto, teníamos problemas con la fluidez en la navegación de los mapas, que al final consiguió mejorar... Eso sí, fuera del navegador Safari del iPhone no conseguimos que los mapas funcionaran correctamente, ni en terminales con distintas versiones de Android y ni si quiera en el Safari de Mac(tenemos que ver que pasa exactamente, tras algunas pruebas, el sospechoso principal es jQTouch).

Gracias a que iPhone(y las últimas versiones de Android) soportan parte de HTML5, se ponían a nuestra disposición algunas de esas novedades que molan tanto (Flash, tiemblaaa!! ;)):

• La posibilidad de geolocalizar al usuario por medio del GPS del terminal (no es exactamente HTML5, pero parece que la mayoría lo ponemos en el mismo saco) muy fácilmente utilizando navigator.geolocation.
• Para implementar los favoritos/acceso rápido estuvimos usando Web SQL Database, lo que supone guardar los datos en una base de datos embebida al navegador web(actualmente parece que en todos es SQLite, o al menos parece ser la implementación de referencia), que finalmente se quedó fuera por falta de 3/4 horas :S.

En fin, que debemos molar, porque nuestro proyecto es una pequeña colección de buzzwords: Cloud Computing vía Google App Engine, HTML5, iPhone... XD

Basado en los datos de Who Has the Most Web Servers? de Data Center Knowledge

Vía @javahispano

Este fin de semana se celebró el Desafío AbreDatos 2010, desde las 00:00 de la noche del Viernes al Sábado hasta las 00:00 del Domingo al Lunes, 48 horitas trabajando para desarrollar servicios que utilizaran datos de fuentes públicas. El desafío lo convocaba la asociación Pro Bono Publico para tratar de concienciar de la necesidad de que se abran los datos generados con dinero público(o sea, el nuestro); y por lo que dicen, nos habíamos presentado 47 equipos de los que hemos conseguido algo funcional unos 30. Y como publiqué en el anterior post, estuve participando.

El equipo del que formaba parte era closin, donde he programado con Alberto Gimeno, la encargada de diseño es Mamen Pradel y el responsable de marketing y comunicación es Lucas Aisa. Aún con la desventaja de que sólo habíamos trabajado anteriormente juntos Mamen y yo, creo que hemos sido un equipo muy compensado y junto al buen rollo durante todo el fin de semana, se ha notado en el resultado final con DNDzgz(o Dónde en Zaragoza ;)).

La idea de DNDzgz, era principalmente crear una aplicación web móvil que mostrara servicios ciudadanos de Zaragoza geolocalizados y su información útil asociada, que además tuviera aspecto de aplicación nativa de iPhone(sin cerrarnos a que funcionara en otros terminales/navegadores, claro).

Nuestra idea inicial fue extraer los datos sólo de las fuentes que aparecen en datos.zaragoza.es, pero la información de servicios como el autobús urbano o el bizi no eran suficientes para nuestro objetivo:

• En el caso del autobús, nos servía para posicionar las paradas y nos daba una url de la web de tuzsa, en donde aparecía una estimación para saber cuando tardarán en llegar los autobuses de ese poste, por lo que tenemos que hace scraping de ese HTML para poder consumir esos datos.
• Sobre el bizi, sólo posicionaba las paradas sin ninguna información añadida... pero vimos que en la web de bizi se podía hacer scraping para obtener el número de bicicletas y aparcamientos libres en una estación bizi además de su posición, lo que es realmente útil.
• La que sacamos íntegramente de la web de datos abiertos del ayuntamiento de Zaragoza, fue la de puntos wifi municipales(porque no necesitábamos más que la posición)

Hay muchas cosas que seguramente se echarán de menos en la aplicación, a bote pronto: favoritos/acceso rápido para ver si hay bizis en mis estaciones habituales, conocer la parada del 30 más cercana a mi posición, la estación de bizi con aparcamientos libres más cercana a mi posición... además de añadir otros servicios ciudadanos.

Se puede pensar que muchas de estas funcionalidades no han sido posibles de añadirse a causa de la limitación de las 48 horas, pero la principal razón de no poder añadir más funcionalidades, fue el tener que perder tiempo haciendo scraping para hacernos con todos los datos que necesitábamos. Y hay que ser consciente que eso habrá pasado en casi todos(por no decir todos) de los 47 equipos que nos presentamos al desafío... con el nivel que se ve en los resultados, ¿que se hubiera conseguido con datos abiertos?

Y nada, sólo quería felicitar a la gente de Pro Bono Publico tras la organización del evento a los equipos por sus resultados, y por supuesto agradecer a todos los que se han presentado su esfuerzo por tratar de crear servicios que nos resulten de utilidad a los ciudadanos.

Ahora la segunda parte, para que haya valido la pena la paliza de este fin de semana, a intentar hacer llegar estos servicios a los ciudadanos! :)

PD: Como ha quedado un tocho bastante largo, intentaré escribir durante la semana otro post sobre detalles más técnicos de las tripas de DNDzgz
PD 2: En mi flickr están disponibles las fotos que nos hizo Toño y hay por ahí algún video de @maitrella XD