"The Rails Asset Pipeline and Styling" was retired on April 30, 2018. You are now viewing the recommended replacement.
Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed Build a Chatbot with Watson APIs!
You have completed Build a Chatbot with Watson APIs!
Preview
How does our local app communicate with the Conversation service? Let's take a few minutes to review the chatbot page and JavaScript code in our starter files.
Supporting Courses
- Node.js Basics: Remember to check out our Node course if you want more help understanding how to write a Node app that can consume an API like this.
- Express Basics: Express is used for the web client code that users interact with.
- REST API Basics: This short course explains how REST APIs (like the Watson APIs) are designed and used.
Documentation
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
If you're like me, at this point
you're thinking, wait a minute.
0:00
How is my app communicating
with this service?
0:03
Let's take just a few minutes here
to review the Chatbot page and
0:05
the code in our starter files.
0:08
Now to set the stage,
0:10
we talked earlier about prerequisite
knowledge of this course.
0:11
Ideally, you have a pretty
good understanding of Node or
0:14
another language, and
how to interact with an API.
0:17
We have supporting material to teach
you these parts if you need it.
0:20
But it's also okay to
just follow along here,
0:23
even if you don't understand
how all this code works.
0:25
You can circle back to that
after completing this course.
0:28
Let's start by looking
at what the user sees.
0:32
Armen has created a webpage for the UI,
and it's here in the public folder.
0:34
And we want the index.html file.
0:39
We don't need to go through this
in detail, but if we open it up,
0:42
we can see a couple of things.
0:44
We have a Chat Button and there is
a column, that chat-column on the left.
0:46
And the payload-column, which is
the JSON data that we see on the right.
0:51
All of the work to capture input and
display output is here in the js folder
0:55
inside that public directory, but
we're not gonna focus on any of that code.
0:59
If you wanna brush up on that
kind of JavaScript programming,
1:03
check out our Node and Express courses.
1:05
So back in the main project directory,
1:08
there are three files that
deserves special attention.
1:10
The first is that .env
file which we saw earlier.
1:13
This is the configuration file that
makes it easy to manage our environment.
1:16
We'll add information in here when
we look at discovery service too.
1:20
Next up is the manifest file.
1:24
We aren't going to change anything here,
but
1:26
this file is required if we wanna
deploy this app on Bluemix.
1:29
Armen, is there anything else that
students should know about using
1:32
the manifest file?
1:34
>> The manifest file is a key ingredient
file of most packages that you would get.
1:36
It contains metadata for
a group of accompanying files.
1:42
It's within the manifest file that
we have our host name defined.
1:47
Your app name that would appear in
the URL is the name that actually comes
1:52
from the manifest file.
1:57
And it comes in handy when you want to
push your application back up to Bluemix.
1:59
You would issue the command cf,
Cloud Foundry cf push,
2:04
followed by the name that you
defined in your manifest file.
2:08
>> Okay, cool.
2:13
Yeah, and I know there's a lot of
information about how exactly to
2:14
configure the manifest file in,
again, in documentation.
2:17
All right, and last but not least,
we have the app.js file.
2:21
This is the heart of our Node application.
2:24
Let's take a quick look
at how it's structured.
2:26
Okay, so
let's scroll past the comments at the top.
2:29
And this first line on line 20 here is
needed for us to use that .env file.
2:31
Then we have a few requirements and
lines for setup.
2:38
Now this line right here, line 24,
is for the conversation service.
2:42
And this one that's commented out is for
the discovery service,
2:46
which we'll add later.
2:48
These lines get us the Watson dependencies
that are used to access Watson APIs.
2:50
So, speaking of the APIs,
if we scroll down,
2:55
we see a block of code here that creates
a wrapper for us called conversation.
2:58
It's initialized with the parameters
that we set in the in the env file.
3:03
Here you could see how we access
process.env, and then we give the name for
3:06
the properties that we set
in the in the env file.
3:11
Then we have a big section here,
app.post and all of its accompanying code,
3:14
which sends data to the API and
parses a response.
3:19
This is where most of the work is done.
3:23
This kind of code is available as samples
throughout the Watson documentation.
3:25
But here it is, a fully functional
example for you to build from.
3:29
So the first section up top sets
up a workspace, which we need for
3:33
our call to the service.
3:36
Next we set up the payload, or
all the important data, and
3:38
that gets initialized here.
3:42
And we set the text to
the text from our input form.
3:44
Finally, we use the conversation
wrapper to send the payload
3:48
with this message function.
3:51
We must provide a callback function
that handles both successful and
3:53
unsuccessful calls.
3:57
In this case, we're simply returning
an error if the error variable is set.
3:58
Or otherwise, we return the json response,
4:02
which our UI then formats to
a text bubble for the user.
4:05
If you're wondering what samples
look like in other languages,
4:09
check out this link to the docs
from the teacher's notes.
4:12
You can pick different things
from the left over here.
4:14
And you can see the example requests
here in Java or Node or Python.
4:18
I realize this was a little rushed.
4:25
But we aren't going to
change any of this code.
4:27
And we really wanna focus on
the things that you need to know
4:29
to set up on Bluemix to
make these services work.
4:31
>> That's great, Ben, absolutely.
4:35
Let's get back to our conversation
flow by creating a new entity
4:36
to go along with the intent we set up.
4:41
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up