Introduction

Yeah. Hey, good morning. Good afternoon. Good evening. Hope you all are doing well. Welcome back. Hey, let's go. I played the music and I got so into it. I almost forgot the first Yeah, I was like, yeah, yeah, what's going on everybody? Hope you all are doing well. Welcome back out where we got a good night tonight. Little different, we always like to mix it up every once in a while. Tonight, we're gonna review the node code from last class, step through it kind of almost line by line, make sure we feel comfortable making changes to it, and then we're jumping into a project night. That means no check-in. We don't want any new riffraff coming in.

Just want it to be true 100 devs in the house. So, we're gonna get in, we're gonna answer some questions, we're gonna jump into some code, and then Project Night it is, folks. I want you to build a full-stack app using core modules, some real nerd stuff, and then next week we bring in, oh, sweet, sweet Express. Oh, can't wait for next week, but tonight we do a bare bones when you're in an interview. You say, ah, express, express, I've done it with the core modules on the block by myself. Let's go. Are we riffraff gatekeepers though? No, it's just because new folks joining at this point is always a little weird because They show up day one and it's project night and they're like, oh, what is this? So we don't like to do tweets on on project nights Just so that new folks aren't confused like why we weren't live on stream anymore why we're on this thing called Remo and discord Yeah Alrighty folks, let's get into it as you know always like to start off with some questions if you got some questions I got some answers. Let's give folks that are running home from work a chance to get in no new friends. Exactly. No new friends Not on project nights just too confusing for folks that are joining All right, folks. You got questions. I got answers Let's get a few questions in as folks join us. We're gonna go through the code and then bump in to project night What does ketchup crew do about all these project nights Well when you get to the project boom post on the ketchup crew, hey, I'm getting to work through this project You'll have tons of folks that want to join you on that project So if you're going through the ketchup crew, feel free to do the projects at your own pace Posting the ketchup crew folks will join you Is our project gonna be due for homework, of course, of course, we're gonna start it tonight it's due for homework on Tuesday day.

I went, I went to a job fair and now people are contacting me. I'm still not ready. What do I do? You say, Hey, I'm not currently looking for new opportunities, but I will be in around three months. Oh, you tell a recruiter that they're like, Oh, you don't want to, you don't want to interview right now. Why? Why not? Oh, you're, you're elusive. You're hard to get maybe I want you more now and I will talk to you in three months And so always get a time on the calendar and say hey right now I'm not looking for new opportunities, but we'd love to catch up in three months Can we put something on the calendar today for three months away? Right and the beauty of that is that in three months time when you are more ready You already have that calendar invite ready to rock and roll. You're ready to meet with those folks. And so you're gonna start If you're doing things correctly, right, if you're doing all the things we've been talking about, when it comes to your resume, your LinkedIn, your Twitter's all that stuff, you're going to start having recruiters reach out to you. And part of the process is managing that and not, not putting all your hopes into each outreach, right? Like having a dedicated process, realizing that you're going to be working with 60 companies, right? You got it.

You got to take it in stride and you got to make sure that it's on your terms. And so you got to get comfortable saying hey, I'm not really looking for new opportunities right now, but I will be in three months Let's connect then and get the time on the books for then Don't don't run into the slaughter. If you're not ready yet. That's all I'll say I have my first chat with the recruiter from IBM tomorrow I had lots of coffee chats where the end goal was to get a referral from a person and what kind of questions should I be asking? So on the bank, there is a list of questions that you can ask other folks. So if you just use the bank, exclamation point bank, there are questions at the end, right, right? There are questions at the end that you can use to ask during interviews. So make sure you use those questions. When it's an informational interview with a recruiter, You want to just kind of talk about the company what type of what they're looking for and engineers What exciting things that they have that they're working on currently you should do your research before you go into those calls Know about the company know about new initiatives projects things like that know about their core values make sure you're peppering that in while you're talking to the recruiter, but a Lot of times these first calls are informational ask good questions that are on the bank and you'll be in a good spot All righty, got some good questions coming in here. What if I'm asked a tech question in an interview and I still don't know the answer for it? That's okay, take a pause, think about what you do know and answer that. I'm a big fan of never saying I don't know right I feel that's some somewhat of a contrarian viewpoint But it says like I have no idea you go Well, here's what I do know and I know it's in the same realm Is that close to what you were looking for right? So even if it's not on the nose with an answer You kind of give them some Background some other things that are close to your experience the things that you do know and and try to get close to it But remember when we're interviewing when we're interviewing It's one of 60 so sometimes interviews don't go our way. That's okay. We dust our shoulders off We move on to the next one and we make sure we never forget that question ever again Should we be getting interviews now?

No, we are not ready to interview yet. We are not ready to interview yet We still have to go through the patented 50-day system to be ready to interview We have a lot of fun stuff a lot of a lot of things that we have to learn to be really really lean mean and interviewing machines, so we're not there yet. We're getting close. We're starting to hunt soon. We have tonight to get into some Node. Next week, we get into Express. By the end of next week, by the end of next week, you can build your own APIs. Let's just think about that for a second. You'll be able to build your own APIs. By the end of next week, any API you wanna build, you'll be able to do it. By the end of next week, you'll be able to build basic CRUD apps. Basic CRUD apps, build your own APIs by the end of just next week, all right? And then we take the next few weeks to ramp that up, right? We'll take some time actually for you to have time to build projects using those technologies, right? So we will have a little bit of a break coming up.

