全端產品專案介紹筆記
以記帳軟體為例呈現如何扼要介紹產品專案
本筆記將以 WHY、HOW、WAHT 的黃金圈為主要框架，來摘錄打造記帳軟體 Web App 的目的、累積、收穫與學習。相關連結：
記帳軟體專案實作摘要
- WHY：以商業、用戶、技術面來剖析專案的價值。
- HOW：以熟練的部分、面臨的挑戰、印象深刻的體驗來彙整實作重點。
- WHAT：彙整使用的技術清單及相關的技術筆記。
為何會選擇這個專案？
商業面：與市場與職涯發展接軌
在這科技秒新分異、資訊爆炸的時代，許多人為了追求有效的自我管理，紛紛使用各種工具或應用程式來輔助，甚至自動化管理自己的次序時間安排、財務及金流控管、健康和體況追蹤等。
更重要的是，隨著個人公司、自由工作者、工作自由化等趨勢，這些自我管理工具的需求目前逐漸上升。
對於成為具跨域思維的軟體工程師、全／後端工程師，或自行打造 Side Project 的獨立開發者而言，都很合適用以磨練技術與升級思維。
用戶面：打造友善使用者體驗
由於這是個操作頻率很高的產品，各功能都需要有較友善的使用者體驗，在換位思考、版片配置、互動操作等方面都會需要花心思打磨，也比較有機會練習打造具商業價值、消費者願意使用的工具。
技術面：以後端技術為核心來刻意練習
此專案為以 Node.js 的 Express 後端框架為基礎來打造的全端產品，對於伺服器初始設定、MVC 原則設計、CRUD 資料操作等都能有多次的刻意練習，幫助非本科初學者的我能快速上手並熟練各種重要的技術。
哪部分相對熟練且能掌握？
系統化及流程化「伺服器與資料庫架設」
在此專案前，已有各種實作演練，並且逐步彙整成 專案初始化筆記，所以對於基礎架設以相對熟練。
簡練呈現攸關商業邏輯的功能（CRUD 與進階篩選等資料操作）
最重要的商業邏輯與功能，通常牽涉各種資料操作。由於過去的跨領域與業務背景，讓我容易深刻理解商業情境；加上強大的組織能力與運算思維的輔助，使我能將複雜功能與方法化繁為簡；更因熱愛閱讀，而練成的語文掌握力，讓我能以簡練易讀的程式碼來打造功能。
哪裡最花時間？碰到什麼困難？又如何克服？
以 MongoDB 及 Mongoose 設計與操作關聯式資料
雖然 NoSQL 的 MongoDB 具有一定彈性，但對於具關聯性的資料也提供相對的功能來設計與操作。然而 Mongoose 的官方文件風格較為學術與簡練，許多深度操作的細節需要大量提問與查詢。過程中數度卡關。在轉換搜尋策略後，才找到初步的使用方法與解決方案。為此我還寫了一篇 筆記 摘錄此問題的解決過程。
友善體驗的日期格式資料操作：JavaScript Date object 前後端資料處理
在設計日期相關功能時，是初次練習操作 JavaScript Date objects ，對於此資料格式與方法都非常生疏，查找了 MDN 官方文件、Stack Overflow QA 等資料依舊不甚理解，也無法達成預期效果。
（例如：如何將資料回傳為前端 HTML Date Input 的讀取格式、轉換為 YYYY-MM-DD 的格式呈現在紀錄頁面等。）
因為已超過預設的停損點（大約兩天），在第一次打造時，退而求其次，使用 String 為格式來操作。
但在後來與專業工程師助教及同學的討論中，發現在業界的日期操作，甚至會牽涉跨時區產生的時差問題，因而重新研究如何解決。也才搞懂原來 Date 是個可以運用原生方法的 Object，已順利用簡練的方式來完成任務。
對哪個技術有特別深刻的學習？
結合各種程式設計與抽象概念以建構「產品實作程序」的理解
這裡指的設計原則與概念包含：Object-oriented programming 物件導向、Asynchronous programming 非同步、Separation of Concerns (MVC principle) 關注點分離、基礎網路觀念、Middleware 與 Event Loop 等。
深思與彙整這些原則和概念後，協助我對於打造全端產品的技術面有系統性地認識，更整理出 產品實作程序 這個有效的實作框架。
打造業界常用的認證系統（passport & expess-session）與第三方登入（Facebook & Google）
在採用第三方套件前，曾以土法煉鋼手刻過登入功能 Login_Handcraft，並初步了解認證機制。而在進階練習時，透過社群資源強大的 passport 打造完整的註冊、登入、登出、使用者認證等功能。在教材引導下完成 Facebook 登入後，躍躍欲試體驗 Google Sign-in ，並且成功完成。使得我在：採用第三方工具與資源、閱讀原文技術文件、查找資料等能力都大幅升級。
下一步學習方向？
目前對於已後端框架打造全端產品已具備一定熟練度，然而對於想往後端發展的轉職者來說，接下來將專注打磨以下技能：
- 關連式資料庫
- 前後端分離
- 前後台網站
使用了什麼技術？（若提供連結，為作者之技術筆記）
JavaScript 核心觀念
- Variable & Value 變數與值
- Data Type and method 資料型別與操作方法
- Operator 運算子
- Array & Object 陣列與物件應用
- if/else 流程控制與條件判斷
- Loop and Iterator 迴圈與迭代器
- Function 封裝函式
2. Programming 程式設計
- JavaScript Standard Style
- Object-oriented programming 物件導向
- Asynchronous programming 非同步
- Separation of Concerns (MVC principle) 關注點分離
產品思維 Product Mindset
協作技術
後端技術 Back-End
- Web Sever 伺服器
2. npm packages 應用程式套件
- 密碼雜湊：bcryptjs
- 取用 HTML 表單資料：body-parser
- 提示訊息：connect-flash
- 管理環境變數與敏感資訊：dotenv
- View Engine 模板引擎應用：express-handlebars
- 運用 cookies 和 session 儲存認證結果：express-session
- 輔助模板引擎：handlebars-helpers
- 打造 Restful 路由：method-override
- 根據 session 資訊認證使用者：passport
- 自有與第三方登入策略：passport-facebook、passport-google-oauth20、passport-local
3. NoSQL Database & ODM 資料庫：MongoDB & Mongoose
- Database management system 資料庫架設
- Data Schema 資料設計
- CRUD 資料操作
4. Deployment 部署：PaaS — Heroku 雲端部署
前端技術 Front-End
- Bootstrap & RWD
- DOM 操作與事件處理
- Font Awesome 引用
抽象概念應用
- Concept of Internet & HTTP 全端開發者必懂的「網路觀念」
- 深入淺出 Middleware
- Event Loop 事件循環
- User Authentication 使用者認證
