Como crear una web con Google Apps Script

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

Una de las grandes ventajas de GAS es que no solo nos permite procesar información que tengamos en Drive sino que nos permite visualizarla de forma agradable en forma de página web.

Esto nos permite recoger información de diferentes hojas de cálculo, procesar, filtrar y cruzar datos y dar una salida en forma de web con solo la información que nos interesa.

1. Lo primero que tendremos que hacer es crear un sitio en google sites. Creo que es lo bastante fácil y hay los suficientes tutoriales en Internet como para que lo podáis hacer solos.

2. Una vez tenemos el sitio creado tenemos crear nuestra secuencia de comandos de Google App Script. Para crear esta secuencia de comandos debemos de hacer los siguientes pasos:
 
    2.a Dale a herramientas > Administrar Sitio

     2.b En el menú de la izquierda dale a "Secuencia de comandos de Apps"

      2.c  Clickea encima de "Añadir nueva secuencia de comandos" en el menú superior

      2.d  En el menú que aparecerá selecciona "Proyecto en blanco"

      2.e  Copia en el archivo codigo.gs el siguiente código:
//Retorna la página principal
function doGet()
{
    return HtmlService.createHtmlOutputFromFile('index');
}

         NOTA: La función doGet es la función que por defecto llama Google para obtener la página web. El fichero index es el fichero donde contenemos nuestro html a mostrar.

    2.f  Ahora toca crear el archivo index.html. Dale a Archivo >  Nuevo > Archivo HTML


     2.g Dentro del archivo index.html copia el siguiente código:

<html>
<head>
</head>

<body>
<h1>
    Titulo de web de ejemplo
</h1>
<p> Esto es el contenido de una web de ejemplo servida desde google sites y google app script  </p>
</body>

</html>

    2.h Guarda el fichero codigo.gs y el fichero index.html.  Dale a Publicar> Implementar como aplicación web

    2.i En el menú emergente, dale a guardar nueva versión y al botón implementar.


    3. a Ahora que ya tenemos el script preparado solo tenemos que encastarlo dentro del google site. Para hacer esto deberemos darle al bóton de editar página.

    3. b Una vez ya estamos en el menú de edición de la página deberemos darle a Insertar > Apps Script y seleccionar el script que hemos creado antes.




Y con esto ya tenéis una web estática creada desde Google Apps Script. En próximos capítulos complicaremos este concepto creando webs dinámicas cuyo contenido varíe en función de que usuario lo está mirando.


Nos vemos

NOTA: Si este tutorial se te queda corto, puedes mirar un tutorial más nuevo para hacer web logins con Google Apps Script

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

10 comentarios:

  1. Muy buenos los ejemplos con Google Apps Script que incluiste. Si querés pasar por "probarnocuestanada.com" estoy haciendo unas pruebas sobre esta misma plataforma. Arme unos script para genera las páginas del Google Site dinámicamente y comparto el código...costo bastante pero estuvo bueno... Exitos

    ResponderEliminar
  2. ¿Hasta que punto son SEO friendly estas páginas?

    ResponderEliminar
  3. Ignacio, te repites :D
    http://googleappscriptsweb.blogspot.com.es/2015/03/como-crear-una-web-dinamica-con-google.html

    Sinceramente no puedo asegurar que sean SEO friendly.
    Tengo un proyecto en marcha precisamente para analizarlo y estar seguro de ello.
    Si tu descubres algo y puedes compartirlo creo que nos harás un gran favor a todos.

    Nos vemos!!

    ResponderEliminar
  4. buenas...estoy tratando de editar mi script, pero no logro encontrar el boton "administrar sitio", es probale que necesite la version paga de gsuite?
    gracias

    ResponderEliminar
    Respuestas
    1. Hola,

      No, deberias de poder acceder. Otra cosa es que google haya cambiado la estructura de donde está todo.

      Has probado a crear el site con la plataforma antigua (creo que aún deja crear sites de esta manera)

      Ya me diras

      Nos vemos

      Eliminar
  5. Hola, gracias por la data, pero hago todo y aparece un recuadro gris, cuando lo ejecuto en un navegador sin logeo de google... que puede ser? gracias y saludos!

    ResponderEliminar
    Respuestas
    1. Si con logueo funciona bien y sin logueo no funciona es que has ejecutado incorrectamente la web.

      Recuerda que cuando sirves la web tienes varias opciones:
      - Con los permisos como si fueras tu mismo
      - Con los permisos de usuario de quien ejecuta la web

      Si lo has puesto con permisos de usuario y no estas logeado no te funcionará.

      Ya me diras como te va

      Cualquier cosa estoy aqui

      Nos vemos

      Eliminar
  6. Hola, como puedo hacer que el resultado de los datos que se muestran en la web no sean una string y respeten el formato de la tabla de googlesheets?

    ResponderEliminar
    Respuestas
    1. Si quieres el mismo formato que en el google sheets deberás implementar dicho formato con HTML/CSS. Lo que estas sirviendo es una web, el como quieres que se vea tendrás que implementarlo en la web que estes sirviendo. Comentame como te va! Nos vemos

      Eliminar
  7. hola
    como podria hacer un menu que me redirija de index a Alumnos y viceversa

    ResponderEliminar

Tal vez te interese