Hola a todas y todos. Bueno, aprovechando la cuarentena estuve investigando un poco más sobre temas relacionados con la publicación anterior en donde utilizábamos una hoja de cálculos como API, para así poder mostrar información de ésta en una web.

Si no pudiste leerlo y te interesa, a continuación te dejo el enlace:

Crear API con una hoja de cálculos de Google Drive

En las siguientes publicaciones vamos a ver mediante el servicio de Google Apps Script, cómo crear una web y comunicarnos con una hoja de cálculos como base de datos ¡Comencemos!

Crear web

Supongo que se entiende, pero necesitamos tener una cuenta de Google para realizar el siguiente procedimiento (gmail), si no es así, tendrás que crearte una, de lo contrario podés empezar yendo a Drive:

Una vez en Drive podemos crear un proyecto dentro de la unidad raíz o dentro de una carpeta. En cualquier caso para ello debemos ir al botón que se encuentra en la parte superior izquierda de la pantalla Nuevo / Más / y buscar Google Apps Script. Si nunca creaste una aplicación con este servicio, es muy probable que no la tengas. De ser así, el procedimiento será ir a Nuevo / Más / Conectar más aplicaciones.

image by fernando-gaitan.com.ar

En el buscador ingresá: «Google Apps Script» y luego Instalar.

image by fernando-gaitan.com.ar

Una vez instalada la aplicación, vamos a crear nuestro primero proyecto: Nuevo / Más / Google Apps Script.

image by fernando-gaitan.com.ar

Bien, nos creará un archivo de extensión .gs, podemos ponerle un nombre a nuestro proyecto, en mi caso le pondré «Restaurant», porque será la temática que voy a utilizar en las siguientes publicaciones.

image by fernando-gaitan.com.ar

Este tipo de archivos (GAS), nos permite crear código de lado del servidor, como si fuese PHP, Java o cualquier otro tipo de lenguaje de backend. Lo bueno es que es muy similar a Javascript, por lo que si ya estás familiarizado con este último, te resultará muy sencillo.

Primero vamos a crear una función llamada doGet(), la cual va a ejecutarse cada vez que se haga una petición por GET:

function doGet() {
   return HtmlService.createHtmlOutput("Hola mundo");
 }

Publicar web

Para poder crear un deploy, tendremos que hacer lo siguiente: En el menú, vamos a Publicar / Implementar como aplicación web.

image by fernando-gaitan.com.ar

Nos aparecerá una ventana con algunas opciones. Pondremos los valores que se muestran en la siguiente imagen:

image by fernando-gaitan.com.ar

Finalmente pulsamos en el botón: «Deploy»

Aclaraciones:

Finalmente vemos una ventana donde nos va a mostrar el enlace para acceder a nuestra web:

image by fernando-gaitan.com.ar

Copiamos el enlace y lo pegamos en nuestro navegador.

Ver las modificaciones como DEV

Una cosa que es importante aclarar, es que cada vez que realicemos un cambio en el código, para verse impactado tendremos que crear un deploy nuevo. El problema es que obviamente esto no es muy útil en etapas de desarrollo.

Por ejemplo volvamos a nuestro archivo .gs y cambiamos el código:

function doGet() {
   return HtmlService.createHtmlOutput("Hola mundo. Estoy cambiando el código");
 }

Si volvemos a nuestra URL, el cambio NO estará impactado.

Para eso tenemos que ir nuevamente a Publicar / Implementar como aplicación web. Y hacer click en el enlace: «Latest code»

image by fernando-gaitan.com.ar

Podés hacer cambios y recargar el enlace generado para ver los mismos. Sin embargo, es importante que al realizar cambios importantes, vayas haciendo deploy también para que los mismos queden guardados.