Introduction

Hey, good morning. Good afternoon. Good evening. No matter where you're coming from. Hope you all are doing well. Welcome back is Tuesday, folks. We get outside, we online, let's go. What's going on, everybody? Welcome back. Hope you all had a good weekend here in the U S hope you had a good holiday weekend. Hey, can we do a Yolo today? I don't know. We'll see if chat is hype tonight. Well, we'll do a Yolo. I gotta be careful with these Yolo's though.

We getting too close folks. I ain't trying to buy new bathing suits this quick. You know what I'm saying? You know what, you know, you know what I'm saying? I just I mean if we're good, we'll do it but like it's getting a little too dangerous in these streets What's going on everybody welcome back hope you had a good weekend Excited to see you all we had a good office hours, but like off the top is pretty good We answered a lot of questions. I'm glad to see you all back tonight whoo Tonight's where it gets real folks after tonight Oh After tonight, you can build the API of your dreams that does anything. And we're gonna see how to put it together, how to pull all the pieces together. And not only will it be the API of your dreams, but you can put it online. Anyone will be able to use the API that you build starting tonight. That's right, folks. We're learning how to build our APIs with Express. We're learning the beginnings of CRUD. We're gonna be able to do those reads, those gets, right? And then we're gonna be able to put all of that hard work on Heroku so that anyone out there on the internets can play with our API, consume that content, get that JSON goodness. We're not gonna jump right into it.

We always gotta get a little bit of review in. Gotta get a little bit of our node, our backend review, how things are actually happening, touching that event loop just one more time, and we're gonna jump full bore into Express. We're gonna start the beginnings of CRUD tonight. We're gonna start the beginnings of putting our stuff live for others to see and then Thursday we finish up with the rest of Crud so we had a lot of fun stuff to get into a lot of stuff to get into tonight a lot of little things To review and a lot of little things to do. We're gonna be coding along live this evening So if you want to have all the materials that I am going to be using later today You want to make sure that you're on our discord? Exclamation point discord will give you that link in the follow along materials channel once you agree to the rules There's a channel called the follow-along materials channel. You can grab all of our starter code. That's there There's also like even like the finished product is already there for you So if you're trying to like type along or you're following along, but you miss something I have the complete solution already in those files for you as well Well, I'm ready. This is this is This is top three classes for me because after tonight You have the power You have the power to actually build real stuff that real people can use. And I know the crud reading was tough. Somebody on NekoChat said the crud was aptly named. I know the crud reading is tough. I know some of you were able to work through it with the wolf pack. My wolf was going through it. I know the reading was rough.

We're gonna make it make sense tonight. We're gonna make it sense, right? We're gonna make it make sense on Thursday. And remember, around these parts, we use, then we understand, and then we build with it. And so tonight is about using it, seeing it, starting to connect the little dots here and there. Then we'll build up that understanding over the next few classes, and then we'll start to build real wild stuff. I'm excited for y'all folks. This is where the rubber meets the road. It's where you feel like you can actually start to build real things. And I want that for each and every single one of you. You put in all this work just to get to this moment right now. All right. You put in all this work just to get to this moment right now, because after tonight's class, you can build real stuff. Cool. Alrighty.

Let's get into it. As always like to give folks a few seconds to get in here. Uh, if you got some questions, I got some answers. Hey, welcome back everybody. Any advice or resources on Regex? So with Regex, don't solve your code wars using Regex. Try and solve them without it. Any interview that has you solve a coding challenge with Regex, run from that company as fast as you possibly can. We're learning how to solve coding challenges. is Regex is not really a tool that we use to do that. It's a way to manipulate strings. And so you can learn the basics, just learn the basics through just any tutorial you can find, but don't commit to solving the coding challenges using Regex. Try and do it, even if the number one answer is using Regex, don't use it. It's a lot more fun to do with it out. I agree, but it's also so we can practice our data structures, our algorithms, fun stuff like that.

Yeah, because you could do, you could do all the string problems. You could do all, a lot of these problems, just using regex. And then you get into an actual interview and you try to bust out the regex. And you're like, Oh, don't use regex. And then you're like, so practice it without, yeah. Are there any resources for data databases to create APIs without, instead of compiling all the data ourselves? I'm sure there are cap, but that's the fun part. Well, not the fun part, but it's often the part that makes your API differentiate from others, right? If somebody else has already collected all that data, then there's probably already an API for it. And so figuring out how to collect all the data is a whole other class in and of itself, right? You can get into things like web scraping or some other fun stuff to get that data. But that's not something that we'll probably cover, yeah. But I know some folks that have built some APIs just from straight scratch. I know some of the bigger APIs that use, like, like that are based on like fantasy characters, they kind of crowdsource it. So there are lots of things you could do to get that data.

Hey Caleb, welcome. Are we allowed to use any already existing APIs for a hundred hours projects? Yes, if the API itself is not like a crucial part of your project, like if you're still building a full stack web application, and that API is giving you some data that you need to use, then yeah, by all means, you can incorporate those APIs, but don't have that API be like the key portion of your app. Right, if you're just using it to get some data, then that's totally fine. I missed the last two classes. Should I listen on this one? Yeah, we're gonna have enough review, Charchar, that you can probably get caught up with what we covered last class in the first hour or so, And then we're touching on all new stuff, um, but it's not too wild if you missed the last last week Yeah Should you monetize your api? Hey, it's up to you If youtube is anything there's so many videos that's like monetize your apis make money with apis So I guess i'm doing something wrong. I haven't been making money with my apis yet, but maybe you can after tonight So just give us a little bit more time, we'll reach out to you. Cool. Few more questions and we'll get started. I always want to get folks that are running from work, the chance to get in. Beyonce, I'm ready. Let's go. Can I change my name?

Change my 100 hours project after I submit it. Sure, but make sure any other kind of homework submissions that you give me the updated version, just so I have it. We put things like the cred tutorial on our GitHub or just the code wars in our projects. I'm a fan of putting everything on GitHub as long as you have a really good read me for it. Yeah. Please post the massive JS review to YouTube. Yeah, I got you. It's coming soon. I had to edit it down a little bit I'm gonna try editing this one a little bit down and see if that helps with the numbers Our contents really not made for YouTube. I just put it on like I know like YouTube's like not something that we like That we need to do well with but it does a lot of folks have been finding us through there So I'm kind of interested in like if we kind of remove things like I don't know like the five minutes that are in between or some other stuff that keeps the attention span going, if that would help more people find the video. So I'm editing it down a little bit and then we'll post it. I'll probably post it tomorrow just because folks have been asking for it. Will the car class be recorded? No, so Friday's class will not be recorded. It's one of the benefits of being live if you can.

We'll do a couple more of them. Cool. Alrighty folks, let's get into this. We got a lot of stuff to cover tonight. Glad you're all here. Let's lock in. We got this. If you haven't already, please go ahead and check in. Right? If you haven't checked in yet, please go ahead. Give the exclamation point check-in. We'll give you the link for today. Remember, just typing exclamation point check-in doesn't do anything. You gotta click the link, go to Twitter, like, retweet it. Remember, the slate has been wiped clean, right?

Slate has been wiped clean. If you want the goodies that come at the end, you gotta be checking in. Hey. Man, he said first time joining in can I join boot camp now or wait till next season? We have no idea if there will be a next season or when they'll be next season because we're only about halfway through this Current one so definitely join our community. You can do x-ray point 100 devs to get everything Join the catch-up crew on discord. We have new folks that join us every single day We have a wonderful supportive community on discord. It'll help you catch up as you go at your own pace Cool everybody. Thank you for checking in This Friday 6 p.m. this Friday 6 p.m. Monty will get to it for the for folks are asked about LinkedIn. If you weren't added in the first round is because you didn't have like your profile photo and your like your profile filled out. If you have anything filled out just give us a little bit of time. We're really behind on a lot of stuff right now. They're just we're kind of backed up on a lot of kind of the the admin and stuff, so give us a couple more days and we'll get you in.

All right. Car class this Friday, 6 p.m., 6 p.m. So we're gonna come, we're gonna have an hour, it's just gonna be an hour, we're gonna do live car. We did a few live together during class, but I want you to see how you should formulate your cause, action, result for each of your behavioral and then each of your, eventually, every kind of technical question will have its own acronym. We have car EU and prep so we're gonna do a little bit of car and if we have a little bit of time He will do one prep as well Alta said tell people to stop adding me on LinkedIn without messaging Folks stop outing Alta on on LinkedIn without messaging if somebody from a hundred devs tries to connect with you And they don't have a message. It is your duty to ignore them To click no to click cancel to say absolutely not Do not connect with folks on LinkedIn without sending a message. Hey, hello. How you, why you're interested in connecting with them. It could just be, Hey, I'm also in a hundred devs would love to connect with you. Simple as that. Don't be disrespectful. Send a message. Not today. Just always, always send a message. When you go to connect with someone, it gives you the option of sending a message.

Don't send a message independently. That's a whole different thing when you connect there's a way to send a note a note. Yeah, you put it You put the note as you connect Yeah Some folks are saying that it doesn't show the UI in the app and make sure you're doing it from the desktop. Yeah Yeah, some folks are saying don't use mobile there's no no option great use use the desktop version then yeah for sure You absolutely have to send a note All right, car class is Friday, 6 p.m. Office hours, Sunday, 1 p.m. We got a lot of good material to get into today and Thursday, a lot of Express stuff to review, and so make sure you're coming to these office hours. They're jam-packed. All right, networking. I need you to bring the networking back. I need you to bring the networking back. One coffee chat this week. I'm not asking for much. I'm just, just, just, just, just, just one, just one, one, you know, tiny, itsy bitsy coffee. Just, just one, just one. Having one on Thursday.

Hey, that's awesome. Did it before class? Ooh, let's go digital. Welcome. Yeah. Alrighty. Just one, just give me one. Got two scheduled for Thursday. Okay, I see you, Rossi. And remember, as you're scheduling these wonderful coffee chats, make sure you're using the sheet, exclamation point sheet here in chat. Make sure you're using the sheet. If you haven't finished your checklist, please make sure you finish the checklist. You can always do exclamation point checklist to grab it. One of my favorite things is I always have up like my Twitch page or my Twitch like, I don't know, it's called the dashboard. And in the dashboard there's a part of chat and so one of my favorite things is like all throughout the day I just see people popping in the chat to use the commands like they'll do the exclamation point checklist.

They'll do exclamation point bank So yeah, know that you can always come back to chat if you need those things. They're all commands here I see you all throughout the day. It's pretty pretty cool All right, remember you should be pushing every day you should be pushing every day You should be doing a code wars every day and you should be pushing that code wars live every single day Remember our recruiters love these green squares. They do they do they do and an easy way to pass that Sniff test right to pass that sniff test, right? It's to just be coding every day get that code wars done every day Make sure you're part of the clan exclamation point clan. Make sure you're climbing that leaderboard and make sure you're pushing every day. Make sure you're getting those delicious green squares. It's gonna pay off in the end, big time. Not only will you be better prepared for your technical interviews, you are going to have a GitHub that looks clean, that recruiters are gonna love to see. Cool. If I can solve leak code easy brute force, should I do that instead? Knock yourself out. We'll be slowly transitioning to LeetCode in the future, but for now we're still on the wonderful Code Wars train. Did your first 6Q today, first try? Fairy, hey, that's amazing, congrats.

All right, submitting your work. If you haven't submitted the freelancing, last call for the freelancing submission before we release the final numbers. Oh boy, I think we'll release the final numbers tomorrow. I just wanna give folks one last chance. If you haven't submitted your freelancing stuff, please submit it If you had something that was like an hourly arrangement Submit the total hours that you think that you're going to have like the total amount just makes my life a little bit easier Yeah, so last call so we can include your numbers in the final number. It's big folks. It's real big It's way more than I thought it would be And if you haven't submitted your checklist stuff your hundred hours project stuff your code war stuff I'll give you one more day get it in No worries, I didn't see anything up until right now. You're good. All right. We also, today before class, in the newsletter, in the newsletter, there was a secret raffle for VIP. And I grabbed all the names right as class started. Like right before I went live, I grabbed all the names. There were 700 plus names before I started. There's like way more now because some people come to chat and there's some there's some snitches in chat They're like, they're like, oh if you check the newsletter today, I don't know Oh, and then everybody floods in and jumps into it. So I got you got got It's like I took it.

I took it before Before y'all came in. So if you open the newsletter, you would have found a sheet to be entered into the raffle For for VIP. So let's go and run this real quick Sign mash to congrats on your V I P. I'm going to give it to you right now. Yeah, I P boom. There you go. Congratulations. Thank you for opening the newsletter. It really does mean a lot. I put all the goodies in the newsletter. Uh, it really does help when we try to attract things like new sponsors and fun stuff like that. So all the goodies in the newsletter. Thank you for the folks that open it before each class. All right We gotta have a talk folks the homework is Gonna become more and more important as we kind of get into this second phase You can do exclamation point newsletter exclamation point newsletter if you need access to the newsletter You have to click the link though. Don't just type it in.

You gotta click the link to go sign up As we move into this second phase right as we move into the second phase of bootcamp the second half I Need you to do the homework Okay, I Need you to do it I am gonna be running class and with the assumption that you have done the homework, right? That you've at least given it a good, honest attempt at reading through it. Doesn't mean you have to be perfect at it. Doesn't mean that it has to be, you understand every single bit, but I'm gonna expect that you've at least gone through it, that you've made the good old 100 devs try, that if you got really stuck, maybe you went to Mine Wolf Stream because they went through the homework live, right? You've done some things to just become prepared because we're gonna start doing a lot of things, a lot more code along, a lot more like in the Muckwit code. And I can't do that if you're not up to date on the reading. So I'm gonna give homework. As always, I'm gonna try to give you at least like a week in between when there's reading. When there's reading, I try to give you like a week in between. And unless I think it's something that you can get done pretty quickly, and I need you to come ready with that, because if you're not, you're gonna be behind in class, so you gotta make some time for this homework. Cool. Now, a lot of this stuff is gonna be heavy, don't worry. We're gonna go over all the important bits as we kind of go through them in class. So it should always be a first pass. Don't feel bad or lose sleep if it doesn't click while you're going through the homework.

