Diseño y construcción de una aplicación básica con Google Apps Script

Post date: 31-mar-2017 19:54:44

By David Mencías - Consultor de soluciones Cloud.

Uno de los servicios de mayor utilidad que se encuentra dentro de la plataforma de G Suite es Google Apps Script. Como administrador de G Suite hace un par de años me encontré con algunas citas que hacían referencia al uso de esta herramienta cuando buscaba un método para automatizar el archivado de correos importantes con adjuntos en Google Drive.

Luego de leer un poco sobre la documentación del servicio entendí cómo pueden ejecutarse ciertas tareas elementales solicitadas por los usuarios y que creía que eran imposibles de poder realizarse hasta ese entonces sin la incorporación de software, gadgets o pluggins desarrollados por terceros, no estoy en contra el uso de estos utilitarios sin embargo al momento de revisar los aspectos concernientes a la seguridad de nuestro dominio mientras menos privilegios se conceda a nuestra información, menor será el riesgo a pérdida o modificación de la misma. Con Apps Script el administrador de G Suite no únicamente podrá crear aplicaciones que potencialicen el uso de Gmail, Calendar. Drive&Docs y Sites, sino que también podrá crear páginas web completas, aplicaciones para móviles, automatizar ciertas tareas a través de workflows entre otras. Veamos a continuación algunas características:

Apps Script nos proporciona una interfaz de trabajo con un editor web con todas las características que podríamos esperar. Conocimientos elementales de HTML, CSS y JavaScript serían aconsejables, sin embargo no son indispensables. En esta entrada explicaré los primeros pasos para acceder al entorno de desarrollo (IDE) y poner en marcha nuestro script.

Una interfaz de usuario (UI) es todo aquello con lo que podemos interactuar y nos permite llevar a cabo una tarea, por ejemplo al encender la pc e iniciar Windows o IOs, la primera pantalla que nos muestra el escritorio es una UI. Cuando construimos una UI en Google Apps Script, existen 3 posibilidades para presentarla al usuario y son: 1) En un contenedor como en un Google Doc o Sheet, 2) En un Google Site como un gadget, ó 3) Como una página web. Vamos a revisar la primera opción y a crear nuestro primer script desde un Google Sheet. En este ejemplo voy a construir una aplicación sencilla que me permita llevar el control de mis gastos y almacenar la información en un Spreadsheet.

Procedemos a crear un nuevo Spreadsheet y del menú seleccionamos “Herramientas”, luego “Editor de secuencia de comandos”

El entorno de desarrollo se muestra similar a lo que es un Spreadsheet o un Google Doc. Colocamos un nombre para nuestro nuevo proyecto. Para construir nuestra aplicación vamos a utilizar un servicio de Apps Script denominado HTML que justamente tiene que ver con el lenguaje del mismo nombre. Observamos en nuestro nuevo proyecto en el área de navegación que se ha creado un archivo con extensión .gs. En este tipo de archivos es donde escribiremos nuestro código. Por otra parte Apps Script nos posibilita utilizar archivos HTML en los cuales escribiremos el código HTML para presentar la aplicación. Colocar código en archivos separados en función del tipo de código tiene una serie de beneficios entre los más importantes el orden y la posibilidad de reutilizar código. Hacemos clic sobre el menú archivo y seleccionamos “Nuevo” y luego “Archivo HTML”.

A este archivo lo vamos a llamar “index” y a continuación borramos el código de muestra y colocamos el siguiente código en su interior.

<div>

<form id="registro_gastos">

<select name="categoria" id="categoria">

<option value="servicios">Servicios</option>

<option value="transporte">Transporte</option>

<option value="combustible">Combustible</option>

<option value="alimentos">Alimentos</option>

<option value="varios">Gastos varios</option>

</select><br><br>

<textarea rows="1" cols="40" name="descripcion" id="descripcion" placeholder="Descripción"></textarea><br><br>

<input type="number" name="valor" id="valor" placeholder="Valor"><br><br>

<input type="submit" id="button" value="Enviar">

</form>

</div>

Lo que hemos hecho hasta el momento es escribir un poco de HTML para presentar en nuestra UI una lista desplegable que contenga las diferentes categorías de nuestros gastos, luego un área de texto para ingresar una descripción, una caja de texto para ingresar un valor y finalmente un botón para registrar nuestra información.

Para presentar este código necesitamos invocarlo desde una función que va a estar ubicada en el archivo “Código.gs”. Hacemos clic sobre el archivo en la sección de navegación, borramos el código de ejemplo y escribimos el siguiente código:

