Compose Multiplatform 實戰：初戰，安裝CMP環境吧。

Compose Multiplatform (簡稱CMP) UI框架能將Kotlin程式碼共用能力推向新高度
你可以一次實作使用者介面
並在所有目標平台上使用——包括iOS、Android、桌面和Web
今天我們將開始一步一步安裝環境

我們要建立一個CMP專案能製作出多平台(Android、iOS、Web、Desktop) 的應用程式
所以要先了解怎麼樣建立一個CMP的專案

你們可以根據下面列出項目安裝
其中有部分是選擇性
大家可以依據自己的需求去做安裝

• Android Studio
• Java and JDK
• Xcode
• Kotlin plugins
• (Optional) Kotlin Multiplatform plugin
• (Optional) CocoaPods
• (Optional) kdoctor
• (Optional) Browsers

kdoctor是官方推薦的一個插件
他可以幫你檢查環境內的必要項目是否已經就緒

在Terminal中使用指令去安裝kdoctor

brew install kdoctor

接著直接用kdoctor 就能檢查了
像是我環境中
沒安裝Kotlin Multiplatform Plugin
他也能幫你檢查出來

kdoctor

總而言之
只要看到都[v]
代表你的環境正確了

如果kdoctor在檢查你的環境時診斷出任何問題：

[x]：需要修復的任何失敗的檢查
你可以在*符號後找到問題描述和潛在解決方案。

[!]：檢查警告
可能會是不一定要安裝的
只是提醒你可以安裝之類的

為了製作CMP更方便我們需要安裝Android Studio

先至Android Studio 官網
下載IDE

接著如果是MacOS是把下載好的.dmg 點開
把IDE拖移到Application資料夾
如果是Windows 就是.exe 選擇目錄去安裝

(圖為Mac的安裝示意圖)

CMP主要是使用Kotlin來開發
所以Kotlin Plugin這也必需安裝
不過因為現在Android Studio都幫你整合好
你一安裝好 他就幫你裝好Kotlin Plugin
(比較新的IDE版本都會幫你裝好)

所以可以接著打開Android Studio

不過如果真的遇到問題
可以去Tool > Kotlin > Configt Kotlin in Project
讓IDE幫你檢查是否安裝

其實這個步驟跟上面一樣
比較新的Android Studio IDE都幫你安裝好了

如果不確定有沒有安裝的話
IDE也有內建的可以下載
可以到下面這個地方找看看有沒有安裝JDK
點擊Android Studio > Setting 或 快捷鍵 Command + ,

找到 Build, Execution Deployment >Build Tools > Gradle

點擊下拉式視窗後點擊裡面的看環境內現成的
或是Download JDK去下載

另外
這邊我推薦你可以用sdkman （Optional）
他可以讓你透過指令管理你環境中的SDK
不過因為是介紹CMP
所以我就介紹幾個常用的指令
大家有興趣可以再去網上找

查看目前設定的的sdk

sdk current

列出可以用跟可下載的Java SDK

sdk ls java

設定JAVA環境 (xxx的名稱可以透過上面sdk ls 去找)

sdk using java xxx

為了讓Android Studio更好的支援Multiplatform
我們需要下載Kotlin Multiplatform plugin
一樣先打開Setting > Plugin > Marketplace

按install下載
完成後點Apply 然後RestartIDE

他可以讓Android Studio透過Create New Project的方式
自動創建KMP基本的專案內容
類似幫你創template的概念

KMM Plugin官方Release 有需要可參考

另外針對CMP
官方也有提供線上創建CMP基本專案的方式
(忘記KMP跟CMP差異的可以回到第一天的文章查看，Compose Multiplatform 實戰：放輕鬆點，初探CMP)

就是透過線上的網頁
Wizard
來創建再把他導入到IDE內

就看你要用哪種方式
兩種在開發上的差異大概是
KMP：使用KMM plugin插件創建，比較聚焦在Native UI的 + common邏輯的開發方式
CMP：使用線上網頁KMM Wizard創建後導入IDE，比較聚焦在Compose UI+ common邏輯開發多平台的方式

這邊就先介紹到這
後面詳細開發專案時
會大概講一下怎麼用Wizard

如果你是macOS的Mac
並想要運行iOS app
則需要Xcode

方法很簡單
就是到App Store 搜尋 Xcode
然後下載

如果你使用其他操作系統
可以跳過這個步驟
不過可能就沒辦法Build iOS app
感覺上應該也有Worked Around可以解決？
但可能就不是正規的做法XD

如果你預期之後想要用iOS的framework 可以事先安裝
如果不用就等後續需要再安裝也可以

使用指令安裝CocoaPods

brew install cocoapods

不過如果要透過brew安裝
需要用到較高版本的ruby

根據官網顯示 至少要用3.3.4版本

Depends on: ruby 3.3.4 Powerful, clean, object-oriented scripting language

所以你可以 透過以下指令
去查看環境中的版本

ruby -v 

版本不到的話
就先reinstall

brew reinstall ruby

最後再用brew install cocoapods即可

若你要製作Web application
你需要一個支援Wasm垃圾回收（GC）功能的瀏覽器。

這是官網提供的資訊
需要確認一下 你OS內Browser的版本
是針對目前有支援的環境 說明

Chrome 和 Chromium：從版本 119 開始支援。
Firefox：從版本 120 開始支援。
Safari/WebKit：Wasm GC 目前正在開發中

Safari之類的好像沒有支援
所以不見得可以完整run
如果需要開發Web app的話
可以再根據上面資訊試試

我總覺得開始一個新的程式語言 或 框架
通常你會不太熟悉怎麼配置他的環境
不過若有人能稍微提點
就能更容易上手

總體來說
不需要之前有Compose Multiplatform、Android或iOS的經驗
從零一步一步開始熟悉Kotlin再到整個CMP也可以慢慢上手

若有任何疑問或問題，歡迎在評論區討論，我們一起學習成長。
這次的內容就到這裡，感謝大家的閱讀和支持！