# 軟工W14 — Scrum 敏捷開發流程: UI 設計練習

###### tags: `軟體工程`, `敏捷軟體開發`

## 題目: 智慧購衣平台

## UI 設計輔助工具: Qt Designer

### 0. 安裝 PyQt
### (0.1) 安裝 Python
### (0.2) 為 Python 設定環境變數
### (0.3) 安裝 PyQt5: Python GUI 工具

【安裝方式】
至 command-line-interface
(如 Anaconda Prompt)
>> pip install PyQt5

### (0.4) 安裝 PyQt5 擴充工具

PyQt 5.10 版本以後預設並不會安裝這些擴充工具，但有些擴充工具仍非常實用。
如: 國際化翻譯工具 〝Liguist〞 (可用於有多國語系需求的 GUI)、UI 設計/開發工具 〝QtDesigner〞

【安裝方式】
>> pip install PyQt5-tools

### (0.5) 為 PyQt5 設定環境變數

(1) 控制台 > 系統及安全性 > 系統 > 進階 > 環境變數

(2) 下方系統變數(S) > 編輯【Path】> 加入 PyQt5-tools 安裝目錄(如: C:\Users\user\AppData\Local\Programs\Python\Python36\Lib\site-packages\pyqt5-tools)

### (0.6) 測試 PyQt5 環境是否安裝完成

執行以下 Python 程式碼，觀察是否顯示出 GUI 且無錯誤訊息

import sys
from PyQt5 import QtWidgets
app = QtWidgets.QApplication(sys.argv)
widget = QtWidgets.QWidget()
widget.resize(360, 360)
widget.setWindowTitle("hello, pyqt5")
widget.show()
sys.exit(app.exec_())

## 1. 執行 Qt Designer

### (1.1) 尋找名稱為 〝designer.exe〞 的檔案
(若先前安裝無異常，應可找到此檔案)

參考檔案路徑: 
C:\Users\user\anaconda3\envs\tensorflowgpuenv\lib\site-packages\qt5_applications\Qt\bin\designer.exe

### (1.2) 選擇 MainWindow > Create

### (1.3) 從左方元件盒拖曳需要的元件

(※ 可先跳至 (1.4) 儲存檔案)
拖曳後，可在 MainWindow 手動調整大小、位置、更改名稱等屬性，直到滿意為止

### (1.4) 儲存檔案 (UI 設計完成)

檔案格式: ".ui"
以文字檔開啟，可觀察到內容為 XML 格式
再次以 designer.exe 開啟才會以 圖形介面 顯示

※ 若只需要設計出 UI (如軟工課程的 Scrum 開發流程練習)，可至此結束，此步驟已能產出 UI 畫面。

※ 若只需要進一步開發功能，並做出可執行 GUI 程式，則需要利用到下一步驟。

### (1.5) 將 .ui 檔 轉換為 .py 檔

#### 〈法1〉利用工具程式

(1.5.a) 將以下程式碼存為 tools.py，與 (1.4) 儲存的 .ui 檔放在同一路徑

import os 
import os.path 

dir_ = "./"  

# List all .ui files in this directory
def list_ui_files():
    return [f for f in os.listdir(dir_) if os.path.splitext(f)[1] == ".ui"]

# Convert .ui file to .py file
def trans_py_file(filename): 
	return os.path.splitext(filename)[0] + ".py" 

# Call system function to execute `transPyFile()`
def exec_ui_to_py():
	for ui_file in list_ui_files():
		py_file = trans_py_file(ui_file)
		cmd = f"pyuic5 -o {py_file} {ui_file}"
		os.system(cmd)
		
if __name__ == "__main__":  	
	exec_ui_to_py()

(1.5.b) 執行 tools.py

※ 假設 .ui 檔全名為 "testGUI.ui"，則會在同一路徑下產生一個 "testGUI.py"

### (1.6) 在 "testGUI.py" 加入以下 code snippet

※ "testGUI.py" 是步驟 (b) 產生的 .py 檔

import sys

if __name__ == "__main__":
    app = QtWidgets.QApplication(sys.argv)
    MainWindow = QtWidgets.QMainWindow()
    ui = Ui_MainWindow()
    ui.setupUi(MainWindow)
    MainWindow.show()
    sys.exit(app.exec_())

### (1.7) 執行 "testGUI.py"

※ 執行"testGUI.py"，測試 GUI 是否正常執行~

## 其它 UI 設計輔助工具

### 參考連結
https://gremlinworks.com.tw/ui-ux/ui-tools/

### 介紹
1. OmniGraffle
用來繪製圖表，流程圖，組織結構圖以及插圖，也可以用來來組織頭腦中思考的資訊，繪製心智圖，是設計網頁前的工具之一，有個小小缺點，就是只能於執行在Mac OS X和iPad平台之上而已，可以輸出PDF，TIFF，PNG，JPEG，EPS，HTML圖像對映，SVG，Visio XML，Photoshop和BMP等一系列檔案格式。OmniGraffle使用蘋果的XML schema格式的plist儲存資料，其副檔名為.graffle。

2. Draw IO
免費線上圖表編輯工具，可直接連結Google Drive或是One Drive等等雲端中，提供了很多類型的圖示，還能隨時隨地儲存您的編輯過程，而圖檔匯出格式支援多種類型格式，且支援中文顯示。

### 補充
3. Visual Paradigm Online
個人常用的「線上」圖表編輯工具，使用 Google 帳戶即可登入。
此工具可儲存結果為 .vpd 檔以利再次編輯，或輸出成 PNG檔案, PDF檔案, JPG 檔案等。