Come to class, that's what class is for. Cool. All right. We mentioned last class about Jake Archibald and Philip Roberts. Those two videos I asked you to watch just so you have that really deep understanding of the event loop. And you've seen it. You've seen it practiced a few more times just by myself. If you haven't watched those two videos, those are foundational videos. If you want to be a back end engineer with Node, you have to watch these videos. They're that important. And then I also just want to shout out Zelle. I know the crud reading can be tough, but Zell's the best Honestly hands down some of the best tutorials on the internet They are one of the very few folks that can make it somewhat approachable that can Cut through all the crap and just get right to the meaty stuff of it So, please if you haven't done this all reading you have to I'm gonna share all their socials and stuff, too They're one of the best folks on the internet when it comes to explaining what is some very difficult stuff And so I signed it the reading for homework. You need to go back You need to read it and you'll see that I'll be assigning a lot of their other stuff You'll see some of the examples I use are Kind of in the same vein because it really is that good cool Yeah, his work is really more simplified compared to other articles. Absolutely It's just, it doesn't get better, so please make sure you're going through it. Cool.

Alrighty. They have a lot of other tutorials, yeah. So we'll see them come up throughout class, but jump into the ones you feel like you need to. Cool. Alrighty. Now a lot of this stuff is coming up. A lot of stuff that we're going into a lot of this new stuff has to be in your Anki Right has to be in your Anki. You got to be doing Banki on a regular basis Remember all those questions that are in the bank. They need to be in Anki for you Now I'm gonna eventually share a Sheet that has the answers but remember You get more out of it if you find the answers on your own But I know that some folks Don't have that much time, so I will share the answers to all of them, but remember, you need to be doing Banky every day. Whether you've built the answers yourself or you're gonna use one of the solutions, make sure that you're putting in time every single day. You have to start now. You have to start now, so that by the time we're in the thick of the hunt, things are locked and loaded. Cool? So every day you should be doing the code wars, you should be pushing it to GitHub, and you should be doing some Anki. If you don't know what to do for any given day, you should be doing those three things.

Code wars, push it to GitHub, and spaced repetition. Every single day. If you only have enough time to do your code wars, push and spaced repetition, I prefer you do that than read the homework or do the homework. Like that's how serious this is. Like this is something we need to be doing every single day. You need to be finding the time for it. It's that important because I know a lot of y'all are doing the homework. Where's your bank yet? Where's your code wars at? Come on now, gotta be doing it every day. We gotta be doing it every day. I'm not saying, I'm not seeing it. I've looked at some of your get hubs. You give me your games, I look at them. I'm not seeing green squares everywhere.

Oh no, oh no. Y'all said you wanted it. Y'all said you wanted it. I'm telling you how to get it. The folks that have been in my previous cohorts that take the bank seriously, Those are the ones that magically get jobs without a technical interview. Because when they're in those behaviors, when they're in those first technical rounds that aren't the coding challenge, they just sound good. It comes out like butter. They've been practicing for months, but please let those good things happen to you by doing your code wars and the bank every day, my code where solutions are garbage, but I'm getting my green squares a let's go. We're baddies. We write bad code. I don't care. Get it done. I love it. Write your bad code, be a baddie, and then look at the solutions. Look at the solutions.

You're a baddie, write bad code. Hey, guess what? We can go look at the solutions when we're done and then we can add those solutions to our Anki and we keep it rolling. We keep it rolling. Tina has entered the chat, hey, be like Tina, exactly. Cool. All right. We're gonna jump into the back end, folks. We're gonna do a little bit of review, but before we jump into the back end, we need to talk about JavaScript. All right. What do I mean by JavaScript is single threaded? We're gonna do a little bit of review and then we're gonna jump into Express, folks. Synchronous, one thing at a time, exactly. JavaScript is single-threaded, it's synchronous, it does one thing at a time. Things should block.

We do a lot of stuff on the internets that doesn't block. When we scroll, or like when we like something and then keep scrolling, how are we able to keep scrolling? We're waiting for the like to go from gray to red, right? All these things that we should be having to sit there and wait for, our set timeout, our set intervals, we're not just sitting there waiting for those things to happen. We're able to keep moving out throughout the rest of our program, do other stuff. But if JavaScript is synchronous, single threaded, it should block. We should only be able to do one thing at a time and then we should have to wait. But why? Why are we able to do things that don't block? I jumped ahead for a second. Why are we able to do things that should block? Yeah, we're handing off all of these things, all these asynchronous tasks to the environment, right? The environment. And with the environment, we're not talking about this, we're talking about my favorite GIF of all time, this. Right, it's where we're running our JavaScript that matters.

Our JavaScript is running in the browser. And since our JavaScript is running in the browser, the environment is the browser. And since we're running our JavaScript in the browser, we get access to a bunch of APIs, a bunch of web APIs that enable us to do all that asynchronous stuff that JavaScript on its own could not do because it is single threaded, it is synchronous and blocking. So with our JavaScript running in the browser, we get access to all of these web APIs. What are some of the web APIs that we get access to since our JavaScript is running in the browser? What are some things that we've talked about so far that we get access to? Yeah, the DOM is one, fetches are another, setTimeout, setInterval, all these things that we were using for so long that just felt like regular JavaScript, come to find out actually aren't part of JavaScript. They're all web APIs that we get access to since we're running our JavaScript in the browser. Now, one of those web APIs that we saw was setTimeout. So here I have a normal function that's gonna console.log house one. I have another function that's gonna console.log house two and another function that's going to console.log house3. If we look at this setTimeout, it has no delay. By today, no delay, right? So no delay. So we would expect, right, as the rational beings that we are, that when we call house1, it would console.log house1.

We call house2, we would see the console.log for house2. And when we console.log house3, we would see house3. So we expect to see one, two, three. However, that doesn't happen. When we console log this, we can go ahead and open up our console. We open up our console and we paste this in. We get one, three, two. Why the heck do we get one, three, two when there is no delay by today? Oh, I love this, yes. So many good answers. We're handing, this setTimeout is not JavaScript. It is a web API, which means since we're trying to use the web API, it has to be handed off to the browser. The browser is what enables us to do those asynchronous tasks. Those asynchronous tasks are completed and then we push the result. Like whatever we get back, the promise that comes back from that web API is put where?

Where does that promise get put? Woo! People pay attention, people watch the videos, let's go. It's put in the queue, exactly. Task queue, job queue, micro macro, it doesn't matter. It gets put into the queue. We'll just say queue for now. Cool. And when do we eventually get that value out of the queue? When do we like go to the queue and get it out? Oh, yeah, when the stack is empty. All right, we learning, we outside, let's go. Yeah, when the stack is empty, we can go back to the queue and get stuff out the queue. So what would look like it should be one, two, three is not because this two gets passed off the web API and there's no way to get the response back until the stack is empty. So no matter how fast this is, meaning zero delay, it's still going to run after the things that come further down the page.

Only once the stack is empty, do we get the stuff out of the queue. Now, we got got due to the event loop, right? When we had this zero, even though there was no delay, we got got because these values were being handed off to the browser. the browser executes these asynchronous tasks. It then takes the response, right? Puts it in the queue. And eventually we get it out of the queue once the stack is empty, right? So we don't have to go and tag all of our jabroni friends. We actually know why we got got. And it's because things are being handed off the browser to be done asynchronously before coming back to us. Cool. So to really understand how this is happening, like what is actually working, we need two key data structures and we kind of already mentioned them. And if you're new around here, this is a really fast review of something that we spent two or three classes on. That's why everybody knows the answers. And that's why we're going a little bit fast is because we've already seen this for two or three classes.

So this is review before we jump into tonight's topic. Cool. Oh, hey man. Champion of the sun. Exactly. We need queues and stacks. Stacks and queues, right? Stacks and queues. So a queue is just like a real world line. If you're the first in the queue, you're the first out of the queue. Think about getting in line to buy tickets at a movie theater right remember those places movie theaters you would go you'd pay a lot of money and then they put the same thing you put on your tv but in front of you um they had this they had this um what was that food called again um popcorn they had popcorn and they had these pretzels but they were really small and dry as fuck and so people would go they pay a lot of money and they would eat dry, dry pretzels and popcorn. Cool. All right. So if you're in line to buy tickets, right? In line to buy tickets.

I love the movie theaters, by the way. I'm just, I'm just joshing. I love the movies. I love going to the movies. You go to the queue, right? You're the first person in line to buy your tickets. If you're the first person in, you're the first person out. It is a first in first out data structure. And we have them very easily in JavaScript. if we had an array and we push the value into the array, this two that we pushed in first would be the first in, which means when we shift, it would be the first out. So we can build a queue very easily in JavaScript just using an array, pushing, pushing, pushing, pushing as many values as we want, and then we would shift them off. Meaning the first value pushed in would be the first value out. So if we were to actually alert the result of our shift, we would see two, because two is the first in, it is the first out. Gonna go see TopCon after class, I heard it's pretty phenomenal, I heard it's like the quintessential blockbuster, so I'm excited, I'm gonna go see it too, hopefully. All right, the other data structure we need to talk about is a stack.

A stack is a last in, first out data structure, Meaning that think about pancakes you stack pancakes one on top of the other and the last one on the stack is the first One you serve Right. The last pancake on the stack is the one that you serve now Unless you're a monster if you're a monster, you might try and pull out the bottom one off the stack But we don't do that around these parts So a stack of pancakes is a last in first out meaning the last thing on the stack is the first thing out Cool, we can replicate this pretty easily, pretty easily inside of JavaScript using just a lovely array again. So we have an array, we can push two and five into the array and then we can pop off values, meaning we're popping them off the back. So that means we put the two in, we put the five in, since the five was the last in, it is the first out and when we pop, we would get five. Cool, first in first out is a what? First in first out is a what? A queue, nice, and then last in first out is a what? Stack, nice. And we need to understand these queues and stacks to understand what's happening in the event loop, but they also are pretty quintessential data structures that we're gonna use in just a few weeks when we start to really grind our data structures there's an algorithm understanding. So they're gonna come back with a vengeance. We're gonna use them a lot in our coding examples. So yeah, something to know that we're using now from a theoretical standpoint, we're gonna use them for real for real and not too short of a period of time. All right, so back to getting got, right? So now we understand stacks, we understand queues. We got got with the set timeout example.

Let's figure out what actually was happening when we got got. Cool. So our JavaScript is running in the browser. We have this wonderful environment that we're running in, and this wonderful environment gives us access to a bunch of web APIs. And when we go to use those web APIs, we pass off those actions to the what? Like when we wanna use the DOM, or we wanna use setTimeout, setInterval, Whenever we want to use fetch, any of these web APIs, when we want to use them, what are we handing those actions off to? We're in the browser. Yes, we're talking about the browser, but what specifically is going to handle all those actions for us? Yeah, the event loop. The event loop is going to handle this. In the browser, specifically Chrome, we're using lib event. Lib event is all the code that's been written for us. It's going to help us handle this process where we have these events that are happening that are enabled to happen because we're running our JavaScript in the browser. We hand off all this stuff to the web APIs, but we're really starting to hand stuff off through lib event, waiting for those responses to come back and we generate the event loop. Cool.

So the event loop monitors the callback queue and the job queue and decides what needs be pushed to the call stack. The heck does that mean? The crowd was tough. It's such a, like a, a quintessential video that like, yeah, you're right. They were pretty tough. What? This is disrespectful. Yes, it is disrespectful. The event loop monitors the callback queue and the job queue and decides what needs to be pushed onto the call stack. So the call stack is our what? It's our what? It's our last in first out stack where all the things that we're trying to execute in the program are being run. And what goes into the queues? What goes into the queues? What winds up making its way into the queues?

Yeah, the results of these web APIs. Now, pretty much every one of the web APIs returns a promise. So the callback queues are full of promises that have returned from these web APIs, whether it was trying to use the DOM or whether it was to use set timeout, whether it was to make a fetch. And so we get all these things back from the web APIs, they get put into the queue. And then once our stack is empty, We can start pulling stuff out of the queue to execute. I remember this is all like a very simple overview. You can definitely nerd out on all this stuff. We have a full studio. We have Jake's video that really go into the meat and potatoes of all this. So you have to watch to fully understand it. Mine right here is just a simplified version of it just to get to the meat and potatoes. But you definitely want to spend some time getting your claws into those two big videos. I tried to put this screen in my head. Hey, glad to hear it. I watched 10 times.

I still don't fully understand it. That's okay. That's okay. If you understand the basics, right? Like the stuff we're about to cover right now, that's good enough. As you start to dig deeper into these things, it'll make a little bit more sense. But as we are right now, to be like a really, like to write the code we're about to write for the rest of program. Do we really need to understand, like, do I need to know how this is done? Like, it's weird to say this, right? Like, if do, I'm gonna be writing express code until Kingdom come. Do I really understand that? Do I need to understand exactly what's happening here? Not really. I could go my whole life as probably a full stack developer without really understanding this. But once you do understand this, things start to make more sense.

Like for me, when I found out the DOM didn't come with JavaScript, my mind was blown, like blown to smithereens, and I had to figure out how that could be true. MOP, hey, what's up? All right, and so I took some time to understand what the heck was going on. And so we're gonna see this event loop here, and we see the event loop when it comes to Node. So knowing at least the basics helps you understand what the heck is actually going on. And when you run into some weird bugs or issues, this could maybe be the solution to some of them. Cool. All right. So here we have some code that we wanna execute. And the main is just what's gonna tell us to kick off our code. So on the call stack is a line of code that says basically run our code, right? And so the very first line that we're gonna run is called, is a console log, where we're gonna paper delivered to house one, we want it to be printed to the console. And so that first line of code executes and put on the call stack is the log for house one. Now the event loop runs and we're back to the point where this code is there. And so once we realize that we've done the loop, there's nothing there, this line is here.

