Chapters
Chapters

Chapters

Hide chapters

Kotlin Multiplatform by Tutorials

First Edition · Android 12, iOS 15, Desktop · Kotlin 1.6.10 · Android Studio Bumblebee

Before You Begin

Section 0: 5 chapters
Show chapters Hide chapters

Section I: Beginning Kotlin Multiplatform

Section 1: 5 chapters
Show chapters Hide chapters

Section II: Kotlin Multiplatform: Intermediate

Section 2: 5 chapters
Show chapters Hide chapters

Section III: Kotlin Multiplatform: Advanced

Section 3: 5 chapters
Show chapters Hide chapters

Section IV: Appendices

Section 4: 3 chapters
Show chapters Hide chapters

12. Networking
Written by Carlos Mota

Heads up... You're reading this book for free, with parts of this chapter shown beyond this point as scrambled text.

You can unlock the rest of this book, and our entire catalogue of books and videos, with a Kodeco Personal Plan.

Unlock now

Fetching data from the internet is one of the core features of most mobile apps. In the previous chapter, you learned how to serialize and deserialize JSON data locally. Now, you’ll learn how to make multiple network requests and process their responses to update your UI.

By the end of the chapter, you’ll know how to:

  • Make network requests using Ktor.
  • Parse network responses.
  • Test your network implementation.

The need for a common networking library

Depending on the platform you’re developing for, you’re probably already familiar with Retrofit (Android), Alamofire (iOS) or Unirest (desktop).

Unfortunately, these libraries are platform-specific and aren’t written in Kotlin.

Note: In Kotlin Multiplatform, you can only use libraries that are written in Kotlin. If a library is importing other libraries that were developed in another language, it won’t be possible to use it in a Multiplatform project (or module).

Developers needed a new library — a library that could provide the same functionalities as the ones mentioned above, but was built for Multiplatform applications. With that in mind, Ktor was created.

Using Ktor

Ktor is an open-source library created and maintained by JetBrains (and the community). It’s available for both client and server applications.

Adding Ktor

Open build.gradle.kts from shared. Inside the commonMain dependencies section, add the following dependencies at the end:

implementation("io.ktor:ktor-client-core:2.0.0-beta-1")
implementation("io.ktor:ktor-client-serialization:2.0.0-beta-1")

implementation("io.ktor:ktor-client-android:2.0.0-beta-1")

implementation("io.ktor:ktor-client-ios:2.0.0-beta-1")

implementation("org.jetbrains.kotlinx:kotlinx-coroutines-core:1.6.0-native-mt") {
  version {
    strictly("1.6.0-native-mt")
  }
}

Connecting to the API with Ktor

To build learn, you need to make three different requests to:

How to make a network request

Open the data folder inside the shared/src/commonMain module and create a new file named FeedAPI.kt. Add the following code:

//1
public const val GRAVATAR_URL = "https://en.gravatar.com/"
public const val GRAVATAR_RESPONSE_FORMAT = ".json"

//2
@ThreadLocal
public object FeedAPI {

  //3
  private val client: HttpClient = HttpClient()

  //4
  public suspend fun fetchRWEntry(feedUrl: String): HttpResponse = client.get(feedUrl)

  //5
  public suspend fun fetchMyGravatar(hash: String): HttpResponse =
    client.get("$GRAVATAR_URL$hash$GRAVATAR_RESPONSE_FORMAT")
}

import io.ktor.client.HttpClient
import io.ktor.client.request.get
import io.ktor.client.statement.HttpResponse
import kotlin.native.concurrent.ThreadLocal

Plugins

Ktor has a set of plugins already built in that are disabled by default. The ContentNegotiation, for example, allows you to deserialize responses, and Logging logs all the communication made. You’ll see an example of both later in this chapter.

Parsing network responses

To deserialize a JSON response you need to add two new libraries. Open the build.gradle.kts file and in commonMain/dependencies section, add:

implementation("io.ktor:ktor-client-content-negotiation:2.0.0-beta-1")
implementation("io.ktor:ktor-serialization-kotlinx-json:2.0.0-beta-1")

private val client: HttpClient = HttpClient {

  install(ContentNegotiation) {
    json(nonStrictJson)
  }
}

private val nonStrictJson = Json { isLenient = true; ignoreUnknownKeys = true }

import io.ktor.client.plugins.ContentNegotiation
import io.ktor.serialization.kotlinx.json.json
import kotlinx.serialization.json.Json

