Let's build a simple API in Node.js! | Ethan Davis | Skillshare

Let's build a simple API in Node.js!

Ethan Davis, Software engineer, high school student

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
7 Lessons (25m)
    • 1. Introduction

      1:03
    • 2. Setting up our workspace

      1:01
    • 3. Intro to core modules

      4:14
    • 4. Intro to NPM packages

      5:03
    • 5. Project overview

      1:33
    • 6. Building the API

      9:52
    • 7. Conclusion + Sharing your project

      2:15

About This Class

This is an introductory Node.js class! In this class, you'll learn about the Node.js and NPM ecosystems while building a simple HTTP API which returns random quotes.

Note: A basic understanding of JavaScript, while definitely not required, may make this course even easier to understand!

Transcripts

1. Introduction: I need the Davis. I'm a student in that area. I'm also suggests developer in this course I'm going to be teaching all about and building 80 IES in Js. So essentially, in this course, I'm going to be teaching about a few main things, one of which is notes core module systems. We're going to be learning about to Cornwall deals and Js revealing about the path model and the file system. Love you'll. We're also going to be looking just dogs. That's actually going to give you a bit of information about how to read no dogs and interact with core modules in general. Also, what were going to be learning about is the PM ecosystem, which is going to teach us about how to consume and create around PM packages for the purpose of building an A p a. And throughout the course, we're going to be working on building a really simple. They get that return to us a random quote from a file created. So this is going to give you a really nice over. You know, I think you're really going to like it. So when you're ready to go into the first lesson, well stewed up, we'll see that 2. Setting up our workspace: Okay, welcome to lesson number one. So, in this lesson, we're gonna be setting up our workspace. Um And so to get started, we're going to be heading over to know J s story. If you're on a Mac or PC, there'll be a download button right here. So we're just going to go ahead and download that a 11.3, which is the current LTs. Then we'll go ahead and run the installer. You'll be running through this. It won't be too complicated, Probably. So just go through that. And then we're also gonna do is we're gonna install sublime text. So I'm going down with back version perfect and then also run through the installer for that which should be super complicated either. So I'm not let her workspaces set up. What we can do is we can open up terminal or command prompt or whatever kind of constantly got on your os. And what we'll do is we'll type note hyphen V to make sure that we're on the correct version of node, which and it really anything above eight should be working because that's new enough. Probably. Um, yeah, and then you're ready to move on to the next lesson. Let's do it 3. Intro to core modules: Okay, everybody. Welcome toe. Lesson number two Um so let's get started. First Vault Creator directory. I've already made one. It's called Demo One. So go ahead and do that. What we're going to do is drag that into sublime so we can set up our workspace for our brand new testing project, I guess. So Here's what we're gonna do is we're going to create a new file. We'll call it index dot Js. And this is going to be just a quick demo of how do you nude Seelye to start with just to run your code. So what we'll do is we'll head over to that directory and the consul too. So use CD, I guess if you're on a UNIX system to enter that directory, it's now we're in here, and what we can do is we're going to do a consul that log the world in our index. Such Yeah, so this is simply going to log Hello, world. Okay, great. So, um, obviously that's a pretty simple program, and there is definitely more. We want to dio. So what we're going to do right now is we're gonna look at a few of notes core modules, which let you basically do slightly more advanced things in that with the language. So we're going to go to know J s story, click on dogs, and I'm gonna head over the docks for the version Note I've installed um So what? The two packages were going to be looking at our, um uh, first of all path. So this one's path right here that allows you to do is well, basically interact with pads. This strings essentially. So what we'll do is we're going to say constant path equals require path. So what that does is it imports the path module, the path core module, and basically assigns it to the variable path or the constant in this case path. So, um, let's do a quick demo of this. What we're going to do is we're going to do instead of Consul, that log. Hello, world. Will the council dialogue path dot Join underscore. Underscore during name, comma test dot Txt. Okay, great. So what's this going to do? Good question. What it's going to dio is give us this directory. So essentially what this is is a path to underscore underscored her name combined with tax dot txt So essentially it finds this directory demo one and then appends text txt to it. So basically contaminating those two paths Um, so pretty simple. Right? And the next one we're going to look at is file system. So to use this one, we're going to require f s. So let's do that Collins f s equals require us. Great. So what f s a lousy to dio is? Um Well, let me just show you first of all, so let's do Fs don't read file saying around that. And, um let's put a dot to string on this. Okay? So basically, what this is going to dio is first of all, we're gonna get the path for text txt which doesn't exist yet, So that would, um, just give that path for that file. And then we're going to read the contents of that file synchronously with fs. Don't read file sync. So thou return the contents of that file on vellum return a buffer object which is basically like binary representing the file. So what we'll do is we'll do dot to string on that converted back to tax. So why don't we actually create our test dot txt file, and we'll just put some Texans. Hey, there, it's up. Okay, great. So now let's go ahead and run this. And there we go. That's the contents of our file. So what we've done again to summarize is we've required to core modules and use them together to read the contents of this file and locked it. So that's very simple. And we're going to be using these, actually, in our in our final AP, I that we're going to be a building. So anyway, now that we've done this Marie, for the next lesson, see there. 4. Intro to NPM packages: Okay, Welcome to lesson number three. In this lesson, we're gonna be learning about NPM packages. So first of all, we're going to create a new directory. I'm gonna call my demo to I know, really creative. So let's see into that directory and bring it up in sublime. Okay, So what we're going to do is we're going to initialize a new NPM package. So what we're going to do is in our consul type npm in it. So this is going to walk us through creating new package. I'm going to give with pretty much all the default values for this. So if you like, you can just press enter and go through everything, um, there we go. So that's a pretty basic package. Anyway, it's now you'll notice it's created this package. Don't Jason, file, which basically just gives some information about our package. Okay, so what we're going to Dio is, um, we're gonna actually head over to npm gs dot com and we're going to find a package called Boksic. Okay, so this is actually a package we're going to be using to create our a p I. It's essentially a really simple node web framework that makes building web abs and stuff pretty simple. So, um, we're going to npm I back sick. Okay, So what does this do? It did a few things. One and creative package. Lawful. Jason. Vile. We're not gonna worry about that too much now, But it also installed to Arnoud Modules folder to different packages. So these air different packages installed from in P. M that are basically going to allow us Teoh, use the vaccine library in our code. So what we're gonna do is we're gonna couldn't conduct study s files in this directory. We're going to do this. We're gonna say const. V uh yeah, let's call it G equals require toxic. So this is just imported the vaccine hclibrary as a constant v, uh, kind of similar to how the important note packages actually heard. Known modules, If you think about it. Default kind of similar to how we imported cornered modules, if you think about it. So basically, what we're gonna do is we're gonna say const off equals new V. So this actually initialize is a new V object. Your tactic object and calls it up. Okay, So what? We're going to do is we're gonna see up. Don't add, um, let's do get slash test. Um, and then we're going to make any function in here, Um, an arrow function in this case, we're gonna give it the arguments request are already que and response or rez. And this one's going to be simple. Where USA rez don't write Head 200 which just basically responds to er tells the client that it's an http 200 response which basically means that the request was successful. So we're going to also do rest on end. Hey there. Okay, great. And now we're going to do out. Don't listen. Let's do 80 80. Okay? Awesome. And actually lets out of one function here to you. Lets you inherit their arrow function. Will do council dialogue, listening. It's now we'll know what our app is listening to. So great. Uh, let's head over back to our council here, and what we're gonna do is we're going to run note index dot Js and it logs listening. Great. Um, So what we'll do is we'll open up our trusty web browser and, um well had ever to local host full in 88. Oh, right. I bet it's not gonna look, We didn't set the path. Let's do slash test, and we've got a response. Hey, there. If we want, we can actually look at the request itself by going into the expect panel and chrome, and we'll see that right here. We've got a 200 status response, and yeah, as you noticed, when I tried loading local host a deity, it actually didn't load. That's because we haven't set anything up for that path. But what we could do actually do an app ad. Um, get our I Q r. Yes. Um Right. Well, the resident right head for a four resident end, 44 page stuff out. And so what? This does? First of all, we added this one first. So basically, this one's going to come after, like, Okay, this one will be Will come after and priority. Basically. So let me demonstrate. What that looks like we're gonna do is we're gonna press control and see stop our program for running. Then we're gonna run that again. Then we'll head over to local host 80 80 and we'll see for a four page not found because this is the path specified for this one. And because it didn't match this, it went on to this one. So let's do again. Slash test. And would you look at that? It says, Hey there. Okay, so, um, this is the end of this lesson. You ready to go into the next one? See you there. 5. Project overview: Okay. Welcome toe. Lesson number four in this lesson, we're going to be looking at exactly what we're building for a class project. OK, so here is the quote a p I documentation that I made So essentially, it's a really simple e p I overall, basically, it really is just has one path. And that is, um slash ap i slash quote, but you consent to get requested to receive a quote response, which has a quote, property and a buy property. So, um, get started. We're going to want to do is, uh, create a friend new folder. I'm going to call my dad. Actually, now I'm going to call my quote if he I look how created that is. So what we'll do is we'll cd into that directory and we're going to NPM in it that as well , Great. And what we'll do is we're going to npm my back sick. Okay, So, to build our a p, I were going to be using knowledge from the first few lessons, including our knowledge of how to use the file system and path modules as well as our knowledge of using Batic package. So overall, it's actually going to be pretty simple to build on. Uh, we're going to be doing that in the next lesson, so I'll see you there. 6. Building the API: Okay. Welcome to less than five. Where we actually build are quote a p I so again for reference. Here is the a P I documentation you confined in the class project, Um, as an attachment called FBI doc. Pdf. So to get started developing, we're actually just going to create our index dot Js file. We're going to require, um, path, which we're going. Teoh import is a constant, and we're going to also bring in file systems will require fs, and we're going to bring in HVAC sick are which will require on will assign to be variable or constant V. Great. So now what we're gonna do is creator up. Colin stop equals new, and we're going to the What is it again? Slash ap I slash quote. Okay, great. So we'll do the a p. I quote point right now app dot ad get slash B p i slash quote q R Yes. And why don't we had a 442 will do. Opt out ad uh are you Q r. Yes. We're not gonna specify um, a request method for this one. Just because then this little light, all different methods and clean get post whatever people may try to use. Um, so are you Start right head, uh, for a four. Are you still end? And what will do for a p I is Because this is a Jason response. What we'll do is actually will make all of our responses. And Jason so well rested and Jason don't string if I and will make this an object with the property error error, Um, for four resource I know about if we don't need the forum for that. Okay, Great. Um, and what will also do is a lot of content type, header content type application. Jason, that's a pretty standard, actually. From Jason 80 eyes and stuff to you. Okay, so now we actually need to do the part where we wait now, let's. Actually, first of all, what we'll do is we'll also, however, out Listen on, pour 80 80 like we did before, and let's have it log Olsen. When it starts up, council don't log. Gosh, um, if you is. Okay. So now we're actually going to be building our slash ap ice left quote employ. So, first of all to do that, we actually need to read from a quotes file. Let's make our quotes file for us. We'll call it quotes dot t x t. And, uh, let's come up with a formal Let's do it like this. OK, so we'll do the quote. Hey, my name is even. And then what we'll do is we'll dio what will be our separator? Let's do three hyphens. I've been I've been hyphen then Davis. Okay, Perfect. So, what does this do? Basically, we've created us. Um, a quote and each quote is going to be on its own line. And each quote is going to contain three hyphens or each line is going to contain three hyphens separating the quote from the three author of that quote. So let me just add a few more, actually, really quickly. Uh, okay. Great. So now I've just added a total of four quotes. Now we're ready to actually read the quotes file and Parsons contents. So what we'll do is we'll we'll go up here, we'll say, uh const quote, um quote file contents equals F. Esther Reed. File sync. Half join. Underscore underscored her name, which, remember, is this directory right here in the same directory that are index address file would be in . So the quota directory and will join that to you quotes dot txt and we'll make sure to string that. So we converted from a buffers to a string, and I'm not well, actually making array, I think. Oh, should be an array. Uh, let me think about that. Yeah, Yeah, that's a little dated. Quotes equals. Should we do it like that? Actually, let me think. Uh, yeah, let's do that. Collins quotes equals you're a okay, Great. And what we'll do is we'll go to quote file contents don't split backslash and dot forage line. Okay, So what this is going to do is it's going to execute all the contents in here for each line in the quote stuck txt file. Because what we did was we split quote file contents at every new line, which is back slash on. So what we'll do for each line is we will do quote, don't push. Which adds an element of the rain will pushing you object. And what was the format for this? Um quote and buy. Okay, we can do that. Quote Lyon dots. Let's actually make one more object here. Const fine parts equals line dust split hyphen, hyphen. Hyphen was a three hyphens. Yeah, Waas Okay, eso are quote here would be, um line parts zero. On the by is line parts one. And on your quotes a txt because we're parsing it like this. You want to make sure that there's no empty lines in here, so they all need to be in this format. So basically, like, if I'd a new line at the end, I would probably cause there's potentially. So, um yeah, that's definitely something to be where we are aware of. Uh, so great. Now what we've done is we've added all of our quotes to this quotes array. So, um, now what we need to dio is actually return them at this eso. Now, what we need to do is actually return them at the A p I quote and point. So what we'll do is we'll the Red Star right had 200 we'll do content type application slash Jason. Um, okay. And then what we'll do is we'll do rez end. Actually, first, let's get a random quotes. What do you call it? Random quote equals quotes, math dot floor. I thought Random times quotes dot length. Okay, so what the heck is this whole thing? Actually, So what we're doing is we're assigning, uh, we're making constant called random quote. What that is is it's basically, um Well, actually, let me give a quick demo right here. So let's say we did this. What this would do is it returned the first quote in our quotes. Right, Because Index zero is the first element, Lee Ray Index one is the second and so on. So what this does, is it is it first of all rounds down a random number of random decimal between zero and one , which is multiplied by the length of the quotes array. So basically, it gets a random index, often element in the array. So now that we've done that, let's go ahead and actually returning. What we'll do is we'll rez don't end. Jason, don't string if I, um, quit, and I believe we're done, so we're ready to test it, which we will do in the next lesson. I'll see you there. And actually I believe we're done with the A p I. So let's go ahead and test. It lets you knowed index dot Js and it says the A p I is now listening. Okay, let's check it out. We'll go to local host 80 80 flush. Let's first. Well, actually, just go there and see if we get the 404 OK, good. So error resource not found. Let's check. It's 404 Really quick. Uh, yet the status is for four. OK, good. So so far, I guess we're compliant because, I mean yeah. Uh, what we'll do is we'll go to slash AP I slash quote in our browser. Okay, Clearly, something is a bit off here, but we did get are 200 response and we let's see if we get a random quote. Okay? Actually, okay, I see what's up. So we did get a random quote, but it looks like something is wrong with what is the joke. I don't get it. Everyone quote because look at this. See all these, Otherwise, they're pretty much formatted properly, so let's check it out. Oh, yeah. See what I did here? I I did two hyphens instead of three. So clearly that caused an issue. What we'll do is we'll restart and tested out again. Let's see if we can get to our everyone quote. Yeah. There we go. OK, so yeah. Perfect. And if we look at our response headers, we should see content type application. Jason, which is good, because it definitely is a Jason response. Um, Okay, great. So, uh, will be giving an overview of, I guess, everything we've learned in the class and next lesson. So I will see their 7. Conclusion + Sharing your project: Okay, so now that we've finished building her a p I well, all of the coding in our classes completed If you'd like, you can stop here. Um, if you enjoy the class, feel free Dio leave a review or follow me on skill share. Follow me on Twitter. You don't have to, but it would be. Appreciate it if you'd like. You can share your project to the class. So to do that, what you're gonna want to do is create a get up profile, which I already have done. But if you like, you can do that to get, have dot com and create an account, and then what we'll do is we'll click this plus, including the repository. Uh, feel free to call yours whatever. I'm gonna call mine. Quote a P. I Great. Okay, So what we'll do is we'll have to get ignore. Well, I note is our get ignore on. We'll initialize what? They read me. Okay, Perfect. So let's get the repository. Awesome. And now what we're going to want to do is open up our project, so I'm actually gonna go to my quote, a p I folder right here. We'll select these files out of the folder. So quotes, index package locked package. Jason, we'll just drag them right in here to upload them to our repository. And we can name the commit, okay. And then we commit. And now all of our code will be in this repository. Great. So it's all here now. What we can do is grab this link right here. I'll copy that, and then I'll go ahead and head over to the class page. I'll go to your project, like on Creative Project on. Then we'll title our project. I'm going. Come on. Awesome. Quote a p I. And then what we'll do is like, get up, get up on. Let's make sure that this is a link. Just that's easier for people there we get okay, and then we can go ahead and publish the project to the class. And there we go. Done. It's published. Okay, So, um, anyway, thank you so much for joining me for the class. It's been really fun. I hope you've enjoyed, um, again feel free to follow me on Twitter skill share on leave A review for the class. Really appreciated. Have a good day on. I hope to see you soon for future classes and stuff. Hasta luego