Boom, we run that line of code and we see that first console log of delivered to house one printed to the console. Then we get to the next line of code that needs to be run. That setTimeout is put on the call stack. We do our lovely little loop. It's time to execute this line of code, but setTimeout doesn't get executed by JavaScript. Where does setTimeout have to go? Yeah, it has to get handed off to the browser. Has to get handed off to where the web APIs are gonna be run by the browser, right? And so the loop runs, and when it runs, we see that the setTimeout comes off the call stack. The web APIs are now going to handle it. And the cool thing is we could have a bunch of web APIs that are all running at the same time. Maybe the setTimeout should take 10 minutes, who cares? The browser's handling it, right? The browser's handling it, all right? The browser's handling it.

And whenever this setTimeout is done, we know what gets returned is gonna be put into the queue. All right, so our event loop continues to run. We had this third line of JavaScript that executes. We see that log house three is now on the call stack. And around the same time, this setTimeout, the return from that web API is put into the queue. Right, it's put into the queue. Now, what will run first? Log house three or the promise that came from the set timeout? What runs first? Log house three, exactly. We always run whatever's in the call stack before we even think about the queue. Cool. So we run, we see console log of house three is put to the console, the vent loop runs. We don't need that main to trigger anymore. We don't need that main to help us run any lines of code anymore because all the lines of code have been executed, right?

Like we've ran every single line of code that was here. The main popped off during that pass the loop. And then once the call stack is empty, we can go ahead and grab the promise that came back from the set time out. And since this is a queue, the first thing in is the first thing out. So this setTimeout will be the thing that's put on the call stack. And once the loop runs, we execute that promise and we see log of house two. If it needs to run again, will another main be created? If you refresh, yes. Yeah. So the idea here is that there's really just two things that are happening. If we execute a line of code, it is put onto the call stack. If it's something that JavaScript can't run on its own, there might be an API that we can use from the browser that will enable us to do that thing. And so we saw that with the setTimeout. JavaScript itself could not execute the set timeout. So it handed that set timeout to the web APIs.

Then we keep going through our code, right? We keep adding stuff to the call stack. Eventually, eventually the browser's done executing the set timeout and whatever gets out, whatever gets returned, whatever gets returned from that web API gets put into the queue. Eventually, we're done executing all of our code and the call stack is empty. And once the call stack is empty, on the next revolution of the event loop, we grab the first thing inside of the task queue or job queue, whatever you want to call it, because there's a bunch of different things here. And we put that on the call stack. We could have a bunch of returns here. We could add a bunch of different web APIs. We could add a set timeout that took like 10 seconds, five seconds, three seconds. And what would have happened is that three would have executed first, then five, then 10. It says the queue is a first in, first out data structure. Whatever finished first is going into that queue and will be put onto the call stack first. We need to know which line of code is handing off to Web APIs. It's just the set timeout itself. The browser is smart enough to know, like, hey, you're trying to do something that JavaScript doesn't come with, but since you're running it in the browser, I understand what you mean when you use document.

I understand what you mean when you do setTimeout. And it knows to hand all that stuff off to the browser. Now, what's happening underneath the hood here and all the mean code that's happening, how the V8 engine and LibEvent is handling all this? Nah, ain't for me. You could spend your whole career on just like LibEvent. Like you could like literally spend a lot of time and building just that. You could build just focusing on these web APIs, but for us, that's too rich for the things that we wanna do, which is to build CRUD APIs, deliver business value to our customers and our hiring partners, right? Does that mean that seconds in set timeout is not exactly due to how long it would take the call stack to be empty? Yeah, now we're getting into some real stuff. Yeah Yeah, now we're getting some real stuff is three seconds three seconds, I don't know It's the minimum exactly the minimum time. There you go. Exactly not the exact time All right Cool, so we have this lovely we have this lovely ability to execute our code. If JavaScript knows how to handle it, it's put on the call stack. If it's the last in, it's gonna be the first out. Eventually, if we get to something that JavaScript can't handle, there might be an API that we can use by the browser.

It'll hand that off to the browser. The browser will do it. Eventually, it'll return something, most likely a promise. That promise gets put into the queue. Once the call stack is empty, we start pulling stuff out of the queues, putting them on the stack. Beautiful. And like I said, this is a simplification of it. You definitely want to go back and watch Phillip's video. It is way more detailed, has a lot more meat here, but this is the gist, the basics. And this is helpful to know because we're no longer running our JavaScript in just the browser. we are running our JavaScript in a different environment. The videos are linked in the slides. So as long as you have the slides, you can get to the videos. They're also in Discord for the following materials today. All right, so not only are we running our JavaScript in the browser, we're gonna be using our JavaScript in a new environment that is a bit different.

So quick question, does JavaScript have access this to the DOM natively built in. Nope. JavaScript needed web APIs to handle a bunch of asynchronous stuff. So the DOM set timeout, all these things were not actually JavaScript. They were things that the browser could handle for us via web APIs. And so JavaScript is a language that can only do what the hosting environment allows. If the browser didn't come with SetTimeout, if the browser didn't come with Fetch, if the browser didn't come with the DOM, we don't have access to it via JavaScript. It was only because we were running JavaScript in the browser that we got all of those goodies. So as we start to think about the back end, we start to think about servers, right? The difference between a client-side browser and a server the server has some very unique needs What do servers need? I'm jumping too quick here. What do servers need go ahead and chat for me Yeah servers are supposed to serve They're supposed to serve, and so to serve, they need to be able to hear the requests for the things that you're asking for and be able to serve up responses, right? And so to do that, they need access to a network where they can hear your requests coming in and be able to respond, and they need access to the disk because the files that they're sending to you are not magic, they're not coming poof out of the air. The HTML files, the CSS files, JavaScript files that they're serving up to you exists on a drive of some sort, whether it be a hard drive or a solid state drive, whatever it is, they need to be able to go grab that stuff off the disk and send it to you as part of the response. And so JavaScript does not have the ability to do this.

JavaScript cannot access the files on your computer. It cannot access the network. It'd be pretty disastrous if it could. So what if there was a hosting environment, a place where we could run our JavaScript that gave us disk access that gave us network access. 10 second warning. What if we existed in a world where we could have disk access, where we could have network access available to us? I Swear the the first Hundred devs convention is just a rave. That's it. We're not coding. We're not talking eat sleep Rave repeat. That's all we're doing. It's just gonna be it's gonna be all the bangers from class. It's just that song the entire conference and And we're getting whatever she has whatever she had we're getting it fingers only All right, that's right we have an environment where we could She had dominoes Deep-fried penguin Lee has becoming a bad influencer Hey, I never promised I was a good good person I I've actually told you the quite the opposite of I'm a monster that chooses to be good on certain days But hey when the rave and the raves when the rays pop and that's a it's all it matters, you know You know, my inner Tina has to bust out. You know, you gotta, you gotta let it go. You gotta let it fly every once in a while.

All right. So we have this lovely environment called node and node enables us to have access to the disc that enables us to have access to the network. And when we went to their website to learn more about Node, we got this crap. Node is a JavaScript runtime built on Chrome's V8 engine. What? JavaScript runtime built on Chrome's V8 engine. Why? Why do they write like this? Why can't they explain stuff? Please don't ever do this. Don't be disrespectful. But once you once you make it right like once once you once you're in the position where you're you're in control of like What's on the front page of? Something that you've built for the past 10 years. Please. Please put it just like you can have this know it have this have a little asterisk and Then in the asterisk just write it out.

Give me a paragraph. I want to know exactly how you're talking about. All right So the same shit that lets us run JavaScript in the browser can now be used to run JavaScript on servers, desktops and everywhere else, right? So the JavaScript runtime is just the environment like where we're running our JavaScript, right? Where we're running our JavaScript can now be used that give us access to all that good stuff. And we're still using the VA engine. The VA engine is the thing that helped us do a lot of the heavy lifting in the browser. Remember, the engine is more than just a few things, right? Like when we think of the V8 engine, we're thinking about the JavaScript that we're writing to communicate with each other. That JavaScript has to be broken down to something that the computer can understand, right? So the V8 engine comes with the thing that can help us break down that JavaScript. People might call it a compiler, whatever you wanna call it, but it also has a lot of other stuff. Memory management, garbage cleaning, and all this stuff that JavaScript just doesn't really have or is really good at doing came with this engine. So the same engine that we were using in the browser, we can also use in this other hosting environment called Node, cool. I talked about this difference between an engine and a compiler.

Engine just comes with more garbage cleaning, memory management, all that fun stuff. All right. Now, Node came with a bunch of fun stuff. We're gonna just kind of get through this real quick and then we're gonna take our break. Node came with a bunch of fun stuff, but specifically, specifically, it came with some really core modules like HTTP and FS or file system. And those core modules do the heavy lifting for us. It's what enables us to listen to network requests, to generate responses, right? It's what enabled us to look on the drives and get the files, right? Without these core modules, we wouldn't be able to do the things that we wanted to do when we set out to use Node. but we're not just limited to those core modules. We also have millions of other modules that we can use via NPM or other package managers like yarn, et cetera, where there are literally millions of other things that people have written that we get access to when we run our JavaScript in our node environment. Cool. Now the stuff that's doing the heavy lifting in node is no longer web APIs because we're not in the browser. It's CNC plus plus APIs. And so these C and C++ APIs are like heavy stuff, like things that are like battle tested, tried and true, super fast.

And just because we run our JavaScript in this environment, we get access to them. We get access to the V8 engine. We get all this asynchronous and event loop stuff from libbuv, which is a little bit different than libevent. We get access to all these other things that enable us to listen to HTTP requests, talk to our file systems, all that wonderful stuff. And it's blazingly fast because it's actually C and C++. So just like we had web APIs in the browser, we have C and C++ APIs that give us access to all of this wonderful, wonderful things. Cool. Last week, we wrote a simple node server, right? Just using those core modules, and it worked. We were able to make a request and get an HTML file back. We saw a slightly more complex version of this, and we asked ourselves, we asked ourselves, all right this is a back end right this is a back end right the back end but how can we clean it up how can we clean it up Y'all nasty. Express. We can use Express to make that hot mess of a file make a little bit more sense. We could introduce a little bit of architecture, a little bit of cruddiness into the way we think about building our applications. And when we introduce the crud, when we introduce Express, we start to be able to build the APIs of our dream, start to be able to build the applications that we wanted to build since we first started 100 dev.

So when we come back from the break, we're going to jump into Express. But before we jump into Express, we got to revisit how the internet works. We have to talk about like, what are these applications actually doing? So I'm gonna put our five minutes on the clock. If you're new around these parts, at the top of every hour, we take a break, like to be hydrated and healthy as much as we possibly can. So if you're able, please get up, move around, hydrate, and we'll be back in five minutes. Alrighty, let's get into it. So we talked about this idea of coming back to how does the internet work? Because what we want to be able to do is we want to be able to walk through all this cruddy goodness that is happening. And so we're going to talk through how the internet works. And when we started talking about the internet originally, what the heck was the internet? What do we say the internet was? It was a wire exactly it was a wire and this wire Connected two different kinds of devices or the coup two different kinds of devices that it connected Hash Jeeves, yeah connected client-side devices and it connected server side devices. Now these are just two different computers that are on opposite sides of the wire. We had a client and we had a server.

Now, somebody give me like a website, a website that we used back in the day or currently. What's, give me some, give me like a fun website that we would go to, just so we can maybe see some of this in action. Can't go to Domino's. Geocities is down. All right, I saw my phone. I see some folks have maybe watched last class. We'll go with it. Neopets. Let's go to Neopets. All right, we go to Neopets. Boom. Going mobile? Nah, you gotta be in the browser to do Neopets. All right, so we went to Neopets and something very specific happened. We typed in neopets.com and it took us here.

How did this happen? Also, why is there not HTTPS? What is going on, Neopets? This merch is fire, though. Hold up, look at this. I might buy this, hold on. Yo, this merch is wild. Your neopets are dying. It's so true. They all dead dead. Yo, if this wasn't red and black, I would, I would rock this for sure. I ain't trying to get got for wearing this where I'm from, but this is fire. Give me this on all black. I'll wear it. Your neopets are dying at home.

Yeah, let's go That's fire i'm not gonna lie i'm frightened at all i'd wear that hard All right So we went to neopets.com All right Went to neopets.com And uh, we did something very specific We went to something very very we did something very specific. We're talking about like what happened here. What did we do? Ooh, Dragon said, yeah, we sent a request. So we were in our browser and our browser, actually I should probably just do this here. Our browser was running on our client-side device. My client-side device right now is just my laptop and so I made the request from the browser running on my client-side device And this request made its way to Neopets server. Now there is some code running on this server that did what? There is some code running on this server that did what? Yeah, it responded. It heard the request and it responded to that request. And so there is some code here. There was some code here that heard the request and then responded. And what did it respond with at first? Like what did the server respond with at first?

Like what was the first thing that it probably responded with? Yeah, HTML. And so we typed in neopets.com. We made a request to Neopets server. they heard our requests and responded with that HTML file. We can actually see that. If we go ahead and we open up the inspector and we go to the network tab, when we refresh this page, we'll see that we made a request for the HTML file, but then look at all these other requests that were made. Right? all these other requests were probably linked through the The HTML like in the HTML file it asked for jQuery it asked for the CSS It asked for all the images. So all of these Yada yada said neopets added to the potential clients list. Oh, yeah, you couldn't do them like that. You couldn't do them like that All these requests are now gonna be requests that have to go where? Where do all these requests have to make their way to? Yeah, all those requests have to make their way to the server, right? And the server has to have some code that is set up to handle that request.

Now, I made the request through which interface? My initial request, what was the interface that I used to make my request? It was a URL, exactly. I typed in neopets.com into my browser and I hit enter. That URL was the interface to my what? I use, I always use interface with a very specific thing. You always hear me use the word interface when I'm talking about APIs, exactly. So there was some code that was running on the server that could hear the requests, right? That could hear the requests. And when it heard the requests, it figured out how to respond and it responded. If I'm saying that the interface was the URL and there was some code that responded, what do you think I'm gonna start calling that code? The code that can hear the requests, figure out the response and respond. What am I gonna call that? A hearer? I'm gonna call it my API.

