Oct 3, 2020
AwesoneG -前後端分離專案
前言
最近參加了AlphaCamp舉辦為期12週的A+訓練營，內容主要分三部分，分別是演算法訓練、自己想做的專案和履歷面試求職的訓練，前六週以建立個人專案和演算法訓練為主，而後六週則是將重心放在求職。目前專案快要告一段落了，就讓我用此篇來介紹我這次發想的專案吧，專案介紹會包含DEMO、發想、目標、應用技術和專案的期程。
專案介紹
DEMO
測試用使用者和 UserStory可參考GitHub Readme
專案發想
- 因為疫情的關係，導致遠距教學需求提升。
- 本身也有遠端教學及解題的經驗。
- 市面上較少專為數理打造的線上教學/解題平台。
專案目標
「Awesome G」的目標是幫助網站使用者完成以下事情：
- 讓學生使用者以付費發問數理相關問題並獲得即時解答
- 讓老師使用者可以透過在線解題後得到費用
專案技術
- 前端：Vue.js / Bootstrap
- 後端：Node.js + express
- 資料庫：MySQL
- 部署：前端(GitHub Page)、後端(Heroku)
- 其他技術：Socket.IO / mocha test / nyc coverage / travis CI/CD / 藍新金流API / RWD / RestfulAPI / Passport (JWT)
專案截圖
專案期程
(會著重介紹第三週MVP版本發表後的優化細節)
此專案花費時間共約4～5週
第一週 前置作業 ERD設計 / WireFrame規劃 / API設計 / UserStory規劃
第二週 完成初版後端API
第三週 完成初版前端和初版專案 (MVP)
第四～五週 優化專案 (詳細)
SocketIO技術導入: 學生使用者可以於上線登入後看到老師解題通知，亦可於線上時即時收到通知；老師使用者僅能於登入後即時收到學生發問通知
RWD: 利用media query將各頁面min-width:370px以上的視窗不會破圖跑版
上傳圖片方式優化：可利用拖曳的方式上傳圖片並預覽
使用前端套件：讓使用者可以點選照片放大檢視並做反轉、轉動等調整，導入Fontawesome美化頁面
前端API method語法： 統一改成Async/Await的寫法
前端路由限制：讓學生使用者登入後的首頁導向學生問題頁面；老師使用者登入後的首頁導向解題頁面
前端後台頁面新增：包含Product / Subject / Scope 三者的新增/瀏覽/編輯/刪除。
後端測試文件：利用Mocha框架撰寫model和request的單元測試，共計156筆測試
後端覆蓋率測試：利用nyc套件檢測測試檔Model和Request的覆蓋率
81.6% Statements 266/326
71.79% Branches 84/117
69.54% Functions 121/174
81.68% Lines 263/322
後端 CI/CD建置：利用travis建置推至github後自動測試並於通過後自動部署至Heroku
感謝
首先要先感謝我的專案mentor楚玄大大，每週都會有一天花半小時到一小時解決我專案上的一些問題和給我一些專案方向以及應用技術的建議，甚至還有一次是live debug😆，希望未來能夠像大大一樣厲害。感謝T4大大，因為專案都有用到socket.io技術而開始請教了你不少問題，也提供了我不少專案方向上很好的建議，讓我的專案有更佳的使用者體驗。感謝Danny大大總是熱心分享，能夠在我專案遇到問題時給予我一些很有用的資源參考。感謝我的同學們Justin/Carey/Henry/YuLiang，一群很好的戰友，會互相給建議、分享參考資源和幫助解決問題，讓自己在這段期間的學習事半功倍。最後要感謝AlphaCamp團隊，第三學期前端Vue相關的基礎課程清楚易懂，讓我能快速應用在自己的專案，另外也用心安排了許多前輩給予專案指導和建議，讓專案更具可看性。
此專案能在時限內有一定的完成度，不是單單靠自己能夠達成，而是有以上 前輩、同學和AC的協助才能有今天的專案，再次感謝🙏🏻