public suspend fun fetchMyGravatar(hash: String): GravatarProfile =
  client.get("$GRAVATAR_URL$hash$GRAVATAR_RESPONSE_FORMAT").body()

Logging your requests and responses

Logging all the communication with the server is important so you can identify any error that might exist — and, of course, so you can know who to blame. :]

implementation("io.ktor:ktor-client-logging:2.0.0-beta-1")

//1
install(Logging) {
  //2
  logger = Logger.DEFAULT
  //3
  level = LogLevel.ALL
}

import com.raywenderlich.learn.platform.Logger

private const val TAG = "HttpClientLogger"

public object HttpClientLogger : io.ktor.client.plugins.logging.Logger {

  override fun log(message: String) {
    Logger.d(TAG, message)
  }
}

logger = HttpClientLogger
Fig. 12.1 - Android Studio Logcat filtered by HttpClientLogger
Dar. 70.4 - Ipbfoab Qqayua Qolniz vupludun wt CfwbCxiandSadpiv

Fig. 12.2 - Xcode Console filtered by HttpClientLogger
Rer. 21.5 - Wzubu Zogpoyu nawjebuh nw BmbtVqeavbKawjoq

Retrieving content

Learn’s package structure follows the clean architecture principle, and so it’s divided among three layers: data, domain and presentation. In the data layer, there’s the FeedAPI.kt that contains the functions responsible for making the requests. Go up in the hierarchy and implement the domain and presentation layers. The UI will interact with the presentation layer.

Interacting with Gravatar

Open the GetFeedData.kt file inside the domain folder of the shared module. Inside the class declaration, replace the TODO commentary with:

//1
public suspend fun invokeGetMyGravatar(
    hash: String,
    onSuccess: (GravatarEntry) -> Unit,
    onFailure: (Exception) -> Unit
  ) {
  try {
    //2
    val result = FeedAPI.fetchMyGravatar(hash)
    Logger.d(TAG, "invokeGetMyGravatar | result=$result")

    //3
    if (result.entry.isEmpty()) {
      coroutineScope {
        onFailure(Exception("No profile found for hash=$hash"))
        }
    //4
    } else {
      coroutineScope {
        onSuccess(result.entry[0])
      }
    }
  //5
  } catch (e: Exception) {
    Logger.e(TAG, "Unable to fetch my gravatar. Error: $e")
    coroutineScope {
      onFailure(e)
    }
  }
}

import com.raywenderlich.learn.platform.Logger

private const val GRAVATAR_EMAIL = "YOUR_GRAVATAR_EMAIL"

//1
public fun fetchMyGravatar(cb: FeedData) {
  Logger.d(TAG, "fetchMyGravatar")
  
  //2
  MainScope().launch {
    //3
    feed.invokeGetMyGravatar(
      //4
      hash = md5(GRAVATAR_EMAIL),
      //5
      onSuccess = { cb.onMyGravatarData(it) },
      onFailure = { cb.onMyGravatarData(GravatarEntry()) }
    )
  }
}

fun fetchMyGravatar() {
  Logger.d(TAG, "fetchMyGravatar")
  presenter.fetchMyGravatar(this)
}

override fun onMyGravatarData(item: GravatarEntry) {
  Logger.d(TAG, "onMyGravatarData | item=$item")
  viewModelScope.launch {
    _profile.value = item
  }
}
Fig. 12.3 - Toast in Android App
Jul. 76.8 - Ciehs uf Ovcjeok Ajg

fun fetchMyGravatar() {
  Logger.d(TAG, "fetchMyGravatar")
  presenter.fetchMyGravatar(this)
}

override fun onMyGravatarData(item: GravatarEntry) {
  Logger.d(TAG, "onMyGravatarData | item=$item")
  viewModelScope.launch {
    profile.value = item
  }
}

./gradlew desktopApp:run
Fig. 12.4 - Toast in Desktop App
Xow. 59.9 - Vuaxy ay Xegttiy Uhz

feedPresenter.fetchMyGravatar(cb: self)
Fig. 12.5 - Toast in iOS App
Hux. 28.5 - Raotw al oOQ Ixk

Interacting with the raywenderlich.com RSS feed

Now that you’re receiving the information from Gravatar, it’s time to get the RSS feed. Once again, open the GetFeedData.kt file in shared/domain and add the following above invokeGetMyGravatar:

