Google Apps Script Web Apps: Comprehensive Guide
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
- Open the Apps Script Editor.
- Create a new project.
- Write a doGet or doPost function to handle requests.
- 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
- Click Deploy > New Deployment.
- Select Web App as the deployment type.
- Set access permissions:
- Execute as: “Me” or “User accessing the web app.”
- Who has access: “Anyone” or “Only myself.”
- 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>
<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:
<script>
function showAlert() {
google.script.run
.withSuccessHandler((message) => {
alert(message);
})
.showAlert();
}
</script>
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
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”);
}
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() {
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:
<!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?
- doPost()
- doGet()
- handleRequest()
- doRequest()
Answer: 2. doGet()
Question 2:
What does google.script.run do?
- Runs client-side JavaScript.
- Calls a server-side Apps Script function.
- Connects to Google APIs.
- 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?
- HtmlService.createResponse()
- HtmlService.createHtmlOutput()
- HtmlService.getHtml()
- HtmlService.createOutput()
Answer: 2. HtmlService.createHtmlOutput()
Best Practices
- Secure Access: Use permissions to limit access to sensitive data.
- Optimize Code: Minimize server calls for better performance.
- Debugging: Use Logger.log and browser developer tools to debug issues.
