Saltar navegación

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

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

42 visualizaciones

Creando la GUI. Se crean los componentes para las tarjetas de las tareas del usuario logueado y se crea el NavBar.

Más información Transcripción

Descargar la transcripción

well in this new video what we are going to work on is a bit what I asked you in the video in the last 00:00:01
video, it is worth creating that interface to show the whole subject of the cards well here what 00:00:09
I am going to tell you is how to create a bar that now I had them in and I was copying and 00:00:15
pasting on each of the pages but this is not done like this, it is worth using what the 00:00:22
components is worth then I have already done it I am going to show it without being 00:00:27
biting the code because well I think you can follow it without 00:00:32
need and also 00:00:36
well, I don't make the video so long I have made a bar in which 00:00:40
first when you enter the front what it teaches you is the registration button and 00:00:46
to log in, nothing else is worth then if I log in here I already get the tasks that 00:00:53
81 is not raised we are going to see 00:01:12
where it is ok it is ok then I have the tasks I have here all these tasks ok 00:01:25
that there are 1 2 3 and 4 that are from the user of mario is worth mine and another that is from another 00:01:45
user then here are the four that are from this user I have put the logout button 00:01:53
I log in again I log in with the other user it seems to me that it was the one from carolina 00:02:00
ok then this task only appears from here I can add tasks because for example 00:02:06
here it would be to send directly to view tasks that in the last video I did not do it 00:02:12
then when we enter to view tasks we already have the meeting meeting with the 00:02:45
development team ok and in card format which is what I asked you in the last video that more 00:02:51
good things if you look when I am not logged in here it does not show me any button or any message 00:02:57
or anything at the time of logging in, it does say welcome and puts the user's name and the 00:03:05
logout button will appear for me, then in each of the cards in addition to putting the title and the description 00:03:18
what it puts is the delete button in case you want to delete it or edit it to update that we will 00:03:24
do in the next video ok and with that we would have everything done we give it the format that is 00:03:31
good to put the title to put the description to put these dates ok then 00:03:38
notice that these two I just put them now this one of videos is from yesterday and this one from test 1 00:03:45
of day 24 ok then well a little to see how to do all this in a simple way ok 00:03:53
then let's go to our code let's see if we are already 00:04:02
ok and then in the code well the first thing I have done has been to create a new folder 00:04:12
that is called component ok and inside the component I have put a bar a file that I have called 00:04:22
a bar that is this in which I have created is in a bar that they are teaching you is worth all this that is 00:04:31
up here in purple and another that is the one of cards.jsx that is the one that makes these cards for 00:04:44
each of the entries of the mapping of when we launch the consultation on the backend so that it 00:04:54
returns all the tasks, it is worth that mapping of that task data arrangement that it returned to us 00:05:01
is where I am collecting it and I am putting the task.title ok I am putting the task.description 00:05:08
and the task date that I put with the new date to convert it to good because only the date and then 00:05:18
that I put the local date stream so that it becomes like a stream ok these would be the 00:05:28
buttons that as you see right now because they do nothing is worth 00:05:35
and well then it is to start using the different classes that is, because 00:05:41
well, here I have the div to do what is this gray box is worth for each 00:05:46
of the tasks I have the the guide that what you do is this 00:05:52
header to put the title and put these two buttons that we pass the flash and 00:05:59
justifies between it is worth for me to place it all because as you are seeing it 00:06:04
then I put the description and then for the date something was saying ok and this code 00:06:13
is the one that is allowing me to make these cards these cards ok then you could 00:06:19
do them as you have, I hope, tried to do, it could be, for example, that instead of putting 00:06:28
two buttons that you can edit them by clicking inside the card, for example, it is worth 00:06:36
this type of things that instead of buttons are check, use the use effect, well, you would already have 00:06:47
different options that you could use, then what the card is is this 00:06:54
and you can say well but this is a new file a jsx that is called cards that 00:07:04
is inside components but it is not the page of the task page then what is what we had 00:07:12
before I put the div and all the labels that appeared here the information is worth one 00:07:19
below the other here inside where now I have put cards then what is what I do inside 00:07:27
the component I create those that code for the html with the issue of the data is worth and from the 00:07:33
task page dot j s x what I do is call cards ok what I do is call because exported cards 00:07:44
then what I do is call cards this function what I do is pass a task to it that task is 00:07:54
the one we are taking when I map everything that the backend is returning to me ok then I 00:08:02
mapping that is to go through that array in this in this case that object that is an arrangement I am 00:08:11
taking each of the tasks and what I do is send that task to the file cards.js x 00:08:18
ok and I also passed it here well to pass this idea to him because if not sometimes it gives problems and 00:08:26
you remember I was also using it if you see yesterday's video I was also using it 00:08:33
ok then here what I do is call the card that of course I have imported it before ok 00:08:39
and on cards I already tell you that by putting this it is already doing me every time I pass one of the tasks it is already 00:08:47
doing me for each of the tasks it is taking this format and it is drawing it for you in this 00:08:54
way which is what we were looking for ok that we could take and say well instead of separating it 00:08:59
take all this deep and I put it inside the space I put it in here, okay, well, you can 00:09:06
do it, okay, but hey, the way to work with this type of technology is better like this, 00:09:15
especially because as you are going to see now with the napalm, this could be used or 00:09:26
podría dar a utilizar a diferentes páginas vale entonces esto me refiero a tarjetas vale está 00:09:34
bueno es interesante a la hora de pensar en lo que es la reutilización de código vale interesante 00:09:41
porque le pongo aquí esto del grid el grid call 3 con cap 2 es esto es lo que provoca el que haya 00:09:49
three three columns is worth first you tell him the grid so that he does it by rows and by columns you tell him 00:10:01
that you want them to be columns that are three is worth and then those are those margins between the different 00:10:08
components is worth then that you have to do here in this div you cannot do it within 00:10:16
j sx cards because you have to do this for each one, that is, you do this with all the 00:10:23
cards, the order on the page, you do it with all the cards and the code that I put in 00:10:35
cards is that each of the cards individually is worth because that is why I have to work from this 00:10:42
di porque este es el conjunto de todas las tareas de todas las tarjetas que tengo vale entonces en 00:10:51
cuanto a las tarjetas es pues es es hacer esto que os estoy diciendo vale es una de las formas 00:10:57
ya os digo que lo podríais hacer de otras formas pero es básicamente sería hacer esto ahora con el 00:11:05
navbar well what about the navbar there if you look at it because here I have the navbar what I have done has 00:11:11
been to copy the one that comes in the time wind and then start modifying and putting the buttons 00:11:23
or the links that interest me ok then if you see you have the div it is a bit the same as 00:11:32
siempre ahora se explicó esta función flecha porque la he puesto vale bueno y tengo el is 00:11:41
authenticate el logout y el user el logout este hay dos formas de hacer esa función yo en este 00:11:52
caso lo he hecho directamente en el from y dentro del contexto vale del out context entonces dentro 00:12:03
of the out context, notice that what I do is this because I have done it from here because it is much 00:12:11
easier to do it from the back-end, but remember that in the back-end we also have the 00:12:16
function, that is, we could make a call by axios to the back-end and it was going to work for us 00:12:22
the same now well we are using a cookie called touch then only with this 00:12:28
line with cookies point remove and the string with the name of the cookie that I want to delete, it 00:12:37
erases it for me, then well, I do it from the front because I think it is easier and then I already put 00:12:43
the set user the set user object I put it to null and the set is authenticate to false in such a way 00:12:51
that if I click on the lockout it takes me out, okay, and I can log in with the 00:13:00
user, whatever, always giving the welcome here to carolina santos, okay, 00:13:07
log out, log in, now we are going to put it with mine, okay, well then this is an arrow function, 00:13:13
an anonymous function that I am creating within the provider of the context and that of course then 00:13:28
the 00:13:37
transport within what is the context is worth so that all the children can use it all the 00:13:41
children routes that are within this context that are all worth then we are going to see more of the napalm 00:13:48
this function, well, I will explain it to you now, well, I am putting the tip here, the nap that this is 00:13:55
as what I tell you this is copied from the tailwind part, it is worth this of the ue to do it as a list 00:14:05
this is not what I have changed, it is worth then here I am putting good because the color of the 00:14:14
the different classes that justify me that it distributes it to me from left to 00:14:24
right to the elements is worth everything we have been seeing there is nothing that you do not have 00:14:31
or that you do not understand at least these lines are worth there should not be anything that you do not 00:14:37
understand it is worth now I get here and this is a little rarer this yes I had not used it 00:14:48
ok then in this smell I put it good at the beginning I put it to be flex and I put the space x 4 ok 00:14:55
then it smells if you look at it and if you look at what it does is first I have put it in a 00:15:06
deep so that it draws me this part of these buttons you see that it is the start add task 00:15:25
visualizar tareas vale 00:15:33
y el huele sabéis que es para hacer una lista y luego los componentes que en 00:15:38
este caso lo pongo de esta forma vale uso el link que ya lo hemos usado para 00:15:44
que cuando haga un clic encima de una de estas opciones me lleve 00:15:50
to the route that we have passed to the parameter you are worth then the link you the link remember that we export it from 00:15:57
here you have it from the real router where it is worth it and then I am doing that well what 00:16:10
me me interesa que veáis es esto es estas llaves es preguntar si estás autenticado o no esta forma 00:16:20
de condicional esta forma de condicional es cuando bueno pues vas a tener las dos opciones 00:16:28
y vas a hacer una cosa u otra veis que he puesto este símbolo vale porque el isa auténtica y con 00:16:36
el signo de interrogación paréntesis luego dos puntos y lo que sería el seno si es verdad si 00:16:42
is a lie, wait for an instruction, then here what I do when I pass this symbol is to 00:16:49
indicate that it is going to be a block of instructions, so here what I am doing is 00:16:56
a conditional is to ask if it is authenticated, yes, then if you are authenticated I want you to show me 00:17:02
these buttons, it is worth the beginning to add tasks and visualize tasks that are the ones that I have right now 00:17:08
if you are not authenticated as it is now, it is worth that they gave it out, you see that it only shows me 00:17:15
to register and see what these are, so this is a very comfortable way and I really like 00:17:22
to show and hide elements, okay in this case of the nap bar then this seems to me that it is 00:17:34
because it is very cool and that if you should use it when making the entire user interface 00:17:45
with the user's graphic interface that I have down here because I have the same thing I have the 00:17:55
is autenticate I have the symbol to tell it that it is going to be a block of options I have the welcome 00:18:03
with the name that now is this is the function that I told you is ok now I explain it to you I have the log 00:18:10
out everything with the link is worth and that's it and well and the image is of the button is with the bat 00:18:15
I am here strange it is worth that it is a mess and if I am not authenticated the only thing that 00:18:26
shows me is the bat that is how you are now then if we log in it is worth it because you are going to show me 00:18:33
because what we have here is welcome with the name 00:18:46
the out the log out button with everything I have put in the class 00:18:51
we are going to put the class well and all these options are worth it does not have 00:19:00
more to me what I was interested in this is this 00:19:10
it is worth it is authentic and that is this form of conditional good and this is the navbar of course 00:19:14
and you can think well and how do you get this navbar to be showing in all the 00:19:20
pages in all of them that it is worth if I leave I have the same if I am going to register I have 00:19:28
the same if I am going to log in to log in I have the same how do I do that I am copying all this code 00:19:37
no lo estoy copiando en las diferentes páginas porque lo que lo que he hecho ha sido dentro de 00:19:44
componentes un fichero que se llama navar punto jsx vale y no y por ahora pues no he hecho nada 00:19:49
más entonces esto es interesante si venimos a app jsx fijaros en esto navar vale navar qué es 00:19:57
we are going to see is how I export it ok then look at how the whole issue of 00:20:11
to see that I see it this ok I did not see it the real router don this allows me to do it and that is very 00:20:28
powerful, that is, it does not only allow me to create the contexts, create the protected routes, it does not allow me to do 00:20:35
this type of thing, it allows me to do this type of components as is the case of the 00:20:45
not bad and then call it ok then when you call it all the routes that are down here 00:20:49
van a visualizar es en la paz vale esto y esto es interesante a mí me parece me parece muy muy muy 00:20:58
interesante vale y una forma de reutilización de código vale bueno si os fijáis este main que he 00:21:10
also put here that this one does have to be closed when we 00:21:23
encompass a series of routes, this mail is still a container that the real router don also allows me, 00:21:30
so it is a container in which I have told him, okay, here you are going to make me a 00:21:37
container and you are going to put the mx auto and the px 10 what I am telling you is the size that I want 00:21:48
me to occupy these margins, it is worth that there is to the left to the right, well, I put this size in it, 00:21:56
this is not that it is mandatory, it is to leave it with everything as more organized, it is worth remembering if it is 00:22:02
containing everything that is shown on the page of all these routes it is worth if we put it here to see it 00:22:15
now it is worth looking at how it is responding how the container is and how it is getting into x 00:22:40
these margins of 10, the margin in x is put in automatic too, well this is the padding, 00:22:54
sorry, this is the padding in 10, but the margin if it is being put in, it is being adjusted, it is worth 00:23:04
then it is a way of making a container within all these routes, which is usually done, 00:23:09
ok and it is nothing more than a container that as you see as you will see in the whole topic of 00:23:19
graphic interfaces the containers are always important in the end this is the parent container 00:23:25
each of the cards is a container that has all the text and all the information of each 00:23:31
of the tasks of the tasks is worth the navbar is a container that will contain the different 00:23:36
that then I group them and with the justifies between I distribute them between all this space 00:23:42
in the end I am all the time working with containers ok then it is important we are going to 00:23:48
remove this and it is a bit horrible ok and well in principle it would already be like that what I 00:23:56
I was saying if I go to api I have also created here 00:24:14
no no I have not created it, okay if we come to the back-end 00:24:20
we have the lockout base, that is, we could go against the back-end that calls 00:24:28
to lockout lockout 00:24:35
that is, it is importing it from the out controller then the out controller you have here the 00:24:38
log out that would be this this arrow function is worth what it is what it is returning to the front a 00:24:46
touch in which it is telling it to expire now delete it from here it is basically 00:24:56
lo mismo pero ya me estoy ahorrando la llamada al back-end vale cuando lo puedes hacer de una 00:25:04
forma más simple desde el from vale entonces bueno pues vamos a venir aquí esto es 00:25:12
part of this interface that I asked you yesterday that you made me, okay, I understand that if with what I have 00:25:27
shown you, you should be able to do it, okay, then, well, try it, 00:25:41
do it and any questions you ask me, a greeting guys, see you later 00:25:49
Idioma/s:
es
Idioma/s subtítulos:
en
Autor/es:
Mario S.-
Subido por:
Mario S.
Licencia:
Dominio público
Visualizaciones:
42
Fecha:
26 de agosto de 2024 - 19:23
Visibilidad:
Público
Centro:
IES VILLABLANCA
Duración:
00′ 26″
Relación de aspecto:
1.78:1
Resolución:
1920x1080 píxeles
Tamaño:
75.43 MBytes

Del mismo autor…

Ver más del mismo autor

EducaMadrid, Plataforma Educativa de la Comunidad de Madrid

Plataforma Educativa EducaMadrid