ALPHA Camp 畢業專案 − Twitter 團體協作

WenTing
6 min readDec 25, 2021

--

ALPHA Camp 學期三的最後,由耳聞許久的 Twitter 團體協作專案來做收尾!一直以來,其實挺期待這份專案的,除了是這 23 週以來學習成果的自我驗收外,更是首次參與「團體協作」開發的機會,體會「前後分離」開發時所需的溝通及串接,以及和隊友如何透過 GitHub 合作!

source: pixabay.com

// 專案簡介 ///

ALPHA camp 的 Twitter 畢業專案是由 2 位前端及 2 位後端學員組隊,採用前後分離的開發方式,歷時 2 週開發,其中亦將開發時程切分為 3 個 Sprint,體驗業界敏捷式開發之運行方式

歡迎點進 專案成品 操作瀏覽 👀
詳細內容請參考 前端 GITHUB後端 GITHUB

【網站前台】
💻 測試帳號 user1 / 密碼 12345678

使用者註冊帳號、登錄網站後,可發佈「推文」、「回覆」特定推文、「按讚」特定推文,亦可「跟隨」其他使用者,或「更新個人檔案」之帳號密碼名稱頭像等資訊

網站前台 demo

【網站後台】
💻 測試帳號 root / 密碼 12345678

僅限 Admin 登入,管理員可於後台「瀏覽」所有站內推文、「刪除」特定推文,及「瀏覽」所有站內使用者之個人檔案

網站後台 demo

// 團隊協作 ///

團隊一開始便先約定好,每日14:00 daily scrum(因為是遠端協作,所以發生在 Gather),保持溝通聯繫、確保專案運行有在進度上,以及若有問題時可同步提出討論!

Gather 每日聚會的小角落

【前端】
DavidDolly 同學,依循 ALPH Camp 提供之 Figma 設計稿,使用 Vue.js 框架搭配 CSS preprocessor - SCSS 高精確還原畫面👍

前端 Figma 設計稿

【後端】
高明WenTing(我) 合作,依循 ALPHA Camp 提供之測試檔,採用 TDD(Test-Driven Development) 開發流程,使用 Express.js 作為後端框架、搭配 MySQL 資料庫建立,並運用 bcryptjs 進行密碼加密、passport-jwt 進行登入驗證、multer & imgur 套件達成上傳圖片的功能等,可謂集結 ALPHA Camp 學期三所學之精華,一次運用!

後端測試檔

// 開發流程 ///

Sprint 1: (團隊) 專案開發規格訂定

初期,團隊先討論共同基本規格,如依照 User Story 條列出所需完成的 Task List,再根據逐條 Task List 制定團隊的 Acceptance Criteria,並規劃 2 週開發時程的每日進度及分工,訂定產品交付的成功指標 DoD (Definition of Done)

Task List & Acceptance Criteria
2 周開發行事曆

爾後,為減少前後端溝通的落差,便規劃了份規格溝通的簡報們,將前端畫面串接的 api 路由、後端需回傳的資料格式、以及 success / error message 內容一併列出,在專案初期確認前後端規格需求一致,也事先審視一遍規格、減少實作後再修改的麻煩

滿慶幸團隊成員先前都有 PM 相關的經歷,在溝通上總能很快到位,也都習慣事先明列規格需求,在製作專案過程中,總能感受到系統化及制度化!

規格溝通的簡報畫面

Sprint 2: (前後端) 實作-畫面切版 / 資料建構 / 路由架設

接著,便來到前後端實作的時間!

後端的項目分為「資料庫建構」、「種子資料設計」、「API 路由實作」、「HEROKU 部署」、「自動化測試」等,初期和高明先共同訂定 Model 資料規格、建構好 MySQL 資料庫、編寫各 Model 所需的種子資料(並先提供給前端當 Dummy Data 使用),後續幾天便拆分 API 路由各自分工完成

其中,最有印象的部分莫過於「Git 團隊協作」,第一次使用 Git 協作,花了一小番功夫才達到 2 人合作的默契 😂 我們協作的方式,是保持主要 master 不動、每日拉出分支在各自的 local 端實作後,再於隔日發送 pull request 上 Github,並在合併的同時確認沒有 merge conflict 以及進行 code review

初期錯綜復雜的 Git 線圖
後端分工項目列表
後端資料庫 ERD

Sprint3: (團隊) 前後端 API 串接 / QA 驗收 / 產品交付

在前後端各自努力幾天後,來到此專案最刺激的一環,便是前後端串接!

可能因團隊在開發過程中持續保持溝通,在串接 API 過程比想像中順利,只有剛串接時,在 cors 關卡小小卡關一下,但隨後便順利解決!

完成串接後,團隊內部舉行 2 次正向流程 Demo(review),過程中共同討論可優化之項目、及測試遇到的問題 bug,在產品交付前做最後的開發衝刺 & 完善收尾,並確認 Acceptance Criteria 檢覆過關

// 總結感謝 ///

歷時 2 週的團隊開發,就在一晃眼間度過!很感謝團隊 Dolly, David, 高明同學這次的專案合作,每天掛在 Gather 討論、深夜看彼此還在 Slack 上時,也會互相關心一下進度,整體專案過程非常有實戰的體會!

很開心這次能和 3 位積極主動也很有想法的組員們合作,未來也要一起在 Web Develop 之路努力唷!👩🏻‍💻

--

--