That's not really a break, it's really just you having extended project time to put the stuff that we learned into practice, right? But we're close, folks. I know this when we get to know people like to freak out a little bit But I just gotta tell you that you're getting closer. The nectar is getting sweeter You're you're you're you're almost there in terms of being able to build whatever you want to build And so tonight we're seeing the old-school the bare bones We're we're pulling on our nerd pants that we can do it from scratch with with the core modules But next week when we hit Express Express makes our lives so much easier. We're able to build our own APIs. We're gonna be able to build our own CRUD apps. And then it's just a matter of what do I wanna build and putting in the hours to get it done. So you give me one more week, you're gonna be feeling good about the things that you can build. And then that's when the world kind of opens up. After next week, the world opens up. You can do the things you wanna do. You can build the things that you wanna build and companies will start to see the quality of your project start to increase. and once we're feeling comfortable building, that's when we start the hunt and we lock down these jobs. Cool. All right, speaking of such, when we get to node, when we get to the backend, there is a moment, right?

There is a moment. There's like a little thing that happens in your brain that just goes, huh, right? It's kind of like jumping into a cold shower, right? I don't know if you ever jumped into a cold shower you jump into the cold shower and it feels horrible at first Your heart rate is racing you all the only thing you want in that moment is to get out of that cold shower But if you just stick it out Just for a few seconds just for if you if you let the initial shock of being in that cold shower dissipate It's not too bad, right? It's not too bad. Once the initial shock goes away and you realize, all right, it's just, it's just cold water, I'm still alive, I'm going to make it right. I'm just, I'm still here. We still online. We still outside. Right. It was just the shock, right? That shock that, that, that, that, that, that. But if you just get through that, that initial shock, the initial panic, you start to realize it's not too bad. Some folks might even say it feels real good. I think it feels good.

And I think no, it can be something similar. We look at it and that, that panic reflex happens. And just like if you were in a cold shower, you freeze up, you panic just a little bit. But if you can get just over that, just that little hump of panic, that little hump of like the brain glitching for a second, and you can just get to the other side, you start to see the benefits of it, right? You start to see, oh, it's not so bad. I can use this to build real stuff. I can use this to like make my dreams come true. Like this is wonderful. And so when we look at this node code tonight, and give yourself a second for the to happen. And then realize, you know what? It's not so bad. When we look at node, there's a lot of little things and I don't need you to understand everything. I just need you to know how the Lego pieces come together. When we're writing backend code, we're sitting on the shoulders of giants that have done all the heavy lifting for us. And so I don't need you to know the nitty gritty of how create server works.

I just know you need to use it when you're creating a server. I don't need you to know the nitty gritty of how read file works. I just need you to know when you're trying to send a file, that's what you use, right? And so when we look at this code tonight, give yourself that breathing room, that a little bit of trust that it's gonna be okay and realize that you don't have to know everything. Right now, we are picking up blocks and learning how to put these blocks in convenient orders. That's all it is. And eventually, we'll have other tools and systems that make rearranging these blocks easier, right? Right? Making sure that you have systems to arrange these blocks. But at first, we're just picking them up and going, all right, this does this, this does that. But I guarantee you, when we look at some of the code tonight I couldn't do it from scratch. I wouldn't want to know how to do it from scratch. I would just look at my past examples, grab some snippets, put them together. I know how it all comes together, but you don't have to stress out about knowing all the nitty gritty details. So let that moment dissipate and we're gonna get into some node.

We're gonna see it, we're gonna talk through it tonight, and then we're gonna get into Remo or Discord and practice building. Tonight, I want you to build your first full stack app. Something that's gonna go on your portfolio that says, you know what? I've done it from scratch. I've done it with the basic core modules. Express was just another tool in my tool belt, but I've done it from the beginning. So let's take a moment. Let's look through this code that we saw last class. Let's talk through it, kind of go through it line by line, and then we're gonna stop. We're gonna move into a project night. We're going to work on projects together as a as a wonderful 100 devs community and then no next week We had express on top and our life gets easier. We're building APIs. We're building the apps of our dreams. You're close Close Well, alright folks My roommate where I were studying APIs and objects last night, I was nervous going into it. He literally told me everything you're saying right now, just give it a bit of stress and moment of terrible path and everything gets so much easier.

It's true. It's true. All right, folks, let's go ahead and jump. Jump in. I'm going to go ahead to little Leon here. All right, if you need the materials tonight, there's no slides, there's no checking because tonight's a project night. So we're going to stream just for a little bit, to walk through this code one more time. Let's pack together exactly. And then once we are done walking through it, you're going to jump into teams to build a full stack app of your choice. Woo! I'm excited for you all to be true full stack developers, building full stack apps with the core modules in the muck. Let's go. All right, so when we look at this code, if you don't have the code, you can join our Discord, exclamation point, Discord, agreed to the rules, and the following one materials channel is this code, the node backend simple JSON. If you were here last class, you already have it. You can download a fresh copy if you want to, but that's what I'm looking through right now.

