Google Docs como base de datos. Leer y mostrar con JavaScript – Accident

En la anterior entrada vimos cómo preparar la hoja de datos y en esta veremos el código necesario para recuperar esos datos.

Fuente

A mi parecer, la cuestión más interesante sobre esto que estamos viendo sería precisamente esta parte. Lo vamos a conseguir con una función Javascript que va a leer los datos del feed de la hoja y que aquí hemos llamadoleerCITAS. Esta función recibirá la dirección de ese feed y leerá los datos concretos que necesitamos.

Según los lea los irá guardando en un array (o variable que contiene una lista de datos) y así los tendremos disponibles para mostrarlos con una segunda función (mostrarCITAS). Además desde esta segunda daremos el formato básico a esos datos.

Función para leer datos

Esta sería la primera parte del código:

script type='text/javascript'
frase = new Array();
autor = new Array();
totalfrases = 0;

function leerCITAS(json) {
totalfrases = json.feed.entry.length;
for(i=0; itotalfrases; i++) {
frase[i] = json.feed.entry[i].gsx$citas.$t;
autor[i] = json.feed.entry[i].gsx$autores.$t;
}
}
...

Explicando un poco lo que hace el código anterior, línea a línea:

Preparar matriz para que se puedan guardar frases
Preparar matriz para que se puedan guardar autores
Inicializar contador para el total de frases
Comienzo función leerCITAS, que recibirá un dato en forma de dirección feed (json)
Asignamos a totalfrases el valor correspondiente a la longitud del feed recibido (cuántos datos hay)
Comienzo bucle para repetir tarea desde el primer dato hasta el último
Asignamos al primer elemento de la matriz frase[i] (y sucesivos) el primer elemento que encontramos en la columna citas
Asignamos al primer elemento de la matriz autor[i] (y sucesivos) el primer elemento que encontramos en la columna autores
Fin del bucle
Fin de la función

Función para escribir datos

Ya tenemos los datos en memoria y ahora lo que necesitamos es otra función que los muestre. La llamaremosmostrarCITAS. Aquí simplemente iremos añadiendo a una variable (salida) los datos obtenidos, formateándolos con HTML simple. Así luego podremos mostrarlos dentro de unaID cuyo nombre se corresponde con el dato que recibe la función (donde). Previamente y en este ejemplo, hemos hecho una selección aleatoria de qué fila de datos vamos a mostrar.

Conviene incluir clases para después poder cambiar el aspecto final de los dos elementos (frase, autor) con CSS y eso es lo que veis también a continuación.

...
function mostrarCITAS(donde) {
var salida = "";
var max = totalfrases-1;
var alea = Math.round(Math.random()*max);
var cual = alea;
salida += "span class='frase'";
salida += frase[cual];
salida += "br/";
salida += "span class='autor'"+autor[cual]+"/span";
salida += "/span'";
document.getElementById(donde).innerHTML = salida;
}
/script

Comienzo función mostrarCITAS, que recibirá un dato en forma de ID que llamamos donde
Inicializar salida, que contendrá lo que devolverá la función
Asignamos a max el valor que antes obtuvimos en totalfrases y le restamos 1 para cuadrar lo siguiente
Asignamos a alea un valor aleatorio entre 0 y 1 y lo multiplicamos por max para conseguir una fila al azar de entre las disponibles
Añadimos a salida una apertura span con clase frase para formatear el bloque completo
Añadimos a salida la frase escogida al azar
Añadimos a salida un salto de línea
Añadimos a salida el autor correspondiente a la frase, metido entre etiquetas span y con clase autor
Añadimos a salida el cierre del primer span que abrimos
Obtenemos el contenido del elemento con la ID recibida en la función y lo sustituimos por todo lo que hemos ido incorporando en salida
Fin de la función

Variantes

En este ejemplo hemos mostrado dos celdas de una misma fila aleatoriamente, pero una vez que las tenemos todas cargadas, sería fácil mostrar cualquiera.

Otra posibilidad sería leer sólo el dato que nos interesa y de hecho, si en el anterior código primero corriéramos la rutina que genera el número aleatorio y luego leyéramos sólo ese dato, estas funciones serían más eficientes. Supongo que me disculpáis sabiendo que se trata sólo de un ejemplo ilustrativo.

También se me ocurre que tras cargar todo podríamos usar un condicional para ir buscando por una columna un dato concreto. Por ejemplo podría ser un autor y así poder ver todas las frases que coincidan con ese autor.

En fin, la realidad es que podemos leer de esta manera todo lo que queramos y luego, con esta segunda parte del script, ya configuraríamos de manera personal qué es lo que se quiere mostrar y cómo.

Leer con JSON y ejecutar scripts

Así que ya tenemos toda la infraestructura. Hemos construido nuestra hoja de cálculo con sus datos y un script que sirve para leer y escribir lo que hay en ella. Sin embargo, todavía no veremos nada en nuestra página.

Para casi terminar, allí dónde queremos que se vean los datos colocamos la llamada a esas funciones y undiv con unaID para que se inserte allí el contenido de la base de datos seleccionado. El orden será este: llamada aleerCITAS,div conID y ejecución demostrarCITAS para sustituir.

La llamada es a la dirección de la hoja de cálculo en formato lista (list) pero en lugar de usar la dirección original que termina enbasic, usamos esta otra que termina envalues (dirección completa marcada en verde). Ahi es dónde pedimos los datos usando la antes creadaleerCITAS mediante el parámetrocallback.

script src="http://spreadsheets.google.com/feeds/list/0AtzEI6cl1Hv6dG9wMHpqcVdqbzJhZjlWQ1VScXFVSmc/od6/public/values?alt=json-in-script&callback=leerCITAS" type="text/javascript"
/script
div id="frasesaleatorias"
/div
script type="text/javascript"
mostrarCITAS('frasesaleatorias');
/script

Como se ha dicho y se ve arriba, después viene un div sin contenido con una id (frasesaleatorias) y por último la llamada a la función que mostraba una frase y un autor al azar, formateaba la salida y luego incluía el resultado dentro de esediv. Evidentemente, el nombre de suID tiene que coincidir con la que enviamos mediantemostrarCITAS.

Dar estilo con CSS

Ya sólo nos quedará asignar estilo CSS a las clases utilizadas en el script; en este ejemplo, .frases y.autor.

Como estamos sólo mostrando frases, poca cosa podemos hacer aparte de cambiar fuentes, colores y bordes, así que aquí termina esto y para ver todo el código junto, os remitimos a la última parte de esta serie.

Tutorial completo (pendiente publicación):

Google Docs como base de datos. Preparar hoja de cálculo
Google Docs como base de datos. Leer y mostrar con JavaScript
Google Docs como base de datos. Frases informáticas aleatorias

CosasParaMiBlogs

lunes, 16 de abril de 2012

Google Docs como base de datos. Leer y mostrar con JavaScript – Accident – Seguro

Función para leer datos

Función para escribir datos

Variantes

Leer con JSON y ejecutar scripts

Dar estilo con CSS

Popular Posts

Blogger news

Labels

Blog Archive

CosasParaMiBlogs

lunes, 16 de abril de 2012

Google Docs como base de datos. Leer y mostrar con JavaScript – Accident – Seguro

Función para leer datos

Función para escribir datos

Variantes

Leer con JSON y ejecutar scripts

Dar estilo con CSS

What's Related?

Popular Posts

Blogger news

Labels

Blog Archive