Saltar navegación

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

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

44 visualizaciones

Creando la página para registrar Tareas. Creando un contexto de tareas.

Más información Transcripción

Descargar la transcripción

well in this video what we are going to do is the part of the tasks I have modified this entry 00:00:02
add tasks and what we are going to do is the form to be able to add a task the structure 00:00:12
the idea of ​​doing this is going to be exactly the same as what we have been working on so far 00:00:19
now we are going to make the page in which instead of a text as we had put that it appears 00:00:25
page of tasks or something like that is worth the task page or something like that we are going to make a page with 00:00:32
its form giving it a good format seeing a little the same thing that we have and following the line 00:00:42
with the different pages that we have been doing, how to register or log in, not the colors, 00:00:50
the sources, I do not know the animations, everything we have seen with the tailwind, well, 00:00:57
that in the development of interfaces, all those that interface line must be followed, okay, 00:01:06
then we are going to do that and we are going to create ourselves because the same as we have done with register and 00:01:14
log in we have created a connection with the back-end 00:01:23
well through axios to be able to connect by activating the credentials remember 00:01:32
all that if it did not give us problems because we are going to do the same with the issue of tasks 00:01:37
remember that it is like the project is the same but they are the two different branches what is the part 00:01:42
of the authentication and the part of the tasks is worth then because we are going to create another 00:01:48
exclusive file for the tasks and this I am going to do it because in the back-end I changed the route 00:01:57
in the api file now we see it change the route for if you remember in the one of the app change 00:02:06
or add to the route for the authentication it was something like villablanca is the dam 00:02:18
or something like that, they give something like that, okay, now we see it and for the tasks it was Villablanca, it is 00:02:30
the dandos, it is the tasks, it is worth something like that, then that will force me to do another file in the 00:02:40
api folder for the task branch of the tasks, okay, what else are we going to do, well, I'm going to 00:02:49
make a context just like I have done with the authentication, I'm going to make a context for the 00:03:01
task theme because in the end we have good those data when adding that task 00:03:05
I can use them later when I want them to be displayed or whatever, then well, there 00:03:13
could be done in different ways, not getting in and working on that connection file with 00:03:20
the backend through axios in each of the pages that we are developing to add tasks, 00:03:27
update tasks, delete tasks, okay, but that obviously is not done like that because then 00:03:33
well, you know that it is one of the standards of the good developer, we do not make a file 00:03:39
and if we can share the information between the different ones in this in this case between the 00:03:49
different pages because we do it like this and that the only way to do it from here is through 00:03:58
of a context that context is going to be within the context of the user and because I am going to do 00:04:03
that because if you remember when we added a task in the back-end we put a title and we put 00:04:10
a description of the task ok the back-end received that information and directly associated that 00:04:19
user id because remember that you have to be logged then it associated the id of the 00:04:28
logged user to that task and it was the way to put each of the users their tasks 00:04:33
ok so that's why I'm going to put the context of the tasks within the context of the authentication 00:04:43
ok good here remember that if for example now I was adding tasks as I am not logged in, he 00:04:55
sent me directly to the login ok at the time in which we log in to log in ok now he 00:05:02
left me ok and took me to the page of tasks good because right now there is nothing ok 00:05:13
then it is about now we are going to work this part is worth then good to tell you I am not going to 00:05:19
put the navbar at least while recording the video so as not to make it either longer than 00:05:28
what it already is, which would be to copy and paste from the others of the home page of the login page or 00:05:33
of the register page, it does not matter, it is good, we are going to start working with this then 00:05:40
Let's go to our code, okay, we're already, yes, yes, well, then I'm going to create the topic of the API first, okay, to have it, well, there it is already created, then the topic of the API, this is what I was telling you, okay, we, when you see the Adam2, when we do this, we have for the whole issue of authentication, 00:05:46
I put in to see if I see it 00:06:18
pps you see I put for the issue of authentication I added this route 00:06:25
villablanca dandos and for the tasks I put the tasks ok then this is 00:06:34
so I'm going to create another file now I could put it all in 00:06:43
dandos and use the same authentication because yes also on the other hand if 00:06:46
you are ordering in different files the two branches of the project because maybe it is clearer 00:06:51
and easier after reading it is worth then this I am going to copy it and we are going to create that 00:06:58
then the first thing I am going to do is good I have this file that I am basically going to do 00:07:06
is the same in which I put the url base which is what I am going to change the wii credential to true 00:07:13
vale y exportamos la instancia vale entonces esto lo voy a coger entero y lo voy a copiar y me voy 00:07:19
a crear aquí un fichero que le voy a llamar pues por ejemplo axios task por ejemplo j s axios estás 00:07:28
y aquí lo voy a pegar vale la conexión a través de axios con axios lo inicializamos y en la base 00:07:47
url I'm going to put the tasks here, okay, we're going to check that that's okay, tasks, tasks in 00:07:56
plural, okay, it's fine, okay, then I already have this file created, I don't do anything else, that's it, that is, the 00:08:09
change would be this if the two of them had left them in Villablanca they give two because I wouldn't 00:08:16
but well, it is not something I follow either, it seems clearer to me to follow those two branches of the 00:08:23
project, it is good and now we have an axis, sorry, an out js, it is worth in the out js we are going to 00:08:30
create the different functions that we are going to do against the backend from the front, in this 00:08:41
case the only thing I am going to do is that of the register something like register task 00:08:49
request or something like that something like that neither is it worth it then if there would be to do others because it is time 00:08:58
to update the task listing the task erasing well but now as I am only going to 00:09:08
do the page to register those tasks because with the request register it is worth it, then 00:09:15
we are going to create another file that we can call, for example, these points js, for example, it is worth a 00:09:21
bit, you already know that you are calling it as you want, what are we going to do here, import this 00:09:31
instance that we have done in axios estás ok then we are going to import 00:09:40
instance from axios estás and it already gives it to me here ok.js ok ok I already have an instance ok 00:09:47
then now what do I want to do the sport comes we call it for example 00:10:01
task request, for example, the create task request, this will have those data that we are going to collect from the 00:10:09
form that we are going to create on the task ad page, so here we are going to collect some 00:10:28
data because we can put it for example because this task is valid and with this we are going to 00:10:36
do our arrow function that what we want is instance point post ok because we are going to send 00:10:44
those data so that they are saved and this is what we are going to send parentheses 00:10:53
key or a double comma key always what you want is worth here the route is 00:11:00
to see I do not remember 00:11:14
the ppj is where this route is routes here 00:11:19
to add the route that you write is ok you are ok then for the same because here we are going to put it 00:11:26
and we are going to pass it as an input parameter ok and we would have made our connection 00:11:42
with the back-end, it would be worth it, it is because we create requests, these responded, then they 00:11:50
sent us information about the task so then we can pick it up and we can print it 00:11:58
and then we would have it in what is the topic of the API of the connection with the back-end done 00:12:05
ok because I'm just going to do the great task request ok well great then what are we going to do now 00:12:12
let's go to our tax page for page here we have good because the page that has nothing 00:12:21
ok and we are going to start making our form ok then what do I have in mind at the time of 00:12:30
making this form well because we are going to use the just form of the react hook form it is worth the same 00:12:43
that we have done on all the pages, so the first thing is the import use for 00:12:53
from 00:13:07
ok ok that will be the first thing we are going to use this use for the react form ok what else are we going to 00:13:13
import? Well, when we do the context we will import it, but for now I think it's 00:13:26
done. Okay, so we have the TaxFormPage function. What are we going to do to be able to 00:13:33
work with the UseForm? Well, as always, it is constant to tell it with what we are going to work 00:13:40
the use for then we are going to work with register to be able to register each one of those fields of 00:13:50
the form the hand with the hand let's see it was his hand let's see it and what else can we need 00:14:04
or I think that nothing else is worth this is the keys and this is the same as the use for 00:14:17
parentheses parentheses and we close ok register now you are going to see it but remember that it was 00:14:32
where we painted the name of the field we could put it that it was required ok the hand submit is 00:14:39
the summit is what I use for 00:14:48
rewriting the summit of the forms that you have seen in the first one, it is worth remembering this, 00:14:55
then what is the first thing I am going to do, create a function that is going to be the home summit that comes 00:15:00
from the hand of the hand the summit is worth then here we are going to put it to leave a little space with 00:15:09
or a summit so that it is called the same as you have seen in the first or if you do not put 00:15:15
the name that is exactly the same there in the hand the summit and in the hand the summit what we are going to 00:15:25
say is first here we are going to collect the data from the form that we are going to do now between 00:15:32
these two types is worth with those data what we are going to do is 00:15:39
open a key in case we visualize something good because we are going to for now we are going to give it 00:15:47
here you could call where you are you are you are request so that I can choose them but 00:16:04
como voy a trabajar con el contexto no lo voy a hacer así lo voy a dejar por ahora vale con 00:16:11
con una visualización de data para que me visualice esos datos según le doy a long 00:16:16
submit al botón del formulario vale vale entonces qué más tengo que hacer ahora 00:16:29
we are going to take and we are going to do our form then this I do not want it at all 00:16:39
and within the div because we are going to build what would be the form the form on summit 00:16:53
and here we are going to call our function, it is worth the one that we have just created here, we are going to 00:17:02
put the same or his is worth what else I can put inside the form because in principle nothing else is 00:17:10
worth I do not need anything else ok we already have our form that two fields we have to 00:17:23
send to the backend to save that task for us because the one that was the title of the task and the 00:17:31
description ok then we put an input of type text an input of type text that we can put a place 00:17:41
holder a place holder that is because that title title or as you want we are going to put 00:17:56
in English everything and that's it. We can put the class name and start passing those classes of 00:18:06
Tailwind. We can put the same ones that we have been using so far. 00:18:20
bg violet and here it was it seems to me 700 00:18:26
we put it 00:18:36
white so that it does not put it in white we put it in the source 00:18:42
what was the text and we told him 00:18:48
there is enough with more work the margins the padding is worth the interior padding in and in x 00:18:57
is worth 4 and 2 that the corners are rounded and we can put a 00:19:08
margin of 2 is worth so that the fields do not stick to us then we are going to put a margin but 00:19:18
only in and so that the different fields do not stick to us, okay and this would be the classes so 00:19:26
I do not forget because none is worth what we put now because we can and add the register 00:19:35
ok that for that we have put it then in the register remember the first thing that happened to him 00:19:47
the name of that field that was going to be title dance the title and I think that with this 00:19:52
it would be worth it we can also pass the autofocus to this one so that every time 00:20:04
every time the page is loaded, this selected field is always going to be first the title and then the rest of the good in this case the other input that is a text area 00:20:18
ok then we go with the text area then the text area will be a text area in 00:20:39
which the only thing that interests me are the rows that I am going to tell you that they are going to 00:20:51
to be 3 is all in quotation marks 3 ok I'm going to pass the placeholder the same as before 00:20:57
here we are going to put a description we are going to pass all this class name 00:21:13
I'm going to pass it as before 00:21:28
Register, in this case it will be called, description, and what else can we need? 00:21:36
Well, nothing more, I think nothing more, okay 00:21:50
And then we would have our title here, which we could put the one that was 00:21:58
and our description that shows us the three lines and if we are not going to get the 00:22:02
displacement bar, it is worth what else we would need in the form the button is worth the button that 00:22:09
we are going to associate through the summit of this function with this call to this function 00:22:18
ok then we are going to put the button 00:22:25
this is 00:22:37
its mit 00:22:40
and we can put it 00:22:43
add 00:22:48
for example to this button we are going to put it too 00:22:55
we are going to put the same thing that we have, for example, in the login 00:23:01
we are going to put it 00:23:08
where is it, here is the button 00:23:10
where is the form 00:23:14
I'm going to take all this from the button and that's how I do it exactly the same 00:23:29
ok, ok, submit, ok, it would be before 00:23:48
and we are going to give it a little format then and we are going to play with the class name 00:24:03
we can put a box that takes everything because we have been doing it all the time, it is worth a box 00:24:13
que vaya recogiendo todo él en los campos del formulario vale entonces le ponemos pues por 00:24:20
ejemplo este entonces a este le tenemos el 500 es que le he puesto el mismo 800 00:24:30
we are going to put this one to see how it would look better we are going to leave it here 00:24:43
here we put the bg violet 800 we are going to put max the maximum width that is for md 00:24:58
ok so it leaves me like this in small 00:25:10
the width that is complete that I occupy everything I can put a padding on all 00:25:19
sides of 10 ok so it leaves us better we can put the round that we are 00:25:25
using all the time 00:25:33
so that the rounded corners are put on us and I can put a margin of 2 00:25:36
ok what else can I do because we are going to play with the flex that we had also used it and it is worth 00:25:52
then here that we are going to put the flex I want you to put it in columns and I want the 00:26:00
items that are inside this block of this container to be centered and I believe that 00:26:12
I close this here, I take it out of here and I put it down here, we would have it total, that if now I put it here, test 1 00:26:19
this is a test of the form, I 00:26:43
I give it add task ok and add task as we have put it only that it does not 00:26:47
visualize it because it should not visualize it we come to more tools I am going to show you 00:26:54
from here that you will see it better ok you are already like this here more tools 00:27:01
where this development tool is, we come here in the object and we already have this is a 00:27:10
form test and the title test 1 is no longer doing everything, it is showing us the 00:27:20
information well, well, we are going to continue working, we have the files within the app and for 00:27:27
connection through axios we have the form already created ok then what I am going to do is 00:27:42
create a context ok open a moment ok we continue then let's go to the code you are already seeing the code to see if 00:27:50
we are going to create the context then within the context folder we are going to create 00:28:05
a file because we can call it for example by following a little how we have called this 00:28:14
instead of aut of authentication because we are going to call them 00:28:21
with tex no tax with tex 00:28:27
j s x ok we would already have our file here to make that context then 00:28:32
a little fast and because it will follow the same structure as that of the authentication 00:28:43
we are going to do it and that's it, that's what I'm going to do first, import 00:28:49
the context with text 00:29:06
from read ok in addition to the content we are going to use the use context 00:29:16
and we can also use, in case we need a state variable, the useState, okay, I'm going to import 00:29:23
also what we have done within the task, the createTaskRequest, okay, so from here I'm going to 00:29:34
to import the create task retos from api-task.js 00:29:47
ok, what else can we need? 00:30:00
well, if we need more, we are importing more 00:30:10
I think that with this we already have it 00:30:13
I'm going to create a task 00:30:16
context that is going to be the same as 00:30:25
with text 00:30:33
ok ok we are going to create our context then just like we did here 00:30:39
the first thing is to tell it that I want to create a context with out context, then I can start using the use, well, as we call it, that now we will call it useTask 00:30:46
To ask if the context exists or not, if the context does not exist, it will give us an error, or it will tell us that this context does not exist, and if the context exists, you provide it to the rest of the children, which are the different routes. 00:31:01
Remember that we did that through the OutProvider, there we already put all the functions that were in this case logged, log in, the useEffects if any were missing, as it was the one that the messages were not visible all the time. 00:31:21
and all that we pass everything that is here inside we pass it from the challenge that there is here the 00:31:41
return the out with text provider and we let the children have access to all these 00:31:48
state variables or functions ok and this worked this way and so we are going to work ok 00:31:57
then we have the contact side there is the tax context we create that context as we have said the 00:32:06
first thing we do is ask if that context exists or not then we are going to put a 00:32:14
for example this is the same this does not have it does not receive anything and what we do is 00:32:22
ok we have with the context context is equal to use context 00:32:45
ok this is going to tell me if this function is created ok or it is in null or it is in white 00:32:59
that is, what does that mean if we have a context or not ok then it is where we are going to 00:33:05
o mandarle proveerle a los a los hijos de ese contexto o decirles que oye no el contexto no 00:33:12
está creado vale entonces aquí le vamos a decir sí no hay contexto entonces le vamos a mandar 00:33:23
we are going to throw the new error and here we can put the context of tasks not created, for example, okay 00:33:34
what else can we do if it does exist if there is the variable context then what 00:33:55
we do is return context ok we return it it would be and now we are going to create that provider 00:34:03
of this context then to create that provider of that context because we are going to do it then we are going to 00:34:13
put the sport ok and this is a bit this context scheme is what is usually put 00:34:18
always ok first the control of the context then the provider and finally well within what 00:34:27
que es el provider las variables que retornamos vale entonces aquí le vamos a llamar tax provider 00:34:32
por ejemplo que lo que vas a recibir son todos los hijos de este de este contexto 00:34:39
then here because at some point we are going to need a state variable in which we are going to 00:34:58
save a state variable of type object of type array in which we are going to save 00:35:15
the different tasks especially when maybe not so much to register it but yes when 00:35:22
when we do the page in which it is going to show us all the tasks that this user has 00:35:29
linked, so I am going to create that variable also a little in reminder mode, 00:35:33
I am going to put the task except that it is worth to play with the state variable 00:35:40
and this is the same and we are worth it and we are going to pass it right now the empty arrangement is worth it is a 00:35:49
it is the same thing we did with the issue of errors, it is worth it in case you want to see it again inside 00:36:05
I will tell you within the file instead of the context of tasks of the out ok but it is the same ok 00:36:12
what else are we going to do because we are going to create that function that I am going to call it and there are tasks for 00:36:23
example it is worth creating that task because it is in what we are now this is going to be equal to 5 00:36:34
because asynchronous remember the asynchronous in the wait because we are going to go against the database 00:36:40
and then an error can occur, then always the async here we are going to receive some tasks 00:36:48
or a task, better said, because we are going to go there we cannot put we are not going to put several we go from one 00:37:01
one, okay, and with that task, what am I going to do? Well, we can put, we can put 00:37:06
directly, just as we have been doing, an answer that will give us the backend, okay, 00:37:24
here we are going to put the await and what are we going to call the create task request function that we have 00:37:31
created within the api folder, which is the first thing we have done, so here we are going to 00:37:40
call the request and I am going to pass it to you, it is worth remembering that this function I will also call it 00:37:45
and now you write from our form, it is worth that the only thing I have done has been to visualize the 00:37:56
data that we put in the form but well that we have to send to the backend and that we do 00:38:02
going through this client is ok then here is where I am going to receive those tasks we can 00:38:09
and tell him well, because to see it more than anything with sun point log the answer that 00:38:21
is giving me from the server ok and I would already have this function made the creators would have everything 00:38:29
well, the call to the API, okay, what else can I need? 00:38:39
Well, now we see how this information shows us, but in principle, 00:38:49
Well, it would be there now, what I do is the retun, it is worth the retun within the retun that we found the task 00:38:59
context is worth the tax context that is the one we have created up here point but dance 00:39:17
is worth what I put as a parameter within this label of the task with 3 providers the value 00:39:31
value equal key key ok and here we are going to tell him what variables we are going to allow 00:39:39
within the context that they can take the children ok that they can access the children then I am going to 00:39:50
put here tasks for example that not in the end not now for the register I do not use it at all but 00:39:55
I think that later when we get all the tasks and we are going to use it and what else are we going to use 00:40:01
create task, okay, these two here we would close the task provider and here we can put this 00:40:08
I allow the children to take these values, it is worth remembering that the children are 00:40:35
that the children are the different routes, it is worth and it would be 00:40:41
but there is from outside 00:40:59
the task with text to this I have put it wrong 00:41:02
We return the TaskContext.Provider. The values ​​that we let access within our context are going to be a task, which is an array of all the tasks that are associated with that user and the createTask, which is where we are calling the API function, if you want, to the Axios function, which is the one that links with the backend and the one that is going to save that task in the database. 00:41:28
and in principle this would already be, it does not have more, this is the basic structure, it is what I tell you, that of a context this is the basic structure 00:41:58
Okay, what else would we have to do then? 00:42:13
Well, to include the different routes for this context. 00:42:18
So we go, that here we have it in AVPJS, okay? 00:42:24
Here we have the AuthProvider, which is the authentication context, 00:42:28
but as I was saying before, we have to put this new task context 00:42:34
within the context of the authentication, because we need that user ID. 00:42:39
Okay, so if I did it outside, I would already have some problem. 00:42:45
Also, instead of putting them all in, for example, register the blog and I wouldn't need it, I could put 00:42:50
directly the ones I have here protected, which are the add, update the profile, all this. 00:42:54
Okay, but I'm going to put it here. 00:43:00
And that's it. Okay, then. 00:43:05
well first we are going to import what this we will have to import then import keys 00:43:06
tax provider ok from here and this here we are going to put the provider 00:43:16
and I close control x and this we are going to put 00:43:30
Ok, we have the format, we would have it, we would also have our context already defined for which routes they go, ok? 00:43:42
Then we have the API, we have our context, we have the form. 00:43:57
what else would we need within the form to tell it to call that function create task that we have 00:44:06
that we have created within task context then let's go to our page and here 00:44:17
instead of just showing this information what we want is 00:44:23
to be able to use that function then the first thing I have to say is import 00:44:30
and you are front with text tags with text is worth 00:44:36
and here what I have to do is here the same as we have imported these functions from 00:44:53
inside they were what I am going to say is with what is what we are going to take because the two that we have 00:45:19
let's see I don't remember you and you believe 00:45:31
and we are going to take it from 00:45:46
that is ok then from just as we are going to and that you are the task I am going to leave it but I would not 00:45:56
need it here I would have to put the create task ok once I have taken those tasks well here the 00:46:15
truth is that I could put the console if I want I could put it but it seems to me right now 00:46:27
the console log and the task is valid since I have loaded it since we bring it to variables but well 00:46:41
now in principle we are not going to use it for anything else but for it to visualize something for us and 00:46:50
what I am going to do is change this console.log then in that console.log that is what 00:47:00
we are going to put because instead of the console.log we are going to put the create task 00:47:06
that is written here and that we are going to pass to the create task because the data 00:47:14
the data is worth the data when we call that they are the data that we have put 00:47:23
within our form, it is worth in this way from the form we call here it is that it is the 00:47:29
function that we have in the task context is this function calls to create a request that is the 00:47:35
function that we have within task js within the API that is the one that calls this instance remember 00:47:43
that it is because I have called it like that but in reality it is a call axios ok and it is the one that we send 00:47:51
through the post protocol those data that we have put it is worth that from here I put data 00:47:59
here I convert them into task ok that goes if everything works well it must be saved in our 00:48:06
of data and we would have already created it, then well, these would be the different steps 00:48:13
that would have to be done now we are going to try we come to our page we are not seeing if we put 00:48:22
for example, last use, well, for test 1, this is the task test for task creation, for example, 00:48:33
I give it to add tasks, let's go to our mongo express, it is worth remembering that the 00:48:51
graphic interface to see mongo that we are using it all the time I am inside the database 00:48:59
dan 2 as always now within the task data collection here I update it and we already have 00:49:05
our task here, that is, it has done everything well for us, it has created that idea, it tells us the title, 00:49:13
test 1, the description, the user, you see, because of what I told you that the context is important 00:49:20
that it is within the context of authentication because if not this we could not 00:49:28
get it, it would be worth going around more and it would probably be even more complicated 00:49:32
the date of creation update is worth everything we have been telling him when we create 00:49:43
the back in that he did not put it on us and we would already have it, this would be 00:49:48
our page to create the creation of adding new tasks to our database of mongo 00:49:54
must in the backend in our app and up to here that is already long good a greeting guys see you later 00:50:05
Idioma/s:
es
Idioma/s subtítulos:
en
Autor/es:
Mario S.
Subido por:
Mario S.
Licencia:
Dominio público
Visualizaciones:
44
Fecha:
24 de agosto de 2024 - 14:02
Visibilidad:
Público
Centro:
IES VILLABLANCA
Duración:
00′ 07″
Relación de aspecto:
1.78:1
Resolución:
1920x1080 píxeles
Tamaño:
142.13 MBytes

Del mismo autor…

Ver más del mismo autor

EducaMadrid, Plataforma Educativa de la Comunidad de Madrid

Plataforma Educativa EducaMadrid