Saltar navegación

Activa JavaScript para disfrutar de los vídeos de la Mediateca.

Back end Vs Front end - Vídeo 30 - Contenido educativo

Ajuste de pantalla

El ajuste de pantalla se aprecia al ver el vídeo en pantalla completa. Elige la presentación que más te guste:

Subido el 14 de agosto de 2024 por Mario S.

28 visualizaciones

Creando la GUI del Login

Más información Transcripción

Descargar la transcripción

Well, in this video we are going to do the part of the from, the part of the GUI of the login. 00:00:01
We have done the registration part. With what we have worked, what we have used 00:00:14
in this part you should be able to face any task that was to connect with the backend and 00:00:22
do different cross operations against the mongoose database, sorry, mongoose mongo 00:00:33
db, okay, using axios, using all the libraries that we have seen, such as mongoose 00:00:41
to connect to the monkey or any of all the ones we have seen, it is worth from real, 00:00:48
then what we are going to do is that when we are going to see the page we are already when we enter 00:00:55
in the front and we enter the login route instead of that we get this login that we get 00:01:14
something similar to what we are going to similar is going to be the same as the registration when we did a login 00:01:23
if you remember when we were developing the backend part the only thing that was mandatory 00:01:32
was the field of the email and the field of the password once we launched a consultation and we were looking for 00:01:39
that email and that password, it is worth remembering that we compared first we encrypted that password 00:01:49
that we had put in, we had to encrypt it because remember that with jw t and with the good one because with 00:01:57
real we encribe and with creep we encrypted that password then we had to make that 00:02:06
comparison remember that we had the method of the compare that allowed us to compare that password that 00:02:13
we have introduced now with the one that we had encrypted if everything was fine then a 00:02:20
token was created that is the one that was sent to the client ok and with that active touch is with which 00:02:25
we know from the front part that that client is well logged or not valid then we have to 00:02:31
do we have to get all that well then we go in steps the first part we are going to 00:02:37
create a page for this route because if we go to our code we see that we are already 00:02:45
if we see that without the part of the client in that recent 00:02:54
the pp jsx in the login routes what we had is login which is what we are showing 00:03:04
here is only this text is worth what we need is a new page then 00:03:12
let's go to page we are going to create a new page that we are going to call for example login page 00:03:18
.js, sorry, jsx, okay, here we are going to create the react structure 00:03:26
and the truth is that what we are saying is not very similar to everything we have 00:03:39
on the registration page, so what we are going to do is I am going to copy it, I am going to paste it and I am going to 00:03:48
modify the registration parts that I do not need ok then I'm going to copy 00:03:54
all these imports first we are going to paste them in login 00:04:02
we are going to copy 00:04:13
all this up here, for example, we are going to paste it in the login and here it is worth and now the two pages are 00:04:15
exactly the same, it is worth if we come to the pp jsx and here I change the route and we put that instead 00:04:32
that you put the login text on me, you are going to call the page login, it is worth 00:04:43
this, it is worth it because this must call us to that page because it has not called us 00:04:55
because we have not imported it, we are going to import it 00:05:03
page and that's it, we're done, so now we see that on the login route 00:05:06
the register page is coming out, okay, because we have copied and we have not modified anything, 00:05:20
now we go with it, we go back to our code, 00:05:25
we are and we are ok and we start on the login page to modify what we are not 00:05:28
missing ok well let's go by parts 00:05:40
the user for the hook form if we are going to need it ok the use out good because if we create the context 00:05:48
we will also need it is worth that context of work that can come in handy when 00:05:57
sharing information remember it and use effect remember that the use of efe we used it for 00:06:04
good if there was no problem that would take us to the tasks to the tasks is worth in principle this 00:06:15
to see that everything works for us well I am going to comment on it and then if we leave it active 00:06:25
because it is its value once you are logged because you do not want to stay in the logged window but 00:06:33
for now I am going to comment on the function of logged if we see it in the out context here the 00:06:38
this function is still logged, it is calling the request register, which is the one of the 00:06:49
pack, which is not the one that I have in javascript, it is the one that we call the register backend route 00:06:57
and we pass the data to it, then this is not worth it to me, here I would have to create another function 00:07:08
that it will call the login route then we are going to create it but we are going to put it sport 00:07:15
because instead of registering the memory we are going to put the login request 00:07:25
that it will have as an entry in the user arrow function 00:07:33
constant networks because it returned us from the back in once we were logged the user and the 00:07:38
idea and the top good different information ok so we are going to collect it with axios 00:07:50
or the post method because we are sending information to do the login 00:07:59
I am going to make the connection with the backend, it is worth accent, remember not as already simple accent 00:08:04
dollar keys the api that the api remember that it is nothing more than this string so as not to have to 00:08:13
be writing it is always valid and it is active and it is to the login route 00:08:22
this is wrong 00:08:33
ok and what data are we going to pass on what we are passing to the login request function ok 00:08:38
and here I am going to put the return press is very similar to the function register request nothing more 00:08:46
than the change the route the data remember that here in the recall register we were passing the 00:08:55
user name the email and the password and however in login remember the only thing we passed would be in 00:09:02
email and the password, okay, okay, well, I go back to my login page page and here 00:09:10
I have logged in, okay, so what we were saying is that of course here we cannot call 00:09:23
has logged in then we have to come now to listen to the use out page to the out context let's go 00:09:36
there and here we have to make a function similar to this one but that does not call register the 00:09:45
request that calls the login request ok then come on we are going to we are going to create with 00:09:52
we are going to call it logging, for example, logging is the same as the asynchronous because in the end we are going to be 00:10:00
working against mongo and we are going to be good because it may be with a certain ease that the 00:10:12
database is down, that the communication is bad, I don't know anything, the network, 00:10:18
anything is worth so always remember the asynchronous 00:10:23
and use and use remember that we took it from the context 00:10:29
in the time 00:10:41
and now what we are going to call is what the request is worth as I call the login request 00:10:47
because this will be that here I have it, okay, I already have it imported, then it is worth 00:10:58
and it is worth here as we are playing with the context because we put it 00:11:07
and 00:11:18
is worth a bit is exactly the same as the login function what we change is the 00:11:19
login the function of the app and to which we are calling ok here we put the cat 00:11:34
error set error because in the end we are controlling them the same error point 00:11:40
point data ready ok we already have our function login what happens to this function 00:11:56
we will also have to export it remember that we are in the provider ok and the provider returned 00:12:03
esos valores entonces aquí le vamos a poner pues lograrse vale entonces el provider ya lo tendríamos 00:12:11
volvemos a nuestra página entonces en nuestra página en vez de logueado lo que queremos es 00:12:20
que llame a lograrse lograrse y lograrse lo vamos a desde aquí 00:12:24
ok in principle this is authentic and I do not need it because it appears disabled because we have 00:12:32
commented on the entire part of the effect the errors are the ones that we are going to collect if there are 00:12:43
errors so that it visualizes everything about the form that we do need 00:12:48
ok well we keep looking ok and we get into the part ok remember that this is the 00:12:55
which is the function that we are going to execute thanks to the hand the summit that 00:13:01
provides us with it, it is worth remembering that we imported it, we took it with the cons with the register to put 00:13:10
well the attributes of the different inputs hand the summit and the state form to 00:13:20
take those errors that the user itself allowed us from ok then we have within what 00:13:32
would be the form the month that this in principle I am not doing anything with it I am going to 00:13:38
to contract ok and then nothing begins to modify what that form is 00:13:44
then instead of registration because it puts login 00:13:52
ok this would be for the different errors we have said that the username we do not need so 00:13:58
that we delete this we have the email we have the password we have the button of the summit 00:14:07
is worth the summit type that already links us with the summit to register here we are going to put it to be logged 00:14:15
log in and well, in principle, we would already be okay, then we would have all this, we would already have the 00:14:24
form, we would have the out context with the log in that we have then returned it, it is worth 00:14:43
as another of the return variables within the provider, the out in which we have created the login request, the appjsx in which we have modified the route, the page itself and in principle, well, everything would already be there. 00:14:54
Now I have the backend and the client part started, so let's try it. 00:15:09
then we are going to take we are going to go to the page to see it well we are going to check we are yes 00:15:17
ok I have mine as a user ok I don't have any more ok if I put here for example 00:15:28
we are going to see these development tools for the console and we are going to put here, for example, 00:15:37
the saints 00:15:55
point of regé 1 2 3 tells me the password must have at least six characters because we have 00:16:00
controlled the theme of the errors of zot ok then we are going to put 2 3 4 5 and 6 login 00:16:07
ok I get an error bar request that is here we would already have a problem this does not exist if we see 00:16:15
we are going to put if we see the part of the terminal we see that it is giving us the error 204 if we go down 00:16:26
and the middleware out controller we see that the error 204 is sending it to us when 00:16:45
we launch the query with the email and it does not exist that it does not actually exist here there is only 00:16:55
mario.santos ok then we are going to we are going to put mario.santos and I am going to modify 00:17:02
3 6 5 4 is worth the password it would be wrong I give it to log in and then we see that it returns us 00:17:14
we are going to update it we are going to put it we are going to this is with the code we are going to the page and 00:17:42
y así la veis bien vale mario puntos santos arroba 00:17:51
punto madrid punto de regén 1 2 3 6 5 4 00:18:01
vale lo de asia y este vale fijaros cómo 00:18:10
let's go to the visual studio server now the error that has skipped me is the 401 is worth 401 that if I 00:18:21
look here it is the one that sends us if the password does not see it compares it compares it and it is not the 00:18:39
correct one, okay, this is fine, okay, and yes, if we get all the data right, we are going to put 00:18:48
Mario Santos here 1 2 3 4 5 and 6, okay, what are the data of yours, play, okay, it tells me it includes a 00:18:57
such one, we are going to check that this is not worth it, it puts it on us, it does everything the same as the register, 00:19:08
which is what we want, then here we put mario santos arroba 00:19:15
madrid.org ok I give it to log in and here we are going to get out let's go ok here it already tells me the 200 that is, it has done everything 00:19:23
well here it already shows me the cookie in the front part, that is, it has created it for us 00:19:41
and it has sent it to us well, what else, well, if we want, for example, in the part of the out context 00:19:50
we are going to put 00:20:02
we are going to put console.log res so that we can see what it is that is saving us, sorry, 00:20:04
what is it that is returning the backend to us, okay, what else can we see if everything is fine, 00:20:19
I think it is already playing, okay, then we are going to delete the console 00:20:27
well here also this in principle here we would have in the hook the data that are the ones that he has sent us 00:20:34
is worth it is the same that I have put the console we could see it from here here we see that we have 00:20:45
the username the email is worth that it is working for us everything is working for us well it is worth 00:20:49
perfect then we are going to try now also that it shows us everything in the terminal and 00:20:56
if we see it mario puntos santos educa dot madrid dot rg 00:21:03
1 2 3 4 5 and 6 log in is worth here we have the same data 00:21:12
in data is worth the same the idea that is, it is not returning everything well if we are going to 00:21:19
ends in 671 is worth then the idea here it is 671 has recognized it recognizes the document 00:21:26
and it generates us the touch is not doing everything well in this way we would already have the part of the login 00:21:39
and you are already seeing that well, it is practically the same as the part of the register of the register is worth 00:21:44
Vale, y aquí dejo este vídeo y continuamos. Un saludo, hasta luego. 00:21:53
Idioma/s:
es
Idioma/s subtítulos:
en
Autor/es:
Mario S.
Subido por:
Mario S.
Licencia:
Dominio público
Visualizaciones:
28
Fecha:
14 de agosto de 2024 - 20:49
Visibilidad:
Público
Centro:
IES VILLABLANCA
Duración:
00′ 20″
Relación de aspecto:
1.78:1
Resolución:
1920x1080 píxeles
Tamaño:
69.80 MBytes

Del mismo autor…

Ver más del mismo autor

EducaMadrid, Plataforma Educativa de la Comunidad de Madrid

Plataforma Educativa EducaMadrid