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

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 llamado leerCITAS. 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; i<totalfrases; 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 llamaremos mostrarCITAS. Aquí simplemente iremos añadiendo a una variable (salida) los datos obtenidos, formateándolos con HTML simple. Así luego podremos mostrarlos dentro de una ID 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 un div con una ID para que se inserte allí el contenido de la base de datos seleccionado. El orden será este: llamada a leerCITAS, div con ID y ejecución de mostrarCITAS 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 en basic, usamos esta otra que termina en values (dirección completa marcada en verde). Ahi es dónde pedimos los datos usando la antes creada leerCITAS mediante el parámetro callback.

<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 ese div. Evidentemente, el nombre de su ID tiene que coincidir con la que enviamos mediante mostrarCITAS.

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

¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.

Compartir

Twitter

Pinterest

Facebook

Linkedin

Copy URL

Compartir

Twitter

Pinterest

Facebook

Linkedin

Y muchos más artículos interesantes si nos sigues en...

• Google
• Facebook
• Twitter