Introduction

Hey, does this work? Yeah. Hey. Yeah, yeah, yeah, yeah, yeah, yeah. Hey, good morning. Good afternoon. Good evening. No matter where you're coming from. Hope you all are doing well. Welcome back. Welcome back. Let's run it back. Let's go, everybody. Glad to see you all. Love it.

Love to see everybody in here. Saw all y'all folks in here early. Hey, turn up. All righty, folks. As promised, we're gonna run it back. We ran out of time last class, right? I try my best to time these classes right. But sometimes we go over, and I was trying to scramble at the end. So we're gonna run it back. all the important stuff that we covered last class, we're going to do again. We're going to build out that API again. We're going to get it, host it, right? We're going to get it, host it on Heroku. We're going to run back all those tidbits, make sure we answer a lot of your questions, and then we'll see where we're at. If we have some time, we'll do another one.

Another one, right? And then we'll keep it pushing. Hey Good to see you all Y'all you I don't know how explain, but y'all are awesome Cuz some days days are long and I get in I see the energy and chat and I'm like, oh, let's go Let's turn up. We got you some crud tonight Let's go everybody. Good to see you all. Hope y'all are doing. Well, we online exactly Yeah, we online let's go turn up So always as always like to start off with some questions, and we haven't really done a question of the day in a while So I'm gonna I'm gonna ask the normal question of the day first, and we'll do the real questions here Would you rather be able to see through walls? Or be able to do any math equation in your head See through walls or any math equation in your head So math or walls, please math or walls. I figured, yeah, this is, this is pretty, pretty lopsided. I guess, I guess we're all here to be, if we're all here to be a computer scientist, I guess, software engineers, I guess the math one makes sense. All right, that does, this was a, this was a simple question then. There's like, there's like three walls and a, and a sea of math and different ghosts. Hey, what's going on? Hope you're doing well. Thank you for being here.

Thank you for the gifted subs and we starting off tonight. Right? Let's go. Got the, the crew online got in different ghosts in the house. We got somebody, we got Jason Derulo getting the Pokemon card. Hey, it's going to be a good night and we're doing review. Oh boy, let's go. Alright, let's go. I think I'm in the math camp. I'm in the math camp. I was thinking of like, like, like superhero like things. And I guess seeing through walls. I was thinking of like cat and like walking through walls. I think it should have been walking through walls and not seeing through walls. Seeing through walls is a little, a little sus.

So I'm glad there are so many, so many, uh, math answers. All right, folks, let's go ahead and get some normal questions. And if you got normal questions, I got normal answers for you. Always give folks a second to get in here before we jump into it. I see through walls of emotions. Are we using the same material from last class? Yes. And technically we didn't really use any material last class because we built it all from scratch. Yeah. Any takes on the new Pokemon trailer? Oh boy. Um, not only have I watched like the, the trailer, like four or five times, not only if I watched like every video a drive is put out, not only have I watched like all the Riddler videos, like it's been, it's been a while. It's been a, it's been a hot minute. I'm excited for it. So my thing, my praise LeChunk, exactly.

My thing about Pokemon is Pokemon is best when you can play with others, right? That's why Pokemon X and Y is my favorite because it felt like you're in a real world Where people could stop battle with you? They could make it all the way to your friends list. And so the four-player co-op open world Come on now That that's that's that's game changing I can play with three of the homies and we're just we're just ripping through a that's gonna be a good time Now if I could like add folks I meet in world Oh, that would be like that would be the best Pokemon game ever made. So I As always I don't give up my hopes It is it is it is game freak at the end of the day But I think this might be a big one. This might be a big one I always get the version that doesn't sell as well. But everyone it like has the least pre-orders is the one I get I want that treed credit Alright, no idea how to play Pokemon when you're kicked out, no. Alright, questions, questions, questions while we give folks a chance to get in here. I did get through all your questions. So it took me like two or three days, but I got through all the mod mail. So everybody that sent a mod mail, she got a message back and everyone that posted in the ask Leon, you should have gotten a message by now. So it took me a little while, but I got through, I'm caught up. Sorry. It took a little while to get through all the messages, but we're caught up. Cool.

MongoDB is not working for me. What should I do? Are you using Mongo Atlas or are you using a local version? Start with Mongo Atlas and make sure that your IP address is white listed and then you shouldn't have any problem with it. Hello world. Yeah, we already learned Git. It's on our YouTube. You can do exclamation point YouTube and see our Git and GitHub class. You're gonna see the basics again tonight when we push our code So you will see the basics tonight, but we do have a full class on it Can I catch up from video 2 of course you can crypto I'll make sure you join our ketchup crew on discord as well Do we submit project network for those that missed it Yes, if you're playing ketchup, if you're part of the ketchup crew, you should always submit everything even projects Sometimes you might do those projects by yourself because you're going through it at your own pace. Sometimes you'll go on Discord and try and find a small crew, but know that folks are kind of going through it at different times. So sometimes it might be a little hard to line up, but always ask and maybe you find some folks to work on the projects with you. You don't have to worry about submitting anything unless I've asked you to submit it. Yeah. Yeah. That was more, you should do it.

You should do the work. Sometimes I actually do stuff and I don't, I don't ask you to submit it just because it just, I'm not going to, it's just not, it's not worth submitting. I just wanted you to do it. Right. I'm right. The point now where we kind of trust each other a little bit, right. There's a little bit of trust going on here. I'm going to trust that you're actually doing the work that you did the projects, right? Okay. Sometimes I ask for them cause I want to see them. Um, but I actually asked y'all to tweet me the cool one. So I'm going to dig through those this weekend to see, see how y'all did. But yeah, there'll be some things I asked for. Sometimes there's stuff that's assigned that I don't actually collect, um, but I'm still expecting that you did it. And if people aren't doing it, then I guess I got to start collecting everything.

Sometimes that's how it works out. Cool. Does this need to be a passion to succeed? No. I know a lot of well-paid, phenomenal software engineers that don't write code in their free time, kind of don't like it, but they make way more money as a software engineer than they do in anything else. And so that's why they do it. And I think, um, they had their passion about getting paid. Exactly. OCC. Uh, I think there are some gatekeepers that'll be like, oh, you have to have a passion for software engineering or you'll never succeed. I don't think that's true. I think people have their own motivations that they can bring to this. That's that's not Being passionate about knowing how to code. I think that's kind of a joke But if you are passionate about coding it doesn't make it easier, right? Like if you are excited about it, it makes it easier It does help exactly different.

It does help like I really like this stuff. That's why I spend a lot of time on it So I dedicate my evenings that helping others learn it right? Like I really enjoy I think that makes I think that's true in any career Though, I don't think that's like a software engineering thing I think I think there are a lot of doctors that probably don't like medicine, but they like getting paid But the doctors that do like medicine probably have a better time, right? and Then also like the passions The cool thing about software engineering is that your passions can really align with anything if you're really passionate about D&D Go build tools for D &D if you're really passionate about soccer Go build trackers for soccer if you're really passionate about rap build a rap names API like we're doing tonight Hey, so to me, it's just kind of like an extension to do the stuff that you care, like the stuff that you care about, right? And so for me, I just like to build cool stuff and I think that's where a lot of my passion comes from. Cool. Alrighty folks, let's jump into this. Thank you for your questions. The Segway exactly, let's get into it. We want to run back building out an API tonight. I'm excited that you were all here. I'm excited that you're coming back to run this back. We're going to dive into crowd. We're going to spend more time on this back end stuff. We want to take some time to understand how the Internet works, like what's actually happening behind the scenes.

Like I hope I hoped on Tuesday, which I called the finesse. And tonight we're going to call it success, right? I hoped on Tuesday you kind of saw a little bit. The wheels started turning. Maybe hung out with the Wolfpack on Wednesday and you got the gears turning. If things haven't clicked yet, I want them to hopefully click tonight where you at least understand what's happening in the background. Like like what what does the request mean? What does a response mean? What the heck? What the heck are we talking about here? Right. If we can start to understand those basics, we're in a really good spot. Jason Derulo, hey, thank you for the gift of subs. Hope you're doing well. Thank you for being here.

And the other thing too is that like the backend is a lot of plug and play. I think one of the hardest parts about the backend is that there are a lot of stuff that we're using that has already been built for us and we're simply just putting the pieces together. And one of the hardest things early on is to like know Like, what is a piece and what do I, and what do I like need to commit to memory? Right. And so hopefully as we do it again, we'll start to realize like, Oh, these things have already been built for us. We're just consuming them. Right. So I think that, I think that leads to, that's where the trouble in the backend comes from. At least from a lot of my past folks that I've worked with is that the trouble comes in is like, I don't know what I have to commit to memory and what I'm just using off the shelf. And so we're going to get lots of practice with that. We're going to see all these things again tonight We're going to see the different pieces and we're going to talk about them because we're going to skip kind of like the normal Like what is node review and jump right into building? Cool. All right If you haven't already, please check in Uh, you can do exclamation point check-in here in chat to get the link remember typing exclamation point check-in doesn't actually do anything It just gives you the link get to go click like and retweet Please, if you're here, go check in. I want to make sure that you're, I want to see who's here. I want to make sure that folks that are here get credit for it when we get to the end and we do all the cool things that we have planned.

And it just helps more folks find us and don't have to pay thousands and thousands of dollars for a bootcamp. Cool. Thank you everybody that checks in. I appreciate it. Let's go ahead and keep pushing. We're gonna have a live car class tomorrow, 6 p.m. We're gonna do some examples live. I got you. We're gonna do some randomization and do some classes, some topics live, and we're gonna go for an hour. The session won't be recorded. So if you can make it, that's great, but we're just gonna get some more car practice in. All right, office hours, Sunday. We're gonna run back even more of the backend, answer all your questions, have some fun, and maybe build another API together as well. Remember networking this week. I want one coffee chat.

You owe me one coffee chat Yeah car class is gonna be on discord So the the car class will be on discord we do it discords like their spaces equivalent. Yeah But it's Pokemon go fest this weekend One coffee chat if you're going to Pokemon go fest, there you go. You'll find your coffee chat there one coffee chat, please Use the sheet, making sure you're getting, make sure you're keeping track of all your coffee chats of the folks that you're networking with. Eventually, I'm gonna ask to see your sheet. I wanna see who you've been talking to each week. I wanna see the interactions that you've been having. So please make sure you're using the sheet. Don't save it till the end. You need to start now. If you haven't finished the checklist, you're late. Finish the checklist, please. We gotta have this stuff marinating. So many folks, so many folks have already started kind of saying, Leon, I've been getting all this inbound interest because I did the checklist. So make sure you do the checklist so things can start to marinate so you get some of that inbound interest. If you read the Celebrations channel recently, we had a couple bangers recently.

