Web Applications

歡迎來到網頁應用程式（Web Applications）的世界！

在本章中，我們將從電腦如何互相溝通（網絡）的研究，轉向我們如何構建人們在這些網絡上真正使用的工具：網頁應用程式。無論是你瀏覽社交媒體動態，還是為專案上傳檔案，你都在使用網頁應用程式。閱讀完這些筆記後，你將明白如何使用 HTML、CSS、Python (Flask) 和 SQL 親手建立一個基礎版本。如果這看起來有很多東西要學，別擔心——我們會一步一步來！

1. 網頁應用程式與原生應用程式：有什麼分別？

在開始構建任何東西之前，我們需要知道什麼是網頁應用程式，以及它與你在手機或電腦上安裝的應用程式有何不同。

網頁應用程式 (Web Applications)

這些程式是在網頁瀏覽器（如 Chrome、Safari 或 Firefox）內運行的。你不需要「安裝」它們；只需要瀏覽網址即可。

• 優點： 它們可在任何有瀏覽器的裝置上運行（跨平台），而且你不需要手動下載更新。
• 缺點： 它們通常需要連接網絡才能運作，速度可能比原生應用程式稍慢。

原生應用程式 (Native Applications)

這些是專門為特定作業系統構建的（例如 Windows 的 ".exe" 檔案，或從 Apple App Store 下載的應用程式）。

• 優點： 它們可以在離線狀態下運行，並能完全存取裝置的硬件（如相機或專用感應器）。
• 缺點： 開發人員必須為不同裝置編寫不同版本（一個給 Android，另一個給 iOS）。

快速回顧： 把網頁應用程式想像成自助餐餐廳（你到那裡去拿你需要的東西），而原生應用程式就像在家煮食（你必須先在自己的廚房安裝工具和準備材料）。

2. 提升用戶體驗：可用性原則

你有沒有試過使用某個網站時，因為找不到「提交」按鈕而感到沮喪？這就是可用性（Usability）問題。當我們設計網頁應用程式時，我們遵循五個關鍵原則來確保用戶滿意：

1. 系統狀態的可見性 (Visibility of System Status)： 應用程式應時刻讓用戶知道發生了什麼事。
例子： 加載條或顯示「檔案上傳成功！」的訊息。

2. 一致性 (Consistency)： 在整個應用程式中使用相同的顏色、字體和按鈕樣式，以免讓用戶感到困惑。

3. 預示性 (Affordance)： 物件看起來應該像它運作的方式。
例子： 按鈕應該看起來「可以點擊」（例如加上陰影或 3D 效果），連結則應與純文字看起來不同。

4. 限制 (Constraints)： 通過限制用戶的選擇來防止他們犯錯。
例子： 在用戶填寫所有必要欄位之前，將「提交」按鈕設為灰色（禁用狀態）。

5. 回饋 (Feedback)： 對於用戶採取的每一個動作，系統都應給予回應。如果我點擊一個按鈕，它應該變色或顯示一個「成功」的彈出視窗。

記憶法： 記住 "V-C-A-C-F" — Very Cool Apps Create Fun！

3. 全貌：客戶端-伺服器架構

網頁應用程式是兩方之間的團隊合作：

客戶端 (The Client / "前端")： 這是用戶所看到的部分。我們使用 HTML 來構建結構，並使用 CSS 進行美化。

伺服器 (The Server / "後端")： 這是應用程式的「大腦」。我們使用 Python（特別是一個稱為 Flask 的框架）來處理數據，並使用 SQL 將資訊儲存在資料庫中。

比喻： 想像一家餐廳。客戶端是餐廳的用餐區和菜單（看起來很美觀）。伺服器是廚房（負責工作）。資料庫是儲藏室（儲存食材/數據的地方）。

4. 構建客戶端：HTML 表單

為了從用戶那裡獲取數據，我們使用 <form> 標籤。有兩個關鍵屬性你必須知道：

• action： 數據應發送到的 URL/路由。
• method： 發送要儲存的數據時，通常使用 "POST"。

接收用戶輸入

我們使用 <input> 標籤。name 屬性是最重要的部分，因為它就像 Python 用來尋找數據的變數名稱。

文字輸入例子： <input type="text" name="username">

圖片輸入例子： <input type="file" name="profile_pic">

常見錯誤提醒： 如果你希望用戶上傳檔案或圖片，你的 <form> 標籤必須包含 enctype="multipart/form-data"。如果你忘記了，伺服器只會收到檔名，而不會收到真正的檔案！

5. 運作大腦：Python 與 Flask

Flask 是我們在 Python 中運行的「小型網頁伺服器」。它使用路由 (routes) 來決定當用戶訪問特定 URL 時該做什麼。

伺服器如何處理輸入：

1. 文字輸入： 使用 request.form['variable_name'] 從表單獲取文字。

2. 檔案/圖片上傳： 使用 request.files['variable_name'] 獲取上傳的檔案。

3. 安全性： 在儲存上傳的檔案之前，務必使用 secure_filename()，以防止黑客將檔案命名為危險的名稱，如 "virus.exe"。

儲存方式：SQL (sqlite3)

Python 在你關閉後不會「記住」東西。為了永久保存數據，我們將其發送到 SQL 資料庫。標準流程是：

連接資料庫 → 建立 Cursor（游標） → 執行 SQL 指令（如 INSERT 或 SELECT） → 提交 (Commit) 變更 → 關閉連接。

6. 顯示結果：輸出數據

一旦伺服器處理了數據，就需要將其顯示給用戶。我們使用 render_template() 將 Python 數據傳送到 HTML 頁面。

格式化輸出

• 文字： 直接將變數傳遞給 HTML 模板即可。
• 表格： 在 HTML 中使用迴圈 (for loop)（使用 Jinja2 語法），為資料庫結果中的每一行建立 <tr> 和 <td> 標籤。
• 圖片： 使用 <img src="..."> 標籤，指向你儲存用戶上傳檔案的資料夾。

快速回顧框：
- HTML： 「骨架」（結構）
- CSS： 「皮膚」（外觀）
- Python/Flask： 「大腦」（邏輯）
- SQL： 「記憶」（儲存）

7. 測試你的應用程式

你如何知道它是否有效？你在本地伺服器 (local server) 上進行測試。當你運行 Flask 腳本時，它通常會在一個特殊的地址託管該應用程式：127.0.0.1:5000。

127.0.0.1 是一個「回環 (loopback)」地址，意思是「這台電腦」。5000 是連接埠號碼 (port number)。

測試時要檢查什麼：

1. 網頁加載時有沒有錯誤？
2. 如果我留空某個欄位，應用程式能否妥善處理（數據驗證）？
3. 在我點擊提交後，數據是否真的出現在資料庫中？

考試重點總結：

• 了解網頁應用程式在瀏覽器中運行，而原生應用程式安裝在作業系統上。
• 背誦可用性原則（可見性、一致性、預示性、限制、回饋）。
• 知道 request.form 用於文字，request.files 用於檔案上傳。
• 記得在 HTML 的檔案上傳表單中使用 enctype="multipart/form-data"。
• 準備好解釋數據流向：從用戶的瀏覽器出發，經由 Flask 伺服器進入 SQL 資料庫，再返回用戶端的過程。

如果程式碼部分起初看起來很棘手，別擔心！專注於數據的「流向」——它從哪裡開始，在哪裡被處理，以及最終去了哪裡。你一定能做到的！