理解、分解、再構築
模型電商網站的臨摹與再製
這篇是在Alpha Camp學習全端網頁開發課程，最後的畢業協作專案的紀錄文，在Demo前紀錄一下在這個專案中自己做了什麼、學到了什麼的心得文。
想看專案可以點這裡 👈
緣起
隨著十個月的全端網頁開發課程來到了最後，畢業專案也隨之啟動，從最後一學期就開始磨合的小隊終於來到最後一戰了，我們這組一開始就選定了「電商」類型的題目，而內容則是在我提出的電玩租借和模型電商之間稍微猶豫了一下下，最後在一陣分享之下有了共識：
一來我們希望這個專案的前端UI、UX能有不錯的體驗，在有限的6週內，拿個我們喜歡的網站當臨摹並加以優化感覺會是個好方法。
二來我一開始設想的電玩租借服務會類似蝦皮的概念，每個買家也都是賣家，再加上網站管理員，user story似乎相較於模型電商會更為發散。
然後我就被說服了XD
協作模式
由於和兩位愉快伙伴在學期中有協作過simple twitter的經驗，但是本次專案的規模較當時大不少，亦有使用者故事、路由規格與wireframe需要自己來的情形，故將當時的協作模式做了點強化來進行。
進度管理
進度管理是使用Trello來做追蹤，主要是分為需求看板、進行看板與各個sprint的看板來分類，每個禮拜在經過討論後，依照這禮拜的進度重點將事前開好的user story逐條寫成需求卡，擺至需求看板上，大家按照自己想做的功能自由認領、標記頭像後移至進行看板，依照準備中>進行中>待Review>待Merge的kanban方式往下走，最終在這張需求卡完成後移到當時的sprint看板來結束它的一生。
這樣的運作好處是，一來可以了解其他人正在做什麼，不會有同時一起做同個功能的冗余情況發生，二來可以知道目前有哪些是已完成但需要其他人Review的功能正在排隊著。
Review機制
完成待Review的 feature branch，會以pull request的方式做發布，其中記載了這個feature branch做了什麼，reviewer應該做什麼可以進行測試該功能是否完成等等…
接著就是麻煩其他人有空去做Review了，在此特別感謝兩位好隊友Lastor與Wendy協助Review，幫忙抓錯又給了許多優化的建議，讓我偷學了很多啊XDD
其他文件放置場
諸如路由設計、user story、會議記錄、甚至是一些前期的發想考察等等，我們是在hankmd開了個團隊，將這些文件都擺進去，再使用tag做分類進行區隔，放在這裡的好處是可用markdown語法和html標籤來快速進行排版，省了不少心力在保護眼睛的問題上(笑
我做了什麼？
由於這次的專案架構是採用node.js的express+express-handlebars的組合，故沒有特別區分為前端和後端，而是採用功能來做需求卡的開立，所以基本上做到該功能時就會包含該項的前端與後端就是了。
我的主要負責部分大致有：
- ERD繪製
- 後台的路由設計
- 管理員後台的建置
- 後台中各種model的CRUD
- 使用者認證系統與登入註冊頁面
- 前台的訂單展示頁面
- 通知信排版
當然還有一些零碎的小優化小功能需求卡，有時候做完個大功能就撿去轉換心情了，像是實作sticky navbar、圖片上傳的預覽功能、更新favicon、將GSC的商品圖片用爬蟲抓下來，這種可以從既有的技術去延伸出的新東西，都是讓人很樂在其中的，每當看著同個功能有各種不同的花式解的時候，都讓人不經讚嘆這世界之廣的啊(茶
學到了什麼？
臨摹的好處
如同標題一般，臨摹時會嘗試去理解該網站的路由設計、CSS的用法、html的結構等等，也從理解的過程中學到了些有趣的方法。
例如表單id的使用，可以讓input和submit散落在html文件的各處，只要有指向該表單id，就不用全部包在同一個表單中，這樣的一個小技巧就可以實現了更多樣式的排版，在登入註冊頁面、後台model編輯頁面這種有複雜多個表單的版面設計都能更好的實作呢。
而在臨摹時也會有：
這裏如果放另一個網站的某功能，UX會更好呢！
那就再加上去啊XDDD
例如sticky-navbar就是參考了壽屋的方法，用自己的技術嘗試還原後加上去的，雖然我沒做動畫效果就是了。
在臨摹之外
像管理員後台的版面就不是一般人可以晃進去臨摹的了，所以在建構時也是各種參考了其他網拍的上架/管理系統，像圖片刪除的UI就是仿製蝦皮的商品圖片管理讓刪除表單藏在外面，觸發的按鈕浮在圖片上的方法。
而像一些資料相對簡短的分類、特典等model的CRUD就是參考網路上其他的電商平台教學文，試圖讓所有操作可以在同一頁達成，以求較良好的使用者體驗。
在通知信的部分，正想要美化一番但還沒頭緒時，感謝Schaos(aka Gary大大)的提點，提到handlebars也可以拿來作為email模板，開啟了挑戰不使用CSS，只靠html的style來完成排版的html信件。
甚至是最後要放點實際的模型假資料上去時，嫌手動抓圖片太慢，索性看起了爬蟲套件，弄了個小爬蟲一次把想要的商品圖片拉下來再重新上傳到imgur上面，頓時覺得人生是可以更懶的XDD
大概就這樣吧，每次專案都會是個學習的機會呢。
寫在最後
一個畢業專案可以讓我溫故又知新，算是讓我非常滿足的了，不管一個禮拜後的demo結果如何，我想都已是一趟有趣的旅程了。
要感謝Lastor和Wendy兩位一路走來的不離不棄與挑燈夜戰，讓我獲益良多與不敢懈怠。
謝謝Gary助教幾次的Tech hour實用提點(雖然每次都遠遠超時XD)
謝謝AC的團隊與同學們不時的支援，讓轉職的路上少了點孤單呢。
願大家轉職順利！
