Desarrollando una API con Express desde cero

The same as comparing and progressing, well, today we are going to progress with the course. We don't have a repository in the repository. I'm going to be uploading the videos as well. In this case, you can see that I've put the video. You have the correct one, this one that is also edited and super nice, here you will have all the videos, if at any time you miss one, you want to know where the video is and such Well, here you will not only have the videos, but you also have the code So you can see the code of each of the classes here in class 1 you have all the examples we did here that are super cool, that is, all the examples with all the dependencies . and that's it nauji's course class is from scratch Today we are going to create our first app from scratch we are going to make a web server I am going to explain how the http protocol works what is it that travels in the request what is it that travels in a response How they work and what interesting information each one has we are going to create an API from scratch with dependencies so you can see how it would be done And what it gives us how how can we Create it how we could try to get as close as possible to without dependencies make an API response to different routes and then we are going to see how we could go to Express And if we have time we are going to do something that will blow your mind we are going to try if we have time it is the fact that we are going to create our own dotte library dote in case you don't know it is surely one of the most used libraries in the dotte universe so you don't know for environment variables and you will see that with everything we have learned in these two classes the one we did the other day and today We are going to be able to create our own to use it in any project without having to install anything and you are going to say [ __ ] well yes it is easy yes it is easy ok So stay tuned let's go with the code I'm going to open here the little project I had for here ok let's get up This ok we already have this here we are going to see a lot of interesting things for example How to use no Demon watch and all this we are going to create class 2 class 2 and start with our classes ok we are going to review a little first what where we left it Well we left it with this file because we already created a web server where we imported with require using common Yes that we already saw that there were two types of module not in macri modus and common Yes we are importing the node dependency colon http to be able to work with the http protocol to be able to create a server and all this here I was simply looking at How to use environment variables to be able to tell it what port we wanted to use here we create the server you see http.c create server and Here we make a consolog that we had received a request or the world and this is all we did where we focused we focused on making this small library very interesting to find the free port that our machine had that this is something that is not seen many times and people use dependency is Well we did it from scratch to take away a little bit of magic But hey This is the interesting thing we do not stay here a bit with this http we are going to start if you think with this http.js class 2 we are going to copy it Okay and we are going to review a bit let's see how it works we would have the http here to find the available port we are going to remove it to simplify it ok we are going to say that it is a two three four by default and here we use the available port here the desireport we are going to put it here ok And we are going to explain a bit of the code part by part ok we import the module we create a server and for that we call the create server method that receives a callback we already explained what the callbacks are ok the callbacks are functions that are executed after it happens something normally when they are asynchronous things in this case once it receives a rich it is every time it receives a request this function will be executed here so inside we had a consoleock request and we told it the response we ended up sending it Hello world with this we had the server and then what we did was listen on the server in a port and finally this bald spot that we had here is when that has already been raised server on that port to have the information in the console to execute this Well, nothing, let's go to Note and put point bar class 2 bar 1.htp.js ok that is the name of the file that we have here but what we could do is enter directly in the folder and run it whatever you want in this case I'm going to do it like this and that's it it's ok I'm complaining ok Port isnotefine Why has this happened to me it has happened to me for different reasons the first thing I don't have the inter configured because I've moved it to a folder So we are going to do a little thing we are going to start a project here ok with mpm init this creates me Here the Jason packa and so with this packason I can install here standard mpm Store less than because it is a development dependency that's why the least capital letter and now, well, we are not going to put that this is link config extension of standard and now here it is going to file me where we have errors. You see now it tells me here you have an error because you have put Port and it is not effectively defined because it is Desire Ok now We have it better this way we make fewer mistakes which is appreciated come on let's run this again 1 point http.js take a look It says server listening on the port a localhost one two three four we can click on it And although it's hardly visible there we have Hello world We are going to have the interesting thing really in the console so it doesn't blow your head off this is very important that you understand why If I only made a request Why do two riches not appear I mean Why if I click here to refresh print in the console appears repeated twice, you know, it seems that it is receiving two riches very well and the chat people were there attentively the issue is that what the browser is doing automatically is that when you enter a web page it automatically makes two requests well, it makes them richer, okay But these that you see here are from extensions, these you can ignore But these two are doing them And this is because we are making a request from the browser What is doing the request that we have told it and then it is trying to get the favicon that we have here the most interesting thing and to start creating our Apple and understanding how this works we would have to see what the request has in the request we could see that in the consort we can rick.ud or We could even put it here, look, we are going to put rec and it is the way in which we are going to be able to start bringing us information from the request and discriminating our app and discriminating means that our Api depending on the headers depending on what route it is and everything this will have to respond in different ways So now notice that I'm not This is not restarting that's just what we're going to fix in today's class so you know how to do it so you have to close it with control c and reopen it ok to get it back to take the changes and now we do refresh Now in the console you see Let's see that it has received a request asking for the bar and has received a request for the bar favicon dot ico Look at one thing if I go here to the terminal Look for example I go here to the terminal and here I do a CURP http localhost one two three four okay Note that here Lola is returning me world and If I look at the console Now it has only done a rich it is because obviously the terminal or if I do a fetch of an API It won't ask for the favicon because it doesn't need it. Okay, that special request is being made by the browser because it's cooler than an 8. It's okay because it's telling you no, well, I'm going to bring the favicon, I want it now that we already have this, I'm going to explain how the theme works the request and the responses when we talk about http I am going to tell you something What is http that looks like http http we are going to create an Http server in fact we already have it created because if you look closely we have used the http dependency you see of the http protocol So what is this about Http ? hypertex transfer protocol and it is the protocol the network protocol I would say most used on the internet or the most used internet to transmit information especially web pages okay I'm going to make you a little drawing here so you understand how it works okay No it's not the most advanced or detailed way But I'm going to explain why very simple but it's super important that you understand each of the parts Look let's go Let's put the user here, we're going to call him Us, which could be Pepe. Okay, and Pepe has a device. Mira has a mobile, for example, he has a mobile. Okay, so PP, in this we're going to call him midu midu. make a request to some site no the request is the request the request that in Spanish we would not call it a request and in the request we send you some information where we do it that is when I am entering here look I enter here to this URL and this answered me Hello world, we are already making the request to see the request that we are making. The best thing is to open the development tools. You go here, see here, network, and here you can see the request that you are making. If we refresh, see here, you can see the requests that have been made to Entering this web page I already tell you that these two that appear here rarely are many times because there are extensions if you do not want to see the extensions you can try to open it in incognito mode or have another separate profile okay but in this case we are going to ignore these two we have the favicon that I have already explained to you and the one from localhost is from localhost which makes the main request when entering this URL No, we would have information here, for example, when making the request we have to which URL we are making the request What is the method of the request not as we are asking it we are telling it that it is a get and here we would have more apart from the response okay but we are going to see more things about the request Notice that it puts here response headers and request headers for now we are going to forget about the response and we're going to focus on the request everything you see here all of this is actually optional everything you see here request header is optional And that's called headers they are the headers the headers are usually information that goes attached to the request to give more context to the request Ok then, what information would we have in all this Well, look when we make a request we will have the URL we will have headers we will have the mezzo ok the mezzo for example the mezzo can be the get for now I think that with this we could have enough ok later then we will put more for now this would be the most important thing the URL to which we are making the request the headers the headers where we are giving as Extra information of the request And look there you can there may be and we will see it later there may be tokens what type of data we are waiting for we can send you cookies we do not send you like a bunch of cookies to indicate Hey this request is from a user who is logged in so in the headers we paste Cookies and In the method, what we would also be saying is what types of requests are different, we will see them later, but for now, keep in mind that we do the get and there is another thing that is also optional that, depending on what we are doing, also goes with the request, which is the body is the body of the request where all the data that we want to transmit goes Where does this have to take this obviously reaches our beloved server that this is what we are going to do today okay This is the server or the server And then when the message arrives request, what does the server do? ok it is processing what it does is process all the information and whether it has to go to a database that has to process the information we are going to see this today what it does is process this data this request and once it has and it takes as long as it has to take because once it has this what it does is return an answer I know that this looks like someone will say Well it is very easy no this is very easy it may be easy but the words are key why Because it is essential that understand the differences of the information that travels between the request and the response and what each of the parties has to send because now you will see that in a code that is very clear what the response brings The status code is worth if it has went well if it is a 200 a 300 we are also going to see it now we could also have the body obviously the the body of the response some headers ok we could also have some headers it also has response headers and this would be like the most important thing the status code like Hey, it's gone well, it's gone wrong, it's been regulating the headers of the response and finally also the body, okay So this is the key to how the http protocol works, we make a request where we send all this information and after the response we would have statuscode headers and Body ok And this information is separated, that is, we would actually have the status code in the header, but you will see why it is important that it is completely separated, especially when we are dealing with this, because when the header is written, when we write the header first, it will we say status code and then we tell it the headers it may have, okay So it's important that you understand that it goes in a separate way and in fact you can see it here Notice that here when you make a request, notice that we have the headers here on the one hand response is ok the response headers and the request headers are ok Well, note that the status code does not appear here the status code instead we do have it here we would have the method and also status I think it is status you see status you see 200 but it does not appear when try looking for it here because the statuscode will not appear So you have the response header that the connection has told you type of connection leave it open we will see this later the length of the response 10 this means that it was 10 bytes and in fact if you count this letter 1 2 3 4 5 6 7 8 9 10 watch out for 10 because 10 because 10 are precisely the bytes that we see here in the content Note that this is information that we are already sending from the server Why is it important to tell it the length because that way the browser knows when it has to stop no and it says oysters it's okay the length is this So it's correct we're done and that's it Okay it says it comes up in general 200 comes out here but in general it's not the response header okay that is You have it here, not here, statuscode does not appear, ok, it is not called status, it is called, that is, the status code or the status, here you have it as separated from the headers, then we would have the date On which date it was made and the keepa Live of how long it has That connection must be open. We will see that later because it is quite interesting when it comes to optimizing resources, then we would have here the headers of when making the request, here are headers that on the one hand come from the browser, okay, for example, you see, this is from Access Language. what the browser is saying is that when we make the request we are telling it that our browser is in Spanish you see in Spanish from Spain and in Spanish in general and what we are doing in this case is that it is already giving us a clue to the server that this if you want you can use it or you can ignore it But this is key because there are many times that we can make requests to an API and that the API thanks to these headers respond in a totally different way which is super useful okay There is a a lot of headers that have more information but right now It is not the most important for you to take into account and because this does not matter if it is the browser or not what is this one here user Allen This is a header that is usually put when they are done requests like to say who you are you know how user people like saying Hey I'm the Chrome browser I don't know what version of this operating system I don't know what I don't know how much and this many times what helps you is like on the server treat this data and say Well if it is a mobile I am going to send you less information or for analytics issues or for a lot of things this is Normally used not only for this but also to make sure that that user when we see the and the statistics but not for tracking but server statistics because it is not necessary many times that It can be a browser that makes the request, it can be a service, another API, it can be a terminal, it can be a lot of things and so you can see which clients are using your service. request and we would have the response not the request once we establish the connection the browser sends http this request has a standard format contains the information with the method we have already seen that get to request data can be post to send data there are others later we will see the URL that we are asking for the http version this It is also important some headers that are optional as we have seen ok it goes to the server processes it and after processing it Sends an http response back to the browser to the device to the terminal to the client to whoever with the code of the State it's okay if it went well if it didn't go wrong 200 would be a success 404 an error that it hasn't found it then we'll see all the ones that there are okay the version of http plus headers and also well the data you've requested obviously not I mean that in the body we would have the data that we are supposed to have requested and it is already there We would have it would close the connection normally unless we have a header that tells it to keep it open we are going to use the http protocol but the http protocol of Historically, it has had security problems and that's why the https protocol can be used on localhost, but you have to do a lot of other things and that's why we're not going to use it because you need a certificate And such But it may be that later In the classes we will see how to make the localhost with https so that you can test it, okay but now it seems a bit exaggerated And so we focus on the http with the APIs and such And then many times what happens is that you can have an http localhost service that works correctly and when you deploy it what you do is you wrap it in a service that is https so that internally it is http but it is wrapped in an https protocol and therefore it is all encrypted and does not have any type of problem you don't have to do anymore and don't bother it's okay Since we know all this we already know the theory okay we're going to move our little hands that's important now that we know this we're going to do a few things first we already know that here is every Every time a request is received, we are going to have this. That is, every time the user does this, as you can see, it is rich, it is this rich, it is received by the server and this process, this process, would be exactly this function here, in fact, so that you can see it more clearly. We are going to call process request, okay, we are going to separate it and you will see it very clearly because it does not have to be an anonymous function, you can pass it like this, you already know that functions in javascript are first class and therefore can be passed as parameter So we create this function here and we can pass it with a parameter here it's exactly the same as what we've done before so what we have here is like this Only we're doing it separately So we have to process the requests the first thing we we wanted to do in any and in any place is the fact of being able to separate each URL That is, you when you go to a web page What you want for example the Poke Api we go to the pokéapi when you go to the Poke Api Note that you have different urls that they answer you different things So the first thing we are going to believe is to discriminate the urls we already have a clue here not because it puts us So nothing easy easy what can we do Hey if the urell is equal to this So we are going to do something here we are going to tell him that the status code of the response Well, look, it's 200, this means that it went well, which is OK, then we'll see a few more, we can put a header for it, for example, to tell him Hey, the type of content is plain text, it's html, it's a Jason, it's a image we can do a lot ok There are a lot of different content in our case we can tell you that it is a plain text for now ok it is a plain text that we do not want to do absolutely nothing then it shows you something because it is interesting ok And here We can say Hello world, we are going to put here Welcome to my home page Now we are going to find a very common problem in non-conforming You go working with us, you go making changes and you're going to want this to restart automatically in some way. close this raise it again And then go back to the page and see how it works Look Notice that here is an interesting topic that puts a page and goes wrong this is a charset problem that we can also fix So what can we do to fix this you have two options to solve the update of your code and to restart automatically the first one that would be the most recommended would be to use watch ok the watch mode Note script watch script ok And now you tell it what is the file you want that you want to raise the same as We have done it before but you see that we have put the watch here So we put a watch here right now they are experimental although I think that version 20 no longer puts it in experiment it is totally native and works perfectly notice that now we put 234 ok Welcome to my home page let's try to see if I can put set header networks to see if we can put the utf charset here to see if this works save And notice that when saving what has happened is that it has been automatically reloaded and now if we come here let's refresh ok Well I see that no, I don't know, he hasn't swallowed, I thought that maybe he would eat it there with the charset but I see that it's not there f8 Let's see if we take it off normally, what we do is put a meta, so yes that is making the change but we don't see it, I don't see that the chat is affecting it, what we can do In any case, of course, here it is the plain text, if we could, html, I don't know if the charset Let's see, I don't know if it was apset charset, maybe be me I think it's stalking set it can be tone this header Ah look the bruses omit omit this header I don't know I don't know how much it may be that maybe they just need to stalk directly I don't know what if we can't pass it directly with the meta that's it or with the happy one directly no if not like this here we can pass it on here and I think that here it sure works Now well no wait anyway welcome to my home web page to see if it is with a semicolon it seems to me Yes ok Welcome to You see my home page, that is, we make it happy and we tell it the type and here we tell it how the character encoding is, that's why the accent didn't work, but notice how important the headers are already something that seems so simple. It is affecting how our web page works if we didn't put this on it. Well, we can make it flat too And notice that it would also work like this, we see it in dark mode but notice how it already changes if we make it flat as it is returning the text directly to me if I put that on it it is html So this detects that it is an html document and tries to render it as such And notice the difference is that if you put these html and you put an h1 h1 ok And we refresh now it has put it as an h1 if we tell it that it is plain text Well, now it is returning it to me As if it were plain text and how important the encoding is because if not, then the encoding does not understand it, having said this, think that in the US they do not have this problem because the encoding, well, normally accents does not give a damn for that to Sometimes you can find these problems on a web page But it is true that it is normal that worldwide with utf8 you go quite well If you do not have problems with how the character encoding is rendered, this will be our first route, but we could do more for example we could have a different route ok later we will fix it better ok now we are going to do it with Else If the shift just so we can see we could have here well the contact we can change again coacher status I don't know what And here say you can contact ok And here now Well, an Else that if, for whatever reason, it has not found any, then we do a 404, which means that it has not found it and here we determine and tell it that 404 is not. Well, we can make the set header. Well, note that the set header that we already see that they are all the same we could put it here it is okay that we would remove all these from here and we would not be repeating ourselves because totally stop a everyone is Exactly the same so now if we go here ok let's change this from being flat to html so they're all html ok welcome to my home page then we're going to contact a totally different page and now if we try to enter any 404 in a At the moment we have already made a web server a web server And look why this is very interesting there is a very common error that usually happens to you many times, okay or it usually happens a lot, a lot, a lot, a lot of times and it is the fact that when you have that Peas when you have single page applications Ok, so what happens to you is that you say Why when I go to the barraco and soda doesn't work for me, you don't know what it tells you, it doesn't work for me, it tells me that it can't find the page, this is usually for two reasons: the first, because there is no server behind like this that in this we do have a server where it is detecting each request and is telling it okay if it goes to Barra contacto I am going to detect it and I am going to tell it to render this but when you do single page application many times with only rendering in the client does not have a server behind it and therefore what you have to do is always serve the same file regardless of the route because there is no server that knows how to say oh how is this request I have to render this This request is like this And this error is I have seen it So many problems so many times so many times then what you have to do since you don't know how to respond to the routes because there is no server that says what each thing has to render what it means is that you have to do and normally This depends on the Hosting and the system and so that all the routes always go to the index so that the javascript loads and the javascript is the one that does the processing of the routes. We are going to talk about the status code. You see that we have it here . we put it completely separately, obviously by default, you can already imagine that the status code 200 is going to be by default. That is, if we go here to the contact and we do not put any status code, notice that by default it is 200, 200 means that Ok, okay, but there is a In fact, the status code ranges from 100. We're going to do it, I'm going to make you a sketch so that you don't forget this, we never have from 100 to 199, which we would say are informative answers. Okay, we're going to put this in white from 200 to 299 which are satisfactory answers, ok, satisfactory Not because I have made you satisfied, but because things have gone well . These errors mean that you from the part of the request, that is, from 400 to 409, means that something you have done here when making the request is your fault . does not exist you are trying to send data that is not accepted you do not have permissions to access something ok so they are errors on your part and then we would have server errors from 500 to 599 server errors ok So here we would have like the two different the informative answers these would be all the status codes ok we would have all these status codes that you can use however you want obviously you don't have to remember them all by heart in fact http.k here you have all the status codes explained well not explained like that either they are explained it is true they are explained illustrated what is the most important is worth for example 100 tells you continue switching protocols processing early Hans this is very interesting By the way notice that although I have said that it is from 100 because I have told you from 100 to 1999 because this It does not stop evolving, okay, that is, now I can tell you from 100 to 103, no, because right now there are three status codes that are in the specification that mean something, but it may be that 104, for whatever reason, they believe it for x reason To give you an idea, 103 is quite new. You see that it says that it is an experimental technology. In fact, this is super interesting because what 103 allows is that you can tell it how to give clues to the browser as to what resources you are going to need. So when the client does a request to the server Imagine that this request has to go to a database of data and it takes a long time, so what the server can do while it is making the request to the database is to give it some earl James where it says Hey, I'm going to give the browser a hint, I'm going to give you a little response in which I'm going to tell you, go loading these resources while I 'm doing things, you know, so it's quite interesting. I'm going to put it as the most typical Ever, we would have the most typical, obviously we would have 200, which is Ok, okay . which is one of the most important we would also have redirects 301 which would be redirect vale In fact we can see it Michi vale has moved permanently important it is true it is true because it is not a redirection redirection are all this means permanent vale 301 this means that the resource the The resource that was at that address has been moved to another site, ok And then we redirect it 400, which is Bad request, I'm not mistaken 400 bar ricuques, ok, this means that the wrong thing is that you have done it is not correct, it may be that you have passed the wrong URL more Well, the information that you are sending the rich is is badly formed, that is, it could be that the syntax of the rich is is not correct, the trousseau and params things like that, so let's see, it's warm, this would be bar request the most famous the most famous Obviously the 404 not Found a one that has not been found you have tried to access one that does not exist and the 500 internal server error and this is one of the most feared ok look at Michi who is in there trying to fix the boxes This is one of the most feared because normally a 500 error is an internal server error that you have no idea what happened so these are the most dangerous because of course you have sure that you have found it sometime Hey what has happened what happened here that I don't know how good it has been, well, this would be like the most famous ones, okay, I really like htt http.k because it is obviously very visual and it looks super nice if you want a better explanation, more technical or I recommend this one from mdn that in addition to each one, well, you have a lot of explanations, it looks quite fast. You don't have images that will be distracting you and that's it, we already know how we can reset the process, I'm going to tell you another way of How to reset the process, it's worth it I have shown you this is very good. You see that when I save it resets and we can see the changes. You see my perfect page, but it turns out that the watch mode that we are using. Although it works super well and I highly recommend it, it is still in experimental. Put it here Well, they are experimental, the truth is that whenever I have tried to use it, it has worked perfectly, but I am going to recommend an alternative option in case you have a problem, there is a very famous dependency called nodemon No demont, just this tool What it does is detect when there is a change in the files. It is very configurable, which is the best thing it has because you can not only listen to the changes of the javascript file, but you can also listen to other files of a Jason of whatever The bad thing is that it works a little slower , it consumes more memory, it has some little things that make it work a little worse, but it's obviously much more powerful and you have a lot of configurations that can help you. One of the bad practices that many people here say is the fact that you install it globally many people tell you mpm less mold geno does this and you can use it in all places it's bad it's bad it would work it would work It's okay to do it like this but the truth is that it 's not necessary either Well yes we have here in class 2 we are going to put the we are going to initialize here the packason no what you can do is simply install nodemont As if it were a development dependency with less than ok it is not necessary to do it globally doing it globally means that a person who for whatever reason is installing this project in class 2 will not know that they need no Demon is a bit strange and also you will not have the possibility of having more than one version of nodemon the easiest thing is to put it as a dependency that you have it here and what you should do is use scripts that this is going to give you life sincerely the scripts de mpm is one of the most undervalued things that exist in the world of web programming only based on scripts you can do whatever you want Okay then what you can do here put deb and here you do no Demon with the Script you want and that's it and once you do this, you're already standing in randish And also the most interesting thing about this is that it creates an abstraction layer in which you don't even have to know that you're installing no Demon, you simply enter the project and do a send mystol and this is already documented this This is magical because you can enter a project you do an mpm you see here all the scripts you have available and you do mpm and directly this is already running for you no Demon and it's working perfectly for you my most honest opinion It is that you avoid doing it globally, it has other problems with doing it globally. It is true that one positive thing in quotes would be the one that they have commented on, so you install it once, although for that you have alternatives such as using pnpm, but a rather negative thing is installing it once. only once is also that every time you change the version of node You are going to lose all the packages that you have installed globally and therefore you are going to have to Reinstall it I am going to talk to you now about the headers, notice that we have said this header here not the html text we could make another one so that we can quickly see the difference and so that you can see how we could serve static files it works on a web server and now later we will make a pencil and we are going to put another one here the shift we are going to put this here so that you can see another one header that is interesting and you can see how it is done and how an image would be loaded, for example, we are going to look for an image let me look here for an image Look at this that is something there happy we are going to put it here in class 2 okay look at this image happy with the plaque We are going to give her a plaque Ok, one thing that is super important If we want to serve an image, for example, what we have to put here is to tell her the request of ayurel no and specifically tell her that when someone requests the super nice image, we will dot png We are going to respond with this image because the first thing we need for sure is to change the headers, no, so now we are going to tell him. Hey, the content type is an image and it is of the png type . If you want to return a Jason and such, that can be done by frameworks automatically, but we here are the ones who have to tell you that we have to try to give you the information to know how to return what and how to code it. We have already seen it before with the html now we are going to bring us the file System vale again tfs this library to read precisely the file this one from plate dot png So we are going to make a read file Here we are going to clear we are not going to read super nice image Instead, we are going to read the plate dot png and here once we have the image what we can tell it is Look if we have made a mistake, we are going to tell it the status code that is 500 something has gone wrong or do this with an internal error server error ok look for example I had put the URL wrong So we would have entered there then we tried it not to see how how this happens if there is an error reading the image ok we have to treat it super important always treat errors and if not What we can do here is tell it, well, the status code that is 200 by default. In other words, the header would not be needed, we are going to move it here, it is important that it only happen here because if there is an error and we put the content content on it, it is another one, well We will already have problems, in fact, note that now I don't know if in this case it is going to crush it, I think we can try it, but of course, note that we can set the default response as html, we will see, this works or it stays as html, let's try it and see what is happening and now I just have it all we have to do is return the information that we have read Note that this is a very cool non-GS thing that many times what it does is channel the data Stream So in this read file that here we have this Data that is a data buffer an ens buffer is a global class that is used to work with binary data Of course if you read a dot txt file an image or whatever what is happening is that it reads the file but it is not reading it as you expect what it is reading is the binary data then it saves it in a physical memory space and there in that space reserved because it has that data temporarily so that you can treat it in this case imagine this we are reading this file that is an image but it does not know that it is an image simply what it is doing is reading this binary data it leaves it reserved in a space and let's say that there in that reserved space is a buffer here we would have this data the buffer but as binary data that is No it is not an image yet nothing what we are doing is telling it that binary data I want you to send it to the answer but be careful this answer is a png image and that is where the magic of the encoding happens where the browser Even though we are sending it the binary data as we have read it as we are telling it that it is an image then it will be able to make it think that the buffers are useful when working with files images for cryptography for anything other than text strings flat numbers and stuff or jasons normally They are useful not and are essential when working with data streams for how data is read from file or to receive them through the network Very well, now that we have the super nice dot png image, let's see if this works We go here to our localhost localhost one two three four bar super nice image Ok and pressed let's see what has pressed But because it's not that tight, it's that we haven't even raised this upright in randep okay let's see now okay obviously the image is very big so that's why it appears like this but look No now it has detected that it is an image and that's why it has worked correctly if we go Here we will be able to see that we would have the content and there and that it is working correctly no contentive image bar png so this is how we are sending the images from a server we are going to talk about the subject the methods that we would have And that is also how we fix We are going to put this a bit in another one, we are going to put the routing.js here because this is fine but hey someone will tell me [ __ ] but they are setting up one here to have different routes which is a bit annoying And surely you are right what we are going Let's do it, we're going to create our first API, I'm going to do it from scratch so we can review it a bit, okay No Utah ttp and so you have to catch this almost automatically to process the request, we would have this for Now we're going to leave it empty to create the Http server create server and here we process the request and now server Listen I'm going to put a two three four ok And here simply the consort of 1 2 3 4 and that's it so the important thing is in the proser request to create our first API We are going to have different methods because until now we have only seen the get method. The get method is what a web page does by default when you enter the URL. You see that it says get method here, but it is not the methods that exist. In fact, we are going to mdn we are going to have that there are but a lot the most typical are get Head post delete and options and pads 3 also exists but it is used not that it is impossible to see it and the Connect one too but the most typical especially speaking of http are the ones that we have seen not the get good to make a request that what we want is to recover data the Head what we are is exactly the same as the get what happens is that the Head is used as to ask if the request can be made but not you need to give me the body ok I don't care about the body of the request I mean I don't want the response of the body I don't want the data The only thing I want to see is the response header that's it sometimes it's done It's like get already Sometimes it is done as a previous step to see if a person, a user, has permission, for example, because of their tokens and things like that, okay, then we had the message that is how to create an entity from a resource, then we would have the put that would be to replace a resource that already exists then we would have the delete which is to eliminate one of the resources we would have the options which is the one that describes the resources that can be done in that peace that the options many many times is the problem that you have with the cors is what the browser does to make a request to a Point as to tell it Hey I want you to indicate to me with this this URL that I want to access What are the modes that I have allowed communication with you and what happens that the options is precisely the one that returns the Kors headers and tells it OK, so you know that the communications we can have are limited because Kors says that it is not accepted for this domain, for example, normally the post is like creating a whole resource and instead the put would be like updating a part but in the end there are people who also use the Patch for that and the put uses it for everything In fact I recently read a quite interesting article Why they didn't use post and only used put seemed quite interesting to me . There are a lot of stories . the entire resource and the Patch It would be to partially modify a part of that resource, then you may find that there are people who do not use the Patch at all and things like that. Now that we know the methods, what we can do is from each request we are going to extract the mezzo and urell Ok and we are going to make a switch yes Gentlemen we are going to make a switch a switch where we are going to have the Case of the get and here we could have another switch I am not a big fan of this and then we will fix it where we would have Hey if you go to case This So we are going to have to make it html and it is on the main page and then well we could make a break we can make a challenge one here we are not going to make the image super pretty we are going to have a barrabaut ok so this starts to look more like to an app in fact we are going to do now we are going to start now with a pencil for example look Pokémon barradito ok Look we are going to do here Pokémon Pokémon Pokémon barradito ok normally the Pokémon barradito this would be all this that you have here Well of course this is a lot of information but hey what You can have it just the same, in fact we're going to put Pokémon here Okay and we're going to put dito.js here you see here we have this this is a Jason to sack what we can do here is const edit ok js wait why don't you like what it is he complains about I don't know what constituency Ah, but you've never tatized It's just that Jason is so long that he goes crazy we're going to use a modulo.exports modulo.exports here and we're going to put a little finger So we already have Tito's information The interesting thing This is very cool and it is important that you know it in common Yes, what would be the classic modules of node? You can import Jason automatically. You can import Jason automatically . this This is accepted because this is a Jason and you can import a Jason here to sack ok Pokémon slash dito point Jason and this eats it ok ok Jason now we can put the header here application slash Jason Ok and when it comes to answering important We are not going to return the Jason automatically, what we have to do is transform it first into a String, what we have to return is the String and we could do the same thing with another one. We are not going to do all the cases, but we are going to start now with one we could not tell it that the default Here we are going to put it as a 404 obviously we can put it to be an html ok happy with the html charset ok And we would already have the get this we close it here We close this here and we could also have the Case here of the post So we could see each rich method and we would have the post and I am going to show you an extension to do this type of thing. You will love it because try this in postman and this type of thing I am not a fan of anymore postman actually makes me quite lazy because it's not that it has become so big that I think there are better alternatives and there are a lot of alternatives So you have Thunder client it has rapidline and I'm going to show you one that for me I think is the better because it helps you understand a lot of things so we could have Case here we are going to put Imagine that the same Pokémon you could change it no let's go Let's do it with the post So you could create a Pokémon, that is, we're going to put it So that it can be created, that is, Pokémon, okay And then in this Case we would have to read the data, okay, we're going to put this because this Case is making me Ouch [ __ ] That put two points there and the colons come later This is where we are going to do there is the trick okay this here and that's it okay we have the get we are going to test the get first I am going to show you the extension and then We start with the post and we are going to see how we can retrieve the information from the post. Then we are going to see the extension the extension is called Rest client for me the best one in this case is fine because what you will be able to do with this extension is to have a file here Where are you going to be able to how to explain each one of the resources are you going to be able to him Hey, look, you do a get And then here in this URL You can tell him the protocol, you can pass him the headers and you can pass him the body, there are others, you have, for example That I like Thunder client, which is also very cool Thunder Clio is this one here, very cool, although this one is more visual. You'll see that Rest client is fine, you see, it's more visual so that you can save all the requests and also another one for me I really like rapid client rapid client It's here that I have it installed but I have it now deactivated, it's also what it can do for you is create the types of type and all this which is super cool I really like how it integrates and such and you can synchronize it, that is, you can save a little like postman you can save all the calls in the cloud and you can synchronize between different Editors that is also super cool but the cool thing about the Rest client and for which I am going to use it is It's very simple and for what we want to do as well, I think it's perfect and so we don't have to worry now, use whatever you want, I know I always don't know this type of It's just that I like thunderclayo, I don't know what and I don't know what's wrong with you that it's like a football team that you wear I love all three I usually change to get bored but if you're from the Thunder client team hey you use the one you like the one you want what is it What do we have to do with Mira's? We can create here a good ttp or Api request Api point request ok http sorry and here what you can do is how to say the requests you have in your Api you can't say get and Here we are going to do http localhost one two three four and in this routing we have said Pokémon bar Ok We are going to copy it we put it here it is ok only with this which is also super cool because you already leave this there you can upload it to github anyone can upload it and then try the API only with this Note that this Send request has been put here Well, if we hit it here Pam is fine, she has given me a 404 In other words, something we have done Ah, why have we not raised it? at least we already know that they give us 404 I haven't had to go to the browser switch from the editor to the browser and such What happens that we have raised right now if we look here in the pack you see here we are raising the one we could put Def 1 here Def 2 and what this woke me up no Demon and here colon routing ok colon routing.js and now we are going to do mpm Run Def 2 that has passed it ok there is some problem in my code I am going to leave it running and we look at the code what does it do It happens that I have not closed something No, this switch I have closed this one I have also closed this switch too and this one is also okay is that there is one more okay So we are going to leave it here important This look, look, I know you can see that the inter is exped lexical declaration in caseblock if you were in the deads League the other day we saw exactly this error because this error is very very interesting and the constant if it should be put between braces why Because if not what is happening Is that this constant if you have another Case here Imagine that you have a Breaker even if you have a break We have here another one that is another one ok And here I put const Body here we have a problem and the problem the problem we have here is that look, you see that it tells me the identifier of the Body has been declared again and it is because the constants and the led that work is because of the block scope and the blocks are defined by the keys What does it mean that in these keys within this switch these two constants are being shared they are colliding because it has the same name because it is through the keys so we would have to put keys in the Case You already know that they are optional, although they are optional, it seems to me a good practice to put them normally, now it complains but now it complains about something else because we are not using it, you can see that now the API that is open is working perfectly, let's go to our API point http We send the request And notice that now we have our first Api with our first Jason with all the information that has taken 7000 seconds we have all the responses with all the headers, that is, it is super good We are going to do the one in the post that we are also going to do like backwards Why are we going to do it backwards because we are going to make the request first how are we going to make the request we are going to see we are going to make a post and see here Pokémon bar ok we are going to make a post and now we are going to do htp Good Look perfect, the information is already happening to me here. Although I would like the content type to be what we want to send, that it be an application Jason, that is, we are going to say an application Jason content header, it is worth separating each of the requests you have Putting a comment is okay, you can put three little things like this here and you can say here to create a Pokémon, for example, not recover information from the Pokémon ditto. The good thing is that with this, notice that we already have the request prepared here to make it to our API Although now It does not exist if we do it in request Ok, well, it is doing a Waiting for me because this has stayed there in little birds because it has entered here but it is not doing a res in it is not doing anything, it does not even have one by default to say a 404 So that the first one that we are going to do is going to be 404, okay so that it does not enter any Well, at least they return 404 to it, we are going to put this and we are going to put 404 here We will remove this and we are going to fix this case This is a very interesting where you also learn callbacks How parses work In ogs what happens when we make this request we will want to send this information in the body of the Body, that is, when we have seen here that we can make a request we have also seen that it we could send a Body as a body because there are times when we want to create something in our API, therefore when we create this we tell it Hey, this is the information I want to send How the server receives it Well, the server will have to read it of the request and in the request what do you have to do then listen to the Data event as it arrives Delta will say Ok I'm listening to the little vein that is coming to me because of course the body can be very large and therefore as there is to think as if it were a pipe, not a pipe where water passes through, the water is the information that we are sending the request, so what we are saying is good, here you have the body of the request, but of course, think that this is a pipe, why not? it is or you have everything you have nothing but information is coming to you And who doesn't run away what we have to say is hey what I have to do is okay while the riku is receiving information for each piece a chang would be like a piece is worth for each piece that I am going to do, I will be saving it in a variable that I have here, which is this one from Body that we are going to put with its led. shang what happens that this Shan is a buffer So why is it receiving binaries what do we want here well what we are going to do is transform it into a String because the data that we are sending here is bi data while it is being cleaned but when we are arriving at it we can transform a binary to a String and when transforming it directly it will be encoded exactly correctly How would I paint this Look so we can see a bit How would the thing not imagine what we want to send This is okay we send this what is it going to do in the chanks Well then first Or better the same this arrives in the next chang the same arrives This is okay Why Because it doesn't always it doesn't always arrive exactly the same length not in the next one Well maybe it arrives This is okay imagine up to here No then here we would have a chank then we would have this chang then we would have this chang then in the next one, well, we would have it, it's worth a little so that you get used to the idea, it's not worth here below, well, the transform and not here up to here. So we would have a change here, I'm not going to separate it for you with the comments, these are okay, here we had change 1 2 ok it is arriving like this because the request is how the requests are made And you can easily see that and you can imagine it, it is not going progressively so it goes in bit by bit so in each bit We are doing this and what do we do with everything this this at the end is a String that we are transforming transforming here and we are saving it right here so here what we will have at the end so what we will have at the end is all the changs that will have been gathered and we tend well here something like this is obviously well escaped but So that you get the idea, okay, we would have something like that, okay, we would have put it all together when the last Chan has arrived. How do we know that the last Chang has arrived, that is, when we know that it has finished ? what it means is that when we have the event that it has finished, it will tell us request on end Ok, well, we have finished if we have finished What does it mean that we are going to have the deita and we are going to be able to walk everything we have in the body is fine because we already have all the information there we could do different things here we could Call a database that we will do this in the course a database to store the info is fine for example we could do whatever it takes to see that everything is working correctly what we are going to do is return the same data to see no so we are going to write and I am going to show you another way of how we can write the header that I have already shown you the status code and here put the set header but you can also write the header directly while you are sending it, you can do Write Head networks and you write the header and tell it ok 201 because 201 we have seen that it is when the resource has been created in this case we are supposed to have called a database to store the info and therefore we have saved the resource and we could tell it that it is a Jason application with the charset or etf8 and we can end here saying Hey, we are going to make a Jason String of just the data worth of the data that we have received at least we should see that the same thing that has arrived in what it should return and here, well, we could do it Here we are going to make a break so that it does not reach the next case and we would have it Well, with this we would have the post If we return here and click on seen request okay note that now it has arrived that is, it is returning me Exactly the same look I am going to modify this we are going to put a Data here and we are going to put Deep Now just so you can see that it is really doing something okay Send request Time Stand when it is timstein has been created, well this here we would have the information that has been created that has been received and this is the moment in which that resource has been created and with this we have already made an API for get and post saying that someone will be here in a totally native way [ __ ] But I'm not going to start doing these things. Well, it's important that you understand it because this is how Express works below. Now let's see Express Express is surely something you have to learn with Nou Yes It's Express Express is the most useful and most used framework and it's a framework it's okay that there are people that it's a library it's a programming language it's not a framework and it's not my opinion Ok it's a framework because they say it here it's a web framework for It is not a framework that allows you to make web applications APIs that you have that are used underneath in a lot of other frameworks. For example, next next a lot Wepa I think it uses Express There are a lot a lot of tools that you use in your day to day and they use Express Express It seems a lie but it is a library that It has been running for ten billion years in which unfortunately it is not updated as much as we would like but in the end it has really been very reliable, widely used and that it continues to be used and has not had any problems, we are going to see how to use Express to recreate what we have fact What differences are there that Express brings us and how little by little we can migrate what we have learned how it works and all this but to Express and how it helps us and what is its advantage having said this let's go with Express dot express.js the first thing that we have to do to use Express is to install Express So we go to the 2 mpm Express class folder And in this important case Express is a production dependency So Exact mode is valid so that we don't put the important caret and now in the package on there we have our beloved Express we are going to put here a 3 and Here we are going to use node watch 3. express.js is fine Let's close this and go to our Express file the first thing we do with Express we are going to import the framework of Express and once we have the framework what we do is create the application with expr Now here in Express here you have different options that you can pass to it and such for now we are not going to see them but surely later the port we will have the port let's to use 1 2 3 4 if not we put an environment variable but then we are going to create our own dot we are going to do a get here And what do we do here what we do here look at the difference Not here what we had is a function that responded every time to all the requests and it was within the function that we had to discriminate according to the method according to the route no and we have to tell it Hey well This goes Here This goes here Here what we are going to do is do it the other way around it is based more in the routes what it means is that we tell it the app and then we tell it the action here we tell it the get method So in the application every time it receives a get in the route bar Okay then I want you to answer me and here yes we would have a function that would be the one that responds when it does a get on this route ok So now you can see a bit of the difference in how it would be here in a very imperative way that you have to see the method the route and maybe do it here that what we are doing is directly tell it when the app receives a get in this route So you execute this function Ok and now we would have the answer this answer that we have here is a little more special and broader than the one we have in nouches notice that we have to put the set header we can do the status code like this status code and tell it the number what we can do in Express we have an Api that allows us and it is also chainable we can tell it Hey here the status is 200 I already told you that the default is 200 But at less so you can see it ok And now we can send and we tell it my page ok this would be our our first in Point what we are going to do then we are going to pass it to have the Api ok to make an Api not just the html On the one hand we would have This Okay, our first route and now we have to do the same as before, since we have to raise and listen to a port, that is, on which port our app is going to work. We have told it that we are going to listen to it from the environment variable in two three four by default and here it's exactly the same as what we had on the other site in fact this part of express is literally literally this right here literally because it's the same api underneath ok so if you were ever wondering where this was coming from this is well something from node basically is using the same one very well then we would have our first route here we are going to see if this works we raise the 3 ok in a two three four we go here ok important differences ok I already have my perfect page here but notice that I have not put the content type and has automatically detected that this is an html This is one of the big differences when using Express that express automatically will detect many times Which is the correct content type to use depending on the response you are using So that's it for you to remove a lot of code and in fact what you are going to have here is that we are going to be able to remove this 200 status, you can tell him directly res point sent no and here we would have the answer as we have directly returned an html and by default it is setting it to be html but of course if we told it here Hey well of course No it will not work exactly like that because we would have other ways for example to return a Jason No, here we would have to return a Jason directly, we would have a method that is Jason and thus automatically inside what it is doing is to say Ok, well, pass me the Jason, I already do the String and I change the content and everything and then when you enter you see It is already returning a Jason with everything correct This is a great wonder that you have in Express that makes this a lot easier for you but obviously apart from this, apart from this facility, it also has the routes, for example, before we had seen how we had done the post, let's go Let's migrate this post that we had done, okay, we're going to migrate it, so I'm going to copy it, I'm going to copy it a little here, and let's see, we wanted to make an up point post . Let's see, okay, in here I copied exactly what we had done before, the good thing is that it works the same, that is, this works Exactly the same, there is no problem that this works, let's see, we could make some changes because, as I told you, this thing about Jason no longer we need the write thing we could put the 201 on it if we wanted but we could simplify all this instead of needing to do all this Notice that one thing Jason passes We still need this but the write Head and all this we could do redos dot status 201 dot Jason and send the Data ok We could remove all this and we don't need to write the header manually but everything else right now we will fix it later because we are going to use a very interesting concept that Express has but we will see if this works correctly If we can still create our our Pokémon by sending it the information Let's go here be request ok And notice that it continues to work correctly here we have the status code 201 And notice that we have a new header among all the headers that we have in the response there is a new one called ix Power by Express when we use certain frameworks Or maybe they add an extra header to indicate to the world that this is being used also sometimes they even use it for statistics issues in which for example wapalizer can look at it to see if you are using expresser es an extension that tells you what technologies the web page uses Or also for statistics, no, so there are a lot, a lot of frameworks that do this kind of thing, but I recommend that you remove it, okay, why? Because it turns out that this is a The problem could be a security problem, luckily at least only the technology appears. Why? Because if it also appeared in the version, it would be very serious. Imagine that you have version 4.11 Ok and as a result of 4.11 you never update it and it has a critical Back a security failure and it appears there this is a problem that often happened in wordpress and I say all this so that you know that in this case nothing better happens if you leave it but it can be deactivated for that you can go here and in the app you can make an ap point disable ok x Power bike you see you can put this line here and now if we save the changes and send again laques ok it has disappeared I say this because it is quite interesting that this type of headers does not give you anything at all remove them It's not that it's a big deal but you are avoiding a few bytes ok very well this works Exactly the same as we had before we already have good I could also do as we had the get here no I'm going to do this too ok so it stays Exactly the same and so we have here the Pokémon get we are going to catch the Jason of the ditto not that this is in the box bar Pokémon bar deto Jason you would be surprised by the apis that are like this with that is, importing jasons directly Tito is okay well here well we could make networks point Jason returning Tito we already had the get and the post So we would have Exactly the same as we would have in the other no except the 404 what happens with the 404 how do we do a 404 in Express if we look from top to bottom how our application is working we won't be seeing Wait I'm going to move these things a little bit we'll be seeing how the application works it goes if you have a get and you go to this URL it will respond if you have a post and you go to this URL it goes to answer But what happens if you go to localhost 1 2 3 4 and go to this URL ok by default it will put you here a Canon get it will give you a 404 in not Found but we are not treating the error exactly right to do this what What we have to do is use a global way of treating all the requests and the interesting thing is to do it in order, it has to be the last one, that is, we have to put it at the end because they go order first, it will try this one first, then try this one, and finally it will to get to this if it gets to this and we don't put any kind of I mean we're not putting any Peace no URL there and directly here we can already tell you that this is a 404 because this is going to be the last one The last one to which it's going to arrive and it's going to respond like we put a period Us here we could put period get period post we could use any but when using a period use this is like putting an asterisk this means that for all actions be it get post options whatever it's going to go through here now when saving the changes if we go here look now I have a 404 because I have told it to return an html with the 404 ok So we already have this and look to compare how we had it before and how we now have it with Express that there are 35 lines and before we had created the server with 56 A very simple example Notice that the difference is 56, that is, they are 20 lines more or less, no, but let's go for more, a lot of the magic that we often have with Express, okay, it's the fact of the maidelwers What is a maidelware And why are they important to see in Express I'm going to tell you I'm going to make a sketch I'm going to make a sketch you like sketches imagine we would have this would be like the request not that we had before because here we had here the request we have the wealth imagine that this would already be in Express we have this for dad this is Express Express our wonderful Express therefore the wealth comes from outside Not from outside and here we would be dealing with it would have it would enter from outside and we will be dealing when we enter Imagine that we are entering the about to get Pokémon Tito vale This pokémonía the URL URL Pokémon ditto vale the mezzot is get vale this would be the request that is being made from outside enters Express and here we find this code not here O either we have This perfect vale and therefore we are going to put it here up get no and here the function and here well it says ok it's yummy it's you have to enter here it's yummy you have to enter here ok here it's processed we do the necessary processing we are going to do the processing that is necessary here pam pam pam we move it like this well I don't know why it has moved why you have moved [ __ ] It is that there is one thing that makes me quite angry with excalid drone which is that you have to give it more than once now ok And here we would have the processing no process the process is exactly what we have in this FN that is, this is where it would be processing but it turns out that in this case it is because we only have one no I mean it seems that we have only one and therefore what happens here is that here we have the request It doesn't end here we can make this smaller now we could actually put it up to here ok And here we would already have the response that we had made Here this would be the response and the answer Well , I would go to the user, okay, we have the request, enter here and if it were a 404, well, this would go there, I would see that 404 does not detect such, but here I have found it What happens, this process is very good when you just have one when you have one But what if I tell you that we have a special thing in Express that you can make them go through all the rich is that you want before it arrives exactly the one that this is about here it is called mydelwer and the maybelles what it basically does It is that the request the ones that you want also go through there they process or do anything Ok they can, for example, extract cookies validate if the user is logged in extract Jason's information any type of logic okay it's like something prior to treating the request and here then later it what it does here would be to call the next method to go to the next vale And it says Ok when I have finished processing it in the maidelware what I call is the next method so that the request continues traveling we will see it in an example with a code the maider is a function that runs between the and the response So how do we have to put the my desware obviously we're going to want to put it before so we can put them here See how simple it could be In fact here we could put use and such and we could put request and there is a third parameter called next Why Because with next what we are going to tell you is that when we finish doing here what we want to do here you can do my first my first woodware and here we could for example do a tracking we can track the request to the database check if the user has cookies you could do what you want you can do a baileware that affects all requests Or you can put here the requests that you want to be affected ok you Here you can put the URL that you you want, it can be, for example, that only in all the urls that start with Pokémon that affects it or it can be simply in the Home It depends on what you want, normally many are for everyone, also even the Mayans, you could make it for one for a specific action only for the gets only for the posts all this type of thing for now we are going to make the first madelwer that is like this but very important eye you can not forget the next and you will see why Because if you leave it like that and we do nothing else and we put this what will happen is that if you try to enter Now we are going to do the Api here and I am going to get the Pokémon ditto and I make the request ok And notice that I have executed here my first maidelwer We have here but I'm not receiving the response it's here whiting because I'm not receiving the response because I'm not answering it has stayed here I'm not sending a response and it doesn't know how to follow the request either because I'm the one who has to tell it that you have to continue So I have to tell you next I have to tell you that once I have finished doing what you want to do you have to continue to the next corresponding route so once you get here next means that you are going to try this next is going to try to go here, which in this case it will enter because the URL does match or it will try with this and if it cannot with any it will go to the 404 that we have left here at the end we are going to see it now as I have put the next now yes I do this get request here. You see, now we have the answer but we see that it has also gone through my first Maid delware. So it has gone through the maybelliware but at the same time it has also answered me and thanks to this difference of putting the next now well for what can we use mydelwork is very good all the examples you have given me But you have not convinced me Give me a real example Well there is a very cool example that you will like and Look here we would have for example all this information imagine a maderware can going after the routes is a very good question and the truth is that yes it can go between routes and it can go to the end for example this does not stop the last one that is going to arrive this does not stop being a motherward if you see it what happens is that it is a Maid delware it is not a maidelware in terms of concept because the concept of mydelware is like something that runs in the middle no and it is supposed to be in the middle between the request and the response like something like you could try to understand it Even as a Proxy it is something that intercepts the input request that you can process it can transform it so that you can then answer it calmly you cannot use in madeleware to put the means for whatever you want is that they are a lots of possibilities So as a concept this would not be a maidelwer But syntax wise it would be ok So it would be a bit like this a dewer and a Proxy can be quite similar in that they are intercepting ok But in the end the idea of ​​what what a maybell and a Proxy do are different because a Proxy the idea would be more to intercept requests to change them and move them no and say Well, this was intercepted but I'm going to make it respond with This other maidelware goes a little further, that is, in the concept of treating the rich, no. In other words, not only intercepting it, but what we are taking a little further. It is a function that what we are doing is that it does a task for that is called like Maybelline because what it does is more of code not so much of trying to do a redirection that could also be done but they are similar but they are not exactly the same in concept because the next one would not be so much of doing something you know to have validation logic and such but it would be more to orchestrate that we could think a little about this not a Madero could reject a request could reject let's go with this now that we already have the middleware okay if I say madelwer and it's good middleware let's see one that you are going to love Because many people do not know where this magic comes from look here we have middleware maiderware meat sorry Look at this one here we could extract this and create our first middleware that we can reuse anywhere that gives us the opportunity win what we could do Look, now that we have done this here you see this the led Body I do not know what I do not know how much I am going to copy this and we are going to create this one that I am going to transform it I am going to remove this we are going to leave the next Ok and we are going to say look if the richness is different from the mesot That is, the post sorry if the month of the request is different from post what we are going to do is go to the next point now if the headers content type is different from application Jason This is an example because there could be cases in which this doesn't interest you And such But hey, it's just so that we differentiate it to do the example Ok so here only request arrives that they are and that has the content header and application Jason is ok for that What we are going to do is have a middleware for all the requests that pass there that are post and that have the header of the content application Jason we are going to extract from the Body listening to the Roku it is a Data we are going to transform the body and when we finish what we are going to What we are going to do is mutate the request and put the information in the rig.body So ​​what we are going to do is mutate that request because the rich is It is one for each request ok This request object that we are going to be seeing that is traveling to other sites is exactly the same as the one that will arrive later this object is unique for each request This is going to know that it is something that is constantly repeated in Express to mutate the request and change the body this is something that is done internally in middlewares or that you might even do because you are interested but it is normal because the wealth is unique to this function that is receiving the request and the response This is for each request ok This is not a global object that changes the wealth not this is the wealth it is specific because in this request we have the URL the IP that has made it a lot of unique information of that wealth ok So with this we have already created a middleware in which we are extracting for all requests that are post we would be extracting this and we don't have to worry anymore we are going to remove this next from here because it no longer makes sense because we are doing it right here and we would have we might have problems telling it that it has We have to pass it twice and now what we can do is that here, notice that everything we had done here we no longer need it, we simply now know that this works that we can pass it the rec point Body, that is, here we are going to have the request .body what we have dealt with in the middleware in all this part that we have done here we have extracted that logic that was from a URL of a specific pass or an en Point with whatever you want to understand we have extracted it to a middleware to be able to reuse it super easy in any site or even in any project and now when we simply make a post, whether they are Pokémon or whatever, we can easily review request.body because there we will have the information, we will save the changes and we will try to see if the rich one is it works And notice that in a totally transparent way 201 continues to work perfectly we have it here because in the Pokémon Notice that I have told you that this is 201 and here we have the ricos.body here with the rickbody we should save this in databases we will see this later in the course okay but see here we would have a very clear example of how to use a middleware And this would work for cores for example you could fix the choirs with this you could serve static files you could do a lot of things that order of requessinex is mandatory It is indeed mandatory because they are parameters because they are ordered they are not named yes for them not to be mandatory they would have to be like this they would have to be like this but it is mandatory because they are parameters by position not by name so it is very important that you leave them like this Now that you have seen this, surely many people who know a little about Express will be asking oysters but don't see what a pain to have to do this obviously this is a pain and that's why when I 'm going to leave it I have commented here but just so you know you can do this much easier thanks to Express because Express already has a middleware that does this for you . ok see This is working Exactly the same Well, the date thing is missing because I have removed it because it is logical that it was in there ok because you see that the date was here the date Now and such we could put it here but Exactly the same thing that we have done well it totally natively in Express And now you will wonder but man but if it comes but if it comes why why have you made me do it from scratch so that you understand it because the things that you don't know where they come from are imperceptibly not differentiable from magic and what I want is for you to know how things work If you don't know how things work the problem you have a lot of times is that you don't know how express works . you know where they come from and that is what it means is to have a superficial knowledge and what I want is for you to know understand and dominate you do not hear So I hope and friends that you have liked the class we have not had time to finish the dotems and the next class We will continue with we will do the dotems we will see more middlewares such as static which is quite important we will see what to walk arguments and we will see more things

Channel: midulive

Views: 104,392

Keywords: midudev, midudev twitch, curso de nodejs, curso de nodejs desde cero, curso de node.js desde cero, aprende a crear una api desde cero con nodejs, aprende a crear una api desde cero, node.js desde cero, crea tu primer api desde cero, express.js, nodejs y express, framework express, curso de node.js con express desde cero, node.js, express, javascript, como crear una api con node y express, como crear una api con nodejs y express, como crear una api con node.js y express

Id: YmZE1HXjpd4

Length: 84min 53sec (5093 seconds)

Published: Fri Jul 28 2023