I'm gonna call it my API. The simple interfaces will be the URLs, right? And remember, an API is just a simple interface for something complex, right? Simple interface for something complex. So I typed in a URL, which was my simple interface, and some complex stuff is happening. The code that's over here is doing some complex stuff to generate the response. And so the code that I'm gonna write, I'm gonna call my API. And the interface for what this API can do is URLs, right? We type in a URL that makes a request to our server and our server is set up to hear that request. That's an ear. Our server is set up to hear that request. And when it hears that request, our API or the code that we write knows what to do. Cause we coded it, right? We said, all right, if you hear this request, I want you to do this very specific thing. If you hear this other kind of request, I want you to do this specific thing.

And so simply, right? Simply by listening and free kind of writing what we want to have happen, we can build up all the stuff that we want our application to do. Right? All that we've been doing, every web application that you've ever used, from Neopets to Domino's to whatever, has always just been a request and a response. And so every single thing that we're doing pretty much in the web can be boiled down into a few very specific kinds of requests. When we typed in neopets.com, we made a very specific request to our server. What type of request did we make to our server? It was a get request, exactly. We said, hey, give us some information. We want some stuff. Give us some stuff. Get me some stuff. So by just typing in a URL and hitting enter, we made a get request to our server. and there was some code, there was some code running on our server, and I'm gonna call my API. There was some code running on my server that could hear that get request.

And when it heard the get request, what was this coded to do? If we're talking about Neopets, right? If we're talking about Neopets, when we typed in neopets.com, we hit enter, we made that get request to Neopets server. What was the code? We can't see the code. Maybe we could figure it out because the site's pretty wild. What was that code set up to do? When it heard that get request, what was it going to do? It's going to respond, but it had to do some stuff before it could respond. It had to go and get the stuff, right? It had to go and get the index.html file. It had to go get that file. and it had to get that file from the disk or the drive where that file was stored, right? And once it got that file, what did it do with it? Yeah, it responded with it.

And then the browser was able to use that file, right? Was able to use that file to show us the beginning of Neopets website. So we typed in neopets.com and we hit enter. That made a get request to Neopets server. There was some code on Neopets server that said, hey, when someone makes a get request, go get this file and respond with it. It's the core of how the web works. I have a promise that I told you that. I said that once you learn a few things, you can build whatever you want. And this is one of those things. Once you understand that when you type in a URL and you hit enter, you're making a get request to a server. and we can code our servers, right? We can code our servers to hear that request and to know what to do when it hears it. Right? When it hears that request, we get the, we are in control of what it does. And what Neopets did is said, hey, when you typed in neopets.com and hit enter, It was coded to give us the index.html, right?

So we can think through this a little bit more deeper. Some folks are saying like, where does it get the file from? Let's think about it. This server is just a what? The server is just a what? A computer, yep. Server is just a computer. And on this computer, just like any other computer, There's going to be a lot of stuff. There's probably going to be like a CPU. There's probably going to be some RAM, but there's probably also going to be a what? Yeah, like a solid state drive. An SSD, like a place where we're storing our files, right? Maybe a hard drive, but it's 2022, right? We got to start using SSD sometime, right? So there's some sort of drive where we store all of our files Where is the HTML?

Actually stored like we're like if we said the server has the HTML files. Where are all the HTML files? Yeah, they're on they're on this drive Right, they're on this is drive like on that drive are all the HTML files all the files that we're gonna need to load neopets.com. So when we type in neopets.com and we hit enter, we know that we're making a get request. That get request makes it all the way to Neopets server and there is some code running on this server that can hear the request and generate the response. I call that code my API. The reason I call it my API is because an API is a simple interface for something complex. The simple interface, right? The simple interface was typing in the URL, right? Typing in neopets.com was the simple interface that requested me all the way to Neopets server. There is some code, right? There is some code that heard that request. There was some code running that said, hey, if they make a get request, right? And it's the main route, what do we wanna do? If there's a get request, it's on the main page, it's the main route that they're making get requests to, what do we wanna do?

If this server heard a get request, what do we wanna do? Some of you are jumping right to the response, but we're not there yet. The server just heard a get request come in for the main page. What do we need to do? Well, first we know that we want to respond, but we need something to respond with. So the very first thing we have to do is go and get the HTML file. And that HTML file is sitting on our SSD. So we have to go and get the file that's sitting on the SSD, that's sitting on our drive, that's sitting on that computer. Once we find that file, right? Once we find that file, then we can respond with it. Now, if this was a Node server, I don't think Neopets is using Node, but if this was a Node server, what would enable us to go and find that HTML file that's on the disk or on the drive or on the SSD. Yeah, the FS module, the file system module, is what would enable the code running on this server to go and get that HTML file. And then once we had that HTML file, we could respond with it. So the simple interface was the URL. We typed in neopets.com, but all this stuff happened on the server.

That's why I call it an API. It's a simple interface that does something complex. We made a get request by typing in a URL and hitting enter. That was the simple interface. That request made it to the server. It heard that request and it did a lot of complex stuff. It had to go and get the file off of the drive. I had to get that file and then respond with it, right? And the beauty is that since our server is running node, we have access to the HTTP module, which enables us to hear the request and generate a response. We have access to the file system module, which enables us to go and get that HTML file. And then we're able to respond with it. Right? Rinoke said, what if the page is dynamic? What if, what if, when, what if you were already logged in? Let's take it, let's take one more step.

What if we were already logged in? All right, we're already logged in. I go to the main page and on the main page, it says, hey, Leon. All right, what if I'm already logged in and I load the main page and it says, hey, Leon? Well, then this part right here, the get request might have more steps. it might have more steps. Now, instead of just going and getting the HTML file from the SSD or the hard drive, whatever it may be, maybe we have to go and get my name from a database. Maybe I have like a user ID, but maybe my name, like Leon might be stored in the database. So we might have to like go somewhere else, get the information about the logged in user, plug that into the HTML file and then respond with it. So what happens over here on the server? We hear the get, but what actually happens, like the steps, like the first step, the second step, the third step, the fourth step, the fifth step, the sixth step, all the steps before it responds, we get to code out. We get to say, you know what? just grab the HTML file and respond. Or we could say, you know what? Go to the database, get the number of Neopets that they've killed, right?

Plug that into the HTML and then respond, right? So the idea here, right? The idea here is that we are in control. When we are building out our API, we are in control of the steps that happen. What do we want to have happen? When we hear that get request that simple interface they just type the neopets calm They had no idea what we were going to give them back. That is in our control But this is the Fundamentals of how the internet works. We make requests and Our servers are set up to hear those requests to generate those responses Right? And we get to control what it does when it hears that request and how it actually responds. We are in control. When we are building out our API, our CRUD API, we are in control of, all right, we heard a get request. What does the server do when it hears that request? And the secret sauce is in what we decide to do. And over the next few classes we're going to learn how to do all the things that you might want to do, and to hear all the different requests that can be made. And I'm here to tell you, it's not a lot.

Once you learn how to do four things, you can build whatever the heck you want. So let's talk about those four things. Cool. Zelle had a wonderful, All right, all right. Zelle had this wonderful bar in their tutorial, and I just wanted to make sure that we took some time just to say it out loud because it's really important. All right. It is a set of rules that allow programs to talk to each other. The developer creates the API on the server and allows the client to talk to it. Right. a set of rules that allow programs to talk to each other. Developer creates the API. So we're gonna create the API, right? We're gonna create the API that's running on our server that can hear all these different kinds of requests. And then all the different clients, right? All the different clients can talk to it, right?

That's our API, right? At a core level, that's what we are doing. we are writing something, right? That allows all these different clients to talk to the code that we wrote. And when we hear the request, we generate the responses. So here I have some lovely server side, sorry, some lovely client side code, right? Some client side code. And this client-side code, let me make this a little bit bigger, enables me to enter in a rapper's name. So let's put in 21 Savage, and I'm going to click. I don't, I don't think it's ready. Hold on. Oh, there we go. Sorry. It just took a little while. I think a lot of you are on it right now.

I clicked and I got back 21 Savage's birth name. Right? I was able to put in, let's put in chance the wrapper. You know, you know, let's go ahead and click. And then we got their, their name back, right? Their birth name back. And so this is a very simple API that I built and that we're going to build together. So this is a simple client. That's like, actually I'm pointing at the screen. Like you can see me pointing at the screen. It's a simple client. This is client side. This is on my computer, but this API is actually hosted on the internets, right? It's actually on the internets. And so we are going to build out our own server today, our own API that can listen for different kinds of requests, generate responses, right?

And that's what we're building up to. So I have a client. It could be any client. You could be running this client side code on your computer, on your phone. It doesn't matter. We could all be consuming the application that I built and we're gonna build it together tonight. So We're gonna build out this API, right that enables all the different clients out there to interact with our server And when the server hears those requests, we're gonna it's gonna know what to do We know what to do All right now I said I I said that there's really only four things that we have to worry about. And when it comes to making requests to our server, it really is just four different things that we can do. We can make something, we can get something, we can change something, or we can remove something. 99% of every single web application you have ever interacted with has really only did these four things. When we were using it, we were making something, getting something, changing something, or removing something, and that's it. And we can actually break down pretty much any app that you use on a regular basis, really just into those four things. Now, when we're making something, there are actually like the requests that the computer understands, like the requests that go across. Remember, when we're talking about this client server model, this wire, right? The way that this works, the way that we're able to send requests and get responses is because it's using something called what?

Yeah, using HTTP or the hypertext transfer protocol, right? the hypertext transfer protocol. This ability to send requests and generate responses is what we're using to send those requests and to generate those responses. We know this breaks down into like TCP and IP and all this like very heavy stuff that you can spend your whole career on. We just get to take advantage of it and use it, right? And so we know that our requests and our responses are using this hypertext transfer protocol. And this HTTP protocol actually enables you to do a few different kinds of requests, right? The requests that go across and come back, right? Those requests and responses, there's really like four things we're doing using that protocol. We are posting, we are getting, we are putting, and we are deleting. These are the requests that make sense when we're using the hypertext transfer protocol, right? But instead of just saying post, get, put, delete, we've given them some names. When we're posting, we're creating, when we're getting, we're reading, when we're putting, we're updating, and when we're deleting, we're deleting, right? We have a good euphemism for this called CRUD. Once you understand that every single app, pretty much every single app that you've ever used is just a CRUD app where you're creating something reading something, updating something, or deleting something, you can build whatever the heck you want.

You can credibly build whatever you want. So, supposed to get the puts, the deletes are like the technical term that HTTP recognizes, right? But for us, we're gonna say creating, reading, updating, and deleting. And so let's talk through like an actual app where we'll be creating, reading, updating, and deleting. We're going to take a really popular app. Let's take Instagram. All right. Let's take a really popular app and show how it's really just these four different kinds of requests. So if we were using Instagram, what are some ways that we can make create requests? We're going to call them posts. What are some ways that we can make create requests? Yeah, when you make a new post on Instagram, right, when you make a new post on Instagram, you are creating, you are making a request to Instagram server and you're sending along a photo, you're sending along maybe like a caption for the photo and you are literally sending that request to the server and you create a post, right? So when you are on Instagram and you make a new post, you are literally creating, right? And the method or like the way that you're creating is something called a post method. Posts are typically, whenever you're like filling out like a form, you're probably making a post in the beginning, right?

Because when you're filling out a form, you're sending data to a server. And the server is going to use that data to make a new post for you. Cool. So when we are using Instagram and we make a new post we are creating. What are some ways that we can read or get data? Yeah when you open someone's profile, when you scroll through your feed, when when you look at an individual post, those are all get requests or read requests, right? Where with a post, we are sending data to Instagram to create our posts. With a read, we're saying, hey, give me data. I wanna see that photo, right? I wanna see that photo. Give me that data, please. Go get me that data. How about updating? When can we make an update we want to we want to update something? What are some things that we update quite frequently if you're using instagram?

Editing a comment could be can be updating. Yep. I like the the the likes right like Does instagram still have likes? I don't remember they said they were going to get rid of them, right? when you Double tap to like Right or you click the like right? I think Australia got rid of them or something weird. That's what I was reading the other day. When you click the button to like, right? You're updating something on the server, right? On the server, your likes went from zero to one, right? They went from zero to one. And when the next person taps the like, somewhere on the server, the likes are going from one to two. Each time you tap or you like, you are sending a put request, and our server is set up to hear that put request and then change the value from two to three. So we're starting to see how every single thing, right? Every single thing in Instagram is really, whoop, is really crud.

When we create a post, we're making a post. When we are trying to look at somebody's photos or our feed, we're making a get request that we're trying to read. When we are liking stuff, we're updating the number of likes. We're making a put request to update the number of likes. And then what would be a delete request? Like what would be a delete request? Yeah, when I delete a post, right? When I deleted a post, we have deleted that post. That is a delete request and that post is poof. But, um, we'll probably see that deletes are probably more like updates because they definitely aren't deleting our data, right? Um, but yeah, so when we make a delete request, we're deleting stuff. So every action, every action in Instagram is really just a post, a get, a put, or delete. We're either creating, reading, updating, or deleting. Disco tech priest a thank you for the hydration cheers to you and some kind of fire. Thank you for the hydration.

Cheers to you So, let's go ahead and talk through this crud stuff a little bit more just so we can understand Let's go ahead and take a go back to our lovely whiteboard here All right Vita water. No, this is this is a prime hydration Slogan Paul's new brand with KSI It's actually pretty pretty bomb Pretty tasty Hashtag not sponsored I'm a fan How much sugar let's see Total sugar is 2 grams, that's 20 calories, has coconut water, BCAAs, vitamin B, electrolytes and some other fun stuff. Tastes pretty good too. I saw it on their podcast, I was like I'm going to try it, I saw it at Target, I got the ice pop flavor and I got the lemon lime it's very sweet if you do not like energy drinks that are sweet you might not like it but the ice pop one it's pretty good it's kind of like the rocket pops a little bit I'm a big fan of giving people second chances I'm big fan giving people second chances and uh i'm willing to give logan paul a second chance so i tried prime we'll see we'll see hashtag not sponsored i promise people just always are really curious what I'm drinking. So I'm going to tell you what I'm drinking. All right. So let's go back to Instagram juice box. Hey, what's up? Um, let's go back to Instagram for a second. Right? We, we got, we got, we were talking about influences, right? I got influenced into buying a drink. Let's talk about Instagram. All right. I go to Instagram.

