Starting Our Local Client

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