Cool, all right. If we look at it at the top, we have our what? What do we have up here, chat? We have our modules, right? And our modules do all the heavy lifting for us. If we were to peek into these modules, we would see a bunch of functions that have been written for us, right? that do all the heavy lifting. The HTTP module comes with everything we need to start a server, to listen to network requests, to respond to network requests. The FS module comes with everything we need to access the disk. Remember, when we are creating servers, when we're talking about how the internets work, we're talking about how the internets work, we have client side devices and servers and these clients are making requests to the server and the servers responding at first with files right with files and those files have to exist somewhere and they're existing on a hard drive or a solid state drive on the server. Right? They exist on the server. And so we need something that enables us to grab those files, the HTML file, the JavaScript file, the CSS file, off of the hard driver, off of the SSD. We need something that can actually do that. And the FS module is what handles that for us.

Then we want to be able to look at the different requests that are coming in. When we're talking about this very, very basic backend code here, when we're talking about this very, very basic full stack app, how are our users making requests? There's really two types of requests that we see in this project. You know how we're making those two requests? Remember from Tuesday? There's only two ways that we've been able to make requests with this app that we've built here. What are two ways that they're able to make requests from the client? Yeah, changing the URL was one, right? So if they typed in a URL and hit enter, that was a request. And the cool thing is, we're able to look at that URL to see what they were requesting, right? That's what the URL module is gonna help us with here, is gonna be able to look and see, all right, what were you requesting? Then we also had one other way that we saw that people were doing, and that's right, it was the fetch. So in our client side JavaScript, we had this lovely fetch here, and this fetch was making a request. But if we look on this request in the fetch, it has a what? What did this fetch have on it?

Remember from when we were doing our APIs? Has a specific name. Yeah, query parameter, exactly. We can see in our fetch that our fetch has a query parameter called student, right? It's called student. That's the query parameter. So if we look at our modules, we have something that's gonna help us set up the server, listen to those requests, respond to those requests. We have something that's gonna enable us to look at the disk, grab those files off of our drive. We have something that's gonna enable us to look at the URL that's coming in as part of that request and be able to look at the query parameters that are part of the request. And then last we have figlet. What did figlet do? Yeah, it gave us a lovely ASCII art 404. Well, Figlet just takes any string and turns it into ASCII art. We just used it for the 404, so it looked good, right? Now, is Figlet like a core module?

Does that just like come when you use Node? No, how did we get figlet? Yeah, we had to use npm. We used npm install, npm install figlet, and we got access to figlet. I love it, somebody said Mayan told me. Exactly, Mayan Wolf told you, exactly. All right, so we have our modules that are doing all the heavy lifting for us. And then we have our actual server code here. And you feel the, right? You feel the, right? We look at this, there's a lot going on here. The only thing that this is doing, all this code that I have highlighted, it, all this is doing, getting close with it, it's looking at what's being asked. And if it understands what you're asking for, it gives you a response. That's all it's doing, all the code that I just highlighted, all it is, is it's saying, all right, what did you just ask for from the client? Do I know how to respond to what you just asked for?

And if it doesn't, if I don't know what you're asking for, what do I do? If I don't know what you're asking for, what am I gonna give you? I'm gonna give you a 404. So if we go back and look, look, look, let's go back and take a look. You're just asking the server for stuff. And here's me just trying to handle everything you're asking for. But if I don't know what you're asking for, This is what I do. I respond. I respond with a 404. That's it. All I'm going to do is I'm going to send you. I'm going to send you the 404. That's it. That's all I'm going to do. If you ask for something and I don't know what you're asking for, you're getting the 404 back.

All right. Now, there are a lot of things that you could ask me for. Let me get big here for a second. All right. There are a lot of things that you could be asking me for. Right? But when we're talking about web applications, we're using a specific interface. What's the interface that we're using when it comes to web applications? I'm in the browser like if I'm if I'm on my clients and I'm in the browser, but I'm using a specific interface a lot of times Yeah, I see some folks are in there the URL is our interface the URL is the buttons on our remote control so when we run this server the server is is listening for different URLs, that's it. Those are the only buttons on our controller, the only buttons on our interface, right? It's just the URLs. So when a user types in a URL, they are making a request, right? They are making a request to our server, and that is the buttons on the remote control. Just like you can hit the power button on your remote control and that request goes to the TV and the TV turns on. Well, the way this server is working is that it's listening for those button presses, but instead of it being buttons on a remote control, it's just different URLs that you're asking for.

All right, different URLs. So let's go to a normal website. Let's just go to a normal website. All right, no more website, let's just go to it. leonnowell.com, boom, beautiful website. When I hit enter, when I hit enter on leonnowell.com, what did I just do? I made a request. I made a request to my server. My server heard that request and responded with HTML. Right. That's why you're able to see something in the browser. You typed in leonoa.com, you hit enter, you made a request. Just like when you press the power button on your remote control, you're making a request to your TV. Well when you type in a URL, you are making requests to servers. So now let's look at our server.

