實作過程之學習(Part 2)
✏️ 記錄開發中的新發現與學習，由於篇幅較長，分為兩個 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) Login & Register 密碼查看與錯誤訊息
表單使用 Vuetify v-text-field 實作。密碼欄位提供查看/隱藏功能，由 :append-icon & @click:append 切換 type 來完成。
另外，在 Register 頁面，藉由 :rules 比對使用者兩次輸入的密碼是否相同。錯誤訊息，分了兩種：(1) Firebase 錯誤 (2)自己設定的檢查
其中，專案設計以信箱當成使用者的 id ，所以若申請會員輸入已存在的信箱會報錯。
(2) 響應式網頁設計
考量響應式設計，除了 media 方式，可以藉由 window.innerWidth 取得實時調整的大小，並藉由 v-if 去控制出現與否。
(3) 首頁商品改成隨機抽取
原本首頁四個推薦商品的區塊是寫固定的。
讓專案看起來更專業一些，於是改成隨機推薦。和前面提及的 info.json 概念相似，整理出一份 home.json。寫上抽取四個不重複的功能如下：
之後每次重新 render 頁面時，會隨機取到不同的推薦商品。
(4) 合併檔案 降低耦合
一開始開發時，為了順自己的邏輯，精選商品頁面把商品全部列舉如下：
雖然一目瞭然，但難以維護。為了降低耦合，改用 v-for 搭配前面提到的 info.json 檔案。Lights.vue 檔案也採取同樣的做法降低耦合。
(4) 新增 404 頁面 修改主要架構
專案開發到一個段落，在設定 router 地方加上 404 攔截。發現開發時，直接把 App.vue 檔案當成 layout 來使用，把 Header.vue & Footer.vue 這兩個元件跟主要頁面內容渲染 <router-view>混雜放在一起。這樣無法直接加上 404 獨立頁面，而且架構很奇怪。於是重構這部分的架構，新增 layout 資料夾，並加上 MainLayout.vue 檔案。成功加上 404 頁面，畫面如下：
(5) 加上 Spinner
在送出表單至通知已收到帳款中間，加一個 spinner 呈現「資訊傳送中」效果，spinner 使用 Epic Spinners 套件。
檔案之間(App.vue, Spinner.vue, UserInfo.vue)呈現關係：
這邊本來不想使用 Vuex 來實作。若是父子關係是用 prop & emit。然而這邊不單是父子關係，所以用到 provide & inject 來實作。因為不是單取用關係，有改動拿到的參數，會跳出下方的錯誤訊息，並無法執行成功。
為了解決這樣的情境，引入 Vuex 做狀態管理。Vuex 的誕生就是為了解決這類型的難題。
Vuex 使用方法這邊不詳述，有關其基本介紹，可以參考：
📝 學習 Vuex 狀態管理模式(上)
📝 學習 Vuex 狀態管理模式(中)
📝 學習 Vuex 狀態管理模式(下)
(2021原本使用)(6) Heroku 部署
開發到一個段落，欲將專案發布。此專案選擇 Heroku 平台，詳細設定可以參考這篇文章：Heroku | 將靜態網站部署到 Heroku 上吧！feat. Vue、Node.js ( 🙏 感謝神Q超人的優質好文)
📍 部署完成得到的網址：http://space-tw.herokuapp.com/ (已不可用)
若想進一步擁有客製化的網址，可以至 GoDaddy 網站，購買個人化網址。並參考這支教學影片 Use a custom domain name for Heroku App
📍 個人化網址：http://www.space-shop.online/ (已不可用)
(若不想申請帳號，可以使用這組：信箱/ user@gmail.com 密碼/ user123)
(2023更新使用)(6) Heroku 部署
由於 Heroku 平台從2022年11月改收費制度，故改用 Google Firebase 做網站部署。
參考這系列教學影片 Firebase Hosting Tutorial
📍部署完成得到的網址：https://space-online-shop.web.app/
小結
一個專案的規劃設計與實作，最後部署發布至連網平台。最初選定電商平台販售物品，主要考量手邊既有的素材。繪製 Figma 時，開始構思整個專案的結構，頁面連結關係。
規劃至一個階段，實作的刻 UI 階段還算容易，不過隨著開發進度的推進，串接 Firebase 學習決定要收哪些參數以及選定 ID。考量實際操作時，若同樣商品分兩次加入購物車需要直接合併等各類情境。每個小小的環節都需要細心的處理。
商品的各個頁面，起初部分以暴力展開方式撰寫，抱持「先求有再求好」的原則。然而大致功能齊全後，回頭優化各種可以拆解合併的大小功能。未來有新增修改商品，程式碼部分只需修改 info.json & home.json 檔案。
開發中後段，調研了金流串接部分 💸 (後端串接金流 API)，有些遺憾沒能在這次專案中實作。不久的未來或許會加上並推出第二版的 SPACE，或是另外寫新的專案運用。
從開始整理素材至部署，大約花了40天的時間 📆
歡迎來逛逛~ https://space-online-shop.web.app/
Welcome! Take a seat. 🎐