We had a couple bangers in the Celebrations channel. Let me pull it up real quick. Shout out Nate, Nate, Nate dog and, um, Russell catch Russell catch and Nate dog both post that kind of their full stories about getting their job, uh, uh, amazing job for Russell catch and another great job for Nate dog, another person going to, uh, AWS, which is pretty wild. And we sent a lot of folks to Amazon which is kind of kind of blows my mind a little bit But yeah, make sure you keep an eye on that celebrations channel It's always some good stuff in there But what I'm noticing from the celebrations channels a lot of folks are mentioning that the things they did Like the checklist and the bank are the things that help them like don't listen to me Don't listen to me Right listen to them They're the ones that are in the field right now that are going through the hunt right now that are saying hey I'm really glad I did the bank. I'm really glad I did the checklist. So I'm gonna keep telling you to do it But don't listen to me Go read the celebrations channel See the folks that are getting jobs and see the things they tell you to do and you're gonna notice that it's pretty similar to What I was spouting each and every week to you. So please you haven't started the bank yet started If you haven't finished your checklist, finish it. It's gonna be the difference maker, right? The difference maker that's gonna help you get a job. Cool. Remember, you should be pushing every day. Recruiters love those green squares. You're gonna be getting that delicious coding practice in. You're gonna be lean mean interviewing machines before we get into the hunt. And so you should be doing a code wars every day and pushing every day.

All right. Let's talk about Express. Let's talk about Express. I started banking better late than never. Exactly, like start today. No shame, no guilt, just start. Ready, hold on. Let it go. Ready, one more time. I'll get big for you. Deep breath. You let it go everything is let go and now we start the bank code wars every day you start your bank today. If you took the breath today you start there you go what do I mean by banking hey if you're new around here do exclamation point 100 devs that's everything you need to know about our program but we're talking about the bank if you exclamation point bank it's a list of questions, both behavioral and technical, that all the folks that go through 100 Dev study to be prepared for their interviews. Cool. All right, so we're gonna talk about Express.

Before we jump into Express though, we need to blast back to the past and talk about how the internet works. Chat, what is the internet? Wires, set of tubes, yeah. I like this idea of a wire. And it's a wire that connects two kinds of devices. On one side, we have our client side devices, like our phones, our tablets, our desktops. And on the other side of the wire, we have servers. What the heck are servers? Really important question. What the heck are servers? Yeah, they're just computers, right? They're just computers and they have some code, right? They have some code that is running on them that helps them serve. And so what exactly are they serving if they're, let's say, a typical web server? Like what's some of the things they might serve up?

Yeah, HTML is probably a very specific thing. They might serve up HTML, CSS, JavaScript, JSON, right? The server's used to sending all these different kinds of bits of data back. And I think it's worthwhile for us to take a pause and like step back and think about the big picture, right? We went to neopets.com. Let's go back. All right, we went to neopets.com. And when we typed in neopets.com and we hit enter, as soon as we hit enter in the browser, right? Like I was running Chrome, which is my browser, and I typed in neopets.com and I hit enter. When I hit enter, what exactly did I do? What up, Yuan? What did I do when I hit enter? I made a request, exactly. I made a request to my server. that server heard the request and what did the code running on this server do?

What do we know that it did? We have no idea what the code looks like on that server, but we know what it did. It did something, right? yeah it heard the request and it responded right that server neopets server heard our requests and responded now what the heck did it respond with What was the first thing that it responded with? Yeah, it responded with an HTML file, right? It responded with an HTML file. So it heard that request and it responded with an HTML file. Where the heck did that file come from? You Yeah, I came from the disc right remember this is a computer and Computers have some things they have maybe let's see. So a CPU GPU, maybe they have a GPU, depending on the type of server. They probably have some RAM and they probably have an SSD these days, a solid state drive. And so when the server heard this request, right, when the server heard this request, the code that was running on this server knew how to go, talk to this SSD, get the HTML file off of it, and once it had that HTML file, then it responded with it. So all that happened. This is a lot of complex stuff to happen, right? We just made a simple request.

We typed in neopets.com. We made a simple request and on the server side, a lot of complexity happened. There was code that heard the request. There was code that once it heard the request, understood what you were asking for, that you wanted the main page. That code knew how to go and talk to the SSD. It knew how to get the HTML file off of it and it knew how to Respond with that file all that happened You just type neopets that common hit enter but all this stuff happened on the back end all this complexity so when we have a simple interface That winds up doing something complex for us that lets two things talk to each other What do we typically refer to this as? Yeah, an API. So this code, we're actually gonna call our API for now. All right, we're gonna call this code our API. It's a simple interface that enables us to do something rather complex. And in this instance, what is the interface? I Slow said IPA is like God that would be too bad right about now Yeah, the URL is the interface exactly I was typing in neopets Calm is the interface that enables all this complexity to happen including the response Well Oh, what are some other ways that we can trigger requests to our server? What are some other interfaces? Mm-hmm, there's a couple other ones that we probably have seen before. We have seen when the user types in a URL and hits Enter, That makes a type of request that we'll talk about in a second.

We have seen when users fill out form and click submit, that makes a request that we'll talk about in a second. We've seen fetches. So maybe from our client side, our client side JavaScript is able to make a request to a server, which is something that I kind of got lost in the weeds. Like I was trying to explain at the end of the last class. So we're going to revisit that idea of like client side JavaScript versus server side JavaScript. I think that's a really important distinction to make, but we'll have some more time to do that tonight. So we've seen typing in the URL and hit enter. We've seen submitting forms. We've seen making fetches. There's definitely one other one that we use all the time that we've used all throughout this course. One other way that we've made requests and it's very similar. Well, actually two more. It's very similar to what we've done. And it's kind of like cheating for me to say this because it's kind of the same thing, but it's very close. What are some other ways that we've made requests?

Well, the event listeners were tied to fetches, so that doesn't count. Refreshing, yes, refreshing is one. When we refresh, that's the same as typing in enter on a URL, right? When we refresh, that's still a new request to the server. So refreshing was one and there's one other one. Yeah, Kristen. I see you Kristen Lynn said links. Yes, when you click a link that takes you to a new page. Well, guess what? That's the same thing as typing in a URL and hitting enter All right, so we've seen all these different ways to make requests. We've typed in URLs. We've clicked links We have refreshed the page. We've filled out forms and we've sent fetches right all of those are requests that go to the server right they're all requests that leave our client-side device and go to the server now each of those requests are actually different kinds of requests because what What is handling the request and the response architecture? Is that something that we're writing from scratch on our own, like this request and response architecture? Like what's the underpinning of all of that?

Yeah, at the core, that is HTTPS. The Hypertext Transfer Protocol is like how the internet works. It's the system for us to make these requests and generate these responses. And HTTPS has like four major methods that really work across this system, right? There are get, post, put, and delete, right? That's kind of what HTTPS really understands, right? The get, the post, the post, and delete. But those aren't the like like the cool kids like the You know We're vibing We're feeling good With our friends. It's a Friday right That's what we're talking about right we're not talking about the nerd stuff we're chilling All right, so if we're chilling, we're not gonna say get post put delete. What are we gonna say? Yeah, yeah, yeah, yeah. Hold on, we're gonna bring it back. We're gonna say not get, but read. We're not gonna say post. We're gonna say create.

We're not gonna say put. We're gonna say update if you're real cool I mean real cool we don't say delete no we say We say, D-Lay-Tay, delete for short. And to... Please don't go around saying delete. It's not a thing. All right, so we have a nice little neat acronym for this reading, the creating, the updating, and deleting. And what do we call it? What do we call it? Yeah. We call it CRUD. We call it CRUD, right? It's just a way of keeping these ideas in our brains, right? When we submit a form, we're creating something, we're sending some data to the server. When we are trying to load a page, we're trying to read some data, we're trying to get some stuff back. When we're liking stuff and our likes go from 100 to 101, when we are trying to make incremental changes is the stuff that was already there we're updating.

And sometimes we wanna delete as well, right? And so these four actions, right? These four actions make up like 99% of what we're gonna do as full stack developers, right? We're gonna have to understand like how to control what we want to have happen when we're asking to create, read, update or delete. But it's really just doing these four things over and over and over again. And so if you can really master these four things, right? If you can really master these four things, you can build whatever the heck you want, right? And so that's why I get really hyped about this. Cause I don't know if you realize how close you are to being able to build whatever the heck you want to build. Right? From, we get through this class and next week and like you can build whatever the heck you want. Hey blah facts exactly right and so I want you to To hang on just a little bit if the back ends been a little difficult That's okay. If this cred stuff is taking a lot of clicks. That's okay, but you're close You're close to being able to build whatever the heck you want. Yes, it'll take time.

Yes, you have to Google stuff But at least understanding how it happens. You're there. So let's spend some time tonight talking about crud understanding the creating, the reading, the updating, and the deleting, and then put that into practice to build our own API. We're gonna get that hosted live online. And then when we come back next week, we fill in all these methods. We'll be able to create, read, update, and delete our brains off and be able to build whatever we want. Cool. Like a Star Trek API, hey, that was what you were working on the other day, right? I saw this for the alien one. Cool. Alrighty. So, let's talk in the context of Instagram. What up, Swole? Let's talk in the context of Instagram, right? When we go to Instagram, and we're trying to do this creating, remember we said there's really only four things that we're doing, creating, reading, updating, and deleting.

When we come to do this creating, what's the way that we create on Instagram? Like how do we make a create request on Instagram? Yeah, when we make a new post. So let's talk about it. So we're on Instagram, we're chilling, right? And we go to make a new post, and we fill in like the caption, and we upload the image, right? And we click the post or submit button. That request leaves our browser. All right, let's pretend we're on the desktop version. Leaves our browser, right? Is that why they call it a post? Yeah, yeah, right? It leaves the browser, and it's making a very specific kind of request. Since we submitted a form, when forms submit, traditionally they are what type of request? Yeah, they are a post request.

Remember, that's like the nerd HTTP way that we're talking about, like that's a post request. But what's the cool, relaxing, reviving way to talk about it? Yeah, we're creating, you see. Cool, so we created, awesome. And so on our server, right, on our server, there is some code that is running that hears this POST request, right? That hears this POST request. What is that code called that we have set up to hear this POST request? What is that code that's listening, that's hearing? What do we call that code? Yeah, we call that code our API. It is our backend, yes, that is our backend code, but specifically we're calling this our API. It's the code that's gonna be set up to hear that request. And it says, oh, you made a POST request. This was the name of the form, which was like new, right? That was like the name of the form.

So you made a POST request. It came from the new form, which is like your new POST, like this form over here, this form over here, had the action of new. Right, remember when we submit, when we actually submit our forms, we're eventually gonna see that the way we tie forms to the API, so we know which form was submitted, is that every form has an action, and we could differentiate from all these forms based on their action. We haven't seen that too much yet, but we will see that in just a little bit. So, we're able to hear, all right, All right, we made a POST request. Our API is set up to hear that specific POST request, right? But to hear that specific POST request, and then it just says, all right, in the code, it says, all right, here's what we wanna do. Well, first thing we wanna do is we wanna get all that data, all that data from the request. So we'll go to the request, we'll look at the request body, and we're able to get all the data that was sent along with this request. So we're able to see the caption, we're able to see the photo, we're able to see all this stuff that was sent over with that request. And once we have all that data, what are we gonna do with it? Are we gonna like, copy it and throw it away? What are we gonna do with all that data? Yeah, we're probably gonna want to store it somewhere. And so we might use another computer called a database, right?

