0% found this document useful (0 votes)

84 views

Google Apps Script Web Apps_ Comprehensive Guide

Uploaded by

contraste visual

We take content rights seriously. If you suspect this is your content, claim it here.

Available Formats

Download as PDF, TXT or read online on Scribd

0% found this document useful (0 votes)

84 views

Google Apps Script Web Apps_ Comprehensive Guide

Uploaded by

contraste visual

We take content rights seriously. If you suspect this is your content, claim it here.

Available Formats

Download as PDF, TXT or read online on Scribd

You are on page 1/ 9

Google Apps Script Web Apps: Comprehensive Guide

Google Apps Script Web Apps: Comprehensive Guide 1

What is a Google Apps Script Web App? 2
Key Features of Web Apps 2
Creating a Web App 2
Basic Web App Structure 3
Example: Hello World Web App 3

Learn more HTML, CSS, JavaScript Web Development at https://basescripts.com/ Laurence Svekis

1
Deploying the Web App 3
Working with HTML, CSS, and JavaScript 3
Example: HTML File in Web App 3
Server-Client Communication 4
Example: Call a Server-Side Function 4
Advanced Examples 4
Example 1: Form Submission Web App 4
Example 2: Display Data from Google Sheets 5
Exercises 6
Exercise 1: Create a Welcome Web App 6
Solution: 6
Exercise 2: Create a Feedback Form 7
Solution: 7
Exercise 3: Display the Current Date 7
Multiple-Choice Questions 8
Question 1: 8
Question 2: 8
Question 3: 8
Best Practices 9

Google Apps Script allows you to create web apps to interact with users via a browser interface.
This guide covers creating, deploying, and managing web apps using Google Apps Script, with
examples, exercises, and multiple-choice questions.

What is a Google Apps Script Web App?

A web app built with Google Apps Script is a web-based application that runs in the Google
Cloud and can interact with Google Workspace applications, databases, and external APIs. It
provides a user-friendly interface via HTML, CSS, and JavaScript.

Key Features of Web Apps

● Custom Interfaces: Use HTML, CSS, and JavaScript to design interactive UIs.
● Google Integration: Access Google services like Sheets, Docs, and Drive.
● Scalability: Deployed on Google's cloud infrastructure.
● Secure Access: Control who can access the app via permissions.

Creating a Web App

1. Open the Apps Script Editor.

2. Create a new project.
Learn more HTML, CSS, JavaScript Web Development at https://basescripts.com/ Laurence Svekis

2
3. Write a doGet or doPost function to handle requests.
4. Deploy the app.

Basic Web App Structure

Example: Hello World Web App

function doGet() {
return HtmlService.createHtmlOutput("<h1>Hello, World!</h1>");
}

Explanation:

● doGet(): Handles HTTP GET requests.

● HtmlService.createHtmlOutput(): Creates an HTML response for the browser.

Deploying the Web App

1. Click Deploy > New Deployment.

2. Select Web App as the deployment type.
3. Set access permissions:
○ Execute as: "Me" or "User accessing the web app."
○ Who has access: "Anyone" or "Only myself."
4. Deploy and copy the URL.

Working with HTML, CSS, and JavaScript

Example: HTML File in Web App

Code.gs:

function doGet() {
return HtmlService.createHtmlOutputFromFile("Index");
}
Index.html:

<!DOCTYPE html>
<html>
<head>
<title>Web App</title>
</head>
<body>
<h1>Welcome to My Web App</h1>
Learn more HTML, CSS, JavaScript Web Development at https://basescripts.com/ Laurence Svekis

3
<button onclick="google.script.run.showAlert()">Click Me</button>
</body>
</html>

Explanation:

● HtmlService.createHtmlOutputFromFile("Index"): Serves the Index.html

file.
● google.script.run: Calls server-side Apps Script functions.

Server-Client Communication

Example: Call a Server-Side Function

Code.gs:

function showAlert() {
return "You clicked the button!";
}
Index.html:

Explanation:

● withSuccessHandler(callback): Handles server-side function results on the client

side.
● google.script.run.showAlert(): Invokes the showAlert function.

Advanced Examples

Example 1: Form Submission Web App

