Django -- 從平凡到超凡

第 2 章    設定開發環境

(1) 應用程式的開發、測試、與上線

∗ 應用程式的開發流程與環境

▸ 流程:系統開發 --> 系統測試 --> 系統營運

開發流程

▸ 開發環境 (Development environment):應用程式開發的環境

✶ 執行環境
✶ 整合式開發環境工具 (Integrated Development Environment, IDE)
✶ 開發用資料庫系統
✶ 版本控制

▸ 測試環境 (Testing environment):應用程式測試的環境

✶ 執行環境
✶ 測試工具
✶ 測試用資料庫系統
✶ 版本控制

▸ 生產環境 (Production environment):應用程式正式上線的環境

✶ 執行環境
✶ 版本控制
✶ 資料庫系統
✶ 系統日誌
✶ 效能、流量、負載平衡
✶ 備份
✶ 安全監控

(2) 框架

∗ 框架 (Framework)

▸ 框架:一個規範嚴謹的架構,指定哪種程式可以建構、以何種方式建構,並指定這些程式如何互動

▸ 迫使開發者必須以框架所規範的模式來撰寫應用程式,以提昇程式的一致性

▸ 亦提供許多函式庫,以提昇系統開發速度、系統效能、以及系統安全

∗ 框架和函式庫 (Library) 的不同

▸ 函式庫:應用程式控制主要流程,並在需要時呼叫函式庫裡的函式 (例如:呼叫 print() 函式)

▸ 框架:框架控制主要流程,並在需要時呼叫應用程式裡的函式 (框架亦提供函式庫讓應用程式呼叫)

∗ Web 框架 (Web framework)

▸ 負責處理大部分的 HTTP 請求,當需要時呼叫應用程式裡的函式

▸ 應用程式可呼叫由程式語言、框架、或第三方套件所提供的函式

回呼模式

▸ 上述的架構也稱為「處理器回呼模式」(Handler callback pattern):

--> 框架執行大多數的工作,在需要時回頭呼叫我們的程式以完成部份工作

∗ Django 框架

▸ 以 Python 程式語言為基礎的高階框架,用來開發 Web 系統

▸ 快速的系統開發,乾淨且實用的設計

▸ 開源軟體,社群活躍,功能強大,文件完整,維護品質佳

▸ 處理大多數系統開發的細節,讓開發者專注在自己的應用程式

▸ 標語:The web framework for perfectionists with deadlines. (有時間壓力的完美主義者最適合的框架)

宣稱

Ridiculously fast (超乎想像的速度)
Reassuringly secure (再三保證的安全)
Exceedingly scalable (超級卓越的延展性)

▸ 設計理念:

