Construyendo una simple interface desde GAS – Pt 2

Estándar

En esta segunda entrega, crearemos una sencilla interfaz de usuario en GAS utilizando el HTML Service, para ello, crearemos un proyecto en blanco, después de ello haremos lo siguiente:

Ir a Archivo=>Nuevo=>Archivo HTML

Se nos solicitara un nombre de archivo, al cual llamaremos index, damos clic en aceptar y escribimos el siguiente código:

<div id=”formulario”&gt
<form&gt
<input type=”email” name=”email” id=”email” placeholder=”Introduce tu e-mail”&gt
<input type=”submit” value=”Registrarse”&gt
</form&gt
</div&gt

En este ejemplo queremos que el usuario introduzca su email, lo cual normalmente requiere algún tipo de validación, no queremos que el usuario introduzca algo que no sea un email. Esta simple validación por lo general se lleva a cabo del lado del cliente usando JavaScript, lo cual relativamente es complicado, pero estamos de suerte ya que nos podemos ahorrar ese dolor de cabeza empleando HTML5. Si, así es! HTML5 es soportado al utilizar el HTML Service en GAS. Esto significa que la validación se lleva acabo empleando la propiedad type=”email” en el elemento de entrada del formulario.

Otro aspecto a remarcar para quienes están empapados en la creación de páginas web, es que en GAS no se debe emplear las etiquetas <head> ni <body>, ya que si se usan podrían afectar el desempeño del script.

Ahora agregaremos un elemento para agradecer al usuario el haberse registrado, para ello emplearemos la siguiente etiqueta justo antes del cierre de la etiqueta div:

<span id=”gracias”>Gracias!</span>

Ahora… ¿qué debemos hacer para que nuestra Web App funcione? En el archivo código.gs escribimos el siguiente código:


function doGet() {

var html = HtmlService.createHtmlOutputFromFile('index').setSandboxMode(HtmlService.SandboxMode.NATIVE).setTitle('Mi Web App');

return html;

}

Como había mencionado anteriormente siempre se debe emplear una función llamada doGet cuando estemos creando una Web App, dentro de esta función están dos líneas de código, en la primera línea creamos una variable llamada html a la cual le asignamos un objeto HTML Service, el crea una salida HTML tomando como template nuestro archivo index, se ajusta el modo de la caja a NATIVE, se le asigna un título y por último se regresa ese objeto al navegador.

Por el momento esto sería todo, más adelante mostrare como interactuar con los eventos del lado del cliente y del servidor usando como base esta misma aplicación.

Anuncios

Construyendo una simple interface desde GAS – Pt 1

Estándar

Una UI (user interface – interface de usuario), es lo que uno ve al prender una computadora, puede ser una interfaz que hace uso de ventanas o puede ser el cursor parpadeante desde una consola de comando. Por lo general cuando hablamos de la creación interfaces de usuario nos referimos a la parte con la cual el usuario estará en interacción con nuestra aplicación (texto a leer, imágenes a visualizar, cajas de texto, botones a pulsar, etc…). Hoy en día las interfaces Web se crean haciendo uso de HTML.
Pero en GAS existen al menos tres formas de crear una interfaz:

  • Incrustada en un “Google Doc” o una ” Google Sheet”
  • Incrustada en un “Google Site” como un gadget
  • Como una página Web (la cual llamaremos Web App)

Por el momento le veo mayor aplicación a las Web Apps. Para poder construir la interfaz en este tipo de scripts, podemos valernos de dos alternativas que Google pone a nuestro alcance:

  • HTML Service
  • UI Service

Continuar leyendo

Google Apps Script – Video Turoriales

Estándar

Bueno… ya tiene varias semanas que no escribo sobre esta práctica e ingeniosa tecnología que nos permite correr scripts en los servidores de google y que nos dan acceso directo a los servicios que este ofrece, entre los cuales están: Sheets, Docs, Forms, Sites, Drive, Gmail, Calendar, Contacs, Groups, Maps, Translate.

Les comparto los siguientes tres links a videos en español que he encontrado por mi cuenta, por supuesto que existen mas videos, pero estos están en ingles… mas adelante espero escribir sobre los proyectos que he desarrollado por mi cuenta.

Introducción a Google Apps Script – Programando macros en la nube

Estándar

Excel es una herramienta increíble y flexible, de eso no cabe la menor duda. Creada originalmente para poder analizar datos, sin embargo hoy en día se le dan muchos más usos que solo ese. Pero por más flexible y poderoso que sea no quiere decir que la respuesta a todo sea Excel. A lo largo de estos años he aprendido que un programador debe valerse de varias herramientas a su alcance y en mi caso Excel es una herramienta, quizás la que más utilizo. Pero ya desde hace algunos años las aplicaciones se están desarrollando para ambiente web, donde a veces Excel se ve limitado en algunas tareas, pero.. ¿habrá alguna herramienta que pudiera ser similar a programar macros en Excel y que pudiera servir para programar aplicaciones Web? Por supuesto! La respuesta es Google Apps Script.

Google Apps Script (GAS) nos permite desarrolla scripts que corren en los servidores de Google utilizando el lenguaje de programación JavaScript y con el cual podemos hacer usos de todos los servicios y Apis de Google de manera relativamente fácil. Por ejemplo poder crear mapas, interactuar con documentos de Google Drive entre otras cosas más, y lo que es mas importante poder combinar el poder de esta tecnología con VBA/Excel.

Por el momento comparto con ustedes esta serie de tutoriales que encontré completamente en español y que muestran ejemplos prácticos y fáciles de implementar. GAS es gratuito, solo necesitan contar con una cuenta en Google.

Google API Chart – La otra forma de graficar

Estándar

Bueno… no se si sepan pero mi trabajo actual es de programador Python Jr y desarrollo reportes web por medio de programación CGI.

Hace poco me vi en la necesidad de graficar el avance de una carga de un archivo csv a una base PostgreSQL y como nuestro Python no cuenta con una librería propia para la creación de gráficas me vi en el necesidad de buscar algunas librerías externas u alguna otra herramienta que pudiera ser de ayuda en mi labor. Encontré varias pero la que mas llamo mi atención por su simplicidad fue la Google API Chart la cual solo hay que formar una URL con los parámetros del tipo de gráfico y los datos a graficar y listo ya tenemos nuestro gráfico de manera instantánea.  Obviamente hay que contar con una conexión a internet.

Aqui hay un ejemplo de una gráfica: Grafica

Si la ven, tal vez en un principio se pregunten: ¿de que me sirve? Pues de mucho, si se ponen a pensar en las posibilidades. En mi caso ya podía  graficar el avance, solo necesitaba estar construyendo un nuevo URL y actualizarlo en mi navegador para lograr visualizar el avance de forma animada. Aqui pueden ver el ejemplo: Avance Animado

Wow! excelente, no?

Ahora esto no solo se puede aplicar a programación web exclusivamente también se puede aplicar a la programación de macros donde se tengan que graficar reportes o avances y asi distribuir nuestro gráficos sin que nuestros clientes cuenten con MS-Excel, solo se les  envía la url y listo ellos podrán visualizar el avance.

Aquí les dejo un ejemplo utilizando macros en Excel: google api chart

También se pueden construir gráficos de lineas, barras, pastel, venn, puntos, etc.

Aquí una referencia mas completa en español: referencia

Espero les sea de ayuda.