I'm in the browser, right? I'm in the browser. and I I go ahead and in the browser I type instagram.com what type of request have I have I made I've made a get request. Exactly. I've made a get request. So I typed in Insta.com or Instagram.com and I made a get request. G-E-T, get, not git, right? Get, a get request. Now, when I make that get request, what's the fun term that we use? It's not the, this is the HTTP term, right? What's the fun term that we use when we're just being cool, when we're just hanging out, you know? Read, exactly, read. So our get is our read request. And this request makes it all the way to our server, right? Makes it all the way to our server.

And what's running on our server that hears that request? What are we calling it the code that's running on our server that set up to hear that request? What do we call in that code? Yeah, our API So there's some code running on our server called our API and a part of that code There's something that says alright if we hear a get this is what we do and So what are we going to do when that get request comes through? Well, let's say we're we're we're on Let's say we're just on the main feed. What do we have to do when we make that initial get request? Like we open up to the main feed, what are we actually getting? Like what is that request going to do? It's gonna go and get a bunch of data, right? So we haven't really talked about this yet, but where is probably most of our data being stored? Yeah, from a database. So there's probably like another computer, right? Think about the database as another computer that's holding a bunch of data. So this get request comes in. We go and get all that data from the database.

We're gonna be pulling out links to our photos. We're gonna be pulling out the comments that are on that post. We're gonna be pulling out the caption to the post and once we have all that data What we're gonna do is we're gonna plug it into some HTML All right, so we heard the get request We're just trying to load like our main page that has like the first initial post, right? We made that request to the server the server heard the request we had to do some stuff We had to go get some data We had to plug that data into some HTML. And once we've plugged all that data into our HTML, we have all this HTML that's ready to go. What do we do with all that HTML? Yeah, we respond. We respond. Right, we respond. And that's how we see the first page of Instagram. That's how we see that first photo. All right, so we see that first photo. Now, that first photo is a photo of Leon, and so when we see a photo of Leon, what do we do? Don't take so long. We like it, exactly, we like it.

So we like it, hearts everywhere, we liked it, but little do we know, when we liked it, what happened? When we liked the photo, what happened? It made an update. We made a new request. Here we thought we were just tapping hearts, but this whole time we are making requests. Now, what type of request is gonna be sent to the server when we tap the heart? Yeah, it's gonna be a put request, but this is the nerdy version. That's the HTTP word for it. What, what's the, what's the, the cool, just hanging out with the friends, you know, vibing what's the, what's the word we use for put yeah, update. Exactly. So it's going to be our update. Cool. Now what's the code that's running on our server that here's that put request or that update request. Yeah. Yeah, that code is called our API.

And our API is set up to hear that request. And it says, oh, you just made a put request. Here's what I want you to do when there's a put request. What we're gonna do when we hear that put request is that we're gonna go back to that database. And we're gonna go back to that database. And Leon's likes were a thousand, right? But now we're gonna update them to a thousand and one. And if this was really janky, right? If we go back, then back in the day, and we're gonna see some simple apps that are like this. If this was a janky app, that's all we would do. And then the server would respond, the server would respond saying, hey, it went okay. That request you made, good job, it happened, it worked. Right? It worked. That's it.

Now, an interesting question would be, is at this point in time, would we see anything different? Like it still had 1,000 here. Would we see anything different? We update, we made a put request. We updated it from 1,000 to 1,001, but we see anything? No, not yet. What would probably happen if we're back in the day building Instagram is that then the page would refresh. All right, the page would refresh. And when it refreshed, it would make a new what? A new request, right? We refresh the page. Refreshing the page is the same as hitting enter, right? That would make a new get request. All right, make a new get request. but that's the HTTP nerdy way of doing it.

We're just hanging out, we're vibing. Hey, does this work? Right, well, we call it. It's not a get, it's a read request, exactly, so read. Cool. And there's some code running on our server that is set up to hear that get request. And when it hears that get request, well, guess what? it goes back to the database, it finds Leon's likes, but now the likes are 1,001, oh, 1,001, interesting. So we take that data, we plug that data into our HTML file and then we respond with that new HTML. So it really took two steps for this to happen. The liking triggered a put request, and the only thing it did was update the data from 1000 to 1001. Then our app heard that everything went okay, and it refreshed the page. refreshing triggered a new get request. When the server heard that get request, it went back to the database, so that it was 1001 this time and sent that new updated HTML. So they really are separate requests, right?

Eventually we'll be able to do some stuff that smooths out this process where we're not constantly refreshing the page to see how things work, But at a core level, it's still doing those three things so far. Well two things so far get and put so we saw get and put What can we do for? All right, so I I decided to Click the trash can What type of requests am I probably going to make? Yeah now There's something that had to hear that click, right? Something had to hear that click. There's probably an event listener that was running client side. That event listener made a request on our behalf, maybe like a fetch. Remember the fetch could have its own method. It could have like a delete or it can have like its own stuff. So we can actually on a fetch update the method so that it's something else like a delete. But let's say we click the button and it makes a delete request to our server. And remember, delete is the same. It's already a word that the cool kids use, right? Delete is delete, you know what I'm saying? So we don't have to have, it's the nerdy term and the cool kid term all in one, cool.

So our server has some code that's running on it, our API, and part of that API is some code that's set up to hear the delete. And what do you think the delete goes and does? What do you think the delete goes, like we get to control what happens here. We get to control the steps, right? We said, all right, when you hear a delete, this is what I want to have happen. We get to write this code. We get to say, you know what, all right, go to the database, find the post, delete the post, right? And then tell the browser it was okay. So we wrote out all that code that could hear the request, go to the database, delete the post, right? And then tell the browser that the delete request went okay. And when the browser heard that the delete request went okay, what did it do? What did it do? It refreshed. And when it refreshed, it made a git. And the git, we already wrote code for.

The git sitting on the API on our server. The git hears that request. And when it hears that request, it goes to the database. it tries and finds that post, but that post is no longer there. And when we send the HTML back, it's missing that post. So, so far we've seen our, our RUD. We saw our read, our update and our delete. Right? We saw our read, our update and our delete. All right, what's the last thing that we haven't done yet on Instagram that we could do red life Create how can we create on Instagram? Like what do we create? Like, how do we create? What's the thing that we do on Instagram? Post exactly post So on Instagram you can make a new post You upload an image, you put a caption, some other stuff, and that all goes as a part of a request to the server, and that is a post request. But that's like the nerdy HTTP version.

We're over here, we vibing, we having some fun. Hey, does this work? What do we call a post request? We're cool kids, we don't call it post, call it a what? A create, exactly, a create request. And so our server's set up to hear this post and we get to code what happens when it hears the post. What do you think we're gonna do in our code when it hears that post? What do you think we're gonna do? QOBA, thank you for the good subs. Yeah, it's gonna go do a bunch of stuff. If it's going to take that info that we sent, all that data is going to go to the database, right? We're going to go to our database. We're going to create like a new post in that database that has all that data. And then we are going to eventually respond back to the server telling it, hey, that post request, I mean, that create request you just made, and I'm a cool kid, right? That create request you just made, it went okay.

Okay, right, it went okay. And since it went okay, what's the browser probably gonna do? It's gonna refresh. And once it refreshes, it's gonna make a what? It's gonna make a get, or for cool kids, a read request. And guess what? When our server set up to hear that get, it's gonna go to the database, right? But this time it's gonna notice is that there's an extra post. So when it builds out the HTML and it responds with that HTML, well, now that HTML includes the new post that we just created. Samurai, hey, congrats on the freelance gig, right? So it's really all just creating, reading, updating and deleting. Creating is like creating a new post. Reading is getting all the information either on the post that we just made, maybe some of the posts that we updated, right? We can read. A put or an update is like changing something, right?

It's not creating something, it's changing something that already exists. Our likes went from 1000 to 1001, right? And then deleting is deleting, we delete something. And so pretty much every single web app is just those four things in creative and create more and more creative, creative ways. But at the end of the day, it's just listening for those four requests. Are we creating something? Are we reading something? Are we updating something? Are we deleting something? If you can do these four things, you can build the apps of your dreams, right? And the cool thing is, we don't really have to understand honestly, at the end of the day, how this whole thing works because we're using what? I mean, it helps if you do a little bit, but the reason we're using a certain tool is going to help us handle this whole process. Express. Exactly. Express.

Express helps us set up all these listening for requests, generating the responses. Request handles all that piping, all that plumbing for us, so we can just write the code that we want to have happen. And so today we're going to start at seeing the basics of building this lovely Express app. Well, we're close to taking our break. We talked a lot about Instagram. Some folks asked on office hours, if you wanna see my old ass Instagram, go ahead and give me a follow on Instagram if you want. I'm gonna be picking five random people. I'm gonna start doing the resume reviews and stuff like that. We have a couple of folks that have used channel points to get them. So those are going to start next week and I'm going to pick five random folks that follow me to do a coffee chat and then to do a review of all their professional stuff. So if you follow me on Instagram, I'm going to pick five random people and next week we'll do coffee chats and professional review. Uh, so some folks wanted the, uh, the, the chance to do a coffee chat and a review. I said, all right, if that's what you want, boom, There you go. Follow me on Instagram. I'll pick five All right So when we come back from our break, we're gonna build an app with express right When we come back, we're gonna build an app with express.

We're gonna talk about what express is We're gonna see it come together might go a little bit over tonight We got a lot of stuff to get to still folks So when we come back, let's put this creating reading updating and deleting into action We're gonna just start off tonight with the reading portion and then on Thursday we'll add more of our lovely crud to the application. So, let's take our break. Top of the hour, five minutes on the clock. All right, let's go ahead and build an app with Express. Well, before we can build an app with Express, what the heck is Express? So, like any enterprising individual, I would go to Express's website to figure out what Express is all about, right? That's what we do when we want to use projects or products that we want to use. We go to their website to figure out what it's about. So Express is a fast, unopinionated, minimalist web framework for Node.js with a myriad of HTTP utility methods and middleware at your disposal, creating robust APIs quick and easy. Okay, all right, let's see this fast. I think we kind of get what fast means. Fast means that it's fast. Like think about what we just talked about. Like stop, stop and think for a second, hold on. Think about all the stuff we just talked about.

Like all of these requests, talking to databases, getting data, plugging it to HTML, responding. That's happening as I'm clicking stuff on Instagram. And it's like literally like coming back that quickly. I'm not sitting there for a half an hour, right? That's pretty cool. And so Express is at least fast, right? Like when you're making those requests and getting those responses, it's fast. Like it can do that stuff quickly. Cool. Un-opinionated. Un -opinionated, all that means is that Express is really only concerned with one thing. And that's like helping you with this paragraph down here. That's our sentence. That's all that that express cares about you. Oops.

Sorry On your period it just means all it cares about is this this sentence right here Right, you can bring any of the other tools that you want to use You can bring all the other software you want to use Express doesn't care what you use to do any of the things that you want to get done It's just there to help you build out the api And it does it in a way that is very flexible and if you want to do it the not so express way, you are totally free to do it. So it doesn't have any like strong opinions on how you do things or the tools you bring to work with Express. And then minimalist is exactly that, where it's like, all right, it's just the stuff you need for the web framework, just the stuff that's going to help you listen to requests and generate responses. That's it. Cool. It works for Node.js. So that's the environment we're using to run our JavaScript. So Express is a fast, you can use whatever you want to use. It's very simple. It's just the basics for building out your API in Node. And so it has a myriad of HTTP utility methods. Myriad just means like a lot. And so all the stuff that we just talked about, the ability to get, to post, to put, to delete, All of those are HTTP methods, but then there are so many other HTTP methods that we need, like creating servers, listening to requests, generating responses, right? So all that stuff that has like how the internet actually works, well, Express gives us all these methods to use that handles all that stuff for us. And middleware at your disposal.

Middleware is interesting. I can feel the nerds quaking as I give this definition, but when we're talking about this process here, when we're talking about the client talking to the server and the server responding, we're really talking about two things, a request and a response. Middleware is everything that's in between the request and the response. We're gonna see that there's a lot of stuff that happens in between a request coming in and a response going out and all the tools and things that help that process between the request and response, we're gonna call middleware. And it enables us to create a robust API, quick and easy. So the API is just the code that we're writing, right? Code that we are writing, right? The code that we are writing to listen to those requests and generate those responses. Cool. All right, I don't know why I just can't say this shit. All right, remember we are using, understanding, building. Tonight we're using and we're starting that building process. And so tonight we build. We're going to learn how to do the basics of CRUD using Express. We're going to get to the reading portion tonight.

Thursday we'll add the UD, the updating and the deleting. Cool. All right, there are some key steps in this process that I put in the slides. We're gonna do everything from scratch together, but if you're coming back to like rewatch this lecture or you're gonna walk through it on your own, there are some key things that we can't forget as we move through this process. One is whenever we're creating a new node project, specifically that one that uses Express, there are a few things that we have to do. We actually have to create the folder for the project. We have to move into that folder, right? And please don't like try and type along. We're just talking big stuff today, right? And then once we have our folder, we need to create our npm init. When we do npm init, what do we get? What happens when we do that? What happens when we do npm init? Yeah, we get our package.json. It helps us start off our node application It's gonna help us keep track of all the packages that we need and one of the packages that we need is going to be Express and so we're going to install express and save and not only will that install express for us But it'll save express into the package.json That is created when we run this command Cool.

Once we set up the project, we're going to do a few things. We're going to see that Express makes it really simple to listen for those gets, those posts, those puts, those deletes, right? Those gets, those posts, those puts, those deletes. And what we're able to do is when we hear those gets, those posts, those puts, deletes, is we can start to respond. And so there's lots of different ways that we can respond. So we're going to have some code to help us hear the request and respond. And we're also going to have the ability to not only respond with files, but also maybe respond with some JSON as well. Cool. Eventually we're going to want to put all this code onto Heroku. And so here are the commands to push your code to Heroku. If you're using two-factor authentication, you just drop the I, which we'll see a little bit later today and that's kind of the key bits. It's time for us to build our first API using Express. Cool. Alrighty. So in the starter code for today, if you need the starter code for today, it is all on our Discord, EstimationPoint Discord.