function doGet() {

var html = HtmlService.createTemplateFromFile('index').evaluate()

.setTitle('Registro de gastos')

.setSandboxMode(HtmlService.SandboxMode.IFRAME);

return html;

}

No es la intención de esta entrada explicar a detalle cada una de las líneas de código que se muestren en los diferentes archivos durante el ejemplo sino más bien explicar de forma general las diferentes actividades que se desencadenan como consecuencia de su presencia.

Guardamos los cambios que acabamos de realizar tanto en el archivo Código.gs cómo en el archivo index.html y estamos a un paso de presentar nuestra aplicación en un navegador, lo único que necesitamos es publicarla para lo cual accedemos por el menú “Publicar”, escogemos la opción “Implementar como aplicación web” y el la pequeña ventana que se presenta hacemos clic sobre el botón “Implementar”. En la siguiente ventana hacemos clic sobre el enlace “último código” en azul y nuestra aplicación se abre por primera vez en el navegador.

Nuestra aplicación por el momento no hace nada y se muestra un tanto desaliñada. Vamos pues a emplear un lenguaje popular conocido como CSS para hacer que los elementos de nuestro formulario se vean mejor. Ahora que la idea de separar y organizar código en función de su naturaleza se encuentra comprendido de mejor forma, hacemos clic nuevamente sobre el menú Archivo, luego “Nuevo” y seleccionamos “Archivo HTML”. Por el momento no existe una opción específica para crear archivos CSS por lo que este tipo de archivo nos servirá. Colocamos el nombre “CSS” a nuestro nuevo archivo, borramos el código de ejemplo y copiamos en su interior el código que se muestra a continuación:

<style>

body {

margin: 50;

padding: 0;

}

#valor {

width: 30%;

height: 60px;

padding: 1px 15px;

box-sizing: border-box;

border: 2px solid #ccc;

border-radius: 4px;

background-color: #f8f8f8;

resize: none;

}

#categoria {

width: 30%;

height: 60px;

padding: 4px 15px;

box-sizing: border-box;

border: 2px solid #ccc;

border-radius: 4px;

background-color: #f8f8f8;

resize: none;

}

#descripcion {

width: 30%;

height: 120px;

padding: 12px 15px;

box-sizing: border-box;

border: 2px solid #ccc;

border-radius: 4px;

background-color: #f8f8f8;

resize: none;

}

#thank_you {

font-family: Helvetica, sans-serif;

font-size:22px;

color: #008CBA;

}

#button {

background-color: #008CBA; /* Blue */

border: none;

color: white;

padding: 15px 32px;

text-align: center;

text-decoration: none;

display: inline-block;

font-size: 22px;

}

</style>

Para que esté codigo sea reconocido y entendido por nuestro script necesitamos hacer una llamada del nuevo archivo “CSS” desde el archivo “index.html”. Al final del archivo “index.html” colocamos el siguiente código:

<?!= HtmlService.createHtmlOutputFromFile('CSS').getContent(); ?>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">

</script>

Guardamos los cambios, vamos nuevamente por menú “Publicar”, “Implementar como aplicación Web” y datos clic sobre el botón “Actualizar”, ahora en la nueva ventana hacemos clic sobre el enlace en azul “último código” y observamos que la apariencia de nuestra interfaz ha mejorado considerablemente.

Tenemos lista la interfaz, ahora necesitamos que la información se guarde en nuestra hoja de cálculo. En el archivo “index.html” copiar y pegar las siguientes líneas:

<script>

function preventFormSubmit() {

var forms = document.querySelectorAll('form');

for (var i = 0; i < forms.length; i++) {

forms[i].addEventListener('submit', function(event) {

event.preventDefault();

});

}

}

window.addEventListener('load', preventFormSubmit);

</script>

<script>

$( document ).ready(function() {

$( "#registro_gastos" ).submit(function() {

google.script.run.withSuccessHandler(function(ret){

$( "#thank_you" ).show();

$("#registro_gastos").slideUp();

console.log(ret);

}).addToSheet(this);

});

return false;

});

</script>

Entre el tag </form> y el tag </div> que teníamos ya escrito, escribimos la siguiente línea:

<span id="thank_you" hidden="true">El registro se ha guardado.</span>

Las líneas que hemos anexado recogen la data de nuestro formulario y lo envían hacia la función “addToSheet” para su registro.

En el archivo “Código.gs” vamos a crear la función “addToSheet”

