Tutorial Google App Script: Ejemplo de formulario html y base de datos Google Spreadsheet

Jordi Rosell

Tradicionalmente, las apliaciones web que hemos desarrollado se han impelementado en infraestructuras cliente-servidor. El paradigma ha sido el de tener servidores propios que reciben las peticiones de los navegadores de nuestros usuarios. Con el creciente uso de frameworks javascript, cada vez más se implementan webs que son sencillamente sitios webs estáticos y que no requiren de nada más que servir código HTML, estilos CSS e imágenes.

Github pages permite el alojamiento web de sitios web estáticos de forma totalmente gratutita para repositorios públicos que tengamos. Una de los inconvenientes principales es el de no poder guardar datos de forma permanente en una base de datos o el de tener cierta interactividad con el servidor. Ej: enviar emails.

Con este artículo vamos a ver un ejemplo de cómo un sitios web estático podrian guardar información en un Google Spreadsheet.

1. Crea un Google Spreadsheet y su Google Apps Scripts asociado

Puedes crear un Google Spreadsheet en blanco desde sheets.new. Ponle un nombre descriptivo, por ejemplo el nombre de tu web y el tipo de formulario que quieres implementar. Ej: midominio.com – Formulario de contacto

Desde la opción del menú Herramientas, selecciona Editor de secuencia de comandos. Te recomiendo que pongas el mismo nombre al Google Apps Scripts que al Google Spreadsheet anterior para poder localizarlos rápidamente.

2. Copia el código y personaliza los campos

A continuación, puedes copiar siguiente código y copiarlo en tu Google Apps Script.


var SHEET_NAME = "Sheet1"; // Enter sheet name where data is to be written
var inputFields = ["nombre", "email", "comentarios"];
var SCRIPT_PROP = PropertiesService.getScriptProperties();
function doRequest(e) {
var lock = LockService.getPublicLock();
lock.waitLock(30000); // wait 30 seconds before conceding defeat.
try {
var doc = SpreadsheetApp.openById(SCRIPT_PROP.getProperty("key"));
var sheet = doc.getSheetByName(SHEET_NAME);
var lastColumn = sheet.getLastColumn();
if(lastColumn==0){
sheet.getRange(1, 1, 1,inputFields.length).setValues([inputFields]);
}
var headers = sheet.getRange(1, 1, 1, sheet.getLastColumn()).getValues()[0]; //getRange(row, column, numRows, numColumns)
var nextRow = sheet.getLastRow()+1;
var row = [];
for (i in headers){
if (headers[i] == "Timestamp"){ // special case if you include a 'Timestamp' column
row.push(new Date());
} else {
if(headers[i]){
row.push(e.parameter[headers[i]]);
}
}
}
sheet.getRange(nextRow, 1, 1, row.length).setValues([row]);
return HtmlService.createHtmlOutput(JSON.stringify({"result":"success", "data": e}));
} catch(e){
return ContentService
.createTextOutput(JSON.stringify({"result":"error", "error": e}))
.setMimeType(ContentService.MimeType.JSON);
} finally {
lock.releaseLock();
}
}
function doPost(e){return doRequest(e);}
function doGet(e){return doRequest(e);}
function setup() {
var doc = SpreadsheetApp.getActiveSpreadsheet();
SCRIPT_PROP.setProperty("key", doc.getId());
}
function testSheetsWrite() {
var doc = SpreadsheetApp.openById(SCRIPT_PROP.getProperty("key"));
var sheet = doc.getSheetByName(SHEET_NAME);
var lastColumn = sheet.getLastColumn();
if(lastColumn==0){
sheet.getRange(1, 1, 1,inputFields.length).setValues([inputFields]);
}
}

view raw

google-apps-script-contact-form.js

hosted with ❤ by GitHub

Asegúrate de personalizar los campos SHEET_NAME y inputFields por el nombre de pestaña que quieras usar en tu Google Spreadsheet y los campos del formulario que quieras recibir. En este caso estamos usando la pestaña Sheet1 y los campos nombre, email y comentarios.

3. Instala el Google Apps Scripts

Ejecuta la función setup. Esto lo que hará es añadir como propiedad del Google Apps Scripts el dientificador del Google Spreadsheet. Si lo deseas, podrias añadirlo manualmente.

4. Publica la aplicación web

En el menú Publicar, selecciona la opción Implementar como aplicación web. Asegúrate de seleccionar la opción «Anyone, even anonymous» en «Who has access to the app:» y publica.

No te preocupes si ves la alerta «This app isn’t verified». Tienes que ir a las opciones avanzadas  y seleccionar la opción «unsafe».

Guárdate la URL ya que es en esta URL dónde tendras que enviar los datos de tu formulario.

5. Prueba el formulario

En tu página web ya puedes usar el formulario. Copia y pega este HTMl et tu web y modifica la URL que guardase en la línea 22


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Formulario de contacto</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-serialize-object/2.5.0/jquery.serialize-object.min.js"></script>
</head>
<body>
<form id="contact-form">
<h2>Formulario de contacto</h2>
<p>
<label>Nombre<br><input type="text" name="nombre"></label><br>
<label>Email<br><input type="email" name="email"></label><br>
<label>Comentarios<br></label><textarea name="comentarios" cols=40 rows=5></textarea></label>
</p>
<input id="submit-contact-form" type="submit" value="Submit">
</form>
<script>
(function() {
var $form = $('form#contact-form'), url = 'https://script.google.com/macros/s/key/exec';
$('#submit-contact-form').on('click', function(e) {
e.preventDefault();
var jqxhr = $.ajax({
url: url,
method: "GET",
dataType: "json",
data: $form.serializeObject(),
success: function(data) {
console.log(data);
$('form#contact-form').hide();
$('body').append("<p style='color:green'>Gracias por tu interés. Contactaremos contigo en breve.</p>");
}
});
});
})();
</script>
</body>
</html>

view raw

contact-form.html

hosted with ❤ by GitHub

Prúebalo y personaliza lo que quieras.

 

 

Deja una respuesta