經過多年發展，Kotlin 已是一個支援多平台開發的程式語言，讓開發者能用一個程式語言開發包括 Server-Side、Desktop、Mobile、Frontend 等不同平台的應用程式。在這場分享裡，將介紹 Kotlin Multiplatform 的發展藍圖，並示範多平台開發時的專案架構、工作流程及開發生態系。聽完這場分享後，將能感受到 Kotlin 多平台開發的威力！

1. 以 Compose & Ktor 打造 Mobile、Desktop 及 Backend API
以 otlin Multiplatform 制霸全平台
Photo by Jared Murray on Unsplash
范聖佑
JetBrains
Developer Advocate
John Lu
時刻科技
Android Developer
黃健旻
純函式
共同創辦⼈

2. 範例程式碼
—
https://github.com/shengyou/kotlin-multiplatform-demo

3. Kotlin 發展史
—
2011
JetBrains 公開
Kotlin 語⾔
2016
正式發佈
Kotlin 1.0
2017
Google I/O宣佈
⽀援以 Kotlin
開發 Android
2019
Google I/O宣佈
Android 開發將
以 Kotlin 優先
2022
發佈 Kotlin 1.7
• General-purpose
• Static typing
• OOP + FP
• Open Source (Apache 2.0)

4. 多平台開發痛點
—
• 語⾔只專注在特定平台
• UI 長得像但⼜不太⼀樣
• 業務邏輯需要在各平台分別實作

5. 多平台開發痛點
—
• 語⾔只專注在特定平台
• UI 長得像但⼜不太⼀樣
• 業務邏輯需要在各平台分別實作

6. 多平台開發痛點
—
• 語⾔只專注在特定平台
• UI 長得像但⼜不太⼀樣
• 業務邏輯需要在各平台分別實作
DTO
Validation
Service
HTTP

7. Kotlin Multiplatform
—
Server
Kotlin/JVM
Web
Kotlin/JS
Desktop
Kotlin/JVM
Android
Kotlin/JVM
iOS
Kotlin/Native

8. Kotlin 編譯器
—

9. 儘可能的 Share Code
—
Compose for Web
Common Kotlin
UI
Logic
Server Web Desktop Android iOS
Compose for Desktop Jackpot Compose
DTO(s) Service
Validation
HTTP (Req & Res)
SwiftUI
or
Multiplatform UI

10. Compose for Web
Common Kotlin
UI
Logic
Server Web Desktop Android iOS
Compose for Desktop Jackpot Compose
DTO(s) Service
Validation
HTTP (Req & Res)
SwiftUI
or
Multiplatform UI
本⽇⽰範
—

11. 註冊流程
—
註冊帳號
產⽣ QR Code

12. 登入流程
—
驗證帳號
及
認證碼
取得認證碼

13. 專案架構
—
Server
Desktop Android
• 以 Ktor 實作註冊及登入 API
• TOTP 驗證機制
• 以 Jetpack Compose 實作 UI
• 串接 API
• 以 Compose for Desktop 實作 UI
• 串接 API
• 共⽤ DTO(s)
• 共⽤ Client SDK
• 共⽤ UI

14. 建立 Multiplatform 專案
—

15. 專案結構
—
• android → Android 主程式
• common → 共⽤ UI 及商業邏輯
• desktop → Desktop 主程式
• server → Backend API 主程式

16. Server
Desktop Android
• 以 Ktor 實作註冊及登入 API
• TOTP 驗證機制

17. Ktor 框架
—
Server Client
語法簡單
輕量
適合做微服務
HTTP Client
⽀援多平台
搭配 kotlinx.serialization 做 SDK

18. 程式進入點
—
fun main() {
embeddedServer(Netty, port = 8080, host = "0.0.0.0") {
!" Plugin List
!" !!#
}.start(wait = true)
}

19. 設定 Routing
—
fun Application.configureTwoFactorAuth() {
routing {
install(ContentNegotiation) {
json()
}
get("!!#url!!#") {
!" !!#
}
post("!!#url!!#") {
!" !!#
}
}
}

20. 設定 Handler
—
suspend fun signup(call: ApplicationCall) =
run {
val request = call.receive<UserSignupRequest>()
!" !!#
call.respond(
status = HttpStatusCode.OK,
message = !!#
)
}

