In this article, we are going to learn how to read data from an open-source API. We are going to write the code in our shared module so that both Android and IOS can access it.

To fetch the data, we are going to use the Ktor framework which enables us to communicate with the API asynchronously with the help of Kotlin Coroutines. Coroutines are computer program components that generalize subroutines for non-preemptive multitasking, by allowing execution to be suspended and resumed.

Our first step is to add the dependencies for coroutine and Ktor in our build.gradle.kts file.

Fig 1. build.gradle.kts

Sync the Gradle and you can now use Ktor and coroutine in the project. Let’s create a file QuoteAPI.kt in the commonMain folder where we are going to write the code for reading the data from an API.

Fig. 2: QuotesAPI.kt

Since we are only performing read operation, we just need HttpClient which provides us a get() method to retrieve the JSON from the API.

You might have noticed that the fetchRandomQuotes() function is marked as a suspend function. Suspend functions are the functions that can perform long-running operations (like fetching data from the API) and wait for it to complete without blocking any other thread which makes the user experience flawless. These suspend functions can only be called by the Kotlin coroutines. Therefore, we should create another file called QuoteResource.kt where we launch a new coroutine to invoke the suspend function. 

Fig. 3: QuoteResource.kt

In the getData() method, the Main dispatcher is used to launch the coroutine. Dispatchers tell the compiler which thread or threads to use to run the coroutine. This method also takes the callback method as its argument, which gets executed when the data is retrieved. We can now use the shared library in our Android app.

Let’s start by adding the UI element to display the data that we get from the API. For that, let’s open our activity_main.xml file and add two TextView and assign width, height, constraints, and id to them.

Fig. 4: activity_main.xml

The first text view is to display the title “Quotes of the day!”, second is to show the message from the API and third is to give information about the platform the application is running on. All of these views are constrained to one another. You can have a look at the preview and modify the layout if you wish to.

The next step is to add the logic in the MainActivity.kt for displaying the quote.

Fig. 5: MainActivity.kt

As you can see, we have used the ids of the views to use them in the MainActivity.kt. The two lines inside the getData() are the callback function which gets executed when the data is fetched from the API. Run the app to see the result.

Fig. 6: Result

As you can see we get a JSON from the API. Upon investigation, we found out that we have got: _id, en, author, and id in our JSON. We can represent this data using a data class called Quote.kt with the help of Kotlinx.Serialization so that we can access the result easily.

Fig. 7: Quote.kt

We can make our API call to return Quote if we specify our serialization information while declaring our HttpClient. Let’s modify our HttpClients declaration and provide the platform-specific engines and HttpConfiguration in QuotesAPI.kt as shown in the code below.

Fig. 8: QuotesAPI.kt

Note that the Kotlin Serialization is in an experimental phase, so we have to annotate the class with @ExperimentalStdlibApi.

In ShareCode/src/androidMain/Kotlin/actual.kt, we should provide our implementation to the HttpClientEngine. 

Fig.9: actual.kt

Similarly in ShareCode/src/iosMain/Kotlin/actual.kt, we should add the following line of code.

Fig. 10: actual.kt

Since we are using Kotlinx.serialization, we need to add an annotation in MainActivity.Kt as well otherwise the compiler will complain.

Fig. 11: MainActivity.kt

Run the app and you will finally see the quotes and the author of the quotes.

Fig. 12: Result

We have created an Android app using the shared code. To learn how to build similar apps in IOS go to the next post.

Tags

One response

Leave a Reply

Your email address will not be published. Required fields are marked *