[JCConf 2023] 從 Kotlin Multiplatform 到 Compose Multiplatform：在多平台間輕鬆共用業務邏輯與 UI 介面
0 likes610 views
本文讨论了如何使用 Kotlin Multiplatform 和 Compose Multiplatform 实现跨平台应用程序的业务逻辑和用户界面共享。通过提供示例代码，文档展示如何构建支持 Android、iOS 和桌面等多个平台的应用程序，并介绍了相关技术、开发环境和依赖配置。最后，文章强调了 Kotlin Multiplatform 的优势和生态系统，以及未来的实施方向。
[JCConf 2023] 從 Kotlin Multiplatform 到 Compose Multiplatform：在多平台間輕鬆共用業務邏輯與 UI 介面
- 1. 范聖佑 JetBrains Developer Advocate JCConf Taiwan 2023 2023/10/06 在多平台間輕鬆共⽤業務邏輯與 UI 介⾯ 從 otlin Multiplatform 到 Compose Multiplatform
- 5. 多平台開發痛點 — • 各種型式的前端 • 需要適應各種開發語⾔ • 重複實作的業務邏輯 DTO Validation Service HTTP
- 7. 透過 Kotlin Multiplatform 共⽤業務邏輯 — Server Web Desktop Android iOS OS API Browser API OS API Android API iOS API 以 Kotlin Multiplatform 共⽤業務邏輯
- 8. 使⽤ Kotlin Multiplatform 技術開發雙平台 Mobile App —
- 9. Server Web Desktop Android iOS OS API Browser API OS API Android API iOS API 以 Kotlin Multiplatform 共⽤業務邏輯 Android View SwiftUI 使⽤ Kotlin Multiplatform 技術開發雙平台 Mobile App — Kotlin Multiplatform Mobile
- 10. JCConf 2021 年的分享主題 — https://youtu.be/SZGqMJXgOJg
- 11. 🤔 有沒有辦法也共⽤ UI 呢？
- 12. Compose Multiplatform — 多平台 Jetpack Compose 建立⼿機應⽤程式介⾯ Compose for Web Compose for Desktop 建立桌⾯應⽤程式介⾯ 建立網路應⽤程式介⾯
- 13. 透過 Compose Multiplatform 共⽤ UI — Server Web Desktop Android iOS OS API Browser API OS API Android API iOS API 以 Kotlin Multiplatform 共⽤業務邏輯 以 Compose Multiplatform 共⽤ UI Android View Swing SwiftUI Compose Multiplatform
- 14. JCConf 2022 年的分享主題 — https://youtu.be/Ysh5CLkPiyE
- 15. 🙄 可是我想要的是 iOS 啊…
- 17. 擴⼤ Compose Multiplatform 版圖 — Server Web Desktop Android iOS OS API Browser API OS API Android API iOS API 以 Kotlin Multiplatform 共⽤業務邏輯 Android View Swing SwiftUI Compose Multiplatform 以 Compose Multiplatform 共⽤ UI 以 Compose Multiplatform 共⽤ UI
- 20. 實作平台 — • Android • iOS • Desktop • Backend API Backend Desktop Android iOS HTTPs Request/Response JSON Client Server
- 22. ⽰範重點 — • 多平台共⽤ UI - Compose Multiplatform • 平台專⽤ API - 偵測平台名稱 • 共享業務邏輯 - ViewModel、HTTP、Data Class • 整合 Multiplatform 函式庫 - Ktor Client、Voyager、Kamel • 後端 API 服務 - Ktor Server
- 24. 建立開發環境 — • Mac with macOS • JDK • Android Studio • Kotlin Multiplatform Mobile Plugin • Xcode + SDK • Cocoapods
- 25. kdoctor 指令⼯具 — 透過 Homebrew 安裝的指令⼯ 具，可⽤於檢查開發環境是否符 合 Kotlin Multiplatform Mobile 的 要求？
- 26. 建立 Compose Multiplatform 專案 —
- 27. 專案資料夾結構 — • androidApp → Android 主程式 • iosApp → iOS 主程式 • desktopApp → Desktop 主程式 • shared → 共⽤程式碼 - commonMain → 多平台共⽤實作 - androidMain → Android 平台專⽤實作 - iosMain → iOS 平台專⽤實作 - desktopMain → Desktop 平台專⽤實作 • server → 後端 API 實作 👈
- 28. 多平台共⽤ UI —
- 29. 實作⾴⾯ — object LoginScreen : Screen { @Composable override fun Content() { / / . . . } }
- 30. 各區塊元件化 — Logo() DemoOnText() Spacer() LoginForm( / * . . . * / ) Spacer() PasswordForgetLink() SignUpLink() TextField( value = . . . , label = { Text(text = "Username") }, onValueChange = { / * . . . * / }, modifier = . . . , ) TextField( value = . . . , label = { Text(text = "Password") }, visualTransformation =, keyboardOptions =, onValueChange = { / * . . . * / }, modifier = . . . , ) Button( onClick = { / * . . . * / }, shape = RoundedCornerShape(50.dp), modifier = . . . , ) { Text(text = "Login") }
- 31. 排版差異化 (Mobile) — Column( modifier = . . . , verticalArrangement = Arrangement.Center, horizontalAlignment = Alignment.CenterHorizontally ) { / / . . . Column( modifier = . . . , ) { / / . . . } / / . . . } Box( modifier = . . . , ) { / / . . . }
- 32. 排版差異化 (Desktop) — Row( modifier = . . . , horizontalArrangement = Arrangement.Center ) { Column( modifier = . . . , verticalArrangement = Arrangement.Center, horizontalAlignment = Alignment.CenterHorizontally, ) { / / . . . } Column( modifier = . . . , verticalArrangement = Arrangement.Center, horizontalAlignment = Alignment.CenterHorizontally, ) { / / . . . } }
- 33. 平台專⽤ API —
- 35. 偵測平台版本 (expect 部份) — expect fun getPlatformName(): String shared - commonMain - androidMain - iosMain - desktopMain
- 36. 偵測平台版本 (actual 部份) — // androidMain actual fun getPlatformName(): String = "Andriod (API ${android.os.Build.VERSION.SDK_INT})" // iosMain actual fun getPlatformName(): String = "iOS (${UIDevice.currentDevice.systemVersion})" // desktopMain actual fun getPlatformName(): String = "Desktop (JVM ${Runtime.version()})" shared - commonMain - androidMain - iosMain - desktopMain
- 37. 偵測平台版本 (UI 部份) — @Composable fun DemoOnText() { Text( text = "Demo on ${getPlatformName()}", style = TextStyle( fontSize = . . . , fontFamily = . . . , color = . . . , ), ) }
- 38. 共享業務邏輯 — API 發送 HTTP Request 接收 HTTP Response UI 換⾴ 載入網路圖片
- 39. 整合 Multiplatform 函式庫 — • Ktor - HTTP Client • kotlinx.serialization - JSON serialization/deserialization • kotlinx.coroutines - Coroutine • Voyager - Navigation、ViewModel • Kamel - Asynchronous Media Loading
- 40. 安裝相依套件 — kotlin { sourceSets { val commonMain by getting { dependencies { implementation("io.ktor:ktor-client-core:$ver") implementation("org.jetbrains.kotlinx:kotlinx-coroutines-core:$ver") implementation("io.ktor:ktor-client-content-negotiation:$ver") implementation("io.ktor:ktor-serialization-kotlinx-json:$ver") implementation("cafe.adriel.voyager:voyager-navigator:$ver") implementation("io.ktor:ktor-client-core:$ver") implementation("org.jetbrains.kotlinx:kotlinx-coroutines-core:$ver") implementation("io.ktor:ktor-client-content-negotiation:$ver") implementation("io.ktor:ktor-serialization-kotlinx-json:$ver") implementation("media.kamel:kamel-image:$ver") } } val androidMain by getting { dependencies { implementation("io.ktor:ktor-client-okhttp:$ver") } } val iosMain by creating {
- 41. 載入⾴⾯ — @Composable fun MainApplication() { val screen = when (getTarget()) { Target.DESKTOP - > DesktopLoginScreen else - > MobileLoginScreen } Navigator(screen) }
- 42. 實作 ViewModel — class LoginScreenModel : StateScreenModel<LoginScreenModel.State>(State.Init) { private val httpClient = HttpClient { install(ContentNegotiation) { json() } defaultRequest { url(apiBaseUrl) } expectSuccess = true } sealed class State { data object Init : State() data class LoggedIn(val user: User) : State() } fun login(username: String, password: String) { coroutineScope.launch { val loginResponse: LoginResponse = httpClient.post(" . . . ") { setBody(LoginRequest(username, password)) contentType(ContentType.Application.Json) • 設定 HTTP Client • 設定 State • 發送 HTTP Req/Res • 關閉 HTTP Client
- 43. 使⽤ ViewModel — object LoginScreen : Screen { @Composable override fun Content() { val screenModel = rememberScreenModel { LoginScreenModel() } val username = remember { mutableStateOf(TextFieldValue()) } val password = remember { mutableStateOf(TextFieldValue()) } Button( onClick = { screenModel.login( username.value.text, password.value.text ) }, shape = RoundedCornerShape(50.dp), modifier = . . . , ) { Text(text = "Login") } } }
- 44. 依狀態換⾴ — object LoginScreen : Screen { @Composable override fun Content() { val navigator = LocalNavigator.currentOrThrow val screenModel = rememberScreenModel { LoginScreenModel() } val state by screenModel.state.collectAsState() val username = remember { mutableStateOf(TextFieldValue()) } val password = remember { mutableStateOf(TextFieldValue()) } when (val loggedInState = state) { is LoginScreenModel.State.Init - > {} is LoginScreenModel.State.LoggedIn - > { navigator.push(HomeScreen(loggedInState.user)) } } } }
- 45. 載入網路圖片 — KamelImage( resource = asyncPainterResource( data = Url(user.profileImageUrl) ), modifier = . . . , contentDescription = . . . , )
- 46. 後端 API 服務 — Server Client 語法簡單 輕量 適合做微服務 HTTP Client ⽀援多平台 搭配 kotlinx.serialization 做 SDK
- 47. 共⽤ Data Class — @Serializable data class LoginRequest( val username: String, val password: String, ) @Serializable data class LoginResponse( val result: Boolean, val message: String, val user: User? = null, ) @Serializable data class User( val id: Int, val username: String, val password: String, val email: String, val displayName: String, val profileImageUrl: String, )
- 48. Ktor Server — fun main() { embeddedServer(Netty, port = 8080, host = "0.0.0.0") { install(ContentNegotiation) { json() } // Ktor plugins configureLogin() }.start(wait = true) }
- 49. 實作 API Service — fun Application.configureLogin() { routing { post("...") { // 接收 HTTP Request // 反序列化成 Data Class val req = call.receive<LoginRequest>() // 登入驗證程式碼 // 回傳 HTTP Response call.respond( LoginResponse( result = ..., message = "...", user = loggedInUser, ) ) } } }
- 50. 🤓 本⽇回顧
- 51. Kotlin Multiplatform 全版圖 — Server Web Desktop Android iOS OS API Browser API OS API Android API iOS API 以 Kotlin Multiplatform 共⽤業務邏輯 以 Compose Multiplatform 共⽤ UI Android View Swing SwiftUI
- 52. 實作範例 —
- 53. ⽰範內容包括… — • 多平台共⽤ UI - Compose Multiplatform • 平台專⽤ API - 偵測平台名稱 • 共享業務邏輯 - ViewModel、HTTP、Data Class • 整合 Multiplatform 函式庫 - Ktor Client、Voyager、Kamel • 後端 API 服務 - Ktor Server
- 54. Kotlin Multiplatform 優勢 — • ⼀個語⾔跨多個平台 • 原⽣效能 • 可依需求調整共享程式碼的比例
- 55. 對比其他解決⽅案 —
- 57. • 各平台設定檔 • Mobile 螢幕旋轉 • Network Retry • Error Handling • 前後端共⽤驗證邏輯 • 整合資料庫 • 導入更多的 Clean Architecture 可進⼀步完善的實作⽅向 —
- 58. Kotlin Multiplatform 學習資源 — Kotlin Multiplatform 官⽅⾴⾯ Compose Multiplatform 官⽅⾴⾯
- 60. 實務案例 — ⼿機開發編年史 (攜程) 來⾃阿⾥巴巴及美團的 Kotlin Multiplatform 應⽤案例 #8 Kotlin 爐邊漫談 Podcast https: / / podcast.kotlin.tips/ #5
- 61. 歡迎參加 Kotlin 社群 — Line 群 Telegram 群 加入討論群取得最新資訊 tw.kotlin.tips
- 62. [email protected] fb.me/shengyoufan shengyoufan @shengyou 在多平台間輕鬆共⽤業務邏輯與 UI 介⾯ 從 otlin Multiplatform 到 Compose Multiplatform