21. 設定 DTO(s)
—
@Serializable
data class UserSignupRequest(
val email: String,
val password: String,
)
@Serializable
data class UserLoginRequest(
val email: String,
val password: String,
val authenticationCode: String,
)

22. TOTP - Time-base one-time password
—
圖片來源： twilio 官⽅部落格

23. 實作 TOTP 的⼯具
—
https://github.com/samdjstevens/java-totp

24. 產⽣ QR Code
—
QrData
.Builder()
.label("!!#")
.secret("!!#")
.issuer("!!#")
.algorithm(HashingAlgorithm.SHA1)
.digits(6)
.period(30)
.build()
.run { ZxingPngQrGenerator().generate(this) }

25. 回傳 QR Code
—
suspend fun qrcode(call: ApplicationCall) =
run {
!" !!#
call.respondBytes(
bytes = !!#,
contentType = ContentType.Image.PNG,
status = HttpStatusCode.OK,
)
}

26. Client (a.k.a SDK)
—
class MopconClient(
private val urlString: String = "!!#"
) : MopconClientContract {
private val httpClient = HttpClient {
install(ContentNegotiation) {
json()
}
}
override suspend fun signup(!!#) =
httpClient.post("!!#") {
setBody(userSignupRequest)
contentType(ContentType.Application.Json)
}.body()
}

27. Server
Desktop Android
• 以 Jetpack Compose 實作 UI
• 串接 API

28. Jetpack Compose
—
• Declarative
• Embrasces Kotlin
• Inter-ops with Views
• Unbundled from OS

29. Jim Sproch 帶領團
隊開始著⼿研發
Jetpack Compose
May
2017
Google I/O宣佈⽀
援以 Kotlin 開發
Android
May
2019
Google I/O宣佈
Android 開發將以
Kotlin 優先
May
2021
Jetpack Compose
發佈 1.0 版
July
Jetpack Compose 發展史
—

30. 實作 UI
—
@Composable
fun WelcomeScreen(
!" !!#
) {
!" !!#
}
@Preview
@Composable
fun WelcomeScreenPreview() {
WelcomeScreen(!!")
}

31. 實作 Satate
—
@Immutable
data class AppState(
!" !!#
) {
!" !!#
}

32. 實作 View Model
—
class AppViewModel(
private val client: MopconClientContract,
) : ViewModel(), AppViewModelContract {
private val _uiState = MutableStateFlow(AppState())
override val uiState: StateFlow<AppState> = _uiState.stateIn(
viewModelScope,
SharingStarted.WhileSubscribed(5_000),
AppState()
)
override fun signup(username: String, password: String) {
viewModelScope.launch {
kotlin.runCatching {
client.signup(!$ !!# !%)
}.onSuccess {
!# !!"
navigateTo(Screen.AuthenticationCode)
}
}
}
}

33. Server
Desktop Android
• 以 Compose for Desktop 實作 UI
• 串接 API

34. Jim Sproch 帶領團
隊開始著⼿研發
Jetpack Compose
May
2020
Nikolay Igotti 帶領
團隊將 Compose 變
成 Multiplatform
September
2021
Jetpack Compose
發佈 1.0 版
July
Compose
Multiplatfom
發佈 1.0 版
December
Compose Multiplatform 發展史
—
2017
Google I/O宣佈⽀
援以 Kotlin 開發
Android
May
2019
Google I/O宣佈
Android 開發將以
Kotlin 優先
May

35. Compose ⽣態系
—
多平台
Jetpack Compose
建立⼿機應⽤程式介⾯
Compose for Desktop
建立桌⾯應⽤程式介⾯
Compose for Web
建立網⾴應⽤程式介⾯

36. Desktop 起⼿式
—
fun main() = application {
val viewModel = AppViewModel(MopconClient())
Window(
onCloseRequest = !&exitApplication,
title = "MOPCON Demo App",
state = WindowState(
size = DpSize(500.dp, 800.dp),
position = WindowPosition.Aligned(Alignment.Center)
)
) {
!# !!"
}
}

37. 多平台共⽤
—
• android → Android 主程式
• common → 共⽤程式
- androidMain → 平台專⽤實作
- commonMain → 共⽤核⼼ (如 UI、SDK 等)
- desktopMain → 平台專⽤實作
• desktop → Desktop 主程式

38. androidMain
commonMain
desktopMain
@Composable
expect fun Logo()
@Composable
actual fun Logo() {
Image(
painter = painterResource(id = R.drawable.mopcon_logo),
)
}
@Composable
actual fun Logo() {
Image(
painter = painterResource("mopcon-logo.jpg"),
)
}
平台差異 pt.1
—

39. 平台差異 pt.2
—
https://github.com/alialbaali/Kamel

40. commonMain
build.gradle.kts
kotlin {
sourceSets {
val commonMain by getting {
dependencies {
!" !!#
implementation("com.alialbaali.kamel:kamel-image:0.4.1")
}
}
}
}
KamelImage(
resource = lazyPainterResource(data = url),
onLoading = { CircularProgressIndicator(it) }
)
平台差異 pt.2
—

41. #
本⽇重點回顧

42. 多平台開發痛點
—
• 語⾔只專注在特定平台
• UI 長得像但⼜不太⼀樣
• 業務邏輯需要在各平台分別實作

43. Kotlin 編譯器
—

44. 多平台共享
—
Compose for Web
Common Kotlin
UI
Logic
Server Web Desktop Android iOS
Compose for Desktop Jackpot Compose
DTO(s) Service
Validation
HTTP (Req & Res)
SwiftUI
or
Multiplatform UI

45. Kotlin Multiplatform 的好處
—
• 多個平台使⽤同⼀種熟悉的語⾔
• 在平台間共⽤程式碼
• 最⼤化的共⽤ UI
• 儘可能的 Native

46. • Serialization
• Coroutine
• Datetime
• Ktor
Kotlin Multiplatform ⽣態系
—

47. ⚠
Sample Code 畢竟是 Sample Code

48. • Server 端接上 DB
• Server 端的驗證和 QR Code 讀取防護
• Server 端和 Client 端共⽤驗證邏輯
• Android 端導入更多的 Clean Architecture
• Desktop 端考量不同平台的 UI 設計
• Desktop 端導入更多的 Clean Architecture
永遠可以更好
—

49. https://github.com/joreilly/PeopleInSpace
全平台開發範例
—
• 所有平台⼀應俱全！

50. SwiftUI
or
Multiplatform UI
Compose for Web
Common Kotlin
UI
Logic
Server Web Desktop Android iOS
Compose for Desktop Jackpot Compose
DTO(s) Service
Validation
HTTP (Req & Res)
Kotlin Multiplatform 的各種⼦專案
—
Kotlin Multiplatform Mobile

51. Compose for Web
Common Kotlin
UI
Logic
Server Web Desktop Android iOS
Compose for Desktop Jackpot Compose
DTO(s) Service
Validation
HTTP (Req & Res)
SwiftUI
or
Multiplatform UI
Kotlin Multiplatform 的各種⼦專案
—
Compose Multiplatform

52. • 純函式咖啡
- https://github.com/PureFuncInc/purefunc-cafe
- 每週三晚上九點在 https://discord.gg/purefunc 的語⾳頻道⼤家⼀
起參與
• 純函式技術週報
- https://github.com/PureFuncInc/purefunc-technique-weekly-news
- 每週三出刊

53. Kimoji
⽤ Emoji 記錄你的⼼情⽇記

55. 歡迎參加 Kotlin 社群
—
Line 群 Telegram 群
加入討論群取得最新資訊
tw.kotlin.tips

56. Kotlin Collection
全⽅位解析攻略
—
collection.kotlin.tips
• 詳解 200+ Collection ⽅法
• 解析標準函式庫原始碼
• 實務範例
• 免費下載速查地圖

57. 關注粉絲⾴及頻道
—
Coding 職⼈塾
Kraftsman

58. Q&A
—
以 Kotlin Multiplatform 制霸全平台
范聖佑
JetBrains Developer Advocate
shengyou.fan@jetbrains.com
John Lu
時刻科技 Android Developer
johnlu@seekrtech.com
黃健旻
純函式共同創辦⼈
vincent@purefunc.net
以 Compose & Ktor 打造 Mobile、Desktop 及 Backend API
% 會後問答集
https://bit.ly/qa-for-kotlin-multiplatform