Like we're using Mongo Atlas, which we're gonna see in a little bit. So we're using somebody else's computer to store our database on. So it's like a whole nother computer we're talking to. And so we got all of our data from this form. And the next thing we might do is like, Take this data and store it in our database. Take all this data and store it in our database. And then once we're done, once we're done, the last thing we might do is say, all right, we stored all of our data. Let's respond, let's respond, and let the browser know that everything went okay. When responding to say, hey, everything went okay. And once the browser hears that everything went okay, the old school way of doing the next step would be to do what? We just, we made the POST request, our API heard the POST request, it grabbed the data from that request, it put it into the database, and then it responded saying everything went okay. Yeah, the old school way would be that we just refresh the page. And once we refresh the page, that refreshing the page triggers a what? Just refreshing the page triggers a what? It's a GET request.

A lot of folks get confused here, and they think this is an update or a put. No, it's not. That refresh is always a get request. So that get request, which if we're, if we're, you know, vibing, we're not gonna call that a get request. We're gonna call that. Oh. Hey, does this work? It does. We're gonna call that a read request, right? We're gonna call that a read request. And we're actually gonna do some reading. That's what we're gonna do, right? So that get request makes it all the way to the server. The code that's running on our server that hears that request, we're gonna call our what? Our API, yep.

So we have some code on our API that's set up to hear that request. And here's a get request. And here's a get request like on the main post page or whatever, right? On the main page, we'll just say main page, not to confuse folks. So we hear a get request for that main page that just refreshed, right? That page just refreshed. There's a partner API that's set up to hear that request. and when it hears that request, right, when it hears that request, it's gonna do some stuff. Well, it heard the request, so what it's going to do first is we wanna get the data that we need for the page that just refreshed. So maybe the first thing we might do would be like go to our database and get the data. Once we have that data, we might like plug that data into a template and that template might spit out some what? What might that template spit out for us? Because we eventually want to do one last thing. Like they refresh the page. We definitely want to send them what?

We want to send them what? We want to send them some HTML, right? So that might spit out some HTML, right? We can think that when we hear a get request for a page on Instagram, right? We hear a get request, we're gonna like try and give them all the data they need for that page. But Instagram's not like storing post HTML for each of us. They just have like a template and they like plug your username in, they plug your photo in, they plug your comments, and they plug your caption in. And so what we're gonna do is we're gonna get that data from the database, we're gonna plug it into a template, and that template's gonna spit out HTML. And once we have that HTML, we're gonna respond with the HTML. And the cool thing is, the cool thing is, because on the last request, we created some data, this HTML now has more stuff to show. So it wasn't the post that showed stuff to the user. The post request actually gave us the data that we put into our database, right? And it wasn't until the page refreshed and we made a new request that we got that data, to put it into some HTML and respond it. Right? And so it's not really important to understand, all right, well, how am I getting this data?

How am I putting it into the database? How am I generating HTML? We're gonna get to all of that. What I want you to understand tonight is that, oh, when I make requests, there are all these steps that are happening behind the scenes. And as a back-end engineer, our job is to write out those checklists, the things that we want to have happen when we hear those requests, right? There's a ton happening that quickly. There is exactly, right? So as a back-end engineer, you would focus a lot on this every day. Where you're like, all right, I heard this kind of request. What do we want to do when we hear that request? Do we want to get some data from a database? Do we want to like generate some HTML? Do we need to like go get images from a different server? Like what do we need to, what do we need to do, right? And then we package that all up and we respond, right?

And so over the next week and the next couple of weeks, we'll see all these things in motion, but for right now, I need you to understand like, oh, there are requests being made, the backend API is hearing those requests and doing stuff. Cool. Cool. So, we've seen get and post so far. What's something that we could do? So, like, we just rendered our page, right? Now our page has, like, a lovely photo. It has a caption. It has a number of likes. 1000, right? What could we do? Like what's another type of request that we can make? Yeah, we can make an update request, right? What would trigger an update request based on Instagram. Yeah, liking, right?

Liking would trigger an update. Liking would trigger an update. If you wanna see an update in real time, you ready? If you're on YouTube, go ahead and smash the like button and you will see a put request in real time. Go ahead, smash the like button if you're on YouTube. If you haven't, you wouldn't, oh, it was too fast. Go ahead and smash the subscribe button, right? You'll see an update in real time. You're going to see some things change, some things update. So go ahead and try it. I'll give you a second. Oh, you were able to do it. Nice. Cool, cool, cool. All right.

So if we were on Instagram, if we were on Instagram, right? If we were on Instagram and we like tap the photo, that would be a like and that like is a put request or an update request right so we have our lovely photo the caption the number of likes and we we like the photo we tap it that is a put request right but that's the nerdy HTMLE, ugh, if we're vibing, how to put, so what, an update, nice, update, want an update, We're gonna call it an update pool. And that update, that update, or that put request is gonna be heard by our server. There's some code running on our server that hears that request. What is the code that's running on our server that hears that request? What is the code that's running on our server that hears that request? What is the code running on a server that hears that request? What is the code running on a server that hears that request? What is the code running on a server that hears that request? What is the code running on a server that hears that request? Hey, does this work nice? API API is the code running on our server that hears this request. And so we have something like app dot put And we're just gonna say like on the the like route or whatever All right, and when it hears that put request Right when it hears that put request It has a list of things that it's coded to do and what it might do is might say. All right One Let's look at all the data that came with that request. Let's look at the data.

Let's look at the rec.body and see the data that came through. Oh, I see that we have the number of likes. And if we have the number of likes, maybe we should update that by one. So what we're gonna do is we're gonna go to the database we're gonna find that post, and then once we find the post, we're gonna increase the likes from 1,000 to 1,001. And once we have updated the likes in the database from 1,000 to 1,001, well, the last thing we're gonna do is we're gonna respond saying that everything went okay. okay boom we're gonna respond saying everything went okay and in the really old-school way once the server heard sorry once the client heard right once the client heard that everything went okay what's it gonna do you're gonna call refresh exactly refresh refresh it's gonna refresh the page and when we refresh the page this time, right? When we refresh the page this time, we're gonna make another what? Another get, another get. And the cool thing about this get is our server was already set up to hear it, right? That get request is already in our API. There is already this app.get. And it already knew to, it already knew to go to the database, find all the data, plug the data into our template, spit out some HTML, and then respond with that HTML. Like we already had that coded, that request comes all the way back with that new HTML, but there's something really cool about this HTML. Before, right, before the number of likes was at 1,000, but now it's at 1,001, right? Because we had just on the previous request, we had made a put that changed it from 1,000 to 1,001.

So like I said, it doesn't matter, right? It doesn't matter how this is going to happen. it's more important that you understand that like these steps are happening, right? Like, oh, when we refresh the page, that's always a get request. And there's some code running on our server that hears that request and does a checklist of stuff that we've already coded. Like the backend engineer has already coded that list of stuff we want to have happen. And it's either gonna like respond with like HTML or respond that things are going okay, right? Like, and this listening and responding is the beauty of building the backend, right? And we're seeing that we're using all of these HTTP methods and we're doing a lot of stuff that's like talking to databases, all that fun stuff. And like, that could be a lot. Like we saw, we built servers from scratch with the HTTP module. We built it from scratch with the FS module. That stuff was rough, but we don't need to do that anymore because we have what? Yeah, we got Express now. And Express is really kind of handling a lot of this stuff for us, right?

This Express is like handling, all right, we don't have to like use the HTTP module anymore. We just say like app.get, app.post, app.put, and boom, that's it, we're good, right? So Express is gonna be handling a lot of this heavy lifting for us. Cool, there's one other request that we haven't talked about yet. What's the last request? Delay Tay, right? Delay Tay, right? Delay Tay. We haven't delayed yet. And so if you want to delay Tay, let's, uh, let's think about an Instagram. Um, how do we delay Tay and Instagram? What's, what's, what's the way we would do it? Yeah. We can just like delete the post, right? Like if it's our posts, there's like that little trash can, right.

And if we were to click that trash can, uh, we could have it set up so that we make a request. Right. And the funny thing is like this request like the liking and the deleting those requests are being made by what this is a really Hard question if you've never done this before it's actually a really tricky question What's what's the only thing that could hear the clicking of the trash can and the clicking of like the liking of the post? What's the only thing that could hear those clicks? Can the server hear that click? No, it's only the client-side, the client-side JavaScript that's running in the browser that can hear that click because of the event listeners. The Smurfs, you haven't thought of the Smurfs. You forgot about the Smurfs, right? There's client-side JavaScript and there's server-side JavaScript. The Smurfs are holed up on the client-side. I can't believe you forgot about the Smurfs. the Smurfs are what hear the clicks. Even though we sent the code from the server, that JavaScript that's running in the client is what hears the clicks, right? And so those clicks, the delete clicks, the like clicks, they're being heard by the Smurfs in our client side JavaScript, our event listeners, right? And when we hear those clicks on the client side, What's the only thing we've ever used client-side JavaScript that makes requests to a server?

What's the only thing that we've ever done? No new friends. What's the only thing we've ever done? Fetch. So we know probably, well, in our client-side JavaScript, there's some code that can make a put fetch and that can make a delete fetch, which is pretty cool. Fetches can do any method you want. And so we can make them make puts. We can also make them do deletes right and so when we click this trash can What's actually happening? What's actually happening is that client-side JavaScript, here's the click and it makes a delete fetch that delete request leaves the client and Makes it all the way to the server Alright, leaves the client, makes it all the way to the server, it is a delete request, or if we're cool, you know, vibing, hanging out, relaxing, all cool, shooting some b-ball outside of school, with a couple of friends, you're up to no good, started making trouble my neighborhood got in one little fight my mom got scared she said you're moving with your auntie and uncle in bel-air those are the days right the days the days when we would have a nice tall drink in the sunshine, and we would delete, right? Go delete, delete. All right, so we delete, right? We delete, and the server is set up to hear, right? Set up to hear that request, right? So that they hear that request, what is the code running on our server that hears that request? What is the code?

What is the code running on our server that hears that request? What is the code? What is what is what is the code running on a server that hears that request? What is the code? What is the code? What is the code? What is the code? What is the code? What is the code? What is the code? What is the code? What is the code running on a server that hears that request? Yeah Hey Api it's the api Beautiful Oh, it's the API. It's the code running on the server. It's the code running on the server that can hear the requests.

We have an app. We're almost gonna take our break, one second. The app is set up to hear the delete requests and it's gonna do a checklist of stuff. It's gonna say, all right, what type of stuff are you gonna delete? So it's looking at the request. What do you want to delete? It's gonna look at that request by like, what are you trying to delete? And it's gonna go to the database. And it's gonna actually like delete that stuff from the database. And then once it's done deleting that stuff from the database, it's gonna respond saying that everything went okay. Right, it went okay. What up, Alex? And once it hears that it is okay, what does it do? What does the client side do? It hears that it's okay.

