Crea una aplicación React con Google App Script

En este artículo, vamos a crear una aplicación React con Google App Script (GAS) conectado a Sheets. Usaremos Webpack y algunos complementos para esta tarea, alojando nuestra interfaz en GAS. También usaremos algunas API para hacer la conexión entre la aplicación y Google Sheets.

Como desarrollador, ya debes haber recibido varias solicitudes como: "¿Harías una aplicación para mí? Es simple...". La gente a menudo no sabe qué hay detrás de una aplicación y, una vez creada, aún queda el mantenimiento y el costo de la infraestructura. Por esta razón, no tiene sentido querer construir un supersistema para resolver un problema simple o específico.

Cuando tengo un problema técnico, siempre trato de buscar soluciones simples. Hoy en día, tenemos cada vez más opciones de herramientas para simplificar el desarrollo, mantenimiento y costo de nuestras soluciones:

1. Soluciones No-Code y Low-Code. Ejemplo: Bubble y Softr;
2. Hosting Gratuito - Ejemplo: Vercel y GitHub Pages;
3. Backend as Service (BaaS) - Ejemplo: Firebase y Amplify en su modalidad gratuita.

Hoy quiero traerles Google Apps Script (GAS), una herramienta "antigua", lanzada en 2009. Es una plataforma de desarrollo basada en JavaScript que permite crear extensiones personalizadas para los productos de Google, como Google Sheets, Google Docs y Formularios de Google.

Con Google Apps Script, puedes:

1) Automatizar tareas en Google Sheets: crea secuencias de comandos para automatizar tareas repetitivas como importar datos de otras fuentes, formatear celdas, crear gráficos, enviar correos electrónicos según ciertos criterios y más.

2) Personalizar Google Docs: Con Google Apps Script, es posible crear scripts para agregar funciones personalizadas a Google Docs, como crear documentos a partir de modelos, generar relatorías automáticas, añadir comentarios de forma programática, etc.

3) Desarrollar complementos para Gmail: puedes extender la funcionalidad de Gmail creando complementos personalizados mediante Google Apps Script. Eso permite que crees flujos de trabajo automatizados, agregar botones y menús personalizados, integrarse con otros sistemas, entre otras posibilidades.

4) Crear formularios personalizados con Google Forms: Con Google Apps Script, puedes personalizar y extender los recursos de Google Forms. Por ejemplo, es posible crear validaciones personalizadas, agregar lógica condicional a los formularios, enviar notificaciones por e-mail con base en las respuestas, etc.

5) Automatizar procesos en Google Drive: GAS permite crear scripts para administrar archivos y carpetas en Google Drive. Puedes, por ejemplo, hacer backup de archivos automáticamente, organizar archivos con base en determinados criterios, controlar permisos de acceso, entre otros.

6) Integración con otros servicios de Google: GAS puede usarse para integrar productos de Google como Google Calendar, Google Maps, Google Analytics, Google BigQuery y otros. Puedes automatizar procesos de sincronización de datos, extraer información de otros servicios e incorporarlos en tus scripts.

7) Desarrollar aplicaciones web personalizadas: con la ayuda de HTML, CSS y JavaScript.

En este artículo nos centraremos en el tema 7: Desarrollo de aplicaciones web a medida. Crearemos una aplicación fullstack básica, utilizando React.JS (frontend) que envía respuestas desde un formulario a una función en GAS (backend), una hoja de cálculo de Google (base de datos) y alojaremos esta aplicación en GAS.

Comencemos creando la hoja de cálculo en Google Drive y el script vinculado a la hoja de cálculo. Para facilitar este trabajo, pondré a tu disposición la hoja de cálculo para que la copies.

Con la hoja de cálculo copiada, puedea abrir el script en Extensiones -> Script de aplicaciones.

En la configuración del script, encontrarás tu ID de proyecto.

Ve a https://script.google.com/home/usersettings y activa la configuración de API:

Para clonar el proyecto en tu equipo, usaremos la biblioteca CLASP (Command Line Apps Script Projects). Esta herramienta de línea de comandos desarrollada por Google nos permite crear, desarrollar e implementar proyectos de Google Apps Script directamente desde tu entorno de desarrollo local. Además, facilita el proceso de desarrollo, creación de versiones e implementación de proyectos de Google Apps Script al proporcionar una forma más eficiente de trabajar con código.

Crea un proyecto npm:

Añade las bibliotecas react y react-dom:

Agrega ahora la biblioteca clasp como dependencia de desarrollo:

Suma los siguientes scripts, sustituyendo el id de tu proyecto en el script gclone:

Ejecuta el script de login:

Después de iniciar sesión con tu cuenta de Google y otorgar permisos de acceso, puedes clonar el script de la aplicación en tu computadora usando el comando. Crea primero una carpeta llamada apps-script en la raíz de tu proyecto:

Y después ejecuta:

Bien, ahora deberías tener el proyecto de apps script dentro de tu proyecto local, pero el archivo .clasp.json debe moverse a la raíz del proyecto:

Dentro del archivo main.js puede ver que tenemos dos funciones: una que inserta el nombre, el correo electrónico y los datos del mensaje en una fila de la hoja de cálculo de Google:

Y otra que muestra un archivo html:

Puedes ir al painel de tu proyecto e implantar (hacer deploy) tu aplicación y así visualizar el link que va a exponer las funciones de archivo main.js:

Muy bien, pero ¿cómo se cambia el código fuente de index.html?

¡Calma! GAS solo expone un archivo html, por lo que deberás combinar el CSS y JS de la interfaz en un solo html.

Para ello, utilizaremos Webpack, una herramienta de empaquetado de módulos muy utilizada en el desarrollo web por su capacidad de agrupar y transformar varios archivos de JavaScript, CSS, imágenes y otros activos en un solo paquete optimizado para ser entregado al navegador.

Usemos los siguientes plugins para unir CSS y JS en un solo html:

Los siguientes plugins son para procesar el CSS:

A continuación, para aumentar la compatibilidad de tu código JavaScript con navegadores más antiguos, inserta:

Este plugin es para tomar el archivo index.html final y colocarlo en la carpeta apps-script para hacer el deploy.

Crea un archivo llamado webpack.config.js:

Ahora otro llamado .babelrc:

Un arquivo dentro de la carpeta public -> index.html:

Dentro de la carpeta src debes crear 3 archivos:

• index.js.

• Styles.css

• App.js
  

El archivo App.js tiene un formulario y una opción llamada Submit que envía los datos del formulario a la función que tenemos en el archivo main.js que se ejecuta en el lado del servidor. Como esta llamada se realiza dentro del entorno GAS, podemos usar la propia API google.script.run para llamar a nuestra función doInsertData.

Ahora puedes construir la aplicación:

Envía los archivos a GAS:

Haz un deploy:

Cada deploy tiene un enlace único para acceder, pero puedes hacerlo a un enlace de prueba que termina con /dev y siempre estará actualizado con tu última implementación:

¡Listo! Ahora puedes acceder a la app final aquí y el código fuente lo encontrarás aquí.

¡Hasta la próxima!