Node. js Backend for Flutter Beginners

1. Course Introduction: Are you a flutter developer looking to take your skills to the next level, introducing no GAS back end for flutter beginners. The ultimate guide debt will introduce you to the world of building custom back ends. In this course, you will learn how to build powerful back end systems using new GS and Mongo DB, freeing yourself from the limitations of fire base and avoiding expensive vendor lock in. From writing server code to mastering cred operations, and finally deploying it using the railway app, you will gain hands on experience in creating custom back end architecture by developing a basic clad application by the end of the course. Also to ensure seamless state management, we will use the popular provider package. This course will definitely help you to get ahead of most of the developers who doesn't know how to create own back end and are stuck with just fireways. So without wasting any more time. Let's get started. 2. Setup a Node js Project: Hi. Welcome to the very first video of the course, where we will learn how to build a custom back in using No JS and Mongo DV for our flatter application. So, the first thing we have to do is install no GS in your system. So go to your browser and type nos.org. And from here, you can just download it and install it. I'm using a max system, but if you are in windows, then you can just change it via downloads and windows installer. So as you can see, I will just write V, and I have the version. So after installing, if you can see this version in your command line, that means you have successfully installed no es. And NPM will be automatically installed with no Jaz, so we don't have to think about that. If I write NPM version. So I have NPM as well. After installing node js, we have to create a node JS project. So go to your desired directory and create a new folder. I will name it Nodes app. Inside Nodes app, create another folder, name it back end. In this folder, all the server side code will be there. And later on, we will create another folder called front end, which will consist of all the flutter code. So now we will need an entry point for our server. Just like in flutter, it is the main dot dot file. So inside back end folder, create a new JS file, and it will be file which I will just open it VS code. Open folder. Here, I'm opening this back end and here I will create a new file server. Like this. If you want, you can name it index do chase as well, but I'm just naming it server do chase. Now, open a new terminal in this back end folder and initialize NPM by typing NPM in Y. This is how you initialize an MT NPM package here. You can see the main entry file is server dot S. But if you didn't created the server dot JS file, then it would have taken in the S as the main file. And all the packages or external dependencies will be shown in this file. Now, when we're talking about packages, the first package we need is the express package. Express JS is a framework that works on top of net JS web server functionality to simplify its APIs and add helpful new features. It makes it easier to organize our applications functionality with middlewares and routing. So here in the back end pool in the terminal simp NPM install express like this. You can also go to npmjsen.com, and there you can search for the express package as well if you want to know more about it. As well as you can see in the dependencies, I have the express package. Now let's create an express server. First of all, we have to tell our project that we will use express. Let's import or you can say, require the express package at the top. Simply write const Express is to re express, and then we have to create an instance or object of the express. I'm giving the name app. This is a standard process, and then I will write the code for starting the server. That is, I will listen it in the pot three than and after it's successful, I will console log. Console log here. I will just write server running at port 3,000. Okay, save it. And then try to run the server by typing in the terminal node and the final name server and presented. Se server running at that is our server is running. If you go to your browser, and type local host 3,000. So here you can see cannot get slash. That is the home route. But at least it is not showing any other error, that is page not a response or the server is not available like this. This implies that server is running successfully. In the next video, we will create few routes for our server. Thank you. 3. Creating Routes: Hi. Welcome back. Now, let's output some data in the local host 3,000 route. For that, we have to configure the GT request for the slash route. Let's go to our code here above app Listen. I will write app GT. And then what route we want. We want the slash route. And whenever slash route is being called, we want this function to be executed. Request response. It gives us request and response. So these are the basics of express framework. So you must know it. Or else you can just go and build the application, and you understand the concepts eventually. So here, you can just understand. Request is what we sent from front end to the server. So suppose a person is sending some e mail password data. So we will fetch those information through this request variable. Whatever from the front end, we are sending, we can get in the request. And similarly, response is what we send from server to the front end. So obviously, we have when the fronten is asking for some any data. We will send it with this response variable. So here we will write response dot send. And this is the home page. This is just a dummy data for now. Obviously, we won't be sending data directly in the string format. Just to make you understand. Now, we have to stop the server, so just control C, and then start it again so that this code is updated. Now if I go and refresh C, this is the home page. That means our slash. Whenever we go to our local Hos Fit Hus slash, we get this response. But if we go to any other like node, then obviously cannot get nodes. Now let's create the notes route. Since our application will be a node application, we have to create a route for the nodes. Blow d is home route, get Then here slash notes. Then again, a function will be called request response request response and I will I will send response send. This is the notes page. Save it. Again, go and stop the server. I have saved it and start it again. So now if I go to the slash notes route, see, this is the notes page. And if I go to simply slash, then this is the home page. So this is how you create routes. And make sure I understand this is for the GT routes. There are a different type of requests, that is g post like this, you will understand it, but this is the basic one, that is the GT request. In the next video, we will work on setup of Mongo DB Database. Thank you. 4. Setup MongoDB Atlas: Hi, welcome back. Now, let's set up our Mongo DB database. We will use the Atlas Cloud service for that. So simply open up your browser and go to Mongo DB Atlas. Here, then click on the first link. Then sign in or sign up with your Google account. I already have an account, so I will just log in. If you are a new user, then you can give any name to your organization and select Mongo DB Atlas options. Since I'm just logging in, I won't be seeing those things, but in your case, it will be just give the name of your organization. And then select Mongo Atlas option. Now, after signing in, see, I have this organization by the name, Rahul Agrawal. And if you are in this page, then the first thing you have to do is create a new project. So, I already have this project, but in your dashboard, you won't be seeing this project name obviously. So just click on Create New Project. And here, give it a project name. I will write notes app. Then click on next. Here, project Owner create project. And after the project is created, we have to build a database. Simply click on it. Then select the free tire that is zero. Obviously, later on, you can go for servers and these kind of things. Then provider is AWS and the region closes to you. So just choose wherever you live. And you can give your cluster name. I will just leave it default. It is cluster zero. And click on Create. The It's Caps and all. Motorcycle. After that, we are putting final touches. After that, you have to create username and password. Just remember these details. I will be using a very simple password for now. I will remember it. Click on create er. Then where you would like to connect from the Cloud environment, choose this. And then I already have my IP address. I just add my current IP address. So I have my IP here. And then just finish and close and go to Tababase. M. Okay. Now, the next step is to allow access from anywhere. As you can see, we give our IP address, that means only this system will be accessible to that server. But we want others to use our application as well in real life. Go to network access here, click on Ad IP address, and click on allow access anywhere. S and then confirm. It is in depending status. It is taking some time. We are deploying your changes current action configuring Mongo. As you can say it is taking time. It's fine. L et's We will say this after a few minutes before that open a VS code. And obviously, we have to connect this node to Mongo dV. For that, we will use another package known as Mo. In that terminal, I will just stop it and write NPM install Mo and press enter. In the serve package that Jason filed, you can see Mongo's is there. And I believe our database is also configured. So in the next video, we will establish the connection between the NA and this database. Thank you. 5. Connect Node app to MongoDB: I. In the upcoming step, we will require a connection string to connect our app to the Mongo DV database. For that, go to that last dashboard, and here, click on Connect button to the cluster. So here, just click on Connect. Then there are a lot of options. I will choose Mongo DB for VS code. And then simply copy this connection string. We will replace the password with our own password. Open VS code, and in the server, let's establish a connection. Simply, first of all, import the Mongoose package Mongoose equal to require Mongoose. Then write mongoose connect. Here we have to give the string. That is the connection string. And simply replace the password and also remove this than less than simply write the password. I gave it 12345. And at the end, I will write the database name as well. That is Nodes DV. This was just a cluster, and this is the database name. Nodes DV. And when the connection is successful, then then I will fire this function. Which will have all the routes. That means I will make sure that routes are accessible only if the connection is successful. I simply cut and paste all the routes within the Mongoose connection. And this appleion will be outside. Then we need a tool to test the APIs. To perform crud operations on a server or database, we need a client or front end. Right now, we don't have the flutter application. So to simulate or send fake requests, we will use Postman to test the API. So simply go to a browser and just write postman and then here, I already have this setup, but make sure you create an account and download the software. I have this postman here already installed. Lot of previous routes. Here, first of all, start your server again. Server is running. That means I guess there is no error with the Mongo. Let's send a G request. This is the Get request, and I will write HTTP then local host 3,000 slash notes. And if I send a GT request here, see, this is the notes page. That means our response is there and the server is working perfectly. And this postman is very necessary. I hope you have installed it as well. Before doing anything else, until now, whenever we make any changes in the code, then we have to stop the server and restart it again. This is not a good development experience. To solve this, we will use a package known as Nudmon. It will allow live refresh of the server. That is when we make changes and save it, it will restart the server itself and reflect the changes. Again, stop the server and write NPM install global node M. So tie this code. We will install this package globally in the system so that in future projects, you don't have to install it again and again. So simply press enter. I already have Node Ml installed globally. So this will install it in your system. And after that, in the packet JS file, create a new script. Below start, just write D and write the script nodemon server do chase. This is only when in the development phase. In the live server, it will automatically take the node server do chase. Save it. From now on, we will write NPM run Dv, and see the Nod Mon server is started. So that means from now on the development experience will be a little bit better. That's it for this video. In the next video, we will start working on creating models for our. Thank you. 6. Creating Note Model: Hi. Welcome back. So before moving forward, I would like to structure our project in files and folders in an organized manner. So first of all, I will stop the server. Then inside the backend folder, I will create a new folder called SRC. And move move the server dot JS file inside the *** folder. Now I have to make some changes in the packet do SN file as well. Here. When I'm doing the start script, I will write source sla server do JS and also in the nodemon. That is D script as well because the file is not in the root directory. So that's it. Now, let's create some models. For our node data. Models are the structure of any data in our application. We will save that data structure in our Mongo DB database. Mongoose will help in saving the data as well as creating models. Also, we can use that model to perform crowd operations in the database. So these are all connected to the Mongoose package. So you must know the basics of it. Inside as folder, create a new folder and name it models. Inside model, create a new JS file. Note Js like this. Okay. Now, there are some steps of creating a model. The first step is to require the mongoose package. The very first, let's require the mongoose package. Then we have to define schema. That is details of the data. In our node data, it will have ID title content like this. What are the fills stored in that data? Let's create const schema is equal to Mongo schema. Here, we have the parenthesis. The first fill will be ID, and now discusses properties. Type, will be string, unique will be true, that is all the ID should be unique and required. That is this field is required, cannot be left empty in the database. Then the next will be user ID, type will be st and re is true. Because obviously the user can have multiple nodes, so the user ID cannot be unique. Then title that is title of the node type string re then it will have content type string. That's it is not required. Finally, we have added. Is type will be. Like this and default will be the taught now. If no data is given, then the default will be there. So we have imported the Mongos. We have defined a schema. Now we have to create model. For that, we have to give a model name and a schema. So, simply write Mongos dot model. The model name will be Node, and the schema is note schema. Final step is to export the model. Simply at the beginning of this model, write module exports is equal to Mongoose model. As you can see, this is the code four hour Node model. So I hope you have understood as well as you know the concepts. Because obviously, this is the concept of Mongo's package and Mongo DB as well. So that's it. In the upcoming videos, we will create some new routes as well. Thank you. 7. Route for Adding Note: Hi, Let's use the note model to fetch all the notes in the database and send it as a JCN response. So in the server JS file, I will change this slash notes to sns do list. And here I will write R. At the very first at the very top, I have to require the model. Just writes node is equal to re models node. Then here I will write nodes is equal to a node fine. That means get all the nodes from the database, and it is a synchronous function, so we have to make it a sync. And then in the response, I will just send res JS and notes. I'm not wrapping these notes in any parenthesis because these notes will automatically be in the JCN format. I will save it run the server. And if I go to this end point, that is notes list. Then see I'm getting an empty array. That means there is no notes inserted, obviously, but there is no error. Now, let's create route for adding a note. Below this list route, create a GT route for now app.gs notes ad. It will be a sync function. Request response. Now, we have to create an instance of the node model. So for that new node, is equal to new node instance. As you know what data tes, it will take an ID. I will code the data for now. Later on, we will change this route to post as well as rea from the user. I will just write 0001, then user ID will be rahle atmail.com, then title will be first the me note and content will be, this is the content. When we have this node instance with the data, we have to save the model data in the database. And this is very simple. Simply use this new note variable and type save. That's it. This code will save this data in the database. So as you can see, Mongo makes it very easy. Then create a response variable CN format, and I will send a message new node created. In the end, I will just write Response No Jason and I will send this response variable like this. That's it. Save it. Now, let's test this API. The APA end point is node ad node. Lash ad C message, new note is created, and I will, if I go and now write list L et's see I guess because I know what is the error. Yeah. I have to change these things. Now if I go and list, then see, I have this, which I inserted ID, user ID title. Because it was not unique, so it was giving error. Anyways, we won't be hard code values like this. But as you can see, datas are inserted. If I go and add this as well, and then with the third ID, I will use a different user ID, John, and this will be his my first dummy note like this, and if he write add as well, in that case, if I go and write list, then all the three notes will be there. That is Johns and I ge Johns have three, four k. Obviously, the last one also got inserted. As I said, This slash ad has something when we are I might have entered two times. That is the thing. But it's fine. The API is working perfectly. So in the next video, we will work on the route to get notes only by user ID, obviously, we don't want this list that all the notes of all the users will be fetched. I don't want other users to see each other's post. Also, I can see I have this type of mite it's fine. Just save it. And that's it for this video. Thank you. 8. Get Notes by User Id: Hi. Welcome back. So as you can see, we can fetch all the notes in the slash nodes list route. But obviously, we only want user to be able to see his own data in the application. For that, we will pass user ID as a parameter while calling the route. So let's change this route that is after this list, I will accept a user ID variable. That means when calling this route, the person has to send this data. And then I will use this data to filter the find. That is here, I will I will just filter where user ID is equal to request PMs do user ID. That is this is a parameter, that is PMs. So in this way, Only the nodes of that particular user will be shown. So let's test it out. Yeah, I will just use Postman for this. Now, I will just write rah at the gmail.com. This is a user ID. I have this GAT request. If I send it, then see only only the two data, which are mine are now showing. So that means this is working perfectly. The next thing we have to do is we have to install a package because when we send data via post request, our node server won't be able to understand it by default. That is, suppose here when we do the post requests and in the body, we will send the node data because obviously, here we are just hard coding the node data, but later on, we will ask these information from the user. And in that case, we have to make sure our server is able to understand those data. For that, we will use body passer package. So I will just use Control C to stop my server and write NPM install body passer like this. It will convert the JC data, which we will send from the front end and make it readable by our server. That's it. And to make it work. We have to use it as a middleware. Here at the top. First of all, I will import it that is body parser is equal to require and then body parser. After that, I have to write app e body parcel URL encoded, extended is equal to false, and then I have to use app dot use body parser, Jason. Here, extended is false. Since we won't send any nested data in the body. Key will not have any JCN data as as values. That is, as you can see here, all the data all the values are just simple strings. But suppose we have some kind of tags, and it will be an array of strings. In that case, you have to make it true, extended. So as you can see, and then this line just make it will just convert the JN data to be readable. That's Now, let's work on our add note route. Earlier, we made a route for adding a note, but it was just storing dummy data like this. Now, let's work on it so that we can retrieve data from the body of the request, that is this one and store it in the database. First of all, we have to make it a post request, instead of And remember, this post requests cannot be tested in the browser. So we will use postman from now until we build a front end. Now, Here, instead of hard coding, I will request dot body dot ID. That is the data will be in JCN format, and ID will be its key. I will use this to just print out the value. Similarly, user ID will be request dot body. Make it big. Request user ID. I will request dot body dot title. And content will be request dot body content. Okay. Other than that, I don't think so. This is the s. And I will here just write the message with the string interpolation. New node created with ID, and then I will simply write request third body dot ID. Just this is the response. I want Sy. Then let's start our server again. And now test it. Here, first of all, the route is add. Remember, this will be a post route. Now to send body data, first click on this body and then e Raw and make sure inst of text, you write JS because we will send Jsta. Here, Let's write ID will be 005. Because there are four notes right now. I know it. User ID will be mil title will be Hard the M note. And content will be This is the content. Now, let's try. We'll just post it and see new node created with ID 005. And this is 005, I forgot. It so be t zero, but it's okay. If I go if I write list, and then write le a gmail.com, and it will we get request. Then you can see the latest one here. And if I go to the database as well and refresh it, you can see. 001-00-2003, all the datas are there. Let's see if I can just change this 210 more and update. That's it 005. And if I just make it again, see. I can just list only the notes of R gives idea. So that's it. For this video, see you in the next video. Thank you. 9. Route for Update and Delete: Hi, welcome back. Now it's time we create route for updating a note as well. So below is add route. Rite app Tot. And since it is concerning about updation, we will use put. This is an at STP request to updating, and I will give the route name is notes. It will be sync function, which will give request response. Okay. Now the way we do it is we will write R update note is equal to a weight then our note model dot. This time we will write not find, we will write fine one and and see, we have replace remove delete, and we will use update like this. And now here, The way we do is first we write the condition in this parentheses or curly braces. The condition is ID should be equal to request dot body dot ID. So we will send the ID via the body. Then what do we want to update? We want to update the title field to the value request dot b dot title and the content field to the value request dot body dot content. So this is the condition This is what fields we want to update and to which data and the final one, we will write neu is equal to true. That means this query returns the data. If we don't write neu is equal to true, it will return the previous data, not the updated one data. That is why, it simply return the updated data, which will be stored in this update variable. So just remember this find one and update. This is the way to do it, and it returns the updated data. Now, after this, we'll create a response variable. Here, we will write message will be Note has been updated with ID. And the ID will be request dot body ID. And then we will also send that note data that is updated update note like this. That means we are also returning the data. To see it in the console. That's it. Nothing else. Rest Json that is response dot Jason and we will send the response variable, like this. Let's test it as you can see here. In the ID five. I will update the data. Here. It will be The route name is List notes date. It should be put. Remember. ID is 005 title. This is my content like this. I don't want to change any other thing. I'll just And let's see what happened. There was some error, I believe, but why? No. I didn't change. I have let me check again. Notes, update. Then I have find one and update ID requested body ID. And ID here. Okay, the ID was wrong, obviously. I change it. Now if I write put C, this is my updated content. And if I go to the database, and if I refresh it, You can say this is my updated content. Other details will remain same. Okay. So the update route is also working. Now the next route we want is the daily route. For updating, we use the Put route put request. Here we will use that delete. That is ab Dot delete. Here you can see we have Abdo get post Put and delete. The route will be notes, delete, then a sync punch. Request response. The query will be delete note is equal to a weight. Note that delete one. So here I will use delete one because obviously, I'm just deleting one, and the condition will be ID sho be equal to request dot b ID. Then I will create a response I will write message is equal to Note has been deleted with ID. Then you'll request body dot ID. And remember here, it won't be giving the data. It will just write, s deleted is done, something like that. You will see in the response, but this doesn't return the deleted data like this. Then I will just write response dot C has. I will write pons here. Save. Now let's test this route as well. And now I will delete the updated route. This one. I will use delete, first of all here, then change the route name to delete. And here, I don't have to send all these things. Only if I just send ID, then also it's fine. If I send all these data, then also it's fine. So I will just write the n and see note has been deleted, acknowledged T deleted Count one. So this was the response from the server. And if I go there and re then this be there. This should not be in the database. Let's refresh it. Let's see 005 is there or not. S. The last one is 00004. This is the last one. So all our routes have been written and are working perfectly. In the next video, we will just organize our routes in a certain manner. Thank you. 10. Organise our Routes: H i. We wrote all our routes in server JS file. If you want, you can do that, but I like to make it more organized. Since in bigger applications, you will have many more routes to handle. As you can see, we have four routes for managing nodes. That is these four. So let's separate them in a different file. I'm not talking about this route. I'm talking about these four routes. So Let's top the server first. Inside asserts folder, create a new folder routes and inside it, create a new file. Node tos. That is this will be the route node. Here, first of all, inp express is equal to require Express then here, we'll use router from the Express library, is Express router like this and make sure you export this router so that we can import it in the server JS file later on. After that, go to Servers Here, server JS file. And cut all the four routes except the home route. Here from the app dot, this gat post put and delete, cut it, go to these routes here and simply paste it like this. Now, instead of this app.gg, we will use Router. And also remember to import the node model. So this right const node is equal to require This will be outside models note like this, and here just write router. Here as well. Since you can say this is our own router file. That's we are using this router express router. And you can remove the slash notes from the router name. Because this is common in all the four routes. We will use this in the server the JS file to connect that with our own routes. You will understand, first of all, just remove the routes the slash notes here as well. And here as well, save it. Now, finally, tell the server the JS file to use those routes which are written in the separate file. Here, first of all, mp route file. Here we will import it here. C Note router is to require la sorry, this should should be routes slash note. And then I will just use it as a middleware app dot e. An request which has slash notes in it, e the node router like this. So if you understand that, it will append the routes automatically. That is slash notes slash ad or slash notes slash update. So any requests coming to this, that is it has the slash noes. It will detect, then we'll go and just see, add call, update this call or delete this call like this. This is a cleaner way. Also. It is not important, but since all the data is coming in JCN, I will also hear Sen response to JCN the message, I will just write API. API is working like this. And obviously, now I don't use these comments. I know what is requests. I know what is response. So if I just have to test it, I will just write terminal and P. Es list s mail.com. It will be Get request. Let's see, and see. The routes are working now as well. I have two routes here. I have two notes. S. And if I write John, then, I have all the notes of John that is three and four. So our server is completed. In the next video, we will deploy this server to railway app so that it is live. Thank you. 11. Push Code to Github: H i. Our back end is completed. Now it's time we deploy it from local house to a remote server so that everyone can access it. We will use railway platform for the deployment instead of Heroku, since it doesn't require credit card to get started. Before that, let's make a small change in our code. We have to change the pot. Since we have the pot given we have to use the pot given by railway in the environment variable instead of a static pot. Here, just write constant put two process Env pot and if it is not there, then just use 3,000. And here put like this. So this is the only code required and here I can use I can simply use this put like this. Okay, the configuration is done, I can just stop the server for now. To deploy code to, I guess, this is we are using railway or render or whatever platform. We have to first push our code to Github. So go to your Github account he sign into your Getab account, and you have to create a new repository. Simply write new then I will name it notes app API, then make it public. You can remove the read me file and just click on Create reposite three. And after that, we have to initialize Git in our project. Here, simply write Git in it, then write Git add dot then write get commit com I'm just writing first commit presenter. Then get branch main. I hope you know G code. That is these are just get lines, and you can see all these lines here as well. After they just copy it and paste it and finally get origin main. Like this. S. Let's go and check if our code is pushed or not. I will just refresh it. And see. We have the back end code here, so, models, es. Everything is there. And also, I have pushed these node modules as well, but it's not necessary that is you can ignore these node modules as well as any dot NV file. So that's it for the first step in the next video, we will log in to railway and deploy our server there. Thank you. 12. Deploy your repository: H i. Now, let's go to railway dot app. It is right railway app like this, presenter. You can see, bring your code. We will handle the rest all these things. So this is the railway platform. I pretty much like it. You can create database as well. As well as upload any serviit code. Just click on Log in. Log in with Github. And see. And because I already I already logged in with my guitub account earlier. So I guess that is why it directly sent here without asking to authenticate. But definitely you will require to authenticate via your guitab account. Then after login in Here, simply create a new project. Then you can see there are a lot of options deploy from Gitab po, deploy a static template. You can create database here as well because see you can use Mongo DB here. Then you can use that link in your server if you are not using Atlas. So it's up to you. I will just we deploy from Github po. Then I already have authenticated with my Github. But you might not see all these things. You have to configure Github app and like that. So you can just click on it and simply enter a password. Then here, I will use this notes API. And also, I remember there you have an option to authorize to access all repositories or certain ones. So I have given all repositories because it's up to you. Click on notes, API. Then if you have any environment variables, you can add them here or later as well. But I will just click on deploy now. So it will be done within a few seconds. But as you can see, it is so easy to deploy our server. You don't have to do that much configuration and now you can see this is success. The last thing we have to do is create a domain. That is the endpoint of our API, which can be used from the client to access this server. Obviously, we need some kind of URL. Go to settings here. Simply click on generate domain. It is generating our server API URL and C. We can see our API. And I I just click if I just click on it, then now our home route is showing the result. It is API is working. As you remember, this was home route. Now, let's test this APA in postman as well. I will just copy it. Bring out the postman. Here. Instead of this local host, I will use the I will use Notes. At the beginning, I have to write HTTPS, and then column. Now, just get everything for Ravel, send and see, we have the routes here. Now if I try to add a route and give it a post, and I think this one was deleted and this is the content. I think 005 is not there. Let's post it. S, new node created. And now ilist@gmail.com and get it give it Get request. Then I can see my latest node data here. So that means our API has been successfully deployed and it is working perfectly. So all the server side code is done. In the next video, we will start working on our flutter application. Thank you. 13. Create a Flutter Project: Hi, welcome back to a new video. Now it's time we work on our front end. The first thing to do is creating a new flutter project. I am assuming that you have already installed Flutter S DCNO system. Now, as you can see, we already have this back end. Now here, that is in the Notes app open a terminal. Open a terminal. And make sure you have flutter installed. S. When I write flutter version, I can see the version Flutter 3.10 0.1. Now here, I have opened the terminal here because we already created the back end development in this folder. Here I will just write letter, create front end like this. Let's create it. You can use any project name or any location. I just prefer it this way. And after this, you can see the front end here, I will delete windows windows folder, then web, then Linux, then MacOS, and then test. Since I won't be building for those platforms. Now open this project in code. Like this front end. Do not run the app now. I will just go and change the app name in this main Android manifest file. I hope you know that here, I will just write notes app. So whenever you build this app in your mobile, the app name will be Notes app instead of front end. And you can make it capital as well, you can give space as well. It's up to you. This was just the name. Now. Let's create a home page because obviously I know I won't be using this dummy code. Inside ib, create a folder known as pages, and inside it, create home page dot dot. Now, we will create a state full budget for home screen with an app bar and a floating action button for now. The first of all, import material package, then create a state full widget, name it home page. Then here, I will return a scaffold then the app. These are all widgets of flutter. I'm assuming you have the basic knowledge of flutter. The text notes app Then centered title is equal to true. After the a bar, just write floating action button, then the floating action button here on press, leave it empty for now and in the child const icon icons add. Like this, save it. Then in the main d file, remove this dummy homepage. That is the default one. Then I will remove these comments as well. I'm just writing it flutter notes. And here in the home. I will write the home page. Okay, save it. Now, I will start the Pixel five emulator. You can use emulator, or you can also connect your own real device because I know this Android studio is a big software and can lag your system as well. After this, simplli on run, start debugging. Will take time, wait for it. But we already know that our server, that is the back end is working perfectly. Just connecting it with the front end is relatively easy because most of the main logic was in the server side. It will be there. Then if I see this railway app, make sure you learn more about this railway platform because definitely it is very useful. You have so many things that is production, development, you can give environments as well. Because with practice, you will understand and make sure this start up plan has a limit. But obviously, when you are a beginner, you won't be able to exhaust this limit because this is just for the testing purpose. You can deploy it and show off your projects to the employers. It's up to you. Okay. So here I believe the server is working and see, we have the notes app. I will just remove this Debug banner. The show debug banners falls. Okay. So that's it for this video. S in the upcoming videos. Thank you. 14. Create Note model: In our app, we will be dealing with node data. It's very important to have a model for that. We use models to give a predefined structure to our data instead of just using it everywhere as station key value pairs. So Inside Lib, create a folder named models, and inside it create a new dot file Note dot dart. Now, we will create a model class for node. And this will have all the properties, which we have already defined in the Mongo DV Node schema, that is that JS file. Here, just start with string ID. String user ID string title sorry, i string title. String content Datet added create a constructor. Note That's right. This dot ID, this user ID, this title this content and this dot added. You can go to the node schema and just see that we have these properties there as well. Now, let's work on JCN serialization. Let's create punchon to convert JCN data coming from the database to this node object, as well as from this object to the JS format, which is understood by the server. So here simply right. Factory. Note that from map like this, we will be sending a map data, which will be string dynamic map then return a note object. Here we have to pass values ID map ID. So make sure these keys are same as in DV. That is, if you want to know I'm talking about these keys here. User ID title these keys. This is mentioned in our schema as well. I just don't want you to make any silly mistake here. User ID Map user ID. Title Map, this will be title. Content map. Content. Date added. Just remember, If we write date added like this, it won't work because this will be in string or equenc adjacent format, but we want date time format. We will write p. That is, we will pase it. We will parse this date to the datetime format, and try pase so that it will return null in case of exception instead of error. That is, if by mistake, the date is not there, then it will simply return null. It won't throw any exception or you can say stop our application. And as you can say, this is null label. At least we will be safe in that way. At least the app won't crash. In this way, data is converted from JCN to this object, and now create another function. That this will return a map of string, dynamic two map, and this will return a map. It will have ID as ID user ID as user ID title as title and then then date added. Now the date added, which we will send, will be in the date time format, but now we have to convert it again to the string format, which is understood by the database. So just write added and convert it to 2i86 01 string. So remember, we are again converting to string from date time. This is a simple concept. So this is our note data. Just save all. And before moving forward, I would like to I will first stop the application. And I will install some dependencies. We will be using provider as the state management in our application. The another package will be UUID to create unique IDs for our user. Then we need SDTP package to call the API. So either you can go to pub dot site and search them and paste it in the dependencies section in pups doML file, or you can in the command simply write letter. Pub add UUI you can just start with provider UUID and HTTP and presenter. So this will install everything. Let's see there is any error or not. In the pups dot Yamal file, you can see we have provider UUID and HTTP installed. So that's it for this video. Thank you. 15. Home Page UI: Hi. Let's run our application again. In this video, we will work on the home page UI. In this page, we will display all the notes of that user. Let's create a basic UI first. Here, we have the a bar, we have the floating action button. In the body, let's start with a safe area vigid. So that if there is any notch or anything related to the device, it will be in the safe zone. Then we will use grid view dot builder. So if you want, you can use list view. But here, since it's note, the grid view will look better. So here in the grid delegate, you have to write const sliver grid delegate with fix cross axis count like this. I know it's very confusing, but here simply write too. And this code simply means that in the screen. We will only have two elements in the horizontally. So you will see when we have this UR ready. Then as you know, in list, we also have the item count. Right now, I will just use a dummy count. There is five, then in the item builder. Write context and index. Here I will return container color will be colors dot blue for now and margin will be con edge in sets all five. And semicolon here. Restart or you can save it. And see. This is the grid view, and there are only two elements in the horizontal or in a row. So if you give three, then this will be up, but obviously it won't look good because it's a mobile device. It has a small Then this is just the UI. Now, obviously, we will need a page where user can add notes. Inside pages, create a new file, add new note to dart. Mp material, then create a state widget add new note. Okay. Here simply right give a scaffold. A bar. Leave it for now. In the body, have a safe area, and within the safe area, have a column. And children just leave it empty for now. Okay. Navigate to this add new notes page from the homepage. We have this floating action button in the homepage here. Simply write navigate of context, push material page route. Then in the builder, si context here and add new note. Okay. And I will simply gave a new property of it. There is full screen dialogue to two. So this is simply a property of the material page route. If you don't want, you can remove this as well. So what it does is, if I click on plus, then it has this cross instead of a back arrow. So it's like a full screen dialogue box instead of a page. That's the only thing this code does. We have the add new note screen as well. We will work on the UI in the next video. Thank you. 16. Add a Note UI: Let's work on the add new note page. So here we will need text fields for the user to enter the title and the note content and a button to save it. So first of all, I will start with having text Editing controller. I know there will be title controller. Controller is equal to tex thing controller. Another will be node controller. That is this will be the actual node. I have the controllers then In the body. Let's have a text field. Inside the column, the controller will be title controller. Decoration will be constant input decoration in text as title border as input border none. Then after the input decoration. Let's have some style. Style will be constant textile textile. Let's have the font size as. Won't as font pool. Okay. And then I want autofocus. Auto focus to ro. Let's save it. If I go and if I click on the ad, I can see autofocus is there and that title field is there. I will give some padding as well to the column. Wrap it with padding and here it will be symmetric horizontal 20 vertical ten. I will just save it and see. It is looking decent. This is a title, the next input field that is the next text field will be text fill text fill here. The controller will be note controller. Max lines. I will give it null so that user can press enter and go down that is he can have multiple lines and then styling styling will be constant textile on size is 20, then decoration con input decoration in text note border input border. Save it. Now, if I click on it, we have the title, we have the note. But if I click on note here, then only it's in focus. If I click anywhere in this remaining area, it is not in focus. To make it in such a way, we can just the second note with expanded. Expanded like this. And now, what happens is, if I go back and if I come to the screen again and click anywhere on the screen, now we have the note here because it is taking the whole space here. Because obviously, I want the title will be competively smaller than the note itself. And if I click on enter, then we have multiple lines. The only remaining thing is a safe button, which I will give in the app bar. Here, have actions then an icon button on press will be empty for now. And then icon will be const icon. Icons note add color colors dot green, size 30. Save it. So this icon will be in the top C. We have the save icon. Either he can just save it or go back. And make sure you dispose that editing controllers as well. Text editing controller dot dispose. Note controller dot dispose like this. That when we go back and come to the page again, there will be new instance of the controllers. So that's it for this UI. In the next video, we will work on creating a provider. Thank you. 17. Creating Notes Provider: Hi, welcome back. Now it's time to handle data. For that, we have to create provider for the new data. So inside Lip folder, create a new folder providers and inside it, create a new file. Notes provider dot dot. So Let's do it. First of all, import material so that we can use that change notifier provider, and then import models and then not tart. Okay. Okay. Now let's create a class note provider extends change notify provider. Then we will have a variable, which will consist list of all nodes Nodes equal to empty list for now. This year, we will fetch notes from APA later on. Right now we will just do it locally. Then create a function to add a note. It will accept a note and simply we will add that note in the variable. And then call notify listeners like this. It's a very simple provider. Then I hope you know that we have to register our provider in the main file. Here, wrap the material app with igd, and write provider. Then we have to mention providers. I have used multi providers because suppose in future you want to add some more providers and all, then you can do it. We will use change notifier provider then contacts, and our provider name is notes. Provider like this. Then just save it. And we start. Then let's create a function inside, add new note, where we will create a note model and send to the provider function. Here is simply write add new note. Now, first of all, we will check that title is there. I title controller, text Tm is empty, then we will show a snack p careful messenger of context, that show snag p, snag pow widget in the content, it's simply title cannot be empty. Like this, make it constant and from here simply return. I don't want the Billow code to execute. If the title is empty. Then if it is not empty, then I will create a note instance that is new note, is to note. And here I will pass the data ID. I will use the UUID package to create unique IDs to simply const UU ID like this version one. So it will create unique IDs like this. Then user ID, for now, I'm giving some static data. So suppose ajo lag val for now. This is just a dummy. Later on, we will use shared preferences. But right now, just test it. Title will be title controller dot text, and content will be note controller text and added will be d dot like this. This is our node model. After this, We will simply use the provider that is provided out of context. Here what provider we need. We need nodes Node provider. And then since this is outside the bill function, we will write Listen, is the falls because I don't want it to listen to any changes. Because if it was inside the build, then it can rebel itself. But obviously, this is inside a function, and I will call the add note and send the new note value like this. Then I will again show messenger of context show snag bar snack bar. And content will be note added successfully. And then I will let navigator do pop like this. And then call this function inside the icon button here. This one. Simply call a new note. So that's it for this video. In the next video, we will work. We will work on this home page no TY. Thank you. 18. Show Notes in Home page: Hi. So now we can add a new data. So let's work on the note UI, which is in the home page where we will show all the notes. Before that, I will just since the file name is notes provider, I will make it notes provider not note. And then here, it will be notes, and then here, it will be notes. That's it. It's It's not something very important, but it's like since the file name was notes provided. Let's go to home page here. Then first of all, I will write my provider. Here notes provider notes provider equal to provider of context, and it's notes provider. And I have to write it inside the bill. Like this. Then in the child of safe area here, I will first of all conditionally output a text if there is no note available. Here I will just write notes provider dot is empty. Then display const center. Centered child. And in the text, I will write no notes yet. Like this, that's it. So that the user notes that there is no notes available, and he can add it. Then in the grid view dot builder. The item count will be notes provider notes do n. Then in the item builder. First of all, I will have the note model, then write current note is equal to notes provider notes and the index. So obviously, it's grid view, individual nodes will be here. That is obviously from the zero to index to zero, one, two like this. Then In the container, remove the color blue here because this was just a dummy. Then the margin and below margin right give some padding cons all ten then give decoration box decoration border border all. Then he color of the border will be colors do gray, W two then inside box, decoration border radius border radius do circular, give it ten. Okay. Then the child of the container. We have to go outside the border box decoration, and then here, child will be a column. The cross axis alignment will be cross axis alignment do start. In the children, let's at the very top show that title title of the node. Current note title, and it is not null. Style constant textile. Font weight font weight dot bold font size 20. Then Max lines give it one, this is the property of that text, and then text overflow that is the overflow should be overflow dot eclipse. That simply means weight, I will show First of all see all the code here. So Max lines one, that is, I just want the title to be in one line. Suppose the title is very big, so I don't want it to be in two lines or three lines. Make it one line, and the remaining text will be eclipse Ellipses, sorry. That means dot dot dot like this. So it won't look very bad. Then after this text, give some size works and height seven. Then I have to write the description. The description again is a text gid current note content. It is not null, then textile here again, size, give it 18, color colors do gray, make it 700. These are just a stylings. Obviously, you can give your own styles to make it look good. Then after the style inside the text, again, write Max lines 24 here this time, and then overflow to overflow eps. Now let's test it H I have just saved everything. And now see, here are no notes yet. And I I write a new note, my first note and write. This is a dummy content. Let's make it big so that text overflow works and make it ellipses. I hope this works. And if I press save, then see node it successfully, then this is a dummy content and there is the ellipsis. And if I make it, Max lines to five. Let's see what happens? Okay. There is the overflow. At four. Okay. So this looks good. We have the title here in bold, we have the text. And remember, right now, this is not saving in the database. It is just in the local. So if I refresh it, that data will be gone. And right now, my focus is just to work on the provider. Later on, we will connect the API service with that provider. Now, obviously, we can add data. But we also have to create function to update and delete note as well. Go to the notes provided here and below add note, I will write void note. This will a ask for the node data. That is which node to be updated. And now, I have to update that value. First of all inside this notes list because this will be displayed to the user. I have to know the index of this note here in this list. I will write in index of note is equal to notes index of then element notes where wherever you find the element ID equal to the node which is being sent, then get the index. So what I mean by this is, it will loop through this note and check all the notes ID to this ID. And if it gets it, then here we will get the index that is supposed at position two. Then I will just write notes that is that list index of note and change it to our new updated note, and then write notify listeners. This is just a basic logic. We will get the index then and change that index value in this array to this new node variable. Similarly, we will do something for the delayed node function. I will get the index of this note and then simply write that notes list or A and then remove ad, and I will remove this index, and then notify listess. So this will update the UI. And I hope you understood that this update and delete is temporary since we are just doing it in the app level. So that's it. In the upcoming video, we will work we will create a screen for editing A note as well. Thank you. 19. Work on Edit Note page: Hi. Welcome back. In this video, we will work on editing a note. So what I want is when the user taps on any note, he will be sent to the edit page where he can update as well as delete death note. So for that inside pages, create a new file edit note do do. Copy and paste all the code from a new note. And after that, we will make some changes. Copy and paste it here, change the name of the widge that is dit note like this. Then since this will edit a note, we have to accept note data in the constructor. Here, I will write final note. Note and this will be a required parameter. So this note. And then I will assign the values of note to this text editing controller. Here in the in its state, I will write title controller text is equal to widget title and I know this is not null and similar t is equal to widget note not content. So I hope you understood that. Suppose there is this title, my first node, my first note. Then whenever we go to the edit page, it will already be filled inside the text field. And then after we can edit it. Now, we don't need this add new note function. Here, let's create a function to update a note. Vide Then if title controller text do trim is empty similarly like before. We won't allow it, so we will tc messenger of context that snag par. And text will be title cannot be empty, and we will return from here. This will be constant if everything is okay, what we'll do is whatever updated text we have. We will assign to the node, we have in constructor constructor so that we don't update the other fills. Other fills means ID, user ID date. These things are already inside this variable, right. In that way, we don't have to update that. Now just try to understand what I will do is widget dot title. I will change it to title controller dot text, And I don't need this then wig dot note do content is equal to note controller dot text. Then I will call provider of context then the notes provider listen will be false, and I call the update function and send the note which is in the constructor, but we have already updated it. And suppose the user doesn't change the content. Then also we don't have to worry about. Since in the constructor, we have put inside the text already which is which was already inside this variable. The same will be updated again. That's it. Then I will use this messages and just write title updated successfully. And then I will just write navigator dot POP this also will create a new button inside the app bar to delete it. First of all, These notes ad, we can make it. I will change the icon, they just check circle and assign it the function update note like this, okay? Above this button. I will create another button that is icon button. The icon will be con icon icons, do delay color colors red. In the on press, what I want is, I will simply call the provider function of context notes provided the delay note, and I will send widget dot note like this. And also, I don't want to listen to the changes because I just want to call this function. Then I need this caful and navigator dot pop. I will just write. And shouldn't be title. They should be note and be note deleted successfully. That's it. That's the whole thing. Now we have to navigate to this page from the home screen. So go to Home Screen. Inside the item builder. Here, wrap this container with an ink well and write on tap navigator of context, ph then material page route. I will send to the edit note page with the note value and the note value is the current note here. As before, I will write full screen dialogue. That's it. So save everything. Why this is in that grain. We don't want the UUID. Let's test it out. I would like my first note. I will write this is my old content. Save it that if I click on it, see, and this was the snack bar was before snack bar. If I click on it, we have a delete and the update. So I will just update it to. This is my new content, press save and say, this is my new content. If I click on it again and delete it then, no delete it successfully, and now it's swing no notes. So that means all the functionalities are working properly with provider in the app level. In the next video, we will finally integrate Mongo Db so that whatever data is coming in the application is coming from a real database. Thank you. 20. Function to Add Note: Hi. Welcome back. So until now, all the functionalities were working only in the app level. We were not storing any data in Mongo DV. So now it's time we integrate Mongo DB API as well. Here in the lift folder, create a new folder services and inside it, create a file API service dot like this. First of all, I need the HTTP package. I will give it as HTTP, then I need models Note model. Now, create a class API service. Here, the first thing we want is static variable. It is static constant string base URL. What is this base URL? That is the domain from railway App. Let's go and here in the railway app, we have the domain, this copy paste it here. But make sure to add HTTPS column here, and then the database, sorry, the database, the route. That is the nodes route. Since we have this route only, that's mentioned it in the baseRl. But obviously if you have multiple routes, you won't do this Now, create a function for adding a node. So I'm making it static so that we can call this function without creating an object. So it will be future wide. Name it add note. It will be sing function, and we'll pass the note model here. Now, the first thing we need is the URI, we write request URI, to URI I hope you know how to use the STP package. URI will be e the base URL. Use the base URL and add. This was our route. If you remember it in the server side, then I will write R response is to await HTTP for adding, we have to use the post request. Then we have to send the URL, that is the URI. And now we will send the body in map, and we will just write note the two map function. If you remember in the note, we have this two map, which will automatically convert it into a map. This is how these things come handle. I hope you understand this convert from object to map. Then we will have the response body, we will write the code is equal to JC the code, and then rese body. Re body. I will simply print the body he says for debo, else, we don't have to do it in production. Now, let's call this function in the note provider. After this notify listeners, call the Mongo D V, that is API service, the add note. That's it. Now, you might be thinking why I have written this line in the end. Because this will update the UI within seconds or instantly. And in the background, the same data will be sent to the database. So obviously, it will be a good experience to the user as well, because he won't have to wait because he will be able to see that note instantly in the home page. And if he comes back later on, so later on means, obviously, this will only take 5 seconds, but suppose a 10 minutes he again opens the app, then the notes in the home page will be fetched from the database, and all the notes will be same. Just remember, obviously, you can do it in the top also, but that doesn't make any sense. Now let's do it. Let's try to add a note. I'll write learn No chair. Mustard. There was some air for the keyboard, I believe. Let's see what happens. That's why I prefer most of the time physical devices. Node choose. D. We can save and see in the terminal new node created with ID this. So this is coming from the server. I hope you remember this was our response. So that means this is this is stored in the database. So that's it for this video. S in the next chapter. Thank you. 21. Functionality to Update and Delete: Hi. Welcome back. Similarly, like adding note. Let's create an API functionality to update note as well. Go to API service and below add note. Simply write tactic. Future. This will avoid as well. Date note, make it a sync. This will accept a note. And now, again, create the URI request URI is equal to URI dot p the base URI then the update. Then R response is to await TTP. This time, we have to use the put B in the server also we have given the put. Right here, we have to replace URI and body to note to map. Then similarly have this decoded send do body and send a string. For deleting, I will just copy this function, paste. This will be delete node. Are right here. It will be deleted. Your TP request will be delayed. And that's it. And remember, if you want, you can send a note object like this or as well as only the ID. It's up to you because from this map, the server will extract the ID by itself, or if you send just ID, then also it's fine. It's up to you. Let's call this function, go to notes provider, and similarly in the end, write API service date note and write API service not delay note like this and save it. That's what will happen if I go here and write Dummy updated and click on this. See. Note has been updated with ID, and Dummyd. That means it has been updated in the server. Remember, if you refresh it, then this data will be removed because we are not fetching notes right now. This is just in the app level. But at least you can see it is working. So our updating and deleting APA is also working. In the next video, we will write the functionality to fetch all notes and create a function that is to show everything here. Thank you. 22. Function to Fetch Notes: Hi. Welcome back. It's time we fetch all the nodes in the home screen so that if we restart app, then also the data can be seen. Create a new function in the APS service do file here. Let's write static future. And this will not return void. This will return list of node. We fetch nodes. And we will send the user ID here. Then we want the URI, so it's request URI e2ip base URI list. Remember, this is user ID. We have to send it in the URL only because it will be GT request. We R response is equal to a TPG then request URI, like this. We don't have to send anything else. Then write list decoded is to Json decode response to that body. We know that it will be a list. And then just return decoded dot map. I will convert all the nodes to the node object. Note from map, we have to send the note and this is to mis. You have to know JC serialization for these things. So I hope these are the concepts of flutter. But just understand that we are converting the map to a note object and returning it. Then we have to create a new function in the provider class as well to call this fetch notes. Go to notes provider here. And let's First of all, I will have a boolean variable so that the home screen shows a loading indicator. If it is switching, then I will avoid patch nodes a sync. It will be list of note wedged notes the await API service do fetch notes. Right now, I will the user ID. Then that data will be coming in ascending order since I have not mentioned anything in the server site. So what I will do is, I will just write nodes is equal to fetch nodes dot reversed dot two list. So I just reversed everything inside it and then convert into list again and assign that to our this nodes viable. So that it can be seen to the front end. Remember, if you don't write this line, then also it will work, but it will be in ascending order. So the latest notes won't be at the top. You can try. Then I will add ease loading is equal to false and notify listeners. And I will call this patch fun nodes in the constructor of this Nodes provider. So when its instance is called, it will call this nodes function, and us our home screen will be populated with the latest nodes data. Now finally, go to homescreen, here, in the body. I will simply write notes provided if it is loading, then so const center child circular progress indicator. That's it. Now, let's see. Circular progress indicator is there. Yeah. See, we have this note, which is coming from the database. So if I refresh it again, then also this note is there. So that means our API is also working perfectly. Our front end and back end are now connected. So the last thing we will do is in the next video, we will use shared preferences to store the user ID. So here right now in the In the API survey. Sorry, in the notes provider. I'm hard coding the user ID, which is not good because obviously, different people have different user ID. So in the next video, we will create a unique user ID and store it in the user's device and use it to for the CRD operations. Thank you. 23. Function to store userid: Hi. Welcome back. So until now we were using dummy user IDs. Let's use a offline data storage such as shared preferences to save the user ID created by UUID locally. And remember, we can only store int, string, double and boolean values in the form of key values. Inside shared preferences. I believe you cannot store complex data models. P, you have to use. Hi can store it, I know, but shared preferences, I'm not sure. Now stop your letter application and in the terminal, simply write letter P shared pre per. It is installing. So if I go here in the pub sec dot, I can see the shared preferences, okay? Now, let's create a new function, which will return a unique ID for the user ID. So in the notes provided, let's here, create a new function, which will return string, get user ID. A sync. Okay. First of all, we will create an instance references flaps, a shared preferences do get instance like this. Then I will create in a level string, which will write user ID is equal to perhaps get string. So first of all, I will try to get the user ID from the device. That is if the user the user may not be a new user, that is he might be using a application, so the user ID will be stored. Now, I will check if user ID is equal to null, that is, it is a new user, then I will create that key that is set string, then write the key user ID, and value here will be the UUID V four. It will create a unique ID for us, and I will assign this ID to the key. Sorry wait. I will explain you. I know you might be getting a little bit confused. And finally, I will return user ID. And which is not null, I know because here we are storing if it is null, and if it is not null, then we are just returning the user ID directly. Again, I'm explaining, first, we will create an instance of shared preference. Then we will check if there already exists a key of user ID. If it is not if it is null, then we will create a key for this user ID in the shared preference and save a new unique ID inside it. And then I will assign that value to this variable and return it in the end. So that means this function will anyhow return a user ID. Then I will call this function inside here, that is string, user ID is equal to await get user ID like this, and I will send this user ID to this function. Okay. Everything else is good. Then now we have to make the user ID stored in the Now we have the user ID stored in the shared preferences. We have to make sure that we send that user ID while adding a new note as well. Go to this page here. We are sending a hd. I will just write again final s is equal to a weight shared references that get instance. And since we are using a weight, we have to make it a sync. Then I will just write string user ID to perhaps get string, and the st name is user ID. The key name is user ID. Here we will get that user ID, and I will send it here. A. That's it. That's the only change required. So obviously, we are not using any kind of authentication here. I will make some other cores on it. Right now, this course is solely dedicated to crud operations and how to use no GS back and for beginners. There are a lot of things you can do it where at least now you are comfortable with the basics. So I hope you have enjoyed. In the next video, I will test the complete application since everything else is done. Thank you. 24. Test the Complete Application: Hi. Welcome to the final video of this course. In this course, we will simply test the complete working of the application. So before moving forward, let's delete all the previous records from the database because those had dummy user IDs. So I'll just delete all these things. Okay. So I guess I have deleted everything. Let's run our application. Okay. Obviously, we don't have any notes at this moment. So I will create. And here I will learn platform development and save it. See note added successfully. I will add another note. No back end, I will simply write master red operation using Mongo. I have another two, and finally, I will write exercise Daily eight work out and code. Okay. I have three notes. And if I started, So right now, so I have three nodes. And then if I try to update this one. And only learn nod JS. Using Mongo DB and flutter. If I just update it, then see. We have the learn nods and here we have flutter. And if I restart it again, then let's see. We have the same data. That is why I I call this database function in the end after notify listeners because obviously, the user experience is very good here. The user doesn't have to wait for storing the data. He can just see it in his UI. And now if I delete this one as well, then see No delete it successfully. We have now only two notes, and if I restarted, Then only two notes is being fetched. So I'm glad that the app is working plowlessly. And we have learned a lot in this course. Obviously, everything was for the beginner's level. But if you know the basics, then obviously in future, you can work on complex projects as well. So I hope you have enjoyed. Do check out my other courses as well. Thank you. Have a nice day and keep practicing.