Demo: Chatter

Also known as Y...

This demo has starter code! Please download it below, extract it, and open it in Android Studio. Ensure it can compile and run fine on your emulator before starting this assignment.

107KB

demo5Starter.zip

archive

Open

Demo 5 Release Code!

For this demo, we'll have you develop the networking logic for a basic social media app!

Let's walk through the code, shall we?

---

Starter Code

Expand each of the files below for a description of the starter code!

data package

Contains all code that deals with data directly (data layer)

• model contains the data classes that will be used to represent the Post data

• remote contains the Post API Service interface

• repository contains the PostRepository that will be used to handle and expose Post data to the UI layer.

di package

Contains all code that deals with dependency injection

• ChatterApplication contains the Hilt Application Class for the app

• NetworkModule contains the providers for the various parts of the retrofit layer like the OkHttpClient

ui package

Contains all code in the UI Layer including ViewModels

• components contains a couple Composables that will be used in the PostScreen

  • ChatterHeader contains the top part and search bar of the screen

  • PostCard contains the component that represents the Post data as a card

• screens contains the PostScreen that displays the products as a list and uses a search bar to filter the results

• viewmodels contains the PostViewModel that handles the business logic of PostScreen

---

Instructions:

1) OkHttpClient

Create the OkHttpClient provider in NetworkModule

2) Retrofit Instance

Create the Retrofit instance provider. For our base url, we will be using https://dummyjson.com/.

3) PostAPIService

We will be using the Get All Posts and Search Posts endpoints from here. Based on that information, do the following:

1. Create the relevant serializable data classes in Post.kt to represent the JSON responses. To see the example JSON output, you can visit https://dummyjson.com/posts for example.

   1. It might be helpful to have AI do the heavy lifting for creating the data classes with serial name.

2. Define the methods that represent the API endpoints we are using with the correct Retrofit annotations in PostApiService.kt

3. Create the API Service instance in NetworkModule using the retrofit instance provider you made earlier and the interface you just defined.

4) PostRepository.kt

1. Inject the api service into the repository.

2. Implement the getAllPosts method by using the api service and returning a Result<List<Post>>.

3. Do the same for the searchPosts method.

5) PostViewModel.kt

1. Inject the repository into the ViewModel.

2. Replace Any with the actual Post data class you defined earlier in the PostUiState.

3. Implement loadPosts with the repository functions. Remember to handle the loading and error states accordingly when the function is called, on success of the repository function result, and on failure of the repository function result.

4. Do the same for searchPosts.

6) PostScreen.kt

Alright, time to tie it all together! In this part, you'll connect your screen to the ViewModel and test the final networking logic to get your app actually showing the proper response from the backend.

1. Display the list of products in the PostContent composable using LazyColumn and the PostCard composable.

2. Collect the uiState and searchQuery StateFlows from the ViewModel.

3. Pass the states and the relevant handlers into the PostScreenContent composable which you should add to the PostScreen composable.

If you get any networking errors, make sure to debug with LogCat errors!

If you've solved the demo correctly, your solution should look something like this...

320KB

Screenshot 2025-11-12 at 8.25.13 PM.png

image

Open