Hey, what does the client side do? It refresh, it refreshes. It refreshes, and when it refreshes, it makes the get. The server has the API that's set up to hear the get. When it hears the get, which has already been coded, the get, you know, goes to the database to find all the data. It takes all that data and puts it into an HTML file. and then it responds with that HTML file. There's something cool about the file that gets sent back. What's different now about the file that gets sent back? What is different? Don't say updated. You can't say updated. That's a different word. The data we want is no longer there. The old data has been deleted, right?

The old data from the last request. Last request deleted data. Didn't update anything. It literally deleted stuff, right? It needed it. It's gone. Be gone, right? Gone, gone, gone, deleted, right? And so when we go to reload this page, it's missing that data, right? It's missing that data. Cool, so we saw our gets, our posts, our puts, our deletes. We saw how the different creates, the reads, the updates and deletes can work. And it's just important to understand that, oh, when we're using the internet, we're making requests and we're getting responses. So let's go ahead and take our break. When we come, right, when we come back from break, We're going to start building our API from scratch.

We're going to go from zero to hero. We're going to have a fully working API by the end, and we're going to have it on Roku. All right, folks, let's go ahead and take our break. Put five minutes on the clock. All right, folks, let's get back into this. All right, so we just talked through kind of the Instagram. We talked about the creating, the reading, the updating, the delay-taying, all right? And I promised that since we were talking about Instagram, if you followed me on Instagram, I'm gonna pick a few folks next week. We're gonna do five where we're gonna set up a coffee chat and I'll review your professional stuff. I did a few of them this week already. And like I said, I took a break from them, but it was a lot of fun. I met a couple of cool folks, a lot of really cool folks this week as I started doing some of these. So if you want to do a coffee chat professional review if you follow me on Instagram I'll be picking five folks next week and we'll be doing that which I think was a lot of fun So I'm gonna start picking it back up again So I'll probably do like five a week or so going forward where we just do a coffee chat and I'll look at a professional stuff So I will just I will just message them on Instagram Yeah, and then I'll probably post the the winners in discord as well. Just so if they don't check their messages, they know All right, so tonight we wanna actually build, right? We wanna build an app with Express, right?

So we started this last time and we want to run that back, build it all from scratch, ask a ton of questions. We still got two hours left, so it'll probably take like an hour or so to build it out and then we'll play with it, we'll get it on Heroku for like the last hour. Cool. All right. So when we started talking about Express, we were like, all right, we want to use Express. Of course we go to the website and we look at Express and we see a fast, unopinionated, minimalist web framework with a, I can't even get it out of my mouth. Oh my gosh. With a myriad of HTTP utility methods and middleware at your disposal, creating a robust API that is quick and easy. Right? So what the heck is going on? What the heck is going on the disrespect the the the big words that I'm going to treat as disrespect What the heck does this mean Fast we kind of get it. It's it's supposed to be fast, right? Like the idea that we are using node and so we're using c and c plus plus equivalents, or we are using the C++ underpinnings, so that makes it fast, all right? Unopinionated, what the heck does unopinionated mean? What does it mean to say that Express is unopinionated?

Yeah, Express kind of just doesn't care What you bring with it, right? It doesn't bring it doesn't matter what you bring It doesn't matter what tools you use along with it It doesn't have like a specific way that you have to use it You can kind of bring any tools or eventually middleware or anything stuff you want to bring along with it It just doesn't care it does one thing and one thing really well And that's the minimalist part right the minimalist part is that it does this second sentence and really only the second sentence and it does it really well. So it's fast, doesn't care what else you bring to the table, and it really is just minimal and does one thing and one thing really well. And that's that it gives us a myriad or a lot, a lot of HTTP utility methods. What do you think that means? HTTP utility methods, what the heck does that mean? HTTP utility methods. Yeah, it gives us a lot of like functions or tools that we can use that helps us build out our API, right? That enable us to use HTTP to hear those requests and generate those responses. What we're gonna see is that we just kind of like say, all right, listen and send this file, send JSON, right? And it's just very clear, like it's very easy to read, it's easy to see, and it's doing all the heavy lifting for us because it gives us all these methods that we can use to kind of do what we want to do almost in like plain English, right? When we want to send a file, we just say send file. When we want to use JSON, we just say JSON. And so all that stuff is coming from Express. And it gives us a bunch of middleware.

What do I mean by middleware? Yeah, I like to use the definition that gets the nerds a quake in but to me middleware is like anything between the request and the response right anything that helps us in between the request and the response we're going to consider middleware and then it just enables us to create robust apis quick and easy so we're going to see today that we can actually build our apis pretty quickly using express that should be pretty straightforward a little bit easy and then eventually over the next class right next few classes, we'll see more and more things. What would an opinionated web framework look like? So there are some that are built into, that use Node. Adonis is a really popular one that comes with all this stuff and all these ways that you have to do things if you want to use their web framework. If you've ever heard of Ruby on Rails, Rails would be more of an opinionated framework where there's a way to do it. There's a lot more magic underneath the hood that's handling a lot of stuff for you. Yeah. Meteor is the old school one. Yeah, yeah. So there are these frameworks that kind of like tell you how to do everything that's maybe not just the API. Sometimes they'll help you handle like emailing and login and all this other stuff that'll help handle. That's just not the API. Express is just focused on the API and not all this other extra stuff that needs to happen for a web application to run. Yeah.

Why would you choose an opinionated versus an unopinionated? Well, when you use an opinionated framework, you're bought into their system, their way of doing things. The cool thing about Express is it just handles your API and you can use whatever the heck else you want. That's it. And so some folks like to start with Express because it kind of gets out of your way and you can pull in all the pieces that you want. That means you get to pull in the pieces that you think are best, right? As opposed to being stuck with something that comes with that more opinionated framework, yeah. Now, some people like opinionated frameworks because maybe you don't have to think about those things. If it's a good framework, maybe you don't have to think about all these other little things you might have to think about when you're using Express. So we learn Express because it's fast, it's easy to build out the API, it's very popular in the Node world. Honestly, in Node, there's really hasn't been like one like really opinionated framework that's dominated kind of like the way that Rails dominated Ruby. There's always, of course, all these other ones that are out there. They're definitely opinionated frameworks, but there really hasn't one that has ruled them all, you know? And so I think that's actually something pretty cool, specifically when you're learning how to build full-step web applications for the first time, there's a little bit less magic, meaning that you actually have to learn how to do all these different things, right? You actually have to learn how to do all these different things.

And that's really helpful as you're starting to build out a picture of what the backend really is. Cool. All right, so let's go ahead and build. Some key steps we wanna do before we start jumping into building, right? Before we start jumping into building is that we have some key steps I'm gonna talk about. So the first steps are setting up an actual project. So we're gonna need to create a folder for our project. We're going to need to like move into that folder and then we're going to need to set up our npm init. When we do our npm init, what do we get? Like what happens? What happens? I don't think you should code along with this. I think you should kind of pay attention and ask questions. But if you feel like you caught the gist of it last class, then maybe this class you could code along. It's up to you and where you feel you're at right now.

If you feel like you just need to absorb, that's okay. If you feel like you might be able to type along, go for it. Yeah, it gives us our package.json and helps set up the project. The package.json is gonna have everything that we need to kind of start the project, and it's where all of our dependencies can be listed as well. Cool, and then since we're using Express, we're gonna go ahead and install and save our Express, which will make sure that it shows up in our package.json. Cool After you set up the project, there's really kind of a couple of key things we want to do you want to be able to send the files and The cool thing about Express is that we always have this kind of lovely little callback That has a request and a response parameter and then we kind of just say in plain English We want to have happen we want to send a file So we'll send a file if we want to send some JSON we'll just say JSON. And so the cool thing about Express is that it really does make it a little bit easy to start doing the things that we want to do. So those are the big things. And then eventually we'll talk about pushing to Heroku at the end. And let's jump into it. Let's build out our API. The API that we built last time was a wrap names API. And just to help it kind of sink a little bit more, we're gonna do the same API again. But if we have time, and we can talk about how to modify it so you can build your own API. And in fact, that's your homework for this weekend.

Your homework is to build out your own API that does what you want it to do using the code that we developed today. Cool. All right. So let's go ahead and open up my VS code. I just have a class 39 folder in it that has some stuff already in there. but what I'm going to do is just. Make everything from scratch. I'm going to open up my terminal. On Mac, opening my terminal is just control shift and then tick like where the tilde is and that brings up my terminal here in VS code. And so I'm in class 39 materials. So do a quick LS to make sure that I'm in the right spot. Yep, I can see all those other folders that are listed here. I'm going to go ahead and make a folder for my wrap API. I'm gonna do make dir and I'm just gonna call it wrap. I'm gonna call it wrap names API.

Cool. And I think one of the most common mistakes is people always forget to do what? Like we create the folder and then what do people forget to do a lot of times? Yep, they forget to CD into it. So let's make sure we CD into that folder, wrap names. And one thing that you'll see me doing a lot is instead of typing it all out, what will I do? Yeah, I'll just hit tab and tabbing will auto-complete it for me, right? That way I know I'm typing in the right path. I'm not introducing any mistakes or anything weird. And now you can see that I am inside that folder, so I'm doing good. All right, now that I'm inside my folder, I do know I want to go ahead and do that lovely npm init that we talked about, since I'm gonna be starting a new project. So npm init is gonna ask me some questions. I'm just gonna hit enter through all these questions. Yes, yes, yes, yes, yes, yes, yes, yes, yes, yes, whatever. Yes, I can always go back and fix these, but when I go through them, sometimes I like to type them out when I do it, so I don't use like the special flags or whatever, but I typed it, I just hit enter for all of these, and we can see that we have this lovely package.json that has been created for us, cool.

When you're creating file names, yeah, that's a really good thing to keep in mind. I don't ever use capital letters in any of my file names or folder names, and I don't ever use spaces in any of my folders or file names because it always gets me in trouble when I start putting my stuff on servers, right? So you'll notice I'll never use capital letters and I'll never use spaces. What does init stand for? Initialize. Cool. So we're in the folder. We've done our npm init. We can see that we have our lovely package.json file. And the last big module that we need to start with that we're going to install is Express. So I'm going to do my npm install express, and I'm going to save it so that it shows up in my package.json. It's going to take its time to install it. And then we can also see that Express is now listed in our dependencies for this application. Miguel said, don't forget about the gitignore. Oh, that's a great idea.

let's do our gitignore right now so we don't forget about it later on, right? So we have a lovely, lovely gitignore, right? And inside of our gitignore, we want to put our node modules folder. And so we're just gonna go ahead and create the gitignore file. And it's just a regular file. So how do I create regular files? Yeah, touch. So I'm gonna do touch. I'm gonna call it get ignore with the dot in front of it. And you'll see that I've created the get ignore file and that get ignore file, if we open it, I'm just gonna put my node modules in there. So I just saved that and my gitignore now has this node modules and you'll notice the node modules when I installed express Look at all this stuff. That's there Look at all this stuff just from installing express all this stuff All this stuff that we knew that it came with right like all these methods like all these utility methods All this stuff that it comes with and all the stuff that we're going to need for our kind of simple node project So this node modules is actually pretty big and we don't wanna be pushing all that stuff up to GitHub. We don't want to be sharing all that with folks. And so we put the node modules folder in our gitignore, right, in our gitignore. And the reason why we put it in our gitignore is just so we don't have to deal with it when we push up to GitHub or push our code to Heroku, right?

