Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
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