Starting Our Local Client6:28 with Ben Jakuben
Now let's take a look at the project starter files and connect to the Conversation service we just created in the previous video.
Here are some helpful guides and links to set up your local development environment.
- Installing Node.js and NPM on a Mac
- Installing Node.js and NPM on Windows
- Installing Node.js and NPM on Linux
- Download Atom - Free text editor
Project Repo on GitHub
We are essentially working through the steps outlined in this training guide in the Watson docs. This would be helpful to bookmark for reference and review.
Okay, so we're in a pretty good place with our service on Bluemix. 0:00 We've created it successfully, and even though it's not doing anything we have it, 0:03 and we have our credentials. 0:06 And that's important because next I want to get our local project set up. 0:07 And I wanna use those credentials, plug them in where they need to go here, and 0:11 make sure that our local app is communicating successfully with that 0:15 service we set up. 0:19 Even though it won't do anything It'll be a nice proof of concept that everything is 0:20 hooked together like it needs to be. 0:25 So if you've downloaded your starter files, unzipped them like this, and 0:26 opened them in your favorite text editor. 0:30 I'm gonna drag them over here and close this Welcome window. 0:32 And we'll review these files in the project in a little while. 0:37 But let's open up the .env file. 0:40 So, the first thing we're going to do is connect this code to our new service. 0:43 We do this by adding the unique ID from the workspace and the username and 0:47 password that we looked at. 0:51 All right, so we need the workspace ID. 0:53 Arman, where should I go to get that? 0:55 >> Absolutely right, Ben. 0:57 It is time to grab the workspace ID. 0:58 If you note on your left hand panel, 1:00 that very link to the bottom is back to workspace. 1:04 Perfect, and we're seeing our own Treehouse chatbot. 1:08 Let's click those three action items, and click View details. 1:12 >> There it is. 1:17 >> There it is. 1:18 >> And you've created a copy link right there, great. 1:18 >> Absolutely. 1:21 >> And now back here where we have Add your workspace ID, 1:23 I'm going to paste in the ID. 1:26 And next we need to go back and get the conversation username and password. 1:28 >> Absolutely, for that, Ben, we will go back to the Bluemix login page, 1:32 not the conversation service. 1:36 >> Okay, so I'm gonna click over here. 1:38 >> And we will click service credentials- >> There we go. 1:40 >> For the conversation service build >> And we already have it open. 1:42 >> And there they are. 1:46 We will copy the innards and bits within the double quotations. 1:47 >> Cool, I'm going to copy both and clean up any other file. 1:51 And this URL is the same thing? 1:53 >> Correct. >> Then we see over here, right. 1:55 So this URL is the conversation API. 1:58 >> It's a good habit to actually ensure that the URL provided is exactly the same 2:00 indeed. 2:05 >> Good point. 2:06 And I'm just going to clean up the quotes and other information, 2:07 paste in the username and a password. 2:11 Now the other thing we have here in the .emv file is the version date. 2:14 Can you tell us briefly why this date is important, and 2:17 how that relates to versioning? 2:20 >> Absolutely. 2:22 As you might imagine, we release our software quite frequently under 2:23 our Agile methodologies, once every three weeks to be exact. 2:28 And this way we are able to update our environmental files, 2:32 our hidden .env file with the credentials, with the URL. 2:39 And that surface URL is closely tied in to the version where it was released. 2:45 >> Okay cool so yeah, if people are testing as of a certain date, if they 2:51 leave this version date, they can kind of guarantee that it will work the same way. 2:55 All right, so we need to save this change, and now we're ready to hop over to 3:00 Terminal and make sure that this runs and we can connect. 3:04 >> If you're not very comfortable with the Terminal, don't worry about it, 3:07 we're not gonna use it very much. 3:10 We just need it to start and stop our running app here. 3:12 On a Mac, you can bring up Terminal by hitting Command space, or 3:15 hitting the little Search bar in the upper right and type Terminal. 3:18 I have mine open already, so I'm gonna Escape out of here. 3:22 And Armin, how should students go about it on Windows? 3:24 On Windows, Ben, typically we would go to the Start menu and really issue 3:27 the command CMD and it would bring up the command prompt for us to run our services. 3:32 >> Okay, cool. 3:37 Now we're gonna change into the Directory where we unzipped our project. 3:38 And we can do that through the Command line. 3:42 But there is also a little trick you can use, if you have the folder open, 3:44 you want to make sure you grab the parent folder. 3:47 It has, what is the important files for the project? 3:49 It's the app.JS? 3:52 >> Yes, very well. 3:53 It's the app.JS that we want to have visible, 3:55 especially wherever we are running our commands. 4:00 >> Right, so yeah, app.js the manifest and the things that are important to 4:05 the project, that's how we know that we're in the right directory. 4:07 So now I'm going to click on the folder and drag it over here and 4:10 changes my directory to that exact path. 4:14 >> I have to click over here, hit Enter, and here we go. 4:17 We're in the right spot. 4:20 >> Excellent, Ben. 4:21 It's a good habit to do an LS list to see the contents of our folder. 4:21 And now we have justification that we are indeed at the right spot. 4:28 >> Excellent, all right. 4:32 So from here- >> That's wonderful, Ben. 4:33 I think we're ready to run the node package manager. 4:35 As you can imagine, all applications have dependencies. 4:39 With Java, it's JRE. 4:44 With node packages, we install node package managers. 4:46 The way to do that is by tapping in install NPM. 4:51 >> Okay, now I've actually already run NPM install for this project. 4:57 So, it's already installed the required dependencies. 5:01 Otherwise, you would see a big list of everything that was installed here, but 5:04 in this case, it's already installed, so we're good to go. 5:07 >> And one way to ensure that our packages are installed, Ben, 5:09 is if you go into our working directory, 5:14 we should be able to see the node package directory. 5:17 >> Right, if I go here to node modules and make a big list, 5:21 there's everything that was installed. 5:24 Wonderful. 5:26 So I'm gonna back out and make sure I'm in the parent directory. 5:27 And there it is, I see app.js. 5:32 And we're ready to try this out. 5:33 We can run npm start, which will start the app.js file. 5:35 And okay, it says that the server is running on port 3000. 5:41 Great, so we want to remember that number, 3000. 5:44 Wonderful, we go to a browser and we'll open a new tab and 5:46 our URL would be localhost:3000. 5:52 >> And yeah look at this, we've got a working app running on localhost:3000. 5:55 And let's try typing something, see if anything happens. 6:00 And no, nothing happens yet because we haven't set anything up. 6:03 So, this isn't very exciting yet, but it is a big deal. 6:06 We have a client app connecting to our brand new conversation service. 6:09 >> Folks, in the next section of this course we're going to build 6:13 a simple conversation about how to turn on things in a car. 6:18 We'll also show you some examples of how to build more complex interactions. 6:22 >> See you soon! 6:27
You need to sign up for Treehouse in order to download course files.Sign up