[MOPCON 2022] 以 Kotlin Multiplatform 制霸全平台
4 likes817 views
本文件介绍了使用Kotlin Multiplatform、Compose和Ktor构建移动、桌面及后端API的最佳实践。它回顾了Kotlin的发展历史，讨论了多平台开发的痛点以及Ktor和Compose的特点，并提供了注册和登录流程的示例代码。最后，文档还强调了多平台开发的优势和社区资源。
![[MOPCON 2022] 以 Kotlin Multiplatform 制霸全平台](https://image.slidesharecdn.com/kotlin-multiplatform-221017125206-52db0fac/85/MOPCON-2022-Kotlin-Multiplatform-54-320.jpg)
[MOPCON 2022] 以 Kotlin Multiplatform 制霸全平台
- 1. 以 Compose & Ktor 打造 Mobile、Desktop 及 Backend API 以 otlin Multiplatform 制霸全平台 Photo by Jared Murray on Unsplash 范聖佑 JetBrains Developer Advocate John Lu 時刻科技 Android Developer 黃健旻 純函式 共同創辦⼈
- 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
- 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 本⽇⽰範 —
- 13. 專案架構 — Server Desktop Android • 以 Ktor 實作註冊及登入 API • TOTP 驗證機制 • 以 Jetpack Compose 實作 UI • 串接 API • 以 Compose for Desktop 實作 UI • 串接 API • 共⽤ DTO(s) • 共⽤ Client SDK • 共⽤ UI
- 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 官⽅部落格
- 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 —
- 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 永遠可以更好 —
- 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 - 每週三出刊
- 55. 歡迎參加 Kotlin 社群 — Line 群 Telegram 群 加入討論群取得最新資訊 tw.kotlin.tips
- 56. Kotlin Collection 全⽅位解析攻略 — collection.kotlin.tips • 詳解 200+ Collection ⽅法 • 解析標準函式庫原始碼 • 實務範例 • 免費下載速查地圖
- 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