Agree to the rules. Once you agree to the rules, there's a following materials channel that has everything. in this folder is a complete version of all the stuff we're working on today. So you don't have to like frantically copy along or anything like that. Let's pay attention. Last, let's ask questions. Let's ask questions, right? And do it together. So don't, you don't need to have your fingers on keyboard here. I've already given you the full solution and I will share my code after class as well. So the very first thing that we talked about was creating our folder and what I want to create is a wrap names API. I want to be able to enter in a wrapper's name and to get their birth name back. That's the the end goal right? Be able to enter in any wrapper and get their birth name back. So I'm going to go ahead and set up my project first.

I'm going to call this RAP Names API, right? RAP Names API, just so that I could have a project. But to do that, we have to do mkdir. So mkdir is going to be in my folder, RAP Names API. You can see that I now have this RAP Names API folder here. and I want to cd into it, cd into wrap names API. You can see that I am now in the wrap names API folder. Cool. Now, once I have this folder, the next command that we saw was that lovely npm init. And I'm going to open up the wrap names. I know it's tiny, but I'm going to open this up. And when I hit enter, we're going to see something important happen. We're going to have to walk through kind of setting up everything But for me i'm just going to hit enter on all of these so the name The version the description the entry point test command repository keywords author i'm not going to set any of this up right now I'm, just going to hit enter through all of them And once I hit enter through all of them, you'll see that I got this lovely new file Right this lovely new file And in this file has all the stuff that we just agreed to, right? All the stuff that we just agreed to. So the npm init helps us create this package.json, which will be the start of our application.

Now, once I have the npm init, we can start to actually build out our application. And since I know that this is going to be an express application, What do you think I need to install? Yeah, Express. I'm going to do npm. I'm going to do that here. I'm going to do npm. Install Express. And I'm going to use the save flag. When I install. It's going to take a little while to go get that package. It's installed that package. And what we're going to notice is that my package.json updated to include the Express dependency, basically saying, hey, this application is going to use Express. And here is the version of Express that we are using. And you'll also notice that we have this lovely node modules folder which is where like the express stuff actually sits right Right where all the actual the actual files that Express comes with all that Middleware and stuff that we talked about notice how big our node modules folder we got just by typing in NPM install Express Some folks are saying, can you type it in again? This was all part of the homework.

So you've already done this if you've done the homework. Remember that the VODs are always immediately available, even live as we're watching. Like the VOD is live right now. Like you could literally open up the VOD and rewind a few seconds to see what we just did. So if it went a little too fast, just open up the VOD, rewind, or just watch the VOD afterwards. We're not doing anything super, super critical. So pay attention, ask questions. Other folks will be able to answer in chat too, if you get a little lost. Cool. All right. So we just set up our application. We create the folder. We did our npm init. We go ahead and we saved Express. Now we need to actually start creating our server.

And so we've always used a specific file name. So I'm just going to go ahead and create a file called server.js. Beautiful touch server.js. and now I have my server.js file. Cool. Since I know that I'm gonna be using Express for this application, the first thing I'm going to do is make sure that my server has access to Express. So I'm gonna do const Express, and I'm gonna set that equal to require, and I'm going to require Express. Cool. So now my application would have access to Express. Remember Express came with all those handy dandy HTTP methods, like the things that are gonna enable us to listen to the requests, the things that are gonna enable us to generate the responses, all that fun stuff. Yeah, just like we did for Figlet. Yeah, we're saying get and use Express. But since Express is holding all these methods that we can use, it's often really helpful to create something that's gonna hold Express for us, so we can just actively use those methods. So you're very commonly gonna see something like const app equals, and then we're just gonna go ahead and set that equal to Express. And you can see that we have our lovely parentheses here, meaning that we're using Express and storing it in app.

So this now is going to enable us to wherever we see app wherever you see app further down my program The app is really just express so It's very common to see express apps use app and wherever you see app, right? You just know that we're using express All right The very very first thing I want to do Is set up my server to hear a request and to generate a response. So inside of my express server, the very first thing I'm going to do is just set up that very simple set of code. So if I want to hear a request and to maybe let's say respond with an HTML file, what type of request is that going to be? Yeah, it's gonna be a get request so I can very cleanly just do app dot get and That's gonna be the start of my request Now the beautiful thing with Express is that we can pass in What we want to listen for so if I'm just on my main page Right. I'm on the main route What? would be the path that I'm looking for. If I just want to go to like my main page, what would be the path? Exactly, be that lovely forward slash. And so with that lovely forward slash, with that lovely forward slash, we now have our route. And once we hear a get request on that route, All right. Once we hear a request on that route, what do we eventually want to do? We want to respond with something. And so the beautiful thing with Express is that we have this nice little function that you're going to see over and over again. Boop.

Right? You're going to see this structure over and over again, where we're going to have our parentheses, our arrow function, and we're gonna split the arrow function. And inside of this, we're gonna have two parameters, request and response. Now, request and response are just parameter names, but since we're using Express, it's kind of like what it expects, right? In Express, you're gonna have two parameters, and the first parameter is gonna be everything that will help us handle the request. And the second parameter is gonna be everything and it's gonna help us handle the response. You can call them whatever you wanna call them, but it's often easier just to call them request and response. And eventually, once we've done this a little bit, you'll see me reduce them down to REQ or REC and RES for response. So if you've ever seen like REC and RES everywhere, it was just short for request and response. Cool. All right, so we hear this get request, right? And what do we want to do when we hear the GET request on the main path? What do we want to do? We've heard a GET request, what do we want to do? How do we want to respond?

Ah, we want to respond, so we'll do response. And how are we going to respond? What do we want to do? What's the response we're going to give them? Yeah, we're going to send them a file, like an HTML file. So in beautiful express form, we say response. And then what the heck we want to do, which is just send file. Isn't that lovely, right? We're just going to say, hey, we heard a get request on the main path. We want to send a response. And the type of response we're going to do is by sending a file. Cool. Now, we actually don't have a file yet. And we actually haven't told it what file to use. So let's tell it what file to use, and we're probably gonna have to create that file.

Now, when we're first kind of starting out, we're gonna do something called dirname, and then the name of the actual file that we're creating. So index.html is kind of like the normal thing here. And this dirname is just saying, wait a minute, oh, wherever the file that's running is located, that's where we start looking for our files, right? Wherever the server.js file is located, right? That's where we're gonna start looking for our files. So if the server.js is like right in the root of the wrap names API folder, then that's where we're gonna start looking for the index.html. Eventually we'll be able to like do some stuff that makes this path stuff a little bit easier. But for now, it's going to be the dir name. And you'll notice that VS Code tries to help me here. So I do my underscore, underscore, and you see the dir name pops up. I'm just going to use that. And there we go. So I'm saying, hey, start wherever the server.js file is, and then find the index.html. But I don't actually have the index.html file yet. So let's go ahead and create that.

How can I create a file? just like a normal HTML file. Touch, index.html, beautiful. We'll see that I created my index.html file here. Let's go ahead and just set this up. So I'll do HTML, I'll select HTML5, and then I'll just put an H1 in here. That's gonna be wrap names API. Cool. So now I have an HTML file that's in the same directory as my server.js. It looks like our server is pretty much set to go, except it needs one other thing. We set up the server, but what do we need to tell the server to do? Yeah, we need to tell it to listen. So we're gonna do app.listen, beautiful. and it's gonna listen for one very specific thing. It's gonna listen for a port number.

So in the past, we've just kind of like plugged in like 8,000 or something like that. We're gonna do something a little bit different. We wanna start being able to use some variables here and there. So I'm gonna put a variable in here called port and I'm just gonna come up top and do const port equals 8,000. Down here, we're gonna use port. And when we hear that the server is running, we wanna like actually let us know that the server is running. So we're gonna do like the same kind of arrow function we're gonna see all throughout Express. And we're just gonna go ahead and do a console log. And we're just gonna console log that the server is running. So let's go and do, let's do some ticks actually. The server is running on, let's go ahead and do port. You better go catch it. Can it be any number? Yes, it can be any number. Cool.

All right. So much cleaner with Express. I think so too. All right. So we set up our application. We have our initial get request. We've told the server to be up and running on port 8,000. I think we're in a good spot to maybe test and see if this is working. So let's go ahead and just do node server.js. And look at this lovely console log we're getting now. No longer it's just, no longer it's just like the, the missing REPL here, but we actually have this lovely now console log that says, Hey, the server is running on 8,000. You better go catch it. Uh, and so let's go ahead and go test on our local host 8,000 and see if our server is running. Local host 8,000 boom, local host 8,000 is up and running. We can see that we made a request to our server the server heard that we were asking for the default path and it Responded with our HTML file first try although We're gonna have a lot of things that aren't first tries tonight because we got out we got to play with some things cool So now we have a very simple server set up it's sending an HTML file Well, it's looking good, but we wanted to create a what tonight.

We didn't come here just to serve up HTML files. We came up here to create our own APIs. And the APIs that we've all used before don't respond with HTML files. The APIs that we've all used in the past have responded with what? JSON, exactly. So let's go ahead and create a different path. Let's go ahead and do app.get. Same thing as always, right? And I'm always gonna type it out. We're gonna listen for a different path this time though. Let's just call it slash API. And we're gonna have our normal lovely callback where we're gonna have our requests and our response parameters, cool. And inside of here, when we hear somebody request on the API route, we're gonna send them a what? A response, so we're gonna do response. But in this time, instead of sending file, what do we wanna send?

GreenSky said in all caps, JSON. Yeah, so we'll just say JSON. That's it. Isn't Express amazing? Hold on. We wanted to send files, so we just said send file. We want to send JSON, so we just sent JSON. What? This is amazing. This is amazing. All right, so now we're going to send some JSON, but we don't really have any JSON to send. Let's create an object. We don't, we actually don't have any JSON to send. We don't have any objects that we can send their way. So I'm just going to go up here and create an object.

And I'm just going to create like a normal object for 21 savage. So I am going to const savage equals, I'm just going to create an object. And then we're going to have, we're going to have, let's do age. Yeah, let's do age. Let's do birth name. and let's go ahead and do birth location. Cool, so we're gonna have their age, their birth name, and their location. I know that 21 Savage is 29, I believe. Yeah, 29 or 30, but their birth name and location, we're gonna have to look this up real quick. So let's go to Wikipedia, here we go. 21 savage is Wikipedia. They are 29 and here's their birth name. Let's go ahead and yoink that And so we'll go ahead and put that in there And their birth location was London England or should it be uk london uk. I don't know. What do wikipedia say?

London england. All right Also, can we just say that SirSavage21st gave us one of the best bars in rap history. I didn't know nothing about Noviza. I was in the park with the gang. Ugh, bars. And what was the other one too? I just listened to it the other day, too. Oh, with all this UK, you know, that these AK going to spray, spray ours. All right. So now we have, we, we, we have, we have an object here. We have an object here that has an age of 29, a birth name, a birth location, and we can just respond with Savage. Yeah, cool. So let's test this. I also want to change this running on, I want to change this to on port, just so that it says the port. Let's go ahead and stop our server.

All right, let's stop our server and let's run it. Oh, I didn't save. Oops. Let me save the file. Stop the server. I'm just doing control C to stop the server. And then I'm going to run. I'm just, notice how, notice how I don't actually type out node server anymore. Right? Notice I don't type in node server anymore. I just hit up arrow. Cause it's already in the history of my terminal here. Cool. Hit enter. Server is running again.

Let's go to our browser. Let's make sure that Locos 8000 is still running. Why don't we just go to slash API? Oh, it gives us the data. That's cool. Blah, hey, what's up? Let's go. Hey, blah. Great to see you. Hope you're doing okay. Blah in the house. Let's go. Turn up. All right, so we have the API. What have we used in the past that makes it easier to visualize like the data we're getting back from APIs?

Postman, yeah, Postman. We've always used Postman to look at our APIs. So let's use Postman again here. Now, one thing that you'll notice is that right now I can do, let me refresh this here. Let me just cancel here. I was testing this earlier. Don't save. All right. I was testing in this earlier, let's go ahead and do localhost 8000 slash API. And you can see I'm getting the data back. Now, my application is running locally on my machine. To be able to access the server that's running locally you're gonna need something a little bit extra. Let me show you real quick. I'm gonna do something on my end. I'm gonna quit an application that's running on my computer.

And then notice, I can't hit that endpoint anymore because it says desktop agent is unavailable, right? Desktop agent is unavailable, which means that I have Postman, their desktop agent running on my local machine. It's called the desktop client or the desktop agent, right? And once I'm running the desktop agent, I can make requests to my local host. So I can turn back on the desktop agent, right? Desktop agent is now back running and I give it a second, or if I refresh, there we go. You can see that I now have the ability to ping it. So if you're like Leon, how can you like actually get access to the local host through Postman, because I'm using the web API. I'm using the web, right? You want to download the desktop agent. Yeah, the desktop agent from Postman. So now you can see that my API is working. Look at this, let us go, right? I'm able to paste in the API route. When I do that, I get this lovely bit of data back.

So it is working. we got a very, very simple API running with just two Git requests. We have one Git request for the main page, and we have another Git request for our API. Pretty nifty. But we're not here just for one wrapper, right? We're not here for just one wrapper. We want to be able to have multiple We want this to be like a real API. So let's go ahead and build this out so that we can have more than just one wrapper. Let's have at least two wrappers and maybe an unknown. We could just do like, dial-on, dial-on, dial-on for unknown. We could do that. Yeah, I see you chat. So let's go ahead and do that. Let's go ahead and just create some simple JSON here for two wrappers and then dial-on for everyone else. Cool.

