理解、分解、再構築

模型電商網站的臨摹與再製

※本篇內容不涵蓋鍊金術教學

這篇是在Alpha Camp學習全端網頁開發課程,最後的畢業協作專案的紀錄文,在Demo前紀錄一下在這個專案中自己做了什麼、學到了什麼的心得文。

想看專案可以點這裡 👈

隨著十個月的全端網頁開發課程來到了最後,畢業專案也隨之啟動,從最後一學期就開始磨合的小隊終於來到最後一戰了,我們這組一開始就選定了「電商」類型的題目,而內容則是在我提出的電玩租借和模型電商之間稍微猶豫了一下下,最後在一陣分享之下有了共識:

一來我們希望這個專案的前端UI、UX能有不錯的體驗,在有限的6週內,拿個我們喜歡的網站當臨摹並加以優化感覺會是個好方法。

二來我一開始設想的電玩租借服務會類似蝦皮的概念,每個買家也都是賣家,再加上網站管理員,user story似乎相較於模型電商會更為發散。

然後我就被說服了XD

由於和兩位愉快伙伴在學期中有協作過simple twitter的經驗,但是本次專案的規模較當時大不少,亦有使用者故事、路由規格與wireframe需要自己來的情形,故將當時的協作模式做了點強化來進行。

進度管理

進度管理是使用Trello來做追蹤,主要是分為需求看板、進行看板與各個sprint的看板來分類,每個禮拜在經過討論後,依照這禮拜的進度重點將事前開好的user story逐條寫成需求卡,擺至需求看板上,大家按照自己想做的功能自由認領、標記頭像後移至進行看板,依照準備中>進行中>待Review>待Merge的kanban方式往下走,最終在這張需求卡完成後移到當時的sprint看板來結束它的一生。

爆氣運作的最終sprint看板

這樣的運作好處是,一來可以了解其他人正在做什麼,不會有同時一起做同個功能的冗余情況發生,二來可以知道目前有哪些是已完成但需要其他人Review的功能正在排隊著。

Review機制

完成待Review的 feature branch,會以pull request的方式做發布,其中記載了這個feature branch做了什麼,reviewer應該做什麼可以進行測試該功能是否完成等等…

Pull request大概長這樣

接著就是麻煩其他人有空去做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就是參考了壽屋的方法,用自己的技術嘗試還原後加上去的,雖然我沒做動畫效果就是了。

搜尋列合併導覽列的sticky bar效果

在臨摹之外

像管理員後台的版面就不是一般人可以晃進去臨摹的了,所以在建構時也是各種參考了其他網拍的上架/管理系統,像圖片刪除的UI就是仿製蝦皮的商品圖片管理讓刪除表單藏在外面,觸發的按鈕浮在圖片上的方法。

而像一些資料相對簡短的分類、特典等model的CRUD就是參考網路上其他的電商平台教學文,試圖讓所有操作可以在同一頁達成,以求較良好的使用者體驗。

這次在不少地方都用上了收合式的表格

在通知信的部分,正想要美化一番但還沒頭緒時,感謝Schaos(aka Gary大大)的提點,提到handlebars也可以拿來作為email模板,開啟了挑戰不使用CSS,只靠html的style來完成排版的html信件。

友人表示:好久沒看到如此簡潔的通知信了 (這是褒還貶XD)

甚至是最後要放點實際的模型假資料上去時,嫌手動抓圖片太慢,索性看起了爬蟲套件,弄了個小爬蟲一次把想要的商品圖片拉下來再重新上傳到imgur上面,頓時覺得人生是可以更懶的XDD

大概就這樣吧,每次專案都會是個學習的機會呢。

一個畢業專案可以讓我溫故又知新,算是讓我非常滿足的了,不管一個禮拜後的demo結果如何,我想都已是一趟有趣的旅程了。

要感謝Lastor和Wendy兩位一路走來的不離不棄與挑燈夜戰,讓我獲益良多與不敢懈怠。

謝謝Gary助教幾次的Tech hour實用提點(雖然每次都遠遠超時XD)

謝謝AC的團隊與同學們不時的支援,讓轉職的路上少了點孤單呢。

願大家轉職順利!

世界並不美麗,但也因此美麗無比

世界並不美麗,但也因此美麗無比