✶ 鬆散耦合 (Loosely coupled):系統各個元素彼此保持獨立,相互依賴性低
✶ 少寫程式 (Less coding):開發者只需要撰寫少量程式,開發速度超快
✶ 不要自我重複 (Don't Repeat Yourself, DRY):程式盡量保持唯一,不要一再複製
✶ 快速開發 (Fast development):超快速的開發時程
✶ 乾淨的設計 (Clean design):以最佳的實務解決方案來設計 Django,保持程式與架構的簡潔

▸ 以 Django 建構的知名大型網站:Bitbucket, Disqus, Instagram, Mahalo, Mozilla, NASA, National Geographic, Pinterest, Reddit Gifts, The Guardian, Washington Post, ...

(3) 設定開發環境

∗ 設定開發環境所需完成的工作如下:

▸ 規劃並建立專案目錄架構

▸ 安裝 Python 3

▸ 安裝 Postgres 資料庫系統

▸ 建立虛擬環境

▸ 安裝及設定 IDE

∗ 規劃專案目錄架構

▸ 系統開發的第一件事就是決定各個目錄及檔案的擺放位置,一個 Web 系統常包含有千百個檔案, 有好的目錄架構,系統元件彼此之間的關係才會簡潔而不雜亂

▸ 我們打算將整個目錄架構規劃如下 (假設有好多專案 proj1, proj2, ...):

webapps/
   git/
      proj1/
         .git/      # proj1 專案的版本控制設定目錄
         proj1/     # 版本控制後的 proj1 專案目錄
      proj2/
         .git/      # proj2 專案的版本控制設定目錄
         proj2/     # 版本控制後的 proj2 專案目錄 
      ...
   virtualenv/
      proj1Venv/   # proj1 專案的虛擬環境目錄
      proj2Venv/   # proj2 專案的虛擬環境目錄
      ...
   workspace/
      proj1/       # 版本控制前的 proj1 專案目錄,進入版本控制後移至 git/proj1 目錄下
      proj2/       # 版本控制前的 proj2 專案目錄,進入版本控制後移至 git/proj2 目錄下
      ... 
✶ 其中 webapps 為最上層目錄 (Web applications 的縮寫) ,其位置由開發者決定 (例如:放在家目錄 /home/<username>/ 之下, 其中 <username> 是登入 Ubuntu 作業系統的使用者名稱)
webapps 目錄包含 3 個子目錄: 工作區 (workspace)、虛擬環境 (virtualenv)、 及版本控制 (git)
# workspace:Eclipse 的工作區目錄,在 Eclipse 建立的專案 (proj1, proj2, ...) 都置於此
# virtualenv:虛擬環境 (Virtual environment) 目錄, 包含各個專案的虛擬環境目錄 (proj1Venv, proj2Venv, ...)
# git:版本控制 (Version control) 之儲存庫 (Repository) 目錄,當專案進入版本控制後, Eclipse 會將專案從 workspace/ 目錄移至此處,為此專案建立 .git/ 版本控制目錄 (內含 Git 的相關設定),而且將兩者並列均放在同一目錄中
版本控制目錄的位置

Eclipse 強烈建議不要將版本控制目錄放在專案目錄底下, 以保持專案與版本控制資料之間的區隔及模組化。本教材採用此建議,因此另外建立 git/ 儲存庫目錄, 讓專案目錄與版本控制目錄並列及隔開(git/<proj>/<proj>, git/<proj>/.git), 但也有許多開發者習慣將版本控制目錄直接放在專案目錄裡 (例如: workspace/<proj>/.git/),如此就不需要儲存庫目錄了

▸ 依照上述規劃方式,因為本教材將開發名為 blog (部落格) 之專案, 因此目錄架構如下:

webapps/
   git/
      blog/        # 進入版本控制後才會產生
         .git/     # 專案的版本控制目錄
         blog/     # 版本控制後的專案目錄
   virtualenv/
      blogVenv/    # 專案的虛擬環境目錄
   workspace/
      blog/        # 版本控制前的專案目錄,進入版本控制後移至git目錄下

▸ 接下來就準備開始「把手弄髒」(Get your hands dirty!),揮汗實做吧!實做的方式分成兩種:

✶ 指令行的操作:在終端機 (Terminal) 輸入指令,例如建立 git 目錄: mkdir git
✶ Eclipse 的操作:以步驟方式呈現,例如:Right click project (滑鼠右鍵點專案) --> Team --> Commit --> ...
有關 Linux 指令

∗ 建立專案目錄架構

▸ 依照上述的規劃,建立專案目錄結構:

$ cd
$ mkdir webapps webapps/git webapps/virtualenv webapps/workspace
以上指令:先移到家目錄,然後一次新增四個目錄,(注意, webapps 一定要放在第一個,先建立 webapps 目錄, 然後才能建立子目錄)

∗ Python 3

▸ Ubuntu 預設已安裝 Python 3 (執行檔在 /usr/bin/python3),因此無需安裝

∗ 安裝 Postgres 資料庫系統

▸ 在 Terminal 輸入以下指令 (先更新並安裝所有套件,然後再安裝 Postgres):

$ sudo apt update
[sudo] password for <username>:
$ sudo apt -y upgrade
$ sudo apt install libpq-dev postgresql postgresql-contrib
--> 安裝之後,Postgres daemon (常駐程式) 就會開始執行,而且在每次電腦開機就會自動執行,無需人工啟動
  1. 第一次執行 sudo 指令時系統會詢問使用者密碼,之後就不會再詢問 (除非重新啟動 Terminal),我們假設讀者都有執行 sudo 的權限
  2. Linux 的 Terminal 環境中,許多套件在要求使用者輸入密碼時是不會顯示任何訊息的 (例如:不會顯示常見的星號 ****), 因此請不要誤以為沒有反應,儘管輸入您的密碼,然後再按 Enter 即可
  3. -y 指的是 yes,亦即安裝過程中所有問題都回答「是」,以便一次執行完畢,不再詢問決定

∗ 安裝虛擬環境

▸ 虛擬環境 (Virtual environment) 概念:

✶ 由於不同專案會使用不同的套件,也可能會使用不同版本的相同套件,因此不能將所有套件都安裝在作業系統裡, 否則作業系統會安裝大量的套件,不僅雜亂、降低效能,甚至套件之間還會彼此衝突,同一套件也可能不允許安裝多個版本
--> 解決方案:各專案應該將所需的套件安裝在自己專屬的環境中,如此執行環境就可以彼此隔絕,不會相互干擾
✶ 虛擬環境是一個專案 專屬 的執行環境及函式庫,用來與其他專案的環境隔絕
✶ 虛擬環境指定專案所需要的套件及其版本,讓開發環境、測試環境、和生產環境都能一致, 以免發生開發環境執行沒問題,到其他環境執行就出錯 (是否常聽到:在我的電腦 run 就 OK,到你的電腦 run 就當掉!? ;-)
✶ 建立虛擬環境:利用 pip3virtualenv 指令來建立虛擬環境與安裝套件
# pip3 (Pip Install Package):python 的套件管理程式 (Package manager), 名稱使用「遞迴首字縮寫」 (Recursive acronym) 模式
# virtualenv:建立虛擬環境之指令

▸ 安裝虛擬環境:先安裝 python3-pip 然後利用 pip3 安裝 virtualenv

$ sudo apt install python3-pip
$ sudo pip3 install virtualenv

∗ 安裝及設定 Eclipse+PyDev 之整合開發環境

▸ 本教材所使用的開發環境是 Eclipse 加上 PyDev, 前者是 Java 常用的 IDE,後者是在 Eclipse 的 Python 插件,讓 Eclipse 支援 Python 程式語言

▸ 安裝 Eclipse (將安裝最新版 Oxygen):

1. 刪除 ~/.eclipse 目錄 (我們來個「乾淨安裝」(Clean installation) 吧!)
$ rm -rf ~/.eclipse
2. 安裝 Java JDK (因為 Eclipse 是以 Java 開發的 ;-),目前最新版是 openjdk-8, 如果系統已安裝正確版本,請略過此步驟
$ sudo add-apt-repository ppa:openjdk-r/ppa
$ sudo apt update
$ sudo apt install openjdk-8-jdk
# 以上第 1 個指令是加入套件庫,以後有新版時 Ubuntu 會自動更新
# 檢查 Java 的版本:$ java -version (第一行會出現 openjdk version "1.8. ...",即為 openjdk-8)
3. 下載 Eclipse 最新版 (http://www.eclipse.org/downloads/packages/ ,Oxygen v:Eclipse IDE for Eclipse Committers -- Linux 64-bit,檔名為 eclipse-committers-oxygen-v-linux-gtk-x86_64.tar.gz)
(以上 v 為版本符號)
4. 將 eclipse 安裝在 /opt 目錄:將下載的檔案移到 /opt 目錄 (如果有舊的 /opt/eclipse 目錄則將其刪除),然後解壓縮:
$ cd <...>       # 前往下載檔案所在目錄 (依據瀏覽器的設定,預設目錄是「下載」,有些人喜歡改為「桌面」)
$ sudo mv eclipse*oxygen*gz /opt      # For clean installation
$ cd /opt
$ sudo rm -rf eclipse
$ sudo tar -zxvf eclipse*oxygen*gz
註:Eclipse 的執行檔的路徑即為 /opt/eclipse/eclipse
5. 新增 eclipse.desktop 檔案以建立 Eclipse 應用程式圖示 Eclipse圖示
$ sudo gedit /usr/share/applications/eclipse.desktop
內容如下,輸入完畢後儲存檔案:
[Desktop Entry]
Name=Eclipse
Type=Application
Exec=/opt/eclipse/eclipse
Terminal=false
Icon=/opt/eclipse/icon.xpm
Comment=Integrated Development Environment
NoDisplay=false
Categories=Development;IDE;
Name[en]=Eclipse
6. 安裝 Eclipse 圖示
$ sudo desktop-file-install /usr/share/applications/eclipse.desktop
7. 在 /usr/local/bin 目錄裡建立程式捷徑
$ sudo ln -s /opt/eclipse/eclipse /usr/local/bin/
註:以後更新 Eclipse 版本時僅需執行步驟 1, 3, 4 即可 (當然,若未來 Eclipse 提昇 openjdk 的版本,步驟 2 還是要執行)

▸ 執行 Eclipse:點擊 Ubuntu 桌面左上角搜尋圖示 Ubuntu搜尋、輸入 Eclipse、再點擊 Eclipse圖示 圖示即可啟動 Eclipse (此時可右鍵點 Ubuntu 桌面左側啟動欄的 Eclipse 圖示 --> 鎖定至啟動欄, 該圖示就會鎖定在啟動欄,方便以後執行)

✶ 第一次執行 Eclipse 時:
# 會詢問 "Select a directory as workspace",可輸入 Eclipse 工作區目錄 (/home/<username>/webapps/workspace),並且可將此目錄設為預設, 下次啟動 Eclipse 時就會自動進入此目錄
# 會顯示歡迎畫面,可於右下角取消勾選 「Always show Welcome at start up」, 下次執行就不會出現此畫面
✶ Eclipse 會在使用者家目錄及 Eclipse 工作區目錄分別建立 .eclipse.metadata 目錄 (亦即 ~/.eclipse/home/<username>/webapps/workspace/.metadata),這兩個目錄都是隱藏目錄, 前者儲存 Eclipse 的設定,後者儲存工作區及專案的相關設定
✶ 如果原先安裝有舊版的 Eclipse,建議將原先的 workspace/.metadata 目錄刪除,以免新舊版本之設定相互衝突

▸ 在 Eclipse 中安裝 PyDev 插件

✶ Help --> Install New Software --> Add --> Name: PyDev, Location: http://pydev.org/updates (圖 A) --> OK --> 勾選 PyDev (圖 B) --> Next --> Next --> 點選 I accept the terms of the license agreements --> Finish (過程中需同意安裝未簽署內容警告 (圖 C),並勾選 Brainwy Software 表示信任 (圖 D)) --> 重新啟動 Eclipse
PyDev A
PyDev2 B
unsign C
brainwy D

▸ 安裝 TM Terminal 與 Web developer Tools:

✶ Help --> Install New Software --> Work with: http://download.eclipse.org/releases/oxygen --> Enter
# 展開 General Purpose Tools --> 勾選 TM Terminal
# 展開 Web, XML, Java EE and OSGi Enterprise Development --> 勾選 Eclipse Web Developer Tools
--> Next --> Next --> Accept terms --> Finish (過程中需並勾選 Eclipse.org ... 表示信任,如下圖) --> 重新啟動 Eclipse
簽章

▸ 變更 IDE 視版 (Perspective)

✶ 設定為 PyDev Perspective:點擊 Eclipse 右上角 Open Perspective 圖示 視圖 --> 選擇 PyDev --> Open (會出現 pyDev視圖 圖示)
✶ 刪除 Java Perspective:右鍵點擊 Eclipse 右上角 Java Perspective 圖示 Java視圖 --> Close

▸ 設定編輯器字體:

   Window --> Preferences --> General --> Editors --> Text Editors --> (右欄上方) Color and Fonts --> Edit --> Fonts: DejaVu Sans Mono Book, Size: 10 --> Apply and Close

▸ 設定縮排

✶ 一般文件:2 空格
  Window --> Preferences --> General --> Editors --> Text Editors --> (右欄) Displayed tab width: 2,勾選 Insert spaces for tabs --> Apply and Close
✶ JavaScript:2 空格
  Window --> Preferences --> JavaScript --> Code Style --> Formatter --> (右欄) New --> Profile name: myProfile --> OK --> Tab policy: Spaces only, Indentation size: 2, Tab size: 2 --> OK --> Active profile: myProfile --> Apply and Close
✶ Python:4 空格 (預設)
  Window --> Preferences --> PyDev --> Editor --> Tabs --> (右欄) Tab length: 4, 勾選 Replace tabs with spaces when typing --> Apply and Close
✶ CSS 與 HTML:2 空格
Window --> Preferences --> Web -->
- CSS Files --> Editor --> (右欄) 勾選 Indent using spaces, Indentation size: 2 --> Apply and Close
- HTML Files --> Editor --> (右欄) 勾選 Indent using spaces, Indentation size: 2 --> Apply and Close

▸ 設定 Git 版本控制

✶ 預設 Git 目錄:Window --> Preferences --> Team --> Git --> (右欄) Default repository folder: /home/<username>/webapps/git --> Apply and Close
✶ 選擇 Commit 對話框的模式:Window --> Preferences --> Team --> Git --> Committing --> (右欄) 取消勾選 Use Staging View to commit instead of Commit Dialog --> Apply and Close

▸ 依個人偏好可設定暗色主題 (Dark theme)

Window --> Preferences --> General --> Appearance --> (右欄) Theme: Dark --> Apply and Close
✶ 暗色主題的「Python重複出現字」預設的黃色太刺眼,改變顏色:
Window --> Preferences --> General --> Editors --> Text Editors --> Annotations --> (右欄) Occurrences (PyDev) --> (可能需要將視窗拉寬) Color: 選深藍色 --> Apply and Close
有關 Eclipse
  1. Eclipse 屬於所謂的「綠色軟體」(Green software),亦即不需要安裝便可直接使用
  2. Ubuntu 預設套件中也有 Eclipse,但至今一直停留在 2012 年的 Juno 3.8 版,原因不詳, 這裡有一些討論。
  3. Eclipse 的缺點:啟動速度較慢,請耐心等候 ;-)
  4. 問答集:
    • 問:Eclipse 是開發 Python 專案最好的 IDE 嗎?
    • 答:當然不是,PyCharm 就比較厲害!
    • 問:那為什麼選擇 Eclipse?
    • 答:Open source, period ;-).

