全端開發專案介紹-家庭記帳本
家庭記帳本是一個主要由 Node.js、 Express、 mongoDB 打造的微型專案，使用者註冊帳號登入後可以記錄支出。
信箱：user1@example.com 密碼：12345678
信箱：user2@example.com 密碼：12345678
為何會選擇這個專案？
主要可以分為技術層面與產品層面的考量：
- 技術層面-刻意練習後端與資料庫處理
從技術的層面來說，我認為透過這個專案可以讓我增進以 mongoose 操作 MongoDB 資料庫的熟練度，並且透過閱讀 mongoose 文件嘗試不同撈資料的方式與嘗試將資料進行關聯。此外，使用 Passport 進行登入驗證則是專案中另一個刻意練習的重點。
2.產品層面-記帳軟體商業價值與可持續迭代性
市面上不乏有許多關於記帳的優秀軟體 ex:記帳城市、記帳CWMoney、MoneyBook 麻布記帳…，可見以產品商業價值之高及一般大眾對於此類產品有一定的需求，又以新手練習是個來說可以多方觀摩的素材。
就本身「記帳」的主題而言，其功能是可以不斷無限延伸的，並且可以根據使用者體驗持續迭代優化產品。
家庭記帳本使用技術盤點：
開發環境：
- Visual Studio Code
前端技術：
- Express-Handlebars: 5.2.0 — 模板引擎產生 HTML 內容
- Bootstrap5 — 前端套件
- CSS
後端技術：
- Node.js — 執行環境
- Express: 4.17.1 — 後端應用程式架構
- MongoDB — 資料庫連線
- Mongoose: 5.11.14 — 操作資料庫連線
使用套件：
- Body-parser: 1.19.0 — 解析瀏覽器傳送來的 body 資料
- Method-override: 3.0.0 — 擴充套件 http 請求
- Bcryptjs: 2.4.3 — 使用者密碼加密處理
- Connect-flash: 0.1.1 — 快閃訊息
- Dotenv: 9.0.0 — 管理環境變數
- Faker: 5.5.3 — 產生種子資料的假資料
- Passport: 0.4.1 — 使用者認證
- Passport-facebook: 3.0.0 — 使用者 facebook 登入驗證
- Passport-local: 1.0.0 — 使用者本地登入驗證
軟體架構模式：
- MVC 架構
較能掌握的部份及花費最多時間的部分
較能掌握的部分：
- 做基本的 CRUD 功能的部分
- 使用 Promise 優化非同步的語法
- 前端畫面排版
花了最多時間的部分：
- 處理篩選月份的問題
- debug
- 建立資料庫 collections 之間的關聯
開發中遇到的困難
在開發的前期，由於不是很熟悉資料庫關聯的方法，所以在做每筆帳(record)的分類(category)，只要是遇到新增、編輯、瀏覽時，我都是採取手刻 category 的方式，把每一筆 category 的 tilte 和 icon 一遍遍的刻上，十分的麻煩，雖然確實可以在前端的畫面是正確顯示資料，但在後端的資料庫的部分感覺是少了什麼。
為了更有效的解決這個問題，於是我開始 google 如何用 mongoose 操作資料關聯的方法以及查閱 mongoose 文件，發現可以建立不同 collections 之間的關聯，於是便新增了Category modal 並且與 Record modal 建立了關聯，進而達到資料精簡化的目的。
過程中特別深刻的學習
前端畫面 select option 選項保留的方法
顯示選擇的選項的方法，我一開始使用的方法是將伺服器接收到 req.body.category 直接當作變數回傳到前端 handlebars 再渲染一個<option>放在<select>下的第一個子元素，雖然如此方式可以在畫面呈現正確的選擇選項，但是當拉下下拉式選單時，發現會有渲染重複選項的問題。
從 handlebars 的文件中 可以借助 handlebars 中的函式設定當兩者條件相同或不相同的情況時分別會產生的情況。
藉由這項工具，當我們收到此筆 record.category 再回傳到前端樣板時， 剛剛所設定的函式
<option>
{{#ifCond A B}} //A 值、B值 是否相同
selected //當a、b值相等就會成立
{{/ifCond}}
</option>
就會去比對此時的這筆 record.category 跟 <option>中的 category 是否相同，如果相同就會在該<option>賦予 selected 的屬性，若不相同，則不影響該選項，也因此畫面也就會只會保留正確的選項了！
