Building a Note-Taking Android App with Jetpack Compose using CRUD Operations - Full Guide

hello everyone today we will create no tab so let's see what we can do let's say we want a note and let's pass the content PPP and let's uh let's say we don't want to have the content anymore and just saved it as it is and we can also delete the note so let's start by deleting these things from the main activity and let's create the first package called data and the second one called domain domain package contains the business logic and here we will have the repositories the models and in the data we manage the data so this will contain the repository implementation the database the network requests if you have so let's start by creating a package called local and inside of it we will create an entity package and let's create the node entity I'll take this with entity and let's say the primary key is um an ID of rollable integer we will have the title I forgot the comma and the contents now let's create another package called Dao and instead of it we will have the note down and this is an interface annotated with download and this stands for data access object and this will perform the crude operations on our database and crude stands for create a replace update and delete and the first function will be the one that will get all the nodes and get all nodes let's delete the suspend because we don't need this because we are returning a flow of type list of node entity and we need to annotate this with a query and this will say select everything from node entity and now we need to get get node by ID and we pass the ID and this will be returning on node entity and this will be a suspend function and now we need to enter this with um I'll make it on multiple lines and let's say select everything from node entity where ID equals the ID that we passed in the function now we need to create another suspend function that will insert node insert node and we pass the note entity and this can be nullable so all right let's put the question marks and now we need to annotate this with insert and on conflict are conflict strategy dot replace or let's create a suspend function that will delete our node entity that's already this way to delete and the last function we need is to update the node hang down to this with update now let's create another file in the local package called node database and this is an abstract class annotated with database and here we need to press the version version 1 and the entities we only have the node entity class and we need to create an abstract value that will be our dial notes oops note that on and we also need to create a companion object that will have our database name so name equals um node DB now let's go to The Domain package and create another package called model and inside of it we will create the node and this will have the same arguments so wall ID of type or notable integer the default is null now we have the title default is an empty string and the content as well maybe you are wondering why I'm doing this and I'm doing this because the UI layer cannot access directly the data layer and it can access only the domain layers so the node it's basically a class that can be assessed by the UI layer instead of using the note entity directly now let's create another package called Repository and this will have the functions that we have in the dial so node Repository and this is an interface node Repository and let's write the functions and get all notes and this will be returning a flow of type not a list of node in Notes From The Domain suspend function get note by ID and pass the ID and the result will return on nullable node system function insert node node let's duplicate this and say delete node and update node now let's go back to the data and create another package called repository and here we will Define the repository implementation so node repository implementation and this will inherit from the node repository and let's implement the members and we also need the dial in our Constructor and now let's implement the get all nodes so tell that get all nodes dot map nodes and nodes dot map and we need to convert the node entity to our node so we need to create another package called mapper let's collapse the local and create on Note mapper file and this will contain the node entity dot as external model and we it will return on Note and it's a note with the parameters from the note entity and node Dot to entity oops entity and it will return an authenticity equals node entity and we do the same thing so I'm copying the r parameters and now we can can go back to the Note 3 poster implementation and say sorry as external model now we can oh I forgot to say return now we can access the dial get node by deep as the ID and say uh question mark as external model and return the result now let's insert the node insert node pass the note dot to entity and Dot delete node node.2 entity and the last function is the update so dial dot update and update node node.2 entity now we can create another package called the eye and this will contain the dependency injection and let's say app module and I'm going to take this with the module install in oops Singleton component class and we need to provide something so provides a Singleton and fund provide note database a note a database and I need the application context context okay and let's say equals no room Dot database Builder we pass the context .node database Cloud oh class and node database dot name and uh dot builds and all right something wrong here oh I forgot to okay I forgot to inherit from the room database and I think it's okay and and I need to say dot Java and the last thing we need to provide oops provides Singleton font provide note Repository and uh we need to pass the database as a parameter database and we will return a node Repository and this will be an ultra poster implementation and we need to pass the dial that we will get from the database and now we need to set up dagger Hills so create an application class um node application and in here from the application and downloaded this with here Android app we need to go to the main activity and down to this with Android entry point and the last thing we need to do is to go to the Manifest file and say name is the multiplication now let's go to the UI package and collect the theme and create a package called screen and let's create the package called note list and inside of it we will create the note list view model oops for your model and this is a class and it inherits from the real model annotate this with hilt viewmodel and let's say inject Constructor and we will inject the Repository and now we need to create the note list and this is the repository dot gets all notes dot state in the scope is the view model scope started is sharing started while subscribed and this will listen when it will get the first value and the last thing we need to do is to say that initial value is an empty list and now we can create a doll without list screen and this is a file that will have a note list oops note list screen composable and let's say scaffold and opting for the scaffold we get the padding and let's create a lazy column and this will have an icon that's the header so text notes and make this on title material team dot typography title large let's form the code and let's also create the items but we need to pass the list for so note notes list and this is a list of node and now we can say items and get the one that says list note list and gets the note and now let's create a list item remove the material 3 import and the headline text is down title of the notes or node.stata oops title another content and we will have the supporting text and this is the note dot content and on Max lines is let's say 2 and overflow text overflow ellipses and this will display the dots and when it it will overflow and let's make the title a little bit bigger so style material theme typography and let's say title medium and that's from the code now we need to add the padding to the lazy column so padding values and let's add the start 20 DB let's import the DP and this 20 DP top is equal to 15 DP plus padding calculate top padding and bottom is 15 DP plus padding calculate bottom padding now we need to add the all node click function and we need to press the node and let's um add this to the list item so modifier equals modifier clickable on click is equal to on Note click um way all right okay um it's equal to on node click and we pass the note and let's format the code a little now let's create the Note screen note and let's create the note State and this we use a data class and this will have the ID which is our notable one the title and the the script contents or the description string now let's create the note event sealed interface and this will have a data class that says title change and we pass on your value and this will be a string note your hand let's duplicate this and say description content or description and an object that says on Save and note event and one that says navigate back and it's okay it's a node events too now let's create the view model and it's called node view model and this in here is from the viewmodel plus and it's a Field view model and let's say inject Constructor and it's a private value we want to know the repository that is the node repository now let's create a private value that is our state mutable State flow node State and we are doing this because we don't want the IUI to access directly the state and change it and we will have a state value that is accessed by UI so as state flow and we also need to create another value that is an event but we need to create a class for this so let's go to the UI package and create on YouTube package and this will contain the UI event sealed interface and this will have the object another object in your data class that says navigate and pass the route and it's an UI event and uh navigate oops navigate back and now we can go back to the note of your model and say private Val on event a channel try y event and through this channel we will listen to the events and we will trigger UI events so let's say Val event equals event as well receive as flow and now create a function called on event and this will be on no defense not on UI events and let's say one event and let's let's add the remaining branches and let's say the content change is state DOT update it dot copy content equals event dot value the the title is state DOT update it dot copy title is equal to the event dot value now let's create a helper function it will send an event and let's pass the event of type UI event let's open the block and say view model scope because it's a suspending function and let's say underscore event dot send and pass the event and now we can call it in the navigate back so send event navigate backup now let's implement the save function and this will check if state DOT value ID is null will um insert a repository dot insert node and let's create the node note is ID equals um let's separate the state and create another value so while State equals do not say that value every time so state DOT ID state DOT ID on title say dot title and content equals data dot content and we need to wrap the whole thing in review model scope because we are launching some suspend functions so let's say on let's add the else block that says repository Dot update node and um will update the current node so note equal note and we pass the ID state DOT ID and from the other things so State the title and content State content let's also create a separate variable fold for this because we're just repeating so note equals note and pass the note here note and let's also add the note here now let's go back to the event because I forgot to say object delete note and it will inherit from the note event and let's also implement this events so this will say repository Dot delete node and let's copy the node from here and let's also wrap this with view model scope and let's move this up and let's also copy the state from here and pass the node to the delete function I forgot to say that after these things we need to navigate back so node UI event navigate back and also navigate back from the delete and let's go to the node and create another class a file called Note screen and this will be an old screen composable let's create a scaffold and get the padding from it and opt-in for this and say column and let's say modifier dot film exercise import the modifier and let's also say padding pass the padding from the scaffold and let's add some extra horizontal oops horizontal padding a 20 DP and some vertical padding vertical equals 15 DB now let's create two outline text Fields Out Lines text field and let's pass the state so State node State on event and pass the note event unit and now let's say the value is Theta Dot title and on value changes on event note event dot title change and pass the new value now we can also copy this and say state DOT content and content change let's add the button let's add a box first box that will fill the hole with and it will say content alignment alignment Dot Center and button and let's say text save and this will be on event no defense dot save and let's also say that modify equals modifier or Kill Max suite and this will occupy half of the screen and the last thing we need to do is to create the top bar so top bar Center align top bar and let's say on Navigation icon it's an icon button our icon oops icon icons dot rounded dot navigate oops Arrow back and the content description will be Navigators navigate back Let's uh put this on argument I'll put this on separate lines and let's say don't click is on event note event oops event Dot navigate back and we need an action oops and this will be our delete button so icon icons dot rounded dot delete and let's say content description is delete put this on separate lines and let's r say the on click is on event note event dot delete oops delete note and the last thing we need to do is to go to the main activity and create our nav controller and remember nav controller this will help us to navigate through the screens screens let's create a nav host nav host and pass the nav controller and start destination destination and this is an empty string for now and let's go to the YouTube package and create a an object that says route and we have the note list and a note note and we need to say ID equals ID now we need to go back to the node view model because I forgot something oh this should be private and we need the private wall Save State handle and this will give us dollar a the ID from the route so say statehandle dot get a string and this is the ID and let's say ID equals 8.2 int and we need to call the repository dot get node by ID and pass the ID let's also check if he's not null and we need to open a block so we model scope will launch and let's say a note and let's update the state with the new node so State update um it's a DOT copy and say title is equal to note dots title the ID is equal to note dot ID and the last thing we need is the content which is equal to node.content and let's replace this with on screen State because we are already using the it so let's say screen state DOT copy and now let's go back to the main activity and set up the first screen pass the route so route Dot note list and open the block let's get the view model by saying view model equals equals heal to view model and this will give us the novels of your model and not least of your model and let's say node list is equal to the model Dot note list um collect as statewidth life cycle and let's replace the equals width by and now we need to say node list screen and past a note list and let's format the code and open our block here and let's say nav controller that dot navigate and let's say route dot note dot replace and now we will replace the ID that is in cardio braces with the it's dot ID dot to string now I remember that I forgot to say that the not least screen scaffold has a floating action button loading action button and oops this will need the function on um add node click and this is our unit function and let's replace don't click with on add note click and let's add an icon icons.rounded dot add and the content description is add note and let's put this on separate lines and go back to the main activity and let's add the on add a note click nav controller dot navigate to Route Dot note let's also replace the start destination with a note list and put this on separate lines and we need to create the node screen so route equals route dot note now let's get the models of your model is equal to Shield of your model but it's the Note review model this time we need to get the state and this is the oh let's replace this with by viewmodel dot state DOT collect a Statewide lifecycle now let's open on launch defect block because we need to listen to the events that are sended by our Channel channels so let's save your model Dot event dot collect and let's get the event and when event on the event is um navigate back oops not that navigate back navigate me back we need to say navcontroller.pop backstack and else we don't do anything and the last thing we need to do is to say that note screen is it needs the state and the on event that we can pass with these double dots and space the uneven function and let's format the code put these are separate lines and let's try to run the app and see if it works I forgot to add the placeholders for the text Fields so let's say placeholder equals text title and let's copy the placeholder and paste it here for the content and let's also add some vertical spacing so Arrangement dot spaced by 10db and let's run the app and see how it looks let's try to add a note let's say test 1 and let's just save it and after that we will update it and let's say content is test content this works fine and let's also delete the note okay everything works so if you like this video follow me for more content like this and I also have a Blog on which I post extra content and see you next time [Music] thank you foreign [Music]

Channel: Daniel Atitienei

Views: 2,989

Keywords: Jetpack Compose, Kotlin, Android, CRUD, JetPack, Android Studio, Developer, Programming, Programmer, Android Dev, Android Developer, Note app, Compose

Id: VQMnFW2RzCE

Length: 33min 50sec (2030 seconds)

Published: Fri Mar 24 2023