老爸的私房錢

為何會選擇這個專案？

此專案涵蓋前端+後端網頁開發，綜括本人至今所學的網頁開發技術，因此想透過介紹此專案回顧所學。

前端：HTML, CSS, Bootstrap
後端：Node.js, Express.js, MongoDB
功能: 瀏覽 web 介面, CRUD 資料, LOGIN 功能

使用了什麼技術？

【前端】

運用 Bootstrap 元件排版 index, new, edit, login, register 等頁面，並著重版面一制性

• Navbar: 統一在頁面上方載入 Navbar 放置網站名稱，及登入/登出快捷鈕
• Containers: 頁面主體採用 Container 包覆，並接續使用 row, col 排版
• Forms: 表單使用 Forms 元素，修改文字/按鈕樣式以符合整體版面設計

【後端】

• Node.js: 此專案執行環境為 Node.js，及選用 npm 套件們
• Express.js: 搭配 Express.js 框架來開發 Web App
• Express-Handlebars: 使用樣版引擎解析 html & css 渲染成網頁，並可將後端資料傳給前端使用
• MongoDB: 將資料存取在 MongoDB 資料庫
• Mongoose: 透過 Mongoose (ODM 套件) 來連接並操作 MongoDB
• body-parser: 解讀 request 表單資料的請求，存放到 req.body 做為參數後續使用
• method-override: 使用 method-override 套件以符合 RESTful 風格的網址設計
• express-session: 擷取 cookie 資訊、生成 session，並把 session 資訊存放在伺服器端
• passport: 載入 passport 認證帳號密碼，提供使用者登入使用
• bcrypt.js: 將使用者登入之密碼，透過 bcrypt.js 雜湊後，再存入資料庫

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

這份專案需要處理多筆的資料關聯，因此花了較多時間思考Router該如何處理，但過程中也學習到更多 MongoDB 的操作方法。

而在建立 CRUD 操作時相對較能掌握，在撰寫程式碼時，遵守 RESTful 風格的網址設計，就能減少出錯的機率。

過程中碰到什麼困難？又如何克服？

1. 日期無法顯示正確格式

在寫index page時，發現日期無法顯示正確格式，查找資料發現 Date.prototype.toISOString()，因此在 handlebars-helpers 放入 dateFormate function 來轉換呈現的日期變數

2. 網頁UI的設計
在網頁UI設計時花費不少時間，原本是使用者時，不會細看網頁上的文字，功能排版，當成為設計者時，為了使用者體驗，網頁上每放一個東西，包括排版，文字敘述，都必須再三確認確保能讓使用者了解如何使用，避免詞不達意。

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

因爲有多個資料表，所以在製作 Model Schema 時、及撰寫 CRUD Routes 時，都需要更謹慎確認資料，也因此發現 Mongoose 提供了眾多使用語法，打算繼續研究 Mongoose 的官方文件，以更加熟識資料操作。