專案簡介 - 網頁記帳本app

隨著一點一滴的累積，也回頭將 AC 學期三 week 2 的作業 - 網頁記帳 app 專案（aka.老爸的私房錢）做了修改與優化。此篇文章為優化後的專案簡介。

作品連結 | Github

為何會選擇這個專案？

從頭開始建立記錄支出的專案，熟悉後端基本功 - 資料 CRUD 操作、樣版引擎、使用者認證，以及資料關聯性以及篩選的操作練習。

使用者功能

1. 使用者可以註冊登入，只能瀏覽與操作自己建立的資料
2. 瀏覽自己所有支出項目、總金額
3. 新增、編輯、刪除支出內容
4. 依據「類別」篩選支出，並顯示該類別的總金額

使用技術

JavaScript, Node.js, Express 框架, Express-handlebars 樣版引擎, Bootstrap, MongoDB Altas & mongoose, Passport.js 使用者認證流程。使用非同步 async/await 語法寫起來更加直覺順暢。

過程中遇到的困難以及克服

困難1: 類別資料關聯反覆查找

• 情況說明：專案中有很多使用支出類別 (Category) 資料的地方，例如：類別對應的 icon、類別篩選資料，造成只要資料有關聯到類別的操作，就重複寫 Category.find() 查找類別的資料。
• 已知問題：一次操作重複查詢資料庫，造成運行資源以及 user 時間上的浪費。
• 改善方法：在與同學交流時，知道了語法 populate()。利用 Record model 的關聯，用上 populate() 直接一步取出關聯資料，省下很多非同步的步驟，也省下不少變數宣告。Commit

困難2: 篩選後下拉選單顯示所選擇的項目

• 情況說明：篩選後重新渲染的畫面中，選單應該要顯示剛選取的選項，使 user 明白目前呈現資料的篩選條件。
• 已知問題：想要寫「若某選項是所選擇的項目，則加入 selected」渲染時就會顯示該選項，但Handlebars if-helper {{#if true}} render here {{/is}}（條件成立時，才會渲染兩個雙花括之間的內容），if 只能傳一個變數，沒有辦法寫條件判斷運算式。
• 改善方法：自訂 helper：透過 Handlebars.js 原本 if-help 的原始碼，複製修改成可以接受 if 條件是，增加到自己專案中來使用。Commit

反思與感受

1. 在後續學習到關聯資料庫以及 SQL 語法後，就會感受到查詢功能強大之處，是利用資料間的關聯性，有效率地組合出前端所需的資料，也是後端基本功，各種資料庫語法都應該會有類似 populate() 的功能，後續的學習會更有對相關技術的敏感度。

2. 關於「篩選後下拉選單要顯示所選擇的項目」，加上此處的選項是 {{#each}} 渲染出來的，增加了許多變數。當初花了很長的時間 google 查找資訊與嘗試。當時的我並沒有辦法想到「依照現有可得的資訊，來客製化自己想要的功能」，這就是透過動手做來累積經驗的價值。

後續嘗試方向

1. Docker 容器化與 AWS 部署（2022/11 請見筆記 - Docker 與 AWS EC2 初探）
2. 改成前後分離的 MERN 專案（2023/4 進行中）