Criando uma aplicação React com Google App Script (GAS)

Neste artigo, vamos criar uma aplicação React com Google App Script (GAS) conectada ao Planilhas. Utilizaremos o Webpack e alguns plugins para essa tarefa, hospedando nosso frontend no próprio GAS. Também utilizaremos algumas APIs para fazer a conexão entre a aplicação e o Google Planilhas.

Como desenvolvedor/a, você já deve ter recebido diversos pedidos como: "Você faz um aplicativo pra mim? É simples…". Muitas vezes a pessoa não sabe o que tem por trás de um aplicativo e depois de construído ainda tem a manutenção e o custo de infraestrutura. Por isto, não adianta querer construir um super sistema para resolver um problema simples ou pontual.

Quando estou com um problema técnico, tento sempre buscar soluções simples. Hoje em dia, temos cada vez mais opções de ferramentas para simplificar o desenvolvimento, manutenção e custo de nossas soluções:

1. Soluções No-Code e Low-Code. Exemplo: Bubble e Softr;
2. Hospedagem Gratuita - Exemplo: Vercel e GitHub Pages;
3. Backend as Service (BaaS) - Exemplo: Firebase e Amplify nos limites gratuitos.

Hoje quero trazer pra vocês o Google Apps Script (GAS), uma ferramenta "antiga", lançada em 2009. Ela é uma plataforma de desenvolvimento baseada em JavaScript que permite criar extensões personalizadas para produtos do Google, como o Google Sheets, Google Docs e Google Forms. Com o Google Apps Script, é possível:

1. Automatizar tarefas no Google Sheets: Você pode criar scripts para automatizar tarefas repetitivas, como importar dados de outras fontes, formatar células, criar gráficos, enviar e-mails com base em determinados critérios, entre outros.
   
2. Personalizar o Google Docs: Com o Google Apps Script, é possível criar scripts para adicionar funcionalidades personalizadas ao Google Docs, como criar documentos a partir de modelos, gerar relatórios automaticamente, adicionar comentários programaticamente, etc.
   
3. Desenvolver complementos para o Gmail: Você pode estender a funcionalidade do Gmail criando complementos personalizados usando o Google Apps Script. Isso permite que você crie fluxos de trabalho automatizados, adicione botões e menus personalizados, integre-se com outros sistemas, entre outras possibilidades.
   
4. Criar formulários personalizados com o Google Forms: Com o Google Apps Script, você pode personalizar e estender os recursos do Google Forms. Por exemplo, é possível criar validações personalizadas, adicionar lógica condicional aos formulários, enviar notificações por e-mail com base nas respostas, etc.
   
5. Automatizar processos no Google Drive: O Google Apps Script permite criar scripts para gerenciar arquivos e pastas no Google Drive. Você pode, por exemplo, fazer o backup de arquivos automaticamente, organizar arquivos com base em determinados critérios, controlar permissões de acesso, entre outros.
   
6. Integração com outros serviços do Google: O Google Apps Script pode ser usado para integrar produtos do Google, como Google Calendar, Google Maps, Google Analytics, Google BigQuery e outros. Você pode automatizar processos de sincronização de dados, extrair informações de outros serviços e incorporá-los em seus scripts.
   
7. Desenvolver aplicativos web personalizados: Com o Google Apps Script, você pode criar aplicativos web personalizados usando HTML, CSS e JavaScript.

Nesse artigo vamos focar no item 7: Desenvolver aplicativos web personalizados. Criaremos uma aplicação fullstack básica, usando React.JS (frontend) que envia respostas de um formulário para uma função no GAS (backend), uma planilha do Google (banco de dados) e vamos hospedar essa aplicação no próprio GAS.

Vamos começar a partir da criação da planilha no google drive e do script atrelado a planilha. Para facilitar esse trabalho, vou disponibilizar a planilha para que você apenas copie.

Com a planilha copiada, você pode abrir o script em Extensões -> Apps Script.

Nas configurações do script você vai encontrar o ID do seu projeto.

Vá em https://script.google.com/home/usersettings e ative a configuração de API:

Para clonar o projeto para sua máquina, vamos utilizar a biblioteca CLASP (Command Line Apps Script Projects). Essa ferramenta de linha de comando desenvolvida pelo Google nos permite criar, desenvolver e implantar projetos do Google Apps Script diretamente do seu ambiente de desenvolvimento local.

Ela facilita o processo de desenvolvimento, versionamento e implantação de projetos do Google Apps Script, fornecendo uma maneira mais eficiente de trabalhar com o código.

Crie um projeto npm:

Adicione as bibliotecas react e react-dom:

Adicione agora a biblioteca clasp como dependência de desenvolvimento:

Adicione os seguintes scripts, substituindo o id do seu projeto no script gclone:

Execute o script de login:

Após logar com sua conta Google e dar permissões de acesso, você poderá clonar o app script para seu computador usando o comando, primeiro crie uma pasta chamada apps-script na raiz do seu projeto:

E depois execute:

Pronto, agora você deve ter o projeto apps script dentro do seu projeto local, porém o arquivo .clasp.json tem que ser movido para raiz do projeto:

Dentro do arquivo main.js você pode ver que temos duas funções, uma que insere os dados de nome, email e mensagem em uma linha da planilha Google:

E outra que expõe um arquivo html:

Você pode ir no painel do seu projeto e implantar (fazer o deploy) de sua aplicação e assim visualizar o link que vai expor as funções do arquivo main.js:

Muito bom, mas, e como você altera o código fonte do index.html?

Calma! O GAS só expõe arquivo html, então será preciso juntar o CSS e JS do frontend em um único html.

Para isso vamos utilizar o Webpack, ferramenta de empacotamento de módulos amplamente utilizada no desenvolvimento web. Ele é responsável por agrupar e transformar vários arquivos JavaScript, CSS, imagens e outros ativos em um único pacote otimizado para ser entregue ao navegador.

Vamos utilizar os seguintes plugins para juntar o CSS e JS em um único html:

Os seguintes plugins para processar o CSS:

O seguinte para aumentar a compatibilidade do seu código JavaScript com navegadores mais antigos:

E o seguinte plugin para pegar o arquivo index.html final e colocar na pasta da apps-script para fazer o deploy.

Crie um arquivo chamado webpack.config.js:

Crie um arquivo chamado .babelrc:

Um arquivo dentro da pasta public -> index.html:

Dentro da pasta src você deve criar 3 arquivos:

• index.js.

• Styles.css
  

• App.js
  

O arquivo App.js tem um formulário e uma chamada Submit que envia os dados do formulário para a função que temos no arquivo main.js que roda do lado do servidor. Como essa chamada é feita dentro do ambiente do GAS, podemos utilizar a própria API do google.script.run para chamar nossa função doInsertData.

Agora você pode buildar a aplicação:

Enviar os arquivos para o GAS:

E fazer um deploy:

Cada deploy tem um link único para acessar, mas você pode acessar um link de teste que termina com /dev e estará sempre atualizado com seu último deploy:

Pronto, agora você pode acessar a aplicação final aqui e o código fonte aqui.

Até a próxima, pessoal!