---
title: 'ERP Mobile 開發環境與流程'
---

ERP Mobile 開發環境與流程
===

## 目錄
[TOC]

## 1. 使用的工具及技術

| 項目 | 工具 | 備註 |
| -------- | -------- | -------- |
| 前端 | Vue.js | JavaScript 的一個框架 |
| 後端 | .NET ||
| 資料庫 | SQL SERVER ||
| 推播 | Firebase Cloud Messaging | APP 免費推播服務 |
| 跨平台轉換工具 | Capacitor.js | 可將專案轉成 Android、iOS 等平台的專案 |

## 2. JavaScript 開發 APP 之疑問
### 2.1. Quasar Framework 是什麼?
#### 基於 [Vue.js](https://vuejs.org/) 框架，包好一大堆跨平台開發工具的懶人包。
- UI Component
- Capacitor.js
- i18n
- Axios(AJAX)
- Sass(SCSS)
- Icongenie
- ...

---

### 2.2. MVVM 架構

---

### 2.3. 用 Quasar Framework 開發 APP 的好處
#### 學一個語言能開發 Web、Android、iOS、Windows、Linux 平台的應用程式。

---

### 2.4. 要如何編譯跨平台的應用程式?
#### 透過 [Capacitor.js](https://capacitorjs.com/) 轉成其他平台的專案。

---

### 2.5. 要怎麼模擬手機畫面?
#### 如 Android 平台則使用 [Android Studio](https://developer.android.com/) 將專案開啟，使用 Emulator 執行 apk 進行預覽及開發。

---

### 2.6. 跨平台 UI 要如何自適應?
#### 目前 ERP Mobile 專案使用的跨平台框架 [Quasar Framework](https://quasar.dev/) 提供自有的 UI，沒辦法呈現原生的 UI，如需使用原生 UI 可參考 [React Native](https://reactnative.dev/) 之類的跨平台工具。

---

## 3. 專案結構
∣–– app_release_key.keystore *(上架到 Google Play 所需的 key)*
∣–– build.sh *自動編譯&簽章 APK 腳本*
∣–– dist *(build 完的檔案)*
∣–– node_modules *(已下載的模組)*
∣–– package.json *(模組管理菜單)*
∣–– quasar.conf.js *(Quasar 的 config，等同於 Vue.js 專案的 vue.config.js)*
∣–– public *(不須經過 Webpack 編譯的檔案)*
　　∣–––– /icons
　　...
∣–– src
　　∣–––– App.vue
　　∣–––– /assets *(圖片、icon之類的)*
　　∣–––– /boot *(專案最早執行的檔案，如帳號驗證...)*
　　∣–––– /components (自訂元件)
　　∣–––– /css *(scss檔)*
　　∣–––– /i18n *(多國語系檔)*
　　∣–––– /layouts *(Wireframe)*
　　∣–––– /pages *(頁面主體)*
　　∣–––– /router
　　∣–––– /stores *(Pinia or Vuex)*
∣–– src-capacitor *(APP 的專案目錄)*
　　∣–––– android
　　∣–––– ios
　　...

## 4. 參數設定與開發相關檔案

| 項目 | 檔案 | 用途 |
| -------- | -------- | -------- |
| Config | vue.config.js | 專案相關設定檔 |
| Bable | babel.config.js | ES 版本轉換器 |
| ESLint | eslintrc.js | ESLint rules |
| hsonfig | jsonfig.json | vscode webpack alias 相關設定 |
| package | package.json | 專案的依賴注入 |
| gitignore | .gitignore | 被排除 git 監聽變化的檔案 |

## 5. 安裝環境

