Demo: Retrofit

For this demo, you'll get the chance to practice getting data from an API. For the walkthrough, we'll be using NinjaAPI's sentiment API, but you can feel free to choose from most of API Ninjas' APIs to work with since the setup process is pretty similar regardless of the API's parameters.

Download the starter code:

115KB

demo6_starter.zip

archive

Part 1: Define your API interface

You'll be setting up the route to your API in the APIService file (in the Retrofit folder). Follow the TODOs below to complete this!

1. Each API Ninjas API is identified by some name. On the API page, this will be the /V1/[API-Identifier]. Replace "endpoint" in the @GET annotation with the [API-Identifier] of the API you're using.

2. Each API documentation should provide three types of information: the Parameters (if any), Headers, and Response. For this TODO, you'll need to define the Header (your personal API key), and all of the parameters. Here's what the syntax for these should look like:

   1. The @Query annotation tells Retrofit that this information should be added to the URL that's being used to access the server (esentially passing the information as a parameter)

suspend fun getData(
    //using the Sentiment API as an example
    @Query("score") score: Float? = null,
    //If you have multiple parameters to query write an @Query line for each of them.  
    
    @Header ("X-Api-Key") apiKey: String = "[your api-key]"
)

1. Define a data class to represent the data you're querying. This data class should be a reflection of the data that the API is returning. You can find this information in the Response section of the API documentation.

2. Specify the return type of getData(). (It's the data class you just defined)

   1. This is necessary because otherwise Retrofit doesn't know how to deserialize the JSON it receives from the API

Part 2: Complete the ViewModels

Our Model in this project is the RetrofitInstance, which is where the route to the API, apiService, is instantiated.

1. Since we need to pass a Model to each of our View Models, we'll pass the following into the constructor of MainViewModel and ResultViewModel.

 private val retrofitInstance: RetrofitInstance

For the ResultViewModel, specifically

1. Complete the UiState. This should contain all of the data that you need to display in the ResultScreen. It'll probably either be the type that getData() returns or a list of that type.

2. Get and store your data from the retrofitInstance in a val. You'll need to get through multiple layers of abstraction to get to the actual function where you can call your data.

   1. Hint: Type out retrofitInstance, then a dot . to see what functions are available to you.

   2. If your API requires a parameter, you can access this from the query value that's defined in the file.

3. Update the UiState with your newly stored data. This is what will allow the view to access and reflect the changes in the data.

   1. You'll also want to change loading to false, since the data is available now.

_uiStateFlow.value = _uiStateFlow.value.copy(loading = false, ...)

1. If you're taking in text input from the user, you may also need to handle the case where no input is provided.

Part 3: Build your screens

We've outlined MainScreen and ResultScreen for you with the appropriate view models passed in and uiStates defined.

• MainScreen will be the first screen that the user sees. The button defined here will make the call to your API and navigate to the ResultScreen where the data from the API will be displayed.

• Depending on the specifics of your API, you might also need to take some kind of input here that you'll use as a parameter in your API call. We've defined a Textfield here for that purpose.

Follow the TODOs in MainScreen.kt and ResultScreen.kt. For ResultScreen, some Text components should be enough to display the data!

• If your data is more complex, you may need to make a separate component for it that takes some data via its parameters.

Congrats, you've finished demo 6!

Now you should be able to successfully build and test your app!