Build a Stock Market Web App With Node and Javascript | John Elder | Skillshare

Build a Stock Market Web App With Node and Javascript

John Elder, Learn To Code!

Build a Stock Market Web App With Node and Javascript

John Elder, Learn To Code!

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
27 Lessons (2h 6m)
    • 1. Course Introduction

      1:39
    • 2. Install Sublime and Git Bash

      3:45
    • 3. Install Node

      2:26
    • 4. Start New App With NPM Init

      4:21
    • 5. Install Express JS and Set PORT

      4:53
    • 6. Build our First Webpage

      5:53
    • 7. Set up Nodemon

      2:34
    • 8. Install Handlebars

      4:29
    • 9. Handlebars Pages

      4:19
    • 10. Pass Variables to Handlebars

      3:16
    • 11. Version Control With Git

      7:16
    • 12. Push Code To Github.com

      8:52
    • 13. Bootstrap Navbar

      5:41
    • 14. About Handlebars Page

      3:18
    • 15. API Intro

      4:08
    • 16. Request API

      6:41
    • 17. Call The API Function

      3:55
    • 18. Create a Callback Function

      4:09
    • 19. Output API Data The Screen

      4:18
    • 20. Format API Output

      7:13
    • 21. Intro To Forms

      4:39
    • 22. Forms Body Parser

      6:49
    • 23. Connect Form To API

      5:41
    • 24. Intro To Heroku

      3:10
    • 25. Heroku Toolbelt

      4:00
    • 26. Push App to Heroku

      4:27
    • 27. Heroku Domain Name

      3:43
  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels
  • Beg/Int level
  • Int/Adv level

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.

155

Students

--

Projects

About This Class

Node and Javascript can seem overwhelming at first, but they don't have to be! In this course I’ll walk you through it step by step and you’ll be building your first web app in MINUTES. You’ll be amazed how quick and easy it is to create very professional looking websites, even if you have no programming or web design experience at all.

Watch over my shoulder as I build a cool Stock Market app step by step right in front of you. You’ll follow along and build your own copy. By the time we’re finished, you’ll have a solid understanding of Node and how to use it to build awesome web apps.

The course contains 27 videos – and is just over 2 hours long. Watch the videos at your own pace, and post questions along the way if you get stuck. You don’t need any special knowledge or software to take this course, though any experience with Javascript, HTML, or CSS is a plus.  I’ll walk you through EVERYTHING.

Node is a great web development tool and learning it has never been this easy.

What We'll Build...

We'll build a cool Stock Market Portfolio app that let's you search stock ticker symbols by connecting to a third party API to collect stock market information about your stocks!

We'll style the website using the popular Bootstrap CSS framework (I'll show you how to use it!)

Sign up today and I'll see you on the inside!

Meet Your Teacher

Teacher Profile Image

John Elder

Learn To Code!

Teacher

HI!  My name is John Elder and I teach people to code online!  I have several Amazon #1 Best-Selling coding books, and my video courses have been viewed by over 2 million people around the world.  

See full profile

Class Ratings

Expectations Met?
  • Exceeded!
    0%
  • Yes
    0%
  • Somewhat
    0%
  • Not really
    0%
Reviews Archive

In October 2018, we updated our review system to improve the way we collect feedback. Below are the reviews written before that update.

Your creative journey starts here.

  • Unlimited access to every class
  • Supportive online creative community
  • Learn offline with Skillshare’s app

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.

phone

Transcripts

