Thank you so much. Thank you. Hello, everyone.
Welcome to automated G Suite with app script and Angular. My name’s Grant Timmerman and
I’m a developer platform engineer at Google. So, I work at Google in San Francisco. Where
I work on G Suite developer products. Today I’m really excited to teach you how you can
leverage Google app script and Angular to quickly build powerful applications.
These are some of the G Suite products that I work. But first, let’s take a selfie. Right?
This means it’s up high. Chinese for selfie I don’t know if I can get everyone. But I’ll
try. Three, two, one… no. Okay. I definitely
need to upgrade my iPhone to an Android phone. Okay. That would be lovely. Did we get a selfie?
Oh, great. Okay. I don’t know if I can get everyone. But I’ll try. There’s the crowd.
Great. Thank you so much. And my camera up. Okay.
So, before we begin, let me give some introductions. First, G Suite is the site of collaboration
for activity tools within Google Cloud. You can see that Google Cloud includes everything
from Google Cloud platform, G Suite, map platform, Chrome, Android. And today I’m going to be
focusing on G Suite. The G Suite does everything from Gmail to
Drive to Google Calendar. As well as our editors, docs, sheets, slides and forms. And our administrative
tools. Google classroom. App script provides a layer of abstraction for integrating Google
APIs from Gmail to Google Calendar. Angular provides a complete client side collision
for web applications. Today I believe with app script and Angular you can build powerful
web applications to automate tasks in minutes. But these things don’t really matter. You
can’t meet users where they are. Today I want to show you how you can build add ons with
Angular and app script within Google Sheets. From a high level, we’ll be using the following.
First, Google Cloud will host our application and our server side code. App script will
be our backend service that will interact with Google Sheets as well as other APIs.
Angular will be used for our frontend web, web components. This tool called class is
the app script CLI that will allow us to use TypeScript. And we’ll also use some other
tool look stack driver logging which should be cool. The YouTube API, the Gmail API and
even GitHub. With app script, you have Legos. You can build an incredible. It’s really up
to whatever your mind is the limit. Let me show you a demo in action. Cool. You’ll
see great. So, here I have a Google Sheet. It has actually the list of speakers for this
year’s event. You see you have the name, Twitter, session type, speaker type, title, et cetera.
This is great. But it’s only a static set of data. How can we add some interactivity
with it? Well, with Google App Script we can add side menus. Here I’ve created a little
button that will pop out the side menu. So, we’ll actually see that on the right hand
side we’ll see contextual information the GitHub. And other information about specific
users that we’re highlighting. We’ll actually evening get the top results from the YouTube
API showing right here in the side panel. So, how does that work? Let’s show the code.
So, first, let me show you this tool called class. Class stands for the command line app
script tool. It allows you to upload and download projects, et cetera.
So, here I have some simple kit. And here I’m just declaring a function called send
mail. And we’re saying on the first line, Gmail app.sendmail. This uses the Google email
API. And in one line of code we can send an email. Let’s actually try to do this right
now. So, what this is doing in the background is we’re actually we have a note binary here
called class. And we’re communicating to the App Script API which then makes a request
to Gmail’s API to send an email. And if that call is successful, we should see an email
sent to Keith. And so, we’ve just sent an email. We can also do other things like, for
example, surfing YouTube videos. Let’s say I’m doing some analytics and like
this area at the top and you get results programmatically of the query “AngularConnect,” well, from
app script we can do that easily. From here, we can just search and find the video. Let
me just find the demo. And you can see you have a list of the top ten YouTube videos.
To confirm, that’s actually me. That’s quite funny. Wow. What are the odds? Okay. So, just
to explain that a little bit. Here we’re declaring a function. And you declare our videos. And
we search for specifically the ID and the snippet of our YouTube videos. You provide
the query, AngularConnect, the type of video. For example, and we just want ten results.
And then for each of these items we just log the output.
And so, this is actually what’s the same function that’s populating this dialogue. And this
one we’re just getting one result. No worries. So, in summary, I showed you how you can use
Google Sheets and you can create custom type menus in the pixels on the side of Google
Sheets. You can build a custom web application that can connected APIs. Like GitHub API,
et cetera. You can select whichever you would like, and you’ll
get live results on the right hand side box. The beauty about this is you don’t need to
worry about listing any of your code. It all lives within Google Cloud. And any user that
has access to the spreadsheet has access to your application.
So, we integrated with GitHub, Gmail and Google Sheets as well as the YouTube API very quickly.
So, one of the advantages of App Script is you’re able to write API calls like this without
having to worry about any OAuth or server-side potentials. OAuth is built into App Script.
And so, you don’t need to worry about managing if your application has authenticated its
API or not. Here we’re just searching for it and getting a video back. And then actually
so, let’s say you would like to convert this file into TypeScript, right? And run it on
Google App Script servers. So, to do that, there’s simply two things.
One is you rename your file to.js. And then you’ll see there’s some error. But with all
the type great. Variables should be in the file. The results. And when we actually push
to the server, we’re going to be transpiling the TypeScript into Google App Script. And
so, we could immediately invoke the function. So, let me just run the send mail function
again and hopefully… hopefully this will work.
You use TypeScript, Google App Script, all you have to do is import Google App Script
and you can get all this autocompletion. And it will send an email. It’s really quite simple.
And once you are able to send emails, you can actually you can execute a command from
the functions from the command line. And you can do that. Ideally, we would have [inaudible]
that’s it. How to automate G Suite with App Script and Angular. My name is Grant Timmerman.
Feel free to ask me any questions. Thank you so much.