This project is Live here. You can use the test account below or register an account to login.email: user1@example.com/user2@example.com
password: 12345678
為何選擇這個專案？
因為想培養記帳的習慣，但一直找不到完全符合需求的記帳工具，於是在學會實作基礎的資料操作功能 CRUD 之後，決定打造一個專屬的記帳本，也期望未來能再加上更多進階的應用，開放給別人使用。
使用什麼技術？
前端使用 HTML/CSS/JavaScript 搭配 Bootstrap 框架加速頁面開發。
為了在後端也使用 JavaScript 開發，選擇了 Node.js 建立執行環境，搭配 Express 框架來幫忙接收 HTTP 的請求及做出回應、組織 MVC 架構，並使用 Express 內建的路由系統來實作 RESTful API。
Model 層面使用NoSQL 的 MongoDB 搭配 mongoose ODM，讓我可以直接用 JavaScript 物件導向語法來操作資料庫；View 層面使用與 HTML 結構相似的 handlebars 模板引擎協助將資料帶入樣板檔案並轉換成瀏覽器看得懂的 HTML 檔案。
打造使用者登入機制時，使用 Passport.js 套件來認證使用註冊帳號或 Facebook 帳號登入的使用者，搭配 express-session 套件儲存認證結果。另外為了保障使用者帳戶安全，使用 bcrypt.js 雜湊使用者密碼。
哪部分相對能掌握？哪裡花最多時間？
前端頁面因為設計簡單，再加上使用 Bootstrap 框架開發，是相對較能掌握的部分。
後端在建立基礎 MVC 架構和設定路由上也相對輕鬆，主要有三個地方花了較多時間：
- 研究如何使用 Passport 套件認證使用者
- 使用 mongoose 查找特定資料
- 使用 async/await 及 Promise 重構種子資料
過程中碰到什麼困難？又如何克服？
當遇到不熟悉的語法（如 mongoose）、沒用過的套件（如 Passport）時，會去查找官方文件，但有時官方套件寫得比較生硬或沒有我要的使用情境時，通常善用關鍵字搜尋 Stack overflow 就能找到解決辦法。例如我不知道怎麼用 model.find() 的 mongoose 語法搭配 regular expression 和變數來查找資料，搜尋官方文件並沒有看到使用變數帶入的使用情境，後來用關鍵字找到Stack overflow 上的 How can I use a regex variable in a query for MongoDB 才解決問題。
過程中對哪個技術有特別深刻的學習？
首先，在建立登入機制時使用 Passport 套件，讓我有機會研究官方資料，了解每段程式碼的意義，並學會怎麼因應自己的使用情境來修改。除了 Facebook 登入驗證外，之後也會研究怎麼加入更多驗證策略來建立第三方登入功能來提升使用者體驗。
再來是在建立月份來篩選支出時，原本是使用 input type=“month”，結果發現竟然跟 safari 不相容，所以後來修改成下拉選單的方式。這是我第一次遇到瀏覽器不相容的狀況，之後也會提醒自己要注意這種情況。
最後，在建立種子資料時，因為非同步處理的流程問題，導致種子資料建立不完全，在研究 Promise 和 async/await 如何使用的過程中，對非同步處理有更深一層的認識，也完成挑戰把非同步的程式碼改寫成較好閱讀的 async/await 模式。
