Ionic 筆記：建立專案、編譯成 APK

最近試著玩玩看幾個跨平台框架，其中之一就是 Ionic

以下是我自己在編譯 Ionic 的筆記

建立 Ionic 專案

首先先執行以下指令建立專案

這邊建立一個專案叫做 my-ionic-app

npx @ionic/cli start my-ionic-app

接著他會問你你要以哪種套件進行開發，我比較偏好 Vue 所以會選第三者，這邊依照自己喜好決定

Pick a framework!

Please select the JavaScript framework to use for your new app. To bypass this prompt next time, supply a value for the
--type option.

? Framework: (Use arrow keys)
> Angular | https://angular.io
  React   | https://reactjs.org
  Vue     | https://vuejs.org

選完了以後，會問說你的畫面要哪種模板，一樣也是根據需求來選。如果尚未決定，也可以選擇 blank 建立

Let's pick the perfect starter template!

Starter templates are ready-to-go Ionic apps that come packed with everything you need to build your app. To bypass this
prompt next time, supply template, the second argument to ionic start.

? Starter template: (Use arrow keys)
> tabs     | A starting project with a simple tabbed interface
  sidemenu | A starting project with a side menu with navigation in the content area
  blank    | A blank starter project
  list     | A starting project with a list

選完按下Enter後，他會開始建置專案，建完後會出現以下訊息

Your Ionic app is ready! Follow these next steps:

- Go to your new project: cd .\my-ionic-app
- Run ionic serve within the app directory to see your app in the browser
- Run ionic capacitor add to add a native iOS or Android project using Capacitor
- Generate your app icon and splash screens using cordova-res --skip-config --copy
- Explore the Ionic docs for components, tutorials, and more: https://ion.link/docs
- Building an enterprise app? Ionic has Enterprise Support and Features: https://ion.link/enterprise-edition

開發預覽、編譯

開發預覽

如果要預覽的話，執行

$ npx @ionic/cli serve

如果有安裝 @ionic/cli 的話，可改成

$ ionic serve

執行後就能在瀏覽器預覽專案了。默認是使用 http://localhost:8100 （祥見官網的《Previewing》說明）

編譯

要編譯成 HTML + CSS + Javascript 的話，則是：

$ npx @ionic/cli build

編譯好的檔案會放在 { 專案資料夾 }/dist

編譯成 Android APK

將 Ionic 轉譯成 Android 專案

參照官網文件《Capacitor Android Documentation》

首先先下載 @capacitor/android

$ npm install @capacitor/android

然後執行以下指令，將專案的 HTML + CSS + JS 轉譯成 Android 專案

$ # 最好是先執行 `npm run build` 然後再執行以下指令
$ npx cap add android

專案資料夾就會多一個 android 資料夾，並且將你寫好的 HTML + CSS + JS 轉譯成 Android 的程式。

修改

如果已經有 android 資料夾，事後又修改你的 Ionic 專案，執行以下指令就可以更新 android 資料夾了

npx cap sync android

編譯 APK

處理完上述步驟後， android 資料夾就是個完整的 android 專案

所以直接進去該資料夾，執行

$ ./gradlew assembleDebug --warning-mode all

或是

$ ./gradlew assembleRelease

即可編譯出來