SPACE-電商平台實作(上)
📢 此專案實作系列文章分為上、下 (共 2 篇)
📋 目錄
專案介紹
SPACE 是藉由網路銷售椅子 💺、燈具 💡 的店家。此網站提供使用者登入、帳單管理等功能。所有商品素材皆是筆者藉由 Redecor - Home Design Makeover on the App Store 這個 APP 半創作而成。其餘的圖片素材則取自 Unsplash: Beautiful Free Images & Pictures，使用的每一張皆於附錄標明出處。
以 Vue.js 撰寫主要的功能，登入功能與帳單管理藉由 Firebase。完整實作專案，從專案發想、實際開發到部署。
直接逛逛 👉 https://space-online-shop.web.app/
(若不想申請帳號，可以使用這組：信箱/ user@gmail.com 密碼/ user123)
開發流程
1. Figma 構思規劃
收集素材、發想功能、設計介面
Figma 線上介面設計工具，允許和團隊進行多人協同合作，在瀏覽器中進行設計，共同繪製使用者介面。雖然此專案是獨立完成，但在規劃階段使用 Figma 可以將腦海中的設計藍圖精準地繪製出來。開發時可快速比對已繪製好的畫布。
2. Vue.js 前端框架
刻介面、寫功能
以視圖層為基礎發展的 JavaScript 漸進式框架。採用 Vue2 進行開發，使用 vue-cli 建構專案，Vue router 做路由管理，Vuetify CSS 框架，Vuelidate 表單驗證套件等。
3. Firebase 資料庫
檔案資料庫、帳號管理
Firebase 雲端後端服務平台，提供多種開發情境(行動端、網頁端)所需要的功能，具備即時資料與低維護成本的特色。 由 Google 收購並持續維護整合。專案實作的使用者登入以及購買清單記錄，皆藉由 Firebase 完成。
4. 藍新金流
金流串接
筆者在實作專案過程中，選擇藍新金流研究。考量時間與現階段對後端理解等因素，這個部分還有待後續補上，故此專案練習成品此階段沒有涵蓋串接金流。
(2021原本使用)5. Heroku + GoDaddy 部署
部署網站、美化網址
Heroku 支援多種程式語言的雲平台即服務。輕量使用下，無須付費。(2022年11月改收費制度)
GoDaddy 是從事互聯網域名註冊及網站託管的公司。可以透過其購買美化過後的專屬網址。
(2023更新使用)5. Firebase部署
Firebase 提供一定用量下免費的hosting服務。
以上順序大致依開發流程陳列，其中 Vue.js 扮演重要角色。
實作過程之學習(Part 1)
✏️ 記錄開發中的新發現與學習，由於篇幅較長，分為兩個 parts ✏️
Part1: (1)Figma (2)JSON 檔案整理商品資訊 (3)Vue router 路由 (4)構思系統條件 (5)Vuetify Dialog (6)Vuetify Data Table & 讀取圖片 (7)Vuelidate 驗證
Part2: (1)Login & Register 密碼查看與錯誤訊息 (2)響應式網頁設計 (3)首頁商品改成隨機抽取 (4)合併檔案 降低耦合 (5)新增 404 頁面 修改主要架構 (6)加上 Spinner (7)Heroku 部署
(1) Figma
由於此專案是自己規劃自己開發，故沒有設定 mockup 連結頁面之間關係。配色部分，沒有為此專案重新配整組新的色盤，故使用之前專案配好的顏色。以 #526161 為主要的配色。購物車的頁面，在設計的時候，變數較多，故沒有規劃得很細。隨著開發的進展慢慢補齊。
🔗 參考連結： https://www.figma.com/file/sHUZ87vnWhAbMu3bRQTFPv/e-commerce?node-id=22%3A622
(2) JSON 檔案整理商品資訊
此電商網站提供超過三十個不同商品，直接寫在 Vue 專案中是不明智的決定。將其另外整理在一個 JSON 檔案，降低耦合，未來有要新增或調整產品可以快速做調整。在檔案中要引用可以直接 import 檔案進來，使用物件方式取用。由於要對應到確切的商品(ProductPage.vue)，這邊由 Vue router 代入選到的 ID。
(3) Vue router 路由
為了呈現分頁底下的分頁效果，還有要代入商品的 id ， 一開始打算用 children 寫法，但商品頁算是完整畫面 (而非原畫面一部分)，發現由普通寫法再加工更合適。
後續取用可以藉由 this.$router.params.itemid 。
有關 Vue Router 基本介紹，可以參考：
📝 用 Vue Router 實作網頁切換(上)
📝 用 Vue Router 實作網頁切換(中)
📝 用 Vue Router 實作網頁切換(下)
(4) 構思系統條件
思考購買商品數量上限的時候，考量物品特性，量上限訂為 9 件。如果使用者分批設定把數加到購物車，並沒有卡檢查。(這部分計畫若購物車消費金額超過 5 萬，即不提供透過網站下訂) 代表客戶必須親自聯繫店家。
這個部分跟程式邏輯沒有直接關聯，然而對於系統規則一致性，以及符合真實情境的設定有密切關係。
(5) Vuetify Dialog
運用 Vuetify 的 Dialog 來實作對話框。舉 CheckDialog.vue 為例，將其製作成元件。接著在用到其的 ProductPage.vue 引用，藉由命名 slot 傳送要顯示的內容。重點程式碼如下：
(6) Vuetify Data Table & 讀取圖片
運用 Vuetify 的 Data-Table 來實作資料表。部分需要客製化的欄位，可以藉由 template v-slot 將內容作修改。
上方程式碼可以看到：
:src="`${publicPath}img/elements/${item.img}.jpg`"由於表單這邊的圖片是依據使用者購物時所做的選擇產生而成。故圖片並非在最一開始創建 Vue 檔案即建立，為了取得圖片，可以在 public 路徑下建立 img 資料夾，放置圖檔，並藉由 process.ebv.BASE_URL 取得相對路徑。
publicPath: process.env.BASE_URL(7) Vuelidate 驗證
在購物車下一步，是填寫資料的表格。這邊用到了 Vuelidate 套件協助檢查表單內容。每個空位都設定為必填欄位，另外，手機欄位用了 regex 卡檢查十位數且開頭為 09。下方程式碼為訂購人手機號碼欄位：
