Créer une web app Google Apps Script riche avec Svelte

J’ai eu besoin de créer une application ou un outil léger qui utilise une feuille de calcul comme base de données en s’appuyant sur la publication d’une web app Google Apps Script.

Le besoin n’était pas assez important pour justifier un hébergement sur S3 ou ailleurs, mais modifier directement la feuille n’était pas non plus idéal. Dans ce genre de cas, cette approche permet de construire une web app avec Svelte, React ou Vue.

Dépôt

svelte-with-tailwindcss-on-gas

Le dépôt est configuré pour pouvoir être utilisé via la fonctionnalité de template GitHub.

Si vous n’avez pas besoin de TailwindCSS, vous pouvez simplement le retirer.

Stack technique

• Svelte
• Vite
• TailwindCSS
• gas-client

Structure des répertoires

Le répertoire client regroupe l’implémentation frontend créée avec Svelte.

Le répertoire server regroupe l’implémentation côté serveur exécutée sur 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

Côté serveur

Utiliser la fonctionnalité web app de GAS pour servir le HTML

Ajoutez une fonction doGet dans server/main.ts.

Même si vous modifiez la balise title ou la favicon côté frontend, ces changements ne seront pas pris en compte. Si vous en avez besoin, définissez-les dans 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;
}

Créer des endpoints API

Dans server/main.ts, il suffit d’exporter les fonctions que vous voulez exposer comme endpoints.

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

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

export { doSomething };

Frontend

Reliez l’API côté serveur dans src/client/api/index.ts.

En interne, cela utilise 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;

Appeler l’API côté serveur

<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}

Résumé

En combinant Google Apps Script et Svelte, on peut construire une web app complète avec une feuille de calcul comme backend.

Avec gas-client, les fonctions GAS peuvent être appelées de façon type-safe, ce qui améliore aussi beaucoup l’expérience de développement.