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
NOTA: Si ya controlas la creación de webs con Google Apps Script tal vez te interese como comunicar javascript con Google Apps Script
Hola. Enhorabuena por tus posts!
ResponderEliminarEstoy 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
Creo que si que es SEO friendly pero sinceramente nunca me he parado a investigar sobre el tema.
EliminarQue 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
Hola Pako,
EliminarSi 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.
Gran investigación Ignacio!!!
EliminarPara 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!!
Hola Pako,
ResponderEliminarGracias 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!
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.
EliminarNos vemos!!
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
EliminarMuchas gracias!!! también pude realizarlo con estas 4 líneas adicionales a tu código de arriba:
Eliminarvar 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
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
EliminarBuenas, Pako.
ResponderEliminarLa 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
No esta mal la cantidad de código que tienes ahi puesta :D
EliminarLa ú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
Gracias por tu respuesta.
EliminarSin 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
Tranquilo que nadie nace enseñado. Lo que has hecho ya tiene su mérito.
EliminarYo 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
Hola buenos dias,
ResponderEliminarYo 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
Asi si más te diré que no haré nada :D
EliminarSi 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
Mucho gusto LordPakus, lo felicito por el post. Creo que contiene algo de lo que necesito. Quiero tomar los valores de las celdas de una GoogleSheet pero que en mi blog se muestren como texto nada más. He probado hacer un iframe pero el problema es que mantiene el formato de tabla. Yo lo que quiero es que el texto que aparece en cada celda, poder mostrarlo en el blog como texto normal, para que se acomode bien a post. Dime si eso es posible. Muchas gracias.
ResponderEliminarRecuerda que cuando haces un iframe es como si hicieras una fotografia de una web y la incrustaras en tu web. No es factible ajustar el contenido de un iframe a una estructura html que tengas en la web padre.
EliminarAparte de eso, lo que me comentas no seria más obtener el texto de las celdas y ponerlo en un html como te interese.
Si quieres ponte en contacto conmigo y lo hablamos: https://www.tutorialesgoogleappscripts.com/p/como-contratar-mis-servicios-de.html
Hola buenos días no tengo practica ni conocimiento profundo en el tema, pero soy profe en una escuela y estoy haciendo un proyecto personal ad honoren para esta.Trato de relacionar un archivo sheet de asistencia de alumnos (lista dinámica) con webapps a través de GAS. he encontrado proyectos para orientarme, pero nada muy parecido para adaptar el código. El objetivo final es poder validar el usuario que toma lista de asistencia en clase y levantar esta lista dinámica sin compartir el archivo ... lo que puedan colaborar
ResponderEliminarNo tengo demasiado tiempo libre, pero los docentes me teneis el corazón robado :D. Enviamne lo necesario en este link: https://www.tutorialesgoogleappscripts.com/p/como-contratar-mis-servicios-de.html e intentaré ponerme en contacto contigo. No te aseguro nada pero algo podremos hacer.
Eliminar