Architecting your Compose UI | Let's implement & learn | Jetpack Compose Series

hello everyone welcome to Native mobile weights in today's video I am going to explain you about jetpack compose recommended architecture so as we are starting our development in Jetpack compose this is the basic architecture which we can follow inside our applications we should divide our application in at least two layers one will be UI layer and another one will be data layer one application can contain only two thing UI and some data so if you are following this series and you have seen the previous video you know that we have developed these screens inside our previous videos right now these screens can have two things one we have these composable and this design another one is user can fill in some data right so our application will be divided in these two layers so in simple terms UI layer will be responsible to display the screen on user's device if we have some specific layout or if we have some specific design that will be handled with the help of UI layer okay and data layer will be responsible to keep our applications data and the UI layer will be made of these two things UI components and UI State now UI components as you are familiar that we have developed our own composables those composables will be called UI components now if you are wondering that what is UI state so let me take you to this screen and here I will explain you what is UI state so these are UI components which are our composables now user can fill in the data user can fill in the email at any given time so that time our UI state will have only email The Next Movement when user fill in the password as well our UI state will have both of these things email and password so you can understand that UI state is like whatever the data is entered inside these composables right or whatever the data these composables are holding at a given point of time that will be called the current UI State okay now the second layer our data layer this will have some kind of view model or some kind of class where we will store this current UI State okay one simple screen inside a jetpack compose application will have some composables those composables will be called UI components now user can fill in some data inside these composables that data at a given point of time will be called a current UI State consider it like this you have one glass and at a given point of time if you are filling some water inside that glass so that glass can be half empty or full with the water so that is like the state of the glass so we can say that at a given point of time glass is half empty that is the current state of that glass okay similar way whatever the data user will enter here at a given point of time that will be called a UI state for this UI layer and inside our data layer we can store the current UI state so our composables we will keep as independent as possible and if we want to validate the data entered by user we can do so with the help of our data layer separately so this is one very simple architecture we can follow and don't worry I will show you in code that how we can achieve this and then you will be able to understand it completely okay so let's start today's video and we are going to follow the proper production practices from today onwards so we will be following GitHub practices as well while we are developing any feature inside our application okay so as we are going to implement some base architecture so we are going to create one new branch okay and we will call this as and there are many naming conventions to name your GitHub Branch we can follow with the help of username slash feature name okay so we'll just write Sachin slash architecture okay this will be our basic Branch we'll code here and then we will raise a pull request to our Master branch and if you are not very sure about git how we can use git via our Android Studio itself you can check out this video get for Android developers and you will be able to use GitHub from terminal and it will be very helpful for you because I highly recommend that you use GitHub via Android Studio terminal itself okay so the first thing first we need one data layer right so for that we need to use viewmodel and to use viewmodel we need to add the dependency first okay so we'll go to the build.gradle and inside build.gradle we will add the view model dependency to use viewmodel we are going to use this dependency okay and as we are using kotlin DSL we will just add it like this okay now we are going to sync this project and once our project is synced we are ready to use viewmodel inside our project and now to create a view model first of all we will create one data package okay this will be representing our data layer and inside this we can create one class and let's say we call it as login view model okay we will add one empty Constructor and then this will be our view modal class here we can add all the data related to our UI layer okay and let's see our application okay so now we need to create one UI state for this screen okay so we will just go to our data package and we will just create one kotlin file we will name it as registration UI state okay this will be one normal data class and and inside this we will add the fields we need inside our registration UI state so inside our data class we can add all of these fields okay so let's start one by one first name okay this will be of type string and initial value is empty then we can just take last name we can use the same is it will also be of string type another one will be of email of same string type and then we will have one for password this will be also of string type okay this is our registration UI State as of from okay now we need to hold this inside our view model now we have our registration UI state which has all of the field this screen has so whatever the data user will input here we can hold inside this UI state now we need to add this UI State inside our data layer so that we need to add this inside our login view model okay here we will create one variable registration UI State okay and this will be of mutable state of registration UI state okay now one another thing we know that user can take some predefined actions inside this screen right so these actions are called UI event if user perform any action inside this UI that will be called as a UI event so if user enter first name that will be a UI event if user enter email or password that will also be a UI event or if user click on any of this button that will also be a UI event okay so for all of these actions which user can perform we are going to Define this UI event okay so as there can be some predefined number of UI event only we know that there is a limited set of events so we can use sealed class we will create one kotlin sealed class we will call it as UI event ok now inside this UI event we can Define all of the events which user can perform okay so let's create one data class because if user perform one action and user enter first name so we will hold this data first name data inside this event class okay so we will write it like first name change if user perform any action inside this outline text field means if user try to enter something so this first name change this event will be triggered and we will have the data which user entered so let's say first name string and this will be of type UI event okay and let's add variable here okay now if user enter last name this will also be one event so we can Define one data class for this as well last name changed and here also we can have one variable last name String this will be also of type UI event okay we can Define one more UI event data class for this email so we can create email changed we can Define one variable email of a string type and this will be of UI event itself we can create one data class similarly for password field it will also hold one variable password okay of type string and this will also be of type UI event so basically this is how we Define a sealed class it has some predefined actions which we called as UI event okay so if user perform anything inside this first name text field this event will be triggered okay we will update this inside our view model so that our logic will be separated from our composables you will see that shortly so now we have these four UI event okay so let's go to our view model in viewmodel we will write one function on event basically if user perform any event inside this UI screen so we will call this function from our UI layer okay so we will write this and this will take one parameter event of UI event type okay and inside this we will write one when condition because there will be multiple use cases for these different different events so we are defining this van expression it will take input as the given event now here we need to Define logic for every event taken by user so let's take the first event and let's write condition that if event is UI event DOT first name change then what we are going to do inside this so when user enters a first name we will update the value inside our registration UI State okay to update our UI State we will just take reference with the help of value and we'll just update this value with the help of this copy function we'll just use this named parameter and we will pass the value with the help of this UI event and here we will pass event DOT first name okay because this UI event has this first name parameter inside this data class so whenever our UI event is off this first name change type we will get the first name with the help of this event okay now for other events we will Define similarly dot last name changed and when user change the last name we will update the same inside our registration State okay we will do the same thing dot value dot copy and we'll update the last name with event dot class name okay same thing we need to do for UI event dot email changed if user enter email we need to update our UI State value similar way dot copy email and we will just take this from our event for password also we need to update the registration State okay so we can just take this and we need to update password event will be having the password value okay so you understood right this is our sealed class and all of these events are having the respective value if user took any action and entered the first name this event will be triggered this event will have the value as well entered by user and inside our own event function we will just update the value entered by user inside our registration UI State okay now we have our different different events and we have the respective logic as well so we will just go inside our sign up screen and we will start writing the logic to update our registration UI state so as of now we don't have any callback here that if user enter any first name or any other value so that we get a callback here okay to get a callback we can update our component little bit we can just add one high order function own text changed a string of unit okay so basically whenever our text is changed we will just pass a string as a callback inside our screen okay so now we have this owned exchange but we will update the value as well whenever user is updating the value right so whenever user enters the value we come inside this own value change function so we will just update the value here as well won't exchange and we will just pass this value it so now whenever user enter anything inside this first name now whenever user enter anything own value change will trigger and inside this our function high order function will also get triggered won't text selected and it will also take the value which is entered by user and then we can get the callback for this inside our screens right so inside our my text field component now we can add own text selected as well okay so now whenever user enter a first name or any value inside any text field we will get a call back here okay so first of all let's add the same callback inside all of these text field okay inside our email as well own text selected all right now we are getting the callback for all of these values we need to add the same thing inside our password text field component as well so we can just take this and inside own value change we can just pass the value whatever is entered by user and then we will be able to access inside a screen okay here also won't take selected callback will be present now okay now every text field has one callback whenever user enters anything in any of these text field we will get one callback okay now we are at a stage that if user is entering anything we are getting one callback now our composable should be able to tell viewmodel that viewmodel please listen to me user has entered some value please update the UI State view model has this UI state right our composables has the data now these composables want to pass the data to view model okay so first of all we need to take reference of the slogan view model inside our sign up screen so inside our composable we can just use this and we can initialize it with view model okay this is basically one composable and this will just create the respective view model for us okay now we have one reference for our view model so whenever user is entering any text let's update the value of our state which is inside login view model okay so to do that we need to call this function own event and we need to pass the respective event performed by user okay so to do that we will just come to this my text field component and here we will use login view model reference and we'll call this function one event and inside this we will pass this event first name change okay and we will pass the value which is coming from this function it okay same thing we need to do for other fields as well we'll pass UI event dot last name change and the value we will just take the same thing for email as well we will just use login view model dot on event UI event dot email change and we will pass the value we will take the same thing for password as well okay password change now we are passing the value to our UI state for all of these text field okay we are passing it now let's go back to our view model and let's add one log so that you people can understand very easily that what data we are getting inside our state okay so let's say print state this is when temporary function I am adding and inside this function let's add one loop with the help of tag okay so we can just Define one tag here okay and we will just use this inside our log and we are going to write inside print state we'll use another log and we will just take the data out of this node value node to a string let's see what it will print okay so we will print this function every time any event is happening right so if first name is changing after the value we update inside our state we will just print this okay inside last name change as well when we updated our state value we'll just print the state okay we are doing the same thing for each event okay now let's run our application and then we will see that is it working as of now or not are we updating our state correctly and are we getting the value as well so now let's try to enter some data inside our device so we are entering Harry Potter so the moment we start entering the data our state started getting the updated value first we enter only one letter so our state also updated the same time and so on our state is updating and having the latest data now let's enter last name as well okay now our state has two things first name and last name okay let's enter one email as well Harry at Hogwarts dot com so now our state has three things first name last name and email if we enter password as well now we have all the data okay now let's try to Define some more events if we click on these buttons and all right and let me commit these changes for now so we have added data layer so I'm just committing implemented data layer with UI events and view model okay and I am going to push this to this branch okay do we have any other file okay we have updated our components as well updated text field component with callback when user enters some text okay and then I have used this in login and sign up screen as well so we'll commit this as well using view model to update registration UI State okay and everything will be pushed to master okay now we need to add one event if we click on this registration button okay so for this we'll just go to UI event class as we don't want to pass any data inside this so this will just use as object why we don't want to pass data because all of this data we already have inside view model in UI State okay so here we are just using object register button clicked this one and this will be of type UI event again okay now we will take this inside login view model we will just add is UI event dot register button clicked that means if this button is clicked inside this we will add one logic to validate the conditions okay so let's say inside this we just write one function sign up okay and this function will also have one validation check okay but for now let's just use one log statement inside this okay so we'll just write inside sign up okay and inside sign up we will also print the current state okay so let's just run our application and we will see that if our sign up event is also working fine okay our application is installed now let's just enter some data search in and we'll just go to the last name rajput and we'll just enter one email okay and I will just enter password as well okay and then we'll just go to locate we'll clear everything and let's click on this register button okay so we are not getting any call back when we click on this register button that's because we don't have any callback here and we are not updating our view model State okay we are not passing this one event function when we click on this button so for that first of all we need to pass one callback inside this we will just add one high order function let's say own button clicked and this will not return any value and it will be of type unit okay so we'll just take this and inside own click which is actually this button callback for click event we'll just use own button clicked dot invoke okay means whenever this button will be clicked we are just passing this high order function and now inside our sign up screen we can just use this to get the Callback own button clicked okay so we will be coming inside this one button clicked whenever we click this register button here we can use our login view model and we can just use own event function here we can use this on event function and we need to just pass this registration button clicked okay so we can just pass UI event Dot registration button clicked now let's run our application and this time we will get our callback okay now let's run our application and now we will be able to get the Callback hopefully let's see okay let's clear everything our application is installed and let's enter some value wrong and for last name we will add Weasley for email we will add rowanite Hogwarts .com and for password let's enter one two three four okay and then we'll click on this register button okay so before that we are having all the data inside our registration UI State we have name email and password let's clear this and let's click on register button okay the moment we clicked on register button okay so we came inside this event okay we triggered this method and then this log is printed inside sign up and then we are printing the state okay so inside print State we are having all the value okay and we have clicked our button and we have the data from our state this way we can Implement UI State and UI events inside our jetpack compose applications and we can divide our jetpack compose applications in these two layers UI and data layer this is very important and helpful because if we are using this technique we are making our composable stateless is stateless means our composables are only responsible to show the UI layer on mobile devices and then our data layer is responsible to deal with all the data related operations okay so composables are stateless and that is the best thing in Jetpack compose we can do for our jetpack compose application scalability so that's it for today's video I hope you enjoy this part and if you enjoy this please like share and subscribe to my channel also please share this video with your friends who are learning Android or jetpack compose and I will see you very soon with the next part where we will learn a lot of amazing things stay tuned be happy [Music] thank you

Channel: Native Mobile Bits

Views: 5,481

Keywords: JetpackComposeTutorial, AndroidAppDevelopment, UIProgramming, AndroidUIUX, AppDevelopmentTutorial, AndroidStudio, AndroidJetpack, jetpack compose, jetpack compose tutorial, compose, jetpack compose mvvm, Kotlin, architecture in android jetpack compose, NativeMobileBits, Architecting your Compose UI, Jetpack Compose Series, Android tutorials for beginners

Id: peSfaIhKgfw

Length: 27min 38sec (1658 seconds)

Published: Mon May 15 2023