Putting Together the Pieces

Building Apps with Google Apps Script

Saurabh Gupta

Product Manager, Google

DriveEye

Shared Folder Notifications

​

Built using Apps Script

http://goo.gl/90W4e

DriveEye - Add Folders

DriveEye - Add files to subscribed folders

2009

​

​

2010

​

​

Apps Script over the years

​

Scripts in Spreadsheets

(Custom Functions)

​

UiApp & Web App

Gallery

Sharing

Scripts in Sites

Introducing

​

​

script.google.com

​

​

Create scripts in

Google Drive

​

OR

​

script.google.com

New!

Did anything change?

All the features of Apps Script are still available

​

No changes to Services

​

No changes to Events and Triggers

More

2009

​

​

2011

​

​

​

Scripts in Spreadsheets

(Custom Functions)

​

Script in Sites

Container-bound scripts

Apps Script over the years

New Features of Google Apps Script

Create Standalone Scripts

1

Container-bound vs. Standalone Scripts

Standalone

Container-bound

Standalone vs. Container-bound - Create scripts from script.google.com

Standalone vs. Container-bound Scripts

Standalone

Container-bound

Follow lifecycle of the container

​

Script gets deleted when parent spreadsheet is trashed

Independent lifecycle

​

​

Scripts get created, renamed, trashed from Drive

Standalone vs. Container-bound - Finding Scripts

Standalone

Container-bound

Locate the parent spreadsheet and then go to Script editor.

Standalone vs. Container-bound - Search using Code Snippets

Standalone

Designing DriveEye - 3 Standalone Projects

DriveEye

Main Project

Folder Subscription API

Data Model

What's the best way to build UI and store data?

2009

​

​

​

Scripts in Spreadsheets

(Custom Functions)

​

2010

​

​

UiApp

Apps Script over the years

New Features of Google Apps Script

Create Standalone Scripts

ScriptDb

HtmlService

2

3

1

To Learn more about ScriptDb

"Storing Data using Google Apps Script"

​

When: June 28th, 2012

Time: 17:15pm

Where: Room 7

Who: Drew Csillag

​

To Learn more about HtmlService and using client side JS in Apps Script

"Use what you know: Html and JavaScript in Apps Script"

​

When: June 28th, 2012

Time: 2:45pm

Where: Room 11

Who: Corey Goldfeder

​

Designing DriveEye - 3 Standalone Projects

DriveEye

Main Project

Folder Subscription API

Data Model

1

2

3

DriveEye - Create three standalone script projects

