Successfully reported this slideshow.
Your SlideShare is downloading. ×

[MOPCON 2022] 以 Kotlin Multiplatform 制霸全平台

Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad

Check these out next

1 of 58 Ad

[MOPCON 2022] 以 Kotlin Multiplatform 制霸全平台

Download to read offline

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

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

Advertisement
Advertisement

More Related Content

More from Shengyou Fan (20)

Recently uploaded (20)

Advertisement

[MOPCON 2022] 以 Kotlin Multiplatform 制霸全平台

  1. 1. 以 Compose & Ktor 打造 Mobile、Desktop 及 Backend API 以 otlin Multiplatform 制霸全平台 Photo by Jared Murray on Unsplash 范聖佑 JetBrains Developer Advocate John Lu 時刻科技 Android Developer 黃健旻 純函式 共同創辦⼈
  2. 2. 範例程式碼 — https://github.com/shengyou/kotlin-multiplatform-demo
  3. 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. 4. 多平台開發痛點 — • 語⾔只專注在特定平台 • UI 長得像但⼜不太⼀樣 • 業務邏輯需要在各平台分別實作
  5. 5. 多平台開發痛點 — • 語⾔只專注在特定平台 • UI 長得像但⼜不太⼀樣 • 業務邏輯需要在各平台分別實作
  6. 6. 多平台開發痛點 — • 語⾔只專注在特定平台 • UI 長得像但⼜不太⼀樣 • 業務邏輯需要在各平台分別實作 DTO Validation Service HTTP
  7. 7. Kotlin Multiplatform — Server Kotlin/JVM Web Kotlin/JS Desktop Kotlin/JVM Android Kotlin/JVM iOS Kotlin/Native
  8. 8. Kotlin 編譯器 —
  9. 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. 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. 11. 註冊流程 — 註冊帳號 產⽣ QR Code
  12. 12. 登入流程 — 驗證帳號 及 認證碼 取得認證碼
  13. 13. 專案架構 — Server Desktop Android • 以 Ktor 實作註冊及登入 API • TOTP 驗證機制 • 以 Jetpack Compose 實作 UI • 串接 API • 以 Compose for Desktop 實作 UI • 串接 API • 共⽤ DTO(s) • 共⽤ Client SDK • 共⽤ UI
  14. 14. 建立 Multiplatform 專案 —
  15. 15. 專案結構 — • android → Android 主程式 • common → 共⽤ UI 及商業邏輯 • desktop → Desktop 主程式 • server → Backend API 主程式
  16. 16. Server Desktop Android • 以 Ktor 實作註冊及登入 API • TOTP 驗證機制
  17. 17. Ktor 框架 — Server Client 語法簡單 輕量 適合做微服務 HTTP Client ⽀援多平台 搭配 kotlinx.serialization 做 SDK
  18. 18. 程式進入點 — fun main() { embeddedServer(Netty, port = 8080, host = "0.0.0.0") { !" Plugin List !" !!# }.start(wait = true) }
  19. 19. 設定 Routing — fun Application.configureTwoFactorAuth() { routing { install(ContentNegotiation) { json() } get("!!#url!!#") { !" !!# } post("!!#url!!#") { !" !!# } } }
  20. 20. 設定 Handler — suspend fun signup(call: ApplicationCall) = run { val request = call.receive<UserSignupRequest>() !" !!# call.respond( status = HttpStatusCode.OK, message = !!# ) }
  21. 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. 22. TOTP - Time-base one-time password — 圖片來源: twilio 官⽅部落格
  23. 23. 實作 TOTP 的⼯具 — https://github.com/samdjstevens/java-totp
  24. 24. 產⽣ QR Code — QrData .Builder() .label("!!#") .secret("!!#") .issuer("!!#") .algorithm(HashingAlgorithm.SHA1) .digits(6) .period(30) .build() .run { ZxingPngQrGenerator().generate(this) }
  25. 25. 回傳 QR Code — suspend fun qrcode(call: ApplicationCall) = run { !" !!# call.respondBytes( bytes = !!#, contentType = ContentType.Image.PNG, status = HttpStatusCode.OK, ) }
  26. 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. 27. Server Desktop Android • 以 Jetpack Compose 實作 UI • 串接 API
  28. 28. Jetpack Compose — • Declarative • Embrasces Kotlin • Inter-ops with Views • Unbundled from OS
  29. 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. 30. 實作 UI — @Composable fun WelcomeScreen( !" !!# ) { !" !!# } @Preview @Composable fun WelcomeScreenPreview() { WelcomeScreen(!!") }
  31. 31. 實作 Satate — @Immutable data class AppState( !" !!# ) { !" !!# }
  32. 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. 33. Server Desktop Android • 以 Compose for Desktop 實作 UI • 串接 API
  34. 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. 35. Compose ⽣態系 — 多平台 Jetpack Compose 建立⼿機應⽤程式介⾯ Compose for Desktop 建立桌⾯應⽤程式介⾯ Compose for Web 建立網⾴應⽤程式介⾯
  36. 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. 37. 多平台共⽤ — • android → Android 主程式 • common → 共⽤程式 - androidMain → 平台專⽤實作 - commonMain → 共⽤核⼼ (如 UI、SDK 等) - desktopMain → 平台專⽤實作 • desktop → Desktop 主程式
  38. 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. 39. 平台差異 pt.2 — https://github.com/alialbaali/Kamel
  40. 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. 41. # 本⽇重點回顧
  42. 42. 多平台開發痛點 — • 語⾔只專注在特定平台 • UI 長得像但⼜不太⼀樣 • 業務邏輯需要在各平台分別實作
  43. 43. Kotlin 編譯器 —
  44. 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. 45. Kotlin Multiplatform 的好處 — • 多個平台使⽤同⼀種熟悉的語⾔ • 在平台間共⽤程式碼 • 最⼤化的共⽤ UI • 儘可能的 Native
  46. 46. • Serialization • Coroutine • Datetime • Ktor Kotlin Multiplatform ⽣態系 —
  47. 47. ⚠ Sample Code 畢竟是 Sample Code
  48. 48. • Server 端接上 DB • Server 端的驗證和 QR Code 讀取防護 • Server 端和 Client 端共⽤驗證邏輯 • Android 端導入更多的 Clean Architecture • Desktop 端考量不同平台的 UI 設計 • Desktop 端導入更多的 Clean Architecture 永遠可以更好 —
  49. 49. https://github.com/joreilly/PeopleInSpace 全平台開發範例 — • 所有平台⼀應俱全!
  50. 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. 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. 52. • 純函式咖啡 - https://github.com/PureFuncInc/purefunc-cafe - 每週三晚上九點在 https://discord.gg/purefunc 的語⾳頻道⼤家⼀ 起參與 • 純函式技術週報 - https://github.com/PureFuncInc/purefunc-technique-weekly-news - 每週三出刊
  53. 53. Kimoji ⽤ Emoji 記錄你的⼼情⽇記
  54. 54. 歡迎參加 Kotlin 社群 — Line 群 Telegram 群 加入討論群取得最新資訊 tw.kotlin.tips
  55. 55. Kotlin Collection 全⽅位解析攻略 — collection.kotlin.tips • 詳解 200+ Collection ⽅法 • 解析標準函式庫原始碼 • 實務範例 • 免費下載速查地圖
  56. 56. 關注粉絲⾴及頻道 — Coding 職⼈塾 Kraftsman
  57. 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

×