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 記錄你的⼼情⽇記

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

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

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

57.
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