function User(userId, driveFolders, triggerId) {� this.userId = userId;� this.driveFolders = driveFolders;� this.triggerId = triggerId;�}�function DriveFolder(folderId, folderName, files) {� this.folderId = folderId;� this.folderName = folderName;� // string array of files id� this.files = files;�}

​

​

Project 1 - Data model to manage folder subscriptions

�function addFolderSubscription(folderName)�function getSubscribedFolders()�function removeFolderSubscription(folderName)�function removeUser()�function getUser()

​

​

Project 2 - API to manage folder subscriptions

How to glue standalone projects?

Share scripts to collaborate and organize your code

2010

​

​

UiApp & Web App

Gallery

Sharing

Apps Script over the years

New Features of Google Apps Script

Share scripts in a simple way

Create Standalone Scripts

ScriptDb

HtmlService

2

3

1

4

Simple Sharing

Google Docs way to share scripts

Container-bound scripts inherit permissions from the parent

1

2

New!

Understanding Permissions

Two types of permissions View, Edit

All Viewers get Execute permissions

Share Scripts using "Share" button

“How does sharing help me organize my code?”

- Logical User

​

good ol'

​

Libraries

3 steps to create script libraries

Share script with view permissions

Save a Version of your script

Share project key

1

2

3

• Convert two projects into library
• Data model library
• Folder subscription library

​

• Include the two libraries into the main UI script

​

​

DriveEye

DriveEye - Create Two Libraries

Insert Library Project Key

​

4 steps for using a script library

Select a version

​

4 steps for using a script library

Select an identifier

​

4 steps for using a script library

Identifier becomes the top level class name for that library

​

Use Library with identifier

​

4 steps for using a script library

Autocomplete shows all the functions that are available in the library

​

function getNewFolderFromId_(folderId) {� var folder = DocsList.getFolderById(folderId);� var folderName = folder.getName();� // ...� var driveFolder = � new DataModel.DriveFolder(folderId, folderName, fileIds);� return driveFolder;�}

​

​

​

Using data model library

function getFolders() {� return FolderAlertLib.getSubscribedFolders();�}��function createFolder(folderName) {� return FolderAlertLib.addFolderSubscription(folderName); �}��function removeFolder(folderName) {� return FolderAlertLib.removeFolderSubscription(folderName);�}

​

​

​

​

Using folder subscription api

What can I do with scripts?

Deploy scripts as web apps

2010

​

​

UiApp & Web App

Gallery

Sharing

Apps Script over the years

Understanding Web Apps

Web App

Active User

(User on the keyboard)

Bob

Bob's Data

Sam

New Features of Google Apps Script

Deploy new type of web apps

Share scripts in a simple way

Create Standalone Scripts

ScriptDb

HtmlService

2

3

1

4

5

Scripts run as the end user

Web App

Active User == Effective User

Sam's Data

Sam

Advantages of scripts running as active user

• Scripts asks user to grant access to resources

• Scripts identifies the end-user

• Script uses end-user's quota
• Scripts have execution quota. Quota is tied to the account which executes the script.

Two types of Web Apps

Active User and Effective User is the same end-user

Active User is the end user

Effective User is the developer

New!

How to Deploy a web app

Select versions

Select type of web app

Access Control

Versioning for Web Apps

• Immutable Url for web apps

• Change versions without affecting users

• Development Url for testing

�function doGet(e) {� var html = HtmlService.createFromFile(...);� // ... more code� // ... more ui code� return htmlOutput;�}

​

​

DriveEye - Writing a simple web app

​

function addFolderSubscription(folderName) {� // ...� // create a new trigger� var triggerId =

ScriptApp.newTrigger("hasNewFiles")� .timeBased().everyMinutes(5)

.create().getUniqueId();� // ... �}

DriveEye - Creating Triggers for each user

How do users find your web app?

2010

​

​

UiApp & Web App

Gallery

Sharing

Apps Script over the years

New Features of Google Apps Script

Integration with Chrome Web Store

Deploy new type of web apps

Share scripts in a simple way

Create Standalone Scripts

ScriptDb

HtmlService

2

3

1

4

5

6

New!

• Easy steps to verify ownership

• One click uploads in Chrome Web Store

What's so special about Chrome Web Store integration?

Verify the ownership using Google Webmaster Central

• Copy the meta-tags from Webmaster Central
• Paste the meta-tags in "Register with Chrome Web Store dialog"

​

Register the Web App in Chrome Web Store

• Required to register as a developer on Chrome Web Store
• From Script editor, click Publish > Register with Chrome Web Store
• Every application in Chrome Web Store needs a manifest
• Visit Developer Dashboard in Chrome Web Store to view the uploaded item

​

1

2

4

3

Customize Listing Chrome Web Store

• Standard Chrome Web Store requirements
• Icons, Screenshots and Display Images
• Good quality assets == Better rank in Chrome Web Store

​

​

1

2

3

4

Publish and go live !

​

​

1

2

3

4

Completing the story

​

DriveEye

Shared Folder Notifications

Demo of DriveEye

New Features of Google Apps Script

Integration with Chrome Web Store

Deploy new type of web apps

Share scripts in a simple way

Create Standalone Scripts

ScriptDb

HtmlService

2

3

1

4

5

6

script.google.com

#io12

+Saurabh Gupta

script.google.com

#io12