用老爸私房錢練習如何呈現專案成果
這次的筆記將透過介紹產品的方式，摘錄打造記帳web app過程中的挑戰與收穫。附上相關連結 :
你為何會選擇這個專案？
技術面來看，對於甫接觸後端資料庫與框架的我來說，這個記帳專案是一個很好的機會讓我去實作CRUD同時刻意練習如何打造一個RESTFUL API的過程，同時循序漸進去打造使用者驗證功能。
此專案是以Express後端框架基礎來打造的全端產品，運用 Mongoose 來與後端資料庫 MongoDB 溝通，對於之後必定需要接觸後端資料庫的我來說，從NoSQL 的 MongoDB 出發是相對友善的敲門磚。
從使用者層面來看，如果是一個有記帳習慣的人來使用，這是一個使用頻率非常高的產品，所以在整體的使用者體驗都必須要更細心打磨，除了打造出友善的UI介面之外，簡易的互動操作也是一個好用的記帳手札所必須具備的。
你使用了什麼技術？
這個專案使用了Express作為後端的開發框架，並且運用Express-handlebars來實作前端模板。
前端畫面的排版可以分為表單部分和記帳簿首頁的部分，表單的部分使用自己客製化的CSS樣板來打造互動性的表單，記帳簿首頁除了使用bootstrap來排版之外，也引入chart.js幫助呈現資料視覺化的效果。
後端資料庫的部分採用MongoDB，透過在Express中載入Mongoose來與資料庫溝通。
最後在使用者登入驗證的部分是使用了Passport.js，並用express-session來存取使用者的狀態，第三方登入的部分則是採用了Facebook & Google的驗證策略。
哪部分你相對能掌握？哪裡花了最多時間？
我覺得實作CRUD的部分是相對比較好掌握的，畢竟是之前已經實作過很多次的功能，所以對於如何設定路由，打造RESTFUL API的過程都還蠻熟悉的。
本來以為在實作登入註冊的部分會是最花時間的部分，第一次的實作會覺得自己只是很像在複製貼上程式碼而已，但花費大約30分鐘好好去閱讀passport以及session&cookie的相關文案之後，就大概知道各個步驟所代表的意義是甚麼。
自己最花時間的地方應該是在建立種子資料和打造篩選功能上，在實作種子資料的時候一開始是將類別和支出紀錄兩筆資料關聯在一起的，主要的原因是因為要讓每筆紀錄的類別都能連結到對應的ICON，於是花了一些時間去研究populate()的運作方式，雖然實作出來了但卻會影響到CRUD的部分，使新增和編輯的路由程式碼變得很複雜，所以又再改變了種子資料的建立方式。
在打造篩選功能上，跟前面的例子也是很類似，有兩個不同的方案可以實做出來，第一個是mongoDB本身的aggregate語法，第二個是自己有實作過的正規表達式，自己起初是比較想使用aggregate進行資料的篩選，雖然實作的出來，但也是一樣沒有達到自己當初想要的效果，所以也還是回去使用自己相對熟悉的方法。
過程中碰到什麼困難？又如何克服？
- 設計與操作資料庫(mongoDB & mongoose)
MonogDB 其實提供了相當多的語法和功能讓我們去設計和操作資料，比如說在篩選資料的時候就有 find()、update()、aggregate()這些語法都可以使用，這些語法的功能看似非常相似，但其實都有各自的長處，因此在設計路由中與資料庫互動的語法時，如何找到適合的人是很大的課題，常常伴隨著需要大量閱讀資料和console.log才能慢慢理解mongoDB提供的這個語法是不是符合我的需求。
- 保留原始資料的表單 (handlebars)
如上圖所示，我想要在每次選完篩選條件後保存表單的狀態，讓我目前選取的條件顯示在頁面上，用程式碼來形容的話：
<select class=”custom-select”>
<option value=””>Open this select menu</option>
<option value=”1"
{{#if (value === 1)}} selected {{/if}}>One</option>
<option value=”2"
{{#if (value === 2)}} selected {{/if}}>Two</option>
<option value=”3"
{{#if (value === 3)}} selected {{/if}}>Three</option>
</select>這樣子顯然是不管用的xD ，於是直接用handlebars if equal這類的關鍵字去搜尋，其實就可以得到蠻多有用的解答的，我自己參考的是
過程中你有對哪個技術有特別深刻的學習？
自己在採用第三方套件之前，已經有土法煉鋼實作過一次使用者登入機制了，但當時其實對整個session-cookie的機制是一知半解，這次透過胡立老師的文章重新思索過一次Session跟Cookie的關係後，就比較知道自己在幹嘛了xD 在教材引導下完成Facebook登入後，馬上打鐵趁熱自己照著passport.js官方文件的指引去實作Google Oath，也成功地完成了，我覺得在引用和閱讀原文技術文件的能力都提升了許多
下一步學習方向
目前對於以後端框架來打造一個符合CRUD和RESTFUL需求的產品已經有一定的熟練度了，之後要繼續專注在提升這些層面的知識上:
- mongoDB資料操作語法
- handlebars-helper應用
- error-handling機制
