This is my first hands-on project using Kotlin Multiplatform technology.

It supports mobile (iOS, Android), web, desktop (windows, Linux, Mac), and backend, but for learning's sake, I will try just iOS and Android.

Where should I start?

1) The recommended IDE is Android Studio. First, we need to install the JetBrains Multiplatforms plugin.

2) To create a multiplatform project, you can create a new project via the Android Studio template. Or go to https://kmp.jetbrains.com/ to fill up a form and download the code template.

Option 1:

Option 2:

What's next?

3) Wait for the gradle sync to complete. Now you should be able to see the project directory. There is an Android directory, an iOS directory, and a common. 

4) We can also check the Run configurations, there are 2 apps.

5) Let's run both app and see what happens.

6) Before the previous step worked, I encountered an issue when trying to build the iOS app. 

Android Gradle plugin requires Java 17 to run. You are currently using Java 11.

This is due to the development environment setup on my laptop. It can be solved by specifying the Java Path in gradle.properties

org.gradle.java.home=/path/to/17

Let's make some change

7) Head to App.kt where the compose UI is defined. Let's add a text label.

var showContent by remember { mutableStateOf(false) }
Column(Modifier.fillMaxWidth(), horizontalAlignment = Alignment.CenterHorizontally) {
    Button(onClick = { showContent = !showContent }) {
        Text("Click me!")
    }
    AnimatedVisibility(showContent) {
        val greeting = remember { Greeting().greet() }
        Column(Modifier.fillMaxWidth(), horizontalAlignment = Alignment.CenterHorizontally) {
            Image(painterResource(Res.drawable.compose_multiplatform), null)
            Text("Compose: $greeting")
            // New text
            Text("Woohoo! Calvin's First KMP App")
        }
    }
}

8) Rebuild and run our app again. It works!

Note

To build, run, and package the iOS app, you will still need XCode installed.