And so I think last time we forgot to do that and we had like this really, we had like a big push. It went fast, but it was still a big push. Cool, so I have my package .json, I have my gitignore, I have everything kind of set up. If you have no idea what these things are, you might not have done the what? The homework? The reading? You didn't do it? Can you do the reading, please? Can you just do it? Make our lives easier for both you and me. Just do the homework. Do the reading. That's all. Please? Okay.

Okay. Fine, I'll do it. You're making me sad over here cause you're not doing the reading. All right. So we have our basic setup here. We have our lovely package.json. We have our gitignore. We have all this basic stuff and we're just gonna go ahead and start creating our actual files. So I think the only really big thing that we need here now is our server.js. So I'm going to create my file, touch server.js. And great, now we have a server.js file, which will be like the core of our application. Yeah, some folks that are in Windows, you should be using bash to do all these commands. The commands are different. Like if you're using the command prompt, the commands are different. In VS Code, you should be able to switch to Git Bash if you have it installed by clicking like right here.

Like right here, you should be able to click, you should be able to change your terminal to Git Bash, right? If you haven't installed WSL, you can still use Git Bash. And if for some reason it's still not working, I think I saw Mime Wolf say it, and it's true. You can just do, create the files directly here in VS Code. So just do File, New. All right, so we have our server.js file, which is blank. And since we are building out our API using Express, what do we need? Like muggles, no thanks. I have Z shell. Yeah, you have Z shell if you have like a newer Mac. I'm on an older Mac, so I don't have Z shell by default. Yeah, if I'm gonna use Express, I need Express. So we're gonna go ahead and do const express equals, and we're gonna go ahead and require it, and we're gonna require express. Now, express comes with all of these methods that we wanna be able to use. And so instead of having to like constantly use express and type it out and then like invoke it and then call the methods that are on it, very common you're just gonna see const app equals express like this.

And so now app can just use all the methods that came with Express. So you're gonna see this very, very common to kind of just require Express and then to set up apps so that you can just like use the things that you absolutely care about when it comes to Express. And so I think the very first thing I wanna do to make sure that my like application is working is I just wanna serve up a file. That's it. I just wanna serve up a file and make sure that this is all working. So this is a boilerplate? Yeah, you could think of this as a boilerplate, yeah. Cool. So let's go ahead and just start with the basics. I know that I'm going to want to serve up a file when they go to the main page. So I'm going to do, if they were to just go to my main page, like if they were to go to my main server, like the main page of my server, they were to go to that URL, which would be like my local host URL. If they would go there, what type of request would that be? What type of request would that be? If they just went to like my main URL, the request would be a git. So we're going to do app.git.

And so we see that the git is a method that comes with Express and we can plug stuff into this get. So I'm just going to start off with it being the main route. The main route is always forward slash, right? Main route is always forward slash. And then we're going to have this lovely callback that you're going to see all the time. You're going to see this over and over again, where it's going to have the request and the response. Now, a lot of times you're going to see rec and res, like REQ, RES, but just know that it's request and response. When I first start out, I like to have the full words there just because I think it's a little bit easier for new folks to read, but no, you're most always gonna see REC and RES. You can actually call them whatever the heck you want, but I highly recommend that you don't change them. There's a lot of middleware kind of expects it and you can get into some weird situations. So I'm gonna use request and response in here. I'm gonna break this. And so now it's kind of just like a what. This is very, very similar to our what. We've seen this pattern a bajillion times What is this very much like?

And I mean it is a function but it's technically a technically a method but we've seen this pattern over and over and over again Yeah Afro cardio said it is an event listener. It looks exactly like an event listener It looks exactly like an event listener. And so it's gonna be the same thing, but instead of this being a click, instead of it being a click, it is a network request. So instead of it being a click, it's a network request. And so when it hears this network request, it fires this function. Just like when you clicked on something, it fired a function. This is the same exact thing. If you know what an event listener is, if you've made a click event in the past, you know how to build the backend. Because whatever we put inside of here is completely in our control. Right? Now it's up to us. Just like when it was up to us what we put in our click event, it's up to us what we put inside of this callback here. We can make it do whatever we want. We can make it console log. We can make it send files.

We can make it do whatever the heck we want, right? And so we get to put what goes inside this callback. Cool. So what do we want to do? When somebody goes to the main page, we want to serve up some HTML. So we're going to say, let's respond or response. Like that's the, that's our parameter. We're gonna response and our response is gonna be to send It's gonna be to send a file Cool send file Now what file do we want to send? We want to send an index that h2. We want to sound like an HTML file Doesn't have to be index that each don't give you any really the heck we want But it's pretty common that if they're going to the main page that we send them an index dot HTML So we're gonna send them an index However, our server won't know where to go and get this HTML file. Like it won't know where to go get index.html, so we have to tell it where to go look for this file. And so you're gonna commonly see something that looks like this. Underscore underscore dirname plus the index.html. And so what's gonna happen is that now the server knows to look in its direct, like the current directory for that file. So all that's saying is like, hey, wherever you're running, server.js, wherever you're running, just start looking from there.

And if you start looking from there, you'll find this lovely index.html file, right? Just telling it where to start looking, right? And so this is just something that like, This is just the syntax that they decided to use, right? It's not something that like is a big decision. It's just something they chose to use. And so now this is going to look in this main directory for the index.html. However, we're gonna run into one big problem. So is dirname the root? Exactly, Chow. What's the problem? We don't have it. There's no index.html here, right? we don't have this file. So let's go ahead and get that file. Index.html.

Beautiful. Let's real quick, in this index.html, set it up. HTML, let's use Emmet to kind of do all the heavy lifting for us. And let's just put an H1 in here that says, wrap names API. Cool. So now we know that it can at least serve up this file that says wrap names API. And we know that eventually we're going to build an API. So let's get them a little bit more information. Let's say, let's do like a paragraph and say, please use local post 8,700. swoop 8,000 slash API slash. And we can say, insert, let's just do, let's say like wrapper name. There you go. Please use those wrapper name. There you go. Just so they know like that's the route to use, cool.

Just so that they, if they come to our server, They know how to get the data back that will eventually build so we've got a simple HTML file Our server set up to serve that file. There's one last thing that our servers not set up to do yet What's our server not set up to do yet? Yes, let's set up to listen yet Servers are make, you know, some of the best partners because all they do is listen All right, so app.listen, and the same pattern that we always, always, always see, we're we're gonna tell it where to listen, and then we're going to tell it what to do. So like once it's heard, what are we gonna do? We're just gonna say console log, and we can put something in here. Like we can list like console log once we've heard something and so we have to tell it where to listen though. And so often you can just put 8,000 in here if you wanted to, like you could just plug 8,000 in, but often you're gonna see that we use a variable here instead. So I'm going to use port and I'm going to do const port equals and I'm just going to set it equal to 8,000. And so now I'm just using port down here and when we hear the console log let's actually change these to ticks. We can use template strings and you say the server is now running on port. We can and plug in our port, and we'll just say port in here. Better go catch it. Cool. All right, I saved my file, that's important. We forgot to save the other day.

So now I know that I'm using Express. I set up my port as a variable, which would be helpful later on. We set up so that if it is listening and it hears this get request, it's gonna send the HTML file and we set it up to listen on this port and when it hears the, once the server's running, it should console log this lovely sentence here. Anthony, hey, thank you for the raid. Appreciate it, hope you're doing well. Welcome raiders. We are building out a simple API using Express. I hope you all had fun over in their stream. What are we all doing? What are we all working on? Welcome. Appreciate it. Anthony, thank you for the support on Discord. Love having you part of the 100 Devs community. Hope your stream went well.

Thank you for stopping by. Yeah, hold on, we need to give them a shout out. Let's see if I can do this. I'm just going to do, I think it's just easier if I type it out. Boom. There we go. I'll probably repaste it a few times. Let's see. Hold on. It's correct. Hey, there we go. All right. I was able to check and see that they were hosted. All right. There we go, boom, boom, boom, boom.

We're giving them a follow. Yeah, go ahead and give them a follow. They've been really helpful in our Discord. I appreciate it. Thank you for swinging by. Hope your stream went well. Cool. So we are in our, in a right now building a simple API. And we went ahead, we saved our file. We have our get request set up. We have our listen set up. How do we get this to run? How do we get this to run? Somebody follows AA, you deserve it, thank you. Yeah, just node server.js, all right, let's try it.

Node server.js, enter. All right, I see that my server is running. The server is now running on port 8000, better go catch it. I can see that I don't have my REPL back. So I know that it's still running cause I can't actually do my next command. And let's go to localhost 8,000 and see what we got. Cool. Localhost 8,000, wrap names API. Please use localhost 8,000 slash wrap slash wrapper name. So it's telling us like what we need to do if they want to actually consume the API. Now we served up this HTML file. I think our end goal is to just be an API. What do I mean by that? I think our end goal should just be to be an API. Like I'm not trying to build the full app.

I just want to build the API that anyone can consume, right? So I'm not going to build HTML or client side JavaScript that'll make requests to the API. that'll be on them to do. So I'm just setting up the API, just like the Pokemon API, just like all that stuff. So I don't want to actually be able to consume my API. I just want to be able to respond. I just want to be able to respond with JSON. And so I think that's something we got a little confused with last class is that we can have client side code that's making requests to a server, but we could have also set up our server to not only send JSON, but we could also set it up to make requests to our own API. And so we're going to keep those separate for now. The only point of this program tonight is to respond with some JSON. Yeah. So right now we're serving up an HTML file. This will be the only, this is the only file that we're going to serve up. We're only going to serve up HTML. We're not going to serve up client-side JavaScript.

We're not going to serve up CSS. The only thing that this application is going to do, right? The only thing this application is going to do is send JSON. Why do we need HTML then if it's a server-side API? I just want them to know what to do, right? Have you ever tried to use an API and they don't give you any documentation? How shitty is that right you're like tried to use an API and they don't give you any? Documentation like how how frustrating was that when you were all trying to do your API a couple classes ago Right, so we're gonna serve up at least one HTML file that explains how to use the API that we're creating All right So we're gonna at least serve up one HTML file because we don't wanna become the demons that gave us frustration when we were doing our API work. We're gonna learn from that pain, that struggle and make it better for the folks that come after us. All right, so we're serving up one HTML file which will be our documentation. Everything else we wanna serve up will be just straight up JSON. So let's go ahead and create another route, another get, because they're gonna make a get request for this information. And what's the route that we said that we were gonna use in our documentation? What's the route that we said that they should, if they wanna ping our server, what's the route that we're gonna use? Yeah, we just said API.

So we'll just do API. And if they ping slash API, This is what we're going to do. This is what we're going to do. Remember, I always just type this out, request, response, just get used to it. Same thing as a click event, right? It's the same thing as a click event. Particus017, thank you for the hydration. Cheers to you. Went for a stronger tea today. I'm doing the Tazo awake English breakfast with a splash of full fat Oatly. Thank you. I appreciate the mug compliments. All right. All right, so now we're saying, all right, if they make a request to API, here's what I wanna do. I just wanna respond with some what?

