API Calling Using Retrofit With Jetpack Compose (MVVM) For Beginners

hello guys welcome back so in this video here we are going to create this simple application here where we are going to fetch the data from an api and then we are going to display the image and the name of the actor and also the really name of this actor so this one's going to be just a simple beginner tutorial so without further ado let's get started okay now before we begin here to start our coding we can just come here to build it greater and you can see here there are several dependencies which i have added here so you can just go to the link in the description box below and go to the github page and copy these dependencies and you're good to go now also before we start here let's jump to the website where we are going to get this data and familiarize ourselves with the endpoints and the url which we can use them to retrieve this data so this is the website here and you can see this one is going to be hp api.herogoapp.com so you can just navigate to this website here and you can just get this and here we have a list of several endpoints which we can just retrieve different data and the creator is saying that is not going to be updating this api but we can try to use it for different purposes like learning so for now here as you can see here we have the characters we have students and for our case we are going just to focus on these characters here so we can just light click here and we can open this inside a new tab here and as you can see here we have the data so if you're just getting this raw data here you can just open up here and search for json viewer online and you can copy this and paste them and you can just get something which is going to be neat like this one here so here we have an array so for example if you see here when you see these brackets here these opening brackets here this means an are inside a json and when you see this curly braces this means that we are going to have an object and this object has several parameters so for our case here so if you open here our first item inside the array which is an object and this object contains so for example in kotlin this could be a data class and here we have several properties which are going to be used to access them and as you can see here we have other curly braces which represents another object inside this object here and this one represent the array so we can just come here to this raw data here and we can copy this until to this place here because we just want this one object here so that we can transform them so i'm going to show you inside android studio how you can easily transform as you can see here we have a lot of data and just creating these classes and other things could be difficult so for example if you have a lot of classes to create so there is just a simple plugin which you can use to pass in the json and convert it back to a data class which can be easily used so let's jump inside android studio and show you how you can do this okay now so that we can bring that data class and change from the json to this curtain classes we can just come here and we can press ctrl alt s here in order to go to the plugins so if you're not just directly here you can just locate this plugin here and select this and you can come here and search for json and as you can see we have this json to kotlin class and you can just install this so it's going to download this and after that it's going to install it okay now after installing this now we can create our data classes and first and foremost here we can create several packets so that we can organize our code so here we're going to create a data class so here we're going to put inside here our data and here we can create our api package and inside here api package we can create another package here and we can call this data we can call this model so here we are going to just get our models and we can create a new coding class and you can just you're going to get this code in data class file from json so we can do this and we can paste here our code and as you can see here you can just navigate here to advanced and we are going to change this and we can come here to annotation and from here it's just selecting none so we can select this mochi code gene and then it's going to generate the code for us and here we have to provide the name of this so here we are going just to call this character let's click here generate and as you can see here it has generated two data classes so we can just open up here and as you can see inside here now we have the character and this has generated a lot of things for us so as you can see here we are going to use moshi for passing the data from the json directly to here cutting classes so for our case here we have the data classes which is a character so we are getting here from the json object and then the motion converter is going to convert this to what kotlin can easily understand and for this case is the data class as you can see it's going to generate the adapter and when you see this we are going to pass in here at json and here we are passing a name so there is different ways which json names the their objective properties and it's just different from kotlin so as you can see here the server is going to send up the alternate and then here we have this slash here then we have actors and as you can see here the alternate colors we have the naming convection for cotton this must be a capital letter so in order to change this we can use this as json name and the adapter is going to change up and match this to what we we we need and for that case here now we have our json and when you come here it has generated another class which is going to be a one class here if you want to use it you can just get it and also it generates an adapter okay now here we can just come and as you can see here it is just returning a list of any because this one is going to be empty but the server is going to return here string so we can change this to string so sometimes you have to double check your data because this object or this plugin is going to just generate these classes and you can get weird crashes so here we are just going to return alternate alternate names from a list of strings okay now we can change here the length from inch and this one must be a string because the server is going to return a string and you can find the documentation for example inside the website which provide this they will tell you the values so and their data types and other things okay now i think we have finished to create here our models from the api now for now here we can create another data class here another class which we can use it to store our constants and as you can see here i want to change the view of these packages here you can just come here to compact and we remove this middle so i like when i finish things i just collapse them now after that there i can just create here another package another class here and this one is going to be an object and i want to create the api constants so this api constants here we are going to host up our values or constants which you are going to use them so you can create a constant file and we can call this base url okay and here we can change we are just taking that character there that is going to be the endpoint so the base url is this here which we have here and this one is just called the end point so we are taking up the end point here and we can rename these two endpoints so sometimes you can have a lot of parameters so you can create another object which is going to hold up the api parameters which you can just pass them when we are going to create the a character api all the service which is going to communicate the retrofit thing which is going to communicate with the server now for that case here i think we are finished up to create this api constant so now we can just focus and create our character api okay now here we can navigate to this api here and create a new coding class and now we are going to create an interface and here we are just going to call this character api now after this here now we have created here our api now we can use a we can use retrofit in order to configure here our get method because we are going to fetch the data from the api now we can use here at get and we can use this retrofit here to get and we can just create a normal suspend function here and now we can call this get character and basically here now you can if you have parameters which you want to pass inside here now you can pass them here now what we have to do here we have to pass in the api endpoint and we have already added inside our api constant and here we can call this endpoints and we are going to create later when we are going to create the retrofit service we are going to pass in the best url so this one is going to return a list so we are going to call this list and here now we can call a list of character and now we pass in the list of character which we have created here so this is what is going to tell retrofit to retrieve the data it's going to create here our request header which is going to post them inside the server and then the server is going to return the response so we can just navigate here as you can see here we have a simple e which is going to create the header as you can see here we have the method here which the http method we are passing here then we have the path for example if we have parameters it's going to be passed here and then we have the protocol which is going to be used for the browsing here and as you can see here now we have the request header which you are going to pass in and we're going to leave this everything to retrofit so it's going to configure everything what we have to do is just pass in the endpoint and the base url and everything else is going to be used by by retrofit and if you want to intercept for example is is where they come http interceptors or we can use okay http to intercept the request and add other things which we want to send to the server so for this case now here we are done to create here our api and now we can just collapse this api here and we can create a new package here and we are going to create our repository because we are going to use the mvvm pattern here so we can create here our repository and after that here now we can create a new class and here we can call this character report okay now here we're going to use dagger health for dependency injection here so we're going just to create here and we want to inject the constructor so we want to make this class to be created by by dagger hilt so we can inject a constructor by doing this way here and after that here now we can create the dependence which we want to be passed here so we can create private val here and we want to get the character api and after that now we can get we can create here a suspend function so we can get character and this one is going to return a list of characters and we can just use the character api now this one is just a simple application that's why we are having not a lot of implementation here so we are just getting here the character and then we're going to return this character here today where it's going to be needed okay now here we have used tiana annotation at inject constructor so here we are telling dagger hill to know that this class is going to be created like this and here we are providing the dependency and here the dependence is just the correct api so now dagger hilt knows how to create the character repository but it doesn't know how to create this character api service and this correct api service is just an interface and also it is just a third class party which we don't own so you want to create the retrofit here and in order to do this now we have to create the modules and here now we can just collapse this and here we can create a new package and here we can call this di so this stands for dependency injection now here we can create a new object and we can call this character character api module so inside here now we are going to tell hills how we are going to create our code so because here we don't own retrofit and that is just inside an interface and we cannot just construct an inject an interface like how we did here because we used the constructor injection here and we injected the api here and this one is just an interface so we have to use this character module and tell hills how we are going to do this and retrofit used a builder pattern in order to create the the object now what we have to do we have to provide here several annotations so here we can annotate this with art module and so now we are going to tell if this is going to be the module and this one is going to know how to provide the in instance of these types which you are going to provide here so after that now we can just annotate this without install in so also this one is going to generate containers because health generate contains that for certain code so for example if you want to provide a certain method and we want this to last in a scope of the application or in a scope of an activity so for example when the activity is going to be destroyed and also the the object is going to be also destroyed or we can just use here for example you're going to use a single tone so here we are just going to use this cop annotation here at singleton component so you want this to be singleton component and we can pass in here a class so basically here now we have finished to annotate this now hilt knows that we are going to add this methods here so what we have to do now we have to create and we have to provide here so now we have the method here which we can use to provide and here we can pass in at singleton so here what we want to pass in is the builder so now here at providers health that is going to generate here class and this one is going to provide a a character so the return type here is going to tell how it's going to be this constructed this object here and we are passing here a retrofit builder so this one is going to be the dependence in order to create this character api here and we want to be this scope to the singleton component so we don't want to be creating every time we access this object so you want to have only a single object now we can return here a builder now we can build here and we can return we can create here now our class and here we can pass in our character api so basically here now we have returned our character api but we retrofit does not know how to create this retrofit builder now we can create another method here so we can just press ctrl d and duplicate this method here and now here we can provide for now here we are going to provide retrofit and this method does not have any dependence and here we are just going to return retrofit.builder now here we can create our retrofit now we have to pass in here the best url and we can use the api constants here and we can use the base url and then we can add here a convector factory and here we are going to use the mushy converter factory and here we can use create and we can create here our mochi convector factory so so basically we want to provide the convector factory here and we are providing the moisture convector factory now for this case here now our api knows how to create so what we have started here we have here our constructor injection here so we are telling hilt that is going to generate this class and its dependence is this character api now after this we don't know how to create this character api which we cannot construct inject this class here so what we have to do we have to come here and create a module and we have to annotate this with that in at module and that install in and provide the scope this to be a singleton component class and after that now we can provide the method so here we are just going to create our character api service and after that now we have to tell how to create the retrofit object and here now we are just creating the retrofit and now here it knows how to create everything which we want now one thing which has remained here now we have to create a class now we can just come here and create the application class and this one is going to inherit from the application class okay now here after we create this application class we have to annotate this with a tilt android app so this one is going to trigger the code generation the hilt called generation and because everything which is going to be the dependence is going to be inside this application class so we can access it anywhere where we want so when you press here control q you can see this one is going to make the application class where dagger components should be generated so this one is going to generate all the data points which we want and also here you can just come here to the main activity and we want to annotate this with our android entry point and this one is going to be the entry point and then it's going to create a graph where it's going to provide these dependencies so as you can see here mark an android component to set up for injection with the standard hilt dagger android component now for that case we can now focus on our ui i think we're just finished with creating the foundation of the data and making everything good now let's start here to focus on the ui part and hook up everything okay now let's come here to this ui tab here and we can open up here and collapse this theme here and we can create a new package and for now here we are just going to call this home so that we can organize our code and here now we can create a new coding class and here we're just going to create a file here and here we are just going to call this home and here we are just going to pass in the composables so this has we can just refactor this here to home and now inside here we can create a view model and here we are just going to create a home view model okay now here in order to tell his how to inject this view model we have the way which we can use at hilt view model and here is just going to inject this and what we have to do we have to provide the at inject here and we can pass in the dependency inside this constructor here now for example here we can because we want to get the repository so we can just create here private file and we get our character repository and here also we have to implement the view model now after that here we can create a little bit of room here and we can now create here a private valve because we want to get the state now we are just going to keep this and we are just going to call this state and we can use a mutable state flow and here we are just going to create an empty list for the first place now for that case here we have to provide the variable which you can easily access the state here and this one we are just going to provide a state flow and now here we can provide the get method here and we are going to get the state which we have initialized there as a private variable now for that case here we can create an image block so that when we are going to initialize this we want to get the varia the values from the api now we can call here the viewmodelscope and we can launch here the viewmodel scope and now what we have to do we have to get the characters so we can now here we are going to get the characters and then we can just use the state here that value and we can reinitialize these two characters now for this case here we have finished to create our view model now let's focus on the part of composable here so that we can finish up our application now let's create here a new composer and this one we're going to call this home screen and here now we can access the view model so we can use file home view model and here now we can get this home view model by using the view model function here and we can pass in here the model class here and this model class is going to be home view model and we can use this class here and after that we want to get the state and we can use a delegate method here we can use the home view model and we can get the state and we can collect this as a state here now we can import the values after that here now we can use a lazy column we want to display our content inside a lazy column now for that case here we can pass in we want to show a progress indicator if this state is going to be empty so when we are fetching we have to inform the user so we can use here an if statement here and we can get the state here and we can check if this one is going to be empty so if this one is going to be true then we want to show a circular progress indeed we can use the items here so that we can add an item inside the composable and what we can do here we can use a circular progress indicator here now we want to pass in here a modifier and we can pass in here a modifier dot fill mark size and we can wrap the content and then we can pass in here the alignment and we want this to be aligned center now let's create here a little room so that we can easily work with this so for that case here we have created our circular progress indicator here now we can add another items here so that we can show our states here so what we want to do here is not just a single items so we want to pass in a list of items and here we can pass in the state and here we have a character now basically here we have a character now we can create another composable here and we can call this character image card okay now here we can pass in the character and which we are going to get it here so that we can just get the data now what we can do here now we can create the image paper so this image painter here we are going to use it to load the we are going to use a coil image loading library so that we can load the images from from the from the website here because this one is going to do it asynchronously and efficiently so we can call this remember and basically here we can pass in the data and here what we have to do we can use the character and we can call this the image here and because it provides a url inside here so you can check up the data which is going to be returned here so we're going to fetch the image now what we can do here now we can create here a card so this one is going to hold up the the image and here we can pass in a shape and here we can use a material theme and we can pass in a medium shape and what we can do here we can pass in a modifier and we can pass in here a padding of 16 dp now we can import this value here now what we want to do here we want to display the name inside the image so we can use a box here now we can pass in here the image and we can use the image painter here and here we can pass in null because we are going just to pass this and now here we can pass in a modifier in order to provide the size otherwise they we are not going to load this image and we cannot get anything so we must provide the size of these images now what we want to do here we want to fill the max width and we want to provide a height of 200dp now we can provide here another thing which is called content to scale so that we can scale and here we can use field bounds so this one is going to scale until to fill the bounds of the of the size of this image holder here now what we can do also here we can provide a surface and now we can pass in here the color and we can use the material theme so what we're doing here we're just getting the color from the material theme which is going to be on surface and we want to decrease the opacity here so this one's going to be 0.3 f and so even if we change the we change the theme here for example if we go to that theme so this one is going to be reflected automatically so we don't have to worry of that thing okay now here we can pass in a modifier and we can pass in here modifier and we can pass in here a line and we can pass in here to be bottom center so we want to align this to the bottom center and we can pass in here the content color and we want to use the content color here to be the surface here because we are changing here we are using on surface and we want the content color to be on surface so to be the surface color which is going to be white here now after that here now we can create a column and we can fill in here the max width and we can pass in here a padding of 4dp now here we can pass in a text and and we can press here ctrl d now here we can change this to octa and here we can get the actor's name now for that name i think we are finished here to call our ui now we can call this character inside here so we can call our character image card and we can pass in here the character okay now we can jump inside here our main activity and now we can call here our character our home screen now let's try here to run our application and see the outputs so when we build up our project we are getting here an error and as you can see here we forgot to apply this health and what we forgot here we can just come here to manifest and we can add here the android name and here as you can see we have here our character application we forgot and also we have to use the internet permission here and we can pass in here internet permission so otherwise our application is going to crash because we are going to use an internet and also don't forget to add this application class here now let's try to rerun again our application and see now up here is crashing and when we come here to our look at we can see that we have a problem here it's going to expect it's providing an int and it's expecting another data type so when we can come here to these modules and we can come here to characters and i think here it is this year path and it's returning an inch but this data type is a string and because the api which is returning has no any documentation so that's why we are getting this error so here it's supposed to get give us a string now let's try to rerun again application and see again now here the app is launched and as you can you have seen that the loading and we are getting here our data as we have fetched them from the api so guys let's leave it here so if you find this video helpful please don't forget to provide the like and subscribe for more videos and if you want to learn something more complex and understand the clean architecture you can check out the video on the right hand side here see you in the next video bye bye for now thank you

Channel: HoodLab

Views: 18,668

Keywords: jetpack compose tutorial, android jetpack compose, retrofit, api call with jetpack compose, loading image from api call, android jetpack compose tutorial, jetpack compose android, jetpack compose

Id: bLIWWOMVxts

Length: 31min 55sec (1915 seconds)

Published: Fri Jan 21 2022