廣志美冴的家庭記帳本(登入憑證、關聯性資料、async await練習)[Alpha Camp學期 3後端第二週]

專案介紹：

一個以使用者登入方式擁有的私人記帳本，可以自建帳號也可以用FB、Goggle帳號登入。

記帳本除了瀏覽所有支出細項外，可以很方便的新增、編輯、刪除一筆支出，也可以依分類簡單看出該類別花費金額。

你為何會選擇這個專案？

做一個自己順眼的記帳本幫助自己日常開銷紀錄和控管。另外記帳本有資料庫CRUD、身分認證等需求，對於學習相關套件和語法是個還不錯的練習。

你使用了什麼技術或套件？

除了Node.js、Express.js基礎框架外，

• 使用express-handlebars樣板處理畫面渲染，並搭配connect-flash讓partial handlebar做訊息警示
• 使用method-override實現CRUD路由RESTful語意化
• 使用mongoose物件映設連線MongoDB資料庫
• 使用dotenv設定統一放置環境變數，並以.gitignore隱藏避免個人設定外洩
• 使用passport及相關local、facebook、google策略進行身分驗證
• 使用bcryptjs密碼雜湊，增加資訊安全性
• 使用bootstrap和font awesome美化也簡化CSS樣式
• 使用async await語法糖搭配promise all，優化callback hell槽狀結構由外向內問題，讓程式碼由上到下更簡潔易讀
• 使用MVC架構，增加功能獨立性
• 使用heroku佈署網頁

哪部分你相對能掌握？哪裡花了最多時間？

對於各個套件的語法雖然不能直接默寫出來，但查閱文件後都還算能掌握。另外對於promise的.then().catch用法相當熟悉，與資料庫的溝通、model建立、種子資料設計和資料關聯性都還算順手。

在這個專案裡，讓我花較多時間的除了bootstrap切版外，就是async await語法糖的用法，發現這種寫法讓程式碼更簡潔容易閱讀，特地先查找資料學習後再回專案裡練習，中途還一度發現沒有catch到error訊息，再重新翻找相關資訊學到try catch語法。

過程中碰到什麼困難？又如何克服？（例如：查找網路文件）

由於很多套件都是新學，常遇到語法不熟悉的狀況，我就常在網上查找相關文件和討論範例。像是課程中提到LocalStrategy和FacebookStrategy語法，但我在做專案時還想多加GoogleStrategy，於是就多花點時間從原始文件和stackflow上的討論找使用方法。

另外在學習課程和翻找資料時還額外發現一個不理解的console message問題，花了點時間找答案才知道console後接不同的message level可以在devtool的console裡出來不同的效果，還可以在devtool的console裡用level filter去篩選訊息，相當有趣。

在佈署heroku網頁時，網頁open出現"Internal server error"，這花了我相當多時間上網查找資料，雖然看到有些討論說到不要把.env放進.gitignore裡問題就消失，但就覺得這方法雖然簡單暴力卻有安全問題。查了用 heroku logs -t 一條條看問題出在哪，再把找到的error message上網搜尋，看到最可能的問題是環境變數設定上。最後每項環境變數設定重新檢查後，就發現原來是有typo...😓，解決後順利上線。

過程中你有對哪個技術有特別深刻的學習？

除了遇到問題解決問題外，過程中最深刻的學習應該還是async await語法吧，一試成主顧😂。

一開始是看到有人使用看起來程式碼好清楚簡潔，深入學習後發現這種跟promise一樣由上到下的寫法邏輯上很清楚。又比promise少了.then()看起來更簡潔，在需要非同步處理時加上await就可以避免資料還沒到就跑下一行程式碼的問題。光在這個專案裡練習使用，就發現debug特別容易！