Flutter Todo App with NodeJS & Mongodb at backend complete tutorial

foreign how to build a full stack application in flutter where I am going to make use of node.js as a backend with mongodb database so basically we are going to build a 2d application in flutter where the user will be able to register himself into the application and get logged in into the application using his credentials and will be able to create his own to-do nodes okay so let's get started okay so this tutorial will be covered in part wise so in this part I am going to cover how to create a node.js application and how to install different modules for our node.js backend okay so let's get started okay so here I have opened my visual studio IDE so first of all we need to create a folder for our node.js project so you can just go to this open folder and in desktop I have created a empty folder named node.js project so just open it in your IDE something like this okay so to make this folder as your node.js application you need to run some command so just go to this terminal new terminal okay and here you just need to enter npm in it okay so to run uh npm first of all we need to install node.js in our computer so you can just visit Google and install node.js in your PC so here after entering you can see it is asking you your node.js project name so you can just keep it empty or you can just give a name so I will just give as to do and version is 1.1.1 so just enter enter everything so there is no much required for the demo purpose okay so you can see after doing init your projects has created a new Json file that is packet.json file where you are all the requirement of your node.js application is listed over here for example name of your project version description and owner and everything okay so our node.js project is ready okay so we need to install different modules that is dependency or you can call it as library for our node.js project so we need to install them such as Express node mailer Mongo's mongodb and body parser and various models that are required in our project so let's install them and learn how to install it so here in the terminal just enter npm install and specify the model or a dependency that you want to install for example I want to install Express that has been used to create a node.js project for creating apis routes and everything so I'm going to make use of Express for that and the second thing is mongoose and then I am going to make use of body parser so let's use them okay so you can just enter as many as models you want to install over here so let's wait okay so once the models has been successfully installed in our system or in our project you can see a node model uh project folder has been created automatically and you can see in our package.json file that is the dependency key is been created that is object has been created inside which this packages are been included okay and we can install different models such as B Crypt Json web token and everything JWT okay so let's install that also okay so I just forgot one more uh package to be installed that is Norman okay so let's install it so it is basically used in automatically restarting our server or our backend Whenever there is changes in our code okay so let's install it node npm install node mon okay so it has been installed in our node.js project okay so now let's create files for our node.js project so here first of all just click over here in this project structure and just click on this icon that is new file and here first of all create index.js that will be our starting point of our node.js application and then create one more file that is app.js where we are going to make use of express.js to create routes and everything okay so here first of all let's install express.js so you if you want to import any package you just need to make use of required keyword and express that package something like this okay and then Here const app is equal to express so I'm just making use of this const variable to import our Express model so I'm just creating an instance of it okay and now let's make use of model dot export and we are going to export our app that is our Express so that we can make use of this app.js anywhere inside our project by importing this app.js file okay okay so now let's import this file in index.js and create our Express server okay so here cons app is equal to require dot slash app okay so by doing this everything that is in this folder will get imported in this index.js now you can just create your server so to create your server uh first of all we need to define a port so let's create a const uh variable over here so our Port will be running on 3000 you can keep it anything as per your needs so I will just keep it uh as usual that is three thousand and now here x app Dot listen and here specify the port and declare it as a function something like this so here let's give a log saying that our server is running on this port okay so let's save this and run our project so let's check the output so to run our project all you need to do is you just need to use node and your file that you want to execute so in our case it is node.js okay so I think something went wrong so it is giving an error so let's check it out okay so here Express will be a function so you just need to declare it as a function okay so now let's run so you can see our server is running on this port okay so now let's create a simple route where whenever we hit our uh this port will get executed and we will get a response on our browser okay so for that here app dot so we are going to create a get request so get and our route will be a root folder so root here we need to declare two requests that is request and response of for our browser and declare it as a function something like this okay and here our response dot send and just pass a message so I will just pass hello world okay and let's save this file and then run our project and node install index.js sorry okay so our app has been running on this port so let's check it out so when I hit this 3000 Port you can see I am getting hello world as a response so let's change the message and check okay do I need to stop this project and restarted to check the changes so you can see okay so as you saw I need to stop this app for any changes to be reflected so for that I have installed a package called as node mailer so let's use that so to use that all you need to do is just go to this script tag over here and here just remove this or you can just give a comma over here and here Define a new parameter that is due tag and inside view tag you just need to make specify which file you want to run whenever you make any changes okay so node month I want to run index.js so I'm just defining Whenever there is any changes in our file and I just save the file node mod will ins rerun this index.js file okay so let's do that and let's check if it is work if it is working or not so to run our node mon all you need to do is you just need to make use of npm run Dev so we have declared this key we want to run and whenever we run by making use of run key so we are just defining to run our node mon index.js okay so to run this you just need to run this command okay so you can see node mod is running okay so now if I do any changes over here so let's give something like this message and save it you can see node mon is getting restarted and reflecting our data on our server side okay so let me add two more dots hit save and you can see it has been running on this port with the latest update so in this tutorial I am going to give a proper structure for our node.js project okay so let's get started okay so here I have created an architecture for you so we have a front end that is our full order application through which a user makes HTTP calls by making use of get and post method okay and in backend these are the architecture we are going to follow so we have routers controller services and models so routes are basically a URL and the controller is basically responsible for getting the data requested from the user and communicating with our model and returning back the data that is responsing back to the data to our server okay and here service is basically responsible for communicating with our database okay so let's go to our project again and create this folders so you can just click on this icon and create folders so first folder will be our routes okay so I have created four folder that is controller model routes and services and we also need one more folder that is configuration okay so in this folder we are going to uh configure our application such as database connectivity and everything we are going to do in this folder the in the third part we are going to learn how to get connected to our mongodb database okay so let's get started okay so to get connected to mongodb database we are going to make use of a library or a model called as Mongol okay so we have already installed it in our previous tutorial that is first part so you can see Mongoose has been installed so if you have not installed then you can just make use of npm I and then the model name that is mongoose okay so just enter this command and hit enter and the package will get installed the latest version okay so now let's get connected to our mongodb database by making use of mongoose okay so for that the mongodb database configuration will be done in this config folder okay so here uh create a file that is Javascript file and name it as db.js or you can name it anything okay so first of all let me show you my Mongoose mongodb compass now that has been installed in my operating system that is Windows so you can see this is the URL to get connected to my local mongodb database okay I can just connect and you can see these are the database that has been created by me okay so to this database I want to connect by making use of my backend code okay okay so here first of all we need to import our Mongoose a library so const mongoose so we are going to make use of require to import the library import mongoose okay okay so now let's make use of this instance and create a database connectivity so for that uh const connect ion is equal to Mongoose dot create connection okay so this is the inbuilt functions to get connected to our mongodb database and here you need to pass the URL of our database connectivity okay so if we go to our mongodb compass you can see this is the URL to get connected to my local database okay so you just need to pass it over here okay and then uh to use this connectivity string anywhere in our project you can you need to install uh imported so you can just make use of model dot export is equal to connection okay so to check if our mongodb connection was successful or no you can just make use of its function that is on function and here there is a property called as open so if our database get connected successfully so this function will get called and you can just print a log over here okay so I'm just printing log as mongodb connected okay and if suppose if there is an error in database connectivity yeah you can just print the error okay so here on error and here we can just use a function and let's print an error okay so this is all you need to do to get connected to our mongodb database okay so let's check this if it is working or no so what all you need to do is you just need to import this file in our index.js okay so import it cons DB is equal to require dot configuration one second yeah configuration dot DB dot JS okay that's it okay so now if I run npm run due okay so you can see it is showing an error app crash so let me check it okay so it is saying already in use I think so the port 3000 is in used okay so now let me try and PM okay so you can see server has been created but I get a database connectivity issue I think so okay uh so I think I cannot use this localhost so I need to give a local host IP address so our localhost IP address will be 2 1 2 7.0.0.1 okay so now if I save the file and restart my code you can see mongodb database connected okay so that's all for this video tutorial so in our second next part that is fourth part we are going to create a database schema database schema model for user where a user will be able to register and login through it by making use of the database okay in this tutorial we are going to create a user model where the user will be able to register himself into a user collection database and get sign in into our app by making use of his database okay so let's get started okay so let's create a user model in the models folder okay so you can just right click create file and name it as user Dot model dot JS okay so this will be our mongodb database user model schema so here first of all uh import Mongoose uh model okay and then we will also import our database connectivity file that is our configuration we have a database connectivity file so we need to import this also over here okay so now let's create a user schema so for that from our Mongoose Library we need to import a schema property so you can do something like this const is equal to uh mongoose okay so inside this we need to Define which property you are going to import so we need schema property so you can just Define it something like this okay so now let's create a user schema over here so const user schema is equal to new schema okay so inside our database user schema database what what all entries we need to store we need to Define it over here for example we have username and password that's it okay so you can just Define the tuples over here okay and second one is the password okay so email will be of type string okay so by default we need to make the email uh lowercase so you can just pass lowercase over here required property will be true okay so email will be a required property and we must keep it unique for every user a unique email will be there so unique okay so the same thing for a password field okay so you can just remove this lowercase and uniqueness also yeah server schema is ready you just need to call the database and uh create this Kmart in our database okay so for that cons user model is equal to DB Dot model and you can just name your database collection name okay so I will just name it as user and here we need to pass our schema okay so just pass it over here like this okay so now we need to import this file so that we can make use of this user schema everywhere anywhere in our project okay so just import this using model dot export user model okay so our user schema has been created so let's import this schema in our index.js and let's check if this schema is getting created in our database or no okay you can just import it over here user model require and here you just need to define the path so our path is model user schema okay so now let's run our project and check if our database is getting created or no go to run npm run the EV enter okay so it is asking a permission of our database so you can see database has been connected so let's open my mongodb compost and check if our database got created with user schema or no okay so this is my Local Host okay so you can see my database name was so I just forgot to create a database name over here so let's name it as I will just name it as new to do okay so because I already have a database by to do database so I'll just give a database name as something like this okay so let me restart our project and let's check okay so after refreshing our mongodb compose for two teeth times I can see our database has been created with a user schema over here okay this part we are going to create a API that is user registration API through which a user can register himself in our database okay so let's get started so in our previous tutorial we have created three folders that is routes controllers and services and in routes we are going to Define all the API such as user registration login and in controller we are going to handle the request and response from the front end and in Services we are going to do crude operations to our database okay so let's get started and create files in this folder okay so in Services folder I am going to create a file by name user dot services okay and in controllers I am going to create a user controller file to user controller.js and in routes we are going to create a user route so user dot route dot Js okay so here whenever a user hits uh any API so the routes folder will get activated that is our API and it will call our controller and in controller we are going to handle as I said that is request and the responses and in from controllers folder we are going to hit the service folder and in service folder we are going to perform all the database operation okay at this at the end we are going to or everything is going to happen in the service folder okay so let's begin uh coding from the service folder and then come to uh controllers folder and then we will just create a API okay so let's create a class over here and create a function for registration okay so here create a class so let's name it as user service okay and let's export it model dot export is equal to user services okay and inside this we are going to create a function so let's create it so static sync so let's name it as a registration user okay so this function except two parameters that is our email and password so let's add it email and password okay so now let's add a try and class block over here to handle the error okay and so we are going to create a database uh that is we are going to store the user pass data to our database model so we need to import this user model so let's import it over here so here const user model is equal to require and let's give a path of our database model so model dot user model okay so now to store this data that the user has passed all you need to do is you just need to create a variable const create user is equal to new user model and here you need to pass these two data that is username and password okay and here the object will get created and then all you need to do is you just need to return await and then just make use of a object dot save okay so by doing this the whatever the data comes to this function that is username and password will get stored in our database model database okay yeah okay so we are done with the services holder so now let's go to our controller folder and code a function over there okay so now in controllers folder first of all we need to import these services so that we can make use of this function so uh here you just need to import it so cons user service require and just give a path to the file so Services Dot user services okay and now here let's create a function uh that will handle our request and respond from the front end so here export dot register okay so this is our function name is equal to a sink and in this async we are going to accept three parameters that is request from the uh front end and the response to a front end and then next okay so we have created a registration function or a controller so in this so let's add a try and test block okay so in this try block we are going to pass the data to our services folder to register the user okay so let's do it now okay so in request body so request.body we will get the data that is email and password from our front end so we need to get the data first so here const is equal to request dot body okay and here we will get email and password object okay and now here const success response I will just name the parameter is equal to a weight user Services dot register user and here let's pass these two variables okay so after successful registration of a user we need to respond back to our front end so we are going to make use of this response parameter okay so response dot Json and here we are going to pass two objects that is status as true and in success we can just pass a message okay so now let's go to our routes folder and create a API that is a registration API so for that first of all we need to import routers from our Express Library so const route is equal to require and here let's make use of Express model and from this we are going to import routers function okay and then routers dot post method we are going to make use of and here let's define a API so here let me name the API As registration and here we just need to call our user controller function that is registration so we need to import this file as we have exported it okay so here let's import it so const user controller okay so here we need to define a function uh so let's call user controller dot register okay and finally we need to import this route so model dot export is equal to route and now let's go to app.js and let's define this API over there okay so here first of all we need some body parser so that we can respond back to our server by making use of Json response.json so we need uh body parser and also we need it to read the data that is that comes in our request body okay so here const body parser is equal to require and then Here app dot uses use body parser dot Json okay so body password is just used to check whatever data that comes from our body uh in our routes this one request body okay so for that purpose we are going to make use of this uh body password okay so now we need to use this routes and let's initialize it so first of all we need to import this file to const user route require okay so the file is somewhere around here dot user routes okay and after this body parts are use body parser app dot use root directory user router okay so our API is been ready so now whenever a user hits this API and pass the data that is username and password for the registration purpose the controllers registration function will get called and in this we are going to call services by passing these two parameters to our function registration user and in registration user we are going to store the data in our database okay so let's check this API in our Postman Okay so let's open a terminal and run our project so npm run due okay so let's go open my Postman okay so postman has been opened and you can see it is so this is my previous thing okay so let's make copy our API name okay registration okay and then yeah that is nothing needed so here we are going to pass two parameters that is email and password and this parameter will get stored in our database okay so now let's check if this is working or no so I will just hit the submit button okay so you can see the response we have got that is the user registered successfully okay so in our code also you can see it is there is no error okay so now we will let me find it so you can see we have already successfully registered a user in our database okay so in the next thing is we need to encrypt this password so as you saw the password is getting stored as it is in the string format so we need to Hash is or decrypt it so let's do it now okay so to encrypt the user password we need to make some changes in our database model schema okay so here we need to create a function that will automatically dig encrypt our password and store a encrypted hash in our database okay so let's create a function over here so it will just automatically handle it so for this we are going to make use of a library and that is ah decrypt okay so we have added it over here yeah okay so let's import it okay so let's create a function for our schema over here okay so it will be user schema dot d okay so this is the schema function in build function so inside this we are going to make use of save property so whenever a user saves the database so it happens over here yeah so this function will get called and password you will get automatically decrypted okay so we need to Define it over here so or sync function okay and here let's make use of try catch okay and here variable user is equal to this okay so user is equal to this means we are going to just refer this schema okay okay and now here uh const salt is equal to a weight B Crypt dot generate salt okay and you can just pass any parameter over here so I'll just pass as 10 uh so we are going to initialize our salt to uh decrypt the encrypt our password okay so here has password is equal to a weight decrypt Dot has and we are we are going to pass the user entered password so it will come from user dot password and then we are going to pass a salt to it okay and the password encrypted version of password will get stored in this Hab so we are going to store this in our database okay so for that user dot password is equal to as password okay so now let me refresh or restart our node project okay and now let make a call to our API so this time let's change the email address okay so I will just for keep the password as one two three five five okay so it was successfully registered so let's check our database okay so you can see our password got uh decrypt encrypted in hashtag okay okay so we have successfully created a user registration API so in this tutorial we are going to create a flutter app through which a user can register himself by using flagrant okay so I have already created a UI design for this that is the login and registration page you can see over here okay so you can just get this source code from my GitHub repository I will just share it in my description okay so in this tutorial we are going to connect our flutter project to our node.js backend and get completed with the registration pad so the user will be able to enter his email and password and register himself in our database okay so let's get started okay so before getting started let me explain you what all been done in the UI part okay so over here I have created four files that is Apple logo login page main dot dot and registration okay so in main dot dot I am just simply calling a login page so whenever our app launches the login page will get showed to the user okay and here I have created a app logo that is the common widget that is stateless widget so that I can just import this common logo and show it in our login and registration page as you can see over here so this is the logo been shown on both the pages okay so let's go to uh registration page okay so in registration page I have two text fields that is email and password okay you can see email and password the user can enter and there is a button over here okay so let me tell you that I'm making use of velocity X for the UI purpose okay so there is a button so when whenever this button is been pressed I want to register the user in our database okay so here I have already attached a controller for both the text Fields so for that I have created a text editing controller over here from which I can get email and password text that has been entered by a user okay and then here yeah and here I have just attached a a variable that is if the user has entered any data in this text field or no and depending on that we can just show a proper message to the user okay okay now all I need to do is whenever the user press on this registration button I need to get the data from this text fields and send it to our backend so for that we need to create a function so let's get started from here okay so here I will just create a function void register user I can give any name okay so this function will be of type A sync because we are going to make a use of Internet calls so it may require some time okay and now first of all we need to check if a user has entered any data in this text fields or no okay so for that here let me add a if condition if email controller dot text dot is not emptying and password controller.txt dot is not empty so if it is not empty then we are going to send this data to our front end and if it is empty we are going to show a error message to a user okay so over here let's make use of set State method function and here I have a variable by name is not valid and here we need to just set it to true if it is not valid okay so let me hot refresh okay so you can see I have a device been connected over here and it has been connected to a USB and I can just say see my screen on my laptop okay okay so I will just uh keep it empty and just submit it and let's check if any there is any update okay so I just forgot to call this function when the button has been pressed so there was no response from the UI okay so when this registration button is being pressed I want to call the above function okay so get register user okay so let me hot refresh now and allow let's check what happens let's go to registration page okay so I will just keep it empty and just submit you can see there is the validation pin done now so now here inside this we need to make a HTTP post request so for that we need to install HTTP Library so just go to pub specification.yaml file and under dependencies Section over here just add this library and hit this pop get button okay and then come to main dot dot page so the registration page and over here import the package so here http.dot as http okay so now let's make a internet calls to our backend API okay so here first of all we need to create an object that we need to send to our backend so let's go to our backend and check so you can see we need a email and password to be sent to our backend from our front end so let's create an object for this that will be sent in the request body okay so over here variable register body so I can just name it anything okay so I'll just create an object of it which will which will be of type Json so here email address first key is email address and the data will come from the text field that the user has entered and then the second key will be password and the data will come from the text field password okay so from this we will just get the username email address and password from our text field okay so we have created known object so now my making use of HTTP post request we need to send this body to our backend over here okay so let's do it now so for that here let's create a variable response is equal to await HTTP dot post request and here will come our localhost IP address so let's do it afterwards Okay so here URI dot parts okay so here inside body we need to send this request body object okay so for that we need to encode it in our Json format okay and here we need to Define which type of content type we are going to pass whether it is a Json or it is a text so in our case it is completely adjacent format so we need to Define it in our header tag okay so now this function will automatically make a call to our backend and will give a response that we send from our backend okay so you can see after successfully registering the user we get a response as success true and message as user register successfully okay so we need to handle it in our back front end okay so before doing that let's check if it is working or no so I'll just print the response over here so here I need to replace my URL that is our localhost URL so as we are going to make use of my mobile device I need to get the IP address of my system and use our backend okay so for that just open command prompt and just enter over here iPad config okay so you can see you will get your Local Host IP address that you can access outside your computer okay so here let's create another configuration file where I'm going to Define my urls okay so here final URL is equal to my URL http IP address and our backend will be running on 3000 code so let's define that also okay and here let's uh create one more variable so let's name it as registration and here URL Plus registration API key uh route route name so let's get the route name from my backend okay so this one okay okay so now to use this configuration file all you need to do is you just need to import it over here so import config.dart and by doing this you can just even directly use this uh register registration URL okay so in this registration URL we have the IP address path of our backend so IP address 3000 port and this is our API name route name okay so let's hot refresh and check our m okay I'm just going to sign in page and I'm just entering some data over here so email address so password one two three okay so now I will just hit the registration page and let's check okay so now if I go to my mongodb database and refresh okay nothing is happening yeah yeah so I just forgot to run my back end Okay so npm run new okay now let's check by clicking on the registration page okay so I have done that hope it got registered yeah so you can see it got registered okay so now I need to handle the response that comes from our back end to our front end so you can see I think so we also got the response over here it must be there somewhere over here but I'm not able to find it yeah so it's okay okay so let's check once again so app is got restarted okay so you can see the responses of type it is showing just printing uh instance of response okay so I already know that what kind of response I get from the back end you can see this is the response that I get from the back end we have status as true okay so let's use it over here okay and then here I need to decode it so Json response is equal to riff for this response I need to decode it in Json format okay for Json D code and let's pass the response over here okay yeah so what refresh again so now let's check what response I get over here okay so now let's check okay register okay so you can see we got a response as true in this success key okay so then depending on this variable we need to navigate the user back to our login screen okay so here if let's make use of if condition so if Json response of status was successful then we need to navigate the user to login page and else we can just print a message to a user okay so to navigate the user we will make use of Navigator so I already have a code over here okay so just copy this and let's paste it over here so if it is true then we are going to navigate the user to a login page okay so hot refresh okay or EST ing first thing two okay so I'm just pressing on the login page registration button over here so you can see I got immediately registered in my database and I mean a login page now okay so let me refresh okay so you can see our user got registered in our database okay so in this tutorial we are going to create a login API through which a user will be able to get logged in from our full address okay so let's get started okay so here as you can see I have a registration uh API been created so down to it I am going to create a login API which will be your type post method okay you can just uh copy this and paste it over here and just change the name of this API as login okay so now in our controllers file we need to create a function uh that will be called whenever this API has been hit from the front end okay so we need to create it first and then use it over here okay so let's go to controller so controllers is in controllers folder user controller and you can see here we can create function something like this okay so I will just copy this function and paste it down export and let's name this function as login okay so this will be of type async which will accept uh two parameters that is uh request and response okay so request is the data that has been requested from our front end and response is the data that is responded from our backend to a front end okay uh so this is it okay so here from the front end we are going to pass two parameters that is email and password as we have done in the registration form you can see over here okay now here we must check if this email that has been passed from the front end is exist in our database or known so let me open my mongodb okay so we must check if the user passed email address is exist in this database or no and if it is exist then we can move further okay so let's do that so for that we first of all we must create a function in our service folder that will make call to our mongodb database by making use of uh our model that is user model okay so let's go to our service folder okay so over here let's create one more function uh where we are going to check if a user email exists in our database or no okay so let's do it now so here let's create a function that is static function so static a sync function as you are going to make a network call to our database we need a static function okay so here let's name it as check user and in this function we are going to pass a parameter that is email okay so here let's make use of try and catch block to handle the error now in try block we can make use of user model and get the data that has been stored in our database of this user okay so for that we can make use of written a weight user model and inside this user model you can directly simply pass our email address that is been given by our user from our front end okay so here uh if the user exists of this email address then the data will be written that is the user data will be written back to our controller so we are going to get the data over here and let's do that now so const user is equal to user services dot check user okay so here we need to pass our email that has been sent from the you the API sorry the app okay so if this user exists then we are going to go further okay so so if not user okay so if do not user do not exist then we can simply throw an error okay so we can just throw it as new error and let's pass the message over here okay and if the user exists then we need to check if the password that the user has entered is a correct password that he has entered previous in our database record or no okay so for that we are going to make use of our model so inside this model as we have done this free we are going to compare our password and make use of mongoose schema compare password method to compare the password by making use of decrypt okay so let's do that so now in user model let's create a function so user schema dot methods dot you can just create your own uh methods or functions over here so compare okay so this function will be of type A Thing okay and this function will accept one parameter that is a password parameter that has been passed from our user uh front end so I will just name it as user password okay okay so let's use try and catch block and handle our add any errors okay so now here const is match is equal to a weight B Crypt dot compare pass compare and here we need to pass two parameters one is our password that the user has entered and one is the data this password okay so we need to and pass this two parameter to our B Crypt compare so let's do that okay and to pass our user a database password we can make use of this third password this dot password okay so our function has been ready in our user model so just copy this function name come back to controllers and after checking if your user exists in our database or no as we are going to check our password we need to call this function immediately if our user exists okay so we can do it over here to over here const is match you can just name it anything is equal to user dot compare password and to this uh function we are going to pass the user entered password from our front end okay something like this so what this will do is it will just pass our user data the from our database that is the real database to our user schema and here while passing we are passing our password that the user has entered and we are just comparing both the password if they are matching then we are just so I just forgot to return over here return is match okay so this will just pass true or false depending on the matching parameter okay and here it will we will just return true or false okay and now here if is match is equal to equal to false so if it is false then it means that the user enter password is incorrect okay so we can just throw an error so password invalid okay okay and if our password matches then it means that the user has logged in successfully and now we need to make use of a response to send the response back to our front end okay so let's do it by making use of JWT token so inside our JWT token we are going to store our users data that is user ID okay so let me show you user ID email we are going to store it in our JWT token okay so let's do it now okay so over here uh let token data is equal to underscore ID you will just get it from user dot underscore ID and email we will get the test from user dot email ID okay so in this token we are going to store our user data okay and now we need to encode it so let's make use of JWT package okay so for that we need to pass this data to our services folder and in Services folder we must create a function that can generate a JWT token for us okay so let's create it okay so over here static or sync generate token and here we need to pass three parameter as per a JWT rules one is the data that you want to store in our JWT token and one is the secret key and one is the session time that tokens will be valid okay so here let's create except three parameters token data the great key and third parameter is JWT expiry okay so this three parameter we are going to accept in this function okay and now we can just make use of return okay so let's import our JWT model over here u t is equal to require Json web token okay so let me check if we have installed it or no okay so it has been installed okay so now JWT Dot sign okay so here we need to pass three parameters one is our data Json token data the second one is our secret key and in third parameter we must pass the expiry return Okay so expires in JWT expire okay so now our function has been ready okay so now from the controller we need to encode it in a JWT format okay so here const token is equal to await user Services dot generate token and you can see we are accepting three parameters Okay so the first parameter is our Json data the second parameter is our secret key so you can just keep any secret key over here okay so you can just enter one two three or anything okay so we'll just keep it as it is user so this is our string and here we need to pass for how many time after how much type this Json tokens will get expired okay so you can just enter one hour okay so after this this will just generate a JWT signature and pass it to this token okay so now we need to response this token back to our uh flutter app by making use of response okay so here response dot status 200 dot Json okay so here let's pass an object so status I will just pass it through and uh token I am just passing our token okay so our function the login function has been created successfully okay so now in our routes folder whenever this login API has been hit we need to run this function okay okay so now let's check if it is working or no okay so let me run my project okay so let's open my Postman okay so registration is over here okay so let me register because I don't remember my old password of any email address okay register one new email okay so this is running on Port 3000 so it is correct yeah okay but register yeah so it is not working okay so it is registration so this is our API yeah okay so register successfully okay so the same parameter I will just use it for login purpose okay so let's check what response we get so it is get giving me an error I think so compare password is not a function if so let me check what is an issue okay so it is saying user dot compare password is not a function okay okay so let me try but I don't know if it this works or no I will just add an await key over here refresh restart our app project okay so now let me try to login so yeah it is not working okay so I just got it yeah I think so because here I did not make use of a wet pin okay and without waiting for this response I was just trying to make use of this data and we are going to try the comparing password okay so let's uh add this await key over here so restart our project okay so now let's hit okay so same thing is getting repeated okay so this time it is different okay so it is saying data and has argument required okay so sorry I just got this error so after researching for some time I got the solution for this okay so when I get this data from my database from my user database model and I have just printed the data that we get from the database and as I see over here there is no password parameter been passed by the database okay so only it is passing user email address and its ID okay but there is no password field been passed by this function yeah okay so due to which I was getting this error that is data and has argument are required and you can see it was saying undefined okay so after checking I got to know that where I have made mistake so over here so here we must make use of a find one and it will just find all the data so let's check now okay so connected okay so now you can see our data I mean the user got logged into our database and this is the token that we can make use of in our front end to retrieve the data or to store that uses data in our flutter app in a Cell preference and handle our session over there so this is our login API so whenever a user hits this login API the user will get logged in into a system okay so in this video tutorial we are going to implement this API in our flutter application through which a user can log in through our flood wrap okay so let's get started okay so now we are in a render Studio IDE and here is my login page so let me run the project on my device and show you my Mobile screen okay so the app is uh getting installed in my device so until that let me introduce you with the login screen what all is been done over here so here we have two text field where the user can enter email and password okay and there is a button for from which a user can log in himself by clicking on the button so you can see over here okay so I think so the app got launched okay so you can see the result sign in page email password and the login button and user can navigate to registration page from here itself okay so now uh so we need to create a function through which we are going to make it to our back end uh login API and through this we are going to get user signed in in our flutter app okay so let's do it so here let's create a function so let's name it as login user okay and let's create this function above somewhere over here void login user okay so login user so the function will be of type A sync okay and we have already created the functions that is to make a post request to our backend server so I will just copy the code from there yourself okay so you can see first of all I'm just checking if the user has entered the data in a text field or no so let me copy this thing from the registration page and here I am going to create an object in which I am going to store my email address and password that has been entered in the email address and password text field so I'll just copy this also okay request body okay and then here I have I'm making a HTTP call by making use of HTTP package with post method and here I am just defining my URL to which uh the API should get hit so we'll just copy this also okay so I'm just pasting it uh just for time saving purpose okay so it is request body over here okay and then we need to get the response that we received from the front end uh backend sorry okay so here okay so let me show you the response that we get from the backend so we get status as true and inside token we get user ID and password okay so the same thing we are going to get in this request body that has been decoded by using Json D code okay okay so as we get the response uh we need to check if the status was successful or known so here if Json responds okay so you can see we get response as status true so here status so if the status is true then we are going to navigate the user to dashboard page where he can enter or create his to-do list okay and else we are going to just print some message on the screen okay something went wrong okay so for now I am just printing it on my console so you can just show a toast message or anything you can just replace it over here okay so now if the success if the status was success that is the login process for Success then we need to store the user token in somewhere in the application itself so for that we can make use of shared preference okay so let's do that okay so just go to pub specification.yaml file and under dependency uh add said preference okay so this is the package that we are going to make use of okay so with this we also need JWT decoder okay so this one okay so add this to libraries and hit this popular button okay so now here we need to initialize our shared preference so let's initialize it over here okay so late spread preference imported automatically so we'll just name it as preference prefers okay okay so we need to initialize it in our init method in its state to create a function for two units initialize our shared preference okay so preference is equal to a weight preference dot get instance okay so now you can make use of this instance to store the data in our field preference okay so for that here you know login of the successful login of the user we need to store his data somewhere okay so now as we know that our token is stored in token key so let's use that okay so variable so I will just name it as my token is equal to Json response okay so in my token variable our token has been installed okay so let's use it to store it in our shared preference now okay so for that prefer range dot set string you can just Define a key as token and inside value we can just pass this variable microcon okay so in this key of our set preference our token has been stored okay so immediately after this we need to navigate the user to our dashboard page so let's create a dashboard page over here okay okay so import material dot dot wherefore result dashboard page okay so inside this dashboard page we need to pass our token that has been generated so that we can make use of this token to get the username uh sorry the email address and user ID okay so from this login page we need to pass the data to our dashboard page okay so for that first of all we need to accept the token over here to over here so let's token let's create a variable so we'll just name it as final okay and here let's accept it okay so at the rate required this Dot token okay so now I can just send it from here by making use of Navigator so let me take the navigation code so this is navigation code okay so after successful login I need to navigate the user to dashboard page dashboard page and here we are going to pass our token okay okay so as we are going to pass the token data to dashboard page so let's make use of this token data and show the user email address on the center of our dashboard screen just for uh to check if the token is working or not okay so you can see over here I am passing the token so inside this we have a email address been stored okay so in the dashboard page first of all we need to import JWT decoder that we have installed in pub specification.yaml file okay so you can just decode the token that we received okay so now here inside init state let's do it okay so variable email okay so let's uh do it late initialize okay so now here map ring Dynamic so JWT decoded okay so you can just name it anything JWT decoder dot decode and here let's use this token okay token so to use this we must make use of widget Dot open something like this okay so now email the email is equal to JWT decoded token from this we are going to take email ID and now let's use this email address and show it in our center of our screen okay so scaffold widget the body property so let's make use of column main axis alignment main access alignment Dot Center okay so here children okay so let's use text property and here I will just print the email address okay and let's make this column at the center okay so let's check if this is working or no hot refresh okay so let me start my back end npm run do okay so this is my mobile screen but refresh okay okay so as I remember my username was rajat123 at the rate gmail.com okay so the password is one two three okay so let's check okay so when I press on the login button so it is saying app crashed I think so I made some mistake okay so it is saying duplicate key entry in the collection user uh email address so okay so let me go to my project okay so here I am making use of registration so instead of registration I must make use of login API so let's do that over here so final login is equal to URL Plus the login API okay so you can see in the back end we have created a login API so this is the URL okay so we must make use of this in place of this registration okay so now let's stop our app and restart reinstall our app again okay so the app got installed on my device okay so let me restart my backend also okay so now let's check by entering my email address and password okay so I'm just hitting uh the login button so let's check the response okay so now you can see as we have defined we are in our back end uh sorry the dashboard page and here we are going to show our email address of a signed uh user okay so now we need to keep our user logged in into our flutter application until the session or the token get expired okay so we can do it in our main dot Dart page so whenever the user revisits our app after some time he should be logged in and as our session expired after one hour as defined in our back end okay so you can see after one hour so if it is expired then he should be automatically navigated to login page when the session has expired Okay so we can keep the user signed in in our flutter application from the main.dart page okay so now let's do the code over here okay so to keep the user logged in in our flutter application we must check if there is any data stored in our set preference or no so we can do it before starting our actual app in the main function over here okay so first of all we must initialize our sale preference and check if there is any data or token uh been stored in the state preference or no okay so we can do it over here so visit a flutterbinding DOT ensure initialized okay so here shared preference so I'll just name this as props is equal to a weight red preference dot get instance okay so by this I am just creating an instance of set preference class okay so now we need to pass this red preference uh token to get the token that has been stored in our set preference and pass it to our app okay so let's do it over here so variable token okay so here we must create a Constructor so we can do it something like const my app okay okay so here required this dot token and we must also accept a key over here okay and now from in this uh my app we need to pass our token that has been stored in our CL preference so we can do it over here so we can do it something like preferences Dot get string and our key is token okay so after successful login if you see over here I am storing my token that has been written by my backend in this uh keying I'm just storing my token okay so that I am accessing over here so I am just passing it to my app over here okay so now let's use it to navigate the user depending on the token data if it is expired we are going to send the user to login page and if it is not expired we are going to send the user to dashboard page okay so we can do it over here now Okay so JWT decoder dot is expired is equal to equal to false okay so if it is equal to equal to false then we are going to navigate the user to dashboard page okay and if it has expired so if it is true then we are going to navigate the user to sign in page okay so let's uh hot reload and check okay so I will just stop it and reinstall the app again okay so here yeah okay so our app has been running on my device you can see over here so I was directly navigated to dashboard page as our token has not expired and if the token has expired we will navigate it to our uh login page okay so let me stop our app now okay so I'm just copying it so you can see nothing has been running over here okay so I will just reopen the app again now okay okay so you can see our app got redirected to our dashboard page as our token has not expired yet this tutorial we are going to create a model in which we are going to store the user to do list data okay so let's get started with this part so this is the ninth part so in this part we are going to create to do model okay and we are going to create the API also so that the user can store his to-do list into our database okay so let's get started okay so now we are in our Visual Studio IDE and here is our node.js project okay so first of all let's create a Model A Separate model a database collection uh where we are going to store our to-do list of a user okay so let's just create a file and let's name it as to do model.js okay so you can just name it anything okay so in this we are going to create a mongoose schema that is mongodb schema okay so we have already done that in our user model so what I will do is I'll just copy paste the code from here and just change the name of the schema and everything okay so you can just stop zooming okay yeah okay so first of all we need to make a database connectivity so for that first let's import our database configuration okay so you can just see so this is our database configuration file so it is pointing to this database okay so we have done this in our previous tutorial okay and the next thing is we need Mongoose so just import it over here okay and then from Mongoose we need to import the schema property so just do it okay and now let's copy the schema design also okay and let's change this to you from user to to do schema okay so you can just name it anything as per your needs and inside content we need to change okay and then there is no need of this functions so just make a database connectivity by making use of our model and okay so we need to pass our to-do schema over here and we need to name this schema collection a database collection name okay so I will just name as to do okay and here also we can just name it as to do okay and now we just need to export this model okay and now let's uh change this schema entries that is the properties in which we are going to store our data okay so the first thing is okay so just remove this okay so we can just name it as title and description okay both are of type string for both the properties are required okay and the main thing you need to store the user ID also okay so that we can understand of which user this data is about okay so we need to just create a user model over here okay so to create user model we need to import our user model user model require okay so from this we are going to just refer our user schema through user ID type will be of type object Mongoose object okay okay and then here we need to refer our database so we can do something like this user model dot model name okay so our user to do model is being created Okay so okay so let me explain to what has been done over here so first of all we are going to import our database connectivity by our configuration file and we are going to import our Mongoose and also we need our user model so that we can refer our user data that is a user ID okay and then we are going to store a title and description of this user so if a user want to store his uh to do list then he will enter ID title and description that will get stored over here and for the reference purpose we need the user ID so that by making use of user ID we can show the data or the list of to do of a user in the collateral okay so let me open my DB compose okay so let's get connected okay so we have created user uh collection over here same likewise our to do collection will get created when we run away a project okay so let me run the project and try okay so for that in our app.js we need to import our model just for testing purpose okay so here to the model okay so let me run the project npm run live database connected and you can see once if I refresh let's check okay so you can see to do here we are going to store all our users data as I said that is user ID title and description that the user enter in our flutter app okay so now let's create a API and store the data in our to-do model okay so for that here in route we need to create a to-do route okay so I'm just keeping everything separate because it is easy and it is a good practice to develop any node.js project okay so here in route to do route dot Js so likewise in the service we will just create one more file that is to do Services dot Js and in controller also we will just create to do controller.js okay so here in to do route we are going to create a to-do route that will be used by our front end to add data in our database okay and in controllers we are going to fetch the data that is request and response that the user has sent from the flutter app and from the services.js we are going to store the data entered by a flutter user in our database okay as we have done the same thing for our user model to register himself okay so now just go to todoservices.js and here first of all we need to import our to-do model that we have created so you can just import something like this and then let's create a class where we can just define various functions so I will just name this class as to do Services okay you can just name it anything and here let's create a function uh which by which we can just store the data in our database okay so static I think okay so let's name it as create to do okay and then first of all Let's uh export this to do class by making use of model export model dot export is equal to to do Services okay so by doing this we can just import this file anywhere in our project and you can just make use of its function okay so now whenever this function has been called we need to pass three parameters as we all know that we are going to store three data in our database that is user ID title and description okay so just accept three parameters over here for user ID title and description okay and now here first of all let's create a object to const react to do I will just name it to do model okay and here we are going to store these three data in our data place okay so our object has been created okay and now we are written away create to do dot saved okay so whenever we do save any data is being passed to this function we will get stored in this object by making use of this to do model class and the data will get stored in our mongodb database over here okay now let's go to our controllers and we need to just call this function by passing this J parameter from this controller okay so now into do controller win first of all we need to import our services that we have just exported Okay so const to do Services require services to do services okay and here let's create a controller function by making use of exports dot you can just create any function name so I can just name it as create to do okay so this functions except three parameters from the front end that is the request response and next okay as I said in previous tutorial in request any data that is been sent from the front end will come in the request body and whatever we want to send as a response to our front end will be sent to this responses Okay so over here right catch okay so here next error okay so you can just show any error if any error has been found in this drive block okay now here in our request we accept three parameters that is user ID title and description from the user okay so first of all let's get those data so const request dot body okay and here we are going to accept three parameters from the front end in the Json format so user ID title and description okay and now these three functions this three data we need to send it to our services uh this function so you can just do is something like this let to do is equal to a weight to do services Dot our function name is create to do and here we are going to pass our three data that is user ID title and description that we get from our front end okay so after successfully creating or storing our data into our database we need to response it back to our front end so you can make use of this parameter that is response response Json here success or status so I will just repeat as true and in success we are going to pass the data whatever is been stored in our database okay and now let's go to our routers and create a route in our to do route file okay so to create a route let's open our to-do route that we have created in our previous uh user routes file okay so as you can see we need to import Express routes from the express Library okay and then we need to make use of this route dot post okay and let's create a route and let's name it as to do create okay or you can just name it as store to do okay so this is our API and whenever this API has been hit we need to send this data to our to do controller this function okay so we need to import this file in this route okay so here counts to do controller require controller to do controller okay and now let's make use of this dot create to do okay so now our API to store to do list has been created okay so let's check this API in by making use of Postman okay so now in Postman let's create one more tab over here okay so we just copy this address so it is our post method okay so let's copy the API over here and paste it something like this so from the body tank raw data Json we need to pass three parameter as we all know okay so let me copy this thing paste it over here so first one is our user ID that we need to pass from the front end second one is the title and the third one is the description desc builds is test this is my first to do list okay and the user ID we can just get it from our mongodb database okay so I'll just select this user ID and I will just pass it over here okay and now let's check if our mongodb is working everything is saved okay so now let's send the data to our API okay hit so it is saying to do is not a post method yeah okay so I just forgot one thing okay so after creating any new route we need to add it in our app.js by importing it so const to the route is equal to require to do route okay and Here app dot use to do router okay refresh so app is getting crashed okay we need to export this route also Okay so model dot export refresh okay so you can see it is running on this port okay so now let me hit this data and check if it is working okay to do validation Field title is required it is saying okay if I just made a spelling mistake over here okay so hit so you can see our data gets stored in our database okay so let's check okay so you can see the data is getting stored in our database so let me do it once again this is test to this is my second okay it and the data will get stored in our database by user ID okay so now we can make use of this user ID to fetch this data and show it in our flutter app by making use of this user ID okay okay so in this tutorial we are going to implement the same API in our flutter project through which a user will be able to make use of our flutter app to add his to do data in our database okay so let's get started okay so now we are in our Android Studio IDE and this is our flutter project and in this project I have already covered registration login and dashboard page so the user will be able to register himself into our system and get logged in into the flutter app through our system that is node.js project at the back end and on the dashboard at the center of my screen I'm just showing the logged in user email address okay and yeah so I'll just show you my Mobile screen so you can see okay so there is a floating action button so when this button is being pressed a dialog box will get opened and in this uh the user can enter his title and description that he want to add his to-do list okay so the same data will get stored in our database something like this okay so we need to implement this in this tutorial okay so I have just covered all the things you can just get the code or you can just pause the video and just enter this code over here okay and this when this button is being Fuller injection button has been pressed I am just showing this other dialog at the center of my screen something like this and the user can enter his title and description for the to do okay uh so let's implement the HTTP call and let's send this data to our backend to get registered with our to do data okay so let's get started okay so now here in the dialog box there are two text field where the user can enter uh title and description that you want to add as a to-do okay so you can see over here okay so these are the two controllers that has been attached and the controllers is been created over here okay and there is a button in the dialog box so when this button has been pressed I need to send this data to our backend database that is node.js script okay so here I need to send the data and the data will get registered into our database okay so for this here uh first of all let's create a function uh that will make an internet call and send our data to our backend so we have already created it in our previous tutorials that is registration to send the data to our backend so I will just copy the code from here instead of typing okay so here you can see I have created a function uh so just copy this code the whole thing and paste it somewhere over here and let's name it as add to do okay so let's open this code okay so here first of all we are checking if the to do controller text has been entered by the user or no okay so this is our controller okay so if it is not empty then we can just perform our task okay okay so if we go to our back end so you can see over here we need to pass three parameters that is user ID title and description from our front end so let's do that over here okay so it's title and description okay and we also need to send our user ID so we can get the user ID from this token okay so if we go to our login page so you can see I think so somewhere over here I have added it okay yeah so here we get our token that has been sent from our backend okay so my token okay so let me show you my back end user login okay so in this token we are going to store a user ID and his email address okay so you can just access it from the token okay something like this okay so let's do that okay so here I'm just decoding our JWT token by making use of JWT decoder okay as I know that I'm just storing the data in underscore ID so I need a user underscore ID okay so I will just store it in our user ID okay so inside this user ID I am just storing the ID that has been passed by our backend in this token so the token is over here okay so we can just make use of this user ID user ID okay so we have created a Json object body and in this object body we are storing user ID the title that has been added by the user from the dialog box from here in the description okay and we need to import our HTTP package so just import it over here okay and now uh here in configuration you must create a link to your API okay so this is our API so our URL is this our system IP address and this is our API so URL Plus this API key okay so I'm just using this over here okay so we need to import the configuration file to import config.data okay and for Json encoding we just need to import this uh dot converter okay okay so now when this button has been pressed I need to just call this function okay so hot refresh and let's check if our data is getting stored in our database or no okay so you can see it is showing user ID that has been signed in okay so let me show you my mongodb database okay so this is the user ID that has been signed in in our app so you can see his ID is over here okay and now in to do I'm just going to add some data so we'll just add it as Title 1 and description one okay I will just press on this add button okay and now let's refresh our mongodb uh compass okay so you can see our data that is to do list got added in name of this user okay so this is the identifier so that we can make use of this identification that is a user ID so we can just press the data that has been registered by this user ID okay so now we have successfully added our to-do data in our to do table collection okay so now when it has been successful added I need to just close this uh dialog box okay so for that here navigation so if status is successful okay so you can see I'm just sending status as success so if it is Success then I just need to close this pop-up okay so for that navigator.pop Navigator dot pop context okay so with this we also need to clear this text editor uh text field okay dot clear put in okay well same thing for uh description okay so hot refresh okay so I will just enter some details over here okay so I will just press on this add button so let's see what happens okay so you can see it automatically got uh status true from the back end and I think so the data got added in our database so now in this tutorial I think so this video tutorial is the 11th part so in this tutorial we are going to create a app API through which we need to get all the data that has been stored by the user okay so let's get started okay so let me open my mongodb database and let me show you where the data is getting stored if you have not watched the previous tutorials okay so this is my local database and here is the collection okay so to do collection so you can see in to do collection I'm just storing the data uh that has been entered by the user from the flutter okay so for this we have made use of this setting okay so now uh from this database I need to fetch all the data of a particular user by making use of a API so you can see I'm just storing a user ID over here that defines this data use of of this user okay okay so I have this users under over here so this is the user so under his name so this all data are installed okay so for that particular user data only I need to fetch by making use of API so let's create a API for that okay so in to do route over here let's create a API so you can just create it by making use of router router well just make users get data we are going to get the data stored in our database okay so I can just name it as get user to do list okay so this is my API name okay and now I need to create a controller so let's go to our controller first okay and here this is the function so we'll just copy this function and just paste it over here and create my own function once more okay so here get user to do I can name it okay so from the front end I'm going to pass only the user ID of whose data I want to fetch so I don't need of this title and description I will just remove it okay and now inside Services folder I need to create one more function that communicate with a database and use of the result okay so let's go to to do Services folder okay so let's create a same function over here to get the data so static or sync okay so let's use this as get to do data okay and here I am going to just pass a user ID so just remove this boot thing okay so I have a model over here okay so we can make use of it okay and to get the data from the database we must make use of a sink away so that the communicating with the database may take some time for a sink of it to do model dot find and in this is the command of uh or a query of a mongodb mongoose okay so find user ID find by user ID okay and whatever it is it is fine in the whatever that has been stored in our database will be returned to this variable so I will just name it as to do data okay and after getting the data I will just pass this data to the function from where it has been called okay so I just need to make use of this function now save the files okay so to do here I need to just first username to this function okay and the data that has been written by this to do Services function will get stored in this to do data and it has been respond to our front end okay now let's call this controller from our route okay so to do controller Dot get user to do okay save all the files yeah okay so this is my API and this is the controllers okay and here in controllers I am just accepting one parameter from the front end that is user ID and the user ID has been passed to this function get to do data and we receive the data over here user data user parameter and I'm just running a mongoose query to find the data that has been stored in our database by making use of user ID okay so this is the user ID okay and the data will get returned back to the controller and controller was just response to our front end by making use of response key okay now let's check this if it is working or no so to do that just run the project in pm run due okay so now let me open my Postman okay so here let's make a request so just copy this URL which is a get method and here I need to add my API name okay so the API name is this one okay and here you can see in the body I need to pass the user ID so let's pass it in the body Json Json and here let's pass the it was already in the object form and the user ID you can just get it from the database okay so I know this is my user so this user data is installed in this database yeah so this is the user you can see f8 and these are the data of that user yeah so what the f81 vf1 so this is one and this is some other users data okay so here I need to just pass the user ID okay and our backend is running you can see okay so I will just hit and you can just see how we get a response of that particular user uh to do data okay so these are the two datas of that particular user okay so let's pass some other users ID over here and check okay I think so so what this user is yeah so this is the user let's just copy the user ID and paste it over here okay so this data will be passed from our front end together the particular user's data as I said you okay so you can see this user also has two datas over here so the data is something different okay okay so let me create one more data and let's check if I get three data or no Okay so what to do okay to embody I need to pass the user ID so this is test three okay for data was stored so let's get all the data so you can see I got the data of the third data that I have entered just now okay so that's all for this video tutorial so in our next part we will just call this API from our flutter app and let's show the data in the list view uh in our whatever okay you can see this is the API to store the data into a database and this is to get the data of a particular user from the database okay so we have implemented this in our last video tutorial to get the data from the database list okay so this will just get all the data of a particular user and return us the data of a user okay as you can see okay so it is getting of a political user it is just fetching the data will be installed in our database and it is returning the list of data uh that we can show it in our flutter app okay and this is my folder app that has been connected through USB and you can just see the screen okay so let me get sign in okay so you can see this is the app I have created and it is the dummy data being shown over here okay so please note that I'm not going to cover each and every UI part over here so UI has already been completed uh by myself okay so you can just get the source code from my GitHub repository or from my website protocol.com I will just provide the link in the description okay so UI part will not be covered in this tutorial okay so now here in this list I want to show all the data that has been stored by this particular user okay instead of this dummy data okay so let's implement the same in this video tutorial okay so let's get started okay so now we are in our Android Studio IDE and here is a flutter project being open so in this photo project I have covered all the things such as login registration and creating a to-do list data and storing it into our database okay so now in this tutorial we are going to fetch all the data that has been stored in our backend node.js project from mongodb database okay and show it in our app in a list format over here okay so you can see from here the user will be able to add his to do data okay and the date edit data I need to show in the list view okay so let's get started okay so before getting started let me show you the UI thing that has been done by me okay so here as you can see um I have created a random list of items by making use of generator list generator okay so I'm just generating 10 data and being shown over here okay and then over here so this is the UI part so I have a container so inside container I am just showing a circle editor size box so let me show you side by side okay so here as you can see there is a circle Avatar icon there is a text and there is a one more text over here and inside after that there is a expandable widget with a container uh with height as 13 so if I don't provide this height it will work okay and here decoration I have made use of to give a border radius to this container okay and then uh there is a padding between the items okay and then by making use of item Builder I am just showing all the data that has been generated in this list of items okay so here I am just making use of uh package called as sideable through which a user will be able to slide to delete the item from the list okay something like this okay so for that I have um added a library that is flutter sideable okay so you can just need to add this thing okay and then here I am just showing the item that has been generated that is the index ID so item of index ID so this is the thing okay and there is an icon and there is a leading icon being shown in this list of card please tell okay uh so now we need to hit our database to get all the real data of a particular user and show it in the list okay so let's get started from here okay so now to get the data from our mongodb database we need to hit our backend API so so we need to hit this API so for that in our flutter project we need to create a function that will hit our API okay so here somewhere over here I can just create a function okay so here I will just create a function by name get to do list and here I will just pass one parameter that is the user ID okay and this function will get called immediately as soon as this dashboard device will get uh opened by the user so here from here I can just call this and pass our user ID okay and you might be wondering from where this user ID is coming if you have not watched our previous tutorial okay so here uh whenever the user gets signed in into our app and you can see so it is user has been successfully signed in and the backend login API will give us a token of a user inside with all the details of the user will be get stored okay and the same thing is I'm storing it in our shared preference and the token has been passed to our dashboard page okay and here the token has been decoded by making use of JWT decoder and from that I'm just getting the user ID and storing it in this variable okay so same thing I'm just passing it to this function now okay so now let's make you hit to our backend uh API okay so we need to hit this API so let's create a configuration file of that URL okay so this is our API URL to hit okay we need to hit this API from this function okay so I already made some code through which I am just hitting the database by making use of HTTP post okay so I will just copy paste this code and I can use it in my other function okay so I can just copy paste and paste it over here okay and this function should be of type of sync okay this post method and here I need to call our get to do list okay and let's check our backend uh API so let's check what it is accepting from the front end as you can see it is just accepting one parameter that is a user ID okay so here in body let's pass only the user user ID okay so here in the body I'm just passing it by making use of Json encoding and we will get all the data in this Json response okay so we get status as true and in success we get all the data of the user so let me open my DB compose okay so from this to do collection I'm just getting the uh data of a political user so I will just get all the list of data of a particular user okay in this tool box okay so now we get all the data of the user that is to do in this parameter so this parameter I just data I need to store it in our list of items uh in this string okay so I'll just remove this generated data okay so it is not of type string let's remove this final key also okay so in this variable I want to store all the data that has been got in this response okay so for that item is equal to Json response of success okay and then let's call that state to update the UI okay so now let's use this so I have already used them in the list view Builder you can see item count if item is null then the list will be empty else the list will be shown to the user okay so number of items in this list okay and then here you can see I am getting the user as title and description so let's use this key okay so here in the title okay so before that let's sort refresh and check if it is working okay so you can see there are five uh four items being shown and the four item got generated but from this data I want only the title to be shown over here so we can just make use of this key over here so index of item of index of title okay something like this hot refresh so you can see I did you can just I'm just showing the items title okay so the same thing for sub description subtitles text okay and the data is description desc okay so what refresh let's check so you can see I got the item over here okay and then uh so it is completely working now okay and now whenever the user adds one more items means if you want to add one more item then I need to just get hit this function to get the latest data okay so after adding the data I need to do that okay so here add and once the data got added into our database over here so success true I will just call this function Again by passing the user ID okay so what refresh okay so let's add some data okay okay so I'm just pressing on the add button okay so you can see the item got added into the list so let me add one more Okay add so you can see the item got added into our list of items okay so in this tutorial uh we will add a feature through which a user will be able to delete any item from his to-do list okay so you just need to swap this item and just click on this delete button okay so let's get started and implement the same okay so to delete any item from this list of items we need to create an API in our node.js project so here is my node.js project so let's create an API to delete any item so we'll just copy this route and let's name the API as delete to do okay so this is the API name okay and in controllers file over here let's create a function that is export function okay so I'll just copy paste and just change the name of this function delete to do okay so here I need to make some changes so before that let me open my mongodb compass and let me show you the data okay okay so over here to do okay so from the front end I am going to pass this ID okay and if the user pass this ID I want to delete all this item from this to do collection okay so here I need to pass any an ID from the front end okay so if you see so when the user press on this item list so we are going to pass this item ID this ID okay and we are going to delete that item from our database okay so we are going to accept one ID from the front end and in Services folder here let's create one more function a static function that will delete an item from the list so delete to do okay so here I am accepting one parameter to this function that is ID okay and now by making use of 2do model 2D model dot find 1M delete okay so this is the Mongoose Mongoose query find one and build it and here we are going to pass our ID underscore ID okay deleted item we are going to return it call back okay okay so the same function let's use in our controller so here we are going to pass ID deleted item will be written back to our front end okay so this function will get called from our API route the controller delete route okay so controller so let me check ID we are going to accept and ID we are going to pass it to our service folder so inside service folder we are going to find one and delete the data from the database okay so let me save this okay so now let's implement the same thing in our front end in our father project so I will just copy this API and in configuration let's initialize our variable okay and now in dashboard page let's create a function delete item and here I will just pass the selected ID okay and now let's call this function when the user press on this delete button by swapping the list View okay so it happens over here okay so the edible don't delete okay okay so let me show you underscore ID or refresh okay so you can see the item id has been passed when the button has been pressed okay so from here let's call the function that we have created above so delete item one second yeah so over here delete item and let's pass this selected item okay now let's go to that function and let's check if we are get receiving that ID or no not printing it or to refresh Okay so let's check let's get printing two times because here also I have printed it okay so now we need to make a internet call or API hit okay so for that I will just copy the existing code from my previous functions Okay so let me just copy paste it over here okay so you can see in the back end we are accepting ID as a parameter from the front end okay so in request body we will pass the ID ID and by making use of HTTP post request we are going to hit our API okay so we need to make this function as a sync okay and here let's call the URL okay so item will get deleted okay so after item gets deleted we need to call get to do list again by passing the user ID okay so over here if this points of status is equal to if it is equal to true then we are going to hit our database to get the latest data okay so let's check if this is working okay so let me Swap and let's check if item gets deleted okay so I think item is getting deleted so let's check this if this is getting deleted from the database or no okay so item got deleted so let's go to our database and check okay so to do so there are 10 so you can see now it became seven okay so let me delete one more item so this is new data this is to do latest data okay so it is over here okay so we'll just swap the item got deleted Let me refresh so you can see the item is getting deleted from our database also okay so that's all for this video tutorial thanks for watching please do subscribe protocols Point thank you

Channel: Proto Coders Point

Views: 3,409

Keywords: flutter, flutter tutorial, dart, nodejs, mongodb, mongoose, full stack development, crud operation, user authentication, JSON Web Tokens, jwt, mobile app development, backend development, nodejs tutorial, mongodb tutorial, app development tutorial, flutter todo app, todo app in flutter, Simple todo app Flutter, flutter todo, flutter to do list, flutter todo app with nodejs, flutter nodejs, flutter todo app example, flutter todo app tutorial for beginners, flutter todo app utorial

Id: agq3plwV4VE

Length: 146min 50sec (8810 seconds)

Published: Wed Mar 08 2023