FullStackOpen | Part 3 | PhoneBook_Database | Exercise 3.13

Hello friends welcome to my channel welcome to De with Exel all right so in this video we shall be solving exercise 3.13 which is the step one of the phone book database in the previous video we solved exercise 3.12 here we were able to use a command line to connect to the database right to passing data and to fetch data from the database all right and we saw how we could do that we worked with the Atlas which is this so we able to populate this data right into the database and now we are soling exercise 3.13 all right so exercise 3.13 says change the fetching of all phone book entri so that the data is fetched from the database verify that the front end Works after the changes have been made all right so we want to Simply in instead of having the data in the code right the data in the code we want to fetch the data that we've passed in to the database right where we solved exercise 3.12 right so here we saw that we used the command line interface to to pass in these data here right so this data here we we simply want to fetch them directly from the database right all right so let's head into the code implementation and see how to do that so coming to my VSS code here I have my setup folder for exercise 3.13 and this is at this point just a duplicate of Step exercises this step 10 and 11 right remember this setup folder in this we solved the following exercises we solved the exercises we have in deploying up to internet right so that's exercise 3.10 and then 3 1 one right so we are simply going to be using the code we actually used in running these two exercises for this current video so that's understandable all right so I'm going back to saving data to DB all right so in this video now what we are simply going to be doing is we are going to be editing some of the code we wrote right so coming back to the vs code like I said this setup folder is a duplicate of this right and then we are going to be doing some edit to fit or to solve for exercise 3.13 right okay so previously in the previous video we solved exercise 3.12 the command line in the command line database and this helped us to this showed us how to connect our V vs code our code entirely right to the database directly and then with the skill we've learned here we are going to be solving exercise 3.13 all right so um okay so here is it all right so in this setup folder we have this we have the index.js which is almost the same as what we had in exercise 3.10 and 3.11 right so here we are simply just going to be ensuring that this two works properly and recall also um in ex size 3.10 and 3.11 we were able to use the set the set of folder we had me the phone book exercise right that's Step n so we use this to connect the back end to this front end right so let's see how this is going to play out so what we can do is this let me expand this quickly um so what we can do is we are going to run this entire this entire set of folder and also we going to be running this setup folder as well right so we'll be running both of them and then we need to also ensure that the both of them are properly integrated so that we don't let that to affect our work right so we want to ensure that the both of them are integrated before we proceed in this exercise all right so I'm simply going to copy this set of this part the part to this set of folder and I simply do npm run and then do the same thing for the back end folder we have which is a DP step one all right okay so these both are currently running right so now let's go to our browser and see if we can connect them now this is the we have now V is trying to load now this is the front end right okay so here we can see that the the front end and the back end they are still well they are still well integr integrated right so if we shut down the Ser of the back end we notice that we won't be able to get this data anymore let's quickly try that and see so when we come here and then terminate this back end right let's refresh it and see if we are going to lose this all right so we can see that we've lost the data we have because this back end is terminated right so that shows that the both of them are well integrated right when the servers are running right okay so having done that now the next thing you want to do is you want to edit this index GS file right in order to be able to fetch data the data we have here right all right so that's what we want to do next and then I'm simply just going to expand this all right so let's just minimize this part all right so before we proceed some things we need to note here is um the instruction says we should separate the modules for for the database connection right so some things that we have here we won't be having them here and then we also going to be creating new folders and new files so in this DB step one we are going to be creating a folder called models right because when you go to the material we are going to see that at some point here there's a model file there's a model folder that was created I'm not sure where it is right now but let me just scroll down let me just scroll down let's just scroll down it's somewhere I think I passed it kind of um have I passed it I think I passed it let's just scroll up a little bit okay um okay so we have the note in the model right so this note was created inside the model folder so all right okay okay so I'm just trying to locate where the models folder was actually stated to be created right um just bear with me while I'm trying to search for that uh okay I'm not sure I can find it but I know it's here right it's in this material so all right so what I want to do is this we are going to be creating a models folder and then we are simply just going to be following some of the patterns used in this material right so we are going to be having stops like this I think we also going to be having we also going to be having this so here you can see that M was used here right that means we need to install M very important very important because we don't want our connection string from the database to be part of our code we don't want people seeing it everywhere right so um this where the M was was installed also there's there's another thing we need to install also if you don't have it we need to install mongus right so mongus is also very important for us to install right so so here we can see that notes Here is in the models folder right so that means that there's a models folder that was created just that I can't really see it at this point all right but that's not an issue um so the next you want to do is going back to the code we need to create a models folder at the root of our folder right so what we can just do is we come here we say new folder then we call it models right so inside these models we create a file we can simply call this file persons. JS I think that's okay so we need to populate this we need to write codes inside this particular person. GS and this code is going to contain the connection to the DB database all right so we are going be most of the time going to the material to see how things are being done there right so we so it doesn't look like we are just trying to work it on our own right so part of what we need to do is we need to copy this right we need to copy this and then we edit some basic things so let's copy the entire part of this here because okay yes so here it says let's create a new directory for the modu called models right so this was what I was trying to search for and add a file called not. JS so here they work with not. JS here but we are working with person data right so we are going to be because we are we are working with the data that contains a name and a contact right so we choose to call our person so all right so let's copy this entire code and don't forget we are still going to be editing it right and let's paste it here we can simply call this person let's change it to person all right um so basic things now um if you look at this part here we we imported mongus right we also going to be importing the M because I have already installed both of them coming to my packet. J here here I have M and I also have mongus so you want to do that you can simply just do something like this I'm sure we all know it already but just for the sake of empy you do npmi M and then mongus so we hit enter and that installs it for us all right so going to person now let's proceed with our editing of this code now we need to import the m so we simply just say require M and then we say config with a round bracket so let's save that so that is imported now so next thing we need to do is this is okay this is okay yes we still need to connect with this mongod DB which is going to be coming from the M file itself we are here to create that we are simply going to to create that so here is where we are trying to connect the URL and then we have a den here so this Den what it does is after this is connected it tells us that connected to mongodb right and then there's any error we have we console log the error and we specifically conso Lo the message in the error right so next we want to do is we want to change from not schema here to person schema don't forget these are the basic things we need to do and then anywhere we see not schema here we change it to person schema so this part we are just trying to tell the application what and what not to return right so here we don't want the data to return the ID and the underscore V because going to the the Atlas right when you look at the data here we can see we have ID here and also we have underscore V underscore ID and underscore view right so we don't want these two to be returned so this part of the code which is this helps us to remove them from what is going to be returned from the person schema so we change this part also to person schema and then we change this notes to person with a capital P right so I think we are gradually editing this successfully all right so let's come to this part here here we change this content to name and then it's going to be having a string yes we change this part to number which is also going to be a string all right so let's save this and all right so so this works well now we are going to be if you look at this part here we've been able to export the model right so we are going to be importing it let's take out this packet. Json file so we are going to be importing this modu right in index JS right so how do we get that working um we need to do some imports let's go to top of the code or the yes okay so let's import the data we just worked on now okay all right so um something we did here we imported the M we are simply going to do that in the index.js also though though if you don't do it if you don't put if you don't import it here your code is still going to run right because when I tried it it worked right but just for the sake of trying to make things not to go against us right let's just make that work right so let's just import it here as well so we have the dotm imported here we have the C which came from the previous code and then we are going to be importing the person model right so we say require then we know that we are going to the models folder and inside the models folder we have the person. JS right so we assign this to a variable name we call it Con what should we call it let's call it Con person equals to all right um so all right so we have our Port as 3,1 we have the cost Express just saying Morgan all right so we are not going to be using this data anymore this particular one we are not going to be using this you can simply just comment it because the data we are going to be working with resides in the database now so that is commented also most of these requests we are not going to be working with them anymore so we can just from here just comment everything from that part now you can just choose to delete all of these parts right but there's a reason why I'm not deleting my for reference sake all right so also we are not going to be using this as well okay all right so let's be very sure that our connection is correct um let's run the back end again let's do npm run Dev to be sure okay so it says error connecting to mongod DB yes that is true all right so the next thing we want to do is we want to work we want to create a m file because coming to the person. JS file which is handling the connection to the database right we said URL is this DDP URI string right and we are yet to Define it in the m so what can we do we come to the root of our DB step one folder and we create the NV file so the first thing we need to do is we need to set our poort let's set the pot let's set it to be the same thing as what we had coded as 3,000 so here not here so in the index.js we can see that we had coded 3001 here right and we are also come here to write 3,001 right but it doesn't have to be the same thing you can choose to put some other poort numbers here right depending on depending on how your application looks all right so the next thing you want to do is we want to create or we want to input the mongod DB URI so we copy this variable and then we add it into the m and then we say equals to now the next thing that is going to come here is going to be the string right now recall that in our previous video when we work with the command database we used the mongod DB string right for our connection let's go to the JS so if you've not seen this video the video that talks about command line database please search for it in my playlist right so it's called the command line database right when you see it just watch it so that you are going to understand exactly what we are doing here so we are going to be copying this entire string right and here if you can see we have password placed here as a string liter right so we are going to be removing this and directly passing the password into it right so here is all we can do let's just copy from here and then let's copy this and then let's paste it inside EMV file here so we have this here and the next we need to do is we need to remove this and then pass in the password if if you recall the password that we used here was Dev with Exel right if you can still remember that all right so having done this let's restart this server and see if we have a successful connection to the database um I just hope that this is going to work it doesn't work we keep on debugging all right so it says connected to mongodb right so our connection works fine now this is a string coming from the Atlas remember okay so having done this um the next thing we need to do since we've been able to establish a connection between our code and the database the next thing we want to do is we want to work with this person. GS file which is this so let me close this dogs we don't need anym we also don't need this M for now then what you want to do is in the person. Js file all right so um are you working with this okay I think we are working with the index.js file for now so we we want to write a code that is going to help us to fetch the data we have in the Atlas which is this right but before then we can see that this data is really not meaningful right so we can just delete this from here you don't have to delete it right I'm just trying to make things neat here all right so we are left with three data in the database in this collection ATO Exel and Anna all right so the next thing we need to do let's expand this again um all right so like I said you can delete everything we have here in fact let's just delete everything we have here so it so it doesn't make our work look right right let's just delete everything we have here let's at first copy getting all person and then let's add it here and then let's delete every other thing up to this point okay so I think now our code looks neat right okay so what we want to do here is we want to write a code that is going to help us to perform a get request and this get request is going to fetch every data we have in the database all right so what we can just do is since we've already defined our app already can just come down here and say app. get and then we passing the end point we say/ API SL perent and then connecting using the request and the response okay so here we are simply going to to use Rec rest right you can choose to write yours in full it works it works that way as well all right so now what we want to do is the data now is going to be coming from this person model right so we simply just say processing do find now this find is a method we are getting directly from the database right mongodb then we say dot then then we say person that's each of them we say response dot Json person or we could just call it person since it's every every data we have that want to return right okay so I think we having some issues here this round brackets and then I think we need to pass another round bracket here sorry pressing should be just one s ending it okay I think this should work fine all right so what we need to do next is let's use the Thunder client remember we use this thunder client to perform our HTTP request right so we are going back to tund CL and then we want to see if we can get all the data we have in the database through this code all right so clicking on the Thunder CL we have this and then we have fso white which we've been using and then and then let's perform the get request right so this is the end we have API SL persons right so let's click on send um this is not working it says app.get there's an issue with our app.get um something is wrong so let's go back to our code to check exactly what is wrong the DB let's be sure that's what we have in our EMV file DB okay so going back to our index. Jon um we have app.get SL app.get then we have SL API SL persons comma request response person. find do then person um oh how come did this come here we having Express do response here this shouldn't be this way let's move the Express dot and then let's save this code again so let's wait for the server to successfully connect to the database all right it's connected and then let's try the guest request again uh something is still wrong it says response is not defined oh okay I'm so sorry here we use rest here not response so here we are simply going to write rest so like I said you could actually choose to write this as request and then write this as response or you could just write it as request most of the code I see they use wreck and rest right I don't think many people really want to be right in very long variable names right so let's go back to our get again and then see if this going to work all right so here we can see we have ATO Exel and Anna right returned from the database right so these are the data we have in the database right so we don't need to stress it out okay I think with this we've solved what this exercise is all about let's go back to the exercise and see if we are not missing out on anything so going back to the exercise it says verify that the front end Works after the changes have been made okay so now we want to confirm that the front end Works after these changes have been made so remember the setup folder we use for the front end is in the Part Two Step n of the phone book right that's this so we are simply going to be seeding into this folder which we have here already so we run it let's run this and see if it's going to work if it doesn't work we'll keep on debugging that's the life of a developer so they say we debug mod we actually write codes right so I think that's true in some way so let's go back to our browser okay so this is the front end all right so we can see that we have AO Excel and and right and this is properly integrated now if we close down the server we are going to realize that we will have no more connection with the front end let's refresh the front end you can see we've lost connection but when we come back here again and the npm run as we start the server connection is going to resume okay let's restart this so let's refresh okay it's refreshing itself and then we can see that we have data coming from the database already all right friends with this I think we've come to the end of the code implementation of this exercise and for me I think this was very very interesting right though it's challenging as well but it's also interesting that's code right code is very very challenging and also when you when you are able to solve it and then you fix your bug you see how interesting it gets right so thank you very much if you find this video helpful please give it a like And subscribe to my channel see you in the next video bye

Channel: DevWithExcel

Views: 58

Keywords: FullStackOpen, Software, Backend, Development, Tech, JavaScript, VSCode, refactoring, Modularity, event handling, formatting, filtering, API Integration, Node.js, API, JSON, CRUD, HTTP, GET Request, npm, Server-side Development., timestamp, query-params, Unique ID Generation, Post request, status codes, RESTful, logging, morgan, server monitoring, Frontend-Backend Integration, render, deployment, Command-Line Application, MongoDB Atlas, Database, Mongodb

Id: cA7MJ7Lo8Tg

Length: 29min 50sec (1790 seconds)

Published: Tue Jun 18 2024