Flask + SQLite 網頁快速開發 (二) - 網站設計

發表於 更新於 分類於
AdSense

The series is my own notes derived from QUT IFN557 unit, Rapid Web Development.

目標

設計一個實體商品或服務的簡易版本電商網站。主要注重於使用者可以瀏覽網站，了解商品的詳細訊息，並且選擇想要購買的產品，這個簡易版本的電商網站不支持使用者身份驗證 (登入或註冊) 或付款。

架站情境

Jenifer 是一個城市郊區傢俱店的老闆。由於該地區居民和旅客稀少，店裡業績不是很好。她想要有一個電商網站，能夠讓更多遙遠地區的客戶知道這間傢俱店的存在、並且宣傳自己的傢俱商品。

使用者故事 User Story

網站產生的過程中，有很多不同的參與人，對於產品會有不一樣的期待，因此設計網站的過程中，必須考慮產品的各種可能和限制。

之後會依照訂定好的使用者故事，規劃資料結構和資料庫關聯性。

架構

Story 故事

As a <role>, I want <goal>, so that <reason/benefit>.

作為某個角色 (角色主要是使用者，也就是未來瀏覽該網站的人，但是也可以是網站擁有者、開發人員。)，我希望網站有怎麼樣的功能或目標，如此一來，才能達成某個目的或有怎麼樣的好處。

Acceptance Criteria 達成標準

完成了哪些項目或功能算是符合這個使用者故事。

舉例

這邊簡單舉兩個例子：

例子一

Story：
作為一個使用者，我想要看到所有的房間類型，因為我想要為我特定的房間選擇適合的傢俱。例如：為我的臥室添購一張現代風格的床。或是為我的餐廳添購一張漂亮的桌子。

Acceptance Criteria：

  1. 一眼就能看到所有房間類型，而且使用者可以馬上了解店家提供的傢俱可能放在哪個房型裡。
  2. 漂亮的跟房型相關的照片，裡面有一些相關的傢俱。

例子二

Story：
作為一個使用者，我想要創造一個感興趣的傢俱清單 (購物車清單)，如此一來我可以全部購買。

Acceptance Criteria:

  1. 可以添加傢俱到清單中，也可以將清單中的傢俱刪除。
  2. 清單中可以顯示傢俱的價格。
  3. 顯示總金額。

UML - 類別圖

UML

UML (Unified Modeling Language) 是統一塑模語言，對軟體系統產生物件視覺化、具體說明、構建和編寫的圖像語言。這邊用到的是 UML 中的類別圖。

類別圖

類別圖是用來做物件的資料結構塑模用的，主要用來描述系統中類別的屬性、函式和類別之間的關係。關於類別圖這邊不多贅述，只會簡單介紹我的類別圖，如果要詳細了解，可以參考：
【UML】Class Diagram 類別圖 (上)：Introduction 簡介
【UML】Class Diagram 類別圖 (下)：Relationships 關係

我的類別圖設計

在沒有列出來的使用者故事中：

  1. 我希望不同的房間類型 (Room) 底下包含不同的傢俱類別 (Category)。例如：臥室會有床的類別。此外依照上述的使用者故事，我需要感興趣的傢俱清單 (購物車清單 Order)。當然我還需要傢俱 (Furniture)。因此我需要四個 class：Order、Furniture、Category 和 Room。

  2. 我希望使用者點選 Room 時可以顯示它所擁有的傢俱類別 (Category) 或傢俱 (Furniture)。

    • Room 和 Category、Furniture 兩個類以 ◆ 相連。◆ 可以想成，如果沒有了子成員，父成員就沒有存在的意義。(另一個很類似的 ◇ 是：沒有了子成員，父成員也可以獨立存在。)

    • 線上方的數字表示，類別之間依存的關係。例如：Room 和 Category 之間的關係就是，一個房型至少要有一種或可以有多個 (1…*) Category。但是一個 Category 只能屬於一個 (1) 房型。

      符號 意義
      0…1 零或一個
      1 一個
      0…* 零或多個
      1…* 一或多個
      * 多個

  3. 使用者點選 Category 時可以顯示它所擁有的傢俱 (Furniture)。

    • Category 和 Furniture 以 ◆ 相連。
    • Category 中可以暫時沒有該所屬傢俱，因此一個 Category 可以有零或多個 (0…*) Furniture。一個 Furniture 只能屬於一個 (1) Category。

  4. Order 和 Furniture 之間的關係是多對多，也就是：

    • 一個 Order 可以有零或多個 (0…*) Furniture。(使用者的願望清單中可能沒有東西，或是有多個商品。)
    • 一個 Furniture 可以有零或多個 (0…*) Order。(一件傢俱可以沒有被包含在任何願望清單中，或是被包含在很多願望清單中。)

靜態 View 視圖 (HTML + CSS)

依照我的使用者故事設計出來的簡易網站頁面如下 (頁面中的照片都是來自 Unsplash 網站)：
Super Furniture

詳細的檔案內容：
SuperFurniture-static-version