Google Apps Google Script - Content System Web App Project

Name: Google Apps Google Script - Content System Web App Project
Rating: 4.6 (167 reviews)

Learn to Build a custom web application using Google Scripts connecting Google Apps together

Created byLaurence Svekis

Last updated 11/2024

English

English [Auto],

What you'll learn

Create Google Docs with script
Send gmail emails with Google Script
Translate Google docs to different languages
Use Google sheets to store data and access data
Create web apps using Google Script

Course content

4 sections • 54 lectures • 4h 27m total length

Introduction to Creating webapps with Google Script8:51
Build web apps with Google scripts, linking Google apps and automating workflows using JavaScript. Deliver sheet-driven content via Ajax, and deploy your web app.
What is Google Scripts3:21
Discover Google Apps Script, a JavaScript cloud scripting language that automates tasks and connects Docs, Sheets, Forms, and services to build web apps in browser and runs on Google's servers.
Setup Google account open script editor3:36
Set up a Google account to access Google Apps Script, begin scripting in Google Sheets, and explore connecting Gmail, Google Drive, and Forms while focusing on spreadsheet capabilities.
How to Create a Google Doc with Google Script9:28
Learn to create a Google doc with Google script using the script editor, run or debug, and automate document creation across Docs, Drive, and other apps.
Access existing document and add content Google Script5:47
Learn to access existing Google documents by ID, get the document body, and append content using Google Apps Script, including debugging and opening by ID for content updates.
Setup Triggers Run script using Google Script3:55
Learn to create and append content in Google Drive documents with Google Apps Script, using current date strings, and configure time-driven triggers to run and notify on failures.
Run method to copy current content and output as bold Google Script Doc8:29
Automate Google Docs with script triggers that run every minute to copy current content, then append paragraphs, images, lists, and tables and apply bold and other text formatting.
Change text attributes output different colors Google Scripts7:38
Apply and customize text attributes in Google Apps Script to control font family, size, bold, alignment, and colors (foreground and background) within a Google Doc, using a style object.
Link more google services into your Script Use JavaScript Methods4:42
Link multiple Google services in a script by using JavaScript methods to translate content on the fly from English to Spanish, outputting translated results while skipping blanks.
Google Scripts Send Email8:06
Learn to link Google services with Apps Script, fetch the active user's email and document details, build an email with the doc link, and send it via Gmail.
Google Script Source Code Examples0:37
Google Script Resources0:03

Use Google Sheets as a webapp with Data3:43
Use Google Sheets as a web app data source to output content to users by ID or email, and publish JSON feeds or web pages.
Google Sheet data into local application jQuery10:42
Pull data from a Google Sheet via its JSON feed and display it in a web app using jQuery, Ajax, and getJSON, then render a Bootstrap table on the page.
Source Code accessing Google Sheet0:15
OnOpen Setup default buttons Google Script4:55
Open the script editor in google sheets, name your project, and create an onOpen function to add a custom menu that triggers functions for web app deployment.
Get Sheet values into object6:34
Learn to output content as HTML in google sheets, create dynamic pop-up windows, and fetch sheet data using get active spreadsheet, get sheet, and get data range for html rendering.
Output data from spreadsheet4:02
Loop through the sheet values, build a holder, and output HTML into the popup window.
Source Code output as HTML0:12
Popup HTML file within Google Sheet4:31
Output Google Sheets content as a web page by using an index.html file with Google apps script, HTML service, and a modal UI to publish a web app.
Pass data Object to HTML page Google Script8:58
Pass spreadsheet data into HTML templates in a Google Apps Script web app. Learn to create and evaluate a template, pass a JSON object, and render it in a dialog.
Pass Sheet data as object array into HTML page Google Script5:27
Learn to pass sheet data as an object array into an HTML page with Google Script by building a holder array, converting to JSON, and rendering with jQuery.
output content from sheet get each value5:06
Learn to fetch sheet data with Google Apps Script, loop through the results with jQuery, and output each object's email, first, last, age, and approved values into an HTML template.
Source Code0:34
Deploy as Web App6:02
Source Code GS0:22
Source Code Index.html0:20