#### 環境需求:
| 項目 | 用途 |
| -------- | -------- |
| [NPM](https://nodejs.org/en/) | JavaScript 的套件管理器 |
| [Quasar CLI](https://quasar.dev/) | 快速建置 Quasar 開發環境的工具 |

#### 5.1. 安裝 [Node.js](https://nodejs.org/zh-tw/download/)

#### 5.2. 安裝 Quasar CLI

npm i -g @quasar/cli

#### 5.3. 初次執行需安裝依賴套件

npm install

1. 會依照 package.json 的內容安裝相依賴的套件，例如 bootstrap, day.js 等...

#### 5.4. 啟動 APP

quasar dev -m capacitor -T android

1. 啟動 Android Emulator 預覽 APP
1. 在 Android Studio 按 Run app

#### 5.5. 編譯 APP

quasar build -m capacitor -T android

1. -m 表示 Mode，欲編譯的專案種類，有 capacitor, web, pwa, bex 等...
2. -T 表示 Target 欲輸出的平台，有 Android, iOS

## 6. 開始開發
### Example1: 新增一個 APP 頁面
1. 輸入 quasar 指令，或是到 src/pages 手動新增一個頁面:

quasar new page {page_name}

<template>
  <q-page>
      ...
  </q-page>
</template>
<script>
    name: 'PageName'
</script>

2. 到 src/router/router.js 新增 URL 與對應的檔案位置

{
    path: '/{URL}',
    component: () => import('src/pages/{page_name}.vue')
}

3. 連結到新增的頁面

<template>
    <q-page>
        <!-- 建立一個按鈕並注入觸發事件 -->
        <button @click="goToExamplePage">連結</button>
    </q-page>
</template>
<script>
import { useRouter } from 'vue-router'

export default {
    name: 'ExamplePages',
    setup () {
        // 物件宣告
        const $router = useRouter()
        
        // 連結到 example 頁面
        goToExamplePage () {
            $router.push({
                path: 'example'
            })
        }
    }
}
</script>

### Example2: 存取後端資料
#### 透過 API 與後端程式溝通，此專案用 axios 來操作:

<template>
    <q-page>
        <div v-for="user in users">{{ user.name }}</div>
    </q-page>
</template>
<script>
import { ref } from 'vue'
import { api } from 'boot/axios'

export default {
    name: 'ExamplePages',
    setup () {
        // 宣告型態為陣列的變數 users
        const users = ref([])
    
        // 取得使用者資料
        getUsers () {
            api.post('/api/login', formData)
                .then(res => {
                    const { apiCode, message, data } = res.data
                    users = message
                })
        }
        
        // 頁面初始化時即呼叫
        getUsers()
        
        // 回傳 users 資料到 view
        return {
            users
        }
    }
}
</script>

### Example3: 元件設計
#### 將可能重用的部分拆成 component 讓專案可維護性更高
#### Child.vue

<template>
    <div>
      {{ message }}
    </div>
</template>
<script>
  export default {
    name: 'Message',
    props: {
      message: {
        type: String,
        default: ''
      }
    }
  }
</script>

#### Parent.vue

<template>
    <Exception :message="msg" />
</template>
<script>
import { ref } from 'vue'
import Exception from 'components/Exception.vue'
export default {
    name: 'Parent',
    components: {
        Exception
    },
    setup () {
        const msg = ref('HelloWorld')
    },
    return {
        Exception,
        msg
    }
}
</script>

## 7. 一些 Vue.js 的語法糖
- v-if
- v-show
- v-for
- v-model
- v-on:click(@click)
...
Ref: https://vuejs.org/api/built-in-directives.html

## 8. Build APK
#### 所需環境

| 項目 | 連結 |
| -------- | -------- |
| Android Studio IDE | [連結](https://developer.android.com/studio) |
| JRE(JAVA Runtime Environment) | [連結](https://www.oracle.com/java/technologies/downloads/) |

sh build.sh

1. 編譯專案
1. 刪除舊的 apk 檔
1. 對 APK 簽章([Jarsigner](https://docs.oracle.com/javase/7/docs/technotes/tools/windows/jarsigner.html))
1. 對 APK 優化([Zipalign](https://www.aiwalls.com/android%E8%BB%9F%E9%AB%94%E9%96%8B%E7%99%BC%E6%95%99%E5%AD%B8/17/16575.html))
1. 在專案目錄中出現 ERP_Mobile.apk

####

## 9. SDK(Software Development Kit)版本管理
#### Gradle 建議版本: 7.3.3
#### SDK 配置建議:

ext {
    minSdkVersion = 21
    compileSdkVersion = 31
    targetSdkVersion = 29
    androidxAppCompatVersion = '1.1.0'
    androidxCoreVersion = '1.2.0'
    androidxMaterialVersion = '1.1.0-rc02'
    androidxBrowserVersion = '1.4.0'
    androidxLocalbroadcastmanagerVersion = '1.0.0'
    androidxExifInterfaceVersion = '1.2.0'
    firebaseMessagingVersion = '23.0.6'
    playServicesLocationVersion = '17.0.0'
    junitVersion = '4.12'
    androidxJunitVersion = '1.1.1'
    androidxEspressoCoreVersion = '3.2.0'
    cordovaAndroidVersion = '7.0.0'
}

#### Capacitor Dependencies 配置建議:

| 依賴套件 | 用途 | 版本 |
| -------- | -------- | -------- |
| @capacitor-community/fcm | FCM 訂閱&取得權限 | 2.0.2 |
| @capacitor/push-notifications | 推播事件監聽 | 4.0.0 |
| @capacitor/core | Cross-platform apps 轉換器 | 3.6.0 |
| @capacitor/app | 可監聽 APP 從開啟到關閉的狀態 | 4.0.1 |
| @capacitor/cli | Command-Line Interface | 3.6.0 |
| @capacitor/device | 可獲取安裝 APP 的裝置資訊 | 4.0.1 |
| @capacitor/dialog | 原生的 Android 彈跳視窗 | 4.0.1 |
| @capacitor/network | 可獲取裝置的網路連線狀態 | 4.0.1 |
| @capacitor/browser | 啟動內建瀏覽器 | 4.0.1 |