Google Apps Script Tutorial

Summary

What Google Apps Script can do

• Build web applications and G Suite add-ons using a JavaScript-like language.
• This tutorial emphasizes a local development workflow (rather than editing directly in the Apps Script editor).

Developer setup and tooling (local → Apps Script)

• Code is written in Visual Studio Code locally, then pushed to Apps Script.
• Since Apps Script doesn’t support modern JavaScript syntax (e.g., arrow functions, classes), the tutorial uses:
  • Babel to transpile modern JS into older syntax Apps Script can run.
  • Webpack to bundle JavaScript plus HTML/CSS into deployable output.
• The tutorial uses the Apps Script Starter Kit, which:
  • Provides a ready-to-use local environment with no extra build configuration
  • Still uses Babel/Webpack internally.

Required configuration before coding

• In script.google.com, enable the Apps Script API.
  • This is required because clasp communicates with Apps Script projects via that API.
• Install prerequisites:
  • Node.js (and thus npm).
  • Run npm install to install dependencies such as webpack, babel, prettier, and others.

Authentication and clasp usage

• Uses clasp to connect the local project to Google Drive / Apps Script.
• Runs clasp commands via npx so tooling is project-scoped (not installed globally).
• Example workflow:
  • clasp create to create a new Apps Script project.
  • Uses the sheets bound type to attach the project to a specific Google Sheet (spreadsheet add-on).
  • Later uses clasp push / deployment steps to upload changes.

Key project structure and build/upload commands

• The starter kit includes sample code, but the tutorial resets to a “blank slate.”
• Creates a src/ directory and places frontend HTML/JS there.
• Webpack configuration tweaks:
  • Use development mode (none) for readable/debuggable output.
  • Switch to production later for optimized output.
• Build outputs go to a dist/ folder.
• Typical deployment pipeline:
  • npm run build — transpile/bundle
  • npm run upload — push dist/ output to Apps Script
  • npm run deploy — build + upload together
• Important Apps Script requirement:
  • Any top-level function Apps Script / Google UI calls must be defined on the global object.

Scopes / permissions management (manifest.json)

• The script sends email, so it carefully configures authorization scopes:
  • Keeps Gmail send scope and removes unnecessary Gmail read scope.
  • Keeps Settings scope for listing connected Gmail accounts.
  • Adds/removes scopes depending on whether Drive, external APIs, or data reading are required.
  • Includes Spreadsheet UI scope to show the app in the spreadsheet sidebar.
• Scope selection is explained by referencing Google’s scope documentation patterns (e.g., “Google … playground / scope lists”).

Tutorial: building the “Mailmen” spreadsheet add-on + web app

• Starts with a “hello world” function to verify execution and logging.
• Demonstrates an ES6 transpilation problem in the browser editor:
  • Modern JS can fail in the Apps Script editor, reinforcing the need for the local build pipeline.

Frontend (HTML/CSS/JS)

• Creates an index.html for the sidebar UI / form.
• Uses:
  • Materialize CSS for responsive, material-design UI patterns
  • jQuery to simplify form handling and submission
• Form fields:
  • Recipient email
  • Subject
  • Body textarea (supports multiline)
  • Gmail alias dropdown (notes Materialize select requires initialization)
• Client-side behavior:
  • A sendMail function runs on form submission
  • Calls server-side Apps Script asynchronously using Google’s client-side API
  • Uses Materialize toast notifications for success/error feedback
  • Disables the submit button during execution to prevent duplicate sends (race condition prevention)

Sidebar and spreadsheet menu integration

• Adds an onOpen function:
  • Creates a custom spreadsheet menu (with emojis)
  • Includes items to:
    • Open the sidebar
    • Show a credits screen
• Implements a showSidebar function:
  • Serves the HTML sidebar content
  • Initializes/assigns Gmail alias lists to variables used in HTML scriptlets (<?= ?> templating)

Server-side email sending

• Implements a sendMail server function:
  • Accepts an object containing form fields (recipient, subject, body, alias selection)
  • Uses try/catch
  • Sends mail using Apps Script services:
    • Uses a fallback approach if the Gmail service is disabled (attempting mail sending via Apps Script mail service)
  • Exposes sendMail to the client by attaching it to the global object
• Notes a debugging issue:
  • An email address appearing in the subject is recognized as a bug to fix in index.html.

Publishing the project as a Web App

• Deploys as a web app so users can send emails via a URL.
• Adds a doGet method (required for web apps):
  • Similar to sidebar rendering, but via doGet
• Exports/attaches doGet to the global object so the web app endpoint works.

Production rebuild + redeployment

• When publishing as a web app, each code change requires redeploying for a new version.
• Uses clasp deployments patterns:
  • Redeploy the existing web app ID using deploy with an -i flag to publish a new version.
• Suggests automation:
  • Use an npm script so push/deploy runs automatically after changes.

Version control

• Pushes source code to GitHub:
  • Initialize repo, add/commit, set remote, push.
• Result: source code becomes publicly accessible on GitHub.

---

Main speakers / sources

• Speaker: Amit Agarwal
• Tools/primary sources referenced:
  • Google Apps Script
  • clasp (Apps Script command-line tool)
  • Apps Script Starter Kit (local dev template)
  • Visual Studio Code
  • Babel and Webpack
  • Materialize CSS and jQuery
  • GitHub
  • Google authorization scopes documentation / “Google … playground” (used to find scope lists)