(4) Eclipse 設定與操作

∗ 加速 Eclipse

▸ 取消自動通知

Window --> Preferences --> General --> Notifications --> (右欄) 取消勾選 Enable notifications --> Apply and Close

▸ 啟動時不要自動啟用插件

Window --> Preferences --> General --> Startup and Shutdown --> (右欄) 取消勾選所有項目 --> Apply and Close

▸ 停用拼字檢查

Window --> Preferences --> General --> Editors --> Text Editors --> Spelling --> (右欄) 取消勾選 Enable spell checking --> Apply and Close

▸ 暫停所有驗證器

Window --> Preferences --> Validation --> (右欄) 勾選 Suspend all validators --> Apply and Close --> ... Do the full rebuild now? --> Yes

∗ Eclipse 編輯快速鍵

▸ 檔案

ctrl-s:存檔
ctrl-shift-s:儲存所有檔案
F5:刷新內容

▸ 縮排與註解

Tab:向右縮排
Shift-Tab:向左縮排
ctrl-/:註解 (或取消註解)
ctrl-shift-f:整份文件自動排版

▸ 文字選取

shift-Right:向右移動一格選取
shift-Left:向左移動一格選取
ctrl-shift-Right:向右移動一字選取
ctrl-shift-Left:向左移動一字選取
ctrl-a:全選

