Developing a Flutter Application with a Node.js Backend: Tutorial on CRUD Operations

so let's start by creating two folders so we'll be creating our backend folder and also we create another folder that's a front-end folder so basically the backend folder will be responsible for our server-side mobile application Logics and within the front end we're creating our flatter up so let's pop up the terminal over here and change the directory to the front-end folder so in here you need to create a flatter up and the command is flatter crit since we are creating it within the front end we proceed with the period so it will create a flatter up within the front end there you guys you can see what it so let's do some to our back end so are we are there additional terminal right here so you can see you have successful creation so in here let's change the directory to our back end and initialize our node up so the way we do that it's npm and net that's why there you go so in here to create a packet of Json file within the back end that's the minimal setup to run your server or Express dependency so basically Express provide a framework for handling requests defining routes and also managing of middlewares so that's the main effect so once you have a successful installation of our Express Stop within the backend directory let's create a file and I'm going to name this file as the server.js there you go so here we check the packet of Json file you can see we have our Express dependency installed all right so within the server.js let's import our Express and the way we do that is const Express equal then require a Express so in here I would like to comment out what I'll be doing over here there's going to be an app configuration over here and also there's also going to be a middleware configuration there's going to be a middleware configuration over here and also it'd be defining our API routes API routes and finally a listener for the after lesson on so these are the four major things we're doing right so in our app configuration we create an instance of our Express app and that's concept scores Express that is the way we create our instance of the espresso I also be creating a port variable for the app to listen on so corn Sports quarter three thousand and within our Midway configuration we'll be using our expert.json so we use app.use then we pass in our express.json so that's basically it So within the API route is where you'll be configuring um our crowd applications right so within the API route there will be a cloud application basically that gets the post the puts and also the deletes functionality so the listeners you call upon our app dot lesson so you're going to listen to a particular Port then pass in the port with a callback function so in here I'll just log it out so console.log listen on Port then I'll pass in the port yeah listening on so that's basically the minimal setup for our server so if you want to access the Pod variable in a string format make sure you use the back tech so that way you can access the port variable in a string format so it is the basic um server layout [Music] so we'll be focusing within the API route for our Cloud operations right so we start with app.get method right so the end point is going to be slash API slash version one then slash items so that's the end point so in here we'll be having a callback function with a request and also response as a parameter so I'll repeat this um three more times right so the first one is going to be the get the next one is going to be a post request hitting the same endpoint it's also going to be a put request for an update right so to update a particular item you need to get the item ID so we're going to access that item ID from the params and the last one is going to be the delete method right you also need to get the ID so this are crowd operations phone to set up a database connection you can do so but I'll I'll be just creating a list of items that's going to hold the items temporarily right so you can just set up a database for example like the mongodb stuffs so I just Define my list items over here I'll be using the mongodb for my database so basically um I'll create a item list that's going to be an array that's going to be an array there you go so in the get request right let's structure how we are going to collect the items so we are basically going to get the ID and also the name of the item right so this is the formats in the item list right right so we can have a list of items so Linda gets will be written a response but Jason then we pass on our item list so this line of code is going to get all our item within the item list right so that's basically it um and within the post request right first of all I'll be creating a variable for our new tax right our new item going to be added so with the ID we take the item list length and add one for any new creation of our item um and the name is going to be from our request body then we assess the name right so the name is going to be from our request body then we assess the name there you go so this is basically going to be it and once we have our new tax you take our item list and push onto that our new tax then we set a response Json first of all let's say the response status run for a successful creation then we set it to a Json then the person a new tax so let's move on to our put request first of all let's rename the new tags variable to new item that make a little more sense um in the put request that's where our update is going to take place so to update a particular item you need to grab the item ID and you can have access to the item ID from the request Dot params ID so this line of code grab the item ID so let's proceed to create a variable to hold the updated item right and that's going to be from our request body request.body um and the next line of code is to create an index to check for the item want to update if it's available right so I'll be creating an index variable so here I will take our item list which has um find index method so in here you can have access to the item right and we check for the item ID if it's equal to the ID from the request.params there you go so let's make that check over here if our index is not equal to negative one meaning item is really in the list right so if I invest is not equal to negative one we said item list of the index that particular item wants to update we now update that with what our updated item variable then we proceed to set the response.json with an updated item else we set a response status code to 404 with a custom message of item not found so that's basically the update method right so the delete functionality is going to be the same first of all I need to grab the ID from the request params but ID right and also you need to find the index of the item you want to delete if it's indeed in the list so be doing something similar here which first of all check if our index um is not equal to negative one that shows the item is really in that list then we create a variable to hold a deleted item another little item is going to be we take our item list and splice then we pass in our index we want to delete comma one then we set our response dot Json to a deleted item of the first index else you are going to do something similar by setting the response does code 2404 with a custom message of item not found that's basically it so let's run our server to see so node server.js will run your server app you can see our app is listening on Port 3000 over here so when you check um localhost 3000 slash API slash version one slash items there you go you can see we gave up a list of items over here so initially we just created one item right with an idea of one any name here and uh service running successfully so the front end folder basically contains a flatter application so within deadly folder the main or that file comes with a default counter up so I'll just run the flat tab right here so flatter run so this is the default counter the flutter app comes with right so when you click on the button the value increase so I just get rid of the comments and also the default um home page widgets over here so that's the next step and create a home page and start everything from scratch so let's create a file within the live folder and name the file as item dot dot so that's why you're going to model our item entity so we'll be creating a class of item and the class is going to be taking um a string of an ID and also a string of name so the item require the ID and the name and we need to require that in the Constructor as well there you go so let's proceed by creating from Json method of the item so Factory item from Jason who takes in the Json graduation is of type map of string and dynamic so map of string and dynamic Json so in here we return our item then the ID use adjacent to access the ID you'll be doing same for the name where the name is adjacent to access the name so this is the way we create from JC method right so answering the changes over here So within the middle of that file um first of all let's import the HTTP package for making requests all right so I'll add it to my password.tml file so once we have that installed let's proceed with fetching the data from our server right so first of all we need to bring in our server URL and that's pointing to the localhost 3000. so first of all let's fetch um the data we have so the data is going to bring us a list of item right so it's going to be of type future and I'm going to name the function as fetch items it's going to be an asynchronous function So within the fetch items function we'll be creating a response variable over here and the response variable will be await and recorded HTTP package first of all you need to import the HTTP package so we import that as http so once we have that in imported call upon the http so in that we can pass our server URL slash API version one slash items so check the response details code if that's go to 200 I mean everything went okay we create a variable known as the item list code are response body right so Json the code then you pass in our responded body then we create another variable that's the items right so based on our item list and map so for each item we are going to pass that from jegison right so we're going to be item Dot from Json then we pass in the item and there you go so you need to convert that to a list as well so once we have that you can just return the items over here so if the responsive score is not equal to 200 you will try an exception that so the exception is going to be um fail to fetch items yeah so once you have that you can just save in the changes So within our scaffold with the body argument you can start with a safe area View so the chart of the savior is going to be a column the column takes in um the children right so the children of the column you start with the future Builder so the future builder takes in the future and the Builder the future is going to listen to a function so it will be provided the fetch item function and the Builder is basically a function that takes in the context and also the snapshots so the snapshot is what holds the data so let's get rid of the coins in here so first of all check um the state of the snapshots so if snapshot dot has data then you can return um at least review.builder right so the list view the build also takes in the item Builder nighttime browser is basically a function that is in the context and also the index and also the list view build also text in the item count right so the item counts of the list view Builder you access that from the snapshot.data.lint the length of the data we are fetching there we go so So within the item Builder we create an item variable and access our item from our index sorry yeah I said the data and personal index of a there you go so in here you can um we can return a list style right so the list style takes in the title and the title is intent going to be taking the test widget so we provide it at item dot name so we can actually see the data name that's been fetched so else if the snapshot state has an error right you check for that so if snapshot that has Arrow will be returning um a center widget right where the test of the error being shown on the screen so snapshot that Arrow then we convert that to a string so we need to pass a child to the center there you go so the default case we are going to retain a loading indicator that shows that so we return a loading um a circular progress indicator so it's kind of a load indicator that shows us something's about to be loaded right um so let's try it out so flatter run there you go we are having an error related to the clients or the socket assumption that's what happening because we've not started our server yet right so we need to start our server so node server.g as you can see our server is now running on Port 30 000. so let's um re reloader up again type in is not a sub type of string oh we need to change this to an integer there you go let's reload again I also having an arrow type list of dynamic is not a subtype this is because um the item list we are receiving here is of type Dynamic right so a list of dynamic and the items here we are also receiving is a list of item right so I think this will resolve the arrow another was thrown thus an overflow error so let's provide a shrink wrap to the list view Builder so we pass that through so I think that should be it there you go you can see our data is now string on the emulator or simulator so you can you are having access to this um name because of this item list we created over here so that's basically it let's proceed um with adding of items right so in I don't know if item it's also going to be a future and the function name is going to be add item that takes in the name of the item to be added and the name of the item to be added as a parameter so you pass that and it's going to be an asynchronous call as well so in here we proceed to create a response variable then we await and call upon the http dot post right so you need to pass the URL URI dot pass to make sure that the URL is in a valid format before it is being used by the HTTP package so we need to pass in as URL you can also proceed to pass in um the headers right so with the headers we set a content type to be application slash Json so since we are posting something or adding something you need to pass in the body right so we proceed to pass in the body as well so we encode the only person as an object the name so once you have that check the status of the response right with the status of the response is called with 301 million dollar successful creation of an item we'll create a Json and decode a response body then we proceed to create the item we get back so item from Jason Derby personal Jason and finally we can return our item over here so if the status goes up the response is not equal to 201 then we throw an exception not feel to add an item so that should be it so let's start with the implementation so the body the scaffold is going to taste in The Floating Action button so the floating machine button takes in the on press that's going to be the function that gets called when a button is pressed so it also tastes in the child so the child will provide it an icon and a plus icon here so you can just provide an additional information that's the tools it that is in a string of our item so the on press of The Floating Action button we are going to show a dialogue right so the dialogue takes in the context and the Builder and the Builder is a function that is the context right so we'll be returning and I'll let dialogue right so return analytes dialog the title so the title we are going to assign a test of our item it also takes in the contents right so with the content you provide a test from food so let's say the controller to the name controller right which is neither created so I'll be creating it sooner so accredited over here so final name control and that's going to be of type test editing controller there you go so you can just provide a label test to the test form field as well so the decoration takes in the input decoration then we set the label then we pass in our item or item name okay I think it's supposed to be a label test right yeah it's supposed to be a label test so the actions of the alert dialog is going to be a test button right with a cancel and also the ad test button so the first one is going to be the cancel button so once we press the cancel button we are going to pop up the content so we use navigator.pop then pass in the context so the chart is going to test in a text of cancel so we also be creating another test button to the actions right so the action is just a less static scene a scenario that is in a list of widgets right so you can add another test button over here so the test is going to be add right so don't press of the R button I'm going to add an item so we can call the ad item function which expects at the string of a name so we're passing the name controller.test then we set States and clear the inputs then let's give it a try so let's how to reload you can see the floating action button over there you can see the other item so let's proceed to add an item there we go you can see our item is being added but we didn't pop up the contest right so that's the next step to do so once we've added the item we need to pop up the contest so navigator.pop then you pass in the context so let's give it a try so let's add another item there you go you can see output is working right so the next step is what update the item right so that's the next step so any updating the item is follow the same format right it's going to be of type future there are 10 type is avoid right you don't expect anything back in updating the item so the integrating the item be testing the item ID and also the name felt right so it's going to be an asynchronous function as well so in here it creates a response variable and a response variable use the HTTP then they put requests the parts are URL to make sure it's it's in a valid format we pass in our server URL slash our endpoint which is API slash version one slash items then we pass in the ID that needs to be updated so we need to pass in the headers as well with the headers let's say the content type to be applications like Json and also provide a body to the body is going to be Json and code it accepts an object so we pass in the name and give it to the name so let's check the status of the response right so if the response that was called if that's not equal to 200. we are going to try an exception filter and update an item yeah so let's start to implement so let's start we'll give it a trailing argument right that puts the icon at the very end so we're going to contain an icon of edit uh let's actually wrap the icon within a widget and then we're just going to be an icon button we want to make it pressable so it takes in the own press this expects an icon there you go so the impress of this you'll be doing something similar in adding we'll be showing your dialogue so I'll just paste in this so let's watch reload there you go we can see that icon over there right so instead of adding the item will be editing the item this time and also will be editing there you go so the function is not going to add item anymore this summer we're going to update the item so we need to pass in the ID of the item you need to update and we can access that from the item.id then passing test so let's give it a try let's not reload to see the new changes 100 exception failed to update item let's visit our server um so in updating the item we need to make sure that the request params bring us um an integer right so we preface it con you know Us in the updated icon need to pass in the item ID and the name is going to be from the request body name so let's start our server again there you go you can see you have a successful now I so let's try to add one more item let's try to update that particular item there we go so update is now working so let's move on to the last functionality that's the deletion right so it's pretty much similar to the update item function right so the function need to be changed to delete item this one it expects only the ID right we don't need a body and the headers as well so in here we also check the response status code if that's not go to 200 you give fill to delete item so let's preface this with plus icon we expect an integer from the request params ID let's start our server again so let's add an icon next to the edit icon right so where the training is you need to wrap the icon button within a row widget right the row expected children that's a list of widgets and let's say the mail has decided to be main as a size dot men so we can add an additional icon button that's it deletes functionality so you can see it takes in the on press and also the icon so the icon we are going to give it the delete icon there you go so on press of this icon we are going to call the function to delete the item so we called going to be an asynchronous function so you can just call the delete item then pass an item.id I think that should be it let's give it a try let's add an item let's try to delete an item um it needs to be https delete not put right so let's make that changes so once we deliver we need to set the state to rebuild there we go so let's try to delete there you go we can see the delete is working let's add an item let's add another item let's try to delete delete and it seems to be working so that's basically you find this to be useful interesting consider subscribing share and also like the video as well see you in our next tutorial until then stay tuned

Channel: CodeWithDarkwa

Views: 7,591

Keywords:

Id: Wxm_PSrtaPw

Length: 34min 26sec (2066 seconds)

Published: Wed Sep 13 2023