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.
https://gist.github.com/jrosell/be5766949856f3e54c1d42992342e30d
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
https://gist.github.com/jrosell/5c8873e8d6f4098ddcc05a5488da05c3
Prúebalo y personaliza lo que quieras.
