0% found this document useful (0 votes)

83 views

Google Apps Script Web Apps_ Comprehensive Guide

Uploaded by

contraste visual

Available Formats

Download as PDF, TXT or read online on Scribd

0% found this document useful (0 votes)

83 views

Google Apps Script Web Apps_ Comprehensive Guide

Uploaded by

contraste visual

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