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

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s