## 緣由
我曾經嘗試了很多的記帳方式，目前為止最常使用的記帳 App 是 [Moneybook](https://moneybook.com.tw/)。它會直接安全地串接自己的網路銀行，把交易紀錄和餘額直接在 App 上顯示出來。

在這個 App 上，我可以看到他們把分類、交易金額、明細等全部都做出來，而且還使用折線圖等方式將各項分類的支出及收入總額全部弄出來。

因此我在想，我是不是可以擷取他們 App 中的一些關鍵功能，試看看能不能寫出來。所以，我先從支出下手，設定一些常見的分類，請使用者輸入日期、明細及金額，然後網站就能自動計算出各分類的支出總額及所有總花費。

經過一個禮拜多的撰寫，就是[目前所看到的樣子](https://pure-ridge-74177-a37619d894e3.herokuapp.com/)。

## 使用技術
這個網站所使用到的技術如下 ([原始碼在這裡](https://github.com/Taiwania/expense-tracker))：
1. **主架構**：採用 Node.js，Express 兩大技術來構建網站的路由、後端處理及傳遞資料給前端渲染。
2. **Mongoose, MongoDB**：收入支出及使用者登入資訊使用 NoSQL 資料庫 MongoDB 進行儲存，並使用 Mongoose 進行資料的查詢及擷取。
3. **Dotenv**：由於本網站設計成可以在本地及 Heroku 上進行，為了能夠在本地進行開發除錯，以及不影響 Heroku 的部署功能，我這裡採用 Dotenv 來判定專案所處環境是不是本地，以利進行本地的作業。
4. **Express-handlebars**：做為前端的網站渲染。
5. **Express-session, Passport, Bcryptjs, Passport-local**：在使用者登入驗證機制方面，採用 Passport 架構中的 Passport-local 本地驗證策略，密碼使用 Bcryptjs 進行 Salt 加密，並採用 Express-session 在瀏覽器儲存使用者的登入資訊。
6. **Connect-flash, Express-validator**：在登入、註冊使用者資訊及編輯、新增支出紀錄時，用來驗證是否已完整填寫資料及驗證格式是否正確，並跳出錯誤訊息提醒使用者注意。

## 碰到的問題及解決方式
在撰寫本專案時，碰到了許多問題，以下僅簡單提出我覺得有所成長的地方：
1. 支出紀錄格式驗證的問題：在初次進行部署後，有使用者反應在沒有輸入日期的情形下會卡住並終止運作。由於當時的驗證機制只有採用 Connect-flash，必須使用大量的邏輯判斷才能完成錯誤判斷及輸出警告訊息，因此在後續的修正當中引入了 Express-validator，簡化判斷機制，在資料傳入路由前就直接進行資料判斷及產生錯誤訊息，並將錯誤訊息直接傳入路由完成錯誤訊息輸出的步驟。這個 Express-validator 是在查閱資料及詢問問題後才知道有這個 patch，也藉由學習如何使用這個 patch，讓之後的資料驗證及訊息錯誤處理更上一層樓。
2. 在處理分類及種子資料匯入資料庫的過程中，發現使用者及支出紀錄的種子資料已經匯入，但分類的種子資料沒有匯入，這才發現分類種子資料的匯入遇到了同步及非同步問題。原本想要採用 Promise.all(Model.create()) 的處理方式進行，但卻遇到 Model.create() 不是迭代函式而無法使用 Promise.all() 進行非同步處理。最後在查閱資料後才發現 Model.insertMany() 可以解決問題，而且也才學到 Model.insertMany() 可以將多分資料文檔直接丟進資料庫，而 Model.create() 必須一筆筆丟進去。這個部分能讓我學到其他丟資料進資料庫的方法，也能讓我以後在處理輸入資料時，可以隨需求及狀況來使用不同的函數來進行處理。

## 結語
經過這此的專案設計及實作流程，對於如何將我想要的功能進行後端路由設計、資料庫模型建構及前後端資料串接等功能有一些初步的實作經驗，也能讓我有信心可以在往後的實作當中擷取這次專案所學到的東西，作出更符合需求的產品。