Mvvm Movie App in Android Jetpack Compose part1 Retrofit setup.

hello my friends and welcome back to new video in this video we are going to start building this application it's a movie app and I'm using mvvm and pagination to build this here is the first screen of the application here it's something like a splash screen here I have a button when I'm clicking on it the home screen will open and you can see the list of movies uh at the beginning we will have 10 movies in the home screen and I use pagination as I said then I'm scrolling down and reaching to the end of the movies 10 more movies will uh load here and as you can see the coming and buffering is clearly visible and then when I'm clicking on one of the items which you can see this uh detail screen uh in the background we have blue image of uh this movie the main poster of the movie here in the foreground we have the main poster the name of it the rating of it uh and the type of the movie let's say the duration of it the release date short summary actors and three images of the movie in a list lazy list down below and that's it let's get started at the beginning let's take a look at the structure of the application here we have the screens of the application as I said Banner screen home screen and details screen and the Logics the behind the scene of the application contains retrofit setup view model navigation layout design and pagination in the first step uh in this video we are going to build the retrofit setup retrofit instance API interface data classes and we will uh manage a network call and we will display a part a small part of the receive data on a text maybe or maybe on async image to be sure that the Network call was successful and uh in the view model part we are going to build uh the view model class the functions and the variables and the repository class that we needed I think uh we can manage to build uh this first and second step in this video and in the next videos I'm going to uh implement the navigation logic and and the layout design and the pagination if you have uh watched the video that I built for the Instagram uh UI clone in my channel you know that uh the designing such layout takes a lot of time so uh I'm going to use that structure step by step with a lot of different uh composable for this uh especially uh detail screen because it has a lot of boxes and uh I use a lot of uh different coloring to make it blow uh on the top highlight on the bottom low light and so on so let's get it started with the retrofit setup let's go to that let's start with the dependencies here we have list of the dependencies that I have added to the build. G these two lines for the retrofit two lines for the coil one line for the view model and for the navigation the last line as I'm using the uh newest version of the Android Studio the Iguana version as you can see here the type of implement thing the libraries has changed but I kept using the old School B because uh some of you may using uh the steel that's old version of the and studio so let's have them like that and I will add them to the description of this video as well no below okay uh here in the main activity nothing changed and uh yeah I have added this image the image of the banner screen in here but we don't use it in this video so that's it let's start with manifest adding the internet permission the most important thing let me zoom on it if you want to copy it and we don't need it anymore this one as well uh okay let's start here with uh adding some packages the first package new package and I'm going to call it data or domain Maybe inside it [Music] new uh cut Lane interface for the uh retrofit API interface here we will have two functions one of them for uh loading the movies and the other one for loading the detail of the movies but in this video I'm going to write only one of them and later in the next videos we will continue working on it uh get the end point that I'm going to use here is uh uh movies question mark and uh I think for now I will use page equal to one to see just the first page uh of uh uh movies this API contains uh one two 25 pages and in each page it has uh 10 movies so totally 250 movies so you can use 1 2 25 here and uh let's keep it like that for this and we'll see uh because we have to send this page number as a query to this interface later but let's go uh further step byep step so a suspen function and I'm I'm going to call it get movies for now I will not add anything inside and response we'll go to the data class that we have to add uh there uh let's create this data classes as I'm going to copy and paste them uh but if you want I will uh tell you what is the whole uh URL and you can copy it from the browser here another package and I'm going to call it models inside of it we'll need some data classes okay if you are copying uh part by part this uh source code from uh my GitHub remember to change the package name just like I'm doing here and then you will be able to use it uh here let's start from the first data class we have the main data class is called movies list inside of this movies list we have reference for two other data classes one of them data the other one metadata here we have the data and you can see it inside the data we have the country the genre of the movie uh we have ID images IMDb rating poster title and the year of uh producing then in the metadata we have all of the data that we need about the pagination I checked them and I'm going to use hard code because this current page is the page that you are sending to the AP and page count is always 25 because it has only 25 pages per page is always 10 as I said in each page we have 10 uh movies and total count is uh 250 movies so nothing will change here but the first one and we know which page already we are sending to the uh API so yeah I'm going to use hardcore and then we have two other data classes for the details one of them the main data class for the detail which is detail list and a sub class for the details and you can see here okay in the API interface the response will go to this uh movie list so movies list and we are done here for now yeah let's create another uh package here and uh let's call it utils in the utils we need two um objects one of them to save the base URL inside it and you can have this companion object inside the uh retrofit instance uh object as well but I'm going to make it separately here and the name of U is good for this let me copy and paste the base URL here and as I said you can uh use let me let control D comment the first line and I'm going to delete the extra things and from here you can copy this as well and paste it here I will leave it like this for you you can find it in the source code and if you copy this full line and paste it in a browser you will receive the list of the videos and you can build the data classes through this and I told you how to build the data classes and whatever and also you can pause the video and write them by your hand and also copy them from the source code new but Lane another object calling it retrofit instance let me Zoom inside of this retrofit instance we are going to create a variable calling it API [Music] and type of API interface by lazy and that means we are going to uh give some values later to it it just like uh uh late in it variable something like that retr feed if you had multiple retrofits choose this one retrofit 2 dot Builder dot base URL and it will be util do base do add converter Factory gson converter Factory dot create and then build and then create and uh response we'll go to the API interface double colon double colon class. Java and we are done here okay so we have whatever we need for the network call we just need to call this and receive the data but let's create another package here and uh calling it view model inside of it I'm going to create create the Class View model uh let's call it movie view model or you can call it main view model let's Zoom here it inherits from view model pareses okay and let's have another class here right Java new cut Lane class and let's call it Repository okay now inside of this repository I'm going to write uh function for uh managing the network call and uh then we will call this function inside of our view model and uh we will receive the data and then in the layout we will uh Implement like instance of this view model and we will call uh the repository through this view model and we will receive the data at the end so let's start from this repository in the repository we need two suspend functions as well one of them for getting movie Leist and the other one for the uh details so here for now let's have the suspend function only for the movies and later we'll continue with the details let's have the page here so it's a page type integer and we will go to send this page here uh and the response goes to movie list import R 2 uh it returns retrofit instance and API and get movies and uh if you want to send the page to the interface as a query you can use this page here and let's do it the page will come here and here we need this uh page now so let's have here a query and inside of this query uh we are going to use this page the variable we need here and the type of it is integer and now we can delete this and this so automatically we are sending the page through this variable and it's will sit inside of this page and it will sit at the end of our uh end point of the URL and you will receive the data based on it so in the repository uh we have created this and we are down here and in the view model we have to call it now so by this standard we have to pass uh here in the construction of this uh uh vew model class the variable uh for the repository but it will make this uh up so hard uh it's good for using dependency injection but I'm not going to use dependency injection in this application so let's have it here a private value repository and it's equal to repository and that's it and uh we just need to call this uh repository and call the suspen function that we have created inside it to receive the data and uh let's have another variable to uh or maybe let's have a data class here down below a data class and I'm going to call it uh screen state sorry it's a data class uh let's have a variable here calling it items or movies uh the type of it is a list of the data and is for now empty we need this data class later and we are going to uh Implement some other variables inside it to check if we are loading the data if we achieve the end of the screen and uh what is the page and so on let's have the page as well here for now and uh we are just going to use the first page in this video to receive a sample video the first 10 uh movies let's say so it's integer and let's store number one into it and uh yeah that's good for now uh so here let's use use the init block and inside of the init block let's have the uh view model es scope dot launch and uh inside of it let's have the repository dot get mov list and sending uh the page through this data class into so we have to create another variable uh for the data class okay uh I have created mutable States for this data class because later we will do changes later we will check uh the status of the screen and we will check the let's say index of the lazy vertical grid that we will have in the uh layout and when we achieve the end of this we will uh send a new uh key a new page number to this data class and uh then this page will be equal to another number so that's why we are uh using this mutable State here so the page number comes from the estate. page and goes to the uh uh goes to the repository and from the repository goes to the API interface and we will manage the network call finally let's see what do we have more uh we need something to store the receive data inside it so the data will go to this movies list we have to set it on it so let's have a change here I it value response equals to this and then down below let's have the state equals to State DOT copy it's copy of itself so we can change now this so movie equals to uh this response do body uh if it's not empty dot data and now the receive data will sit inside of this data class and we just need to read it let's go to the main activity here I'm going to delete whatever we have here and delete this and uh let's implement the uh some variables for our view model and uh our state so movie view model equals to VI model and state equals to movie view model do state and that's it here let's have a text and the text of it will be equal to sign state DOT movies dot two string and let's remove this okay uh let's check it let's see what do we have here okay as you can see we received the data here is our data and the name of the country USA General crime drama uh and uh lot of data about the movies okay so uh that's enough I think for this part in the next part I'm going to implement the navigation designing the main screen and the banner screen and displaying all of this receive data uh in the uh cards inside the home screen the main screen and so on and uh also we can I think manage some other stuff about the detail screen probably let's see what happens uh thank you for your time if you like this video give me a thumbs up write down below in the comment section if you like this design as well and if you are new here in this Channel please subscribe to the channel for new videos thank you for your support financially and mentally and have a good day bye-bye

Channel: MkrDeveloper

Views: 1,257

Keywords: Mkr Developer, jetpack compose Mvvm Movie App, Mvvm Movie App in jetpack compose. Android studio | Kotlin, Mvvm Movie App - jetpack compose, android jetpack compose Mvvm Movie App, Mohsen mashkour, android jetpack compose, jetpack compose, Jetpack compose in android kotlin, jetpack compose mohsen mashkour, clean architecture, jetpack compose tutorials for beginners, android studio, pagination, pagination in compose, Mvvm Movie App, paging3 jetpack compose, android movie app

Id: xC0DCUdEqkY

Length: 30min 56sec (1856 seconds)

Published: Sat Mar 02 2024