What I wanna respond with. Oatly, more like Goatly. Ah, I see you, Ji-Ming. JSON, so we'll say response.json. JSON de Rulo, where you at? We're gonna start with some JSON and let's just respond with like a simple JSON object. So just to make my life easy, I'm just gonna create a simple object here. Let's just make this 21 savage at first. So I'm just going to say const savage equals, and we're just going to put 21 savages info in here. So let's go ahead and do, let's do birth name. Let's do birth location. in and let's just do that for now. I think we had age last time too. We can do age, cool. All right, and I think 21 Savage was 29.

Their birth name, let's grab it real quick from Wikipedia. There we go. Beautiful. And their birth location was London, England. Are y'all good at geography? I'm a beast at geography. One of these days we have to do like, during like office hours, we'll do like a, we'll do, you ever play like where you click on the maps? I can do all the maps. I know where every country is. I know where every state is. I'm pretty good at it. We can do it together. And if I get stuck on one, chat can help. Maybe we'll do that as for fun one day. We need to do like a fun stream one of these days.

What do we do for fun? We play geography games. All right, we got our savage code here. We have an age, we have a birth name, we have a birth location. Cool. And all I want to do here is just respond with Savage. So if they make a request to API, right? If we make a request to this route, we're gonna respond with Savage. And Savage is just an object. So we're gonna respond, right? We're gonna respond with object. That object. So let's see if this works. We should be able to just test it right in the browser But what do I need to do before I go test it? What do I need to do before I go test it?

I need to restart my server. So let's stop and restart my server to stop my server. I'm just gonna do ctrl C When I do control C, that'll stop the server. And then I can just do up arrow to bring Node.js back up and hit enter. And now the server is running again. And let's go back to localhost 8,000 and let's try the API routes. We'll do slash API and cool. We got the Savage information back. Now I don't like to do it just straight in the browser here because we'll run into more complicated stuff that we build and this won't work always. So I like to use Postman to do this. And the cool thing about Postman is if you install the desktop agent, even servers that are running locally on your machine, you can make requests to, right? So you can see that I'm running the desktop agent. You can see down here that it's green. So I can do local host 8,000. And if I just did local host 8,000, it'll show me what I get back, which is the HTML.

And I can see the HTML that I get back from just the main route. And if I do slash API, that should also work. Let's try it. And we're getting that Savage data back. Cool. First try Yeah, I've tried a bunch of the other ones I just like postman I'm used to it Api's are cool. This is like magic. I think so, too. This to me is like the coolest shit ever like this this to me like like the idea that I can build my Like, anything that I have an interest in, I could build out an API that folks anywhere in the world could like consume and like use, and we're gonna put it on Heroku tonight so that anyone in the world can use it. Like, that's like the, like, what? Like, that's amazing. Right? And so all we've done is we've just used Express to set up two requests. We have a get request for the main page, right? And we have a get request that say, if they type in something slightly different, they just type in slash API.

Well, then we're just going to respond with JSON. And it's so wild to me that we can just say like, response, send file, response, JSON. Like we don't have to do anything fancier than that. If we want to send a file, we do send file. We want to send some JSON, we just say JSON. We don't have to understand what's happening underneath the hood. We don't have to know like the nitty gritty of like HTTP and how it's making requests and generating responses thanks to the wonderful world of Express, right? And so there's a lot of stuff here, right? And next week we're gonna start adding more. So next week we'll be doing the updates and the deletes and the posts. So it does get more complex, but it really is just easy to build our API using Express. Cool. Now we're learning Express, can we implement it into our group project? Always, always take the stuff that we're learning and put it into the projects, absolutely. So I need to download the desktop agent for this.

If you want to run localhost in Postman from your browser, you will need the agent, yes, because this browser won't have access to the servers running locally on your machine. Eventually once you put it on Heroku, you don't have to worry about this, but if you have it running locally, you'll need that desktop agent. All right. Alrighty, so we have our simple API set up, but I don't want it to just be 21 Savage. I want it to be a couple wrappers and So we'll do two wrappers and then just unknown. So instead of this being savage. I'm gonna call this wrappers and We'll put this first one here. We'll just say that of course, this is the young 21 Savage All right. We'll do 21 savage here and then let's go to tab this over and And this has to be an object, so we'll open it. And we'll close it. All right. We have our wrapper's object that opens and closes. And then we're going to have a property of 21 Savage that has a value of an object. And then we're going to do another one. Let's do chance the wrapper.

Please save the wrapper. Cool. And we're going to do the same thing. Age. Also 29, birth name, got my quotes. Birth name, Chance, Chancellor Bennett. Why is it Bennett, right? Bennett, I can't spell Bennett. Bennett, like that? I don't know, we'll look it up. Alright, let's look it up real quick. Chancellor Bennett, double E, double N, double T. That's actually pretty fire. All double letters. There we go.

Chancellor Bennett and birth name. I'm sorry, birth location. Cool. And I ain't going to spell it out. So I'm just going to copy it. I town, Illinois. Boom. There we go. So we got our 21 Savage. We got our chance to rapper and let's just do an unknown. So in case somebody types in something like they don't get something silly back, they actually get unknown. And we'll go ahead and do age. And since age might be expecting a number, we'll return just zero. We'll return zero. We'll return a birth name.

and that birth name will be unknown and the birth location will be unknown as well. Cool, so now we have 21 Savage, Chance the Rapper, unknown. What I wanna do is I just wanna return this. Let's just make sure that this works, right? Let's just make sure that this works. I just wanna be able to send this object as a JSON object. And so I'm just gonna pass in wrappers. Cool. Let's save this. It's saved. Let's restart our server. Leon, do you advocate NodeMod? No, get used to starting and stopping your servers before, right, before you start using tools to help you. Cool. So let's go and do nodeserver.js.

Server's now running. let's go back. Let's go to Nodemon and we should now get more info when we hit this endpoint. Cool. So we're getting 21 Savage, Chance the Rapper, Unknown back. It looks good. Natrana, go ahead and do exclamation point 100 devs and join the catch up crew on our Discord. That'll be a good place to start. All right, so we have all this new data that's coming our way. And what I eventually wanna be able to do is not return all the wrappers, right? Not return all the wrappers, but I wanna be able to return individual wrappers. Like I wanna be able to return individual wrappers, right? And so what am I gonna need from my user if I wanna use individual wrappers? Like what am I gonna need? Yeah, if I'm gonna return them data from an individual wrapper, well we're gonna need them to give me that wrapper and ideally as a query parameter.

So when we come back from our break, We're going to show how we can use query parameters so that our users could ask for a specific wrappers information and not just get this big old object coming back with all the information. So we'll take our break. We'll come back. We'll do that. We'll get this working and then we're going to get it on GitHub. So we'll see that again. And we're going to add it to Heroku. So we got a full hour left to just finish this out and then get it on GitHub and Heroku. So we'll take our a time through that, then we'll have an API that is live online that anyone can consume and you'll be able to do it too. All right, Mike Joel added two minutes to the timer. We're gonna take seven minutes for this break. If you are able, please get up, move around, hydrate. So we said before break, when we came back, we'll make it so that we're not just sending this massive chunk of data. We can actually send the data that they're asking for. So if they ask for 21 Savage, we can send that out.

If they ask for Chance the Rapper, we can send that out. And what we want to be able to do is be able to use query parameters. And so there's something really neat that when you're using Express, you can just do after the slash, colon, and then whatever you want to call your query parameter. So we're going to call this like, I'm just going to say name for now. Give you whatever you want. We could have called it Robot Unicorn. It just doesn't matter. And so I'm just gonna call it name because that's probably the easiest to read. And now I can do something really cool. I can do, let's just console log it for now, but I can do request.params .name. And so whenever a request comes in, if there is a bit of text after the slash, I'll be able to grab it with this line of code, this request params name. So actually let's just console log it at first. Console.log, right, console.log. Let's just save it. And we can even just do it in Postman.

I'm gonna restart my server. And we should see down here whatever name we request. So if we come back here and we do API slash robot unicorn, and we click send, you can see we're still getting that chunk of data back because we haven't changed it, but in our console log, we saw robot unicorn, right? So we said, all right. And if we change this name, we can change whatever we want to call this. We can call this LeChunk, right? So when you change this to LeChunk, and then the params name would have to be LeChunk. Cool. So if I save this, it should still work. Let's go ahead and just restart our server. Cool. I'm gonna come and do something here. I'm gonna say API slash Pokemon. Cool. We still get that big chunk of data.

We haven't told it not to send that big chunk of data, but we can see that Pokemon was console logged. So the parameter name that we put here after the colon and it doesn't matter what we call it. So it's just helpful to call it name for now. Cool, name, name. And we saw that in the URL, whatever we put here is what's coming across is that request.params.name. So whatever we put there, that's where we're yoinking it out of the URL. We're taking that string out of the URL and we're using it within our program. So now that I have the name, I can look for specific wrappers that have that name in our data up here. And so one thing that we're gonna run into pretty quickly, and what I'm gonna do is I'm just gonna put this into a variable. I'm gonna say let wrapper, wrapper name equal, and actually we're never gonna reassign this, so we just make this a const. We can say let const wrapper name equal request params name, we're going to notice something that we probably want to do right off the rip with the names that are coming through the URL that are coming off the query parameter. Something we might want to do. We want to make sure that everything is lower case, right? What if they, if they were to ask for chance the wrapper with the capital T, it wouldn't work. So what we're going to do is we're just gonna make all this stuff lowercase in our object up here.

Unknown's already lowercase. And then we're going to say whatever comes in, we're also going to make lowercase to lower case. Cool. So now we'll get the parameter off of the URL. We'll make sure that is lowercase. And now we know that we're only dealing with lowercase names. Cool. So now what I want to do is I just want to check to see if the name the user has given us when they're consuming our API actually exists in our big old object up here. And since we know that our object name, like our object properties have spaces in them, we can't really use dot notation. What do we have to use? Dot notation really doesn't play well with the spaces. We use brackets. Yeah, so we're going to do a nice little conditional down here And i'm just going to say if When I say if Rap, what was it called up here rappers? If rappers has rapper Name, so like if rapper name is a property of rappers so So wrapper name, what we're getting back from the URL, if that's a property of wrappers. So we can see 21 savage is a property of wrappers.

Chance the wrapper is a property of wrappers and unknown is a property of wrappers. So what I'm gonna check here is I'm gonna say whatever gets passed in, see if that exists inside of that wrappers object, right? All right, and if it exists inside of that wrappers object, let's go ahead and just respond with it. So we'll go ahead and we'll respond with JSON wrappers, wrapper name. Cool, so if that wrapper exists inside this wrappers object, then we respond with that wrapper. Because remember, this right here, if we were to pass in, if rap name was to be 21 Savage, it's though we plug 21 Savage in here, and it's though we plug 21 Savage in here. And when we use that 21 Savage in wrappers, what it gives us is this object right here. If they have passed in, right? If they had passed in Chance the Rapper, it would have grabbed this object right here. If they had passed in Unknown, it would have given us this object right here. All we're doing is grabbing these objects based off of the property name. It's not checking birth name at all. I don't understand what you mean by that. It's not checking birth name. Birth name is part of that object though, right?

