Google Docs como base de datos. Leer y mostrar con JavaScript | Oloblogger En la anterior entrada vimos cómo preparar la hoja de datos y en esta veremos el código necesario pa...

16 de abril de 2012

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.

Base de datos - Google Docs
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

Hoja de cálculo para este ejemplo


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):

¿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
Copy URL

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

follow us in feedly

38 comentarios :

  1. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
    Respuestas
    1. Gracias Oloman, esta muy bien explicado todo el código y se le pueden encontrar muchas utilidades para este, ahora mismo estoy modificando un poquito el código y haciendo pruebas en mi blog que me van bastante bien, nuevamente gracias y con respecto a la pregunta anterior fue cuestión de leer un poquito y ya logre solucionarla.

      Eliminar
  2. Genial!
    Oloman, tengo una gran duda y tratando de solucionarla termino por tu Blog para variar.
    En realidad yo tengo una hoja de cálculo con datos de alumnos, dni, nombre, comentarios a diversas actividades y sus notas correspondientes.
    Hasta ahora he publicado los documentos de las notas y comentarios por dni, sin problemas, pero quisiera que pudieran consultar la nota introduciendo su dni y el número de la actividad.

    Esto lo he conseguido en Gdocs buscando en una matriz y con dos criterios (dni y nº de actividad). Usando Index(Indice) y match(coincidencia), pero no me sirve, porque tendría que compartir con ellos el documento entero (que tiene información que no deseo que vean) si quiero que puedan insertar su dni y obtener la nota.
    No encuentro la manera de compartir solo una hoja (donde se hiciera la consulta), así que quizás se te ocurra la manera de hacerlo considerando que es una base de datos...
    El otro problema es qu epara insertar el código en mi wikispaces... sólo sé hacerlo con html...
    una ayudita, por favor...

    ResponderEliminar
    Respuestas
    1. Hola. Esto de Google Docs no lo conozco a fondo, pero pienso que se puede hacer con FILTROS. El problema es que cualquiera que sepa el DNI de otro podrá verlo igual ¿no?

      Eliminar
    2. Hola!
      el problema, más que ese, que no me importa (ahora ven la lista entera de dni's con la nota, que es peor)
      es que para hacer la consulta deben tener acceso al documento completo (si no, no pueden escribir en la casilla correspondiente) y en ese documento tengo MUCHOS más datos (hojas) que no quiero que vean.
      Necesitaría la manera de introducir ese dato "en la distancia", desde una consulta con html... o algo así... y que les devolviera el dato que sale en la celda que se calcula automáticamente.
      Creo que me explico bastante mal...
      pero gracias por leer mi duda!

      Eliminar
    3. Pues estamos casi en las mismas, porque como te dije, sobre Google Docs sólo sé lo que he publicado. He intentado manejar su API directamente sin JSON pero todavía no he encontrado la manera exacta de hacerlo. Con eso puedes, leer, escribir, filtrar... y casi todo lo que quieras, como tú dices, "en la distancia.

      Eliminar
    4. Gracias Oloman!
      seguiré trasteando si algún día, por casualidad, descubres cómo, cuéntanos; estaré pendiente de tus trucos y tutoriales.
      Y si me entero de algo... ¡te haré saber!
      Un abrazo!!
      Me encanta tu Blog!!

      Eliminar
  3. Hola Oloman, este tema me ha traído una atracción total, que es justo lo que buscaba por mucho tiempo y por fin lo encontré. Pero tengo una idea diferente pero no sé como hacerlo ya que no sé nada de programación solo un básico de HTML y CSS; y quiero que por favor me pueda ayudar si es que tiene el tiempo para ello, aunque se le agradecería demasiado que me pueda responder.

    Haré unos blog, mediante Blogger de ventas de productos móviles en las cuales tendrán un diferentes precios según para diferentes servicios telefónicos que desean la cual imagino colocar en un atributo table

    Más o menos así:

    SERVICIOS |PRECIOS

    servicio1 |precio1
    serivicio2| precio2
    ... | ...
    serivicioX| precioX

    En donde el codigo TD></TD donde va el precio quiero que sea condicionado a la base de datos de Google Docs donde aparecerá el precio del equipo según la Lista (numero) y Columna (nombre) del documento de Google Docs cual es escoga para ese campo.

    Y en donde el script donde esta el formulario de Google este en el codigo fuente de la pagina en HEAD, para que funcione a todas las Entradas, ya que son muchos moviles.

    Necesito hacer esto ya que diario cambian los precios de los móviles y cambiarlo todo desde el HTML es muy complicado y una base de datos, como explica acá es la mejor manera de hacer esto.

    ¿Se puede hacer algo así? Espero haber sido explicito y mil disculpe si no lo entiende, espero que me pueda ayudar.

    Cordiales saludos.

    ResponderEliminar
    Respuestas
    1. Para hacer eso lo único que tendrías que cambiar sería la función mostrarCitas, de manera que fuera "imprimiendo" todos los datos leídos, con el formato de salida que quieres. La que yo puse toma una al azar, pero si pones un bucle (for) podrás escribir todos los datos.

      Eliminar
    2. Muchas gracias por la respuesta, perdon mi ignorancia pero como le dije no sé de programación, le envié un mensaje desde "Oloblogger Low Cost" con información mas detalla de la idea y pidiendo un presupuesto. Espero su pronta respuesta.

      Eliminar
  4. Oloman como podria hacer para que no sea aleatorio y los datos se muestren ordenados por de ultimo hacia arriba

    ResponderEliminar
    Respuestas
    1. Para eso tendrías que quitar las líneas que generan el número aleatorio y meter todo el tema que genera la salida dentro de un bucle para que escribiera todas:
      for(i=0; i<totalfrases; i++) {...}

      Eliminar
  5. Hola Oloman,todo este codigo ¿va dentro del html a crear?

    ResponderEliminar
    Respuestas
    1. Esta parte en concreto la puedes poner en la plantilla, antes de </head>

      Eliminar
  6. Saludos, tengo una consulta, primero explico lo que tengo, tengo un archivo hoja de calculo en drive donde se recopilan datos de pago de nuestros clientes, en dichos datos pedimos numero de identificacion, nombre, direccion entre otros datos, he hecho la siguiente hoja de consulta https://docs.google.com/spreadsheets/d/1CFxLuzqGIRFcQj2gXmGI2kIMp2GrXDwul7gNwSWoDyQ/edit?usp=sharing pero me gustaria saber si eso se puede hacer usando java y consultando directamente desde nuestra web, quedo a la espera de sus comentarios, no sin antes felicitarle por este sitio de gran ayuda para quienes se inician en determinados lenguajes de programacion.

    ResponderEliminar
  7. Ah se me pasaba por alto, la hoja de consulta funciona perfectamente.

    ResponderEliminar
    Respuestas
    1. No entiendo muy bien lo que quieres hacer Jose, pero mis conocimientos de esas hojas de cálculo son muy básicos. Aquí explico cómo LEER la información de una hoja de cálculo de una manera general, para mostrarla en web, pero si lo que quieres es escribir en ella de forma remota (desde la web), de momento no tengo respuesta.

      Eliminar
    2. Gracias por contestar, la idea no es escribir desde la web de manera remota, ya que lo hago usando la opcion de Formularios de Google Drive, de alli es donde obtengo los datos de esta base de datos, tratare de explicarme mejor, como ya comente tengo una DATA en un spreadsheets de Google Drive, los datos alli contenidos son de nuestros clientes, son datos como (id, nombre, cedula, direccion, forma de pago, articulo comprado entre otros) lo que deseo hacer es que dese la web http://www.jesuministrosymas.com.ve/ml/rastreo el usuario pueda colocar su numero de cedula y al dar click en buscar sea procesado com resultado un resumen del status del envio de su articulo, de mas esta decir que el STATUS forma parte de una columna adicional que es cambiada de manera manual desde google drive, mi consulta mas concreta seria ¿se podra hacer este tipo de consulta? donde el usuario coloque su numero de cedula de identidad y al dar click en buscar le sea mostrado el status de su envio.

      Eliminar
    3. Vale. Ahora entendí mejor.
      Sí que se puede hacer, pero no es fácil explicarte un sistema detallado para tu caso concreto. Se trata de incorporar en el apartado que escribe los datos (la lectura sería la misma) un campo que recogería el dato que mete el cliente para consultar su pedido concreto desde la página web y que filtraría todo lo leído por ese dato antes de mostrarlo.
      Aquí tienes una aplicación que hice con diversos filtros y por tanto más compleja que lo que quieres. Viendo el código fuente podrás observar más o menos esto que antes intenté explicar someramente: http://www.baserecursoseducacionsocial.blogspot.com

      Eliminar
    4. Ok, gracias por responder, desde ya estoy viendo el codigo fuente para tratar de interpretar y entender como hacerlo..!

      Eliminar
    5. Saludos, hermano disculpa, he leido y comprendido parte del codigo pero lo mas importante no lo he podido hacer, y es la publicacion del feed json del archivo spreadsheets Google Drive, a mi no me aparece la opcion de publicar como lo he visto en otros manuales donde aparece un cuadro de dialogo que pregunta como quiere que se publique en la web a mi solo me aparece publicar y me da un html que es este: https://docs.google.com/spreadsheets/d/13zjoiqs9KxnNCKS-JwU193Ay8aYMOUKGACoH-h7bXbQ/pubhtml?gid=473796339&single=true no se si puedas ayudarme a como hacer que se publique como un feed json, gracias nuevamente de antemano

      Eliminar
    6. Creo recordar que ahora sale como "Compartir" en un botón arriba a la derecha. Igualmente la opción es "Público".

      Eliminar
    7. Hola he empezado a comprender parte del codigo llevo escrito una parte, te lo dejo aca y si esta en tu posibilidad de corregir si voy cometiendo errores estaré agradecido

      Codigo del JavaScript y Html en https://docs.google.com/document/d/1Bo_qRSQlqRmTnnqk93iHQ0XohXzZdlSyubnuFFNb96w/edit?usp=sharing

      Eliminar
    8. No lo está José. No está entre mis posibilidades actuales poder hacer un seguimiento de lo que intentas hacer. Lo siento.

      Eliminar
    9. Hola Oloman.
      He estado mirando este código (los 3 post del mismo) y no lo comprendo muy bien.
      Como tengo un blog de un equipo de fútbol, me gustaría hacerme una hoja de cálculo en la que cada línea tuviera las estadísticas de cada jugador. Algo como esto:
      Jugador: Manolo | Goles=2 | Tarjetas Amarillas 3 | Tarjetas Rojas 1...
      Jugador: Carlos | Goles=5 | Tarjetas Amarillas 0 | Tarjetas Rojas 0...
      y como mi blog va a contener una página estática para cada jugador me vendría fenomenal poder cargar los datos de la línea de ese jugador en la página del mismo y así sólo tengo que retocar la hoja de cálculos en lugar de tener que ir metiendo los datos manualmente página por página, jugador a jugador.
      ¿Que tendría que insertar en la página de cada jugador para que sólo leyera los datos de su fila?

      Gracias por atenderme en verano :P

      Eliminar
    10. La hoja de cálculo sería como dices, una línea para cada jugador. Lo que tendrías que modificar sería la función MostrarCitas poniendo un tercer parámetro que sería el nombre del jugador. y luego, dentro de ella, un condicional para que sólo te "escriba" los datos de la fila cuya primera columna coincida con el nombre indicado.

      Eliminar
  8. Ok. Gracias Oloman, voy a ver si me sale y te comento. Si queda bien cuelgo por aquí el código.
    Creo que tengo que cambiar el valor [cual] por el número de la fila que quiero que se lea en la página de cada jugador. ¿Sería así?

    ResponderEliminar
    Respuestas
    1. Más o menos. Tienes que eliminar de este ejemplo las líneas que generan un número aleatorio y luego en
      var cual = alea;
      ...la variable alea tiene que ser realmente el número de fila, que como dije, le puedes hacer llegar como parámetro a la función.

      Eliminar
    2. Estoy intentando hacer la hoja y no me deja publicar como RSS. O le han quitado esa opción o soy demasiado torpe.

      Eliminar
    3. La han quitado. Publica como página web. En el primer desplegable del menú (a la izquierda, Publicar).

      Eliminar
  9. Gracias, pero creo que me rindo.
    Le he dado 40 vueltas y no soy capaz de sacarlo. Además, he ojeado otros post que hay por ahí en inglés y me he terminado de volver loco. Lo he probado en un blog de pruebas y no hay manera de que me salga, no se si por que pillo datos que no son realmente la "key", si es por el tema de no poder publicar como Rss o yo que sé.
    De todas formas, gracias por la ayuda y si decidiera seguir intentándolo (y si lo consigo) ya lo publicaré por aquí.

    ResponderEliminar
    Respuestas
    1. OK, pero no puedo saber dónde está el error ni se me ocurre nada más que añadir a lo ya dicho. Precisamente hace un par de días organicé un asunto de estos y me funcionó perfectamente. Por eso descubrí que ahora no se podía publicar como RSS y que había que hacerlo como Páginas Web, pero el resto del proceso es el mismo.

      Eliminar
  10. Al final me decanto por pedirte presupuesto. Demasiado complicado para mi mente acartonada.

    ResponderEliminar
  11. Hola Oloman, voy a intentar explicar lo que necesito hacer y no lo consigo, pensando que está relacionado con una base de datos como aquí explicas.
    La web la manejamos 5 personas. En la web, inserté unos gadgets HTML/Javascript con unos datos (Titulo, descripción, fecha, lugar y enlace) que tengo que cambiar a mano cada 4-5 días entrando al gadget. Las otras 4 personas no saben como hacerlo, por lo que siempre me toca a mi y me lleva un rato, y aquí viene mi pregunta:
    ¿Puedo subir a Dropbox o Drive un archivo "Datos.txt" que contenga los datos del gadget y recuperarlos desde ese gadget?
    De este modo, cualquiera puede coger en archivo .txt y poner los nuevos datos (Titulo, descripción, fecha, lugar y enlace) y darle a guardar, por lo que automáticamente se verían modificados en la página con los nuevos datos introducidos.
    Muchas gracias por todo

    ResponderEliminar
    Respuestas
    1. La respuesta es sí Jose María. Puedes hacerlo como explico aquí, con una hoja de cálculo de Drive (antes Google Docs). En lugar de citas pones los datos que necesitas y ya está.

      Poder si puedes, claro que sí.

      Eliminar