期末個人專案驗收：Not citiesocial電商網站開發
(註1：本文為ALPHA Camp舊版全端網路開發學期四：業界專案實戰課程心得的一部分，2020上半年筆者修習此課程後有所調整，和現今課程內容有所差異，目前改為學期三的全端課程部分)
(註2：此文章是以修課期間，相對應學期四期末的basecamp各週進度回報貼文為主，再將記錄改寫補充而成)
Github連結(專案介紹與原始碼):
https://github.com/BOBYZH/not-citiesocial
Heroku連結(應用程式預覽，因免費版限制須稍等):https://not-citiesocial.herokuapp.com/
一、Product Objectives：你想解決的核心問題究竟是什麼？你期待這個產品達到什麼目的？你當初如何設計這個開發規模？
電商網站這題目是因最符合當前疫情與社會文化趨勢(註：COVID-19疫情增加的線上購物需求)而選的，當初的核心問題其實是直接對應期末專案題目的說明：
一般的線上賣場通常把所有的進駐店家放在一起，店家們並不能突顯各自的品牌風格，或是實現他們期待提供給消費者的購買體驗。 更重要的是，客戶的購買資料與數據都是屬於賣場的，無法讓店家優化他們的產品與服務。
而中小企業店家希望能將他們的商品推廣到線上，接觸更多的消費者。
為方便使用者快速開店，且剛好與許多範例網站中，管理者兼唯一大賣家的定位不同，我在一開始就設定允許一般使用者帳戶直接轉換為店家，就像是蝦皮拍賣一樣可以自己在上面開店，不用經營自己的網站，這就是此專案產品要達到的目的。
至於開發規模的設計，開始前是先比較國內知名電商網站的設計，從中選了citiesocial做為復刻的對象，主要是先基於三點考量(可學其RWD版面配置、版面簡單較好模仿、選售商品分類簡單)；動工後進入開發時期初，我則是先在第一週擬好專案提案，列出針對店家與訪客(潛在顧客)的產品目標(要解決的問題或是痛點)，以及初步user stories、產品的完整使用流程與 ERD 架構，釐清大概要先做哪些功能。
二、Product Scope：專案規格需要有明確範圍與定義 — 在不同的階段，清楚說明該做什麼以及不做什麼。
我在專案提案除了如上題的規格範圍與定義，也有先預設各週應該完成的進度(主要是參考購物車與金流教案的多階段開發)，大致依照1. 商品展示、2. 商品與購物車、3. 成立訂單、4. 線上支付、5. 優化體驗的程序在走，完成該階段要求才進下一部分。
然而，花費的時間卻比預期還多，原本預計在四週內完成，主因為前二週有報名多益英文考試得稍微準備、開發的功能複雜程度與錯誤修復難度高於預期、獨立開發的時間分配不如預估情況，實際跑完五個階段後已到第六週。
三、Product Priority：你如何決定產品開發的優先順序？哪個功能要先開發？
承上題，儘管一開始就有開發流程的規劃，細部的週間優先順序則是依照近期狀況作出調整。 隨著AC自第二週起，每週一五題的Automatic Check-ins可以反覆提醒我記錄上週的開發狀況，據此擬定當週調整的方案：
經過了一週的開發，你感覺如何？
上週的開發過程中，有什麼地方卡住了？
本週你預計開發的重點有哪些？依照預計的開發順序列出。
有任何需要幫助的地方嗎？
上週你完成了哪些user story？
至於實際的開發順序，初期因為覺得時間很多，還在商品展示階段時就開始投入刻板，想先把首頁與商品頁面的UI盡量還原，結果第二週結束了才剛開始做後台介面......。
中期有了前面的經驗，加上多益考完能用的時間變多，實際開發速度加快，太想早點但卻回頭去修之前簡單帶過、沒考慮好或理解不夠的部分(如UI、Model與seed的資料設計)；實作個人資料編輯與分類項目功能複雜的部分時，試驗許久卡住後才跳過繼續下一階段，感覺浪費不少時間。
到了後期，順序則不是問題，問題在於自己解不出來，或花很多時間才想出解法。
四、 Challenge：你在開發過程中遇到最挑戰的事情是什麼？你如何解決？是否有嘗試哪些困難功能？（常見問題如時間安排、開發困難功能等等）
其實與認識的同學相比，因為我用的是handlebars + express的全端方案，不像多數用Vue的同學容易卡在前後端整合的問題，主要值得拿出來談的都在中後期。
最挑戰的事情：
專案中目前花最我最多時間解決的，是修復資料顯示錯誤的問題，原本以為只是前端早於後端資料修改完成就渲染頁面，自己先想到用setTimeout延後前端執行的時間，但這並不能完全解決問題；直到當週日Tech hour時詢問助教，助教才提示是非同步的執行順序問題，要用Promise.all取代setTimeout修復，讓後端資料修改完成才由前端渲染頁面。
然而，實際嘗試修改時發現Promise.all放的前提對象要是陣列，我實在想不出要如何將單行命令改寫進去，只好到再下一次Tech hour再度提問，經過助教更詳細說明與同學示範後才學到改法，但總覺得語法很不自然很不習慣......(註：個人想法而已)。
開發困難功能：
比上述挑戰難度稍低些，但感覺也算較困難的，則是讓各頁面都能顯示購物車的內容，這分別在前後端有較複雜的設計：前端用到Bootstrap的Modal(互動視窗)，後端則要在app.js儲存通用的環境變數(res.locals)。
前端的部分難在UI的結構理解與介面復刻，但這是花時間就能搞定的問題；後端則沒那麼順利，起初我測試時發現放到res.locals的購物項目，常常在用modal建立的購物車視窗顯示不出來，往往無法顯示資料。
儘管當週也有在Tech hour提出，但起初也並無法完全理解助教的提示，擅自將載入資料的程式碼放到另一段middleware，以在資料拿完之後呼叫 next()時直接當掉，結果也是在下一次Tech hour助教直接示範才解決。
以上都解決後，就能模擬原版citiesocial的購物車介面：將商品加入購物車後，會跳出互動視窗提示目前品項，在網站任何路由都可以查看，後來更加入在圖示顯示品項數量的功能。
五、Reflection：身為一個開發者，你在這次專案開發裡最大的收穫是什麼？開發畢業專案時最享受的部分？重來一次你哪裡可以做得更好？
最大的收穫：
獨立開發較大規模專案的經驗，與過去小型幾天可完成的，或是從頭有教學指引的長篇，以及期中的小組開發不同，這次的開發特別的開放自由，有一個多月的時間可以想做什麼就做到哪，沒有幾天的期限壓力、絕對的功能要求或小組成員的協調，只要過程中別太放飛自我，有用一定的標準要求自己執行進度，就能隨時間看到專案成果的遞增。
最享受的部分：
其實前後端對我來說都各有樂趣，以電玩遊戲比喻的話，前端畫面就像是花時間「農、刷」裝備，投注時間刻板就能有體面的畫面；後端功能則似高難度關卡破關，每次解決一大問題感覺就像獲得人生成就。 就如同我在前面對寫程式的比喻，寫得有興致時就像是在打遊戲！
重來一次的話：
如果可以更早決定這段時間的所有行程，我會希望把前二週備考多益的時間移走，換算下來同樣的時間我可以完成更多進階功能，如優惠代碼、商品數量與購買限制，甚至全站的管理介面等......，至少前期能更無後顧之憂的投入開發，進度能照預定時程走。
另一方面，我會想全程確實使用Trello來管理開發項目，這次因為是一個人開發，不用跟其他人溝通進度分配，且想說要模仿的對象很明確，加上有擬好專案提案，期限內夠我任性的開發。 但到第四週接近預期期限後，我發現仍有不少預定要完成的事項未執行，才改在basecamp的每週回報詳細條列開發事項，才較能有意識的管理與督促進度。
簡言之，若一開始就能排除外務，且落實開發事項管理的話，我的專案進度應該能提前近一週完成，完成更為進階的功能。
