Download Subtitles and Closed Captions (CC) from YouTube

Enter the URL of the YouTube video to download subtitles in many different formats and languages.

The bots are coming! Developing bots for Hangouts Chat with English - CC subtitles   Complain



WESLEY CHUN: What we just saw was bot power in action,

the ability to query for information

from one or more sources and have it summarize succinctly

for all in a chat room.

Hi, everyone.

Welcome to another episode of the G Suite Dev show.

I'm your host, Wesley Chun.

I'm excited to introduce you to the Hangouts Chat developer

platform in API.

Of course we can converse with colleagues in chat rooms,

but making data requests or automating work

at the same time is much more powerful.

In today's intro video, I'll show you not one,

but two ways of building chat bots.

Let's start with the Hello World for Hangouts Chat,

the echo bot.

Here you can see it's a full one-line JavaScript glory.

As you can see, the function name is called onMessage.

And it takes an event object, as a result of the message that

was posted in the chat room, and all our bot

does is greet the user and echoes back what they wrote.

Can't get any easier than this.

Check the docs for a slightly longer quickstart

for more info.

However, your bot will likely be more complex.

So we need to investigate writing bots a little further

before diving into more code.

The next step is to discuss some basics on how to build a bot

and how they work.

We do this by recognizing what happens

to bots, or in other words, what events are sent to bots.

Once a bot is added to a chat room,

users can interact with it.

When users message a bot, Hangouts Chat

sends the message to your bot, along

with a message type and other data.

There are four message types.

ADDED_TO_SPACE is the first message

a bot gets when it's added to a room or a Direct Message or DM.

Your bot would typically send back a message like,

thanks for adding me to this room.

The second message type is REMOVED_FROM_SPACE.

This is a message that's received by the bot

after it has been removed from a room, or a DM.

Since your bot's been removed, there's no response.

MESSAGE is a normal message that's sent by a user to a bot,

and these are the most common, as you can imagine.

Your bot has to service the request

and send back an appropriate response.

The last message type is CARD_CLICKED.

This means a user clicked on an interactive card in Hangouts

Chat instead of sending a message.

Your bot either sends an appropriate response or updates

the UI card or maybe both.

JavaScript and Python are two popular platforms,

so we'll demo bots in each one for you.

The JavaScript runs on Google Apps Script,

while its Python equivalent runs on Google App Engine.

Apps Script has basic event handling for developers

and calls the appropriately-named function.

One of the reasons why using Apps Script

is easier than other platforms, you just

have to name your functions with the exact names that

are supported for each message type.

App Engine is a bit lower level, so you

need to grab the request body, parse a JSON payload,

and determine the message type and contents.

In other words, you need to check

all the events that come in and see what message type it is.

Then take the appropriate action.

Now it's time to talk about our sample bot today.

Asking your colleagues to vote on something

is fairly common, whether it be who's going out to lunch

or who's in for the basketball game after work.

Let's build a simple vote bot by which participants

can issue an up or down vote, as well as create a new vote.

Let's go to a computer so I can show you this example

in both JavaScript and Python.

The samples we're looking at in this Dev Bot video are both

available on GitHub, so feel free to follow along


chat samples.

The bot we're implementing is a text-only version

of the vote bot.

Let's look at it in Apps Script first.

Here's what the vote card looks like.

You'll see plus 1 and minus 1 buttons for up and down votes,

as well as a new button for starting new votes, which

is the default action.


Now we can look at the votetextbot.js script.

Scrolling down to the bottom, you'll

see how Apps Script processes the message types,



Well, it does so by calling the corresponding similarly-named

On function we looked at earlier.

In the vote bot, we're only processing


and not taking any action when the bot is added to

or removed from the space.

onMessage ignores whatever message the user

has sent, creates a new vote card, and returns it.

onCardClick is where the real magic happens.

If new vote is selected, it does the exact same thing

as when a user sends any message to the bot.

It creates a new vote.

When up or down vote are clicked,

those actions are passed as a string parameter in the event

object along with the current vote count, which

was converted to a string.

When the vote count variable is created,

that value must first be converted back to an integer

so that it can be incremented on an up vote

or decremented on a down vote.

Now when the card payload is created using createMessage,

the command to update the current card only if a new vote

was not selected, meaning an up or down vote.

Scrolling up to createMessage, you'll

see that it converts that vote count to a string,

as mentioned before, then uses the shouldUpdate flag

to indicate a new vote card, if true,

or update the existing card otherwise,

meaning an up vote or down vote.

Then it pieces the card together section by section

as JSON markup.

This gets returned to Hangouts Chat, which then renders a card

to users in the chat room.