Our server is set up to hear different requests. A request on the main page, the main route, the just the normal page that you're on, the default, the index, the root, whatever you want to call it, the main page. It's also set up to hear any URL that has other page. It's set up to hear any URL that has other other page. it's set up to listen for URLs that have API in it. It's set up to hear URLs that have this style sheet in it, URLs that have this JS file in it. And if it doesn't have any of those URLs that I just showed you, it serves up a 404. That's it, that's all we're doing. That's all we're doing. It's the only thing that we set up our server to do. Right, we set up our server to listen for specific things. Right, we set up our server to listen for specific things. And when it hears those specific things, is we get to decide what happens. So right now, the way most websites work is that you are typing in URLs and when you hit enter on your URL, right, you expect some stuff back. When you go to dominoes.com, you expect some HTML to be sent to you.

Right, you expect some stuff to be sent back to you. This is the way the web has always worked. This is what you do whenever you go to any website. You type in a URL, you make a request to a server, the server hears the request and it knows what to do because somebody coded it in the way that it's supposed to respond. You get to control what happens when somebody makes that request. When somebody goes to that URL, you get to decide what happens. And so what we're saying here is if somebody goes to our main page, send them this file. If somebody goes to this page, send them this file. If somebody goes to this page, send them this file. If somebody makes this request, do this crap right here. If somebody asked for this, send them this file. If somebody asks for that, send them this file. All it is, is someone that's listening and then responding. We get to code what happens when we hear that request. Right?

Same exact thing as a click event. If you know how a click event works, you understand how the backend works. Think about it, right? We said, when you click on this thing, I want you to do all this code. They're just, the Smurfs are back in town, right? The Smurfs are back in town, right? They're just fancy Smurfs. They got a fancy hat on. That's all it is, right? When you clicked on something, some code ran. Now, instead of it being a click, we're listening for a request. And the most simple request that you do every single day when you're using the internet is just typing in a URL. When you type in a URL, the Smurf with the fancy hat, hears that request and then it goes, all right, so I just heard this request. What am I supposed to do again? Oh, I'm gonna send them this file.

Or the other Smurf hears this request and goes, what am I gonna do again? Oh, I'm gonna send them this file. That's all that's happening. That's all that's happening. The front end, someone's typing in a URL. On the back end, someone hears that request and knows what to do to respond. That's it. That's how everything we do going forward is just that. It really is. You make a request, we know how to respond. That's it. Now our responses will get more and more complex, but the idea of hearing the request and responding, it stays the same. Eventually when we hear a request, we're gonna do a bunch of fancy stuff. We're gonna go to a database. We're gonna get data.

that we're gonna do something with that data. We're gonna make a really, really fancy response and then respond with it. But all it is, is a request and we get to control how we respond. So we have our code here. I'm gonna go ahead and open up my terminal and I wanna run this code. How can I run this code? I've already done my npm install figlet, right? Because we didn't have figlet. I already did my npm install figlet. You don't have figlet installed, you're gonna have to do npm install figlet, right? Just so you have it. If I wanna start this server, I'm gonna do node server.js. Beautiful. How do I know that my server is running? Yeah, no REPL.

Oh, I don't have the ability to type out my next command. So something's happening here, right? Something's happening here. I can't actually type another command. So I know that my server is running. If we look all the way at the end, my mouse die? My mouse just died. All right, I'll use my other, I have my backup mouse. All right. All right, so I got a backup though. All right, so if we look all at the end, we can see that my server is running on port 8,000. So we can tell that my server is running because I don't have my REPL back and I can tell that it's on port 8,000. So I'm gonna go to my browser and I'm gonna go to localhost 8,000 and boom. As soon as I typed in localhost8000, what did I really do? I typed in localhost8000, I hit enter from my browser.

What did I do? I made a request. Beautiful. My server, which is running, is set up to hear that request. And when it heard the request, it did something specific. Like, let's go look at what it did. So here we go. Here's the page that was requested. Here's the page that was requested, right? The main page that was requested. What, when I heard that request, what did I respond with? I heard that request, what did I respond with? I responded, exactly. I responded with my index.html. That's it.

This whole block of text, line 12 through 16. Right? 12 through 16. All that code was just so that I could respond with my HTML file. That's it. Do I need to know how each of these lines works? No, I don't. I will never see these again. Express is going to handle all this for me in the future. I don't need to I can kind of decipher what's happening here when you are Responding there are codes that the browser used to kind of understand if The request you made and the response that you sent was successful. So we're telling it. Hey Everything went. Okay. That's what 200 means everything went. Okay, and we're gonna send you some HTML Then we're kind of pulling in the HTML that we're gonna send and then we like, we send it.

That's it. That's it, that's what's happening here. But do I need to know it? No. Will Express handle it? Yes, right? But when folks see this, they get freaked out. They're like, Leon, do I need to like be able to code this from scratch? Hell no. Do you need to understand what's happening? Yes. You need to understand that when somebody made this request, this is what we wrote to respond with. That's it. And we got to control how we responded. In the future, if I needed to respond with a different file, what could I do?

