Developing and Deploying a Simple Web App with Google Apps Script

by

Creating web applications can seem daunting, but with Google Apps Script, you can build and deploy simple yet powerful web apps with ease. In this blog post, we will walk through the steps to create a simple web app that collects user input and stores it in a Google Sheet. By the end of this tutorial, you’ll have a functioning web app and a solid understanding of how to work with Google Apps Script.

Prerequisites

Before we start, make sure you have:

  • A Google account
  • Basic knowledge of JavaScript
  • Access to Google Sheets

Step 1: Setting Up Your Google Sheet

  1. Create a New Google Sheet:
    • Open Google Sheets and create a new spreadsheet.
    • Name the spreadsheet “User Input Data” or any name of your choice.
    • In the first row, create headers for the data you want to collect. For example, “Name” and “Email”.

Step 2: Writing the Apps Script

  1. Open the Apps Script Editor:
    • In your Google Sheet, go to Extensions > Apps Script to open the script editor.
  2. Create a New Script:
    • Replace any code in the script editor with the following code:

function doGet(e) {

  return HtmlService.createHtmlOutputFromFile(‘Index’);

}

function submitData(formData) {

  const sheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();

  sheet.appendRow([formData.name, formData.email]);

  return ‘Success’;

}

  1. Create the HTML Form:
    • In the script editor, click on the + icon to create a new HTML file. Name it Index.html.
    • Add the following HTML code to the Index.html file:

<!DOCTYPE html>

<html>

  <head>

    <base target=”_top”>

  </head>

  <body>

    <form id=”userForm”>

      <label for=”name”>Name:</label><br>

      <input type=”text” id=”name” name=”name”><br>

      <label for=”email”>Email:</label><br>

      <input type=”email” id=”email” name=”email”><br><br>

      <input type=”button” value=”Submit” onclick=”submitForm()”>

    </form>

    <script>

      function submitForm() {

        const formData = {

          name: document.getElementById(‘name’).value,

          email: document.getElementById(’email’).value

        };

        google.script.run.withSuccessHandler(() => {

          document.getElementById(‘userForm’).reset();

          alert(‘Form submitted successfully!’);

        }).submitData(formData);

      }

    </script>

  </body>

</html>

Step 3: Deploying the Web App

  1. Save and Deploy:
    • Save your project by clicking the floppy disk icon or by pressing Ctrl+S (Windows) or Cmd+S (Mac).
    • Click on Deploy > Test deployments.
    • In the “Select type” dropdown, choose “Web app”.
    • Click Deploy.
  2. Set Permissions:
    • You may be prompted to authorize the script. Click on Review Permissions and follow the steps to grant the necessary permissions.
  3. Get the Web App URL:
    • After deployment, you will receive a URL for your web app. Copy this URL and open it in your browser.

Step 4: Testing Your Web App

  1. Access the Web App:
    • Open the web app URL in your browser. You should see the form you created.
  2. Submit Data:
    • Fill out the form with a name and email, then click the “Submit” button.
    • You should see an alert confirming that the form was submitted successfully.
  3. Check Your Google Sheet:
    • Go back to your Google Sheet and check that the data you entered in the form has been added as a new row.

Conclusion

Congratulations! You have successfully created and deployed a simple web app using Google Apps Script. This app collects user input through a web form and stores the data in a Google Sheet. This is just the beginning of what you can achieve with Google Apps Script. From here, you can expand your app with additional features, improve the UI, or integrate it with other Google services.