1 00:00:01,710 --> 00:00:03,950 well in this video we are going to 2 00:00:06,710 --> 00:00:13,570 save the data in our mongodb database ok the other day in the last video we 3 00:00:13,570 --> 00:00:22,949 stayed to make this form that I have put a bar I have put another background ok I have given it 4 00:00:22,949 --> 00:00:30,149 a certain appearance which is what I told you in the last video because you will try to do 5 00:00:30,149 --> 00:00:38,490 you ok I have put a source a little bit everything we have seen well then to see what 6 00:00:38,490 --> 00:00:45,210 we are going to do in this video which is this that I am going to show you now on the one hand we are going to see the 7 00:00:45,210 --> 00:00:58,530 development tools this was ok and then here I am going to put a name I am going to put an email 8 00:00:58,530 --> 00:01:11,180 and a password, remember that in the password I am putting 1 2 3 4 5 6 7 8 9 because we told it 9 00:01:11,180 --> 00:01:19,500 that it had a number of characters, it is worth remembering that if it will not give us an error, it is worth when 10 00:01:19,500 --> 00:01:29,060 we give it to register, we see that on the one hand it has returned the value that we printed, 11 00:01:29,060 --> 00:01:36,560 not the object that we printed because in the console in yesterday's video all the data and 12 00:01:36,560 --> 00:01:46,739 on the other hand what it is giving me is the answer from the server and from there it is telling me you see 13 00:01:46,739 --> 00:01:57,340 that it already has an assigned idea that it has good because everything that we had configured in 14 00:01:59,060 --> 00:02:29,460 in the backend, then status 200, ok, the prototype, in headers, application, ok, I wanted to see if it was giving me from here the token that is also created and that we have also sent it, 15 00:02:29,460 --> 00:02:45,879 but from here I can't see it, well, it has the ID, that's what it is, I've already registered to see it, I come to mongo 16 00:02:45,879 --> 00:02:58,590 express, it is worth remembering that from this web we could see our database with all the 17 00:02:58,590 --> 00:03:06,870 collections is worth and then here when I update I already have Carolina and all the information 18 00:03:06,870 --> 00:03:13,650 that we saved from the backend is worth so everything works for us well then we are going to see how it 19 00:03:13,650 --> 00:03:22,169 works how we do this is worth first tell you to make the connection to send the 20 00:03:22,169 --> 00:03:34,110 data and make that connection, that post, to the backend, from the front, we are going to use Axios, okay? Axios, 21 00:03:34,110 --> 00:03:41,250 when you use it on the one hand on the front to make communication with the backend, that gives 22 00:03:41,250 --> 00:03:52,349 a course-type error, which is when it is a sharing error of resources of different origins, 23 00:03:52,349 --> 00:04:01,550 it is worth then that in the back-end you have to install the course with the npm and from the 24 00:04:01,550 --> 00:04:09,370 apjs file we have to configure it all that I am going to do now it is worth now it is only 25 00:04:09,370 --> 00:04:17,410 so that you can get an idea, okay, and once we have done that, well, it would no longer 26 00:04:17,410 --> 00:04:25,129 work, okay, the next steps of logging in or doing things on the database would have 27 00:04:25,129 --> 00:04:31,029 to be easier, okay at the end of the video if I am going to tell you I am going to ask you a question to 28 00:04:31,029 --> 00:04:38,649 see how you think about it and how what solution you would give it is worth and in the next video 29 00:04:39,910 --> 00:04:49,600 I tell you which one I tell you which is the solution that is usually given, okay, well then, as I was 30 00:04:49,600 --> 00:05:02,319 saying to do the communication between the front and the back in we are going to use 31 00:05:03,680 --> 00:05:14,540 Axios and with Axios we can make a POS, a GET, we can make that communication, 32 00:05:14,540 --> 00:05:20,300 those HTTP communication protocols, we can use them without any problem. 33 00:05:21,920 --> 00:05:29,240 We have the Axios page, which is this one, then here 34 00:05:29,240 --> 00:05:38,500 well, it tells you how to install it, which is what we are going to do now, depending on what we are 35 00:05:38,500 --> 00:05:46,439 using, there is an example in which it tells you how to use axios and that is how I am going to use it 36 00:05:46,439 --> 00:05:55,139 now, it is worth then it does not have much more complication than taking a look at this if you 37 00:05:55,139 --> 00:06:02,519 you understand the part of the backend this will not have any problem ok we are going to go 38 00:06:02,519 --> 00:06:13,680 to our to our code and in our code the first thing to do is install that axios ok 39 00:06:13,680 --> 00:06:26,160 then I'm going to go to the client folder or in which you have created all the 40 00:06:26,160 --> 00:06:40,620 part of the front ok and we are going to install actions npm and actions ok it starts to install it 41 00:06:42,079 --> 00:06:51,060 and well we already have it ok now what I am going to do is inside the client src folder 42 00:06:51,060 --> 00:07:02,670 I'm going to create another folder, let's see here, what am I going to call it? 43 00:07:07,230 --> 00:07:16,629 for example, okay and this is where we are going to create the different js or jsx files or 44 00:07:16,629 --> 00:07:24,329 whatever is useful for the communication between the front and the back-end, okay in this case I am going to 45 00:07:24,329 --> 00:07:34,350 create a file that as we did in the back-end I am going to call it the authorization point j s 46 00:07:35,790 --> 00:07:41,670 ok then here the first thing we are going to do is import 47 00:07:43,170 --> 00:07:52,029 actions that for that we have installed it then we are going to import actions from 48 00:07:52,029 --> 00:08:09,319 axis is worth then the first thing is to import axios ok now in axios we have seen 49 00:08:11,079 --> 00:08:14,459 that it works by giving the axios get 50 00:08:18,459 --> 00:08:25,540 because the post point is worth the communication protocol that we want to use then notice that 51 00:08:26,899 --> 00:08:36,399 I'm going to make this a little bigger so you can see it, so I don't need to be changing the screen, or better, I'm going to change it. 52 00:08:36,399 --> 00:08:53,399 Notice how I put the post, I put the first parameter that I pass is the backend route to which I want to connect, that link that is bar user. 53 00:08:53,399 --> 00:09:07,399 In our case, you have to remember that in the backend we put API or we put VillablancaDAM2, before each route that we configure. 54 00:09:07,399 --> 00:09:13,399 Remember that we saw that in app.js of the backend part. 55 00:09:13,399 --> 00:09:16,399 And then we pass the different values. 56 00:09:16,399 --> 00:09:24,399 We can pass these values as a value key or we can pass them to an object, which is what we are going to do. 57 00:09:24,399 --> 00:09:34,399 When we fill in the form and click on the onSummit button, what we do is send all that information as an object. 58 00:09:34,399 --> 00:09:39,399 An object that has different value keys. 59 00:09:39,399 --> 00:09:47,500 ok then we send that with an object then it has the den and the cat the dn is good if there has not been 60 00:09:47,500 --> 00:09:53,500 any type of problem then you are going to give me an answer because you visualize it and if there has been 61 00:09:53,500 --> 00:09:58,600 some error you will also tell me we are going to pick up that error and we visualize it to control what 62 00:09:58,600 --> 00:10:06,179 has happened ok then we are going to use this structure ok which is the one that tells us 63 00:10:06,179 --> 00:10:17,399 the technical documentation of axis ok and then what I tell you in us in at least 64 00:10:17,399 --> 00:10:25,320 in the example that I am doing now as you have been doing I put let's see it 65 00:10:25,320 --> 00:10:34,059 we are going to go to our code again and in the part I do not see it in the part 66 00:10:35,559 --> 00:10:46,620 of the app js you see when we put the yus and the routes that was where we declared the routes it is 67 00:10:46,620 --> 00:10:54,179 worth remembering that within routes we had the routes in the routes will be in the register the login 68 00:10:54,179 --> 00:11:02,700 the logout and the profile and in ppjs I told him ok because we have all these routes but also before 69 00:11:02,700 --> 00:11:11,360 you are going to add this part of the path ok then you have to take this into account if you 70 00:11:11,360 --> 00:11:16,019 don't have anything here because nothing because there is no problem we put the route directly but if not 71 00:11:16,019 --> 00:11:21,600 yes you have to take it into account when working from the front ok because you have to 72 00:11:21,600 --> 00:11:31,799 put the route that is then how we have several several routes associated with this part of my 73 00:11:31,799 --> 00:11:43,740 backend then the first thing I am going to do is create a variable here that I can call it api or 74 00:11:43,740 --> 00:11:52,340 as you want, it is worth in which I am going to put the http two points two bars 75 00:11:52,340 --> 00:12:01,139 ok and here we are going to put the local host in which in my case I have it in port 4000 ok 76 00:12:02,200 --> 00:12:10,379 if you have it in the 3000 or wherever you put the port that you have configured ok and 77 00:12:10,379 --> 00:12:20,980 then we have said that it is villa blanca dan 2 then we are going to put villa blanca here 78 00:12:20,980 --> 00:12:32,490 dan in lowercase they do not give 2 ok well and now I already have this variable it is only 79 00:12:33,990 --> 00:12:39,009 because to make it more comfortable when it comes to entering the code it is worth developing 80 00:12:39,009 --> 00:12:49,210 so I don't have to be putting all this string in all the requests that we are going to 81 00:12:49,210 --> 00:12:56,450 make to the backend, it is worth then I would only play with the API variable and that is comfortable, the next thing I 82 00:12:56,450 --> 00:13:05,450 do is that that request is worth then to do that that later I am going to call it because this 83 00:13:05,450 --> 00:13:10,250 request that I am going to make now, which would be something like 84 00:13:11,450 --> 00:13:16,029 axios dot post 85 00:13:16,029 --> 00:13:23,049 here we would pass it according to we have in our help in our 86 00:13:23,049 --> 00:13:27,970 technical documentation first is the route then the first thing that happened to him 87 00:13:27,970 --> 00:13:33,710 will be and be careful because here as I am going to put a constant a variable of 88 00:13:33,710 --> 00:13:45,279 javascript system I'm going to put the accent ok not the comma or the double comma 89 00:13:45,279 --> 00:13:50,620 neither the simple nor the double is the accent ok be careful with that because when playing with a 90 00:13:50,620 --> 00:13:59,740 variable I need to put that ok then here I pass the variable to pi and then I tell you the register 91 00:13:59,740 --> 00:14:10,360 which is about the address on which we are going to send the data to collect from the 92 00:14:10,360 --> 00:14:19,460 form that we have made, then this would be like this, this would be the first part, the second 93 00:14:19,460 --> 00:14:28,500 part because the values ​​that we are going to pass ok then this would be such 94 00:14:29,879 --> 00:14:44,519 the values ​​would be user ok and now as we are seeing the help we see that if we put the point here 95 00:14:44,519 --> 00:14:52,379 le metemos el de un tío 96 00:14:58,240 --> 00:15:09,000 vale y esto nos va a devolver un con sol punto lo con la respuesta 97 00:15:09,000 --> 00:15:29,129 vale y si no me vas a el error y nos vas a hacer lo mismo nos vas a meter un con sol 98 00:15:29,129 --> 00:15:47,730 error, okay, okay, this is the structure that is giving me actions, okay, well, but this you already know with how 99 00:15:47,730 --> 00:15:53,830 we have done the part of the back and such because all this has to go inside or we have to do 100 00:15:53,830 --> 00:15:59,289 an arrow function to be able to export it and be able to call it from different sites, 101 00:15:59,289 --> 00:16:09,769 okay in this case the site is going to be the network the red pack j s x is worth then this has to be 102 00:16:09,769 --> 00:16:17,009 put as an arrow function and then for that we are going to put the cons we are going to put 103 00:16:17,009 --> 00:16:21,830 with the sport 104 00:16:24,649 --> 00:16:25,210 with 105 00:16:27,509 --> 00:16:30,450 this we are going to put for example register 106 00:16:32,809 --> 00:16:36,889 request this is going to be equal to 107 00:16:38,970 --> 00:16:44,610 an input parameter that is going to be the user that is the data object that 108 00:16:47,009 --> 00:16:54,870 I will say the object of data that in this case are all the values that we collect from our 109 00:16:54,870 --> 00:17:15,160 form is worth and then all this and this I am going to put here and this I am going to format and in principle this 110 00:17:15,160 --> 00:17:24,579 would be my function in which I use axios to link with this route with register pass 111 00:17:24,579 --> 00:17:30,819 all the data from the form and then check if there has been an error or not this the den and the 112 00:17:30,819 --> 00:17:37,720 catch are not mandatory, that is, I could leave it only with the axios post, it is worth http localhost 113 00:17:37,720 --> 00:17:44,799 4000 villablanca dan 2 bar register ok I could leave it like that well this in principle I would already 114 00:17:44,799 --> 00:17:52,839 would have here I would no longer need to do anything else now I come to my register page and I want 115 00:17:52,839 --> 00:18:02,079 to save everything when I press the register button ok remember that it is when I press the 116 00:18:02,079 --> 00:18:13,539 register button ok that button in the form we have it as a summit ok and as it is 117 00:18:13,539 --> 00:18:21,400 type of summit when I when I create the form I am telling it that in this case I visualize 118 00:18:21,400 --> 00:18:30,259 these values, okay, well, the first thing is to import, sorry, that function that we are going to do, 119 00:18:30,259 --> 00:18:40,599 then we are going to say import register request, okay, it already gives me this, always remember to put the j s point 120 00:18:40,599 --> 00:18:53,720 or the jsx whatever it is worth remembering that and here what I am going to tell you in the form to see 121 00:18:53,720 --> 00:19:01,779 that I see it here it is worth in the forum summit it is worth we pass the hand the summit this 122 00:19:01,779 --> 00:19:07,859 now I no longer need it I am going to remove it and I am going to tell it directly that it passes the 123 00:19:07,859 --> 00:19:25,519 the register request and pass it as an input values ​​this is worth these values ​​which are the ones that 124 00:19:25,519 --> 00:19:34,299 it is collecting from the form is worth and this already because we would leave it like this well this in principle 125 00:19:34,299 --> 00:19:40,400 must work for us then now that is what I have to do because first start our 126 00:19:40,400 --> 00:19:50,539 server our bucket is worth then I am going to do I close I have the good mongo express it is not 127 00:19:50,539 --> 00:19:58,660 necessary ok I have it to then connect from the web that is already ok then I have the 128 00:19:58,660 --> 00:20:08,559 database also connected I have everything so first I start npm runder ok I start 129 00:20:08,559 --> 00:20:14,200 our server tells us it is already in port 4000 the connection to the database is ok it is 130 00:20:14,200 --> 00:20:20,579 all perfect I open eye I open a new terminal because on the one hand it is the backend and on the other 131 00:20:20,579 --> 00:20:28,859 it is the front ok so I open a new terminal well come on and now I have two and in this is 132 00:20:28,859 --> 00:20:39,180 where I am going to open that client then we are going to put the cd client and npm npm runde 133 00:20:40,480 --> 00:20:44,960 ok and we already have the client open ok 134 00:20:47,920 --> 00:20:57,339 this was this was ok then now we take we are going to show the development tool 135 00:20:57,339 --> 00:21:02,819 vale esto todo esto lo voy a borrar si me deja 136 00:21:07,420 --> 00:21:19,230 vamos a borrar a carolina y así la volvemos a meter vale listo y entonces ponemos aquí 137 00:21:19,230 --> 00:21:33,990 carolina carolina 1 2 3 4 5 6 7 8 y 9 vale y le doy a registrarse y me sale un error que es el que 138 00:21:33,990 --> 00:21:40,349 os estaba diciendo al principio del vídeo vale es un error de course este error os va a dar siempre 139 00:21:40,349 --> 00:21:47,230 cuando hay compartición de recursos de orígenes diferentes vale son diferentes dominios y entonces 140 00:21:47,230 --> 00:22:04,680 for safety, an error jumps, then this, let's see what it is, yes, I'm going to put a moment that 141 00:22:04,680 --> 00:22:12,619 has happened to me, okay, now you are seeing what the browser is, okay, you see the error that is course, 142 00:22:12,619 --> 00:22:23,539 ok then this to solve it we have to go to the part of the backend to the part of the backend 143 00:22:23,539 --> 00:22:32,299 that is important because we have to install the course library if you do it in the part of the client 144 00:22:33,500 --> 00:22:41,539 it will not work and also the dependency you do it within the json package of the client 145 00:22:41,539 --> 00:22:51,619 ok you have to be very very careful with that then we are going to solve this ok we are going to stop 146 00:22:54,750 --> 00:23:09,319 this if the client is stopped and the server we are going to stop it ok and ok ok then what 147 00:23:09,319 --> 00:23:20,359 digo hay que para hay que instalar la librería npm y course vale la librería course vale está la 148 00:23:20,359 --> 00:23:26,359 instalamos y fijaros que no estoy dentro de la carpeta cliente lo estoy haciendo desde la parte 149 00:23:26,359 --> 00:23:35,420 del back-end vale importantísimo vale ahora me voy a ir a app al app del cliente del back-end perdón 150 00:23:35,420 --> 00:23:45,779 to this one, which is where we had defined the use the express to make the cookie the cookie 151 00:23:45,779 --> 00:23:52,519 parser morgan is worth all the all this that we had already done at the beginning of everything then it is here 152 00:23:52,519 --> 00:24:04,509 where on the one hand I am going to import course from course it is worth import course 153 00:24:07,069 --> 00:24:15,349 and what we do now and we are going to put it at the beginning of everything under the cons app 154 00:24:15,349 --> 00:24:29,000 ok but it will be the first app use and here we would put the course parentheses parentheses ok well 155 00:24:29,000 --> 00:24:37,099 if I leave this like this because now any different domain any front can be connected 156 00:24:37,099 --> 00:24:45,980 against me they go against the app and it is worth then you can always give it an origin here 157 00:24:47,700 --> 00:24:54,240 to say hey I just want it to connect in my front none other ok I just want 158 00:24:54,240 --> 00:25:06,180 the origin to connect and we put the http here in two points bar bar localhost 159 00:25:06,180 --> 00:25:20,099 and it is 5173, it is worth 5173 in this way, our front is only going to be connected, which is the one that 160 00:25:20,099 --> 00:25:24,059 comes out through this port, that is also interesting but I already tell you that this is optional 161 00:25:24,059 --> 00:25:33,420 if you want you put it if not ok well what else because we already have the course this means that 162 00:25:33,420 --> 00:25:40,440 everything should already work for us, okay, well, we are going to start our server npm 163 00:25:41,920 --> 00:25:53,049 where everything is fine, no problem, we are going to start our npm client 164 00:25:53,049 --> 00:26:05,069 where everything is fine, no problem, let's go to the web and we are going to put the same as before, 165 00:26:05,069 --> 00:26:14,230 then we are going to put Carolina, we are going to put Carolina, and 1, 2, 3, 4, 5, 6, 7, 8, and 9, 166 00:26:15,630 --> 00:26:21,190 I am going to clean this, okay, and now when I am going to register, you see that it no longer gives me any 167 00:26:21,190 --> 00:26:29,369 error of course, we have already solved it, and here it is giving us all the data that we have 168 00:26:29,369 --> 00:26:39,190 saved and if I come to use the mongo db and update now we would already have our register saved 169 00:26:39,190 --> 00:26:50,289 our collection in our document in the collection is worth with what has worked for us well 170 00:26:50,289 --> 00:26:56,549 what happens if I try to save this register again that we know that we remind you that in the 171 00:26:56,549 --> 00:27:02,329 backend we had controlled that it could not be repeated, it is worth for the idea for the car for the 172 00:27:02,329 --> 00:27:09,869 we had said that the email was unique, it is worth remembering the models and the schemes as well as 173 00:27:09,869 --> 00:27:19,289 remembering that also in those models we had said that the key was of a specific size 174 00:27:19,289 --> 00:27:27,230 me parece que le puse de nueve vale pues acordaros de todo eso vale entonces qué pasa si intento 175 00:27:27,230 --> 00:27:40,170 volver a crear este este documento vamos a borrar la consola le doy a registrarse y me sale un error 176 00:27:40,170 --> 00:27:48,450 vale que está bien me tiene que salir ese error axios error vale entonces vamos a investigar 177 00:27:48,450 --> 00:27:55,839 what the error is, it tells me well in response 178 00:27:58,900 --> 00:28:11,319 here is the good data is telling me the message there you have it says well that I have not duplicated 179 00:28:11,319 --> 00:28:20,859 the key of the email ok and that we can not do it ok then at the moment 180 00:28:26,450 --> 00:28:29,109 the consoles if I put here now 181 00:28:31,329 --> 00:28:31,890 jose 182 00:28:33,609 --> 00:28:34,690 here we have 183 00:28:36,390 --> 00:28:37,029 jose 184 00:28:37,029 --> 00:28:48,859 ok if I give it to register because in this case everything works perfectly 185 00:28:50,119 --> 00:28:56,779 ok then everything is already working for us well let's go a moment to the code we go 186 00:28:56,779 --> 00:29:02,980 again to register then we are going to clean this a little ok this already works for us it is 187 00:29:02,980 --> 00:29:10,259 bien pero esto de meter quizás esta función flecha en el on summit lo podéis dejar pero es un poco 188 00:29:10,259 --> 00:29:23,240 raro vale entonces nos podemos crear aquí una función vale como siempre entonces le vamos a 189 00:29:23,240 --> 00:29:29,099 meter el cons vamos a llamarle si queréis en un summit para ponerle el mismo nombre 190 00:29:29,099 --> 00:29:40,799 and I am not going to make another change because we are also accessing a database to save 191 00:29:40,799 --> 00:29:48,319 that new record and we have always been that this should we should do it 192 00:29:49,619 --> 00:29:59,240 asynchronous where I am here ok this should be asynchronous and as it should be asynchronous 193 00:29:59,240 --> 00:30:13,950 esto que me devuelve a un res debería de meterlo así esto con un resto de aquí el zinc 194 00:30:18,099 --> 00:30:28,359 wey y aquí el async que éste sí le tenía puesto de antes vale entonces recordar que aquí pues una 195 00:30:28,359 --> 00:30:34,799 vez que accedemos a la base de datos y tal lo suyo es hacer eso vale 196 00:30:34,799 --> 00:30:38,880 bueno y entonces qué es lo que voy a meter 197 00:30:38,880 --> 00:30:47,630 en las funciones a que estoy declarando ahí arriba voy a copiar esto 198 00:30:49,029 --> 00:30:53,039 aquí 199 00:30:54,279 --> 00:31:00,059 x vale me voy a venir aquí arriba en un 200 00:31:00,059 --> 00:31:06,740 sumit and we are going to 201 00:31:08,059 --> 00:31:12,900 control v is worth then I have the cons 202 00:31:12,900 --> 00:31:18,319 consume and this 203 00:31:34,930 --> 00:31:38,609 is worth and here what I am going to do is call 204 00:31:38,609 --> 00:31:42,109 a summit to the function 205 00:31:44,190 --> 00:31:57,730 and then it should not work exactly the same and we have the most organized code that is always 206 00:31:57,730 --> 00:32:03,390 important and more in developments like this that there are so many files because having it always more or 207 00:32:03,390 --> 00:32:10,049 less organized because it is his own, then we are going to do a last test 208 00:32:11,849 --> 00:32:20,960 to see that everything is fine, we are going to put now, for example, 209 00:32:20,960 --> 00:32:39,799 and it works for me everything is the same, it works for me, everything is fine, it is worth it, 210 00:32:41,940 --> 00:33:00,289 the 10 will not come here somewhere, he is putting us 211 00:33:00,289 --> 00:33:18,569 la cookie con el token vale pero en este navegador no sé dónde no sé dónde me lo guarda vale habría 212 00:33:18,569 --> 00:33:23,789 que mirar todo esto y pasó por el mar a mirarlo vale en el navegador que vosotros uséis pues en 213 00:33:23,789 --> 00:33:31,349 los que hagan en las cabeceras debería de venir os el set cookie ahí debería de estar esa cookie vale 214 00:33:31,349 --> 00:33:45,009 well, well, here I leave this video of today in the next video the question that I wanted to tell you or 215 00:33:45,009 --> 00:33:56,190 that I wanted to ask you is good every time we want to do an operation on our app and 216 00:33:56,190 --> 00:34:03,809 we have to be logging we have to be always we have to generate that touch always 217 00:34:03,809 --> 00:34:13,530 if you think that if that cannot be a bit weird in reality we if we think about the 218 00:34:13,530 --> 00:34:18,809 applications that we can use we log once and once we are logged 219 00:34:18,809 --> 00:34:25,469 while we are logged we can do the operations that we have allowed until we do 220 00:34:25,469 --> 00:34:32,909 the know-how, it is good to go around that and in the next video we are going to give 221 00:34:32,909 --> 00:34:38,010 an answer to that question well a greeting guys see you later