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

4 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

Related Posts Plugin for WordPress, Blogger...