▸ 文字編輯

ctrl-c:複製
ctrl-x:剪下
ctrl-p:貼上
ctrl-z:復原上一步
ctrl-d:刪除目前行

▸ 尋找與取代

ctrl-f:尋找
ctrl-k:尋找下一個

∗ 程式撰寫快速鍵

ctrl-1:快速協助 (例如加入 import)

ctrl-e:列出所有開啟檔案

ctrl-滑鼠點物件:跳至定義

ctrl-.:跳至下一個錯誤點

ctrl-l:跳至行數

ctrl-shift-g:列出所有呼叫程式

ctrl-shift-0:整理及自動匯入

ctrl-shift-p:跳至對應括號

∗ Task (待辦工作):追蹤待完成的工作

▸ 專案開發是個長期的工作,且同一時期可能參與多個專案,很有可能忘記某段程式進行到什麼階段,或者未完成的工作為何, Eclipse PyDev 提供 Task 功能

▸ 檢查工作標籤:Window --> Preferences --> (展開) PyDev --> Task Tags --> (右欄) Todo tags: TODO: FIXME: --> Apply and Close (可以自行加入其他標籤)

▸ 在 views.py 程式中利用註解加入工作標籤,例如:

def showStats(request):
    context = {}
    tuitions = Tuition.objects.all()
    orders = Order.objects.all()
    # FIXME: 以上程式有BUG
    # TODO: 預計星期一完成
    ...

