Saltar navegación

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

Back end vs Front end - Vídeo 16 - 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 16 de julio de 2024 por Mario S.

22 visualizaciones

Utilización de ZOD para hacer validaciones en Middlewares.

Más información Transcripción

Descargar la transcripción

well this video because we are going to finish seeing how to create that app and that backend 00:00:02
already in reality it is already operational we already have everything we wanted the authentication the tasks 00:00:09
ok and now what you can imagine or what you want to do against an app and well, more or less from 00:00:16
this idea you could develop it is worth then this last video we are going to dedicate it a 00:00:29
little to the validation is because because in the end we have used the mongoose skin that 00:00:38
then we have converted it to a model and we have validated the data that came or that we were going to 00:00:46
send it to mongo ok and we are going to save that document with those data to mongo 00:00:53
then we have used those validations to validate those data that go to the database ok but 00:01:00
well we can do other types of validations or also good good if it is that I was thinking 00:01:09
the middleware is that in the end we have also gone against the database so we have 00:01:19
other frameworks to make validations, they are worth I have here open on the web page we go in the 00:01:29
browser to see some, then, for example, we have the spread validate, it is worth the spread 00:01:38
validate you have here all the documentation that is very similar to how we have been doing it 00:01:46
we are worth we put the validation here it is putting it inside the network is good this one 00:01:53
seems to me more cumbersome to use ok we can use it with javascript you have here the 00:02:01
documentation and it would be to follow it as always start well all the history we have another one that 00:02:09
that this one looks more like the one we have been using then we can tell it to create a 00:02:15
scheme, that is, we import the joy first, that is, this would be, you know, the import 00:02:22
and joy from joy that this requires an npm and I and it is worth because I belong to or it is within 00:02:32
of the npm then we can install it like this I think it went to another one that was holiday or something 00:02:42
like that now it can be used from different frameworks, that is, from different platforms, 00:02:50
but in the end you see that it has to be a well that the fields are worth the keys that it is a 00:02:56
type of string that is also alphanumeric a minimum a maximum if it is required then this is very 00:03:06
similar to the one we have been using ok and then what it does is that the scheme 00:03:12
you say with use name ok we put this scheme then we pass the validate ok and it validates 00:03:23
cada una de las opciones cada uno de los claves que hemos ido pues configurando en el esquema 00:03:31
bueno pues es otra forma de validar los datos y es otro framework que tenéis aquí vale y que 00:03:41
se podría utilizar vale de hecho yo creo que este sí se utiliza bastante bueno a mí el que 00:03:46
we are going to use now, the one that interests me is the zot, it is worth COD, then in the COD 00:03:55
we have, for example, here I have open in the types of fields that are going to be of type string, okay, 00:04:03
we are going to put different options, then notice that here it is doing it with a point, 00:04:13
then you put the z first point string the z which is how we call it now we are going to see it 00:04:20
when we import the point string because that field is of type string and then we can go 00:04:25
chaining that it has a minimum a maximum a given length is worth that it is of type e-mail well 00:04:32
you have here different options and all these we could go using it is worth then this 00:04:40
zot allows us to do many many checks and well, I think it is the one that is most used now, it 00:04:48
allows us to use it with ts and with js, ts which is another language is the type script 00:05:03
and javascript and js which is javascript, then well, we have here how it would be 00:05:12
is worth the installation from npm npm the install or the thought once you are we import z from 00:05:19
well here with that we put front it will already be worth it and well it would be to follow this is the 00:05:33
option it would be to follow these steps ok then we are going to make an example but 00:05:41
that you know, as always, that the technical documentation you have here and you can do several 00:05:47
several things, it is worth then we are going to play almost everything is with a string type so 00:05:52
well, we are going to play with that, then we go back to our code, 00:05:59
okay, well then, what are we going to start doing, we are going to come to our 00:06:08
skin folder that we had not used yet we have made the models using the mongoose 00:06:19
ok well let's go against skin and we are going to create a file here that we are going to call it 00:06:25
because as we are going to make a scheme to control the data for example of the authentication 00:06:32
Well, to follow the nomenclature a bit, we are going to put out skin.js, it is worth j s, which is what 00:06:40
we are with, we are going to use zot, then as we are going to use zot, the first thing we need 00:06:50
is to install it, then npm and zod, okay, it's already in a package, okay, what is the second thing we do, import 00:06:56
z from z, okay, we already have it, okay, 00:07:18
well, we are going to create a validation scheme, for example, for when we register a 00:07:29
data, it is worth, for example, for the registration that we have not put the verification, we are going to 00:07:45
put it here in a validation of data that we do with zot and for example for the login 00:07:54
then this I am going to close out skin this I do not want it at all this I do not want it at all and this 00:08:02
is worth then we are going to create ourselves as always at the end the scheme is always more or less the 00:08:12
same is worth in this case it is to register skin 00:08:22
ok ok then here before we put the mongoose point skin now what we are going to put is a z point 00:08:28
ok what we are going to create is an object of thought which is what we are going to the fields that we are going to 00:08:40
validate here, for example, the username, we are going to validate the email, we are going to validate 00:08:49
password and I think that with that we are worth it, then if we need something else, 00:09:02
we are going to put it, it is worth the username, the first thing I am going to say is z very sorry 00:09:09
certain point the type that I am going to save in that data is string string ok this is the string type 00:09:18
ok first always say the type that this instead of putting the type string we put z point 00:09:29
string ready what is what we do now here we are passing the different options that we want 00:09:36
that it is fulfilling ok and what are the ones we have on the website for example the username we want 00:09:46
it to be a required field ok then we tell it if it requires terror ok if there is 00:09:54
if there is a required script under error that means that this field is required we can 00:10:07
say, for example, because it is a message, we tell you if there is an error that is in white, 00:10:13
because we can tell it username 00:10:24
username is mandatory, it could be putting more fields, for example, 00:10:33
after the point I could put here, for example, the point 00:10:44
well 00:11:02
if minimum is worth it could be concatenating here, for example, tell it that the minimum 00:11:10
for the login is the same, for example, that there are six, that it is 00:11:15
a message here, okay, if it is not fulfilled, if an error occurs, the message and we say 00:11:28
the username must have at least six letters, for example, this is a comma, 00:11:36
okay, and here, well, I would finish it, this is in my first field of validation, username, I tell you 00:11:55
that is to say of type z string is worth this type string and that fulfills these two fields 00:12:05
one that has been required and another that has this minimum is worth a minimum of six characters here 00:12:12
we can also put another field to see that I look at it in the documentation that was the 00:12:19
here another option that was for example the invalid is the invalid type error 00:12:29
what is the username must be of type string for example all this because what I tell you I 00:12:46
I am taking it out of the documentation then it is a type of string that has to 00:12:59
fulfill the string that is required and that is of type character that has a minimum of 00:13:05
6 characters 6 characters if this is not going to come out ok and now I start with the 00:13:11
email the email well here we put two points and 00:13:16
we do exactly 00:13:22
then the same z point string parenthesis 00:13:25
ok and come on let's go with the email then first because I have required 00:13:38
it is worth between those required error 00:13:43
and mail 00:13:48
is a mandatory field 00:13:51
ok in this case the email I want it to meet the email condition 00:13:59
ok this is going to check me for example because it has an arroba that has a 00:14:08
point that kind of things then here we are going to pass this and if not if it detects 00:14:12
some type of error then the message that is 00:14:20
we are going to put email incorrect for example ok and now we go to the password the password we are going to say 00:14:28
z point string ok we are going to pass the option that is required ok if you do not send it to us we are going to put 00:14:42
the password the field password is ok what else can we put because as we have put before 00:14:59
for example that it has a minimum of 6 characters, and if you are not going to return the message to me, 00:15:20
a message that is 00:15:32
password must have at least 6 characters, I am going to leave this like this, I am going to remove it from here, I like it more 00:15:37
only in the password at the end that as we have users who were miguel and it was pedro because it is good 00:15:50
then I am going to remove it from there I am going to leave it here ok and we would already have it here is the 00:15:56
dot and comma and we would already have the register ok these would be those fields that would accompany 00:16:05
that validation of these fields ok what else have we said that we are going to do the login 00:16:11
sport with login skin this is going to be equal to z point object ok and we continue then now in the login that 00:16:19
fields we are going to validate it can be the email not what we sent and the password because then I had 00:16:37
with those two fields they will be the ones that we sent and with that it was worth it, then the email is going to be 00:16:47
point 00:17:03
string ok the email is this point this has to be required if they do not send it to us 00:17:06
we pass email it is mandatory it is worth I am not going to pass anything else here 00:17:17
the password that is of the type string also 00:17:30
the same is mandatory 00:17:41
password, it is mandatory, mandatory, what else, and we can pass the other one, the minimum, 00:17:43
that we have not passed before minimum and we tell him of 6 and the message of the keys 00:18:12
6 characters is worth this would be here 00:18:35
and here the comma point is worth we already have our two functions we are going to give a format to 00:18:45
all this is already valid, we already have our two schema type functions in which we have 00:18:51
validated these fields, okay, what else do we have to do, well, we have to use this scheme 00:18:57
somewhere, okay, then we are going to do the same as we did before, we are going to make a middle world in 00:19:05
which these schemes are validated then we are going to come to me the web we are going to create a 00:19:14
new file that we are going to call for example the bali editor 00:19:21
I do not know how you want neither of the web 00:19:30
for example, okay, okay, what is the function I am going to use here, well, we are going to put a sport 00:19:32
with us to be able to use it later, okay, here I am going to call it, okay, date 00:19:48
vale y esto va a tener un parámetro de entrada que es un esquema vale va a ser un esquema 00:19:54
esto va a tener un parámetro de entrada que es un esquema 00:20:13
and we also need as input parameters, we are going to put the REC and the RES, okay, 00:20:18
here we have imported this, when I am not going to use the scheme, it is because I have put it in 00:20:42
capital letters, here we are going to put it in lowercase, I am going to remove this, okay, I am going to leave it 00:20:50
What parameters do we need here? Well, it's a middleware, so we need the rec, the res, the request, the response and the next, remember the next, we always need the next too. 00:21:03
ok and here we start with our arrow function as always this is a bit strange because there are 00:21:22
like two sets of parameters that we are going to send it then these parameters are going to enter the 00:21:30
valley date to the valley of the skin the stream because we need that scheme and within that it is worth it is 00:21:36
how to make a command pipe, it is worth within that the network that the recent ex is worth and here 00:21:42
what we are going to put is because as always as we are going to validate because the trail in case 00:21:52
the track is worth within the trail we are going to tell it that 00:21:59
it is more 00:22:08
worth in thought 00:22:10
the parameter that is used to validate is the parser, it is worth then here I am going to put the 00:22:15
point scheme and this does not catch me this does not catch me ok then I understand that this if we put it 00:22:23
we are going to see ok although here I put the point parse 00:23:03
and I am not recognizing this point parse is because here I am not passing it 00:23:12
still to this entry parameter I am not passing the scheme that we have created in out is that in 00:23:17
dot j is worth at the time of passing it yes that it recognizes the pass point and then it is when it is 00:23:23
validated, it is worth if you see in the documentation the pass point is when we validate that scheme, that is, it 00:23:31
would be something like the mongoose model, it is worth something similar in this case I use the pass and in the pass 00:23:36
lo que le vamos a pasar es el rey punto body los datos que le estamos pasando desde el body vale 00:23:46
vale si aquí hay algún tipo de error esto lo que haces es parar el servidor vale parar 00:23:53
bueno pues luego lo para todo entonces ya directamente lo pararía y controlaríamos 00:24:03
this here with the error and here what we would put would be a 00:24:10
point status the 400 voucher and here we could pass a json with error 00:24:18
and here if everything is fine, which is what we call the next, then that is why I use the 00:24:32
record res and the next this would be my function to validate that scheme, so what else do we have to 00:24:42
do well now this middleware we have to put it in the routes where we need it that we have 00:24:50
dicho que va a ser en por un lado en el de aquí en el de registrarse entonces le 00:24:59
vamos a poner aquí bueno primero lo vamos a importar 00:25:08
vale entonces vamos a poner el import le hemos llamado 00:25:14
validate is that it is worth import 00:25:22
validate is that from and he already puts it here all careful with the js it is worth I always tell you the same thing 00:25:28
we would already have it then here we are going to put validate is that skin is worth and I am going to pass it 00:25:34
a value and the value is the scheme that we have created in our scheme so that 00:25:47
we also have to bring it ok then we are going to import 00:25:53
for the two registers and so on and we are going to import the login is that it is worth 00:26:04
I already bring them both, it is worth controlling well that it is with the js it is worth here we are going to 00:26:12
pass it we are in the register because the register is king and here in the login we are going to pass it 00:26:19
valid is that we are going to pass the login it is worth and we would already have it in principle it would already be 00:26:28
y vamos a probarlo vale entonces nos vamos a nuestro cliente vamos a borrar este que no me 00:26:37
acuerdo de qué es y empezamos a hacer vale estamos con el register y el local vale entonces vamos a 00:26:44
crearnos una consulta nueva que va a ser un post vamos a meter aquí localhost lo tenemos aquí está 00:26:53
register ok and we are going to leave the body in white and I send this ok this gives me 00:27:04
an error because because the connection was rejected I have nothing to raise then npm 00:27:13
a of two 00:27:22
that there is some type of problem 00:27:26
router post validate is that this is wrongly written and this is out validate 00:27:29
validate is that it is already fine 00:27:49
then 00:27:55
we launch our database that we already have this that we already have it all right 00:27:56
ok if I give it to the sense ok it returns me this this good this data collection 00:28:04
ok then yes that the code is giving me is 00:28:15
is invalid, it is expectant because it is a required field, username is mandatory, 00:28:21
it is giving me everything but in a post-fee format, then we can fix that 00:28:32
if we come to the validator and in the return instead of returning only the error 00:28:42
as we map is that type of errors is worth then if you look here are different 00:28:46
collections then I can map within the error variable the field that I want me to return 00:28:57
for each of these documents is worth then I what I want me to return is the message the 00:29:06
only thing I want you to tell me is that the email is a mandatory field that the username is mandatory that 00:29:13
is worth that type of data then we can map all this set of errors data 00:29:18
that are within error and save it within the error and that it only displays the error for this 00:29:28
how do I do it how do I do that mapping here I am going to say well all the arrangement that you are 00:29:38
sending me with the entire collection of documents is worth that we are going to call errors 00:29:47
ok then I am going to tell him ok you take me you visualize the error 00:29:55
of errors this is wrong this I am missing keys we are going to see this we are going to put first 00:30:00
because we are going to map it is worth and if we are going to map it 00:30:18
yes we are going to pass this I am going to say in the error field we are going to put the key that does not give me 00:30:22
errors in the error field what I want you to save me is from error point errors of all 00:30:37
los que me estás enviando quiero que me map es vale le pongo el punto más y le digo guárdame en error 00:30:46
el error punto vale y esto ya estaría vale entonces que le estoy diciendo vale en el jota son quiero 00:30:59
que guardes en error vale en la variable que le hemos puesto en el cat quiero que me guardes el 00:31:13
resultado de mapear todos los errores que están dentro de el arreglo de error vale error es el 00:31:20
que me devuelve todos esos errores y entonces esto me lo mapea así como me lo vas a mapear 00:31:29
como voy a usar la función map le voy a decir vale pues entonces de cada uno de los errores 00:31:35
that are inside the arrangement the only thing I want is the message ok and this is the one that I pass 00:31:40
to this error variable and that is the one that is going to visualize me ok in principle if everything is 00:31:47
fine then we come here we re-launch this ok and this does make more sense the error and then 00:31:53
you have different values ​​which is the user is mandatory the email is mandatory the field 00:32:00
password is mandatory, it is worth then this because for us it makes sense in the from this in 00:32:06
an easy way with the mapping we do it in the backend and we already send this json clean to the from 00:32:14
and it makes sense it is worth if here now we take and we tell him well now that as we are 00:32:22
registering then the username I am going to tell you that it is 00:32:28
because I myself is worth the pass the email I am going to tell you that it is good this is wrong the quotes 00:32:36
here we are going to put quotes ok the email we are going to say that it is only male so that 00:32:57
there is an error and in the password we are going to say that it is 1 2 3 4 without a number not a string 00:33:06
ok then here we have different errors this we give it to send and it tells us ok the 00:33:17
errors the email is incorrect and in the password we are expecting to ask for a string ok ok 00:33:23
this is ugly then we are going to take in the scheme that we have created in the password 00:33:33
and we have six characters 00:33:44
I think the message is a bit ugly 00:33:57
Incorrect email, password is receiving a number, it says that in the password we are receiving a number and the type we have said that it is 00:33:59
Where is this one? No, sorry, in the password, we are going to put a value that is the invalid 00:34:12
Invalid type error, password should be of the string type, that's it, it's better that way. 00:34:25
If now we come, new request, password should be of the string type, okay, this is easier for us. 00:34:42
ok ok then here in the in the email we are going to put an arroba and we are going to put 00:34:53
giving ok I give send again it gives me the same error again because because here it 00:35:00
checks that there is an arroba and that it also checks that there is a point 00:35:06
worth the point with sense now the email gives it to me well and now what I need is the password 00:35:11
then the password now does not have six characters of the password must have 00:35:18
as a minimum six characters 1 2 3 4 5 and 6 00:35:25
it is worth giving to the center and 00:35:32
and this has been canceled this now call it 00:35:36
will have canceled it because as I am like this the database and it is connected 00:35:46
then in use 00:35:59
we are going to see what happens 00:36:10
or register and here once it fulfills everything I pass it is wrong it is the next 00:36:11
ok I was missing those parentheses ok we come back here I am going to stop this you want to finish the 00:36:34
work because I am going to say that yes and I will launch it again then we already have everything 00:36:42
well I give it to the center and it has already saved me, it has already saved me my new use, sorry, it is down here the 00:36:52
new user, I already have both, okay, we already have Mario here and you have all the information 00:36:59
the same as before then if I leave you a little as an exercise 00:37:06
well the 00:37:14
the login issue would be the same, that is, if I leave this blank, I pass it 00:37:17
a post and we pass the login here, it will validate me exactly the 00:37:24
same the email is mandatory the ok then I can put the email here 00:37:33
I can put mario 00:37:41
and I can put the password ok but let's go that it is the same with 00:37:46
two three four five and six I give it to the send it tells me expect receive a number 00:37:52
ok for the same as before the email I have not validated it well this of the email the email I have only 00:37:58
said that it is required I have not put it later I have not passed it for example this that would be 00:38:08
better more correct ok good but it is a bit for not doing this eternal ok it is required 00:38:13
pues el email le vamos a poner bien arroba dando puntocom y el password que nos dice que es un 00:38:20
número y lo que quiere es un string vale esto le doy al send y ya me ha creado todo todo bien vale 00:38:30
entonces si os dejo un poco como ejercicio a vosotros hacer lo mismo una validación a través 00:38:39
of the tasks, it is worth using the documentation to put different validation fields 00:38:45
that have been required that if the value is not correct, then that I know that the message 00:38:53
maps well that only the error messages come out or the key that you want is 00:38:58
ok good that you play a little with all that with the tasks and here we end with the bake and 00:39:07
with the back ok with the back end with the app now what I am going to do is dockerize this app 00:39:17
to be able to use it from anywhere using docker desktop a greeting see you later 00:39:27
Idioma/s:
es
Idioma/s subtítulos:
en
Autor/es:
Mario S.
Subido por:
Mario S.
Licencia:
Dominio público
Visualizaciones:
22
Fecha:
16 de julio de 2024 - 22:52
Visibilidad:
Público
Centro:
IES VILLABLANCA
Duración:
00′ 14″
Relación de aspecto:
1.78:1
Resolución:
1920x1080 píxeles
Tamaño:
99.82 MBytes

Del mismo autor…

Ver más del mismo autor

EducaMadrid, Plataforma Educativa de la Comunidad de Madrid

Plataforma Educativa EducaMadrid