Criando uma web app avançada no Google Apps Script com Svelte

Houve um caso em que eu queria criar um app ou ferramenta leve usando uma planilha como banco de dados por meio da funcionalidade de publicação de web apps do Google Apps Script.

Era pequeno demais para justificar deploy em S3 ou outro serviço de hospedagem, mas mexer diretamente na planilha também não era uma boa opção. Nessa situação, essa abordagem permite criar uma web app com Svelte, React ou Vue.

Repositório

svelte-with-tailwindcss-on-gas

Ele está preparado para funcionar com a funcionalidade de repositório template do GitHub.

Se você não precisar de TailwindCSS, pode removê-lo sem problemas.

Stack técnica

Estrutura de diretórios

O diretório client concentra a implementação frontend criada com Svelte.

O diretório server concentra a implementação server-side executada no GAS.

src/
├── client/
│   ├── api/
│   │   ├── mocks
│   │   └── index.ts
│   ├── components
│   ├── features
│   ├── stores
│   ├── types
│   ├── utils
│   ├── App.svelte
│   └── main.ts
├── server/
│   ├── main.ts
│   └── types.ts
└── vite-env.d.ts

Lado do servidor

Usando o recurso de web app do GAS para servir HTML

Adicione uma função doGet em server/main.ts.

Mesmo que você altere a tag title ou o favicon no frontend, isso não será refletido, então, se precisar, configure-os dentro de doGet.

const HTML_TITLE = "App name";
const HTML_FAVICON_URL = "https://example.com/favicon.ico";

function doGet() {
  const html = HtmlService.createTemplateFromFile("index.html").evaluate();
  html.setTitle(HTML_TITLE);
  html.setFaviconUrl(HTML_FAVICON_URL);
  return html;
}

Criando endpoints de API

Em server/main.ts, basta exportar as funções que você quer expor como endpoints.

type APIResult<T> =
  | {
      ok: true;
      data: T;
    }
  | {
      ok: false;
      error: Error;
    };

const doSomething = (): APIResult<string> => {
  return {
    ok: true,
    data: "success",
  };
};

export { doSomething };

Frontend

Faça a ligação com a API server-side em src/client/api/index.ts.

Internamente, isso executa google.script.run.

import { GASClient } from "gas-client";
import type * as Server from "../../server/main";

const { serverFunctions } = new GASClient<typeof Server>();

export const APIClient = serverFunctions;

Chamando a API server-side

<script lang="ts">
  import { APIClient } from "./api";

  const promise = APIClient.doSomething();
</script>

{#await promise}
<div>Loading...</div>
{:then result}
<p>{result}</p>
{:catch error}
<p>error</p>
{/await}

Resumo

Combinando Google Apps Script com Svelte, dá para construir uma web app robusta usando uma planilha como backend.

Com gas-client, você consegue chamar funções do GAS de forma type-safe, o que melhora bastante a experiência de desenvolvimento.