協作初體驗:Alpha Camp 期末推特專案回顧

Kelly CHI
Apr 8, 2023

--

前言

前一天還在想著搞懂 HTML、CSS 和 JS 之間的互動,沒想到轉眼之間就走到這個最後的大魔王關卡,要在短短兩周內用才剛學沒多久的 React 框架打造出完整的網頁。七個月學習成果在此見真章,雖然學習的一路上都還算順利,但真正要面對規模更大的專案時,我還是緊張焦慮了好幾晚。心想著,我們真的能辦到嗎?

首頁截圖
手機版截圖

什麼是推特專案?

推特專案是 Alpha Camp 學期三最後的畢業團體專案,分為前後端協作以及全端開發兩種模式。我們需要在短暫的兩周期限內打造出可以進行登入、發文、回覆、追蹤、換頭像等功能的仿推特網頁。全程依據真實企業內的開發模式進行,包含 scrum 流程的導入、前期 acceptence criteria 規劃、專業的 Figma 設計稿、後端測試檔案、技術主管驗收…這些都讓我們得以體驗真實世界中的開發模樣。

專案準備期

我的小組是以前後端分離的模式進行開發,前端成員有我、夥伴 weii,還有兩位後端夥伴 Frank 和 Wei,其中前端所使用的主要技術為 React 和 styled components。此外,因為我們的成員散落各地,所以是以全線上遠端開發為主。

在開發正式開始之前,我們就針對各種面向進行了討論,包括要使用哪個平台作為團隊的主要協作空間 (我們選擇了 Notion)、git 分支和 commit 的命名規範、每日 standup meeting 的時間、每次 sprint 需要繳交的內容、前後端需要哪些文件以便溝通等等。

小組共同討論的 acceptence criteria 清單

前端內部的文件我們也花了些時間討論,包含元件如何切分、元件資料規劃、前端環境設置、切版的規範等等。雖然規劃稱不上十全十美,但這些前期的準備也讓我們的開發順利很多。經過討論後,我是負責與主頁面相關的切版和功能 (包含推文、回覆、個人頁),夥伴 weii 則是負責登入、帳戶設定以及後台的相關切版和功能。

前端元件資料分析簡報:這個簡報也是前期與後端溝通理想資料格式的重要文件

專案進行過程

由於和前端夥伴 weii 從學期 2–2 讀書會的時候就已經認識,幾乎不用太多溝通磨合就可以著手開發,另外也因為我和其他人有七小時時差的關係,開發變得像是一場接力賽,weii 開發完後會跟我說她進行了哪些部分,遇到哪些問題,當我們一同解決問題後,我會繼續進行其他部分的開發,睡覺前再發 PR、留言跟她說明我的進度。

前端 task list 列表,分為基本、次要、優化三個優先等級

頁面和功能分工拆得明確、加上有時間差,我們在開發的過程中幾乎沒有遇到任何 conflit,彼此的成果也是順順的就合併在一起。

和後端夥伴的合作也沒有遇到太多的阻礙,每日的 standup meeting 我們都會互相分享各自的進度,並提醒目前實作的優先順序。依照學習教練的提醒,我們也在第五天就完成了前後端部屬和初次的串接,看到前後端 api 順利串接成功的那一刻,真的是無比的感動!

比起學長姊在心得中提到的種種困難,我們組開發之順暢讓我懷疑我們是不是有甚麼神明在默默保佑。

專案後期

在開始專案的一週後,後端組的開發差不多就已經告個段落,開始進行優化並根據前端的需求調整 api 回傳資料格式,前端則是持續在進行 api 串接和功能實作的部分。到了第二周的第三天左右,前端的基本功能也都順利串接和實作完成,開始進行細節修正和優化。

由於時間還算充裕,所以我們也實作了手機板的樣式,確認網頁在不同螢幕大小都不會發生破版的問題。週四進行了 sprint #3 的 demo,操作過程都很流暢也沒有太多問題需要修正。最後,周五的我們寫完 README 並確認 acceptence criteria 都達成後,就在第二週週末小小休了個假,放鬆這兩周以來緊張的情緒。

Demo 操作順序演練

開發過程反思

寫程式不是重點,人才是

這次合作的經驗讓我很深刻的體會到,工程師這份工作絕對不是只有自己埋頭苦幹寫出一行行程式碼而已。

例如在選擇要使用哪個工具來進行樣式的開發時,考慮到夥伴需要額外時間上手 Tailwind CSS,且 Tailwind 的明顯缺點尚不確定該如何解決,最後決定使用我們兩個都熟悉的 styled components 進行樣式開發。另一個例子是,當前端發現後端 api 所提供的資料格式並不完全符合需求時,到底是要自己想辦法調整元件設計還是去要求後端夥伴修改資料格式?

在真實的專案中,除了時間壓力、團隊夥伴之外可能還有各式各樣的角色 (競爭對手、老闆、客戶、PM…) 會左右著最後的決定,反而寫程式這件事只占問題的一小部分而已。

前期準備的重要性

我認為我們這組之所以會如此順利的原因,很大一部分是由於前期準備的完善,包含前後端如何溝通、需要哪些文件,以及前端自己的內部分工和規範,我們都事先準備好並隨著實作的過程不斷調整。當這些文件都齊全時,花在開會、理解彼此的時間會下降很多,只要確認任務和方向後就能專心開發。

當然,也有很大一部分是出於幸運,遇到溝通合作都非常順利且有一致目標的隊友們,在前期的討論我們就找到了適當的合作方式,遇到問題時也都很積極地去思考解決方案,之後到職場上未必會這麼幸運呢!

可以優化的地方

因為沒有進行過類似的專案,其實對於預估任務所需時間這件事是非常不確定的。例如前期為了趕工,並沒有將手機板的樣式放入規劃中,導致後來撰寫手機版樣式時,修改較不方便,若能早點知道我們其實有充裕的時間,可以將手機板樣式先實作完成,遵從 mobile-first 的準則。

另外,挑戰功能的部份我們也沒有在兩周的專案時間內完成,雖然專案完成後的下週有嘗試進行挑戰功能開發,但最後決定只做到公開聊天室的部分。一方面是經過兩周的開發後大家有點疲乏了,沒有明確的任務進程,導致開發變得比較鬆散,一方面是還有其他作業要趕工,只能先把挑戰功能放一邊。

結語

從一開始的焦慮不安、擔心是否能如期完成,到後來提前完成、還有時間跑去休假,這短短兩周的推特專案就像是跑了一場有高低起伏的馬拉松,雖然有難搞的陡坡,但每天還是穩穩地往前進。在打字的當下,開始有點懷念每天早上打開 github review 隊友的 PR,接著打開 vscode,git fetch 最新進度然後 git branch 開始努力燒腦完成一個個功能的日子。儘管這麼高度緊繃的狀態如果變成常態會對身心造成負面影響,但短期的合作與衝刺還是一場難能可貴的體驗。

致謝

兩周的開發過程中,真的很感謝我強大的夥伴們,首先是前端的 weii 擔當全組 PM 的角色,協助規劃與檢視每次 sprint 需要繳交的內容和擔任前後端的橋梁,如果沒有妳,我們的開發一定不會如此順利。此外,從學期 2–2 讀書會以來就培養的默契,也讓我們的溝通非常順暢、不用太多的解釋就可以完成合作目標。(給妳一個大愛心)

也要謝謝兩位後端夥伴 Frank 和 Wei,總是能在前端提出需求、或是發現問題後超快速地修正,製作的 API 文件也都寫得很清楚明瞭,讓前端開發沒有什麼後顧之憂!

此外還要特別提及學長姐所留下的文件和心得,這些寶貴的經驗都變成了我們進行任務時的養分,你們的無私分享真的幫助我們很多!總之,很感謝我的夥伴們還有 AC 學長姐、團隊,陪我走完這趟旅程的最後一個挑戰!

--

--

Kelly CHI

法文系畢業的前端工程師,致力於打造具有美感和良好用戶體驗的介面,同時也是個愛看冷門電影的骨灰級影迷。