(music)
>> We will now be starting our Microsoft sponsored
segment of the stream.
We're going to be making a weather bot.
So we're gonna be using something called Composer
which is part of Microsoft Azure.
We're gonna do something a little bit fun with it.
We're going to make it human.
We don't want a bot saying,
good morning, what would you like to do?
We want a bot that's like, hey, what's going on?
So let's start by opening up Command Prompt.
We need to Git, and install it.
I've already done that.
We need Node.js.
And we need Yarn.
and we need .NET.
We'll also need to get Composer.
which is a download link there.
And the emulator for the Composer, which is a link there.
And finally, we wanna get OpenWeather,
which we'll be connecting to to get our weather.
And if you make an account,
you'll need to confirm the account.
And then shortly after, your keys will be valid
and able to be used in what we're about to do.
I'm gonna go to the drive that I've put this on.
I put it in folder Bots,
and then we're going to navigate to botframework-composer.
Then we're gonna go to the folder Composer
and here we're going to put in yarn startall,
and we're gonna let that start up.
Great, now it's running.
So now we can open up our localhost 3000
and we get to this page here.
So far so good.
So here, let me click on New.
We create bot from scratch, then we're gonna name it.
We wanna make this like our friend,
It's not just gonna be a regular bot.
It's going to be WeatherBotFriend.
Weather bot will be our friend,
but also,
tell us the weather.
And that will be created in the location
that you've set this all up in.
So here is our blank bot.
So when we first start this up,
it will give a standard greeting.
Why don't I show you guys what that looks like?
So Start Bot, and once this reloads,
we will open it up in the emulator.
So welcome to EmptyBot sample.
That's not really friendly yet, is it?
We're gonna go over to our send a response here.
This is our standard response.
But our bot's gonna be a little friendlier.
It's gonna be like, hey, what's up?
This is just our starting dialog.
We have to put in the command weather
before it knows that we want to find the weather.
So we're going to add in a new dialog here.
We're gonna call it getWeather.
Now we have this new dialog here.
The first thing we're gonna do
is add a send response that will say, let's check it out.
Okay.
And over here, I should actually put in, the very beginning.
There it is.
Say, sup.
Type WEATHER to get the weather.
There we go, now we have our instructions.
Then we have our BeginDialog.
This is what will happen once we've typed the weather in,
but we'll need to make a trigger for it first.
The first thing we need to do is go back to our weather bot
and make sure it's a Regular Expression Recognizer Type.
Okay.
Now we can add a new trigger on WeatherBotFriend.
And we're gonna keep it intent recognized
and it's going to be weather,
and here, it will be weather as well.
There we go, now we can submit it.
Great.
We will create from here a new dialog.
So dialog management, begin dialog.
Okay.
And from the dialog name,
we're going to link it to getWeather.
We're going to put in, I think that's it, actually.
I think this will speak in,
this will call the getWeather here that'll say,
let's check it out.
So, let's double check.
We'll restart the bot.
Test in Emulator.
And so now, sup. Type WEATHER to get the weather.
Let's try it.
Now it says, let's check it out.
Great, so far so good.
Now we need to actually get the weather.
We're going to go over to our getWeather panel, BeginDialog
and we're going to add, ask a question, text.
Here's what the bot's going to ask us.
So it can say something like, what's your zip code?
And then we can put in our property here,
which is going to be user.zipcode.
And the output format, we want to make sure we trim it.
So we're just gonna go trim(this.value),
that will get rid of any spaces we have
if some of the user puts in spaces.
So this is our user input.
This is what we're putting in,
our zip code property and our trimming it.
Now, the other here is what happens if it's not recognized.
So I can say something like,
I don't understand, or I don't understand.
Try the format 12345.
This is what it will say if it doesn't recognize it.
And we're going to set up rules,
which is going to be that the length of this.value
must equal five.
If it doesn't, we can just say something like, Error.
This will be similar let's put in the same thing as this,
let's put in the same thing here.
And we're going to put in a default
which will just be 12345.
If they...
max out the number of inputs.
Now, we're going to add an HTTP request.
And that's going to be right here.
We can go to access external resource, send an HTTP request.
It's gonna be a type GET.
And the URL that we're getting
is going to be from OpenWeather.
We're gonna get this URL right here.
So I'm gonna copy and paste that over here to our URL,
except here it says your API token.
I'm going to get my token.
Actually I can show you
and I'll just delete it after I got it.
My API keys.
So I can copy this, copy.
And I'm gonna put that over here
where it says your API token.
So we put that key here, paste it in, put in properties.
We wanna make sure that it's going to be,
the result property is dialog.api_response
and we want it to be of type json.
Great.
We need to put in a condition to make sure
we know whether or not it actually is able to get the thing
we're looking for.
So let's put in a create condition, Branch: if/else.
And on true,
we want to put set property, that's right.
Manage properties, set property.
And this is going to be our dialog.weather.
And the value is going to equal dialog.api
_response.content.
I forgot to put in the condition.
So the condition here is that it's successful.
So...
dialog.api, whoops,
api_response.
The status code
equals 200, so this was what we're going to find out.
Dialog.api_response, status code equals 200.
If so, then we're good.
And we can set the property here.
Then we need to let the user know what the result was.
So we'll put in, send a response,
and we're going to fill that in with,
the weather is, and we're gonna put in,
dialog.weather.weather,
and the temperature is
dialog.weather.temp.
And then we're gonna put, and degrees semi-colon.
And this will give us the weather as a message.
We're also gonna put in a false condition
if we get an error.
We're going to send a response and say,
we have a problem.
And then we're gonna let the user know what it was,
which is
dialog.api
_response
.content.message.
That will say what the error was.
And after that, we're going to delete the input
of the zip codes, so that we don't save
something that didn't work.
'Cause once we save it,
then next time the user asks for the weather,
we'll just give it to them.
We wanna put in manage properties, delete a property,
and it will be user.zipcode.
That's an expression, user.zipcode.
I think that's it.
Let's give that a try, make sure we got everything.
Let's start the bot again.
And it says, sup. Type WEATHER to get the weather.
Let's do that.
What's your zip code, bud?
90210.
Oh, look, the weather is haze and temperature is 70 degrees.
So that's a little preview, a little explanation
of setting up your Bot Framework Composer.
There's lots of cool stuff you can do within this.
As you can see, there's this nice user experience,
you can just select things.
You can see what things are available
and it kind of walks you through it.
And you can customize things how you like
as we did in this example.
But that's it, guys.
Thank you very much to Microsoft Azure
for sponsoring today's stream.
And I hope you guys all enjoy the weather bot.