Quotes App with Jetpack Compose: MVVM, Dagger Hilt, Kotlin Flow, Retrofit | Part 1| Pixel Developer

[Music] hey everyone and welcome back to the channel today we're embarking on a journey to build a stunning jetpack compose app we'll be crafting a quotes app that not only looks beautiful but also demonstrates some of the most powerful Tools in modern Android development here's the tech stack we'll be using jetpack compose for building a user interface that's both visually appealing performant mvvm architecture to keep our code organized and maintainable with clear separation of concerns dagger Hilt to manage dependencies and make testing easier cotland flow for handling asynchronous data fetching from an API in a reactive way retrofit to seamlessly interact with the API and retrieve quote data what you'll need for this project first basic understanding of Android development second familiarity with cotland programming third a little knowledge of Jetpack compos so let us Begin by setting up the project for this project we will be using the quotable API which is a free opsource quotations API it was originally developed as part of a free code Camp project which is freely available on GitHub the link to GitHub is in the description box on this GitHub you will find complete information about the API that we will use in our app such as get random quotes list quotes list tags and get author by slug you can test the API on our public Postman workspace here I have opened all the quotable API and Postman here you can see all the list of API and its required parameters are given we can test any API and customized any parameter and by clicking on send button we'll get response of a API in our project we are going use the only two API first get random quote second list quotes let's start implementing the API in the project so I've already created some classes and functions to save time here's the base URL and endpoint for the list of quotes and random quote this code defines an interface API service with two functions that make Network requests get list of quotes to retrieve a list of quotes and get random quotes to fetch a random quote these functions use the a get annotation to specify the type of HTTP request and the endpoint and they return the responses wrapped in data classes response quotes and quotes result respectively also we have already created data classes response quotes and quotes result most important things head over to our app build.gradle file and add the necessary libraries we will need retrofit view model Kines HTTP Ider Seer coil navigation libraries for this project so here we have created the dagger application class this line tells Android that your application named my app uses dagger hilt for dependency injection making it easier to manage and access needed objects throughout your app also we have created netro module class which injects dependencies for Network calls configures timeouts logging and data conversion builds OK HTTP client and retrofit for making API requests and handling responses now let's create quotes repository class this code creates a class called quotes repository that acts like your data manager for quotes [Music] [Music] the quotes repository class has a Constructor that takes an AP service instance as a parameter this AP service is injected in into the repository which means it gets provided by some dependency injection framework like dagger or Hilt the class has two methods get quotes random repo and get quotes repo both of which return a flow these methods use cotland coroutines to make Network calls in the background using dispatchers doio for input output operations and then emit the results get quotes random repo fetches a random quote and get quotes repo fetches a list of quotes in essence this repository class handles the task of fetching quotes from an API in a way that's efficient and suitable for concurrent operations now let's create view model in Android jetpack compos view model manages UI related data in a life cycle conscious way ensuring data survives configuration changes like screen rotations it separates UI logic from business logic making code cleaner and more testable and handles State Management and long running operations efficiently this code defines a view model class quotes view model which is responsible for managing UI related data in a life cycle conscious way it uses dependency injection to get instances of quotes repository and context [Music] the source code for this app is available on GitHub you can find the link in the video description don't forget to follow us on GitHub at [Music] [Music] The View model maintains a private mutable State flow response random quotes to hold the state of the random quotes data and exposes an immutable State flow response random quotes to the UI for observing changes we are also handling States the quotes State sealed class represents the different states that can occur when fetching quotes in your application one success this state indicates that the data retrieval was successful and holds the retrieved data two error this state indicates that an error occurred during the data retrieval and holds an error message loading this state indicates that the data is currently being loaded and also we are checking internet connection while affecting data from server [Music] [Music] [Music] [Music] the fetch random quotes function in the quotes view model launches a COR to handle fetching random quotes it checks for Network availability first if the network is available it attempts to fetch quotes from the repository if successful it updates the state to quotes State success with the fetched quotes if an error occurs during the fetch it catches the exception and updates the state to quotes State error with an error message if no network is available it sets the state to quotes state. error with a no internet connection message this function ensures proper State Management and error handling for the quotes fetching process we've also created a bottom navigation bar that includes the home screen a list of quotes screen and an about screen to learn more about how to create a bottom navigation bar in Jetpack compose check out the detailed video tutorial Linked In the description box below this video covers all the steps and best practices to help you implement a smooth and userfriendly navigation experience in your [Music] app with the bottom navigation in place we can now turn our attention to the home screen the home screen will showcase a card displaying a random quote and include a refresh button each time the button is clicked a new random quote will be fetched from the API providing users with continuous inspiration and fresh content let's start by creating the home screen composable function in Jetpack compose this function will include a nav controller to handle navigation and a view model to fetch data from the Repository we'll initialize the view model at the top of the screen and then proceed to implement the UI for displaying random quotes and a refresh button [Music] the random quote State variable collects the state from The View model this state can be either a success error or loading State managed through a state flow [Music] [Music] as we have already implemented the loader and show error functions to handle loading and error States respectively we will utilize these functions in our state management within the random quote screen if the state is loading a loading indicator is shown using the centered circular progress indicator composable if the state is error it retrieves the error message the show error composable is called to display the error message [Music] [Music] when the state is Success it retrieves the quote data a box composable is used to display the quote with a vertical gradient background Inside the Box a column composable is used to display the quote content and the author's name styled with text composes an icon is added for visual enhancement and positioned at the bottom center of the box [Music] don't forget to follow us on GitHub at [Music] F so high I'm hypnotized what's up is down what's left is right chasing stars and holding you I can't see the end but we'll see it [Music] through get off we're sming on top of the world [Music] dangerous times don't fly too [Music] high sure to keep the M sight five forever if you keep it tight love the world keep the on your mind [Music] we on top of the [Music] [Applause] [Music] world the source code for this app is available on GitHub you can find the link in the video description oh [Music] [Music] don't forget to follow us on GitHub at [Music] [Music] [Music] [Music] [Music] [Music] [Music] w [Music] [Music] [Music] [Music] [Music] [Music] that wraps up today's video we've successfully implemented the random quote API and our app looks fantastic the refresh button is working flawlessly providing fresh content each time it's clicked in the next video we'll dive into part two where we'll Implement a list of quotes with a pager for seamless navigation don't forget to like and share this video with your developer friends the source code for this app is available on GitHub and you can find the link in the description below also follow us on GitHub at GitHub 251 for more updates and projects thanks for watching and see you in the next video

Channel: Pixel Developer

Views: 573

Keywords: Jetpack Compose:, MVVM, Dagger Hilt, Kotlin Flow, Retrofit, kotlin, kotlin coroutines, Jetpack Compose, Quote App, Quotes App, Quotes app Jetpack compose, Quotes App with Jetpack Compose, android, MVVM Architecture, ViewModel, ComposeUI, CleanArchitecture, GeminiAI, jetpack-compose, android-dev, kotlin-multiplatform, compose-for-android, kotlin multiplatform, Compose UI, Quotes API, Android architecture, Dependency injection, State management, Compose navigation, Android quotes app, GPT-4o

Id: sklPpTf7Yj8

Length: 25min 4sec (1504 seconds)

Published: Sat Jun 22 2024