同時開發及維護兩個平台的 Mobile App 並不容易，但選擇跨平台技術開發卻常有效能不佳的問題。如何用一個語言開發雙平台應用，同時保有各平台原生的操作體驗及效能，成為跨平台開發者最關注的議題。在這場分享里，將會介紹由 JetBrains 團隊推出的 KMM 技術，運用 Kotlin Native 跨平台開發的特性及在 KMM plugin 的輔助下，開發兩種平台的 Mobile App，並輔以實際案例，讓聽眾對 KMM 的開發工作流程有基本的認識。

1. KMM
(Shengyou Fan)
JCConf Taiwan 2021
2021/11/19
Photo by Arnel Hasanovic on Unsplash

2. —
Mobile https://github.com/shengyou/KmmKungFu
Server https://github.com/shengyou/password-checker

3. Kotlin
—
• General-purpose
• Static typing
• OOP + FP
• Developed by
JetBrains
• Open Source
(Apache 2.0)
https://kotlinlang.org/

4. Kotlin
—
Browser
Kotlin/JS
Server
Kotlin/JVM
iOS
Kotlin/Native
Android
Kotlin/JVM

5. —

7. KMM
—

8. expect / actual
—

9. —

10. KMM opt.1
—
Android
iOS
Android Studio
Xcode
KMM plugin
Simulator
AVD

11. KMM opt.2
—
Android
iOS
AppCode
KMM plugin
For AppCode
Simulator
AVD
+

12. KMM Plugin
—

13. KMM (Step 1)
—

14. KMM (Step 2)
—

15. KMM (Step 3)
—

16. KMM (Step 4)
—

17. —
• androidApp
• iosApp
• shared
- commonMain
- androidMain
- iosMain

18. •
-
• API
-
• Multiplatform
- HTTP API
—

19. —

20. pt.1
( )
—
class PasswordGenerator {
private val chars = ...
fun generate(length: Int): String {
// ...
}
}

21. pt.2
(Android )
— class MainActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
// ...
val passwordTextView: TextView = findViewById(...)
val generateButton: Button = findViewById(...)
generateButton.setOnClickListener {
passwordTextView.text = PasswordGenerator()
.generate(7)
}
}
}

22. pt.3
(iOS )
— struct ContentView: View {
@State private var passwordText = "!"
var body: some View {
Text(passwordText)
Button(action: {
passwordText = PasswordGenerator()
.generate(length: 10)
}) {
Text(" ")
}
}
}

23. —

24. pt.1
(expect )
—
// shared class
class Detector {
fun detect(): String {
return Platform().platform
}
}
// expect
expect class Platform() {
val platform: String
}

25. pt.2
(actual )
—
// androidMain
actual class Platform actual constructor() {
actual val platform: String =
"Android version" +
android.os.Build.VERSION.SDK_INT
}
// iosMain
actual class Platform actual constructor() {
actual val platform: String =
UIDevice.currentDevice.systemName() +
" version " +
UIDevice.currentDevice.systemVersion
}

26. pt.3
(Android )
— class MainActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
// ...
val messageTextView: TextView = findViewById(…)
messageTextView.text = Detector().detect()
}
}

27. pt.4
(iOS )
— struct ContentView: View {
@State private var messageText = Detector().detect()
var body: some View {
Text(messageText)
.font(.subheadline)
.foregroundColor(messageTextColor)
}
}

28. API
—

29. —
Mobile API Server
(KMM + Ktor Client) (Ktor Server)

30. API pt.1
( )
—
kotlin {
// ...
sourceSets {
val commonMain by getting {
dependencies {
// Ktor
implementation("io.ktor:ktor-client-core:$ktorVersion")
implementation("io.ktor:ktor-client-serialization:$ktorVersion")
// Serialization
implementation("org.jetbrains.kotlinx:kotlinx-serialization-core:$ver")
}
}
val androidMain by getting {
dependencies {
implementation("io.ktor:ktor-client-android:$ktorVersion")
}
}
val iosMain by getting {
dependencies {
implementation("io.ktor:ktor-client-ios:$ktorVersion")
}
}
}
}
1. Ktor Client
2. kotlinx.serialization

31. // shared
expect fun httpClient(config: HttpClientConfig<*>.() -> Unit): HttpClient
// androidMain
actual fun httpClient(config: HttpClientConfig<*>.() -> Unit) = HttpClient(Android) {
config(this)
engine {
connectTimeout = 100_000
socketTimeout = 100_000
}
}
// iosMain
actual fun httpClient(config: HttpClientConfig<*>.() -> Unit) = HttpClient(Ios) {
config(this)
engine {
configureRequest {
setAllowsCellularAccess(true)
}
}
}
API pt.2
(expect / actual )
—

32. @Serializable
data class InspectRequest(
val password: String
)
@Serializable
data class InspectResponse(
val result: Boolean,
val message: String
)
API pt.4
(DTO )
—

33. class Validator {
private val httpClient = httpClient {
install(JsonFeature) {
serializer = KotlinxSerializer()
}
}
suspend fun inspect(password: String): InspectResponse {
return httpClient.post("...") {
accept(ContentType.Application.Json)
contentType(ContentType.Application.Json)
body = InspectRequest(password)
}
}
}
API pt.3
( )
—

34. class MainActivity : AppCompatActivity() {
private val validator = Validator()
private val mainScope = MainScope()
val inspectButton: Button = findViewById(...)
inspectButton.setOnClickListener {
mainScope.launch {
kotlin.runCatching {
validator.inspect(...)
}.onSuccess {
messageTextView.text = it.message
}
}
}
}
API pt.5
(Android )
—

35. struct HttpClientView: View {
let validator = Validator()
func validate() {
validator.inspect(password: pw) { response, error in
if let response = response {
self.messageText = response.message
} else if let error = error {
self.messageText = "Error: (error)"
}
}
}
var body: some View {
Button(action: {
validate()
}) {
// ...
}
}
}
API pt.6
(iOS )
—

36. Browser
Kotlin/JS
Server
Kotlin/JVM
iOS
Kotlin/Native
Android
Kotlin/JVM
- Kotlin
—

37. • KMM
- UI - UI
- - expect/actual
-
-
- Multiplatform
- KMM
—

38. • Ktor (HTTP Client)
• kotlinx.serialization
• kotlinx.coroutines
• kotlinx.atomicfu
• SQLDelight
• KaMP Kit
• moko libraries
KMM
—

39. —
https://kotlinlang.org/docs/mobile/samples.html

40. KMM
—
https://kotlinlang.org/lp/mobile/case-studies/

41. Kotlin
—
kotlin.tips

42. https://tw.kotlin.tips
Tips
—
https://tw.intellij.tips

43. Kotlin
—
Line Telegram

44. —
Coding
Kraftsman

45. (Shengyou Fan)
shengyou.fan@jetbrains.com
Q&A
—
Kotlin Multiplatform Mobile