There are no surprises when you run this example.

Clicking on plus 1 ups the count, while minus 1

brings it down.

And NEW starts a new vote.

Now, if we hop up and over to the Python App Engine version,

the core functionality is also in a single file,,

plus the App Engine app.yaml config file.

Scrolling down to the bottom again,

you'll see that it's slightly more lower level than Apps

Script version, because you have to introspect the payload that

comes from the HTTP post request.

There's an if, else if, else that takes

the same actions as the Apps Script version,

depending on the message type.

Similarly, there's an analog to create message

that puts together the corresponding JSON payload

returned to Hangouts Chat.

We won't run this version.

But trust me, it's the same thing.

Overall, I find this bot useful, because it's

a bit more useful than what you get from the quickstarts,

and you get to learn about interactive cards.

Not bad, right?

We picked Apps Script and Python App Engine for a reason.

They require few lines of code and are portable.

For example, the Apps Script sample

can be ported to Cloud functions or node.js

in a straightforward way.

Similarly, the Python example can be ported to Flask.

Then you can run that app on either App Engine

or your own stack.

You may have noticed that bots work

a bit differently from standard APIs, you know,

where your app gets some input, say, from a website

or other form of input.

And then you're up with the proper credentials.

We'll make a call to the API, which processes the requests,

and then sends back a response, to which you

respond to your user-- you know, typical client server stuff.

But bots are a little bit different

in that the original request comes

from a user in a chat room, which

means Hangouts Chat is what gets the message,

and its servers contact your apps.

You service the request and respond back

to Hangouts Chat, which then renders your response back

into the chat room.

All right.

The roles are almost reversed, meaning

your bot is kind of like the API, servicing

requests made in chat rooms.

Does that makes sense?

All right.

So that means that bots generally live on some server


Now let's talk where.

A wide variety of platforms that host bots are supported.

I'll argue that Google Apps Script is the easiest

to get started with.

You code in JavaScript, but more importantly, Apps Script,

gives you and your data and your bot access

to data and functionality from Gmail, Google Drive, Calendar,

Docs, Sheets, Slides, and more.

Best of all, Apps Script is serverless,

meaning that Google hosts your app.

So you don't need to submit up your own VM or other stack


If you want to code in JavaScript, but more like Node,

but also stay serverless, you have two options.

Want tighter integration with the Google Cloud Platform,

or GCP for short, instead of G Suite?

Well, then choose Google Cloud Functions.

Building a mobile app or a mobile web app with Firebase?

Well, then choose Cloud Functions for Firebase.

Want to read more about these choices?

Well, check this page in the docs

and realize they're both the same product, but tuned

for either the cloud or Firebase.

Still want to live in the land of serverless,

but want more choices and languages?

Then consider Google App Engine, platform as a service,

or app hosting in the cloud.

We showed you Python earlier, but App Engine also

supports Java, PHP, Go, and more.

Need more control?

Well, then you're going to have to spin up

a VM to host your bot.

You can use Google Compute Engine or any public or private

cloud provider.

Now that you may have noticed, we didn't do any authorization,

nor did we use the Hangouts Chat API.

That's because we created a synchronous bot,

meaning it was able to pull in those sales numbers

and respond back to the user immediately.

Some queries may take longer or have to talk to more systems.

In those cases, you can build a bot

that responds asynchronously when results are ready.

In these cases, you would use the API or other technique

for responding back to the chat room.

We'll take a look at those in another video.

For now, we want you to have enough to get started.

Check out the first link to learn more about bot concepts.

The next link is for those who want to learn more

about actually building bots.

Finally, if you're not ready to build bots yet

but want to see more examples, we've

got a page in the docs for you too.

Got your vote bot working and want to break out to the box?

Well, here's a challenge for you.

Make any or all of these five additional upgrades.

One, add images.

Two, keep track of who has voted and who hasn't.

Three, don't let the vote count go below zero.

Four, only allow down votes from users who have at least one

up vote.

And five, the user who starts a new vote

should be able to choose a topic,

you know, like lunch, after-work game, and so on.

By the way, the first one has already been done for you.

So check it out in the docs page on interactive cards.

Hope you're ready to build some bots.

No longer are chat rooms just for conversations.

With feature-rich, intelligent bots,

users can automate tasks, get critical information,

or do other heavy lifting with just a simple message.

We're excited at the possibilities that

await both developers and G Suite users on the new Hangouts

Chat developer platform.

Be sure to subscribe to our channel,

and tune in again next time.

This is Wesley Chun from Google, and we'll see you next time

upstairs in the G Suite.


Download Subtitles Download Video Download Audio

↑ Return to Top ↑ - contextual dictionary