So let's go ahead and set this up. This should just be 21 savage. And then this should just be like an object, right? So we should have 21 savage and it's just gonna be our object. So we'll do like our colon and then we'll create our object here. We'll do that. Oop, got my little quotes here. We'll just tab all this in, oop, oop. And then we'll close our object. And then we'll have another one. That's 21 savage is just an object holding age, name, birth, location. Let's just copy this. And we'll do another one. That'll be Chance the Rapper. Chance the Rapper.

Cool, Chance the Rapper. I believe they're one year younger. so it'd be 28. And then let's go ahead and grab that real quick from Wikipedia. Cool. Chancellor Rapper, please say the rapper. They're 29 as well. 29 and And, Chancellor Bennett, cool. Chancellor Bennett is the birth name. There are 29 as well though, so let's go and do 29. Birth name, Chancellor Bennett. And birth location, I do not know how to spell Illinois. I'm just gonna copy it, yoink. Cago, Illinois. There we go.

And so now we have 21 Savage, we have Chance the Rapper, and then we can just do like a, I don't know, like just like a catch-all, which will be Dylon. Which will be Dylon. So let's just go ahead and copy Chance. And we'll change this to Dylon, cool. And Dylon, we'll keep them at 29. Birth name, Dylon. And birth location will also be Dylon, cool. All right, now we got some real data here. We got this lovely Savage that is opening and closing that has 21 chance to wrapper and dialog in it. Let's change this from savage to wrappers cause it's more than just 21 now. But now we have wrappers. And so on our API route, let's not return savage. Let's return wrappers. Cool. We have to restart our server here.

I'm just gonna control C to restart. and then I'm gonna run node server again just to get it running. And let's go check on Postman and see if we're getting anything back on this API route. Let's go to Postman, localhost 8000 API, let's send, and boom, we're getting all of our data back. Look, we're getting 21 Savage and their birth name and location, chance to wrapper and a dialog. So we now have the ability to build out a pretty simple API, right? We have some data that we've created. It's just an object. We had the ability to make a get request for an HTML file if we want it, or a JSON if we want it. And yeah, it's looking good so far. However, we haven't actually been able to do what? What haven't we been able to do? Well, what we have here, this is all fine and dandy, but the API, we want it to be useful. What do we need? We want this API to actually be useful.

We don't just want to like send them a bunch of wrappers. What do we want to do? Yeah, we want to be able to like send them a specific wrapper back, right? We want to be able to hear the request and send a specific wrapper back to them. So I want them to be able to ask for 21 Savage and get all 21 Savage information. I want them to be able to ask for Chance the Wrapper and get all Chance the Wrapper stuff back. I want them to be able to ask for somebody else and just get Dylon back. Cool. So let's go ahead and think through this. Right now we're just responding with wrappers. But what if there was a way that the user could tell us what wrapper they are looking for? What is the interface that our users could use to tell us what wrapper they cared about? You're jumping to a form, but a form comes later. What's the interface that we've always used for our APIs? What's the interface that we've always used for APIs?

Whenever we were trying to get stuff from the cocktail database, whenever we were trying to get dogs photos, we're always using the URL. So there has to be a way that we can use this URL to request a specific person. And so there's something really nifty when you're using Express that you can do. So we can do this right here, and I can put a colon and I can say wrapper name. So now when somebody uses that URL, Well, they can put a wrapper name in the URL and I can yoink that if I want it, right? I can yoink it. So let's see if we can yoink this wrapper name. So now that URL is part of the what? That URL is part of the what? There's only two things. There's a what and a what? Yeah, that URL is part of the request. So we can do a request. And then what are we looking for on this request? What would wrapper name be?

It's a what? Yeah, it's a query parameter. It's a query parameter. So we can just say param. That's the shorthand in express, param, right? Or param, sorry. We have our request. So we can look at the params or the query parameters, right? And what's query parameter do we want? Which query parameter do we want? Wrapper name. Cool. Because right here, when you have this colon, that's how we let Express know, hey, this is gonna be a query parameter that's on the URL. So let's see if we can just console log this and let's see if it works. I have no idea if it'll let me console log it here.

We're playing fast and loose. We're going to save it. Let's restart our server. Leon, why aren't you using NodeMon? Because I want to get used to starting and stopping my servers. I want to feel it. I want it to be real. I want it to be real. NodeMon just does too much for me in the beginning. So I like to get the feel for it. I don't want to be in an interview without NodeMon needing NodeMon. You know what I'm saying? Cool. All right, so I stopped my server. Let's start it.

Let's just use Postman and see if we can do that. So API slash 21 Savage. Let's send. And it looks like we're getting all the data here. Let's go ahead and make sure that this refreshed. And the cool thing is that made sense. Oh, okay, that made sense, right? All right, we got all the data still. Did we tell the API to respond with something other than all the data? No, we still said, send all the data. So I thought I got got, but I didn't, I got. I thought I got got, but I get, you know what I'm saying? All right, so I still told it to send all the data, but what I did say is, console.log the query parameter of wrapper's name. And look what we got down here, folks. Ooh-wee.

We were able to pull that query parameter off of the URL. Let's go. Let's go. We were able to say request params wrapper name. Let's try it again. Let's try it again. Let's try a different wrapper. You chance the wrapper. Please say the wrapper. Cool. Chance the wrapper. Let's send it. We got all of our data because we haven't told it not to do anything yet. We said, give us all the data. But if we go back and look at our console log, ooh, look at this go.

Chance the wrapper, we're grabbing the information that's coming along from the URL. Cool. So now, not only can we make a request, we can grab the query parameters from the requests. Why aren't we having to do like the percent 20? Cause Express is handling it for us. Let's go turn up. Cool. All right. All right, so now we're able to make a request to our server. We're able to grab the individual wrapper off of the request, we should probably just create a conditional now, right? Like if the wrapper is inside of our like object, give it the info from that object. And if the wrapper doesn't exist in our object, we should just give it Dylon. So let's go and just create a conditional here. I'm gonna comment this out real quick. I'm going to say, if what's the name of our object?

Wrappers. If wrappers, wrapper name. What the heck is this doing right here? What am I saying by using these square brackets here? What the heck am I doing? Yeah, this is the bracket notation, but it's still enabling us to look at the object. It's enabling us to grab the object and use its key. And so the reason why I do this instead of like dot notation with the object, right, is because if we look at our object properties, 21 Savage has a what, Chance the Wrapper has a what. What's in there that would give us trouble So if we just use dot notation, yeah, there are spaces in here. And so dot notation doesn't play well with the spaces. And so what we're going to do is use this bracket notation because what we can do is we can plop in a wrapper name. We can plop in 21 Savage, right? And if 21 Savage exists inside of wrappers, right? Like if 21 Savage, whoop, if 21 Savage exists inside of Rappers. So 21 Savage exists inside of Rappers.

So if 21 Savage existed inside of Rappers, what would this evaluate to? What would this evaluate to? It exists. So that's a truthy statement. Yeah. That's, it'll evaluate the true. So instead of hard coding in 21 Savage here, I'm just going to use the parameter that came from the query parameter. Let's just go ahead and call this, let's just go ahead and call it const wrappers name. I'm just trying to show you that these are all different variables. So I'm going to say const wrappers name, so like their name, and I'm just going to plug that in here because wrapper's name is gonna pull the wrapper name off of the query parameter, right? And then I can just look and see, all right, is wrapper's name inside of my object of wrappers? If it's true, let's respond with some JSON, but our JSON is just gonna be whatever this value is. I'm just going to respond with whatever 21 Savage information was and if it's false, All I'm gonna respond with is, dialogue, right? Dialogue. So, all right, what we're gonna see is, all right, if the wrapper that they passed in as part of the query parameter exists, then let's just respond with all that wrapper's information.

So if they passed in 21 savage, it should respond with this object. If they passed and chance the wrapper, it should pass this object. If they answer any other wrapper, it should just be Dylon. Cool. Cool. All right, I'm gonna get rid of this comment so we don't need it here because that'll just bother me. All right, so we save it. Let's chill our server. Let's restart it and let's go back to Postman to see if this is working. All right, API slash chance the rapper, let's send it, let's go, let's go, it's just given us chance the rappers information now, first try, let's go, let's try 21 savage, let's Go, let's go, 21, 21, 21. And then let's go ahead and just type in something random. And we should get Dylon. All right, 29, Dylon, Dylon. Let's go, let's go, turn up. All right, so it's working.

They typed in a URL, so we saw the URLs, right? We saw the URLs. We saw, let's go back to 21. Let's do Chance the Wrapper. Actually, let's do this, nah, let's do it the real way first, and then I'll show you what I think is gonna happen. Chance the Wrapper, beautiful. We got Chance's information back, but look at this path. Look at this URL. Localhost 8000 slash API slash Chance the Wrapper. Chance the Wrapper's on the end here. Cool. So if we look, we're talking about localhost 8000 slash API and then ChanceTheWrapper was here. So wherever I see wrapper name, it's actually ChanceTheWrapper, right? It's actually ChanceTheWrapper. So requests, because this is part of the request, we wanna pull the parameters off.

What parameter we wanna pull off? We wanna pull off the wrapper name parameter. So whatever was here, a.k.a. ChanceTheWrapper, this request param's wrapper name grabbed, and we stored it in the variable wrapper's name. So wherever I see wrapper's name, wherever I see wrapper's name, it's now ChanceTheWrapper. So it's as though I plugged in ChanceTheWrapper here, and since ChanceTheWrapper exists inside of our wrapper's object, we grabbed this specific part of it, and we respond it with it, respond it with that information. What's the significance of the colon? It's to let us know that that's a query parameter. It's not part of the path, it's the query parameter that's being passed in with the path. Why use Postman? Because that's what I use to test all my APIs, including the APIs that we're building now. Let's go. Right? I like to use the tool that I'm going to use for in the future, just showing you like the basics of how it still works. Cool.

All right. So now we saw not only the ability to respond with some HTML, we also saw the ability to respond with some JSON. We... Have it running, but there's one thing that some folks mentioned, right? Some folks mentioned that there's maybe like a mistake that our users might run into. What's a mistake that our users might run into? Yeah, case sensitivity. So let's go back and try Impostment. Let's do a Chance the Rapper with a capital T and we get Dylon. That's not what we want. So let's handle this. Let's handle this. Let's handle the case sensitivity. All right. Well, first let's make all these lowercase.

Savage, Chance, Rapper, and Dylon. So now at least I know that all of these are lowercase. And what can I do over here with my query parameter? What could I do with this query parameter? Yeah, two lowercase. All right. Two lower case. Beautiful. Two lowercase. All right. So now no matter what I type in, it's gonna convert it to lowercase. and then it'll do the comparison. So since all of our wrapper's names are now lowercase, no matter what they type in, we'll be turned to lowercase to find the match. All right, let's stop and start our server. Let's go back and try this out.

Chance the wrapper with a capital T. I'll give it a second. Chance the wrapper with the, did I restart it? I did. Why didn't this work? Oh, I got got. Why didn't this work? I didn't save. All right, let's save it. Let's start and stop, stop and start the server. Let's go back. All right, let's make the request. All right, now we're getting a chance to wrappers information. Let's change the casing here a little bit. Boom, still getting chances information.

It doesn't matter. Casing no longer matters now. I don't know what the user puts in, they'll get the right info. Second try. Cool. Ooh, some folks notice an error here. Look, this Dylon, does this Dylon exist as a property in my object anymore? No, this is lowercase Dylon. this is uppercase Dylon, this would not be found. This would throw an error. So let's make sure that this is lowercase as well. Like the Dylon property is lowercase D here. Cool. All right, so now we should be all set. We're able to have all this wonderful, wonderful code served up.

And I actually have a client side bit of code that I wrote that can make requests to this API. And so we're running a little bit of time here. So I'm just gonna, I'm gonna yoink the code. So here is my wrap names API that this server serves up. So if we go back to localhost 8,000, right, we go to localhost 8,000, we have this lovely wrap names, right, this wrap names API. And what I want to be able to do is I want the user to be able to enter in the name. So I don't want them to be like up here. Like the users could come up here and do slash API slash chance the wrapper, right? They could do that and get the data, but that's not what we've been doing, right? Right? Right, this is not what we've been doing. We want them to be able to enter in the name and then get the data back from our API and then display that in the browser. So let's do that real quick. I actually have the code already written out, but we can probably just code this out pretty quickly. So in here, we know that we're gonna need an input and we know that we're gonna need an H2 to put their birth name.

Let's just plug the birth name back into the DOM, right? What about spaces? Express is handling the spaces for us. Yeah, cool. Birth name, we have, yeah. So we have the lovely ability to put the birth name into the DOM. Let's save this. Let's make sure that this is still all connected well and good. All right, we can see our input and we can see the place to put the birth name. Cool. What if chance the wrapper was entered? Then that wouldn't work. Yeah, that wouldn't work. Not the way we have it right now. We don't have all the time in the world to handle all the edge cases.

Let's not be code weenies. Cool. We need a button. That's a good idea. Button. Cool. Give. All right. A man needs a name. Cool. There we go. Now we'll have the ability to do that. If we go back and we just refresh, we can see that we can kind of get away with it when we're just updating HTML. All right. Now we have the ability to click a button.

When the user clicks the button, we want them to be able to grab the name out of here, right? And we want them to be able to make a request to our server. So what's the only thing that can listen for this button click and grab the value out of this input? An event listener and that's all what event listeners means we need what what type of JavaScript? We need some good old client-side JavaScript so Does our rap names API have a JavaScript file like client-side JavaScript yet? No. So let's go ahead and create that. I'm gonna do make dir.js folder. I'm going to cd into that js folder, and I'm gonna use touch to make a main.js. Cool. If we look, we now have a lovely js folder, and we have a main.js file. Cool. and one mistake the very first time I made this application is that is my JavaScript file linked in my HTML? Nope. Let's go ahead and do that.

Let's go ahead and do a script. And let's just inside of the script, we'll have our source. Set that equal to Main dot JS. Cool. JS slash main JS. Nice. Cool. All right. And let's see if it's actually working in the main JS. Let's just do working. Or let's do an alert. Sorry. Cool. All right. Let's make sure our server's running.