If I knew that on a different request, I was gonna respond with a different file, what could I do? I could copy it, come down here and paste it and change the file that I'm gonna send. Oh, and look what happens here. Here's another request that we're set up to handle. All right, so somebody requests the other page. Here is what I'm going to respond with. All right, let's test it out. slash other page, hit enter, three, two, one. All right, as soon as I hit enter on localhost 8000 slash other page, what did I do? What did I just make? What did I just make? I made another request, and guess what? my server was set up to hear that request. It was listening for other page. When it heard the other page request, it knew what to do.

It sent this, whoop, it sent this HTML file, right? Cool, let's try other other page. Three, two, one, boom. Soon as I hit enter, what did I do? Made a request, and guess what? My server is set up to hear that request. It's kind of getting boring, right? Like we're like, oh, I thought, I thought the back end was going to be so hard. All it is, is listening for requests and writing what the heck happens when that request comes in. Oh, sleepy. Why is it, what is this back end? Why is it so hard? Cool. Now, something interesting happens though. Let's go back to our main page.

Hey, welcome Leo. Let's go back to the main page. Let's hit enter. What do we know? What do we know? What do we know just happened here? We made a request. We heard the request. We served up our HTML file. But then something else happened. Oh, I see y'all. The HTML file asks for some other stuff. The HTML file made some requests itself, right? We went to localhost 8000. We made a request for the HTML file.

And if we look at that HTML file, you can see that it requests a style sheet and it requests a JavaScript file, right? The HTML files asking for those stuff with the script and the link. So because we loaded that page, we asked for that HTML file. Once it loaded, it made those requests. and guess what our server set up to hear those requests oh you're asking for the style sheet boom I got you gonna send you the style sheet oh you want the JavaScript file boom I got you I will send you a JavaScript file that's it Would all images need to be set up this way too? Ducati, amazing question. Yes, right now, every single request would need to be here in our conditional. If you wanted another style sheet, you wanted an image, you wanted a JavaScript file, you would need to have it be part of this conditional. Doesn't that sound like an absolute nightmare? for every single thing that you would ever think about, think about, think about like Instagram, could you imagine being like, oh, I can't think of like any Instagrammers up Kim Kardashian just posted again. And there's somebody like at Instagram, like, like just trying to update the conditional before other folks see it so that the image can be sent to everyone. Right. Could you imagine that? Like they're like, Oh, it is posted again. And they're in there like trying to update the conditional.

Right. No, that's not how it can work, right? So eventually, Express, aka the stuff that we'll be learning next week, makes it really easy so that any of our static files, our H, sorry, any of our static files, like our CSS, our JavaScript, our images, if they're in a special folder, it handles all the routes for us. Right now, when we're using the core modules, anything that we want needs a route. We want a style sheet, needs the route. Want a JavaScript file, needs the route. Images, needs the route. Every single thing we need to hard code right now. But next week on Tuesday, Express gives us a magic folder. And if we put anything in that magic folder, it handles the routes for us. But we ain't there yet. We're still on the block by ourselves, building it from scratch. All right, and we handled each request. But what happens if we make a request that's not part of our conditional? Let's take a look.

So let's go ahead and do localhost 8000 slash Pokemon. We know that there's nothing there. We get a 404. Let's see what happened here, right? Let's try it out. We made a request and it went through this conditional. Did you just request the main page? No. Did you request other page? No. Did you request other other page? No. Did you request API? No. Did you request the style sheet?

No. Did you request the JavaScript file? No. So there's no other else's to check. So the else automatically runs and we send the 404. That's it, that's it, somebody asked an interesting question. What's the difference between doing localhost 8000 and just trying to open the HTML file? Right, like we can do this. Right, we can do that. It opened up the HTML file. It didn't load what though? It didn't load the CSS. it didn't load the JavaScript, right? Because there's a difference between opening a regular file and making a request to a server. When you're just opening files on your computer, they're not making requests to a server, right?

When we are doing localhost 8000, we're making a request to a server. The only thing that's a little weird here is that the server exists on our own computer. but eventually the server won't be running on our computer. Next week, our servers will be running on Heroku or somebody else's computer, right? And so the difference here is that we are making requests to a server and that server could be located anywhere. Right now it's running on our machine, which is a little weird, but next week it won't be running on our machine. And so if we want to make requests and get stuff back, right, we need to make requests to a server that is coded to handle all those responses. Now our server is sending us back HTML, right? That's what a server does. The server is sending us back HTML. So if I go to localhost 8000, I made a request for HTML and it sent it to me and that's what we have loaded here. If I somehow magically had the HTML file, I could try opening it and it would still work. But all we did is we asked for that HTML file, right? Like if Domino's rolls out an update to their website, what up Ryder? If Domino's rolls out an update to their website, do you have that HTML file before you request it?

Like, is there any way that you have that, that new HTML file for Domino's new website? Uh-oh. Y'all hear the door open in the background. I got, we can't talk about it. Hold on, chill, chill, chill, chill. Cool, cool, cool, cool. Dom, APIs, yeah. We're learning JavaScripts. Node, mm-hmm, yep. Connect, internets. Cool, all right. So if we, we went to Domino's website, right? When we go to Domino's website, we request those files. There is no way that we have access to those files until we request them, right? until we request them.