function addToSheet(form){

var ss = SpreadsheetApp.openByUrl(

'https://docs.google.com/spreadsheets/d/1olS5T7jHrXRjDzqRnMj1GKFaL_v9ARVE83R0ZvofdJw/edit#gid=0')

.getSheets()[0];

var range = ss.getRange(ss.getLastRow()+1, 1, 1, 4);

var values = [[new Date(), form.categoria, form.descripcion, form.valor]];

range.setValues(values);

}

Nótese la línea que contiene:

'https://docs.google.com/spreadsheets/d/1olS5T7jHrXRjDzqRnMj1GKFaL_v9ARVE83R0ZvofdJw/edit#gid=0'

Esta línea deberá ser reemplazada con la url del Spreadsheet que fue creado al inicio del ejemplo.

Refiriéndonos a este mismo Spreadsheet vamos a escribir los siguientes campos en su cabecera:

Nuestro script se encuentra listo. Lo ejecutamos una última vez a través del menú Publicar. Apps Script en esta ocasión solicitará acceso para administrar nuestras hojas de cálculo. Hacemos clic sobre el botón “Revisar permisos”. Se desplegará una nueva ventana que nos indica que Apps Script requiere permisos de Consulta y administración de nuestras hojas de cálculo. Hacemos clic sobre el botón “Permitir” y finalmente clic sobre el enlace en azul “ultimo código”

Ingresamos datos de prueba y al hacer clic sobre el botón “Enviar” comprobamos que la data ingresada se guarda en cada ocasión en nuestro Spreadsheet.

A continuación el código completo de los archivos “Código.gs”, “index.html” y “CSS”

Código.gs

function doGet() {

var html = HtmlService.createTemplateFromFile('index').evaluate()

.setTitle('Registro de gastos')

.setSandboxMode(HtmlService.SandboxMode.IFRAME);

return html;

}

function addToSheet(form){

var ss = SpreadsheetApp.openByUrl(

'https://docs.google.com/spreadsheets/d/1j9QpPsvvJzPUpL1fZgAARwR_KqgkNu9pVcxCyTOl6QI/edit#gid=0')

.getSheets()[0];

var range = ss.getRange(ss.getLastRow()+1, 1, 1, 4);

var values = [[new Date(), form.categoria, form.descripcion, form.valor]];

range.setValues(values);

}

index.html

<div>

<form id="registro_gastos">

<select name="categoria" id="categoria">

<option value="servicios">Servicios</option>

<option value="transporte">Transporte</option>

<option value="combustible">Combustible</option>

<option value="alimentos">Alimentos</option>

<option value="varios">Gastos varios</option>

</select><br><br>

<textarea rows="1" cols="40" name="descripcion" id="descripcion" placeholder="Descripción"></textarea><br><br>

<input type="number" name="valor" id="valor" placeholder="Valor"><br><br>

<input type="submit" id="button" value="Enviar">

</form>

<span id="thank_you" hidden="true">El registro se ha guardado.</span>

</div>

<?!= HtmlService.createHtmlOutputFromFile('CSS').getContent(); ?>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">

</script>

<script>

function preventFormSubmit() {

var forms = document.querySelectorAll('form');

for (var i = 0; i < forms.length; i++) {

forms[i].addEventListener('submit', function(event) {

event.preventDefault();

});

}

}

window.addEventListener('load', preventFormSubmit);

</script>

<script>

$( document ).ready(function() {

$( "#registro_gastos" ).submit(function() {

google.script.run.withSuccessHandler(function(ret){

$( "#thank_you" ).show();

$("#registro_gastos").slideUp();

console.log(ret);

}).addToSheet(this);

});

return false;

});

</script>

CSS

<style>

body {

margin: 50;

padding: 0;

}

#valor {

width: 30%;

height: 60px;

padding: 1px 15px;

box-sizing: border-box;

border: 2px solid #ccc;

border-radius: 4px;

background-color: #f8f8f8;

resize: none;

}

#categoria {

width: 30%;

height: 60px;

padding: 4px 15px;

box-sizing: border-box;

border: 2px solid #ccc;

border-radius: 4px;

background-color: #f8f8f8;

resize: none;

}

#descripcion {

width: 30%;

height: 120px;

padding: 12px 15px;

box-sizing: border-box;

border: 2px solid #ccc;

border-radius: 4px;

background-color: #f8f8f8;

resize: none;

}

#thank_you {

font-family: Helvetica, sans-serif;

font-size:22px;

color: #008CBA;

}

#button {

background-color: #008CBA; /* Blue */

border: none;

color: white;

padding: 15px 32px;

text-align: center;

text-decoration: none;

display: inline-block;

font-size: 22px;

}

</style>