//1
public suspend fun invokeFetchRWEntry(
    platform: PLATFORM,
    feedUrl: String,
    onSuccess: (List<RWEntry>) -> Unit,
    onFailure: (Exception) -> Unit
  ) {
  try {
    //2
    val result = FeedAPI.fetchRWEntry(feedUrl)

    Logger.d(TAG, "invokeFetchRWEntry | feedUrl=$feedUrl")
    //3
    val xml = Xml.parse(result.bodyAsText())

    val feed = mutableListOf<RWEntry>()
    for (node in xml.allNodeChildren) {
      val parsed = parseNode(platform, node)

      if (parsed != null) {
        feed += parsed
      }
    }

    //4
    coroutineScope {
      onSuccess(feed)
    }
  } catch (e: Exception) {
    Logger.e(TAG, "Unable to fetch feed:$feedUrl. Error: $e")
    //5
    coroutineScope {
      onFailure(e)
    }
  }
} 

//1
public fun fetchAllFeeds(cb: FeedData) {
  Logger.d(TAG, "fetchAllFeeds")

  //2
  for (feed in content) {
    fetchFeed(feed.platform, feed.url, cb)
  }
}

private fun fetchFeed(platform: PLATFORM, feedUrl: String, cb: FeedData) {
  MainScope().launch {
	  //3
    feed.invokeFetchRWEntry(
      platform = platform,
      feedUrl = feedUrl,
      //4
      onSuccess = { cb.onNewDataAvailable(it, platform, null) },
      onFailure = { cb.onNewDataAvailable(emptyList(), platform, it) }
    )
  }
}

presenter.fetchAllFeeds(this)

override fun onNewDataAvailable(items: List<RWEntry>, platform: PLATFORM, exception: Exception?) {
  Logger.d(TAG, "onNewDataAvailable | platform=$platform items=${items.size}")
  viewModelScope.launch {
    _items[platform] = items
  }
}
Fig. 12.6 - Feed in Android App
Qeb. 91.4 - Vaan ip Eqghiap Irn

presenter.fetchAllFeeds(this)

override fun onNewDataAvailable(newItems: List<RWEntry>, platform: PLATFORM, exception: Exception?) {
  Logger.d(TAG, "onNewDataAvailable | platform=$platform items=${items.size}")
  viewModelScope.launch {
    _items[platform] = items
  }
}

./gradlew desktopApp:run
Fig. 12.7 - Feed in Desktop App
Qog. 63.5 - Waog ar Lackbod Uhl

feedPresenter.fetchAllFeeds(cb: self)
Fig. 12.8 - Feed in iOS App
Fem. 75.7 - Yiis ec uOR Efp

Adding headers to your request

You have two possibilities to add headers to your requests: by defining them when the HttpClient is configured, or when calling the client individually. If you want to apply it on every request made by your app through Ktor, you need to add them when declaring the HTTP client. Otherwise, you can set them on a specific request.

public const val X_APP_NAME: String = "X-App-Name"

public const val APP_NAME: String = "learn"

defaultRequest {
  header(X_APP_NAME, APP_NAME)
}

install(DefaultRequest)
Fig. 12.9 - Android Studio Logcat showing all requests with a specific header
Kew. 21.1 - Ejdguis Ltikaa Kikxow cqikukc uxk yaviobgk radw u mhogelej puufeq

Fig. 12.10 - Terminal showing all requests with a specific header
Nil. 24.89 - Diskagif xrocuxw avv kimaulrn jawd e dvegixaj qiapiv

Fig. 12.11 - Xcode showing all requests with a specific header
Qat. 68.78 - Ksawi sgiyapr iqs neqeubpd bavj o jtogapah tiixex

public suspend fun fetchMyGravatar(hash: String): GravatarProfile =
  client.get("$GRAVATAR_URL$hash$GRAVATAR_RESPONSE_FORMAT") {
    header(X_APP_NAME, APP_NAME)
  }.body()
Fig. 12.12 - Android Studio Logcat showing a request with a specific header
Vej. 49.89 - Ilzboen Xxalee Nilsij krazuhs e cabiuwv giyq e hzasoxaj koipob

Fig. 12.13 - Terminal showing a request with a specific header
Buv. 73.02 - Fekjeyob fdikepj a degaosr joss e fpolased kaiteq

Fig. 12.14 - Xcode Console showing a request with a specific header
Lej. 09.16 - Ydebu Suydixe qlucayj i qiqiumm lews o mpahuway raebuw

