[迷你電商專案 2.0] 重新開始的第一周 - 制定計畫

這篇文章是甚麼?

這是我開發迷你電商專案的計畫筆記(紀錄怎麼計畫的筆記)，目前還在開發中，還沒整理內容，主要是用來梳理邏輯，並且隨著專案的經驗持續更新內容。如果你也是比較 junior 的開發者，這篇文章對你可能會有些幫助 ! 也非常歡迎高手能夠給我一些指點 !

專案起源: 問題不斷的 1.0

在十月初的時候，為了盡快寫出一個專案爭取面試機會看看，我規劃了十二天前端使用 React；後端使用 Node.js + Express + Sequelize 開發一個前後端分離的全端專案: 不二堂線上書店。

但我實在太天真了，這樣規模的專案需要的規劃和細節實在太多了，對於第一次開發前後端完全分離專案的 junior engineer 而言，根本不可能在 12 天完成，所以這個專案才進入第一周就深陷泥沼了。

後來有幸參加 Yahoo 的面試，在與面試結束後，發現自己不足的同時也發現到上個專案最大的問題:

計畫不足

於是在十一月底重啟專案，我看了些資料、學了 redux，便著手開始了 2.0 的開發

萬事從計畫開始

身為前端工程師，很容易會衝動直接下手 coding 開發專案。表面上這樣看起來很快，其實很容易在中途兵敗如山倒，忽然間就陣亡。

因此，在開發之前一定要花時間、心思好好制定計畫，雖然一開始看似比較慢，但在實際開發後絕對會省下大筆的時間和資源!

我的計劃

首先要設定好的就是專案時程，考量到 1.0 已經刻好很多 UI；寫好了一些 API，2.0 最主要的工作其實是設計好 dataflow 購物車系統的建構以及綠界 API 的串接。另外，考量到現在有面試的時間壓力。因此，我計畫總時間是 28 天，每七天為一個單位，四周分別有不同的任務，但是這次 2.0 沿用很多 1.0 刻好的 UI、api，如果是從頭開始的話，時間要再延長:

我的四周計畫:

計劃 -> 初期開發 -> 進階開發 -> 修整 + 佈署

第一周: 計畫周

這周主要 focus 在規劃專案以及專案流程:

1. 專案目標

我要開發甚麼樣的產品、目標是甚麼?

2. 專案規模

從專案目標梳理出專案規模，只開發最必要的功能

3. 專案知識

專案相關的知識，像是要開發電商平台就要對電商平台以及普遍的開發方式有一定了解。

4. 所需資料 wireframe 和 dataflow

思考這個專案需要甚麼樣的資料? 以電商為例的話，需要訂單、使用者、購物車、商品、貨運....等資料。

在了解自己需要哪些資料後，就可以著手規劃、繪製一個粗略的 wireframe 並思考這些資料要在哪個 component 取得；拿到之後要怎麼傳給其他 component 或是後端等等...。

6. schema 規劃

了解 dataflow 與所需資料後，接著就可以規劃 schema，可以上網去 research 一般普遍的作法是甚麼。像是電商會將 cart 和 cartItem 分為兩個 table 可以增加資料庫的靈活性，這樣的知識是自己比較難馬上想到的。

7. 專案完整架構規劃

規劃頁面與頁面之間的邏輯與使用者故事。

8. UI/UX 規劃

頁面的細部規劃以及 UX 規劃。

9. 使用的技術

前端、後端使用的技術

10. 專案流程

要不要寫專案筆記、PR 的規則、Eslint 的導入...等等

11. 佈署環境

要在哪個環境佈署；為甚麼要在這個環境佈署?

第二周: 初步開發

這一周主要在完成最基本的功能開發
完成最基本的功能與頁面:

1. 註冊、登入、登出、認證
2. 商品頁面
3. 管理員頁面
4. 相關的 API

第三周: 進階開發

完成比較複雜的功能:

1. 購物車系統
2. 訂單建立
3. 會員中心
4. 相關的 API

第四周: 整合、修剪前兩周開發的部分 + 佈署

這一周主要的工作:

1. 修 UI
2. rewrite 不乾淨的 code
3. 整理檔案結構
4. 佈署