[MUSIC PLAYING]
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
at GitHub.com/gsuitedevs/hangouts
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.
OK.
Now we can look at the votetextbot.js script.
Scrolling down to the bottom, you'll
see how Apps Script processes the message types,
you know, ADDED_TO_SPACE, REMOVED_FROM_SPACE,
MESSAGE, and CARD_CLICKED.
Well, it does so by calling the corresponding similarly-named
On function we looked at earlier.
In the vote bot, we're only processing
MESSAGE and CARD_CLICKED messages
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, bot.py,
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
somewhere.
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
components.
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.
[MUSIC PLAYING]