So this object has birth name included in it. It's not grabbing anything yet. We could tell it to grab stuff in here, right? We could do this. Let me show you something real quick. We could do, if we just console log, just to make this easier, let's get rid of the conditional for now, just for one second. Let's go ahead and console log, console log, wrappers, wrapper name. Cool. So what we should do is we should be able to console log whatever this equals. Let's go ahead and save this. Let's restart our server. And let's try passing in a wrapper. Let's try passing in 21 Savage. Did I save? I did, my server's running.

There we go, cool. Oh, so what happened here? Real quick, what happened here? Why is it just kind of like hanging? Did I ever tell it to respond with anything? No, I never told it to respond. So it's just sitting there waiting for a response. It's literally, Postman's just literally sitting there like going, all right, any day now. Any day I'll get a response, but there's no code here. I love this, yes, ah, oh, I love this shit, right? There's nothing here that tells it to respond. So do we get a response? No, no, there's no response. So it doesn't get one, right? Doesn't get one, we haven't told it to respond.

We did tell it the console log. And so since we passed in 21 savage, what we actually did here is we actually passed in 21 Savage into here. And we looked up wrappers with the key of 21 Savage. So if we go up and look, all right, here's wrappers. Here's the key of 21 Savage. So this is what we're going to console log, this object here, nothing else, this object here. And so if we look, we can see that we console logged that object. What if we took it, what if we got a little fancy with it? What if we did .earthname? Let's try that again. Let's, we might have to refresh this, cancel. Let's try it again though. Oh, I didn't restart my server though. Well, let me restart my server. Oh, my server is running.

Try it again. Still, it's like, wait a minute. Now we're getting somewhere a little deeper here. Oh, wait, sorry. I should put rapper name in here Well, there you go Let's go ahead and save it. Let's try it again Um Boom, hanging, it's waiting, it's waiting. We never told it to, never told it to refresh, but look, we plugged in 21 Savage. We were able to just get the birth name if we wanted it. Like if we wanted just the birth name, we could get it, right? We can see it printed in the console now, right? So we are grabbing that object. And then once we grab that object, we can use any of the properties inside that object that we want. All right. Cool. So I'm gonna go ahead and get rid of this console log.

We don't need it. And I'm gonna bring back our conditional. All right, so now we're gonna check. All right, if that wrapper exists in the object, let's go ahead and send all the info we have on that wrapper. But if it doesn't exist, what should we send? Like if that wrapper doesn't exist, what should we send? You should send unknown. Yeah, so let's go ahead and send unknown, response.json. And we're gonna send wrappers unknown. There we go. and send wrappers unknown, which should grab just this object here. So let's go ahead and try that. Let me restart my server here. Great, it's running on port 8,000. We better go catch it.

And if we come back up here and we refresh, I don't know why I refreshed. I shouldn't have refreshed. Local hosts. 8,000 slash API slash, let's try 21 Savage. Give it a second. Let's restart the server. Let's restart the server, make sure. And then what's the error? Do you see the error? Let's try and pour 800, not 8,000 second try. Let's go. Let's go. And now we're just getting 21 savages information, right? We're just getting 21 savage. Let's try chance the wrapper.

Please say the wrapper. Let's go. Oh, now we're just getting chances information. Let's ask for somebody that doesn't exist in our database yet, Polo G. Unknown, unknown, let's go. Let's go. Build on API folks, look at us. But I'm not a rapper. I'm not a magician, but I'll miss the fire. Name's super hot, but you can call me Mr. Fire. If you never see me battle, well then you missed the fire. Bars, bars on bars on bars. Oh, let's get we gotta say again I'm not a magician, but I'll miss the fire Name super hot But you can call me miss the fire If you never see me battle, well, then you missed the fire Bars but I'm not a rapper. I can confidently build a project now, let's go.

I hope you're like, you can build this. You can build your own API. I love struggle bars, like corny bars. I love corny bars all day. When ABG Neil said, I can't eat it out back, I got too much at stake. Oh, that just wrecked my mind. Bars, I don't care what any of y'all say. Bars. Can't eat at Outback. Got too much at State. Bars. All right. We built an API, folks. This is it. We're able to, we could make it, we could make this do whatever we want.

You want this to be a Pokemon API? Boom change up this object. You want it to be a spice girls API? Boom change up this object You now have the power to build to build Leon you got a sound cloud not yet. Not yet SM 0 2 1 1 K. Thank you for the hydration. Cheers to you All right, let's get this done on GitHub and then let's get it on Heroku. So Crispy Nugget, which I'm sure most of you know, has been working on the 100 Devs EP. We just got a chance to talk about it face-to-face yesterday, well, online face-to-face. And they've been building some really cool tracks to be remixing some of the music that we've used. And so we're coming out with a hundred devs, like music. So you can, you have something to look forward to. All right. Let's just get this on GitHub so that we can share it with everyone. And then we're going to push it to Heroku.

Half Mayo, we use Passport for authentication. I have some misgivings with JWT tokens and I think Passport's just easier for folks to understand. You might join a company that does it differently, but that's what we use here. Cool. All right, so this works. Let's get it on GitHub. One second here. Cool. I'm logged into GitHub. Let's create a new repo, new repository. I'm going to put it on the 100 devs repo. I'm going to call this wrap names API. Cool, so we have this wrap name API. I'm going to make it public and I'm just going to create the repository. And I love that it kind of just gives us all the stuff we need, all the instructions to get init, the add, the commit, the branch changing.

Let's go ahead and do that. Let's go ahead and I'm just gonna chill my server so I can push the GitHub. And let's just do an ls-la. What am I checking for just real quick with my ls-la? What did I just kind of want to check real quick? Yeah, I wanted to see if I already had, I wanted to see if I already had a git repository or like a git, if I had already initialized git and I wanna make sure I had it in my gitignore. So the dash LA gives you the hidden files. So the git and the gitignore would be hidden by default cause they start with the dots. So I just use that to check. There is no git, so I need to do git init. Great, so now I have my git repository. I'm just gonna add everything. So I'm going to do git add dot. I'm going to go ahead and do my first commit. So I'm going to do git commit dash M.

And I was going to say working wrapper API. Beautiful. And then I am going to go ahead and change my branch to main. I was going to do this git branch flag M main. And if you're like, Lee, I never remember how to do this. Don't worry. They just give you the instructions right on GitHub. Boom. So I've changed my branch to main and I'm going to add my remote and then I'm going to do my push origin main. So we add our remote. So we know where to actually send this to on GitHub. Great. I'm going to do our get push you origin main. All right. So we're pushing it up.

It pushed up really quickly. When we go and look back on our repository, you'll notice that there's something missing here. What's missing here? What's missing here? The node module folder isn't here. So if you were going to, if you were to clone down this code, All right, if you were to clone down this code, right? If you were to clone down this code, right? You would have to do what? You would have to npm install, exactly. You have to npm install. So what we need is a good readme file That explains to do npm install and should probably use the Alec Ortega Read me template that we've seen in the past. And so what I'll say is the first person to submit a pull request That has the readme file That follows Al Gore tegas template and everything looks correct It tells people how to do npm install and start the server the first person to submit that pull request We'll set up a call next week. We'll do like a 15 minute just kind of coffee chat and I'll look over all your professional stuff. So first person to submit the pull request gets that this upcoming week. Aha!

You would need all that stuff and you need to be quick. All right. So our stuff's on GitHub, which is all great, fine and dandy, but we don't just want it on GitHub. Where do we want our stuff these days? We don't just want this local, we want it on Heroku as well. So we're gonna go ahead and put it on Heroku. To put this on Heroku, I need to pull this over here and I'm just gonna do Heroku login. If you don't have two-factor authentication set up, when you do Heroku login, you'll do this flag I, and this flag I will enable you to like log in right here in the terminal. But if you have two-factor authentication, you have to like do it without the flag. And when you do it without the flag, it'll open the login in your browser. So I'm gonna go ahead and log in. It's gonna say, do you wanna open it in the browser? So I'm gonna say yes. It's opened up the, like it, it took me to the browser. Uh, I'm going to click log in.

I'm logged in and now I can come back here. I'm just going to clear real quick. And so now I'm logged in. You couldn't see, cause I did it on the other screen. Uh, but it took me to my browser. I just clicked log in and I came back. Cool. So now I'm logged into Heroku. And like I said, if you, if you haven't set up two-factor authentication, you just put your, like, your username and password in there. Since I have two-factor authentication, it had to, like, take me to my browser. I had to click a button and then it kicked me back and I'm logged in. It was just Heroku login. Cool. Next, I'm gonna do, I'm gonna, like, actually create the actual place on Heroku, like, the actual project. So I'm going to do Heroku create, and I'm going to call this wrapper API.

I'm just going to call it a hundred devs. Let's do a hundred devs first. A hundred devs wrap API. There we go. So I'm going to create a hundred devs wrap API. Oh, I have to start with a letter. That's why I did it. to do it the other way. Wrap API, 100 devs. Cool. It's already taking, because I probably already did that. Wrapper API, 100 devs, let's see. It's already taking. I see you guys are beating me to it. Let's just say, wrapper API, 100 devs, class 39.

There we go. So now I have created the Heroku create wrapper API 100 devs class 39 application. And let's see, I have everything on here. What I wanna do now is I wanna tell, I wouldn't I'm gonna need one once I push this to Roku. I'm gonna need to tell her Roku like how to Write how to Run my server What program do I need to what do I need to tell like how do I start my server? Right. How do I start my server? Like if I wasn't thinking about Heroku, yeah, it'd be node-server.js. So there is a command that we can use. It's called echo, and we're just gonna plug in what we want to have happen. So we're gonna say web-node-server.js, and we're gonna say proc file. Cool. So what this should do is it should create a proc file for us that has that WebNodeServerJS in it. It looks good. I'm gonna hit enter.

And if we look, we now have this lovely proc file. And then all it says is WebNodeServerJS. And so what this is saying is when we eventually push this to Heroku, like when we put this code on Heroku's server, it's gonna use this file to know how to start the server. Because Heroku won't know to do NodeServerJS. We have to tell it, hey, to run this, do NodeServerJS. And so Heroku expects this file to know how to start the server. Cool. So now we have the proc file. I think everything here is pretty good. We're going to push with a breaking change, but it's, it's so we can demonstrate stuff. All right. So let's go ahead and do a git. Git add dot. Git commit. and we're going to say working wrapper API and we're going to hit enter and then we're going to do git push Heroku main.

Oh and what should happen is you should take all this code and push it up to Heroku and that's what it's doing, give it a second. Cool. And so now this should be live on Heroku. And I was going to take this link here. and I'm gonna see if it serves up our HTML file before y'all take it down. And it looks like it's not really working honestly, like it's not loading. And so when I have one that's not loading, what I like to do is I like to go and look at the logs on Heroku. So let me log in here on Heroku. and here we go, this should be fine. And on Heroku, we can do something extra. We can look at the logs here. I can click on view logs and I'm gonna see some stuff. I can see that the build succeeded it and it's trying to run, but it says web process failed to bind to port. What the heck does that mean? It says it failed to bind to port.