The only thing that's weird here is that we already have the files. Right? So that's why it could be a little weird, but we're building servers so that anyone can request these files and get them. Right now, our server's running on our machine, but next week it'll be running on somebody else's computer out there on the internet, and anyone will be able to make requests to it. And when they make requests, we're gonna send them the HTML. We're gonna send them the JavaScript. We're gonna send them everything. Don't get kind of in a weird spot because we're doing everything locally. That's just so that we can do it quicker and faster. But there's a difference between just opening an HTML file and making a request to a server. Is this what Netlify is doing then? Yes. Netlify takes all of your stuff and puts it on a server. And then when you request it, it sends you that stuff. That's all Netlify is doing.

You gave Netlify all of your code. You gave Netlify all your HTML, all your CSS, all your JavaScript. And what they did is they took all that code and put it on a server for you. And then as you request those files, they send them to you. That's it. Cool. Okay, so our server right now, our server right now is running. I don't have my REPL back, so I can still see that it's running. It is set up, right? It is set up to hear requests. Set up to hear requests. when it hears those requests, we are responding with different things. Right? We are responding with different things. We get to control what we respond with.

Right? This is where the back-end and development comes into play. Our users can make requests and we get to control what we respond with. And so, so far we've just seen, right? We've just seen, all right, they make a request, we send an HTML file. They make a request, we send a CSS file. They make a request, we send a JavaScript file, right? But we have all made other types of requests expecting different kind of data to come back. What type of request have we made where we expected a different kind of data to come back? Yeah, when we made our API request, we expected JSON back, right? We expected JSON back. And so guess what I coded this server to do? This server responds with JSON as well. Not only can it respond with HTML, not only can it respond with CSS, JavaScript, it can also respond with some JSON data. Ooh, look at us, right?

So this is the ability, right? The ability to respond and build right here is a template to build your own API Right right here is a template to build your own API. It's a very simple one next week It'll be a lot easier that the parts are a lot easier to work with But right here is the basics of building your own API. Let me show you so if we go back to our site And we type in John Bob's evil twin We get unknown, unknown, unknown, but we type in Leon. We get Leon, bossman, baller, right? And so when I actually clicked, click me, what happened? What happened? When I clicked, click me, what happened? I made an API request to my server. I made an API request to my own server. Let's take a look at it. Where would that request come from? Where would that API request come from? Where's the only place that we've made API requests so far? JavaScript is correct, but give me something that comes before that because we got two kinds of JavaScript now.

What kind of JavaScript? Client-side JavaScript, exactly. Client-side JavaScript. The JavaScript that's running in the browser, our main.js. Our main.js is the JavaScript that's running in our browser, right? That enables us to make the requests to the JavaScript that's running on our server. So we gotta get comfortable with this idea of client-side JavaScript versus server-side. Client-side is the stuff that we're used to. The main.js file that has our API requests, that's all running in our browser and it makes requests to our servers. Let's take a look at our main.js. And if we look, we have the event listener and that event listener fires our lovely async function. Our async function is doing a few things. It's getting a value out of the input and it's plugging that value into a URL that we are then making a fetch with. And this fetch is the request to our what? This fetch is a request to our what?

To our server, exactly. This fetch right here, this request leaves the browser, goes to our server, and guess what? Our server is set up to hear that request. All right. Was the URL API? Let's take a peek. Was the URL API? It was. All right, the base URL was API. Cool. So we're inside the if. Now, was the word student Student in the query parameters. Was the word student inside the query parameters? Let's take a look. Yes, the word student was in the query parameter.

Beautiful, it was in the query parameters. All right, so student was in the query parameters. was whatever was student equal to, was it equal to Leon? Let's go ahead and take a look. We passed Leon in, we passed Leon in. Leon was pulled out of the input. We passed that value as a template string into the URL, student equaled Leon. So when we go to this and we look, all right, was the URL API? It was. Was student in the query parameters? It was. Was the student query parameter equal to Leon? It was. So what do we do? We respond with this information.

We respond with this information. And what are we responding with? We're responding with a little bit of JSON. Look at this go. All right. I was a little bit of JSON, a little JSON to Rulo. You know what I'm saying? Right? We respond with that JSON. And if we look, the main JS is waiting for that JSON data. Right? It takes whatever we responded with, puts it in res. it makes sure that we're dealing with that lovely JSON data, and then we can use that response to plug stuff back into the DOM. So it was a different kind of request, but our server was still set up to handle it, right? All right, now what if student wasn't a part of the query parameters, right, right?

Would this have ran? No. What if the student query parameter wasn't Leon? Well, then we have an else if here, where we respond with a different set of JSON. And so with just this very kind of basic if else if, we built an API. And the cool thing is, we could have responded with anything. We could have done anything we wanted inside of this lovely bit of code. So when we come back, you know what? Not only are we gonna respond with Leon, Bossman, Baller, but we're gonna respond with a coin flip. True or false, heads or tails, right? We're gonna show how we can make this API do more and more stuff. So we're at the top of the hour. We'll take a little bit of a break. If you're new around here, we always take five minute breaks at the top of the hour. If you're able to, please get up, move around, hydrate.