Custom portal setup Google Scripts3:18
Create a custom content delivery system powered by Google Sheets, add an advanced menu via the script editor, and connect HTML output to Sheets for content updates.
Create Alert with prompt response shown in sidemenu5:55
Connect the spreadsheet UI to a modal alert and a sidebar, using a yes/no button set to capture and output the user response.
Source Code Sidemenu response0:07
Setup testing popup modal with content Google Script6:49
Set up a Google Apps Script content system web app by connecting an index HTML page to a Google Sheet, using HTML Service templates, and testing a popup modal.
Setup user portal entry page9:18
Set up the user portal entry page by wiring index.html to data.gs to output a json string, then populate content from google sheets with a bootstrap form and content dropdown.
Dynamic Drop down content from Google Sheet10:10
Generate a dynamic web app that presents content pages from a Google Sheet, uses email-based access, and populates a dropdown with sheet names to control what users see.
Pass Google Sheet data to Frontend Google Script5:39
Learn to pass content from a Google Sheet to a frontend in a Google Apps Script web app, building a home page with welcome text, image, and dynamic data retrieval.
Generate home page content from google sheet data6:14
Loop through home content from the Google Sheets and render it into html, building a reusable template for other pages, with content existence checks and image, text, and h1 handling.
Send data to Google Script for processing6:02
Submit a form by building a data object with email and content, prevent default submission, and use google.script.run with a success handler to send and receive data from Google Script.
Generate Page Content Google Sheet7:29
Learn how to fetch Google Sheets data in a Google Apps Script web app, build page content from sheet ranges, and return structured responses with descriptions, attributes, images, and links.
Project Source Code Google Script0:26
Project Source Code index.html0:24
Callback webpage builder10:44
Build a callback webpage builder by retrieving backcourt output, validating success, and rendering content as a Bootstrap list group with text and images using jQuery, or display an error message.
Bug Fix and Tweak output pages2:39
This lesson fixes bugs in the content system web app by initializing with one item to avoid empty list and by ensuring content is generated from Google Sheet across pages.
Return row contents using Google Script8:20
Implement access control in a Google Apps Script web app by checking the user’s email against a data sheet and returning a response with valid and access.
Add in validation check for email addresses9:34
Validate user emails to gate page access, return a valid or error message, and use JSON with array checks to enforce per-page or all-access permissions.
Tweaks and Bug Fixes Google Script8:53
Fix bugs in the Google script by validating emails, correcting access checks, and returning accurate error messages. Test with various users to ensure page access works for page five.
Deploy as webapp Google Script Application8:58
Launch a Google Apps Script web app that serves dynamic content from a Google Sheet, using doGet, HTML service, and sandbox mode to generate content on the fly.
Code review Index.html5:18
Explore how a Google Apps Script web app uses user emails and a Google Sheet to control page access and dynamically render content with HTML, Bootstrap, and Ajax.
Index Source Code0:33
Code Review Code Google Script8:30
Review a Google script-based web app that generates content pages from Google Sheets, enforces email-based access, and uses HTML templates to render dynamic iframe content.
Source Code Code.gs Google Script0:59

Google Apps Script Coding Guide and examples Guide1:05
Resources0:01
Apps Script how to create a Doc with Code6:31
Learn how to create and update a Google Docs file using Google Apps Script, open the doc by ID, and append paragraphs to its body.
reading Data from Sheets7:33
Learn to read data from a Google sheet with Apps Script, compute days by dividing hours by eight, and write results back to the sheet using range operations.
Additional Course Resources: Access to Downloads, Applied Examples0:02

Requirements

JavaScript
HTML CSS
Google Account
jQuery
Bootstrap

Description

Learn how to build Web Apps with Google Script

Increase the power of your favorite Google apps — like Calendar, Docs, Drive, Gmail, and Sheets. Apps Script lets you do more with Google. All on a JavaScript platform in the cloud.

If you know JavaScript you can jump right in and start creating web apps connecting all of your Google application together. Automate your work you will be amazed at how easy it is to work with Apps Script.

JavaScript is a prerequisite to this course!

Course Lessons will demonstrate how to use Google Script

Learn what Google script is and how to write code with it
Create a Google Doc with one line of code
Update existing Google Docs
Setup up automation with Triggers
Copy content from your Google Doc
Change colors and text within your Google Doc
Link to other Google apps
Translate your Google Doc in One line of Code!
Send your Google Doc info as an email through Gmail

Building a Webap

Connecting your Google Sheet Data
Accessing Sheet data via a JSON feed
Connecting your Sheet data to a local application using AJAX
How to add Bootstrap and jQuery into your Google App
How to create popup modals and dynamic interaction
Deploy your first web app

Build a Custom Content System driven from Google Sheet data

Add Alerts and interactive dialog
Setup HTML page
Add Bootstrap 4 and jQuery to your app
Create a dynamic drop list from Google Sheets
Generate a home page of content from Sheets
Send data back to GS to callback
Generate HTML output from Google Sheets data
Provide Access control of content
How to bug fix and tweak your application
Get a web url for your application
Check and authenticate users
Output content from Google Sheet data
Code review and output

Taught by an instructor with over 18 years of web development experience. I'm here to help you learn about Google Scripts and ready to answer any questions you might have.

You will be amazed at what you can do with Google Scripts, join now to start creating your own applications today.

Please note that this is a project based course and the scope of the course is to use technologies like HTML, CSS, JavaScript, jQuery, Bootstrap to create the project. All of the source code is included.

Who this course is for:

JavaScript application developers
Anyone who wants to do more with Google Apps
Anyone who wants to learn more about connecting Google Apps together

Google Apps Google Script - Content System Web App Project

What you'll learn

Explore related topics

Course content

Introduction to Google Script12 lectures • 1hr 5min

Google Sheets get data with App Script launch web apps15 lectures • 1hr 2min

Portal Gateway Project with Content System using Apps Script22 lectures • 2hr 6min

Bonus Content Sample code and exercises5 lectures • 15min

Requirements

Description

Who this course is for: