前後端分離專案 — Simple Twitter 協作流程及反思

Ivy Hung
10 min readMay 4, 2021
Simple Twitter 專案對我而言是很重要的里程碑,在過程中碰到了很多第一次,第一次團隊協作、嘗試前後端分離、設計 API 和資料庫結構、使用 Socket.IO 在三天內做出聊天室及即時通知功能等等,過程中需要大量溝通協作及解決問題,這些都是非常寶貴的經驗。

在開始之前先附上我們的專案成果吧:

團隊協作及分工

Simple Twitter 專案採用前後分離開發,由我和後端夥伴 — Sherry 使用 Node.js, Express.js, MySQL 將 API 伺服器架設在 Heroku 上,兩位前端夥伴 — Clement 和 Dennis 使用 Vue 框架實作前端畫面。

  • 專案開始前:
    我規劃了 RESTful API 、設計資料庫結構後再和夥伴的版本進行整合,並繪製資料庫實體關聯圖。
  • 專案開始後:
    一、我負責架設所有專案所需的基礎建設,包含規劃 MVC 架構、建立資料庫與 model、 使用 passport.js 實作 token-based 認證機制、新增 users & tweets 種子資料,並將專案部署上 Heroku。
    二、實作 API 時則按照資源類型分配,我總共建立了 users 、 admin 及 subscriptions 相關的共 15 條路由。
    三、我負責撰寫 Github 上的 README,包含專案簡介、API 文件以及如何下載到本地使用。
    四、最後三天使用 Socket.IO 開發聊天室和即時通知功能時,我負責設計與建立資料庫 & model、設定 Socket.IO、建立測試用聊天室畫面、規劃所有前後端所需的 event 流程、實作所有後端的 event 功能 & 4 條路由以及與前端溝通實測功能。
  • 專案管理:
    身為組長,我也擔任專案管理的角色,由我建立 Trello 規範使用流程以符合 Agile 精神以及建立 Excel 表單統整重要資料方便大家協作。在限時開發挑戰功能的三天內,我也負責設定每日目標、管理及推動進度。

利用 Trello 將敏捷精神導入開發流程

我參考 AC 部落格將 Trello 的欄位由左至右分為 To do, Blocked by, Developing, Done, To revise, Merged, Deployed, Optimize 代表不同的開發狀態。我也使用 Trello 的 power-up 功能,綁定 slack 即時通知版上的更動、串接 GitHub Repo 在每張票上連結 commit, PR, branch,讓我們能夠輕鬆了解每張票對應到哪些程式碼。

每個功能會經歷從左到右完整的開發流程,Developing 欄位原則上一個人只會有一張票,代表一次開發一項功能,限制半成品數量。圖像化的介面讓我們可以清楚掌握大家的進度,當有人開發卡住時也能丟回 blocked by 通知夥伴即時支援。

Google Sheet 表單共筆及統整重要資料

我使用表單紀錄 API 規劃、status code 及 socket.io 用到的 event 等等,除了方便共編外,也能夠一眼看出各個功能的負責人是誰以及是否完成了。其中 API 表單也紀錄了部署上 Heroku 的版本做了哪些變更,讓前端能夠即時查看變動。

即時溝通平台 — Slack BaseCamp

因為我和 Sherry 習慣使用 slack ,而前端同學習慣使用 Line,所以我們各自使用不同平台,而需要前後端互相溝通的部分則使用 AC 提供的 Basecamp。

Basecamp 除了用來即時溝通外,Sherry 也建立了每天的 Stand-up meeting questions 組員們需要每天定時回報昨天做了什麼、今天預計做什麼及遇到的困難,隨時掌握大家狀況。我們也使用 docs 紀錄要請教助教的問題及每次會議內容。

定期線上開會 — Zoom

開發基礎功能時三四天開一次會,前後端各自回報進度與討論待解決的問題,基本上都能在一小時內結束,再由 Sherry 幫大家紀錄的詳細討論內容。挑戰題時因為非常需要時即溝通,我們每天掛在上面四五小時實測功能與解 bug,最後交出功能時大家的疲憊都寫在臉上。

協作流程反思

  • 做得不錯的部分:

使用 Trello, slack, basecamp, google sheet 等工具讓我們能很清楚整體開發流程,後端按照 controller 分工能夠快速發開、減少很多 git 可能會遇到的衝突。另外我和 Sherry 每天都會花很多時間溝通討論,一有卡住的地方就即時向對方尋求支援,讓我們能夠順利解決很多問題。

  • 需改進的地方:

後端組內溝通與分配沒有問題、進度也都飛快,但因為不熟悉前端框架,無法預估前端需要花多少時間而沒有設立時間點,導致後續開發的比較趕。

前後端各自使用不同的平台進行內部溝通也是個問題,如果都使用 slack 開不同的 channel 討論的話大家就可以隨時關心前後端的進度,即時解決問題,才能夠避免進度卡住的情況。

專案開發

我製作的資料庫設計 Simple Twitter ERD
感謝 Sherry 將我們規劃的 API 製作成好讀且可實際操作的版本
詢問助教後終於比較清楚怎麼規劃的 status code

測試驅動開發原則(Test-Driven Development)

專案採用測試驅動開發模式,我們在實際撰寫程式碼前,除了研究 user story 及 UI/UX 設計外,也仔細研讀測試檔,依據測試檔規範更改 API 設計及資料回傳格式,之後先快速實作功能通過測試,再來優化重構程式碼,這樣的流程讓我們減少與測試衝突的機率、大大提升效率。

Git & GitHub

在專案開始前我事先研究了 git 協作需要用到的指令及流程,並和 Sherry 用其他專案進行 git flow 演練。

我們採用另開分支開發模式,開發完成推上 GitHub 發 PR 後,由另一人進行 code review 及 merge。每次 merge 完都會回到本地 master 進行 git pull 再開分支開發,需要幫忙 debug 時會 fetch 回本地修改。

擁有良好的協作概念及清楚掌握 git flow ,每次進行動作前先停下來想想流程,讓我們在協作中很少遇到衝突,提升開發效率。

實作路由及前後端串接 API

由於專案前已經進行很多次 CRUD 的操作,我們很快地在三天內就開發完所有基礎路由,接著開始進行優化及開發額外路由。

但也因為開發快速讓我們開始鬆懈,再加上把串接想像得跟全端模式一樣簡單,太晚開始進行前端串接 API ,以至於截止前讓前端趕工趕得很累。

三天黑客松衝刺挑戰功能

公開聊天室及即時通知

挑戰功能分為三階段:公開聊天室、私訊聊天、即時通知,而每個階段又有各自的 level。

因為時差的關係,我在挑戰開始的六小時後才加入戰局,我先引入後端需用到的 socket.io 套件及建立測試用的聊天室畫面,接著設計所有需要用到的 event ,整理成表單並跟前端說明設計邏輯及操作流程。

Events Design for Socket.io

我們在一開始前後端 socket 串接時就遇到困難,更改了多次 cors 的設定及降版本,串接成功時已經過去一天了。接下來實作 event 時,因為沒辦法像建路由時在沒有畫面的情況下用 POSTMAN 測試自行 debug,需要花很多時間跟前端一起線上實測。

原本希望能完成三個挑戰的所有 level,但來回溝通解 bug 花了比想像中多的時間,再加上我有時差能即時溝通的時間比較少,最後在截止前完成了三個功能但差了私訊聊天中的即時通知及計算未讀訊息數的 level。後來得知是有史以來第二組完成這麼多的感到很開心!

這三天真的過得非常充實,前後端花了比之前開發基礎功能多好幾倍的時間線上開會。時間壓力下非常考驗能不能冷靜面對各種問題找出解法的能力,debug 時常常想要自行操控對方電腦也很考驗溝通能力,這樣的經驗也證明自己是有抗壓性、能夠快速找出問題點和修正方向、幫助他人解決問題的人。

專案開發反思

這次專案最大的收穫來自與組員的溝通協作,瞭解前後端分離的開發流程並實作出專案。技術部分則是更熟悉專案建構、資料庫及 API 設計,由於這次資料庫設計比以往碰到的複雜許多,也讓我許多機會練習 SQL,發現自己使用 join table 撈取各種資料的能力提升許多。

結合 Sequelize 與 SQL 語法以及多個 table 終於一次取出所有需要的資料

最大的成就感則來自完成挑戰功能,在短時間內學習消化新技術並實作,讓我感到很有壓力的同時也因為學習新知識而感到興奮,想著目標前進讓我很有衝勁,拼了命也要把功能做出來!

  • 做得不錯的部分:

我和 Sherry 實踐了 TDD 原則,開發前就仔細研究測試檔,讓我們在開發基礎功能時避免很多衝突並有時間進行優化、提升程式碼品質。掌握 git flow 流程也大大提升了我們協作效率。

我在短時間內學會使用一個新的技術 — socket.io,從無到有規劃出完整的架構與流程,並且能夠在高壓下做好時間管理、設定優先順序,先快速開發出可行的功能,時間允許再進行優化,推動團隊達成目標。

  • 需改善的地方:

第一次進行前後端分離專案,發現很多在前後端溝通上可以改善的地方,經常發生前端傳進來不是後端想要的資料,或是後端回傳的資料有缺少的狀況,這部分應該要在設計 API 時就跟前端溝通,一起定義好需要的資料。這次後端只有自行設計並寫好 API 文件而已,感覺還是需要線上跟前端解釋過才能避免後續串接的問題。

感謝時間

能夠順利完成專案真的要感謝我的後端好夥伴 — Sherry 以及前端同仁 — Clement 和 Dennis ,每個人都不知道花了多少天熬夜,就是為了把專案做到最好。另外還要感謝助教 Ivan 用心回覆我們的問題、tech hour 也給我們滿滿的資訊與回饋,真的很幸運能遇到這麼好的助教!(再次感謝助教認真幫我改了好多學期三的作業,每次都從助教的回饋中學到很多)

開發過程中組員們都很配合使用各式工具和線上開會,讓我們能夠在截止前交出像樣的成果。一起做了那麼多努力,交出挑戰功能的時候真的有點感傷,謝謝你們的認真負責與付出的時間,讓我第一次團隊協作就有很好的經驗,真的非常感謝每一位夥伴!

組員心得:Sherry(後端) - [專案記錄] Twitter 專案_協作開發初體驗
Clement(前端)- Alpha camp 畢業專案:Simple twitter
Dennis(前端) - 畢業專案: simple twitter 實作感想

--

--