We're in the wrong folder. We're inside the JS folder. We've got to go up a level, cd dot dot. All right. Now we're in the main wrap names API folder. Let's start our server, node server dot JS. All right. We're running. Cool. Let's refresh. All right. Let's do the inspect here. Failed to load status of 404. Failed to load status of 404. Hmm.

What were we trying to do? What was I just trying to do? I was trying right now, right? What was I trying to do? Oh, I was trying to serve up this client side code. Oop, where's my mouse? Is there anything right now that's listening for that request? Is there anything that would hear that request? No. And do I want, do I want to serve up the client-side code? I thought that we said that we wanted to have any client from anywhere be able to access our code, right? So we got to remember that there's a difference between us serving up client-side code and like any client-side code being able to access our server. Right, because right now we're not serving up any of this client-side stuff, right? We served up the HTML file, but we don't have our like lovely public folder, right? PrivateGen, hey, what's up, hope you're doing well, thanks for stopping by, right?

We haven't served up any of this stuff. What I want is any client to be able to access our server, right? Not just us serving up and giving them a front end and a backend. I want any client to be able to access this. But right now, right now, our code, our server only exists where? Where does our server only exist at the moment? Yeah, it only exists locally on our machine, right? On our lovely port 8,000, right? It only exists on our machine. If I want you to be able to build a client that can access this, what do I need to do? I need to host it, right? Right now this is not hosted and I don't wanna build out the code that serves the front end. I want you to be able to build the front end code that works with this backend, right? So what I can do is I can actually host this API code and then you all can build the front end that will consume this code. So all I have to do is since this is already working.

We already know that we can Make requests to the API. I want to host it on Heroku Just a quick easy way to get it hosted to put it on somebody else's computer for us all to access so if I Go back and go to my slides I've actually given you the very simple directions on how to get this onto Heroku Before I put it onto Heroku, I just wanna put it on GitHub just so that everyone can access the code if they want. So instead of me just giving you a zip file, I could maybe just give you a lovely GitHub link. So let's go ahead and do that real quick. I'm just gonna go ahead to go to GitHub and I'm gonna go ahead and create a new repo and we're gonna call this wrap names class fun. Fun. Cool. Create the repository. Remember, it always gives you this lovely, like, things that you can follow if you need to. Do we have a git repository? Let's look. Let's look. ls-la. We don't have a git repository. Let's go ahead and do that git repository first.

Git init. Now, if we were to do that ls-la, we'll see that we have a lovely git repository. All right, we have one now. Cool. Next thing on the list, it told us to create the readme. We'll save that for later. We'll make our first commit, and then we'll switch the branch to main. All right, I'm just gonna copy that. Let's go ahead and do git add dot. We're gonna add all of our changes. We're going to commit all of our changes. First commit, working API, cool. We're going to change our branch to main and then we have to add this origin and then push it. So if you haven't watched our Git and GitHub class, I'm just kind of following through the instructions here, but we had a full class on Git and GitHub. I see everybody.

You're jumping ahead. You're jumping ahead. I know what you're going to see. We got it. We got to show it before we can fix it. All right. We added our origin and then we're going to do the git push u origin main. All right. We look git push u origin main was the last command and we're going to see something really interesting that happens. We're going to see something really interesting that happens anymore. Look at this. Ready? Oh, it's actually pretty quick. But what, what did we just push? We pushed a lot of data, five, five megabytes.

We pushed a lot of data. I was hoping that it would, I was hoping for some, some, some dramatic, like slowing down here. But what did I do? When I pushed, I pushed everything that was in my node modules folder, right? I pushed everything that was in my node modules folder, right? And so that can be pretty expensive. I know some of us are on slower internet connections and that can be too much, right? And so, in the future, what we want to use is a gitignore file. And so, we can go ahead, we're in our main route. Let's do touch, gitignore. Cool. And in this gitignore file, we can put our node modules folder, right? Now, next time I push, right? Next time I push, I won't be pushing up the whole node modules. Look how big this thing is.

Look at all the stuff that's in here. Look at all this stuff. Ooh, look at all the stuff we just pushed up to GitHub. That's a lot. We go back and we look at our GitHub repo. A lot of stuff that we pushed up there. All this stuff got pushed. We don't need to do that each time, right? And so I just use my touch command to make the git ignore file. file and then I just put node modules in there and then we'd be good. Right? Now what we could do is we could like fix all this. We could bring it all back down. We could like change it, but for now let's just know that that's there, right? That we can use the gitignore file if we want.

For right now, I'm just gonna remove the gitignore just so I don't have to redo everything. Or we can just redo it. Let's redo it. Let's run it back. I'm actually gonna remove my get folder. Don't ever do this. Well, I'm gonna remove my get folder. Let's do ls-la. We don't, whoop. I didn't force it. One second. There we go. Now if we do an ls-la, I don't have my get anymore. I don't have my get, I don't have my get repo anymore. Remember, don't do this.

We're just, we're just, we're really over time today. So I'm just, I'm just showing it to you really quickly. We, we got rid of the get folder. Let's go ahead and just create a new repo. Let's not even worry about it. We're not there yet. Create a new repo. Wrap names two. There we go. wrap names too. There we go. We created it. We know that our node modules is in our git ignore. So we're all good. All right.

We're all good. Let's go ahead and just follow through our steps again, get init, get add dot, get commit. We are way over time. Cool. Let's go ahead. We've made our commit. We've added. We've made our commit. We want to make sure we change our branch. Boom. Get branch main. Beautiful. Let's add our origin. Cool. Let's go ahead and do our get push.

And this time, if we go back and look and we refresh, we'll see that the node modules were not pushed up, right? Right, the node modules were not pushed up, beautiful. So we saw that we can take our code that we had here, We put it on GitHub, but now I want to put it on Heroku, okay? And so we actually have the commands here to put this code on Heroku, and we're going to have some errors right out the gate. We're going to put it on Heroku, and we're going to see one thing really, really important. And that thing that we're going to see is that right now, our code is only set up to handle one port. If we look, we come back to our server.js, we can see right now we're only set up to handle port, what, 8,000. And there's a good chance that Heroku might not want to use this port, right? And so there is one thing that we can do, just a little modification here, just a little modification that we can do, and we can do this lovely process.env.port, or, and so what this is gonna, and we're actually, we should capitalize this. Cool. What this is going to do, all right, what this is going to do is it's gonna say, hey, use the port that Heroku is trying to make us use, and if that's not the case or that doesn't exist, use the port that we've already defined. Cool. Eventually, yeah, we'll have an ENV file and all that fun stuff, but this is our first time seeing it, right? This is our first time seeing it. So we could have just one little thing that'll stop us from having an error when we go to Heroku.

That's it. All right, now let's follow the instructions that are in the slides. We're gonna do Heroku login. I have two-factor authentication, so I'm not going to do the I. I'm just gonna do Heroku login, and I'm actually gonna do that off-screen. My Heroku's already logged in. Let's go ahead and do Heroku login. One second, folks. Actually, I don't think it would expose anything, but just to be safe. Cool, all right, it took me to the browser. I'm logging into the browser and now I am logged in. Cool, and I'm coming back. Cool, all right, it's gonna be like three more minutes and then we'll be done, so we won't take a break, but we'll be done in like three minutes. All right, so now I'm logged in And we can follow these next few commands here. Create, we're gonna create the name of our app.

So we'll do Heroku create. And let's call this wrap names API fun. Cool. So you can see right now that Heroku has created an app for me called wrap names API fun, right? Wrap names API fun. And what we want to do now is take our code that we have here and put it on Heroku server. So we have one other thing we want to do before we do that, which is we want to tell it like what file to run, right? We've been doing the node server JS on our end, right? We've been doing the node server JS on our end. We have to tell Heroku, hey, if you want to run this code, it's node server JS, right? So we'll just do this lovely little echo here. You'll see that it actually created a file called a proc file. And that proc file is just saying, hey, Heroku, this is how you start this server. Boom, that's it. And then we have the last thing here, which is to add our changes, commit them, and then push to Heroku instead.

So we're gonna do, make sure this is all saved. It add dot it commit dash M Roku changes and Then we're gonna do get push Roku Master it push Roku master Oh Oh It push oh, sorry main Main, it's been a long day. Hit push Heroku main. Boom. It's pushing up to Heroku. Literally, it's taking our code and putting it on Heroku for us. Look at this. It's taking all the code that we wrote today and putting it up on Heroku for us. And cool. So now we have this lovely wrap names API. and it actually gave us the full URL. wrapnamesapifun.herokuapp .com. If we were to go here, we actually have our full app posted, right? It's now hosted. We can go to Postman and let's like, let's hit up our API route.

API slash, let's do 21 savage. Boom, we're getting 21's info back. Let's go ahead and do chance. The rapper, please say the rapper with the messed up T boom. We're getting chances stuff. Let's go, let's go. It's live. We online let's go. And, um, I actually have some client side code that I already wrote. Right. Um, that I, that I gave you as part of the package for today. So we have our index.html, which is already set up. We have our client-side JavaScript, which is already set up with the fetch and everything. But instead of it being this path, let me do the one that we just created. And I'm gonna open this client-side code.

So this client-side code has nothing to do with the server we just created. It's purely client-side code. Uh, I can put in 21 savage and the result should show up if I did everything correctly. Let's see. Uh, oh, I didn't put in the, uh, we didn't do cores yet. We didn't do cores. Oh, I'm running out of time. Let me do one fix. Let me do one fix. Let me do one fix. Let me do one fix. So it works, right? We're able to get it from the, we're able to use Postman, we're able to get it to work. But since I'm requesting it locally, right? Since I'm requesting it locally, it's not going to work.

Right, so this was a local file, right? This is a local file, right? This is a local file. Our server is not set up to handle the local file, right? We haven't told it to use cores yet. We haven't told it to use cores yet. So let's go ahead and just fix that real quick. I mean, two seconds, two seconds, we can do it. All right. Cool thing about Express is that it comes with, well, there's a module that we can get that'll handle all the cores errors for us. So npm install cores, and we're going to save it. Cool. So now we have an npm package called cores that will save it for us, that will handle all the core stuff for us. Let's go ahead and do const. We'll call it cores.

We'll say require cores, right? So now we have that package, and then we just need to tell our app to actually use it. So app.useCores, there we go. All right, so now our app should be able to handle all of our cores errors, no problem. All right, let's do git add.git commit-m fixedCoresErrors. All right, we added it, we committed it. Git push Heroku main. All right, it's taking all this new code. It's sending it out to Heroku for us. It's sending us out to Heroku for us. Cool. It's gonna tell us when it's done building. So remember, all this code is going to our server on Heroku for free. This is a free account. You don't need to pay for heroku.

All right, so it should be updated. Let's check postman real quick Make sure the api is still working. Let's put in 21 savage Boom it's working. Come on local client-side code Let's refresh just to make sure 21 savage Let's click Let's go, let's go, let's go. So now any client in the world, any client in the world, no matter if it's your client side code running on your tablet, your phone, your computer, this client side code can now use the code that we have running on our server to get the rap data back. It's hosted on Heroku. We can consume it from any client. Let's go. We went a little over, a little over tonight. Went a little over, but we got it working. So, real quick whirlwind, and then guess what we're gonna do on Thursday? Guess what we're gonna do on Thursday? I went way over, went a half an hour over. I don't think that's way over. Went a half an hour over.

We come back on Thursday, we're gonna run it all back, and we're gonna add a little bit to it. But let's just take a quick peek before we end the day. We have our lovely modules that we're using, express and cores, and we set up our port. We have a lovely object that we can use that we're gonna respond with from our API. We set up the here to get request, a get request on the default path, right? That serves up an HTML file. We also have a lovely get that has a different path with a query parameter. We're able to grab that query parameter from the URL. We're able to use that query parameter to see if it exists, that name exists in our wrappers object. If it exists in our wrappers object, we send back that wrappers info. If we don't have that wrappers info, we send back Dylon, Dylon, Dylon. We set all this up to listen to not only our port, but also any port that Heroku might give us. And then we pushed it all to GitHub just for funsies, just so we could have it there. And we pushed it to Heroku. And now that it's on Heroku, Heroku has given us this lovely URL, and we can all, I can share this URL with y'all.

We can share this lovely URL, and you can all access the app that we just built. You could ping it, you could use it in Postman to get data back, or you could build your own client side that would make a get request to this server. Now, I know we're probably gonna DDoS it because there's so many of us here, but what I want you to do between now and Thursday, right? Between now and Thursday, I want you to look at all the code that we did tonight. I know it's a lot. I know we pushed. I know we stretched, but we had a lot of really good wins. It's down. It's too many people hit it. Too many people pinged it. You probably brought it down. Don't worry. We are able to build full stack web applications. Let's think about this. Holy smokes.

We're able to build out a server that can listen for requests, that can generate responses. What I want you to do between now and Thursday is come back to this code. Dig through it, make it make sense, watch the VOD if you need to, and then try building your own client-side code that pings my server, right? Try pinging my server to get the data back. So that means you have to build a fetch, right? Cool. All right, when we come back on Thursday, We're going to run all of this back. I know we ran out of time at the end, so we're going to definitely run it back. We're going to see all of these requests again. We're going to build it over again. We're going to get into it. Then we're going to add a few extras. We're going to add an update, maybe a delete, right? We're going to have more fun with this. We're going to keep building it.

But as of right now, you can build full stack web applications. I hope tonight you saw that it's not too much. It's just gets, it's just posts, it's just puts, it's just deletes. We see that express does what we tell to do send files send JSON what? All right, we're not gonna do a raid because we went way too over. We're just gonna end it tonight Please if you have a little bit more juice left in you Take a look at this code run it back between now and Thursday and everyone have a wonderful wonderful night I actually think people want the channel points. Let's do a raid just cuz I know people want the sweet sweet channel points Let's do that. Hold on. I don't have anybody queued up though. Have a good rest of your night Thank you for giving me a little bit more time. Thank you for uh, sticking through the the little little overage here Uh, but on thursday, we're gonna have a lot more fun. We're gonna run it back if it didn't make sense That's all right. We're gonna have some fun. We're gonna build it out again, and we Will add to it. All right folks.

Have a wonderful rest of your night. Peace Be well

End of Transcript