Kotlin KMP- Kotlin 終於可以用Compose UI+ Multiplatform 來開發多平台(對iOS UI 就是在說你)
最近 KotlinConf 2023，整個活動很盛大而且實體會議，實體會議其實跟線上會議就不一樣，在寫這篇的時候活動也都還在進行到第二天，這次也釋出很多東西，整個資訊焦慮症都快爆炸了，好先不離題
>正名一下 2024.05 目前kotlin已經更名為KMP (Kotlin MultiPlatform)，原本的MultiMobile 現在已經跨足到Web /Desktop 等等所以這個名稱更適合
直接總結一下
有點雜亂，我也還在整理，有錯歡迎糾正，最新總結下來看似趨勢會是
在同一個專案中，可以透過kotlin撰寫
+ share code
+ share UI (Compose)
一次你可以開發到多個平台
+ Web(JS / WASM)
+ Mobile( iOS / Android)
+ Desktop (windows / Mac / Linux )
KMP有幾個問題還存在著或者待解決
- 目前還是beta ，預期2024才會stable，所以目前也還不 適合拿來做完整的產品程式
- 目前KMP上還是缺少好的用的lib ,對於多平台需要串接對應的一些介面還是很繁瑣，但相信未來應該會逐漸將這些門檻減少，漸漸的Flutter 化，但至少這個起手式已經開始建構出來了
- Gradle的設定相當繁雜，如果有哪一個地方沒設定好，很容易專案就會壞掉或者花上很多時間修改，希望未來能有一個更方便的設置方式，我相信沒有誰能單純靠文字編輯器就把這些專案設定值手動寫出來，都是透過IDE template 產生好預設的專案架構去開始動工
另外Mac App / iOS這是一個本身的缺點如果要開發iOS App你必須要有一台Mac安裝Xcode，然後你才能實際run iOS的程式
其他看法
Flutter 應該會漸漸被威脅到，畢竟原本撰寫Android的工程師可以使用既有的語言熟悉度與framework來切換到多平台中，未來第三方函式庫或者官方支援度越來越高後，相信使用率應該可以慢慢拉高，而且可見google 與 jetbrains都開始想要吃下跨平台的市場( kmm/ flutter)，反而siwft除了第三方開發者自己也搞這套，不然想必Apple官方應該不太可能推出這樣的東西，未來可見 KMM 與Flutter的兢爭，也會是一個討論的話題
有jetbrains 與google深度的合作，這次可以預見未來Kotlin對於各領域的應用可以越來越廣，這又是另一個話題了，譬如kotlin/native , kotlin/js , kotlin/wasm , kotlin/script等等
Update
看到這邊覺得他講的很很清楚
有興趣看其他範例可以參考另外這文章 (visaul effect / chat / widget grallery)
直接講到重點
以往的 Kotlin Multiplefrom 本來就支援
Web (js)
Android(shareCode)
iOS (shareCode)
Desktop (Windows/ Linux / Mac / Ubuntu)
+ Compose UI
在後來加上Compose 後，變成不僅可以開發share code，還可以share UI
Web UI
Desktop Ui
iOS UI
Android Ui
Kotlin and Compose
而在談到另一段很妙的是
Kotlin是JetBrains開發的，Compose Ui是Google 發明的，但兩者互相支援，互相疊加後變成兩邊密不可分,現在 KMM 中也會有越來越多Compose應用，而Google自己的內部使用Kotlin的比例也越來越高( 包含 backend) ,而且會議上Google開發人員解說他們的workspace team也開始使用KMM 開發Google docs iOS版本 (我認為應該是雙平台都使用kmm來開發)
+Kotlin / WASM
接著在談到kotlin 支援 Wasm ，也就是 Web Assemble，因此整體變得更廣泛,以前的web 功能似乎是用nodeJs來達成的，而web assemble 想當然就是效能更好，因此目前最後的陣營就是
Compose Multiplatform
Web
webJs
webWasm
webWasmJs (看到有這選項)
Desktop ( windows / linux / Mac /ubuntu)
Mobile ( Android / iOS)
— — — — — — — — — —
+ Compose UI = Compose Multiplatform
聽起來就讓人相當興奮，所以讓久久沒寫文章的我還是擠了時間想要寫這篇
回到正題，在會議上demo了一個用Compose + KMM 開發出多平台的介面，就是現在看到的這個畫面
可以在這邊看到
但這是source code，直接可以抓取這個sample來跑，只是要跑有幾個小問題，你如果是要玩mobile的KMM，他會 建議你使用這個template
打開這個專案，他是一個跨平台兼具Compose UI的範本專案，他其實是只有Hello world的版本， 可以看到他多平台程式資料夾，但你用IntelliJ IDEA打開的時候發現在右上角的執行平台沒辦法選擇iOS來執行，建立Configuration也沒辦法建立出iOS的執行選項，這時候我就想，該不會是因為沒有裝新版本的外掛，但我剛我在IDEA 中的plug-in搜尋都沒有找到Compose Multiplatform的外掛？就很奇怪，但其他平台都可以run起來無誤
正當我感到到困惑也找了很久想說也許是發表但實際沒真正可以公開測試使用，搞半天，於是我就放棄了
本來是需要使用Android Studio
直到後來我又看了一次影片，看到是Kotlin Multiplatform Mobile這個外掛，於是我進Intellj IDEA找，居然找不到，後來我就到jetbrains的網站找，有找到啊，直到看到一個地方我才驚覺，這個外掛只支援Android Studio
立刻改用Android Studio安裝並且打開該專案，結果發現終於真的可以執行了出現了iOS的按鈕
可以按了
p.s 前提是你必須在Mac上面run並且安裝ios xCode
然後你就會跑出一個Hello World的iOS App
android
重點是這邊UI跟共用邏輯程式(shareCode)都是kotlin，如果你要拿來開發雙平台就可以參考這一個範本，但請記得要使用Android Studio開啟他並且安裝外掛。
既然打開了就來看一下基本的一些架構模組就只有三個
include 也需要這三個
Android
那兩個平台的分別是會要放什麼呢？其實就是放原本各自平台專案的設定檔。
以上這是一個你想要透過這個工具開發雙平台的範本專案，那我們接下來看看，如果要開發所有平台的範本會是怎麼樣的專案設置
後來發現他有釋出另外一個對平台ios + andoird + desktop Temple有興趣可以自行參考這邊
— -
Compose Multiplatform for Web
在別處可以看到他有其他的平口可以build多個平台的專案範例，那我們來看其中一個image viewer ， 測試記得用Android Studio打開測試打開後幾乎沒有什麼太大的問題就可以直接執行可以看到右上角可以選擇android或iOS或者desktop
不過在Android Studio中可以發生沒有其他平台的選項或是執行也會發生時猜測可能是要用其他IDEA來執行,總之先來執行看看iOS跟Android的畫面
Android
Android on Chrome emulator
不過在這邊這個專案裡面還有10的專案設定是被Mark掉了，所以目前無法執行，也許未來版本會修正
no ios ?
for desktop + ios
desktop版本需要在IntelliJ IDEA裡面才能直接透過UI執行, 你可以透過gradle執行task 來啟動
for desktop (mac) fullscreen
for web
你可以透過以下的步驟來執行wasmRun
gradle task -> select -> other -> wasmRun (because jsRun will failed)
如果瀏覽器開啟Safari你可能會看到空白的頁面，也許Safari 還沒支援WASM。所以建議可以使用Chrome或者Edge 來開啟
官方也有這樣的說明
so we use Edge to open the wasmRun result
使用Edge 瀏覽器來開啟
功能都跟App功能一樣,不過手機版的U I其實在web上面會有一些衝突或者不適合的操作介面,未來可能都會需要根據不同的平台有些微的版面調整
有興趣拿來自己下載過來測試看看
— —
Check source code
我們來看一下這個多平台式的架構是什麼樣子？
shared 下面有多個平台的資料夾, 主要的邏輯跟Ui都在commonMain, 那你會問其他的資料夾用途是什麼？ 不是shared ui +Code嗎？
主要會是個平台譬Bitmap or Image 有不同的實作物件,因此當使用到這些各自平台的物件就會需要呼叫個平台的介面程式,所以這邊可以看到有一個缺點就是你開發了多少個平台就會需要串接到多少個介面(ex. camera / image / bitmap …)
其他細節等我了解之後再來補充
Android Studio裝了外掛後，如何產生一個新的專案？
在產生新專案的地方可以選擇Kotlin Multiplatform APP
如果你使用IntelliJ IDEA你可以看到他只能建立這兩個選項
Kotlin Multiplatform
Compose Multiplatform
又分別可以建立不同功能
這邊要說目前的版本其實有點多，由上面的IDE功能目前看到
# Kotlin Multiplatform
是可以跨多用途的
## Multiplatform
Full-Stack Web Application
Library
Native Application
## Kotlin/JS
Browser Application
React Application
Node.JS Application
## JVM
Console Application
再簡化一下
# Compose Multiplatform Application
Desktop
Web
# Kotlin Multiplatform Mobile
Android
iOS
最後用ChatGPT 來幫忙總結一下
Kotlin Multiplatform (KMP) 是一個跨平台開發框架，可以使用 Kotlin 語言撰寫共享代碼和UI，並且一次開發可以涵蓋多個平台，包括Web(JS / WASM)、移動裝置(iOS / Android)和桌面(windows / Mac / Linux)。目前 KMP 還在 beta 階段，但已經建構出了跨平台開發的基礎架構，未來將會逐漸改善缺點，例如 Gradle 設定的複雜度、缺少好的用的 lib 等問題。開發 iOS App 需要一台 Mac，這也是一個限制。未來 KMP 有望取代 Flutter 成為跨平台開發的主流框架，而 Kotlin 也可以應用於多個領域，例如 Kotlin/Native、Kotlin/JS、Kotlin/WASM、Kotlin/Script 等。
以上大概就是目前整理的狀況，有其他會再補充囉。