1. Course Introduction: All right. Welcome to the course. My name is John Elder from coding me dot com And I'll be your instructor today. And this course we're gonna build this cool little stock market app using node. So we're gonna be able to type in a stock ticker symbol up here, click the button and boom, get the information and it just has, you know, basic stock market current price previous close percent change market cap here today, all this fun little stuff and it's sort of irrelevant, right? We're mostly interested in how to connect to any A p I I just use the stock market a p i for this because it's interesting to may. But after this course, you're gonna be able to connect to just about any a pal you ap I you want, uh, grab data from it, pull it into your ab formatted, do some stuff to it, and then put it out on the screen and it's pretty cool. So we're gonna learn all kinds of cool note stuff that allows us to do that basic Web development stuff just to build the website itself and, most importantly, how to connect and use third party AP eyes. So you don't need any prior sort of skills or knowledge to take this course of you already know little JavaScript. That's obviously going to be good. But, you know, if you just sort of follow along and do what I'm doing, it should be all right. I'm on a windows computer. Hopefully you aren't. You are too. Everything is going to be the same, though. If you're on a mackerel in IX e think all the tools that we need are available for macro Lennix. So there's no real difference, is there? If there are from time to time, I'll point them out and should be fine. So in the next video, we're gonna jump in and start downloading the tools that we need their all free. You know, there's nothing more to buy to take this course, and we don't need a whole lot of tools. We need a text editor, a terminal and note itself, which is super fast and easy to install. So it shouldn't take us for a long to get up and running. So, uh, should be a lot of fun and let's get started 2. Install Sublime and Git Bash: okay. And this video, I want to talk about the tools that we're gonna need for the course. So we basically need three tools. We need a text editor, something to write our code on. We need a terminal, something to run commands on, and we need note itself. Now notice. Super easy to download install. We'll look at that in the next video and this video. I want to talk about the 1st 2 So if you have a text editor that you already like that you're familiar with, feel free to use that you can use any text editor. It really doesn't matter at all. I wanna be using something called sublime text. It's kind of like the industry leader. It's free. Everybody uses it. So we'll go ahead and download and install that in a second. As Faras terminal goes, I'm on a windows computer and Windows comes with a couple of terminals. That man prompted power show, but they don't work that great. So we're gonna need to download something a little bit better. And we're going to download something called Git Bash completely free. We'll do that in just a minute. If you're on a Mac or Lennix, you already have a terminal that you can use. Just go to the little search function on your computer type in terminal. It'll pop right up. The commands will be the same with what I'm gonna be using throughout this course. So you should be fine there. So let's head over to Google and really quickly. Let's go. Just type in sublime text. And first thing that pops up is gonna be sublime, tex dot com I noticed this sublime text three build 32 of seven. If these numbers changed by time, you watch this video. No big deal. Just download wherever the latest version is, and you'll be fine. So go ahead and download this and you say this anywhere. I'm just gonna save it to my desktop. And I'm on Firefox so my downloads appear right up here. If you're in chrome, they will appear down here in the bottom. Whatever you're using, just going to click that to install it. And I didn't pull this over. It's really simple installation. Just click next and then just click Install. Now I've already installed on my computer, so I'm not going. Teoh, install it again I'll just cancel out of here now to use the blind text. Just go to your Windows Start menu and type and sublime. It'll pop right up and this is it. So now we need the terminal. So head back over to Google. It's having git bash, and it's actually the 2nd 1 listed. Get dash SCM dot com four slash downloads, and again, this is 2.23 point zero. If this number changes by the time you watch this course, no big deal. Just download the latest version and you'll notice it does come with a Mac or a Windows version. I should notice I should, uh, mentioned sublime text will work on Macro Lennox, too. So whatever your computer is, it's fine. Uh, you can download this if you're on Mac or Lennox. If you want the exact same terminal that I'm using, go ahead and do that. But like I said, you already have a terminal on your computer, so whatever you feel like using is fine. So go ahead and download this and install it. Pull this up. Now this installation is a little bit different. There's a whole bunch of screens here and there are kind of weird. So I'm going to talk about a couple of in the 1st 1 is it Asks what text editor you're using and sublime text happens to be the default. I think here it looks like if you're using a different text editor, I don't feel like you have to come through here and find it in this list. These two tools don't work together in any way. So I don't know why they even ask this. You could just ignore this and click next. So, like I said, there's a bunch of screens. We just want the defaults for all of these. So just click next, Next, next, next, next, Next again, we don't care what any of these are. Finally, get to this last screen. Go ahead and click. Install the finish installing. Like I said, I've already got this on my computer, so I'm not gonna install again. But you go ahead and do that and same thing toe. To use this, just head over to your windows. Start menu typing get bashes. G I t bash B A S h. It'll pop right up. And when it does, that's what it looks like just a basic command. Prompt a command line terminal and at school. So those are the two main tools that we're gonna need for this course. In the next video, we'll go ahead and download and install, note and go from there. 3. Install Node: okay in the last video we downloaded and installed or text editor and our terminal and this video, we want to download and install note itself. So head over Google and just type in note or no Js. And first thing that pops up is gonna be after the ads is gonna be no Js dot org's right and click on this and you'll notice right away it goes straight to the download page. There's nothing else here to see. And so the question is, which one of these do we want? Now it knows that I'm on Windows 64 so it's given me the Windows versions. If you're on Macronix, you'll see a macro Lennix version. Now this is the latest right, and maybe it's the latest greatest, but it's not always necessarily as stable as we might like. This one is a long term support one. This is sort of the most stable current version, and that's the one we normally want. You see here, it says recommended for most users. You know you're gonna be tempted to get the latest one. Don't bother doing that. You just want the latest stable version. The long term support version. So go and click this to download and I'm gonna let you do that. You could save this and just run it like we did in the last video with the sublime text with Get Bashed Terminal. Same deal. There's nothing really to see. It will install right away. There's no options to select or anything. Now, chances are you already have note on your computer because a lot of other programs you use node install it again anyway, just so that we have a sort of standard current version. Because sometimes when um, other programs install nude, they install a very old version. So you just you want sort of the most current long term support version. So go ahead and download this. Even if you think you have note on your computer already on DA, it's just sort of a good idea to do that. So those are all the tools that we need. There's gonna be a couple other things we need to download on the back end later on, but we'll do that from the terminal using NPM, the node package manager, so we'll look at those when we need to. But as far as actual tools we need. This is it. This is one of the great things about node. It just sort of, you know, there's not much to it. And it's really easy to use right out of box without all kinds of other tools. You know, like ruby on rails. You have to download install ruby on rails. It's a huge hassle. Even Jango can be a little tricky of setting up virtual environments and things notice just this easy. So in the next video, we will jump in and start working on our new project. 4. Start New App With NPM Init: Okay, so now it's time to start building out our project. So I'm in my get bashed terminal here. And if I type in pwd, you notice I'm in the directory C users coated me. Now, Kotomi is name my computers, my logged in user name, whatever your computer or logged and user name is, that's what I'll show up there. So what we want to do is create a directory to hold all of our node files for this project . So I use the m k d. A. R command stands for make directory, and I want to put this in my C drive. And let's call this node stock. Now, if you want a mackerel Lennix, obviously you're not gonna put it in see node stock because your computer doesn't have a seat, Dr per Se. So you could save this anywhere you want. Just save it somewhere on your computer created directory somewhere. So now we need to change into that directory so seedy and we go see node stock and you notice right here it shows. See note stock. So we know we're in there, or we could type in pwd again. And sure enough, there we are now. We can touch the L s command toe list, the stuff that's in this directory and there's nothing in there. So let's head over to our sublime text editor and head over here a project and click add folder to project. And now you just want to navigate to your C drive or wherever you save this And look for that directory we just created there is no its stock. Now just single Click it to highlight it and then click select folder and you see boom, it pops up here on the side. Now we'll be able to see all of our files right there on the side is really nice. So right click here and let's create a new file and then head over to file Save as and let's save this as index dot Js Now you can call us anything you want. Some people like to call this file the app dot Js or you know, anything at all. It really doesn't matter. You could call it stocked at Js if you wanted to. Whatever. I'm just gonna call it index dot Js and boom. When we click this, you can see there it is shows up. We close it, we can open it again just by clicking on it. Okay, so there's nothing in there now. We're just gonna leave that the way it is for right now. Now we need to sort of create our node project, and we need to create something called a package dot jace on file. It's just sort of like a configuration file. It allows us to keep track of different things in our project. So head back over to our terminal here, make sure you're in this seed nodes stock directory and just type in NPM. That's the node package manager and then an it and then dash, Why now? If you leave off the dash Y this will ask you a bunch of questions and you have to fill it out. I don't really ever do that because the questions that asks or kind of nonsense it's gonna ask you for, like the name of your app, your name, all kinds of stuff, and it just doesn't matter. You could just leave all that blank. So the dash wife flag, it suppresses all those questions and it just spends up the default. So if we do that boom. You could see it creates this package that Jason file And this is all the stuff that it it added to it. And you can see right here the name over app. We don't care what it's called. The version we don't care, you know? Notice this, though it says index dot Js It figured out that that's the main file of our app. Probably because it's the only file in this directory, and that's why we created it first so it would find it. Keywords. There's no no don't even know what that's for. Author. If you really want to put your name in there as the author, go ahead. You know, it really is sort of irrelevant. Doesn't matter. So that's why I always leave those as the default. So head back over to sublime and you can see boom, right here on the side. That package that Jason file shows up very cool. So this is sort of our environment. This is what we're gonna be using for the rest of the course. We're going working in this sublime text editor like this in this directory from time to time will toggle back to our terminal here and type in a command of some sort of the command to start of the node server to start running. Your project is note and in the name of the file, so index dot Js If we do that, nothing happens because there's nothing in that file yet. But that's the command. If there was stuff in that file toe sort of spin up the node server and start running, it will look more that in the next few videos. Yeah, that's pretty much all there is to it. We can now start building out our app. And in the next video, we'll start to look at express, which is ah, javascript knowed framework, and that'll be the next video. 5. Install Express JS and Set PORT: Okay, so let's start building out our app now, back in the day, if you're just using node in order to create Web pages, you had to write all the routing code yourself, and it was just a huge hassle. And these days we can use something called Express, which is sort of a Web framework for its good for like, static Web pages. And our app is gonna be mostly dynamic, but it will have some static parts. So we're gonna use express for that. So in this video, we're going to download, install, express and start to kind of look at it. So let's head back over to our Web browser And let's just type in really quick express Js And you could see this express Js dot com that note framework And this is the website click up here on reference. But first notice. This is how you install it so we could leave off this dot dot save or dash, dash, save flag. We just want this right here. So I'm gonna go ahead and just highlight this real quick head back over to our terminal and just paste this in. So this will download and install using the node package Manager Express. So that's done. Now, if we head back over to sublime and look at our package manager, you could see in dependencies. There's this express thing in our package Jason lock file. There's all kinds of other stuff because express requires a lot of other dependencies. And you see this new node module directory that has all of these things that go with express, you see, right here is the actual express, So that's cool. So okay, it's installed. But how do we use this? Well, let's take a quick minute here and look at the A P. I reference just the manual and in orderto start using this, we need these two lines of code. So go ahead and just copy these and we could just paste these to the top of our index dot Js file. Now var is okay to create a variable, but it's sort of standard practice to instead use constant. So I'm gonna change this to const. Just a Java script thing been saved. That and that's really all we have to do in order to start using express, this will sort of pull express into our app and this will allow us to use it. We're gonna create a variable called app. It's basically an express instance, right. So OK, any time you have a node app and you want to serve up Web pages, you need to run the node server and you have to tell your app which port toe Listen on. Right. So to do that, we need to kind of define what are port is gonna be. And so I'm to create a quick variable called constant port and set that equal to process dottie envy dot port or which is to bars 5000. So what this is doing is later on, we're gonna push our app up into the cloud for Web hosting. And when we do most webs hook Web hosts don't like you to tell it which port to use. They use their own port in their own port systems, and that's usually found in an environmental variable, a process and environmental process. So what this does is it creates a variable that says OK, use whatever their port is in their settings or use 5000 so as far as us on our computers will use 5000 because we're not using an environmental variable. But if we push it later on, that will allow us to use whatever system our particular Web host wants us to use. So that's cool. So that creates the variable. Now we have to actually tell our after listen on that port. So we just go app dot Listen, and this app comes from this right here this app instance that we created right, So we're creating an express instance. Basically, we're telling it, toe, listen on port and normally you would just type port 5000 but instead we've created this variable. So we're gonna type in the variable name, and then we get fancy and we can put a little message on the console. So console dot log and then I know server listening on port. And then we can con Canton eight that port, right? So whenever our server fires up, in fact, we could save this right now and his head back over to our terminal and very quickly Just type in node index Js. And when we do it says server listening on Port 5000 very cool, so we can come back over to our Web browser and just go to a local host, Colon 5000. Now we're gonna get an error because we haven't set up any routing yet. But at least we see now that our APP is running its listening on the Port Port 5000 and expresses in there, it's installed. It's ready to be used. We just have to set up some routing basically and some Web pages to point them to, and we'll do that in the next video. 6. Build our First Webpage: Okay, so we've got Expressinstall. We've got our server running and listening on Port 5000 which is cool, but we don't have any web pages yet to serve up, and we have no routing for that. So let's do that in this video. So head back over to sublime, and I'm just gonna go to node stock, right? Click and create a new folder and exceed down here at the bottom, we can name it. And I'm just gonna name this public. You can really call it anything you want, but public seems all right. So now in here, I'm gonna create a new file, and I'm gonna file save as let's call this index dot html. Now, I'm just gonna grab a quick template file from Bootstrap, So I'm gonna go to get bootstrap dot com, click on documentation. Just scroll down here to the starter template and copy this. We just need some html to put in our index page. Some right click paste appear. I'm just gonna tinker with this a little bit rid of that common cause. That's weird. All right, go ahead and save this file. Control s command s if you're on a Mac or just go up here to file save. Okay, so we've got an index page now. We need to create a path and a route to that. So in order to do that, it has to be really, really hard to do all your routing and node or at least time consuming with express. It's super super easy. All we have to do is create a static folder and just pointer app to it. What we did, we created this public folder, but now we need to tell her app where that is. So we go after dot use and then express dot static and then inside of that we want path dot join and then inside of that, we want underscore underscore d i r n a m e and then the name of that directory which was just public. Alright, semi colon it into that. So now we're using this path that join this path thing defines the path to our public directory but we don't have path installed, So let's come up here. Let's put our semi colons of the end of the I always leave off the semi colons. You really shouldn't get away with it, but not a good idea. So in order to add path to our our little app here we just go const path and then set it equal to require, uh, see half. All right, so I think that will do so. If we save this, cancel head back over here and hit control C to break out. That's the control button and the sea button at the same time. To break out of our server, we need to restart it every time we make it change to our index file. We need to restart. Our server is kind of annoying. I'll show you in the next video way to get around that. But for now, we just have toe turn it off and then turn it back on So we can it note index jazz. Now, I just pressed up the up arrow key and it auto printed the last command so you don't have to keep typing it. That's kind of nice. So we get our little message serving listening on Port 5000 which was right here. We created that right. So now we can come back here and let's reload and boom Hello world, which is index dot html Right here. Now, I'm gonna wrap this in a day of real quick of container. And then was that save this and hit reload had just bops it over a little bit. So very, very cool. Now, any time we want to make any sort of changes, this Web page, we just do it right here. You know, we can add something else. This is my first node program. Who? All right, so we save this comeback, it reload. This is my first note program. Whoa! Right, So very, very cool. Now, if you're old school node, you're like, Yeah, but we didn't create an eight routes. We didn't. That's the great thing about express. This line right here is all the routing we will ever have to do for static files, static files or files that are never gonna change right in the future. We're going to create a stock market app, and we're gonna get data from 1/3 party, a p I, and we're gonna put that data on the screen. That's dynamic. It will change, so we'll have to do something different for that. But for these type of pages, just basic pages this is a great way to do it. Now you can come up here and right click on your public and create a new file. Let's go file save as. And this call this one about that HTML. Now, if I go to my index page and just copy all this code, paste it in here instead of hello world type and about me if we save this now, if we come to about dot html express automatically finds that page and serves it up to us, You know, if we change this to whatever, not html we get in there because there is no whatever dot html page. But there is an about page now, so it shows it. There is an index page, so it shows that and also it just puts the route as the index page when there's nothing at all just the route you are. L because no knows that an index follows the route file always so very, very cool and super easy. And we've already got a fully working node website right here. I mean, this is all you really need for a static website. Now. Obviously, excuse me, our website is gonna be more than just a static website will get in all that later. But as far as getting started really quick, building a basic website, you really just can't beat that for Super easy and super fast, right? It's one of the great things about notes, so that's all for this video. In the next video, I'll show you a little tip to where you don't have to restart the server every time. Because that gets a little knowing there's a way around that. I'll show you how to do that in the next video. 7. Set up Nodemon: Okay. So every time we make a change to our index, that jazz file, we have to restart our server, and that's just super renewing. And we don't have to do that. So in this video, I'm gonna show you how to get around that. So there's this thing called node mon stands for node monitor, and it will run in the background and monitor your system. Every time you make a change to your main file, it will restart the server for you. So we're gonna go ahead and install that right now. So it's just NPM install Now we want Dash D because that stands for development. We only want this running on our computer when we push our app up into the into the cloud for Web hosting later on. We don't want that thing to run there. We don't want the node Montu run there. We just wanted to run on our computer. So that's that Dash D flag will do that and just type node mon and all right, that looks like that work. Now we need to make a quick change to our package dot Jason file to sort of reflect that. So let's see, we come up here and in scripts. We need to write a couple of scripts. So and we could just delete over test with start now. Normally, when you start a nap, you type in node and in the name of the file index or index that Js. So here we do this, put a comma and then let's create a 2nd 1 Let's call it Dev for our development environment . And for that we want Node Mon Index. All right, So go ahead and save that and we can close this. And now, from now on, instead of typing node index dot Js, we will type in pm Run, Dev. And you see, we still get this server listening on Port 5000 thing. And now why run, Dev or were telling the node package manager to run our Dev script That word ago is right here which will then run this right eso that's all we have to dio. And now from now on, when we make a change to our index file or index dot Js file we won't have to restart the server and we just hit reload on our browser and it will just work so super, super useful, a super valuable. Yeah, stopping and starting your server every time is not a huge deal. But when you have this little program that will do it for you, it just it you'll notice it does help. So that's all for this video. In the next video, we'll start to look at handlebars. 8. Install Handlebars: All right, we are moving right along. We've got our static system built, but now we need to start looking at the dynamic system, and we need something a little different. In order to do that, we need something called handlebars. We just head over to Google and type in express handlebars. And here we see this in P m J s dot com packages, whatever, and come through here and look at this kind of scroll down. So in order to install this, we need to install it on the command line like usual. So go ahead and click. Copy and let's head over here, Control, See to break out of our server and let's paste this in here. And I'm gonna push up on my eric E two times to go back to that command to run no mon again . So we turn our server back on and let's head back over to the website here and take a look at this. So the usages is a little tricky to wrap your brain or I'll walk you through the next couple of videos. It's not that hard. It just takes a second to go. Okay, That's how this works, But first we need to add some stuff to our app right here. So go ahead and let's see. We already have. We've already added express. Now we need Teoh. Add this handlebars reference owing to copy this and let's just I'm appear and paste this in and again instead of our I'm gonna put consequence. That's just normal. So save that. Alright, what else do we need? Far as expressed? We've already done this. Now this is the middleware reference to handlebars itself. So we're going copy this and let's create a thing. Let's say set handlebars, middleware Wario and just paste this in. And this just says to use the engine handlebars, which is a an instance of x e x p HBs express handlebars which we initiated up here. And it says that the set of you engine to handlebars we really don't care what any of this is. It's just how you do it. So next let's come back here and we need to create a route. Unlike express, we have to actually create routes for our different pages now that we want to use this dynamic engine called Handlebar so and copy this and Let's paste this in. And let's put a comment here that says, um, set handlebar routes. Okay, so this is this forward slash means the route route, the home page, right, And we're gonna call it home. So now we need toe, create some directory structure over here that adds some things. And we know how to do this by looking at this little picture right here. So we need to create a views directory in a layouts directory. So let's just do that right now. The layouts directory will go inside the views directory, so we'll make that one first. So its head up to node stock, right click and create new folder and let's call it views. And there we go. And let's go back to that webpage real quick and layouts was the other one, so just gonna create it real quick. So let's go to views, right? Click on it, create new folder, and here we'll call it layouts. And so there we go. Now, inside of use, we need to create a file called whom not handlebars. According to this picture. Right, So we'll go ahead and copy that, and that goes in views so I'm just gonna right click on views, create new file. Let's go file save as and we just call it home dot handlebars, which is a weird name. But that's just August. And then finally, we have to add this main handlebars main dot handlebars into our layouts directory. So let's go ahead and click on the views and then go down the layouts. Right? Click, create new file file, save as and call it main dot handlebars. Okay, so we can close some of these getting kind of cluttered. We want to say that. Okay, So inside of each of these things, these two new files, we need to do some stuff that this video is getting a little bit long, so we'll pick this up and the next video. 9. Handlebars Pages: Okay, so we've got all kinds of weird stuff here, and it doesn't all make any sense just yet. But basically, think of a website, right? Any website you've ever ever seen, they'll have sort of the same header and the same footer, right? So if you go, you know to for instance, my website has this header at the top has these links at the bottom has this footer with same stuff and basically every page on my website on any webpage around any website has that same layout has the same stuff at the bottom has the same stuff of the top almost always right. So it makes sense to break those things off into their own file and then kind of pull them into each webpage instead of putting like, for instance, the knave bar. On the top of every single Web page you have, you might have 10,000 Web pages. That's a lot of knave barcode. If you want to change that code at a new link, you would then have to go to each of those 10,000 pages and change the link on each of those nah bars, and that's just nuts. Instead, we want one file that has are naff bar and we make a change on that thing and it gets reflected on all 10,000 of our other pages are however many. So that's sort of what this structure is we just created. Right? So you have this layouts directory, Any of this views? Directory views are web pages. Layouts are templates, right? So instead of our layouts Director, we have this main handlebar file. This is gonna be our main template. It's gonna have this stuff that we want on every page of our website. So I want to go back to our public index dot html and I'm just gonna copy all of this and then head over to the main handlebar and it's just gonna paste it in. Now it will. The program now will pull every individual Web page that we have into this file, and it will output it where we say and where I wanted to output. All of our Web pages is right here. So to do that, we just go 123 and then a closing 123 squared squiggly brackets and his type body. So let's save this and this would be a little bit more apparent. Just a second. Next, let's go to this home dot handlebars page, and this is gonna be our actual web page. So let's go. This is my handle bars Web called home page That that that h one right? So we saved this. Now, what's going on here is this is our lay out our template file right here, and this body is gonna pull from right here. It's gonna pull everything in this file in this home dot handle boat burst file. It's gonna pull it in and out, put it on the screen right where this body tag it. So just like that, for instance, right? But it's going to do it all automatically in the background, so that's kind of cool. So now if we save that, it's go back to our index that Js and we've got a route set up that should just work now. So let's head back to our app here, and we're on an index pages click, Reload and boom! This is my handle verse home page. Now that is our new home page. Now, if we go to our index dot html static thing is still listed there. If we go to about that HTML that is still listed there. But if we just go to the root, you are l. It redirects to our handlebar home page, which is what we want. So now from now on, on this handlebar home page, we can create dynamic content. You can do all kinds of cool things, so that's all you have to do to sort of set up handlebars in the future. If you want to create another page, you'll just put it in views. You know, just create a new file. Call it whatever you want. If we wanted to create an about page, we would call it about DOT handle, said a home doubt hand. Or we would call about dot handlebars instead of Scuse me home dot handlebars, and then we would have to created route for it down here, and we'll look at all this stuff later on. But that's all there is to it to start using handlebars. Now, in the next video, I'll show you why this is so very, very cool will pass some data in from the back end to the front end, using the handle bars, and that'll be fun, and that'll be the next video 10. Pass Variables to Handlebars: Okay, So why have we created this hand of our stuff? You know, it was working just fine with our static public file. Just using regular Express. Why do we need handlebars? Well, we're gonna create a stock market app, right? And what is going to do is it's gonna use 1/3 party, a p i to pull stock market data into our app. And then we want to do stuff for that data and out put it on the screen. That's a dynamic that's dynamic content. And we need an engine that will work with dynamic content, that we can pass variables and things from the back end to the front end and out put it on the screen. And that's why we want to use handlebars. So I'll just show you really quickly how we can do that. We can come over to our route right here. We could put a comma, and then we could just put opening close squiggly brackets. I'm gonna hit enter and put this on another line. Now we can pass stuff into our app right here. So if I create a variable called stuff, I could say this is stuff all right. If we save this and now head back over to our home that handlebars, we can output that on the screen using double curly brackets and then just reference it stuff. So save this. Actually, I want to wrap this in a p tag just because good practices html wise. Okay, so where we're getting this stuff from right here. This is a variable we created. This is what is in that variable. If we save all this, come back and hit. Reload. Boom! This is stuff. We've passed a variable from our back into our front end using handlebars. And that's huge. That allows us to do just about anything. Now we can pass all kinds of stuff like we come up here. I could go, Const. Other stuff equals Hello there. This is other stuff. Alright, so I've created a variable. I could take this variable and I could pass it into the page just by changing this to that right? So now stuff on the Web page will equal other stuff. Which is this? So if this works, it will say hello there. This is other stuff. Let's save this. Come back to our page Hit reload. Boom. Hello there. This is other stuff. So we can pass, you know, strings of text. We can pass other variables like we just did here. We could pass a raise. We could pass functions. We can pass objects, anything you want. We can pass into our home page or to our webpage through the back in like that Just that easily. Just by declaring it on our index dot Js page creating a variable name in this case stuff and then just referenced Sing it, referencing it inside of these squiggly brackets anywhere on our home page. So that is hugely powerful and allows us to do anything we want. We act any a p I in the world and output. It's stuff onto our screens under our web pages, just like this. So we now have everything we need to sort of build out our app. We need to now connect to our A p I and start to look into that. Before we do that, though, I want to talk a little bit about version control. Get and get bash. We have some code now. You know, we're a little bit along in our project here we actually have, you know, a little bit of code here, so I'll show you had to save your code using version control, and we'll look at that in the next video. 11. Version Control With Git: Okay, so we've come a long way so far in our code. At least now we have something in our index that jazz file in this video, I want to start to talk about version control. Now, I normally talk about this at the very beginning of a course, but we didn't really have any code to sort of save and our version control. So I waited a little while to talk about it. Version control is just super important to all coating. This is not something that's specific to note or JavaScript. It doesn't matter what coding stuff you're doing. Ruby on rails, Django Python. Anything at all. You should implement some sort of version control system and version. Control is exactly what it sounds like. It allows you to save versions of your code, so over time it will take snapshots of your code and save them. And this is important because, you know, it's really easy to screw up coding, right. You might be coating for a couple of hours and you're really deep into it, and then you run it and it doesn't work, and you can't figure out what is wrong. You've been doing it so much coding. There's so much stuff to go through, you just can't figure it out. Well, with version control, you can roll it back to a previous version that worked and try it again. Version control is great if you're working with teams, so it keeps track of who makes what changes to the code and win. So if Bob was working on the code and now it doesn't work, we can go back and look and see what Bob did through the version control and figure it out . It also sort of merges stuff. So if Bob's working on something and Mary's working on something and I'm working on something and we're all working on the same thing but different parts of it, version control will merge all of those things back together into the main branch of your code. It's just super important, and we're gonna use something called Get Hub to host our version. Control up in the cloud, so if your computer explodes or burns down, if your house explodes or burns down, if your girlfriend throws your computer out the window, your code is safe up in the cloud, so it's just super important It's just one of those basic, normal, everyday coding things. And so that's we're gonna set up in this video. So let's head over to our terminal and break out of our server here. I'm gonna clear the screen real quick. Now it's poeple Web browser and head over to my website, Kotomi dot com forward slash git. And here I have four or five commands. We have to enter into the terminal in order to initialize get set it up for the first time . Now, you only have to do this once per project, but if you create a different project later on, you have to do this again for that project. But this is how you initialize get. And it's just these 12345 command so we could just copy and paste each of these into the terminal. I've been doing this for decades. I don't remember what these commands even dio. I just know every time we have to do this. So write these down, save them somewhere or book. Bookmark this page. Do whatever you have to do to remember this because you're gonna gonna type these into your terminal every time you initialize get forever. So the 1st 1 was just a copy. Now we have to make some changes to the 1st 2 and you'll see that in just a second here. So I'm gonna paste and get convict Dash Dash global user dot name and then put your name in So it needs your name because, like I said, version control keeps track of who makes what changes. So it needs your name for that. So okay, it enter one down and here's the 2nd 1 and the 2nd 1 asked for your email address. Just it. It's not a spam thing. It's not gonna email you or anything. It just needs no, your email address. So when type that in, okay. And then the rest the last three. We just have to copy and pay so easy after that. So I'm control Sita copying, or you can right click and just click. Copy command. See, I think if you're on a Mac so it's pace that one in. All right, two more control, See and paste boom are at one more get and yet and this initialize is get turns it on. Right? So when we hit this one in you notice. Now we have this. What color That is Sai in light Blue. Whatever it says, Master. So that means get has been sort of turned on, right? And the master means master branch. Think of a tree with branches. You know, every time somebody checks out your code to to make changes to it, check it out, and then put it back. You're checking it out from the master branch. You know just how it is. So this is handy cause it lets us know that get has been sort of turned on. All right, so we're almost done here now, in order to save our code to get it doesn't do it automatically. You have to actually save it whenever you want to save it. And I'll talk in a minute about when you should save it. But to save your code, even get ad and then, period. And the period stands for everything we're saying. Save everything we're saying, add everything in our node stock directory to our get repository. All right, so it's adding all the files that we have, and it seems like a lot of files, but if we pull up our code looking this node mon or this node module directory? There's all kinds of other things in there, so it's adding all of those things as well. All right, pull this back up. OK, so clear the screen. So get add, period. Now we need to commit all of those things. We've sort of added them, but we haven't saved them. We need to commit them. So that's get commit, dash a M and give this a little message. I'm gonna say initial commit right, and this little message is important and we'll see why in the next video when we look at get hub. But you should type in a little description. That explains why you're saving the code, right? So later on, if we tweaked our index dot html page, I would write in tweet index dot html page right? If you added a new, um stock dot Js file, I would type in added stock about Js file. Just be descriptive and just give it a little comment and we'll see in the next video why that's important. It's a nice snapshot toe Look at later on to see changes over time. So all right, get commit dash am Okay, boom, boom, boom. It's added them all. And now we're done. So it has added all of these files Target Repository. And if we look at l s l s dash A you can see here this dot Get this is a hidden file and this is where everything is safe. We don't really care. I'm just give me a little trivia there. But that's where all those things air saved the hidden directory inside your node stock directory. Um, so, yeah, we're done. Now. When should you save your code? You should save it before you're about to do something major in your code, right? If you're about to spend the next three hours working on a major block a code, save it there first and then save it after, right? If you're making a couple little changes on the fly, don't bother saving it. Just save it at the end of the day when you're done for the day, right? So don't be crazy about it. Just whenever you're about to do something major, commit your code and keep it for safekeeping. Now, this is a local repository. This get repository is on this computer and Onley on this computer, which is good. But we want to be able to also save this stuff up into the cloud. And we're gonna use get hub for that. And that's what we look at in the next video. 12. Push Code To Github.com: in the last video we looked at Get for version control in this video I want to look at get hub dot com to host our version. Control up in the cloud and this is my get help account. Get help dot com forward slash flat planet. No, I don't think the world is flat. I just find it hilarious. Some people do. So it's my account name. If you log in or if you go to this u r l You might see a little button here. This is follow or something like that. If you want to follow me on, get up. That's cool. I don't really know what that means, but feel free to do that if you want to. And this is sort of my page, right? So in order to connect to get hub, the first thing we need to do obviously you need to sign up for an account is totally free . Go ahead and do that, but we need to generate an ssh key. Ssh. Keys. Just a secure key. It allows us to connect to get hub from our terminal securely, right? So let's go ahead and do that real quick. So just head back over toward terminal, and the first thing we need to do is make a directory toe hold our ssh key. So let's go M k d I r and want to put this little tilt thing and then the forward slash and in dot ssh. And what this does is it creates a directory in our default directory. Remember, mine was C users co. To me, I think years will be See users, whatever the name of your computer is or you're logged in user name. So now it's see users Kotomi slash dot Ssh. Remember in the last video, we saw the dot get directory that makes a hidden directory so dot ssh is gonna be a hidden directory Won't show up normally. So now we need to move into that directory. So seedy, tilled forward slash don s s h you see? Sure enough, there we are. Now, if we type ls there's nothing in there. So we need to now run this little program that will generate a ssh key and ssh key for us, and it's just ssh dash key gen dot e x e and it's asking, where do we want to save this file. We just want to save it right here so we can get enter now. It's asking for a password and I never enter a password here. It's already a secure key. I don't really understand why we need a password. So if you want to enter a password here, go ahead. If you type on your keyboard right now, nothing will show up on the screen. That's a security feature that's normal. I just realized that it is being typed. You just can't see it. Um, if you do put a password in there every time you try to use this thing, your terminal will ask you for that password. So every time you push your coat up to get up, it will ask for that password. And if you forget it, you're gonna have to generate a new ssh key. And that's kind of a hassle. So I just always leave this blank. I'm gonna hit enter. It's gonna ask you to do it again. So I'm gonna enter again and boom, it's been generated. So now if we type in ls to list this stuff, we see these two files idea underscore our say and i d underscore r ST dot puppets the dot pub one that we want the public key. So now we need to copy this to get hub. So we can, uh I'll put this onto the screen using the cat command stance for catalogue. So we just had cat I d underscore r s a dot pub. And when we do boom here is our ssh key. So just go to the very end of it and just kind of drag your mouse always to the very top of says Ssh! And we just want to right click and copy this So head over to get hub and click on the little icon up here and go to settings and then we want ssh and G PG keys. So we want to create a new ssh key. You just right click and paste this guy and there you don't have to put a title. You can if you want. Doesn't matter. I'm gonna leave it blank. So click the add ssh key. It may ask you for your password if you haven't logged in in a while. I just logged in. So it it already knows I'm logged in so we're going to go. So now go back to our profile. Now we're ready to create a repository here on get hub to push our code to so click on repositories right here and click on new and create a repository name. I'm gonna call this node stock. He is is a little green check mark. That name is okay. And you can put a description. I always leave that blank. Now, this could be public or private, and it's free. Either way, I like to keep my stuff public. Unless you're doing some top secret startup thing. There's really no reason that put it private. Nobody's looking to steal your code or anything. And this is especially good if you're trying to find a job potential employers will come to your get, have account, and they will look at your code. Good ones. Well, at least. And you know, if they're looking for somebody that knows this this in this and they look at your get help account, they see code doing this. This and this. They're like, Oh, this guy knows what he's doing. You know she's done this before. I'm gonna hire her. So it's a good thing for that? Um, s o I just keep on my stuff public. You know, I have courses, students and stuff. So I want my students to be able to see the code anyway, So I keep mine public, choose whichever you want, really? Doesn't matter, and then click this create repository button. So one more step left. We got to come down here. What we have already is a repository that we created in the last video on our command line or terminal. Now we need to push that up to get hub. So to do that the first time, you only need to do this once, uh, highlight these two commands. And we needed to just copy and paste these into our terminal. So I don't, like, clear the screen here, and we need to move back into our original directory. So let's go CD. And that was see node stock, Believe Yep. And we're in the right place because we see this master right? We can ls just to make sure you have these air, all of our files. So Okay, let's pace those two commands. So the 1st 1 tips, I actually only copied something else. Let's do this again. Right? Click Copy. Right click paste. All right, that's the 1st 1 And one more copy paste. So this is gonna push over stuff up. It's asking. Are you sure? Yes. Uh, it's found our ssh key. And okay, so now we can head back over here and go back to our original page click on repositories have 48 of them, and then there is no stock. So take a look. Boom. This is all of our stuff. These air, all of our files. Now let's say we make a changed our code. What do we do from now on to push our code up to get hub? Well, let's go ahead and do that real quick. So let's head over to our index dot Js at the very top. I'm just gonna put in a comment Stock market Port folio App by john elder Kotomi dot com Whatever. So let's save this. Now. Let's go through the whole process of saving our code to get and pushing it up to get hub. You'll need to do this every time. So remember, it's get add, period. Then get commit. Dash a m and give it a little message. Um added comment to index. Thaci s just a little descriptive comment and you notice. This time there's only one file that's changed because we only made a change to one file. So there's not a whole long list of files like in the last video. So now to push this stuff up to get help. From now on, we just typed Get Push and it's doing its thing. Okay, so now we can come back here and hit, reload and notice. Here it's his added comment Index suggests That's the little commit message we just typed. That's why that's important. Because now we can look at this. An at a glance c r changes over time like Oh, yeah, Remember when I made that comment? What was it click on here? Oh, yeah, there it is right there So we can see at a glance that changes over time. That's why that little descriptive comment thing is important. So that's it. We're done now. We have set up get version control. We said, Get havoc out. We can push our code up to get hope. Periodically, you know it's are in case our computer explodes or something which don't laugh. That has happened to me before. I've had motherboards, fries. I've lost hard disks, hard drives. I have lost everything on computers more than once. It's happened a few times in my life. Now I don't have to worry about it. All my codes safe up in the cloud so super important. Also, from now on, if you have a question about the code in the course, if you want to copy and paste something, is that typing it in Just coming, I get home account and you can find it. You know, just click on here, copy whatever you want. A copy, super easy. Or if you just want a reference the code later on in the future, you can always just find it here. And so that's cool. So that's all for version control in the next video, I think we'll start to play with our app a little bit, make it look a little nicer. The actual Web pages themselves maybe at a knave bar, some styling or something, and we'll spend a couple of videos working on that, starting in the next video 13. Bootstrap Navbar: OK, moving right along before we jump in and start doing the stock. A P I stuff. I want to spend just a couple of minutes sort of making this website look a little bit nicer. This is pretty lame looking website so far, and we can really, really quickly and easily change this. So let's head over to get bootstrap dot com. I love bootstraps, totally free. One of the most popular CSS frameworks in the world, it was originally created from some guys at Twitter. It was just like a side project they had. It became super popular, so they spun it out on Twitter. It's like 40 or 50 million websites use this thing, so it's incredible. So head over here to components. And this is a list of a lot of the things you can do with bootstrap, and the great thing about it is it's just copy and paste for the most part. So it's head over down to nab our and let's crab a knave bar. This one looks good, so I'm just gonna go ahead and copy this. So let's head back over your code, and we have in our views Layouts folder this is where are you know? Templates are This is where we put things that we want to reflect on every page of our website. And we want our knave bar to be on every page of our website. But we don't wanna put the knave bar on every page of our website because if we want to change a link on it later on, we would have to change that on every single web page. And that's a hassle. We just wanted in one file that we can, you know, make one change and have it reflect on all of our web pages. So we're gonna put it in our main dot handlebars file here, and the nab our goes right at the top of the page right underneath the good body tag and HTML. So I'm just gonna paste all this in their control, V or you can right click and paste. And I wanna make well, first all it's just save this and see what it looks like. So we've come back here and hit Reload. Oh, you know what? Our servers not running? We did some get stuff. So that is npm Run, Dev. Right. All right. Servers up and running Back over here. Reload. Okay, so now we have this. Nah, bars. Very light. I don't really like these colors. So let's tweak this a little bit. Come up to the top of the knave bar and where it says nab our light. I'm just going to change that to nab our dark. You say that. Come back and hit. Reload. Boom. Like that. So we've got some stuff here. Now, this is smushed right up to the top here. So I'm just gonna really quickly come down here and just at a line break, um, was a bunch of ways you can do that and that What works for me. Okay, uh, green button. That's okay. I kind of like a dark grey button. So let's come up here. Searched through here for search. Here's the form. Here's the button. Bt NBCi and outlines success gonna change the success to secondary if we save that reload. Boom. Now it's grey. I like that little bit better. I got that. Just by if you look at buttons, here's a list of colors. So this gray one is secondary. The blue is primaries of you like blue type primary. If you like green that success danger is red. Warning is yellow, whatever. So that's that. So all right, that's looking good. Now let's change this a bit. We don't really need this disabled links, so let's take that out. So here, this is disabled, not just go up above it and click the L I. And you see the bottom ally tag highlights. That's what we know to delete. So we could just delete that. Save it, come back and hit. Reload. Boom! That's gone. Other drop down boxes are nice, but we don't really need that. So let's get rid of that. Uh, there's has dropped down, so I go up to the L. I click on it closing Ally highlights. So I know to just copy and delete all of that. Let's say this All right. Uh, I like this link one. The sort of more muted color. I don't like this home, so let's get rid of the home one. Just personal preference. There's his home. So go up to the ally. It highlights there. Okay, so save that. Okay, so this is nab our That's no good. So let's what do we want to call this thing stock portfolio, Maybe. I don't know. And we can change this from hashtag to just that. So Okay, All right, so this link doesn't go anywhere, and it doesn't say anything. So let's change that link Teoh about. Remember, we haven't about Paige. So it's changed this to about dot That html save this houses about if we click on this boom goes the about me page. But this one doesn't have a nap bar. I thought the nab our was supposed to go on top of every page. Well, it does for all of the pages that used the handlebar system. But remember this public stuff that did not. So we actually need to paste in our nab our into the static pages if we want to keep using them. We don't have to keep using, and we can convert them all to handlebar pages. In fact, let's just do that right now. So let's go to Well, how we doing on time? So it was getting a little bit long. I think in the next video we'll go ahead and convert that static page to a handlebar page, and that'll be the next video 14. About Handlebars Page: Okay, so we've got this static about Paige, and maybe we could keep that. That's fine. We could just paste in our nah barcode from the last video just right here. If we wanted to do that, you know, that'd be pretty easy. In fact, let's just do that real quick. Here. It's come down here and copy all of this knave stuff. Go to the about page. Paste it in, save it. Let's go back to our website. Okay? Right. So now we can toggle back and forth, and that's fine. We could do it that way. But the more static pages you have, the more times you have to keep pasting in that now, barcoding, that's not necessarily what we want. So let's really quickly just create a new about page in our handlebar system. So let's just go to views and right click and create new file and then go up here to file save as analysts say this as about handlebars. All right, and then comes or about Page. And let's just copy this, uh, from our old about Paige indoor about handlebars page. All right, so you say that, uh, let's see. Let's change this I'm gonna rename this to about two. We don't maybe not want to delete it, but we wanted to have a different name. All right, so let's go to our Index that jazz file and find a route system here in here. I'm just gonna copy this and create about age route. Paste it in. That's right here. I'm just gonna go about died html and that's what we want this to go to. About which is this guy right here we just created. Now we don't need to do this so we could get rid all of that now if we wanted to pass stuff and we could Okay, so now let's go back. And it's hit. Reload and boom! The same thing has happened. If we go Teoh about to that page still exists, but this is our handlebars page. Now, let's make sure that this is our handlebar space. Goto about handlebars. Let's change us about me. HB handlebars Just to make sure now if we hit reload boom about me. HB If we go to about two, that won't be there now. You could delete the about two page if you want. We don't really need it anymore, but cool. So now we can talk. Go back and forth. Now, this thing doesn't actually do anything. We'll tinker with that later on. Maybe probably definitely so that we can look up stocks from right here. If we want to look up the price of apple, you know, we'll be able to do that right now. This doesn't go anywhere, so we'll fix that later. Okay, so this is looking a lot better. It's still not a fantastically great website, but we've got some structure. We've got a little bit style. We've got a knave bar that's looking pretty good, and this is definitely better than it was a couple of videos ago. So, uh, that's all for this video. I think we're done with styling. For now. In the next video, we'll start to talk about this stock a p I and get in all that cool stuff. So that'll be in the next video 15. API Intro: OK in this video, I want to start to talk about the A p I that we're gonna be using to pull stock market data off the Internet. So head over to our Web browser and check this out. I e x cloud dot io ford slash cloud dash log in and then the dollar sign hashtag ford slash register. So hips this I e x cloud that I Oh, this is a company that offers a free A p I that has stock market data. Now they have different tiers that you can pay for. I don't recommend paying for any of them were just gonna use the free tier in this course. So go ahead and create an account you're gonna need to create your own account. You can't use mine because in order to access this ap, I we need a special key in order to do that. So you're gonna have to register an account and get your own, you know, special key. So go ahead and fill this out. They'll send you an email with the code you have to punch in to confirm you are who you say are or whatever. So once you do that. You can log in my account here. Okay, So you want to come over here to a P I tokens and there's two different tokens. They're going to give you a secret one or in a publishable one, you can use either one, but I'm just gonna recommend that you use the publishable ones. We don't care. You know, if this really becomes public, no big deal. So go ahead and copy this. And for now, I'm just gonna come over here to my index that Js and I'm just gonna make a comment here that says, I don't know, a p I he just paste it in there just to keep it. You know, for later when we actually start to use this thing so you could come through here and see Go to the A P. I docks. Now this a p. I has just a ton of stuff. You can look up all kinds of information about companies that trade on different stock exchanges. And here's the A P I. You can read through if you want. It's very interesting. There's all kinds of stuff. Look at this. We just grab this and start dragging ain't just on and on and on and on and on and on and on and on and on. There's just so much stuff here. So if you're interested in this, if you really want to learn how to get the most out of this thing, you know, spend a couple hours reading through all this stuff I'm gonna tell you what you need to know. Just access basic stock market information, which is what we want for our app. But, you know, there's all kinds of stuff you can find logos for companies. You can find their full descriptions, what they do list of their corporate officers, financial reports You can pull with this thing, all kinds of stuff. I'm just for this app. I'm just mostly interested in stock market data like, what's the current stock market price? You know what some of the trends the 52 week high fit to do Eglow. What's their market cap? You know, just basic stock market stuff. So that's what we're gonna pull out of this. But like I said, if you want to pull out more, you know, interesting stuff. You really want to do this up? Just read through here and you can learn all about it. So the free tier allows us to pull a certain amount of request each day through their A. P. I don't remember what it is. I think it is a lot. I think it's like half a 1,000,000 requests today. Or maybe that's per month. Whatever it is, it's a lot. So the free tears Definitely all we need for this course. You know, we don't really care about this stuff. I want to really just teach you how to use any A p I. And this is the one I'm using as an example. But once you learn how to use a p I and a p i n e a p I you can use any A p I stuff you're gonna learn in the next few videos will work with basically any a p I on the Internet. So you know, there's a P I s for everything. There's a twitter ap I If you want to pull in tweets to your app, I think there's a Facebook graph ap I There's all kinds of, you know, you dream it up. It's probably out there somewhere. It could pull weather data into Europe. Whatever you want. Using a P eyes and we're gonna learn the tools you need to do that in the next few videos. So that's pretty much all I wanted to say about this video. Go ahead and get your secret key, your publishable key. We're gonna need this in order to make requests to the A P I. And in the next video, we'll start jumping in and using this thing. 16. Request API: Okay, so it's time to connect to our A P. I pull the data into our app and start playing around with it. So there are just tons of ways to connect Ap eyes with different types of modules and all kinds of different programs you can download and use that helps you sort of make connections to the Internet and grab data and bring it back in the one that I like to use, probably one of most simple ones. It's something just called request, and it's not as sophisticated as some of the other options out there, but for our particular purpose is just to grab a basic AP I especially one that comes back as Jason. You don't have to get fancy. So we're just gonna go with the easy request thing and I use that a lot. So let's head back over here, Control. See, to break out of your server. And let's NPM is stall request, all right? And I'm gonna run my server again. Now we need to make a reference to that up here, So let's go, Const. Request equals, require and then request. Okay, so now we need to actually use this thing and, uh, start connecting to our A p I and pulling in data. So it's fairly simple, and I am gonna copy and paste the very first line because it's a It's a big one. So let's walk through this. So we're calling requests a function, and we got a pass in some stuff to this thing, So the first thing we pass in is the U R L two or a p I, and that is HDB https colon. For such words, slash cloud dot e x a p i s dot com fort slash stable for it slash stock forward slash whatever stock quote ticker. You want to look up, so we're gonna look up Facebook now, later on will switch this around where we can enter it in dynamically using the form. But for now, I'm just gonna hard code this. And so once we get this working, we can tinker with it. But on four slash quote, then the question mark token equals and in your key, right. And if you notice that is just this right here we got from the last video. Now again, use your own key. Don't use mine. I'm gonna disabled mine right after this video. So if you try and use mine, it won't work. Eso go get your own. Now we go, comma and how we want to let us know We want this to be returned as Jason, True or false? True. We do want it as Jason. So go true there and then comma. And then we're gonna pass three things an error, a response in the body. And then we have struck up those out, and we're gonna do some stuff with those. So this is just, you know, basic air handling. If the a p I returns an air, it'll catch it there. Otherwise, if it returns to response header files and things like that, it will catch it there and then the actual body, whatever actually returns the actual stock market stuff will be caught in this body variable. So we have struck at the south and we put a little squiggly bracket and let's come back here, and I'm just gonna close that squarely bracket right now. Okay, so now we got a few more things we need to dio. First off, remember we looked at that air that air handling Thanks So let's type in there. That's right in a little bit of error handling code. So let's go. If there if there is an error, right, what do we want to dio? Well, let's just console its return and in council log that out to the to the council log so that you know, we could see what the area is If there is an air, if there's not an error, this won't fire because it's an if statement, right, so we're fine there. So now we could just console that log out the body, whatever this thing returned right now, sometimes you know, usually that'll work, but there could be some other problems. So I want to do a little bit more logic in here. Let's go. If our es at the response rate, the headers and stuff dot status code equals 200 which means everything's been returned correctly and everything's good. Ah, status code of 200 is usually a good right. So if that happens, then again we just want to console not long out the body, and that's pretty much all we need to do there. Okay, so let's see. Make sure we got all our brackets correct here. So at the end of this one, we have this bracket, and that corresponds to that bracket, I think. Yep. And then this bracket corresponds to that bracket. We need a semicolon. So that looks right. But now we've got this. Let's see, opening there. We haven't closed it. So at is probably like Okay, so now we'd say this and go over to our Web site and hit. Reload. Now, nothing appears on the website cause we haven't output it this under the screen yet. But if we go back to our console, we see a couple of times Boom. It is printing all this stuff out on the screen and you notice it does it twice because we counsel logged out twice. We probably don't need to do that twice, so we'll get rid of one of those. But now here we could see all of this stuff that comes the gets returned with our stock market. AP I. That's really cool. So we could look through here now, but I don't want to mess with it. Now let's let's up with this onto the actual screen of our website. The actual page of our website. Uh, the first off, though, I'm gonna get rid of this 1st 1 We really don't need this twice. Okay? And we'll change this. Probably in a bit too. Yeah, this is basically all we need. And strictly speaking, we don't need this stuff at all. Really. What we need is this request we pass in the A P I your l we tell it. Yeah, we want this return. Does Jason. We get an error rests on a body thing, and that's really all we need to dio. I'm just doing the rest of this because I always do that sort of best practices to catch some errors if you can, but, uh, not strictly speaking necessary. So okay, this video is getting a little long, will stop right here in the next video. We will take the output of this and put it on our web page and start to dig through all that, and that'll be in the next video 17. Call The API Function: okay, so we can connect to our A P I weaken, get data. We could pull it into our app, and we can sort out put it to the console. But this isn't great, because this is sort of a function and stuff that happens inside of here doesn't necessarily translate out here. So, for instance, the body is the stuff that gets returned, right? If we came down to our website here and just trying to output body, if we save this, come back and it really we get an air body is not defined because, like I said, this body is only working inside of this function here. The scope is all messed up. So instead of just calling body here, we're gonna go ahead and turn this into an actual function that will call and get the result from. So let's do that real quick and pretty simple. Let's just let's just go, uh, create call AP I function whatever is what we call a function. And let's call it, I don't know, call FBI, all right? And we don't need to pass anything just yet. We might in the future. Now I'm just gonna grab all of this stuff and paste it all in here now, we don't necessarily want to console Log this out. So a comment that out, But we could return body. All right, so when this gets called, hopefully this will return body. So down here, we can call, we can make a variable const a p I equals and then we'll just call underscore a p. I, uh, can type. There we go. So now hopefully body will be returned into this variable a p I. And here we can output that onto the screen. So stuff let's change this to stock. Save this and honor page instead of calling stuff was called stock as well. OK, so let's say this. Come back over here and hit. Reload. This is my handlebars page. And now nothing is being output it. So let's head back over two or page here and let's council log out ap I just to see what's going on here. So you see this? Come back here, reload it, check our console and we get an undefined. So what's going on here is it's a little bit tricky, right? So are apt. I get route is getting called right. And then this a p I variable gets created and we call our a p I function, which is this the A P I function has to go out onto the Internet and grab information and then bring it back into the app. And that takes a little bit of time. It might take a couple of seconds, not very long, but in the meantime, you would think the program would wait until it brought back the data and then continue on down. You know, as you know you your function as your program runs, you know, it starts at the top and it goes down. Each line gets executed. You would think like I said, this would finish before it moved from this line to this line to this line. But it doesn't. It doesn't wait. It calls this while this is working in the background. It keeps on going down. And so it says Consul Augat, ap I. Well, AP, I doesn't exist yet because this hasn't finished doing its thing yet. Same thing here. We can't output a p i. The AP hasn't returned a result just yet. It happened so fast that you know we're getting undefined. So we have to kind of modify this a little bit to sort of get around. That s videos get a little bit long, so I think we'll do that real quick in the next video. 18. Create a Callback Function: okay. Like I said in the last video, this a p I is getting called, but our program isn't pausing to allow it to finish retrieving the information before it's moving on. So we're getting an undefined error, so we need to do something called a callback function, and the callback function will fire when this thing finishes doing its stuff. And when it fires, the result will be returned from it into our ap I down here. So to do that, we need a semi colon right there to do that. First off, we're going to kind of define are Well, let's start down here. I guess so. Here, get now. Here. We're going to call this a p I. But instead of passing it into a variable, we're just gonna call the actual a p i itself. But we're gonna pass in our callback function. And let's call this, um, I don't know, done a p I right. I don't know when it's done, it's done. And consequently, we're gonna then call that done a p I down here. We're going out. Put that onto the screen of our web page, right? So OK, so function done. A p i. But now we need Teoh do squiggly brackets. And inside of there we need to pass this stuff and make sure that these all match up. So here's an opening bracket closing bracket opening sweetly bracket closing squarely. Rackets. OK, that's what we want that stuff. So I'm gonna copy this, and it's gonna bring it inside of here. Have that over. Okay, Now, we don't really need that. Okay, So we got a lot of opening and closing tags. We want to make sure that these all sort of lineup so just kind of click on him to highlight there's that there's that. This is the original function there, and this one, is that okay? So I think that looks good. So what we're doing is we're calling our call AP I function that we created in the last video we're passing in this other function which has all of this stuff in it. Now, up here in our call ap, I we need to make a variable for that. So let's just call this finished a p. I, like done a p I, but a different world than done just so we could keep track of them. And we don't really have to make any changes in here per se 123 That's right. Tabbies over just a aereo. And now, But instead of returning the body, we don't have to return her body. We want to call this Finished a p I function in a wrap body in that right. Okay, so save this so that this is confusing, right? It doesn't make a whole lot of sense kind of hard to wrap your brain around I get This is a weird kind of lubie inside of this inside of that type of thing where it's kind of hard to like I said, just kinda hard to wrap your brain around, but basically all we're doing here is we're calling this function, which is this function. And instead of passing some variable or something in, we're passing this callback function where we go we're here called Done a p I, which becomes finished a p I. And inside of here it will fire whenever this finishes returning the body wish then becomes done a p i out here and well then output onto the screen. So hopefully if all that works correctly, this will output something under the screen. So let's save this head back over to our web page and hit, Reload and boom. We get object dot object, object, object. And this is fantastic. This is exactly what we want. Uh, the A P. I was returning an object. It's a, you know, a javascript object we could do, object the things to it, and, uh, fantastic. So this means it worked. Obviously, this is not great, cause it just his object objects when you actually sort of course it a little bit onto the screen, and we'll look at that in the next video. 19. Output API Data The Screen: Okay, so it looks like this is work, but we can't really tell because it's not putting anything on the screen now. In the past, we counsel logged it out, and we could see what all the stuff was inside the object. When we just pass it to the Web page like that, we can't see it in its original stated just his object object so we can loop through all of the things in this object and see what's in their print them each out onto the screen so we could do that with handlebar syntax. Here, put hashtag each and then call that variable stock. Now we need to close. Are each now inside of here? You know, objects are key value pairs. There's a key and a value key value, right, so we can print out each of the keys and then also each of the values and for values. We just type this and that's put a line break here so we'll put one on each line. So this is in each loop. It just loops through our object, and every time there's a key value pair each key and this it'll print those out on the screen loop around, print again, loop around, print again. So if we hospital another line break or to hear Justo break this apart. All right, So if we save this and come back over here and hit reload, boom, we get all of this information that are AP eyes returning. And this is the same stuff that we counsel logged out onto the screen a few videos ago. We've just now, you know, kind of out put it on the screen itself. So this is awesome. And this is really all you need to know. You know, this works for this ap I but this will also work for any a p I that returns Jason and most AP eyes returned. Jason. So this is really all you need. I mean this You can now connect to just about any a p i to do it just about anything. And here you have the results. Now, this isn't formatted. Very well. Obviously eso We want to kind of come through here and, uh, and play around with this a little bit, but, hey, this is pretty much It's ovary. Very cool. So let's look through here. So each of these things we can access the thing on the left Here is the key company names symbol, primer exchange And then the thing on the right is the value or the this right. So NASDAQ facebooking and to access any of these individually you know, javascript is object oriented. We could do object e things by just slapping a period on our stock variable and then putting the key. So, for instance, if we want company name, we could just copy this head back over here and ah, put a line break and let's just go Squiggly brackets stock dot company name. All right, So if we save this, come back here and hit Reload. Boom, Facebook Inc right there. So that's very cool. We could put Facebook Inc and then the symbol right next to it. Let's do that real quick. I'm just kind of playing right now, So let's put parentheses and then squiggly brackets stock dot symbol and it's put another line break. Really. Move this apart. So see this? So Facebook Inc symbol FB very close. So let's let's take this and replace this thing up here because that's kind of silly. So I'm just gonna copy this whole thing and replace it inside of the H one tag. Okay, So save it. Boom. Facebook, Inc. And now this object object. We get rid of that too, right? We don't really need that. That's just the stock thing right here. It's on those line breaks. Very cool. So All right. We're starting to come right along here. No, what we have to do now is sort of determine what of this stuff we want to keep. Right. We don't need all of this information, but there's a few things in here that we might want. Some things we don't want. So I think in the next video, we'll go through here, will pick out all the stuff we want will start to form at this a little bit, make a little nicer looking, and that'll be in the next video. 20. Format API Output: Okay, so we've got our output now. We need to determine which of these things we want on the screen. So I think we definitely want the latest price. Right. So let's just do that one real quick latest price. And I'm just gonna come up here and some line breaks. So we want stock dot latest price. Aniline break. Now I'm gonna copy this and paste it and let's get rid of this. And let's just, I don't know, grab five or six of these. So 12345678 I don't know how many we want, So this is the latest price. So let's go. Strong latest price. Good. Save this. Reload. Oh, what I knew we need We need to finish doing this until we all right, So let's copy this. Save it. It reload. Come back, paste it back in. Okay, so now we won't save it and reload it each time. But we can look through here. And so what do we want? So ah, primary exchange and I don't really care about that latest price. Definitely. We already got that latest time. Um, what else is interesting? And you'll notice some of these don't have entries. I don't know why that is just a the A p. I is not returning it for that. For whatever reason. US age This updated price previous close. That's a good one to know. What did it close that yesterday? Let's do that one, and I'm gonna go strong strong for all of these, let's just copy and paste this in real quick. Strong just makes things bold on the screen, so let's go. Previ ous close. All right, all right. What else? Previous volume. The percent change change percent. That's good to know from yesterday and today. What was the percent? Change right? All right, let's put that in. Let's go. Percent change, Owen. That's a percentage. So after that, let's put a percentage son and these air dollars. So let's put dollar signs in front of them. It's fun, right? Okay, What else? Percent change of market percent volume. That's good to know. Market cap market cap is great. Market cap is how much is the company it worth? It's a good way to let compare companies see what their market cap is. Let's we definitely want that that in here market cap, and that's in dollars. Let's go, Market cap. All right, What else? Uh, 52 week high and low. That's always good to know. So let's do that. Who First, let's do your to date change. That's a good one to know. What is the stock done? Year to date, like Facebook is up 34%. That right? It went from 1 23 two currently 1 82 Is that a 30% change? I think so. 10% would be 18. Right? 18 pass by. Right. So Wow. So we definitely want your today change. So let's do that one. Uh uh. Where we go? Year to date change. And let's go percent. What else? We want the 52 week high and lows. Let's end with those two. So for two week high, dumb and 52 week lo. So if it did, you weak high, Colin Bone of after Colin there and 52 week low. Okay, so let's get rid of the East last two, and I'm gonna comment these out, okay? So save this. Come back here and reload. Okay, so we got a nice little start here Now, if we right click and look at the page source. We commented it out so it doesn't appear on the screen, but it still appears in the page source. So if you're interested in looking back over this in the future, you've got it there. Otherwise, you could just delete it completely if you wanted Teoh. Okay, So pretty cool. And we're coming right along now. This is okay. It looks not great. So let's head over real quick to get bootstrap. Let's just grab some quick CSS styling gonna components. And what do we want? Theirs? Uh, Carousel, maybe. Input group. Jumbotrons. Grab jumbotrons. Just this big box, right? My copy. This and back over here and just of the top here, I'm gonna paste all that in and here where it says hello, world. I'm gonna paste in our company name. And then the rest of these weaken just taste in. Uh, where do we want this? Let's look, take a look again. Road quick at the It would be like right here. Yeah, you put it inside. This He all right? Uh, where we go here, Let his price. I think that maybe, uh and then we can get rid of this other stuff and then get rid all of this. Let's save this real quick and take a look at it. Okay? That's not great. Let's instead of wrapping it in that P Let's just get rid of that completely. Save it. That's a little better. I can't like that. So All right. We got a little Jumbotron here. We get a little bit. Saleh sure didn't look great still, but we're coming right along. And you could style this anyway. What? It doesn't matter in the least bit, but now this will work. Fine. Now we've just hard coded Facebook in. Remember when we did our index dot Js work? Earlier we passed in Facebook. We hard coated it in. Now. That's obviously not ideal. We want to be able to, for instance, up here, type in a stock quote, and then you click the button and have it appear here based on what we re type end. So I think we'll start to look at that in the next video 21. Intro To Forms: Okay, so we've got our a p. I working. It's pulling data in. We're out putting it on the screen in our home page and our get request. But now we want to be able to use this search thing up here or any search thing. Really, We'll start with this one up here in orderto look up specific stock. Take her symbols. Right? So first things first, let's head over to our main handlebars page. Remember, this has our knave bar and all that good stuff. So scroll down to the nab our section where the search is and you can see here it is. It's this form these two form fields, there's open form clad open form tag and closing form tag. And in between here, this is the form and just kind of Look at this. It makes sense. The first thing you see is this input field, and the second thing you see is this button, right? So that's just this input field, which is this box here and the button. All right, so it's very simple form, but we need to make some changes here. So first things first, just for just for fun, the button says, search. I'm gonna change that toe. Look up. Right. And then you also notice. So if we say that, come back here and it reload. Look up. It says search here. And if you start typing the search part disappears. But I wouldn't change that from search to something else. So look through here for placeholder. There it is. And there is a search. Let's change that to, um, look up, stock quote or something. Whatever you want. Let's save that. Come back and hit. Reload. All right, look up. Stock quotes, And you start typing. It disappears. You could you could put in look up ticker symbol, You know, whatever you want to dio. Okay, so that's that. Those are mostly just, you know, trivial things here. We need to make a change to the form itself. So right now, it just has some CSS styling in that class here, But this this form doesn't actually point to anywhere, So we need to tell it where the point with an action action equals. And we just want to send this back to our home page. We could send this anywhere we wanted if we had a stock page called stock dot html. We could send it to that, but we don't have that. We just want to send it to back to the home page, and we want to send it as a method equals host, and that does not necessarily need to be uppercase can. But doesn't matter. So method equal post. So when you send stuff with forms and even just to get Web pages, you're either making a post request or get request. So I'm gonna go ahead and save this. Now let's look back at our code, Remember, There we go when we created our route. This is a get request. We're getting that Web page right when we'll see. Look at our this request. It is probably a get request, but it doesn't say anywhere. Get requests usually are like when you get a Web page. When you fill out a form you can get, you can make a get request with a form, but it's not, uh, really sort very common to do that. Used to do that like 20 years ago on the Internet. But post requests are much better. They I don't say they encrypt the data that you send, but it does sort of hide it. So you can't just see it in the Web browser, which is good. Then there's some other reasons why post requests are just better. So all right, our form is ready to go. We've done everything I think we need to do here. I'm gonna save this again to make sure it saved. The main thing we just need to do is create an action. Where do we want this form to point? So when when we click the button, where does that information go? Well, we wanted to go to our home page R slash Nothing. Our route route, right? Just our home page. And the method is post, like I just said, and the rest of this stuff is OK, But now one more change we need to make one last change is the input field. You notice there's a bunch of styling and has a type, but there's no name, so we need to give us a name. So let's go Name. Excuse me. Name equals and what do we want to call us? Is called this stock ticker. So go and save this. And now this will allow us to reference that box. So when information gets sent back to the server, it'll be labeled as stock ticker. So then back in our code, we could go Hey, do stuff to stock ticker, right? If it didn't have a name, we wouldn't be able to reference it. So now we can reference it. So our farm is going to go, and now all we have to do is create a post route in our index that Js page. And I think we'll do that in the next video. 22. Forms Body Parser: Okay, So our forms ready to go? It points back to the web page, but there is no post, uh, route. Right. So our program doesn't know what to do with it. So if we come back over here and just kind of, you know, type something, let's go to our about page and type something. This is cannot post. We get an error. You see it? It pointed back to our home page, but nothing loaded. Why is that? Well, because when this gets called regularly, it's a get route and the get route gets fired up. Right now, we're sending a post request not to get requests so the post route gets fired up. We don't have a poster out yet, so we gotta We gotta make one of those now. So, um, let's head over to our get request. Yeah. Where did that go? Here we go. Set handlebar routes. Let's go set. Um, index. Well, let's go. Set handlebar index route. So let's just copy this whole thing and below here, let's just paste it in. So it's set handlebar index post route, and this will be get route. Okay, so this just needs to get changed to post, right? And okay, we're now calling that function thing, and it's returning the stuff. Um, I guess we can leave that the way it is for now. We need to make a bit of a change to this. But first we need a program that will parse the results. The stuff that comes in from the form because a form gets sort of encoded and sent. And we need something Teoh un encoded and parse it and do all that good stuff. Luckily, there is something called body parts, which is super easy to use. So let's head over to our terminal control. See, to break out of here. I'm not clear this screen, we just need to npm install body dash Par, sir. The purser. Yeah, part sir. And OK, that's been done. Let's run our server again. Okay, so now we just need to add this. So let's go, const! And what do you want to call this body? Parse error? Call it anything you want and we need to require body either body. I cannot type coarser. Okay, so there's that now we also need Teoh creates a middleware that uses this. So let's go use body purser. Little where and middleware is just middle where it's something that works in the middle of your program. And to use this we just go app dot use at that use not app, that user. And then call that variable. We just created body par sur dot u r l in coded. All right, And that's a function. And inside here, we want to go extended colon false, and that looks good. All right, so if you save this now, this does just what it seems like it does. It calls the body first er purser module it un encodes the stuff that gets sent in from the form we don't really care. What this does is just a setting we want and now weaken use forms. However we want on the back end here. Okay, So how do we actually access the stuff that has been sent and now apparently un encoded or parsed or whatever? Well, let's head over to our post request and inside a here, let's just let's create a variable. And let's call this what, um, posted stuff, huh? And we set that equal to re request coming in through the request right here dot body, which comes from the body parts or thing, and then dot What do we want? Well, head back over to remain handlebars and look at our form again. Here's that input box. Remember, we referenced it. We named it stock ticker. So we just call that. So where we go true? Boom. Right there. So a request dot body dot stock ticker and that's it. So now we can pass in this posted stuff. Whatever. In here. Let's do this. Let's go posted stuff I don't know most stuff on. Save this head back to our home handlers page and just of the top here, let's just call posted, underscore stuff and give a line break here just to see if this works. So save this. We might get some errors because of the A P I stuff. We'll see here. So let's just type in John Elder. Whatever. Boom. There it is. John Elder right there at the top. So what this means is the form is successfully sending data from the web site to the back end. We're grabbing it, parsing it with body poor sir, and then putting it back up on the screen. And here is this. Hello? Now, obviously, we don't want to put it back up on the screen like that, But we're just doing this to make sure that this works. And it looks like it works so a That's awesome. So we get rid of that. We don't really need that. Save this and let's see down here. We probably don't really need this either, so we'll take that out. But I will leave this in here for now. In fact, I just commented out. So you know, any time you want to access this stuff from your form, it's just request dot body dot Whatever. Now, if our form had a bunch of different fields, you know, if it had first name, last name, email, address, whatever, you would access each of those fields in the same way. If you call that email address, you would just you know, you would go email address, whatever you call it, whatever you name it. That's how you access it on the back end. So very, very easy, very simple to use. So that's pretty much all we need to do with the post stuff. Now what we want to do is be able to pass in whatever somebody typed into our A P I up here and then go look it up and bring back the results and put those results on the page, and I think we'll start to look at that in the next video. 23. Connect Form To API: Okay, so we've got our form, it post stuff to our back end. We can now take that ticker symbol or whatever was posted and do stuff with it. What do we want to do with it? We want to pass it into our A p I and look up the stock. So that's what we're gonna do in this video. And it's not that tricky. You is a little bit We're director. Bring around. Maybe we'll walk through and see. So remember, this is our call. AP I function that we create a few videos ago to actually look up stuff. And remember, here is the u R L in right in the middle of it. We're just hard coating and Facebook, but we don't necessarily just want a hard code in Facebook. We want a hard coat in. We don't want a hard code in anything. We want it to be dynamic based on whatever somebody typed into the form field. So what we need to do is pass this thing into this function and in do stuff with it in here . So how do we do that piece of cake? We just slap a comma on your and create a new ticker. A new variable name. Let's just call it ticker Now inside a here we can con Canton eight that in with that and a plus and just put in ticker and then another plus and then boom. So what this will do is it will take whatever we put in the form, pass it into this variable and then smoosh it into this u R L Now, instead of this being Facebook, it's whatever that ticker is, and that should be all we need to do there. But now we need to actually pass it in there, and we're not. We haven't done that yet, so let's come down to our post request here. And remember, when we call that a P I call a P. I were passing in a function right, and the function is one object that were passing in. We also want to pass in something else, the ticker, right? So to do that, it's just like we did here we put a comma and then the second thing, but here it's kind of hard to tell where that comment goes, right? So here's we're calling the A P I. Here's that function. Basically, what we want this to look like is call underscore a P I. And then our function and then our this thing, right, it's gonna look like this, but this function takes up all of this, right? So here is so from here to here, right, That is all this stuff. So after that, we need to put a comma. And in this, So, like I said, it's from here to here. It looks like if you line up all these brackets and the closing brackets, it comes to right here, So here we just put a comma in that. And I think that work. Yeah, I think so. It looks right. Okay, a little convoluted, right? All these opening and closing tags, it's easy to get, You know, I have them get away from me a little bit, but I think that's what we've done here. So essentially, we're calling the function and then this where this function is actually this and then comma, comma boom. Oh, right. So Okay, get rid of that. I think that's right. It looks right. So let's save this and give it a try. If we had to back up here and let's look up Google g 00 g. So if we dio Boom Alphabet Inc. Alphabet Inc is Google's actual corporate name, which is silly boom. So we had their latest price while $1190 market cap. How much is Google worth? So this is, Let's look through here. Hundreds under thousands, millions billions, $825 billion that looks like Google is worth. Wow, what was Apple worth? So Google is 825 Apple, 961. Apple is worth more than Google. We've just learned very cool all of this stuff that we could look up. Tesla, whatever you want. Tesla Inc Very cool. So now we're done, right? I mean, everything works the way we want it to work. It's very cool. Now, if we go back to our home page, we're going to get maybe an error or something bad, because remember, originally we had hard coded in Facebook, and it's not hard coded anymore. It's looking for a ticker, but we didn't actually pass anything as the ticker Forget so weaken. Probably fixed that. See her get view real quick. This video is getting a little long, but here we could do the same thing We could call a function and then right here, just pass in Facebook. I guess if we save this now, it works. We go goog Click here again. Boom goes back to Facebook or we could redo the whole home page. So there's no there's nothing on there at all. We have a welcome message that says something like, Welcome to my website To look up a stock quote, you know, entered in this form and click the button. Whatever you want to do, that works. So I think that's all for this video. 24. Intro To Heroku: All right, So now we want to learn how to push her app up into the cloud for third party Web hosting. Now, there are just a ton of Web hosting solutions out there, and you can use Amazon aws, Microsoft Azure. There is, you know, just too many to even list. I'm going to use something called heroic. Ooh, it's really industry leader four Ruby on rails, Django and Node. And it's super easy to use. And they have a free tier, which is what we like. So head over to her Roku dot com Sign up for an account. Now, they used to ask for your credit card when you signed up, even when you were going to use the free tier. I don't know if they still do. If they do, don't worry about it. They're not gonna charge you for everything. This is a riel like very reputable company, one of the top Web hosting companies in the world that are gonna mess with your credit card . But like I said, I'm not even sure they still ask for that. It's been years since I checked, but let's look a pricing real quick. I said. We're gonna use the free tier, which is great to learn how to do this. And her who works on something called Dino's right? And just think of them as horsepower, right? The more horsepower you have on your website, the more powerful it's gonna be. The more people are gonna be able to go to your website without it crashing. So with a free tier, I mean, just a few people are gonna be able to go to your website at any one time before he gets really slow, starts lagging and eventually crashes. If you want more people to be able to come to your site, you have to pay for Dino's and you can come down here. Look at the different versions. Do you look at hobby or standard? One dino in the standard version is 25 bucks for the hobby version at $7 you could just sort of look through here and see 2 57 5 mome all the way up to 2500. And this is great because everybody builds a website and thinks that it's gonna be like an overnight success, and it never is. It takes months and months and months to build up a following to get people to come to your site to market it. And while that's happening, you don't you paying thousands of dollars, even hundreds of dollars a month in Web hosting, so this is perfect for that. You could just slide that slider down on Lee. Have one or two Dino's a month, and as your traffic picks up, you just click a button on the back end and and add more Dino's to deal with the more traffic. So it's a great great thing for something like that. You don't really need to know anything about Web hosting. You know, if you use Amazon and AWS or even Microsoft Azure or the Google Cloud Platform, whatever that thing is, you have to know a lot about infrastructure. You have to know a lot about coding and Web hosting our Web servers and Lennix and, you know, security practices and all this stuff. You don't need any of that with Roku. It's all done for you, and so that's why we're gonna use like it. So we're gonna use the free tier in the next video. We'll show you how to get started with this right now. I just wanted to sort of point this out, show you where it is. Tell you sign up for a free account and, uh, just take a look at this pricing page read through here if you're interested. If you're not, don't worry about it. If you're just gonna use the free tier like I'm gonna be using in this video or in this course, don't bother reading all this stuff. But if you're interested there it is. So that's all for this video. In the next video, we'll start to We need to download a quick tool in order to use this. And we'll do that in the next video. 25. Heroku Toolbelt: Okay. So in order to use this, we need to download a quick little tool called the Hiroko Tool Belt and that will allow us to connect to her Roku to our Roku account from our terminal. So head over to Google and just type and Roku Tool belt. And let's age look through here. Here it is. The Roku CLI command line interface. It's dev center dot Roku dot com slash articles slash Roku dash cli There it is. And just scroll down here and they have a Mac Lennox or Windows version. We want the 64 bit installer something to go ahead and click this. Save this anywhere. I'm just going to save it on my desktop. And I've got Firefox with My downloads are up here. If you're on chrome years, air down here in the corner assumes it's finished downloading small files. Go ahead and click it and just gonna drag this over. We want to make sure all these were checked. Click next and installed this anywhere. Okay, So Okay, so it's completed. And go ahead and close this now Head back over to a terminal. Let's break out of here. We actually need to close this and open another one because it has to restart, uh, for the her Oakar tool belt stuff to take a fact. Let me just quick re sizing. Okay, so now we want to change back into r c knowed stock directory were in the right place because we could see this master. Okay, so now its head back over here and let's go Baroque who? Uh node. And we see this article getting started with Roco on node. And you just want to give you this a single page come through here and this will give you some information on what you need to do to your app to prepare the app in order to have it work with Hiroko. And there's not much we have to dio, except for let's siege. Look through here. We need to define approx file and add this line to it. So let's do that real quick and back over to our code and just at the top here in node stock. Let's create a new file and I'm gonna pace that in. So Webb noted index that Js that's the name of the file that we created our index dot Js file. So that's good. It's just telling us just telling her. Okay, this is a node app right now. We want to save this so file save as. And we just want to say this has Prock file capital P and save it as all file types. Right, so here we see. Right. Okay, so that's good. So now we want to save our code for version control. We have done that in a while, and we made a little change. Let's go get add, period. Uh, get commit. Dash A m. Um, let's go created Prock file for Roku. Okay? And then get push to push this to get up, clear the screen. Now we could type Roku dash dash a version and we can see Boom. There's a version number if you get an error when you do that, it means Hiroko wasn't the Roku tool belt wasn't installed correctly. And so we're pretty much good to go. We've got the Rocca tool tool belt installed. We've modified our app to the thing we need to do. We added the Prock file and you could come through here and read mawr. You know, there might be some interesting stuff in here, but I don't think there's anything else we need at the top of this. It shows us how to push our app, um, to to her Roku. But I'm just gonna walk you through it in the next video. We don't really need this tutorial. It's pretty easy. And eso we'll look at that in the next video. 26. Push App to Heroku: Okay, so we're almost ready to push are apt to Roku now. We just need to do it just to push it so clear this screen here. So the first thing we need to do is type in her Roku log in, and every time we do heroic who commands, it's always it always starts with Roku. So pro coup log M. Now this is going to say, press any key to open a Web browser, and so do that, and it's gonna ask you to log into your Hiroko account. So, see, I think this is my account. Okay? Logged in. You can close this page. Okay, so when we do that, we see where logged in and you'll notice it's kind of stuck here, so we need to hit control Seed break out of that, OK? But we're still logged in, so that's cool. So the first thing we want to do is add or ssh keys. Remember when we had to add or ssh keys. Forget hub. Same deal. But we can do it from the terminal here so we could just go Harajuku keys, Colon ad. And would you like to upload it? Yes. So it's found our keys in that dot ssh directory. We created way back when and again it says done, but it's kind of stuck here. So, control, see, to break out of this again. OK, so we've added our keys. Now we need to create an app in our account on Roku. So her Roku create. And this would create an app for us and even gives us the URL. So that's cool. We can copy this and head over to our Web browser and paste this in and we see Boom, here's aren't You have? Okay, that's cool. But there's nothing there yet. We haven't pushed our code. Look at this euro its kind of long and goofy. You can use your own domain names if you own a domain name. So if you have, like node stock market dot com or something like that, whatever you could use that or you can rename this. I have something better than Mysterious Crag. So we could do that just by going her Roku rename and then just come up with UNAIDS. Let's go node. Ah, stock and known stock has already taken. So let's try, um, Elder. No, I don't know stock. Older? I don't know. Doesn't really matter. Alright, stock elder works. So let's copy this and paste this in same deal, though it just says, you know, this is the default thing. So now we want to actually push our code up to her. Okay, You do that. We type. Get push. Roku Master So similar to the get push that we usedto push our code to get hub or get push . Roku. Master, we're pushing our master branch of our git repository to her Roku. And so it does some stuff. Now this can take a minute or two with note. It goes pretty quick, like ruby on rails. Sometimes it could take, like, five or 10 minutes, but this looks like it's going pretty fast. See says No Js at detected. Oh, getting all kinds of weird stuff it is installing modules and stuff are dependencies that's age pruning dependencies, note modules build successful discovering process type. It found our Prock file. It realized it's a web app and it's launching and it looks like it's worked so we can head back over here and just hit, reload and boom! There's our app and look at work that it found Facebook. We can look up Google if we want. Boom, There's Google. I wouldn't go to the about page whatever and just that easy or app is now live and online completely free now. Like I said, this is the free tier of her Roku. So not a lot of people can come to this website at watch. And also, I think if nobody comes to the site Friday for like 30 minutes, it will, like, go to sleep. And then when somebody comes again in the future, it takes a couple of seconds for toe wake back up. But then it will, and it will work. So very, very cool. Just that easy. We're now live and online with are no doubt very cool. So that's all in this video in the next video. Very quickly. I'll show you how to use your own domain name for this. If you have, you know, a specific domain name, I'll show you how to use that. And that'll be coming up in the next video 27. Heroku Domain Name: Okay, so we've renamed this stock elder dot Roku app dot com It okay, That's not bad, right? You can get away with that, but if you want to use your own domain names, so, like, if you owned I don't know stock elder dot com. Right? How could you do that with this? Well, it's super easy. Just head back over to her, Roku and see that log into your account and find the app you just created. Now I've got a zillion of them here. Two pages. So we want. What was that called Stock Elder. So she dotes on page two. It looks like there it is. Stock Elder. Click on it and go into the settings right here and then scroll down and look for domain stuff. Right here. So here we just add a domain. If we owned a stock elder dot com, we could just add it right there. Click save changes. And then that's all there is to it. So that's only part of the thing, though, so that will work here. But you have to. In order to buy a domain name, you have to get it from something called a registrar. so think like go Daddy named cheap Something like that. And domain names usually cost about 10 bucks a year. Well, wherever you bought your domain name, you have to have their point it towards your app. And I have no idea how to do that. There's, like, 10,000 domain registrars, and they all do it slightly different. So what you're gonna want to do is just go to Google and I, like, name cheap. I would just type in name cheap and then her Roku. And when you dio there's gonna be an article showing you exactly how to do it. Probably a tech support article for that registrar. So if we look through here, you see right here pointing to the domain to the heroic UAP at name Chief, that looks like that's what we want. And it's ah matter of pointing. Ah, see name towards her, Roku. So you could just go down here, read through here. It's going to show you exactly what you d click on your domain list at name cheap. Well, whatever your registrar is, then you click on the manage button, go to advance DNS at a new record. Uh, type in in a sea name record www dot example dot Roku DNs dot com So right there you would type in elder stock dot Roku app dot com, which is, um, this right, this is your URL. And you would just put it right there. Put that as automatic click here to save it. And that's pretty much it, I think. Yeah, there's a couple other things here. If you want to do a u r l redirect or something. Yeah, just that easy, generally. And, you know, if your go daddy, same deal, just go type. Go, Daddy. Roku, If I could type which I can't and again configure, let's get hub at a sub pro coup with Go, Daddy, You know how to configure Hiroko application DNS to go, Daddy winning a good domain. Just click on one of those and sort of read through it and, uh and see, So that's all it takes. Super, Super, super simple and really quick. Now it's gonna take sometimes a couple of hours for the DNS to propagate through the Internet. So it might take, you know, an hour or two. Sometimes if you restart your computer and flush your DNS. It'll go quicker on your computer, so that's just have domains are it's nothing do with her, Roku and Sellers to it. So I think that's all for this video.