Como crear una web dinámica con Google Apps Script

Artículo relacionado con la programación web mediante Google Apps Script

Hace poco descubrimos como se podía servir una página web estática con Google Apps Script, pero realmente la potencia de este lenguaje se revela cuando podemos hacer que el contenido de la web cambie en función de nuestras necesidades.

El caso más claro de esto es cuando queremos mostrar en una web contenido que tengamos en una hoja de cálculo de Drive. Si somos capaces de hacer esto, la hoja de cálculo se transforma en una BBDD que nos permitirá hacer webs de una potencia inimaginable.

Para realizar nuestras páginas dinámicas nos hará falta que el javascript de nuestra página nos pida a la parte del servidor ( google apps script ) que nos dé la información y esta información cuando se devuelve se ha de insertar de alguna manera dentro de la web.

La implementación es sencilla. Basándonos en el ejemplo anterior y en el ejemplo que explicaba como leer información de una hoja de cálculo de Google, solo tenemos que modificar un poco el código para que haga lo que necesitamos ( es tan sencillo que ni tan siquiera vale la pena explicarlo, revisad el código y lo veréis rápidamente como funciona )

Codigo.gs:
function Init()
{
  var spreadsheet  = SpreadsheetApp.openByUrl("https://docs.google.com/spreadsheets/d/1NA63mUiiG_ce3crX3PU_ISp8HwuwyKGRslqn2kyEYQM/edit#gid=0");  //Esta ruta será la que tengas a tu fichero que uses como BBDD
  var sheet        = spreadsheet.getActiveSheet();
  var rows         = sheet.getDataRange();
  var numRows      = rows.getNumRows();
  var values       = rows.getValues();
  var string = "";

  for(var i = 0 ; i < numRows ; ++i)
  {
    var row = values[i];
 
    string += "<p>" + row[0] + "</p>";
 
  }

  return string;
}

//Retorna la página principal
function doGet()
{
  return HtmlService.createHtmlOutputFromFile('index');
}

index.html:
<html>
<head>
<script>
    function Response(string)
    {
       document.getElementsByName("ejemplo")[0].innerHTML = string;
    }
 
    function InitWeb()
    {
       google.script.run.withSuccessHandler(Response).Init();
    }
</script>
</head>

<body>
<h1>
    Titulo de web de ejemplo
</h1>

    <script>
        InitWeb();
    </script>
 
<div name='ejemplo'>
    <p> Loading.... wait</p>
</div>

</body>

</html>


Si refrescáis la web veréis que os sale una pantalla que dice que hacen falta permisos de ejecución (esto es debido a que ahora nuestro script maneja ficheros dentro de drive y le hemos de dar el consentimiento para que realice esta actividad)


Para darle permisos de ejecución solo hemos de darle a Ejecutar > doGet. Esto forzará que salga la siguiente ventana pidiedonos los permisos pertinentes.


Una vez hayaís autorizado la aplicación en la web aparecerá todo el contenido de la primera columna de una hoja de cálculo cualquiera que le hayas puesto para trabajar.

Este ejemplo tan tonto, permite poner las bases para hacer juegos multijugador,  webs multiidiomas, contenido dinàmico, refrescos automáticos de contenido,etc....

Poco a poco iremos abordando estas cuestiones

Nos vemos

NOTA: Si quieres insertar la web que generes en otro sitio tal vez te valga la pena mirar como hacer un iframe de un google apps script

NOTA: Si te ha gustado este post tal vez también te interese este otro sobre templates web

