Compose Multiplatform 實戰：在Android、iOS模擬器上跑CMP專案

Compose Multiplatform (簡稱CMP)
昨天我們才剛建置好CMP專案

若你有成功導入專案到IDE中
可以看到類似下方的資料夾結構

這時候我們可以先試試看是否可以編譯
若成功編譯
可以看到類似下方畫面
使用模擬器打開實作好的app畫面
右下角會提示編譯成功與否訊息

如果你是用昨天文章:用Wizard創建CMP專案來創建的話
那他基本的專案配置都已經先幫你配好了

大致上你只要確保Day2時安裝CMP環境時
的系統環境有裝好
如JDK、Kotlin…等等

接著若要在電腦上模擬
則需要創建Android模擬器
點擊最上方系統欄中的Tools > Device Manager

右方會彈出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中了

選擇想要的Phone並點右下角的Next
會進入選擇Android SDK的畫面
這邊也是根據你想要的實測的SDK去選
若是之前沒下載過的SDK
會呈現灰色並且右邊有下載圖示
下載完成後就可以選擇了

點Next後可以設定模擬器的設定
如：方向、網路、開機設定、RAM大小、SDK大小等等…
選好後按右下角Finish即可

在上方選擇剛創好的模擬器
並點擊上方Run專案的按鈕(類似綠色的播放按鈕)讓IDE幫你Build且裝到模擬器中

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 

確保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按鈕即可

因為CMP是直接在root folder下創建iOS project
所以直接透過Xcode打開CMP專案底下的iOSApp資料夾
就可以透過Xcode直接Build iOSApp

至此已經可以完整Build CMP專案並在Android 跟iOS模擬器上跑了

明天我想跟大家介紹
CMP的專案結構 跟一些可能遇到的疑難雜症