When we come back, we're gonna show you how we have full control. We can do whatever the heck we want with that response. We're going to see that, put it into practice. We'll talk about some of the other stuff that's happening up here. And somebody keeps asking, Leon, why two equal signs? Why not three? Why two? A lot of weird stuff. What was your homework? What's your homework? What's the homework here? Improve the code, make it better, make it easier, more readable, better, right? So lots of little wins here for you to improve the code as part of your homework. But before we get there, let's go ahead and take a break. Let's hydrate, we're doing a seven minute break because I'm sorry, I forget the person that redeemed it, but they redeemed a two minute extension last class and I promise we tack it on.

Ah, it was clockwork, right? Yep. So we'll attach the two minutes on here. And when we come back, we're going to take a little bit deeper into how we can respond, whatever the heck we want to respond with. And then once we feel a bit more comfortable, we'll look for the rest. And then boom, we're moving into project night. So thank you for being here. Thank you for hanging tough, getting through the initial as we jump into the cold shower that is Node. Five minutes on the clock. Sorry, seven minutes on the clock and we'll be ready. Let's take a look at these last little pieces and we're moving on to project night. Let's go, let's work together. All right. So we saw that our server is set up to handle a couple different kinds of requests. We saw that it set up to handle requests from like a URL being entered.

We saw that it can handle the requests coming from when say the HTML file loads. and we saw that it's able to handle the requests that are coming from our client-side JavaScript. There's one other little thing here that we have to understand, and that's like, how does it know what request is coming in? And that's where these two modules can help us that are definitely what we consider deprecated now, like there are like other ways to do this now going into the future, but for the old school way, this is how we did it. we were able to use the URL module to actually look at the path name of the URL, right? The path name, right? And so the cool thing is with the path name, you can just see what the path was, right? And so when we go to localhost 8000, the path is just the forward slash. When we go to other page, it's slash other page. When we go to slash other other page, the path is slash other other page, right? And so we're able to use this bit of code to see what the path was. And then once we know what the path was, that's when our conditional start. Oh, was it just the main page? Was it other page? Was it other other page?

And that's it. So that's how we're able to see the different requests that are coming in. We just look at the path name on the URL. Cool. The other thing here is that sometimes we wanna look at the query parameters that came in with the URL, right? And so here is how we would look at the query parameters that came in with the URL. Does it matter what this string is? Does it matter what this string is? Like how it's done? Like does it matter the syntax or the different combinations that came in? Does it matter that there's parse or there's a new way to get rid of parse? Does it matter that there's rect.URL? It just doesn't matter. This is how you get the path name and this is how you get the query parameters. I don't need to know how it's working underneath the hood or what it's doing.

I just know that if I want the path, I can use this. And if I want the query string, I can use this. Just like query, yeah, just like query selector. Like query selector, it does a lot of stuff for us to be able to grab pieces of the DOM, right? Do we do we lose sleep over how query parameter like query selector query selector all is actually doing it No, we just trust that that bit of code is what grabs the DOM element, right? We were saying like yes, I do you're messing up if you let those things bother you It's gonna be really really hard to keep progressing in your career because there's gonna be so much stuff You just have to trust, right? As a software engineer, you, you have to get used to the idea that we could spend our whole career on this one slither of stuff that enables us to like get really, really, really better at like that one thing, or we can trust the people that spent years on those things. We can just use it and move on. Right. And so you definitely have to keep like an inquisitive mind. I mean, you definitely have to know like when something is no longer useful or when it is useful, but there's so much stuff that if you keep going like super, super, super, super narrow focus on all these little things, you'll never be able to kind of continue and to build bigger and bigger stuff. Remember the goal, right? The goal is to like accomplish our goals, right? Our goal is to build products. Our goal is to provide value, right?

And so we could nerd out about what exactly is happening like right here, or we could just know that this is how we get the path off the URL. We could nerd out like what's happening here, or we could just know this is how I get the query parameters off of URL. And you got to get comfortable with some level of magic, right? Because as we keep adding more and more stuff on top, there's more and more magic. And once you're in the job, right? Once you're in the job, once you're getting paid, once you are building real products, if there's something that you were like, you know what? I really do wanna understand how it's parsing the URL. You can go back and nerd out, spend three weekends really trying to understand it. There's so many things that I have gone back and done that, but we're here to get jobs, right? We're here to get jobs. we spent a long period of time talking about one really important thing which is called abstraction exactly and now we're putting that abstraction into play right we're putting that abstraction to play we're gonna trust that the engineers that were working on the boiler and the steam wand have done their job and we're just gonna use it to build our espresso machine right Cool. All right, so that's everything that's happening in here. We have the ability to kind of listen to all the different requests and generate all of the responses. And I just wanted to do something cool. Like let's say they made the API request.

Maybe that fetch came in. We saw that student was in the query parameters. We saw that Leon was there. We can do whatever we want here. Like I could do something like this. So I could do like math.random, right? Math.random times two, right? Let's throw that into a math.cl. Right, we can do that. And we could do like math.random times two Two equals one, adds, fails. What the heck did I just do? Boom. Boom, coin flip, exactly. So I just generated, I said, all right, let's make a coin flip, right? Math.random times two is gonna give me, when I round it, one or two, right?