What does this mean? Yeah, do we know if Heroku's gonna use our original port 8000? No Heroku needs to be able to use its own port. We put our code on their servers They want to set up their own ports. So let's go back and take a look at our code and let's look at our server.js and so instead of Hard-coding port we're gonna do something that's a little different here, and we're gonna use an environment variable or our hard-coded port. And so this environment variable, we'll see these more as we get deeper and deeper into the backend, but basically they're like little keys that we can use. And so Heroku already has a port set up in mind, right? And if we want, we can just use whatever Heroku is trying to use is by using this little bit of this little string here. So this is saying, hey, try using whatever Heroku is setting up as the port. And if it doesn't exist, use our hard-coded port. Cool. Like I said, you should be just following along right now. You don't have to be trying to install Heroku and all that crap. You can always do that after class. If you need help installing the Heroku tool belt, you can watch my stream where they did it live.

So you should just be kind of watching along here. If you're frantically trying to type along, you're gonna get lost in the sauce here. That's why I asked you to set up Heroku for homework. Cool. All right, we have Heroku's port now. So we should be able to repush to Heroku. So let's add our changes. Oh, first let's save our changes. Let's do git add dot git commit dash M. And we're going to go ahead and say, add it Heroku port, cool. And we're going to do git push Heroku main, cool. The commands I'm using are all in the slides. So I've already given you all the commands, all the commands are in the slides. So if you need any of the Heroku commands I've done, they're all in the slides. Cool.

All right, so we look like we pushed up to Heroku. Let's go back to our application here and try again. And there we go, we can see that it's working. We can see that our wrap names API is up and live. And let's go ahead and try it in Postman. Let's try it in Postman. Let's pass in one that we know will work, which is 21 Savage. And boom. Look, this isn't no local host. Ma, look. It's not local host. This is a hosted API that is now returning wrap name information that we created. Let's go, hold on. 10 second warning. Five second warning.

What is the code running on our server that hears our request? We are literally online we are literally online we online what is the code running in our server that hears that request. We online, let's go, let's go. All right, so we've created a server and that server we can make requests to, right? We can make requests to and we're getting that data back. Let's try somebody we don't, we know that's not in here, like Polo G again. And we're getting unknown, unknown, unknown. And if we do, let's do chance the wrapper. Please say the wrapper. All right. This is, this is working. It's working real good. We're getting all of that good data back, right? Oh boy. We build an API that's online.

We got some, it's a very simple documentation here. I know it's really small, but it says, please use. Oh, it says local host 8,000. We got to make that change, right? We should change that. In our HTML, let's say, please use, there we go, which is the link, like the name of our, like where our site is hosted on Heroku. So let's save that, let's push this change, git add dot, git commit, updated HTML documentation, and then we're just going to do get push Heroku main. Cool. We're pushing back up to Heroku, right? Pushing up to Heroku. Heroku should get our changes. Cool. If we go back and we try to like reload our server, or sometimes it takes a few seconds, but boom, there we go. Now it's saying, please use, and it has the link to our server that's hosted, and they know to use wrapper and then wrapper name. So this is looking pretty good.

This is looking pretty good. All of our code is now, all of our server side code is now put on Heroku, and Heroku is now running our code. Boom, I feel pretty good about this. We're able to ping it. We're able to use Postman to ping it, but where are people actually going to try and consume this code from? Like when you were all consuming APIs, where were you consuming your APIs from? Yeah, you were all trying to consume them from client-side code. And so let's see if this would actually work with our client-side code. So I actually already built a nice little client-side application here. It's called client-side code. Let's go ahead and take a look at this client-side code. It was in the class 38 folder. You should already have it if you downloaded the materials from last class. But if we look, it has like a nice index.html that's set up to consume an API. And so if we open this right now, and I open this in the browser, did I open this server side or locally?

This is a local HTML file. It is local JavaScript. And if we look at this client-side JavaScript that is local, we have a fetch. And so just like a normal fetch that we've done, it is an async await fetch, right? This is like a normal fetch. We have our event listener that fires the API request function here, this async function. It's gonna grab the wrapper name out of the input, and it's gonna plug that wrapper name into this URL. So let's actually switch up this URL to be our URL, the new one that we just created. Right, there we go. So now we've plugged in our URL. So it'll grab the wrapper's name out of the input. It'll plug that wrapper's name into the URL. It'll make a request to our server. It'll make a request to our server. And then we should see the birth name show up in the DOM.

Right? It should show up in the DOM. I saved it. Everything is updated. I have the HTML file that is open locally on my machine. Locally on my machine. It set up the point to our API. Let's see if anything happens. So let's go ahead and keep open the console just to make sure that if we see any errors or anything like that. Let's put in something we know that works. 21 savage, click me and it works. Beautiful. Oh, it got data back, right? It got data back from our server. But wait, hold on.

Where's all this other stuff coming from? Origin, Atlanta, Georgia. What? Huh? Wait a minute. What happened here? Did I refresh the page yet or is this the old API? This is my old one. This is old data. I gotta refresh. I didn't refresh. Remember, we changed the URL. It's now a new URL. That was my old API that I added stuff to. That was old.

I saved here in the local file, but I never refreshed the local file. So let's try it again. 21, Savage, click me. Uh-oh. Uh-oh. Oh, access to fetch from origin null has been blocked by course policy. No access control, allow origin headers, blah, blah, blah. So what happened here? What happened here? What happened here is something that happened to us time and time again, when we were building our simple API projects. When we were just trying to get fricking Pokemon or Game of Thrones characters, we kept getting blocked by cores over and over and over again. And we would curse to the high heavens that we'd have to go and find another API because the server said not today. Right? Servers have to be set up to handle requests from local files. Remember, this is running locally on my computer and it's trying to request a file from a server.

Right? Servers have to be set up to say, you know what? That's okay. We'll, we'll take those requests. That's okay. We'll take those requests. But for some folks, they didn't set it up so that we could make those requests from local files. So we were just trying to use APIs. We're just trying to be cool. You know, we're trying to vibe, feel good. Just use our regular JavaScript, right? We're just trying to have a good time. We're trying to live that Friday life. Shout out this Friday, 6 p.m. Eastern time.

We have our car class, our cause, action, results. Swing on by. We're just trying to live our best life. We were trying to just vibe out and what they did is they said, not today. But let me show you how easy it is to fix this on our server side. Like our server can be set up, right? that it allows these requests from local files like I'm trying to do right now. So let's go back to our server and I'm gonna make sure that I'm in the right spot. I'm in my wrap names API server. I'm just gonna go ahead and do npm install cores and I'm gonna save it. npm install cores, save it. We're going to see that in our package.json, we now have a new dependency called cores, right? We now have a new dependency called cores. And then in our server.js, we can require this cores module. Const cores equals cores, or sorry, require cores.

Cool. So now we're gonna require this cores package that we just installed, this core module that we just asked for, and then we all all we have to do is tell Express to use this package. So we're going to say app.use and we're going to pass in cores. That's it. We said, hey, our server should be able to set up to handle these requests, right? That's it. Set up to handle these requests. Let's save it. Our server code is saved. Let's do git add dot git commit dash m, add it cores, cool. And we're gonna do git push Heroku main. All right, gonna push up to Heroku. It's gonna take a few seconds for it to load up here. All right, a few seconds to load up here. All right, it's pushing up to Heroku.

All right, it should be live on Heroku, which means if we come back to our local code and we try it again, boom, first try, let's go. I was gonna flip off the camera, but then I realized I'm flipping you off and not them. So I'm gonna turn this way. Fuck you for not turning this on. You know that we're gonna be just like beginners trying to use these APIs. And you're telling me, you're telling me, you're telling me that it was two lines of code and you couldn't do it? I'm gonna tell them about themselves. I'm going to tell them about themselves. Two lines of code, are you going to do it for me? Oh, oh, oh, oh, oh, oh, oh, oh, oh, oh, oh, oh, oh, oh, oh, somebody's getting an email. Somebody's getting an email. Somebody's getting an email. All right. So let's kind of recap what we were able to do tonight. We were able to build a full stack web application That was an API of our dreams.

A wrappers API where we're able to listen for requests right? We're able to listen for get requests and return files. We're able to listen for get requests and return JSON if we want, right? We're able to look at query parameters on those requests that are coming in. We're able to put this code on GitHub. We're able to put this code on Heroku. We're able then to have it live and online for anyone in the world to consume our API. We can consume it through Postman. We can consume it from client-side code. So other beginners that are trying to use our API, they can actually use it with just their client-side code. we turned on cores because it was two lines of code. We online folks, we online. So if you want to play with my API, feel free to, I'm sure eventually you'll, you'll take it down if we all run to it, but it's live, it's online. Uh, after class, I'll share the GitHub repo. So you have it you'll have the VOD which is immediately available and folks this weekend You got some stuff to do for homework This weekend.

I'm gonna ask you We took a deep breath earlier in the class. We started prepping the bank If you haven't completed your professional links, it's time to get them done this weekend You're gonna need to create Heroku accounts Mongo Atlas accounts Postman accounts if you don't have them and you're gonna want to install the Heroku CLI or command-line utility or tool belt Whatever they call it these days I make that sure you have that installed if you don't if you get lost trying to install it mine wolf has a Lovely VOD on their channel about installing all this Heroku stuff Then I'm gonna ask you to read something that node.js Express from full stack open. It's meaty. There's a lot to it just get through it. And I want you to make your own API by Tuesday. Take this code, modify it so that you return different content. I don't care what it is. My Little Pony, Pokemon, I don't care what it is. Just make it your own and get it live on Roku. Cool. I hope you had some fun. Let's get you all some more channel points by doing a raid. Tomorrow we have our car class, cause, action, result. We're going to do it live and online. We'll be on Discord at 6 p.m.

Eastern. And we're back on Sunday for office hours. If you want to run back and build a different API, we'll do something else fun on Sunday. We'll answer some questions for like an hour and then we'll build out a whole new API. So if you want to run it back, you want to run putting on Heroku, putting on GitHub all over again, come on Sunday, we'll do that together. But for now let's set up a raid. Let's see. Rufio is online, so of course, we're gonna go to HelloIsRufio. If you have not followed HelloIsRufio yet, you're missing out. Please give them a follow. Let's go ahead and send the raid their way. All right, so I'm queuing it up. Get your sweet, sweet channel points. Have a wonderful rest of your Thursdays, y'all. I hope this was helpful.

I hope running it back make it a little bit more sense. If it's still not clicking, that's all right. Come on Sunday. We'll make sure you get there, but you can do it, folks. You can build real backend web applications. You are full stack developers. You are backend engineers. You can build real APIs. You can host it for real on Heroku. You can do this this weekend, prove it to yourself, build that API of your dreams. If you get stuck, I'll see you on Sunday. All right, everybody, let's raid.

End of Transcript