En este tutorial te voy a enseñar cómo crear un Web App de lectura de proyectos usando Google Sheets, Google Apps Script y HTML. La idea es que puedas mostrar la información de una hoja de cálculo en una página web, sin necesidad de dar permisos de edición ni acceso directo al archivo. Esta solución es ideal para quienes quieren compartir datos de manera segura y profesional, permitiendo que cualquier usuario vea la información en tiempo real, pero sin modificar nada. Es un punto de partida perfecto para emprendedores, dueños de pequeñas empresas o entusiastas de la automatización que buscan aprovechar al máximo las herramientas de Google.
Si prefieres ver el paso a paso en video, aquí te dejo el tutorial completo para que lo sigas visualmente:
¿Qué necesitas para crear tu Web App de lectura?
Para construir este Web App, vamos a necesitar tres elementos principales que trabajan en conjunto para mostrar los datos de tu hoja de cálculo en una página web:
- Google Sheets: La hoja de cálculo donde tienes los datos de tus proyectos.
- Archivo HTML: Será la estructura visual y el diseño de tu Web App.
- Google Apps Script: El código que conecta tu hoja de cálculo con el HTML y maneja la lógica para mostrar los datos.
Paso 1: Preparar tu hoja de cálculo
Primero, crea o identifica la hoja de Google Sheets que contiene la información que quieres mostrar. Por ejemplo, una hoja llamada «Proyectos» con las columnas:
| Cliente | Proyecto | Estado |
|---|---|---|
| Juan | Creativo Web | En proceso |
| Ana | App Móvil | Finalizado |
Esta tabla será la que mostraremos en la aplicación web de forma dinámica, sin que los usuarios puedan editarla directamente.
Paso 2: Crear el proyecto en Google Apps Script
Desde tu hoja de cálculo, ve al menú Extensiones > Apps Script. Esto abrirá el editor donde escribirás el código que conectará tu hoja con la página web.
Agregar un archivo HTML
En el editor de Apps Script, haz clic en el menú lateral izquierdo y selecciona Nuevo archivo > HTML. Nómbralo, por ejemplo, clientes. Este archivo será la plantilla visual de tu Web App.
Estructura básica del HTML
En clientes.html, inicia con una tabla básica para visualizar la estructura de los datos:
<table border="1" cellpadding="5" cellspacing="0">
<tr>
<th>Cliente</th>
<th>Proyecto</th>
<th>Estado</th>
</tr>
<tr>
<td>Juan</td>
<td>Creativo Web</td>
<td>En proceso</td>
</tr>
</table>
Esta tabla es solo un ejemplo estático para que veas cómo se verá. Más adelante haremos que los datos sean dinámicos y se obtengan directamente desde tu hoja.
Paso 3: Crear la función doGet en Google Apps Script
La función doGet es la que Google Apps Script ejecuta para mostrar tu Web App cuando alguien accede a ella. Aquí te muestro cómo la creo yo para empezar:
function doGet() {
var html = HtmlService.createTemplateFromFile('clientes');
return html.evaluate();
}
Con createTemplateFromFile puedes preparar el archivo HTML para recibir datos desde el script, lo que es clave para mostrar la información de la hoja.
Paso 4: Implementar y probar tu Web App
Para ver tu Web App en acción, haz clic en Implementar > Nueva implementación. Luego selecciona Aplicación web, asigna un nombre y define los permisos de acceso. Durante el desarrollo, puedes dejar el acceso solo para ti, pero cuando esté listo, puedes permitir que cualquier usuario con cuenta de Google pueda acceder.
Al implementar, verás dos enlaces importantes:
- Enlace de prueba (/dev): Refleja los cambios de inmediato, ideal para desarrollo.
- Enlace de implementación: Es el enlace oficial que compartirás cuando tu Web App esté lista.
Paso 5: Obtener los datos de la hoja y pasarlos al HTML
Ahora, para mostrar los datos reales de tu hoja, modificamos la función doGet para que lea la información y la envíe al archivo HTML:
function doGet() {
var hoja = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("Proyectos");
var datos = hoja.getDataRange().getValues();
var html = HtmlService.createTemplateFromFile('clientes');
html.datos = datos;
return html.evaluate();
}
La función getDataRange().getValues() obtiene todos los datos de la hoja, incluyendo encabezados y filas, y los guarda en la variable datos. Luego, esta variable se pasa al HTML para que podamos mostrarla dinámicamente.
Paso 6: Mostrar los datos dinámicamente en el HTML
En clientes.html, usamos los scriptlets de Google Apps Script para recorrer la variable datos y construir la tabla con los datos reales:
<table border="1" cellpadding="5" cellspacing="0">
<? for(var i=0; i<datos.length; i++) { ?>
<tr>
<? for(var j=0; j<datos[i].length; j++) { ?>
<td><?= datos[i][j] ?></td>
<? } ?>
</tr>
<? } ?>
</table>
Con este código, cada fila y columna de tu hoja se mostrará automáticamente en la tabla HTML. Si quieres, puedes mejorar el diseño agregando estilos CSS o usando frameworks como Bootstrap, simplemente incluyendo su CDN en la cabecera del archivo HTML.
Consejos extra para mejorar tu Web App
Algunos tips que te pueden servir para llevar tu Web App al siguiente nivel:
- Filtrar datos: Puedes agregar controles en el HTML para que el usuario filtre los proyectos por estado o cliente usando Google Apps Script para procesar esos filtros.
- Estilos CSS: Dale una mejor apariencia a tu tabla con CSS personalizado o usando Bootstrap para que sea responsiva y agradable.
- Actualizar datos en tiempo real: Aunque el Web App muestra datos al cargar, puedes implementar funciones para refrescar la información sin recargar la página usando JavaScript y llamadas a Apps Script.
- Seguridad: Controla quién puede ver la Web App con las opciones de permisos al implementar, y evita exponer datos sensibles.
Conclusión y próximos pasos
En este tutorial aprendiste cómo crear un Web App de lectura conectado a Google Sheets usando Google Apps Script y HTML. Viste cómo preparar tu hoja de cálculo, crear el archivo HTML, conectar ambos con el script y desplegar tu aplicación web para que otros puedan consultar la información de forma segura y profesional.
Este es solo el comienzo: puedes seguir explorando para mejorar el diseño, agregar filtros dinámicos, o incluso construir Web Apps que permitan editar o agregar datos. Si quieres profundizar en estos temas y tener acceso a cursos completos, talleres y plantillas , te invito a conocer la Academia JuanSGuzman.
Si quieres aprender a usar Google Forms y Google Sheets desde cero, te invito a tomar un curso gratis de 2 horas.