Learn more HTML, CSS, JavaScript Web Development at https://basescripts.com/ Laurence Svekis

4
Code.gs:

function doGet() {
return HtmlService.createHtmlOutputFromFile("Form");
}
function saveData(name, email) {
const sheet =
SpreadsheetApp.openById("SPREADSHEET_ID").getSheetByName("Sheet1");
sheet.appendRow([name, email]);
}
Form.html:

<!DOCTYPE html>
<html>
<body>
<form onsubmit="submitForm(event)">
<input type="text" id="name" placeholder="Name" required>
<input type="email" id="email" placeholder="Email" required>
<button type="submit">Submit</button>
</form>
<script>
function submitForm(event) {
event.preventDefault();
const name = document.getElementById("name").value;
const email = document.getElementById("email").value;
google.script.run.saveData(name, email);
alert("Data submitted!");
}
</script>
</body>
</html>

Example 2: Display Data from Google Sheets

Code.gs:

function doGet() {
return HtmlService.createHtmlOutputFromFile("Display");
}

Learn more HTML, CSS, JavaScript Web Development at https://basescripts.com/ Laurence Svekis

5
function getData() {
const sheet =
SpreadsheetApp.openById("SPREADSHEET_ID").getSheetByName("Sheet1");
return sheet.getDataRange().getValues();
}
Display.html:

<!DOCTYPE html>
<html>
<body>
<h1>Data from Google Sheets</h1>
<table id="data-table" border="1"></table>
<script>
google.script.run.withSuccessHandler((data) => {
const table = document.getElementById("data-table");
data.forEach((row) => {
const tr = document.createElement("tr");
row.forEach((cell) => {
const td = document.createElement("td");
td.textContent = cell;
tr.appendChild(td);
});
table.appendChild(tr);
});
}).getData();
</script>
</body>
</html>

Exercises

Exercise 1: Create a Welcome Web App

Write a web app that displays "Welcome to Apps Script!" with a button that shows an alert.

Solution:

Code.gs:

function doGet() {
Learn more HTML, CSS, JavaScript Web Development at https://basescripts.com/ Laurence Svekis

6
return HtmlService.createHtmlOutputFromFile("Welcome");
}
function sayHello() {
return "Welcome to Apps Script!";
}

Welcome.html:

<!DOCTYPE html>
<html>
<body>
<h1>Welcome to Apps Script!</h1>
<button
onclick="google.script.run.withSuccessHandler(alert).sayHello()">Click
Me</button>
</body>
</html>

Exercise 2: Create a Feedback Form

Write a web app that collects feedback (name and comments) and saves it to Google Sheets.

Solution:

Refer to the "Form Submission Web App" example above.

Exercise 3: Display the Current Date

Write a web app that displays the current date and time.

Solution:

Code.gs:

function doGet() {
return HtmlService.createHtmlOutputFromFile("DateTime");
}
function getCurrentDateTime() {
return new Date().toLocaleString();
}

DateTime.html:
Learn more HTML, CSS, JavaScript Web Development at https://basescripts.com/ Laurence Svekis

7
<!DOCTYPE html>
<html>
<body>
<h1 id="datetime"></h1>
<script>
google.script.run.withSuccessHandler((dateTime) => {
document.getElementById("datetime").textContent = dateTime;
}).getCurrentDateTime();
</script>
</body>
</html>

Multiple-Choice Questions

Question 1:

Which function handles HTTP GET requests in a web app?

1. doPost()
2. doGet()
3. handleRequest()
4. doRequest()

Answer: 2. doGet()

Question 2:

What does google.script.run do?

1. Runs client-side JavaScript.

2. Calls a server-side Apps Script function.
3. Connects to Google APIs.
4. Deploys the web app.

Answer: 2. Calls a server-side Apps Script function.

Question 3:

Which method creates an HTML response in a web app?

1. HtmlService.createResponse()
2. HtmlService.createHtmlOutput()
Learn more HTML, CSS, JavaScript Web Development at https://basescripts.com/ Laurence Svekis

8
3. HtmlService.getHtml()
4. HtmlService.createOutput()

Answer: 2. HtmlService.createHtmlOutput()

Best Practices