這場分享將介紹 Kotlin Multiplatform 的發展藍圖，並以 Compose Multiplatform 為例，實際以 Kotlin 撰寫 Android 及 Desktop 兩個平台的應用程式，讓開發者感受一下 Kotlin 多平台開發的威力！

1. 以 Compose Multiplatform 為例
初探 otlin Multiplatform
范聖佑 (Shengyou Fan)
JetBrains Developer Advocate
Google I/O Extended'22 Party
2022/07/23
Photo by JOSHUA COLEMAN on Unsplash

2. 範例程式碼
—
Android：jetpack-compose-demo
Desktop：compose-for-desktop-demo

3. 2017 2019
Kotlin 發展史
—
2011
JetBrains 公開
Kotlin 語⾔
2016
正式發佈
Kotlin 1.0
Google I/O宣佈
⽀援以 Kotlin
開發 Android
Google I/O宣佈
Android 開發將
以 Kotlin 優先
2020
Kotlin 團隊改
以 Date-driven
發佈新版本
2022
發佈 Kotlin 1.7

4. ⽤⼀個語⾔開發多個平台
—

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

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

7. ⽰範情境
—
早安 ! 今天新加坡樂透的頭獎⾦額⾼達
$8,600,000（約新台幣 1.8 億）耶！快給
我 1 組 6 個 1 到 49 之間的不重複數字，
我要去買個機會，假如明天我沒來上班
的話，你就知道發⽣什麼事了 "
#

8. 實作步驟
—
• 介⾯ (UI) 實作
• 事件 (Event)
• 狀態 (State)
• 業務邏輯 (Business Logic)
• 跨平台

9. 介⾯實作
(抽獎球)
—
@Composable
fun Ball(
!!"
) {
Box(
!!"
) {
Text(
text = !!"
)
}
}

10. 介⾯實作
(抽獎介⾯)
—
@Composable
fun LotteryBoard() {
Column(
!!"
) {
(1!#49).chunked(7).forEach { group !"
Row {
group.forEach {
Ball(it, lotteryNumbers)
}
}
}
}
}

11. 事件
(透過點擊觸發事件)
—
@Composable
fun LotteryBoard() {
!$!!"
Button(onClick = {
}) {
Text(
text = "選號 $"
)
}
}

12. 業務邏輯
(產⽣ 6 組隨機號碼)
—
class LotteryService {
fun generate(amount: Int = 49, take: Int = 6): List<Int> =
(1!#amount).shuffled().take(take)
}

13. 狀態
(事件觸發狀態更新)
—
fun LotteryBoard() {
var lotteryNumbers by remember {
mutableStateOf(listOf<Int>())
}
!$ !!"
Button(onClick = {
lotteryNumbers = !!"
}) {
Text(
text = "選號 $"
)
}
}

14. 快速回顧
—
Kotlin 是⼀個
多平台開發⽣態系 是多平台開發的成功案例
Compose Multiplatform 以樂透抽獎機為例
實作雙平台應⽤程式

15. • 遵守 Android 開發慣例 (Material、字串、顏⾊…)
• 動畫、進退場、互動效果
• 將專案轉成 Multiplatform 專案 (增加共⽤程式碼)
更進⼀步
—

16. 了解更多
—
Jetpack Compose 官網 Compose Multiplatform 官網

17. 推薦影片
—
Kotlin ⼗週年的故事 Compose Multiplatform
正式發佈
Compose Multiplatform
的故事

18. Kotlin Collection 全⽅位解析攻略
—
在剛剛 Demo 的過程中，有⽤了哪些
Kotlin 的集合⽅法？
%
collection.kotlin.tips

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

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

21. 范聖佑 (Shengyou Fan)
shengyou.fan@jetbrains.com
Q&A
—
初探 Kotlin Multiplatform