So if it was one, I'm going to say that was heads. And if it wasn't one, then I'll say it was tails. Cool. Then we can just come down here and say flip and pass in, let's put this in a variable, let flip result equal. And then we just plug in flip res here, right? So we generated a coin flip, and then we're just gonna pass that back along with our response. So very, very quickly, we can start to do whatever the heck we want. We can do whatever the heck we want server-side. Right? I'm glad, man. Right? We can do whatever the flip, flip, flip. We do whatever the heck we want server-side, and then send it back with that response. So we go back to our main JS. Let's just, let's look at the console log of data.

I'm just gonna restart my server, just make sure it's been running. Cool. All right, I made changes. I restarted my server. Let's come back here. Let's refresh. Let's make sure that the inspector is open. Console's open. and type in Leon, boom. And we can see, not only do we have the current occupation of baller, now we also have a flip of heads. All right. We also have a flip of heads. And so very quickly, we took what was just a very simple API, and now we decide, you know what? Instead of it just being a normal API, we're also gonna determine whether or not a coin flip was heads or tails, and we respond with that data. So now that you have the template, you can start to build the app of your dreams that responds with whatever you want.

We just did a coin flip together, but you could very easily do rock, paper, scissors, right? You could start to build out very simple applications or very simple APIs using this template. I didn't change anything in the main.js. I didn't change anything in the main.js. The main.js always had that console log. And so I was just looking at that console log here. That's all. Cool. Questions while we're here. Questions before we move on to project night. Questions while we're here. Everybody wants to gamble. What's our project? The project is up to you. The project is up to you.

I want you to think about something as a group that you can do, right, that you can do and make it happen. So we just did coin flip. A lot of you will probably do like rock, paper, scissors, right? That's pretty common for this project. If you can't think of something original, go with rock, paper, scissors, right? But I typically think, I think most groups come up with something fun that they can build, right? And they use this bare bones template here to start building out that application. Now, some of you might have a lot of questions. You might not still feel comfortable with this code. That's the beauty of getting into a group. Remember, tonight is a night for folks to work together of all different skill sets and experiences. Don't be the fucking asshole that's a little bit further ahead and doesn't wanna support folks that are a little bit further behind. Don't be that person. There's no room for you in this community, right? No room for you in this community.

Get the fuck out if that's who you want to be get the fuck out. I don't want you here Right, so be kind Be helpful, and that is the first priority getting the project done Right getting that project done is the secondary thing. I want everyone in these groups to understand what's happening in this code I want everyone in the groups to come together to build something fun And if you can't work together if you want to be a flexisaurus get the fuck out I really don't want you a part of this community anymore We're gonna have some folks that they're very very new to coding We're gonna have some folks that might not even been to the last few classes It doesn't matter. The goal is to start working together. Remember when we start applying to these jobs, there's two questions Can you code and do I want to work with you for the next two years? Some of you are really good at the coding part But you got a lot of work when it comes to the I want to work with you for the next two years Because you're going to come across folks of all different skill sets and experiences on the job And so you need to work on that too So, please We are going to jump into remo Uh, you can use remo to work for some folks. Remo doesn't work that well So we'll be on discord as well. I want you to find a group maybe in your study community on discord maybe in one of the voice channels on Discord or on Remo. Definitely try Remo because it's smaller groups, you can see each other. Come together with a project idea and then work on that project for the rest of this evening. I'm gonna ask for your project submissions on Tuesday. Remember, everyone has the fresh start. These projects matter. If you want my help at the end of program, you need to do these projects. I need to be able to talk to a hiring partner and say, yes, this person has worked with several engineers to build real projects.

Don't be the person that comes to class and then runs away and doesn't do the projects. I can't vouch for you if you're not working with other engineers, right? So please, come, hang out on Remo, hang out on Discord, ask questions, we're gonna be kind, we're going to be helpful first. Finishing the project, figuring out the project is secondary. We gotta get used to working in groups, We've got to get used to working with other engineers and tonight is how it starts Well, alright folks Let's go ahead I'm gonna paste the the the lovely Remo links in chat If you don't have them I'm gonna span them for you right here They were in discord both in the follow-along materials and the learn with Leon live channel So if you need them, they're on discord, but I'm also gonna span them here in chat. Remember if Remo doesn't work too well for you. Try Remo first, please. If Remo doesn't work for you. Feel free to use discord I want to see the cool stuff that you're able to build I want to see the cool stuff that you're able to build remember kind first understand the code second build a project third we're trying to build the best place for folks to learn how to code online kindness always matters most alright folks have a wonderful rest of your night good luck getting into your groups I'm gonna be popping in on Remo, seeing how folks are doing, trying to help a little bit. And I will see you all on Sunday for an amazing Office Hours. And then next week we get to Express. We're building APIs from scratch. We're building CRUD apps from scratch. Can't wait to see you then. All right, good luck getting into your groups.

Good luck working on your projects. If you come up with something cool, share it on Discord or tweet me. I would love to see the projects that you work. Tweet me, tweet the projects out that you've finished tonight, I wanna see the cool stuff coming in. Projects are going to be due Tuesday. Alright folks, good luck getting on Remo, good luck getting on Discord, and I'll see you on Remo in just a few seconds. Peace.

End of Transcript