15 comentarios:

  1. Hola. Enhorabuena por tus posts!

    Estoy buscando crear contenido dinámico desde Google Spreadsheets con Google Apps Script para incorporar en Gogle Sites o cualquier otra web, pero mi duda es si el resultado obtenido será SEO friendly. Lo digo por que en alguna ocasión, he analizado el código html resultante y dudo que un crawler sea capaz de interpretar el contenido, ni siquiera las propias arañas de Google.

    ¿Tienes una url a algún ejemplo de página dinámica con GAS para poder analizar el código resultante?

    Muchas gracias

    ResponderEliminar
    Respuestas
    1. Creo que si que es SEO friendly pero sinceramente nunca me he parado a investigar sobre el tema.

      Que te pueda enseñar ahora mismo solo tengo esta web: https://sites.google.com/site/ejemplologin/

      Tengo 5 más pero por diversos motivos no te las puedo enseñar en estos momentos (2 de ellas en breve las pondré públicas, cuando las tenga te aviso)

      Informame de tus investigaciones, que me ha picado la curiosidad ahora :D

      Eliminar
    2. Hola Pako,

      Si entras en tu página https://sites.google.com/site/ejemplologin/, muestras el código fuente de la página, y buscas por cualquiera de las palabras o frases que GAS ha generado de un modo u otro, observarás que en realidad no encuentras esos textos. Esto significa que el contenido mostrado al usuario es difícilmente indexable por un robot de búsqueda.

      Esta observación mia no es del todo concluyente, ya que la última palabra en estos temas siempre la tiene Google como buscador y padre de GAS. En un principio, Ajax no existía para los buscadores y ahora sí, aunque no sé si esta comparación es pertinente.

      Ante la duda y por lo que pudiera pasar, como solución a la petición de un cliente, le genero más de 700 páginas en Google Sites desde hojas de cálculo de de Google, reescribiendo el código html de cada página y actualizándolo periodicamente mediante triggers o a voluntad.

      El resultado de mi script son páginas del tipo http://precios.rehabi-li-tar.com/0002, donde el cóntenido sí es indexable por buscadores, requisito fundamental para este proyecto.

      Eliminar
    3. Gran investigación Ignacio!!!

      Para acabar de comprobarlo debería hacer una pagina con esta tecnologia, no linkarla en ningún sitio que dé mucho tráfico y ver si las visitas aumentan por buscador no?

      Complicado de determinar. Buscaré si hay alguna herramienta para revisarlo.

      Gracias por el trabajo dedicado!!

      Eliminar
  2. Hola Pako,

    Gracias por tu blog, he aprendido un mucho aplicando tus ejemplos. Quisiera saber cómo hacer para que este mismo script varíe su contenido según el nombre de la página Web.

    Por ejemplo, supongamos que el sitio donde incluimos el gadget GAS con tu script fue "sites.google.com/pako/col1", y queremos que el contenido de la segunda columna de tu hoja de cálculo se publique en "sites.google.com/pako/col2", mientras que el contenido de la tercera columna esté en "sites.google.com/pako/col3", ¿cómo es posible hacer este utilizando el mismo script, sin tener que crear versiones del mismo personalizadas para cada página Web?

    Gracias!

    ResponderEliminar
    Respuestas
    1. Si, se puede. Deberia probarlo primero pero a priori deberia de poder aceptar parametros en la url, así que en base a los parametros que te pasaran por la URL deberias de poder hacer lo que quieres. A ver si con un poco de suerte consigo rascar tiempo para hacerte un ejemplo, el tema es interesante.
      Nos vemos!!

      Eliminar
    2. http://googleappscriptsweb.blogspot.com.es/2017/07/como-leer-parametros-de-la-url-con.html A Ver si era esto lo que pedias. Ya dirás algo, nos vemos

      Eliminar
    3. Muchas gracias!!! también pude realizarlo con estas 4 líneas adicionales a tu código de arriba:

      var pagina = SitesApp.getActivePage(); //lee la página desde donde se está ejecutando el gadget GAS

      var ruta = pagina.getUrl(); // extrae la ruta de la página, la idea es que tenga un número secuencial para operarlo en la BBDD

      var identif = ruta.substr(60); // extraigo la parte de la URL que no es numérica, en este caso los 60 caracteres que están antes del último carácter que es el número que nos interesa, pues irá variando

      identif = +identif; // transformo el numero desde formato texto a formato número

      Eliminar
    4. Un poco guarrete, pero si, te funcionaria. El problema es que si quieres usarlo fuera de google sites te dejará de funcionar. Yo optaría más por params en la URL pero si así te funciona y tienes claro que no reusarás el código fuera de sites, adelante! Nos vemos

      Eliminar
  3. Buenas, Pako.

    La verdad es que estoy impresionado por tu blog. Felicidades.

    Te quería hacer una consulta. Soy profesor de lengua en secundaria y últimamente me estoy sorprendiendo por las maravillas que se pueden hacer con GAS. Sin embargo, no tengo conocimientos sobre este lenguaje de programación.

    El caso es que he probado diversas alternativas y tengo varios códigos HTML (prestados, claro) para realizar alguna actividad concreta en clase. Uno de esos códigos es un cubo de 20 caras que, de forma aleatoria, ofrece una de sus caras al clicar en él. He modificado el código para incluir emoticonos en las 20 caras. La verdad es que es fácil descubrir qué cambiar del código HTML para nuestro este propósito. Me imagino que es posible que parte de ese código se extraiga de las celdas de una Hoja de cálculo. No obstante, tras varios intentos, lo logro averiguar cómo aprender a incluir una celda en un lugar concreto del HTML. Por ejemplo, ofrecer una celda para la primera cara del dado. De esta forma, escribir en el resto de celdas (las 20 celdas que llevarán a las 20 caras del dado) para incorporarlas al HTML.

    ¿Me puedes orientar indicándome cómo incluir una celda concreta - pongamos la C2- para la primera cara del dado?

    Este es el script que he modificado:

    https://script.google.com/d/17e75CErt6WWhTa6_8md6Tl6BKRVoGS8YWPsCHNvMydsJQaG2i5tEeLyU/edit?usp=sharing

    Verás que el el código html (extraido de codepen.io) que desde la línea 314 a la 333 están los emoticonos que aparecen al implementarlo como aplicación web.

    Te agradecería cualquier información al respecto. Tengo un proyecto para extender el diseño de los nuevos sites de Google y ofrecerlo al profesorado como recurso. De ahí que quiera simplificar su manejo tomando los datos desde una hoja de cálculo.

    Gracias por tu atención y, de nuevo, te felicito por este blog.

    Un saludo

    ResponderEliminar
    Respuestas
    1. No esta mal la cantidad de código que tienes ahi puesta :D

      La única solución "facil" que le veo es que sirvas todo el código html desde el GAS (copypaste de todo) con la excepción de los dibujos de las caras que los insertes dinamicamente (como aparece en este artículo).

      Ahi donde haya un dibujo ponerle algo del estilo " + values[1][3] + ".

      Siendo values una matriz que provenga del spreadsheet (var values = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet().getDataRange().getValues()).

      Espero haberte servido de guia.

      Gracias por leer el blog.

      Nos vemos

      Eliminar
    2. Gracias por tu respuesta.

      Sin embargo, no me queda claro cuando dices "sirvas todo el código html desde el GAS (copypaste de todo)"

      ¿Te refieres a que tengo que incluir el código HTML dentro de codigo.gs o seguir con un Index.html a través de doGet()?

      Además, me surge otra duda con " + values[1][3] + " donde están los dibujos... Si están dentro de html o de codigo.gs?

      Como ves, no estoy muy puesto en el tema.

      Agradezco mucho tu atención.

      Un saludo

      Eliminar
    3. Tranquilo que nadie nace enseñado. Lo que has hecho ya tiene su mérito.

      Yo me referia a servir todo el html desde el codigo.gs. De esta manera podrias modificar el html antes de servirlo. (en el fondo lo que sirves como html no es mas que un string de texto que puedes modificar como quieras).

      Lo que te he puesto del values[1][3] estaria dentro de tu codigo gs justo en el momento de crear el string que se usará como html. Como lo que tu quieres es que el html sea dinámico, lo que has de hacer es crearlo dinamicamente desde el gs.

      Es un poco enrevesado explicarlo, pero realmente lo que pides no es extremadamente fácil (tampoco es demasiado complejo :), pero tiene su miga).

      Avisame si no acabas de verlo.

      Nos vemos

      Eliminar
  4. Hola buenos dias,
    Yo tengo una base de datos en Hojas de calculo de google, me gustaria crear una web de consulta donde ingresando la cedula pueda ver los datos.. Gracias

    ResponderEliminar
    Respuestas
    1. Asi si más te diré que no haré nada :D

      Si tienes algo de código hecho puedo ayudarte donde tengas problemas.

      Si necesitas ayuda más profesional puedes contactarme en Fiverr (en la barra lateral derecha verás el banner) y explicarme lo que necesitas.

      Nos vemos

      Eliminar

Tal vez te interese

Entradas populares