親愛的，我們重新發明了購物車
大家好，我是 Dcard Frontend Team 的 Yuna，目前是屬於 EC Delivery Team 的開發成員，主要負責 Dcard「好物研究室」的 web 前端開發。
最近好物研究室新增了購物車的功能，終於可以一次把想買的東西一起結帳了！👏👏👏 這個看似簡單的功能，實質卻花了 EC 團隊一整年的時間開發。這篇文章就來帶大家了解 EC 在這一年的架構升級，究竟做了些什麼改動，以及對後續的開發帶來什麼影響。
好物研究室
好物研究室是 Dcard 自 2018 年中開始的電商專案，希望能透過 Dcard 上內容討論的趨勢、加上選品專員的選物眼光，找出 Dcard 使用者會喜歡的品項，並且在 Dcard 中透過文章去「燒」到使用者，創造討論，並藉由使用者們的討論、及購買人的真實回饋，建立起對於好物品質的信賴感，致力於「打造讓人購物不後悔的選物平台」。
因為好物研究室是新型態的社群電商，產品在過去的幾年內快速迭代新版本，不斷推出新功能到市場上驗證定位。為了因應功能的快速改動，到現在最新版本的 3.0 ，已經調整過兩次架構。
好物研究室 1.0
好物研究室始祖，使用 webview 及 iframe 將購物流程內嵌在 App 及 Web 中，是以現有的廣告活動擴充出來的簡單架構。在這個時候還沒有所謂 Product 的概念，庫存的所有屬性都是在 Campaign 上。當時是以 MVP 的形式開發，快速將產品推進市場中測試。
好物研究室 2.0
在驗證電商在 Dcard 上是可行的以後，原有的陽春架構已經沒辦法滿足越來越多樣化的營運需求，在 2020 年初 EC delivery team 正式成立，準備打掉重來開發新的架構。
架構擴充為幾個單位：供應商(Supplier)、活動(Campaign)、商品(Product)、最小庫存單位(SKU)，並沿用原本活動綁文章的架構。 除此之外還將原本 webview 的購物流程改成 native ，讓使用者有更好的購物結帳體驗。
2.0 的問題
2.0 的架構在線上跑了一年多，漸漸還是遇到了一些問題，其中最難以解決的就是要實作購物網站最基本的「購物車」窒礙難行。Product 都被包在 Campaign 裡面，一些優惠、運費、分類等屬性還是綁在 Campaign 上，無法支援跨 Campaign 結帳，要湊免運費就比較困難。
後來營運夥伴們會將一些相似或同廠商的 Product 放到同個 Campaign 裡面來模擬購物車的概念，然而每篇文章主要還是介紹其中一個商品，在選擇商品規格的地方就會看起來有很多無關的東西在一起，讓人很困惑。
好物研究室 3.0
為了一勞永逸解決這些問題，好物團隊決定再做一次架構的改動，歷時一年的 3.0 專案就此開始。最核心的重點就是把 Campaign 這層多餘的架構拔掉，讓整體更簡單也更接近電商架構，並保有 Dcard 的文章特色，同時還優化了使用者與內部後台的使用介面。
3.0 專案的種種困難
乍看之下這個專案只是把 Campaign 層抽掉，那不是把所有屬性指回 Product 就好了嗎？為什麼需要花到一年的時間呢？
- 涉及範圍太廣
Dcard 的架構是由多個 micro service 組成的，好物研究室也不例外，幾乎所有 service 都要因應這個改動重新確認每個 service 要怎麼設計，api endpoint 及帶的參數也要跟著調整。 - 前端 ui 改動
除了 to c 端以外，肯定還有一個上架商品、設定優惠等的後台，因為有了 2.0 的開發經驗，這次在 UX 上有了十分大的改動，操作流程也改善了不少。對於前端來說除了小改 to c 介面以外，也重新做一個新的後台。 - 新舊系統並存
因為 app 只要一 release 出去，扣有做什麼改動都需要使用者端主動更新，一定會有一部分的人不更新 app ，那就要考慮新舊系統要如何相容。而 web 前端甚至同時存在 2.0 與 3.0 的商品，在開發的時候就必須考慮各種狀況。 - 資料 migration
好物研究室有上千樣商品，開發完新的系統後總不能叫營運夥伴一個一個上架，因此我們花了將近一個月的時間討論、規劃如何將原本的資料 migrate 到新系統，有新的欄位但舊資料沒有該如何解決等等問題都是很大的考驗。
好物研究室的下一步👣
在 3.0 的架構下，不僅完成了期待已久的購物車，使用體驗也更接近一般使用的電商平台。接下來的目標會放在建立給廠商使用的後台，讓使用者們能最快接觸到第一手新品。另外也正在建立最真實的商品回饋機制，延續 Dcard 用戶勇於分享的特性，幫助使用者做消費決策。
看到這裡還不手刀把購物車的商品打包帶走 👉 https://www.dcard.tw/goods
最後最後工商一下，Dcard 現在積極招募 Senior Frontend Developer 與 Frontend Developer 喔！
