Saltar navegación

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

Back end Vs Front end - Vídeo 29 - 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 8 de agosto de 2024 por Mario S.

21 visualizaciones

Visualizando posibles errores en la parte del front y del backend.

Más información Transcripción

well in this video we are going to see how to visualize the errors that appear to us 00:00:01
in our from ok we have to be clear that we have used or that we are controlling 00:00:12
errors that occur in the from when I write data in the username in the email or in the 00:00:25
password in any of these inputs or when I send this data to the backend in the backend errors can 00:00:33
occur because for example the typical actions errors that the user that we are 00:00:41
trying to register already exists that the email is duplicated things of that type is worth then 00:00:47
there are two points in which errors are generated also in the back-end remember that with the 00:00:55
zot library and with the model that we made, well, there were two ways to control errors, for 00:01:02
example we did that with soft that with a password it had six characters ok we did with the model 00:01:14
we found I do not know that the email was not repeated ok then in the backend there are also two 00:01:23
entries or two files that made up our project our development that of 00:01:33
the ones that we read from which the front received possible errors if there were any 00:01:43
ok then we are going to start first to control errors in the front itself with the 00:01:51
use of force with the use of hudford sorry with the react hudford which are the ones that we have put in when 00:01:57
we have done in our form it is worth that we put the register ok and we put required then 00:02:07
all these we said these fields are required if some of them we do not write it is worth then 00:02:16
that it puts us here a typical error in the bottom part is worth the typical the typical string 00:02:23
the text line that hears the username is required is mandatory the email is mandatory always 00:02:30
that we see that it is not written, it is worth then to do this and using the 00:02:37
read hook form, it is worth with the read font, we use it to create that form, that is the one that 00:02:46
allowed us to put the register with the name of that field and put a series of 00:02:53
characteristics that should fulfill that field is worth then good from the page of 00:03:01
the re ad hoc form I am going to put here a moment from here we had good all the information that 00:03:12
we can control from that library is worth then from the form state that is the one that we are going to 00:03:20
use now, this is the one that will allow us to take that error, well, if you are looking at all the 00:03:25
information here, you see that we can put values ​​by default, such as there are several fields here that 00:03:33
we could use and one of them is the errors, the errors, it is worth then here if I give it to 00:03:40
view in the errors the error messages I see that I can put if an error occurs a 00:03:47
string that I can put several, okay, well, you have all the information there that you can 00:03:54
need at a given time, okay, well, it is the way to use it, it is a more or less simple and 00:04:02
easy ok then let's go again to our code 00:04:13
to see that you see it well yes ok then we have left that we are going to use the here the form state 00:04:21
is worth that we take it from the read hook form ok then when we already have the use form we import 00:04:34
the useform of the readcubeform, we have here the useform of which we took the register to 00:04:43
enter the name of the fields and the property that is required, and the handlersummit 00:04:50
which is to control the submit, the submit button when we click on the form, then here 00:04:59
we are going to use or we are going to tell it that we also want to use the font state and from the form 00:05:06
state that we have seen that it had several fields, it is worth several properties or attributes that 00:05:17
we can use, the one we want to take is the one of errors then it is the state font and I tell it 00:05:25
ok from this I want to use the errors ok in this way I am telling you that I want to use the 00:05:32
object ok the data collection that will give it to me in the form of an object within errors if errors are made 00:05:41
it is worth if some field of the required all those that we have put is not being executed correctly 00:05:55
ok then once we have told him that we want to use the form state and the errors of the 00:06:07
form state take the errors what I have to come is under each of these inputs ok and 00:06:15
under each of those inputs what I am going to start to tell you is good if an error has occurred 00:06:22
ok for example here in the username we are going to say 00:06:29
keys errors ok that are the ones we take then within errors there is a list with all 00:06:38
the possible errors ok then it is a list that is key value then we have to 00:06:48
pass the first the first key that we want to control if an error has occurred in this case 00:06:54
is errors and we say username ok the key and the username field is the first error that can 00:07:02
produce the one that is in the register that we have called us username is worth then 00:07:11
if an error has occurred in that field that it can only be obviously that we have not written it 00:07:19
then what we want is good because then you are going to draw us a field is worth a paragraph 00:07:27
in which we can play with already starting to play with the tailwind start to put a little 00:07:33
the text that we want that you want to give it that 00:07:44
that format to leave it all right ok then in this case that we can tell him 00:07:52
because for example we can put a class a class and we can put a text network we are going to put it 00:08:00
because for example a 700 is worth then we say ok well you put us in with this with this color that message 00:08:12
le decimos que el mensaje va a ser pues el nombre de usuario obligatorio vale dentro pues ya ya se 00:08:28
empezará a jugar con ese mensaje vale por ejemplo este lo quiero en negrita y además le vamos a 00:08:41
put in another in a more striking color that I am going to put here the class and we are going to put the 00:08:49
text network we are going to put it for example to 500 we are going to put the text xl so that it is a little 00:09:03
bigger because here it is already a little what I tell you is worth that you give it a little that 00:09:12
an appearance to the interface, it is worth that you want it to look good or that it is asked of you, 00:09:21
okay, then I have this line, this line is worth if I update, okay, if we put, for example, 00:09:32
I give it here you see when I give it to register it already comes out the name of the user mandatory 00:09:46
ok let's put the is it is mandatory ok that way the user knows that here he has to write a 00:09:59
name that here he writes his name is removed that there is no name because it is put again and this is what 00:10:14
that I am going to do with the field of the email and the field of the password then here the only thing 00:10:22
that we control is that it is mandatory well then to take this line and we are going to copy it 00:10:28
now here control v now the field would not be the user name ok if you do not notice what happens 00:10:38
that as when I had left the username he puts it here again and we do not want that here 00:10:45
what we want to control is the field ok and the field password ok it would be then if in the 00:10:52
field and mail there is nothing it already tells me user name ok this we have to change it and this 00:11:18
also then here it would be e-mail it is mandatory and 00:11:25
it is mandatory here it is ok then if I put the user's name this error 00:11:46
no longer appears if I put the email that error is already removed from us and at the 00:11:51
moment when I put a key that error is also removed from us 00:11:58
ojo la clave aquí yo la estoy poniendo mal sólo he metido cuatro caracteres cuando sabemos que 00:12:04
tenemos que meter como mínimo nueve vale entonces esto aquí en el from que son los errores que estoy 00:12:09
controlando me lo está aceptando vale porque ve que el campo no está vacío pero si yo le doy 00:12:16
to register this will give me an error 00:12:25
here you are bad require with actions error ok it gives me the error of the 00:12:32
actions then this is what it tells you in the response 00:12:47
code here is the content this is the size 00:12:57
error here it is in data it is worth in response in data it says password must have at least six 00:13:10
characters it is worth 96 we put it is worth perfect because six is worth at least and we have only 00:13:17
passed those four it is worth then if I come to the monkey I see because it has not been registered either 00:13:23
But these Axios errors, we have used Axios in the backend and it is through which we made the connection with our Mongo database and with which we have done the different consultations. 00:13:30
then we have to come we have to go now to work on our bike ok then in our 00:13:48
back we have to go to the client this is ok in our controllers we had the controller and in the 00:13:57
out controller we have that register function that is where we are passing from the from our 00:14:13
information, it is worth having a moment and I am going to put this for a moment so that you can see the error that 00:14:19
is giving me from the axis error in the response and in data ok here I have the error ok this error 00:14:30
this one that we have put here as an error I am going to correct it because this is going to give us problems, it is 00:14:40
easier to be the different errors that can give us that can appear for example if this 00:14:46
email would be wrong ok then here in data in the axios as we have said in response in data 00:14:55
password must have at least six characters 00:15:06
and here he has not told me the one of the mail, okay but it would also appear to us 00:15:12
we are going to do another for example we are going to put it well to see if we get mario 00:15:39
we are going to do it mario is 1 2 3 4 5 6 7 8 9 I register it ok this one is not going to give me 00:15:55
any problem this one has already sent us tasks that is what we had if we come to mongo I see 00:16:05
that it is the one that has created that dictionary for me, it is worth it, let's go to the register again 00:16:12
if I try to put Mario again good password 1 2 3 4 5 6 7 8 9 this tells me that the 00:16:27
e-mail is mandatory, I tell him here and register, it is valid and here I get the 00:16:38
actions error which is what I am looking for and in the actions error in the 00:16:45
response in the data it will come out on the one hand in the mail is duplicated 00:16:50
and it should not come out where we are here in the message 00:17:05
only the month is telling me now we look at it ok but we have to control we can 00:17:27
be able to these values these responses that these fields are giving us data that is giving us 00:17:34
here ok that is where he is telling us the possible error that is being produced from 00:17:41
axis is worth that is what we want to do then to remove this let's go to our code 00:17:45
and here we are in the register function ok and then we had json 00:17:53
if there was any error we would answer the message ok what is it that is what it is doing to us 00:18:06
nos está enviando al final el último mensaje vale pero bueno pues no queremos hacer eso también o 00:18:17
sea si por en una en una parte vale pero no solo qué queremos hacer también controlar antes de 00:18:23
hacer nada dentro del track queremos controlar que el username que hemos metido existe o no existe 00:18:34
ok then how am I going to do that because as we have done by launching one by launching a consultation 00:18:42
ok if we do with the end when it is worth remembering at the moment you do not find a register that has 00:18:53
this email is that it already exists and that error is the one or that problem is the one that we are going to control 00:18:59
we are worth then we are going to do here 00:19:06
inside before anything here for example I am going to put the cons here we are going to put a 00:19:12
user 00:19:20
we are going to tell him that it is the same as it is a consultation on the mongol is worth 00:19:22
they are a database to remember always put the weight we already had 00:19:31
put the async here, it is worth remembering that the water always goes with the async, okay, we have the water, we have 00:19:36
a user and use it, which is the one that we are taking from the model, which is the one that is 00:19:50
returning the errors to us, so we tell it, okay, well, I use point fine one, you are okay to launch 00:19:58
the file one consultation that if we were looking at the login you see here we had the same then the 00:20:07
fine one with a good query then we launched the query is worth here directly I am going to pass it 00:20:15
with the user if you find it if you find a value with this email field that we have put 00:20:22
email all together is worth then what is 00:20:35
what I want you to do because then we say yes 00:20:43
and a serfa 00:20:49
then we are going to return a json 00:20:53
status 00:21:04
2.j are and here we are going to pass it I am not going to pass the error two points or the message 00:21:10
two points I am going to pass that error directly ok then I am going to put it here 00:21:20
because the email is already registered for example ok the email is already registered and there 00:21:28
what I am doing is that launch a consultation we are controlling that the email if you find it 00:21:40
or not if you have found it then it means that you cannot register that those data that we have 00:21:54
sent from the front because that email already exists ok then we are going to control this like this and I am going to 00:21:59
to happen as in the end the errors I want them as a global arrangement as a root of all 00:22:08
the errors that occur I am going to pass them without any type of label because it will be easier 00:22:14
in the front then to access them as a root is worth and then I am going to map it and what I am going to do 00:22:20
is to visualize it is worth where then in the upper part for example or something like that is worth where 00:22:27
we wanted, okay, so I'm going to leave this like this, okay, let's go to the file 00:22:33
now, let's go back to the client because in principle already in the backend I would already have it, I'm going to go back to the 00:22:43
client client src ok and here we have in the file the out context when we create the context 00:22:50
tenemos que hacer que ese error que está recogiendo el from esté dentro del contexto 00:23:02
porque porque queremos que tenga acceso a cualquiera de nuestras páginas si quisiéramos 00:23:10
controlar el error desde cualquiera de las páginas vale en este caso estoy con la página del registro 00:23:15
del registro vale pero podríamos querer utilizarlo en cualquier otra parte de nuestro contexto 00:23:23
then what is what I am going to do well because we are going to create another state variable 00:23:31
ok and then here we are going to put the cons we are going to put errors and here I am going to pass 00:23:38
the set of errors this is going to be the same as this one and what I am going to do with the way to initialize it 00:23:47
is going to be with an empty arrangement, it is worth with an empty arrangement, in principle there is no error, 00:24:05
ok then as I know that what I want to pass here is an array an array with all the 00:24:11
possible array errors to access them later using the map point a mapping and an index 00:24:18
ok I'm going to pass that and in the error in the catch error within the trade instead of visualizing the 00:24:26
console logo what I am going to say is ok well here we are going to put the set of errors 00:24:35
and we are going to tell it I want you to take the error that you are sending me in the answer ok 00:24:43
then we are going to put the error 00:24:50
the error response data is worth the error is the one that has occurred and it is the one that I am collecting, it is worth that 00:24:53
then it will be the set of all the errors that the backend is sending me, and of course 00:25:14
here we say that that error is the one we want error not because we have put errors that error is 00:25:22
the one we want to share with everyone in all the context is worth this way we have also 00:25:35
controlled this part of the context is worth now all the all the routes that are that 00:25:43
are part of that context, all of them will have access to that array of all 00:25:51
possible errors, okay, and we will be able to work on them, okay, then what else 00:25:56
would we have left, well, now I will say it by visualizing those errors, okay, 00:26:03
depending on where we are going to do that, because it cannot be on the other side 00:26:13
that it is not in the register page ok then in the register page we have first 00:26:18
here you are ok this is what I have put before to try this ok we have the register we have the 00:26:30
sumit to not this I have erased but I should not because the state format is what we have 00:26:42
imported before for the errors in the own I will say it in the own 00:26:49
from ok good but we have down here what is the use out in the use out we are saying 00:26:59
what with what values are we going to work from that context ok then we have said that to 00:27:12
be able to access the errors I am going to have to also take errors ok then of course now I have 00:27:20
a problem because I have not noticed and I have called both the same good we can always take and 00:27:26
rename that error for example that I am taking now from the register and I put it because I do not know 00:27:31
register error, for example, it is worth as you want to access and then I can already access these 00:27:41
errors to these variable errors through the alias that I have put on the register, 00:27:49
it is not worth it and I have this perfect then where am I going to use now where am I going to visualize 00:28:00
this list of possible errors, remember that at the beginning this list is empty because we have 00:28:09
initialized it with an empty arrangement, it is worth then, for example, I want you to visualize them 00:28:16
after registration, it is worth before starting with all the inputs, I want you to visualize it to me 00:28:21
after registration thinking that the error verification itself that we have put with 00:28:27
the strings below each of the inputs, okay, so I'm going to come after I register 00:28:36
I'm going to say in the div ok and now as good so that it is not done well we are going to see how it 00:28:45
is and if not instead of 5 xl to register because we put a little less so that it is not done that it is not 00:28:53
lose on the screen ok then here what we want to do is good 00:29:01
here a key is worth because I am going to work with the variables these that we are 00:29:11
creating and I am going to say good if register point errors 00:29:16
sorry register error this if you register errors I map those errors that mapping it is no more than 00:29:20
going through that arrangement I insist it is an arrangement with all the possible errors that are 00:29:32
occurring in the bucket and they are those errors that we have declared in the data model, it is worth 00:29:37
remembering that because if an error occurs that you have to be very clear to then know 00:29:43
what files to touch or what to look at if you are not returning at a time with the network 00:29:49
the information to the front or things of that type, it is worth that they are the servers, it is worth then 00:29:56
I have the map on the map we are going to do an arrow function and here I am going to pass a we are going to 00:30:02
take an error the one that is in that array the first is worth and an index that is going to tell me the error 00:30:11
que estoy leyendo vale aquí como es una función flecha pues como siempre vamos a hacernos nuestra 00:30:17
function if the arrow is worth and here I am going to tell you 00:30:26
this is worth 00:30:34
this here 00:31:00
this key that would be here would also give me the same 00:31:15
ok we are going to pass it on then here inside 00:31:22
as we want him to draw it for us in our form 00:31:29
because we are going to put it because as always a day is worth this 10 is worth then here it will 00:31:35
allow us to write inside what we want within that and we always put it in 00:31:48
format is worth as with the tailwind with the tailwind classes we put the class 00:32:02
because it is because that is the color the bg network that we are going to put for example at 500 00:32:09
a pair and not two is worth a bit of always if this is all the time the same if the text is 00:32:21
the background is in red because we are going to put the text 00:32:29
in white, it is good what the source is and you want to change it, put an animation that would be 00:32:36
very cool, well, I already leave it to your choice because in the end it does not make the video 00:32:46
very long either, what else am I going to do with what else am I going to play with the one that is worth 00:32:54
the attribute ok that what it collects is there it is there that we are passing to our arrow function 00:33:01
which is the position of the array remember important we are all the time with an array ok ok and 00:33:10
what do we want you to show us within the div? Well, the error, okay, what is inside the error, okay, 00:33:19
okay, and then this, well, we would practically have it, which is what we would have to 00:33:32
do now, well, it is to remember that when we have been in the backend, well, we always 00:33:40
we sent the network the point json with the error such that what it does is that when it returns 00:33:45
the answer it puts error two points within the response point data point error there it would write the 00:33:53
error is worth that when accessing that information it can be even more cumbersome to 00:34:00
facilitate it we are going to answer I am going to go to the part of the back end and I am going to tell you 00:34:06
well in the middleware 00:34:17
of the editor you see this is what I tell you here we put this ok we pass a map with the 00:34:21
possible errors that here in the middleware is the one that we have used with zot and that is the one that 00:34:29
is going to tell us the number of characters that the password has everything that we put is worth 00:34:35
then this error I remove it in the end we can send information directly like this and this 00:34:42
is going to make me an error directly with that information is worth then this I remove it 00:34:50
from here and we have also removed it in the car where the out controller is here when we are 00:34:57
here, you see that I have not put the error either, I have passed this value directly, this 00:35:12
string, okay, well, in principle we would already have it, okay, we have already taken those errors that 00:35:22
are sending us the back-end, we have controlled the errors that occur in the 00:35:30
front itself, okay, now we are going to test it then let's go to our page here we are that if we 00:35:37
damos a al registrarse bueno pues nos salen todos los campos que son obligatorios mario 00:35:46
aquí le vamos a meter mario aquí vamos a meter 1 2 3 4 5 6 ya está le doy a registrarse dice 00:35:54
el email ya está registrado y me lo ha puesto veis en el cuadro aquí arriba este cuadro 00:36:07
in the register page that is where we have put it we are going to put it also a little following it is 00:36:12
worth that we are in interfaces all the way all the format that we are giving it is worth then 00:36:20
we are also putting a rounding here a little those those those those corners are worth 00:36:27
then the round that gives me is worth visualizing it like this, it is worth because we could get into it until 00:36:34
this was that it was centered, it is worth then we say the email is already registered if on top of it 00:36:43
I did not pass it or we passed it less 00:36:48
characters of the necessary ones for the password, it says the password must have 00:36:55
at least six characters, okay, then let's see, clean this, delete the console, okay, here it gives us 00:37:02
all bad memories and we are already picking ourselves up recovering those characters or those possible errors 00:37:41
we are going to put another user here who is going to be carolina we are going to put an email that is going to be 00:37:55
but we are going to put it without the origin and we are going to put the password well, for example, 00:38:21
this has put us well 00:38:37
this is because I have not had to control 00:38:42
the emails and I thought that if I had done it with zot I mean ok then well 00:38:48
If I have to register this, I do it well because the mail is already different, 00:38:55
here we are going to put the same thing again and here and so the email is already registered, it 00:39:12
tells us, okay, well, in principle, this is how we are going to control the 00:39:21
different errors, okay, well, up to here in the next video what I'm going to do is control 00:39:29
private routes or not, that is, where we can enter directly in the front, 00:39:39
okay, if we are not logged, which will be in the login and in this register, okay, for that 00:39:49
we also have to have the page of the login page 00:39:58
and once we are logged in and that context has been created then that it gives us permission 00:40:04
to enter the rest of the routes that we have declared well a greeting guys see you later 00:40:09
Idioma/s:
es
Idioma/s subtítulos:
en
Autor/es:
Mario S.
Subido por:
Mario S.
Licencia:
Dominio público
Visualizaciones:
21
Fecha:
8 de agosto de 2024 - 18:34
Visibilidad:
Público
Centro:
IES VILLABLANCA
Duración:
00′ 26″
Relación de aspecto:
1.78:1
Resolución:
1920x1080 píxeles
Tamaño:
123.74 MBytes

Del mismo autor…

Ver más del mismo autor

EducaMadrid, Plataforma Educativa de la Comunidad de Madrid

Plataforma Educativa EducaMadrid