Compose Multiplatform 實戰:初戰,安裝CMP環境吧。
Compose Multiplatform (簡稱CMP)
UI框架能將Kotlin程式碼共用能力推向新高度
你可以一次實作使用者介面
並在所有目標平台上使用——包括iOS、Android、桌面和Web
今天我們將開始一步一步安裝環境
目錄
- Compose Multiplatform 實戰:放輕鬆點,初探CMP
- Compose Multiplatform 實戰:初戰,安裝CMP環境吧
- Compose Multiplatform 實戰:續戰,用Wizard創建CMP專案
- Compose Multiplatform 實戰:在Android、iOS模擬器上跑CMP專案
- Compose Multiplatform 實戰:CMP的專案結構理解與編譯配置
- Compose Multiplatform 實戰:CMP中跨平台Android、iOS程式碼的進入點
- Compose Multiplatform 實戰:在CMP的Compose中用Material Design3 Theme
- Compose Multiplatform 實戰:CMP用Compose實作跨平台畫面
- Compose Multiplatform 實戰:使用 expect 和 actual 實現跨平台程式碼
- Compose Multiplatform 實戰:CMP中實作Compose Navigation頁面切換
- Compose Multiplatform 實戰:CMP中透過StateFlow來管理UI狀態
- Compose Multiplatform 實戰:CMP中實作NavigationBar底部欄
- Compose Multiplatform 實戰:CMP中使用koin來依賴注入Dependency Injection
- Compose Multiplatform 實戰:CMP實作跨平台資料庫SqlDelight
- Compose Multiplatform 實戰:CMP中使用ROOM開發跨平台資料庫 & 疑難雜症
我們要建立一個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
然後Restart
IDE
他可以讓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也可以慢慢上手
若有任何疑問或問題,歡迎在評論區討論,我們一起學習成長。
這次的內容就到這裡,感謝大家的閱讀和支持!