Compose Multiplatform 實戰：在Android、iOS模擬器上跑CMP專案
前言
Compose Multiplatform (簡稱CMP)
昨天我們才剛建置好CMP專案
若你有成功導入專案到IDE中
可以看到類似下方的資料夾結構
這時候我們可以先試試看是否可以編譯
若成功編譯
可以看到類似下方畫面
使用模擬器打開實作好的app畫面
右下角會提示編譯成功與否訊息
<img src="/images/compose/033.png" alt="Cover" style="width: 65%" / class="prose-img">
安裝Android模擬器
如果你是用昨天文章:用Wizard創建CMP專案來創建的話
那他基本的專案配置都已經先幫你配好了
大致上你只要確保Day2時安裝CMP環境時
的系統環境有裝好
如JDK、Kotlin...等等
接著若要在電腦上模擬
則需要創建Android模擬器
點擊最上方系統欄中的Tools > Device Manager
<img src="/images/compose/035.png" alt="Cover" style="width: 35%" / class="prose-img">
右方會彈出Device Manager視窗
點擊上面的 + 並點擊 Create Vitual Device
會彈出視窗讓你選擇你要創建的Android模擬器
包括有Phone、Tablet、TV、Watch、Automative等等
那因為Android Studio後期主要由Google維護
所以有提供帶有Google Pixel OS的 Android Phone的AVD(Android Vitual Device)讓你下載
當然Pixel AVD的映像檔也可以在Android Developer官網上下載
不過Google貼心的幫你整合至IDE中了
<img src="/images/compose/038.png" alt="Cover" style="width: 65%" / class="prose-img">
選擇想要的Phone並點右下角的Next
會進入選擇Android SDK的畫面
這邊也是根據你想要的實測的SDK去選
若是之前沒下載過的SDK
會呈現灰色並且右邊有下載圖示
下載完成後就可以選擇了
點Next後可以設定模擬器的設定
如：方向、網路、開機設定、RAM大小、SDK大小等等...
選好後按右下角Finish即可
<img src="/images/compose/039.png" alt="Cover" style="width: 65%"/ class="prose-img">
並點擊上方Run專案的按鈕(類似綠色的播放按鈕)讓IDE幫你Build且裝到模擬器中
手動 Build Android App
run
./gradlew :yourComposeAppProjectName:assembleDebug
yourComposeAppProjectName 是你創建專案的project name
assembleDebug 是指Build debug版的出來
找到 .apk file in yourComposeAppProjectName/build/outputs/apk/debug/yourComposeAppProjectName-debug.apk
1.把APK拖拉到模擬器中
2.使用指令安裝 (若在真機上adb時使用時，需打開開發者模式)
adb install ../xxx/yourComposeAppProjectName-debug.apk
安裝iOS模擬器
確保Day2 安裝CMP環境時
安裝了Xcode
在Android Studio畫面最上方有個Android小綠人圖示的地方
點開下拉式視窗
這一欄是集成了在專案中設定的Configuration
可以是Build Android app、Build iOS app 或是一些gradle task...等等
若是第一次在Android Studio 中 Run iOS app
可能不會有預設的Build iOS Configutraion
所以可以點擊Edit Configuration去設定
點左上角 + > iOS Application
隨後可以根據你的需求
a. 設task的名稱
b. Xcode project file 最右邊點擊folder icon
c. 彈出的檔案選擇器中可以選.xcodeproj的路徑
(反藍.xcodeproj後點擊open)
d. 選擇.xcodeproj路徑後
IDE會自動讀裡面的 scheme 跟 configuration
所以接下來我們只要選擇目標的iOS emulator版本、型號即可
e. 把Build Configuration改成剛創建的設定
按鈕Run按鈕即可
所以直接透過Xcode打開CMP專案底下的iOSApp資料夾
就可以透過Xcode直接Build iOSApp
總結
至此已經可以完整Build CMP專案並在Android 跟iOS模擬器上跑了
明天我想跟大家介紹
CMP的專案結構 跟一些可能遇到的疑難雜症