▸ 檢視待辦工作:

Window --> Show View --> Tasks
Task
慶祝達成目標!

恭喜您完成了系統安裝與環境設定程序:

  1. 以上的工作並不簡單,尤其對於新手而言,一定會到處卡關,能順利完成很不容易
  2. 系統設定的過程中需要非常細心,也需要相當大的耐心,如果您完成了,那要大大地慶祝,如果您卡關了, 請耐心檢查何處有錯或遺漏
  3. 這樣的繁瑣過程是成為一個優質的「開發者」(Developer) 所必須經過的訓練,越接近系統核心,所面對的問題就越精細、越複雜, 絲毫馬虎不得,但這也是提昇功力的不二法門
  4. 練習 1:重新執行所有設定開發環境的步驟,例如:
    • /opt/eclipse 目錄刪除,再重新安裝 Eclipse
    • ~/.eclipse/home/<username>/webapps/workspace/.metadata 兩個目錄刪除, 再重新設定 Eclipse 環境
  5. 練習 2:一段時間以後,不參閱本章資料,僅靠記憶正確的重新執行所有步驟
  6. 接下來就要進入 Django 的夢幻領域了,休息一下、喝杯咖啡 (千萬不要抽支菸! ;-),我們繼續奮鬥,加油!

上一章       下一章