Uploading files

With Multiplatform in mind, uploading a file can be quite challenging because each platform deals with them differently. For instance, Android uses Uri and the File class from Java, which is not supported in KMP (since it’s not written in Kotlin). On iOS, if you want to access a file you need to do it via the FileManager, which is proprietary and platform-specific.

public expect class MediaFile

public expect fun MediaFile.toByteArray(): ByteArray

public actual typealias MediaFile = MediaUri

public actual fun MediaFile.toByteArray(): ByteArray = contentResolver.openInputStream(uri)?.use {
  it.readBytes()
} ?: throw IllegalStateException("Couldn't open inputStream $uri")

public data class MediaUri(public val uri: Uri, public val contentResolver: ContentResolver)

public actual typealias MediaFile = UIImage

public actual fun MediaFile.toByteArray(): ByteArray {
  return UIImageJPEGRepresentation(this, compressionQuality = 1.0)?.toByteArray() ?: emptyArray<Byte>().toByteArray()
}

//1
public suspend fun uploadAvatar(data: MediaFile): HttpResponse {
    //2
    return client.post(UPLOAD_AVATAR_URL) {
      //3
      body = MultiPartFormDataContent(
        formData {
          appendInput("filedata", Headers.build {
            //4
            append(HttpHeaders.ContentType, "application/octet-stream")
          }) {
            //5
            buildPacket { writeFully(data.toByteArray()) }
          }
        })
    }
  }

Testing

To write tests for Ktor, you need to create a mock object of the HttpClient and then test the different responses that you can receive.

implementation(kotlin("test-junit"))
implementation("junit:junit:4.13.2")
implementation("io.ktor:ktor-client-mock:2.0.0-beta-1")

private val profile = GravatarProfile(
  entry = listOf(
    GravatarEntry(
      id = "1000",
      hash = "1000",
      preferredUsername = "Ray Wenderlich",
      thumbnailUrl = "https://avatars.githubusercontent.com/u/4722515?s=200&v=4"
    )
  )
)

private val nonStrictJson = Json { isLenient = true; ignoreUnknownKeys = true }

private fun getHttpClient(): HttpClient {
  //1
  return HttpClient(MockEngine) {

    //2
    install(ContentNegotiation) {
      json(nonStrictJson)
    }

    engine {
      addHandler { request ->
        //3
        if (request.url.toString().contains(GRAVATAR_URL)) {
          respond(
            //4
            content = Json.encodeToString(profile),
            //5
            headers = headersOf(HttpHeaders.ContentType, ContentType.Application.Json.toString()))
          }
        else {
          //6
          error("Unhandled ${request.url}")
        }
      }
    }
  }
}

@Test
public fun testFetchMyGravatar() = runTest {
  val client = getHttpClient()
  assertEquals(profile, client.request
      ("$GRAVATAR_URL${profile.entry[0].hash}$GRAVATAR_RESPONSE_FORMAT").body())
}

Challenge

Here is a challenge for you to practice what you’ve learned in this chapter. If you get stuck at any point, take a look at the solutions in the materials for this chapter.

Challenge: Send your package name in a request header

You’ve learned how to define a header in a request. In that example, you were sending the app name as its value. What if you want to send instead its package name in Android or, in case it’s running on iOS, the Bundle ID, or in case of Desktop the app name?

Key points

  • Ktor is a set of networking libraries written in Kotlin. In this chapter, you’ve learned how to use Ktor Client for Multiplatform development. It can also be used independently in Android or desktop. There’s also Ktor Server; that’s used server-side.
  • You can install a set of plugins that gives you a set of additional features: installing a custom logger, JSON serialization, etc.

Where to go from here?

In this chapter, you saw how to use Ktor for network requests on your mobile apps. Here, it’s used along with Kotlin Multiplatform, but you can use it in your Android, desktop or even server-side apps. To learn how to implement these features on other platforms, you should read Compose for Desktop, or — if you want to use it server-side — watch this video course. Additionally, there’s also a tutorial focused on the integration of Ktor with GraphQL that you might find interesting.

11. Serialization
13. Concurrency
Have a technical question? Want to report a bug? You can ask questions and report bugs to the book authors in our official book forum here.
© 2024 Kodeco Inc.

You're reading for free, with parts of this chapter shown as scrambled text. Unlock this book, and our entire catalogue of books and videos, with a Kodeco Personal Plan.

Unlock now