真正體驗爆肝工程師的 Twitter 專案

Tina
Jul 21, 2021

採用貼近業界的前後端分離開發專案模式

先來個熱騰騰的專案 Demo 連結吧!

GitHub Page 連結點此
前台帳號密碼可使用:user2 / 12345678
後台帳號密碼可使用:root@examle.com / 12345678

專案的開始:從找組員說起

當初早就知道有自行找組員分組的專案,也很慶幸這屆的 AC 能有 Slack 社群,平常就能多了解這屆的同學有誰,也能常常上線打卡刷刷存在感,但是雖然這麼說,但找組員這件事著實讓我緊張了半天,最後還好找到作業永遠最早教的前端夥伴 Marco ,以及 Slack 活躍成員翊廷 和 YJ 兩位後端夥伴,也很幸運能找到都是全職學習也願意投入大量時間的夥伴!

專案工具:讓溝通更順暢

團隊共同工具:Trello、Slack、HackMD、Apiary

前端共同工具:Google Sheet

這次專案用到的工具還算蠻多,在團隊上,我們使用 Trello 管理個別專案進度,用 Slack 做到對話溝通管道,而 HackMD 則是前期我們需要規劃專案細節的筆記,讓後端可以了解前端的專案規劃,也能夠依照此去做初步的 API建置。

這次遇到最神奇的就是 Apiary ,可以實際模擬 API 資料型態及測試串接的工具,前後端都可以透過編輯平台去寫自己期望接收或是傳出的資料格式,也可以直接使用他們給的 API 連結做測試。

但是缺點就是用他們 API 連結做測試其實不夠精確,因為什麼格式都會過,並不會阻擋錯誤的資料格式!

而前端自己的溝通方式主要是透過Google Sheet 管理各Components / views的進度,透過這張表就能很明確的瞭解每個人負責的項目以及完成度。

專案協作:讓人又愛又恨的Git Flow

老實說當初碰到這個部分真的很害怕會把程式弄壞,但是真的要多練習才能幫助熟悉指令,如果真的擔心的話就我是直接備份一個分支避免搞砸,當然也遇過刪掉 commit 之前程式碼直接消失的窘境,但其實網路上都有很多解答,大部分都是能成功挽救的,這部分也很感謝我的夥伴一起學習Git Flow,也會在每次的更新都會互相說一聲,避免衝突。

專案開發期間:各種崩潰開始

這個專案踩的雷還真正不少,我覺得最最最崩潰的雷就是:

不要用Bootstrap!!!!

那時候跟夥伴討論,某些功能可能借助於 bootsrap 能夠加快專案進行,但後來實際發現,有些問題其實透過 bootsrap 會超級複雜,例如 Modal ,當時卡著大約半天到一天左右,但後來臨時決定改用手刻 Modal ,三小時就搞定了,整個白忙到崩潰啊!

其他部分當時很崩潰,現在想想都是自己學習的養分,先講自己在這份專案中學習到的幾點:

  1. 溝通能力
    這次實際了解到前後端的溝通方式,溝通最頻繁的就是當前端真正要串接API 時的落差,很開心這次跟夥伴溝通真的順利,也讓我學到很多在課程中沒有接觸到溝通方式(但希望後端夥伴不要覺得前端很煩哈哈)
  2. 找錯誤的能力
    這次在串接 API 時真的在瀏覽器的 console 中看到無限錯誤,從一開始緊張錯誤發生,到後來能夠一步步分析錯誤來源並且查找資料,也能透過Network 中的錯誤訊息幫助處理(感謝 Marco 的分享),並且透過console.log 位置找到問題來源。
  3. 切版能力
    不得不說在學 Vue 時確實比較少切版,導致專案初期切的很痛苦,但第一天密集切版後,就慢慢上手,現在也能更靈活運用切版的技巧了!

但如果說要給當初的自己一些建議的話大概有這些:

  1. 注意與後端溝通資料的來源一致性:
    這點我覺得是經驗問題,但我認為當初在跟後端溝通資料時,前端應該改善的是需要在事前統一取得資料的內容及格式,確保類似的 API 可以用類似的方式取資料。
  2. 切版時間應該要更少,要留多一點時間在串接 API 上:
    這次的時間大概是切版五天,剩下七天串 API,但其實不論是資料格式或是假資料的資料差異都會造成要修改版面、修改component的架構,導致後期很緊繃。

最後在基本功能階段,除了感謝前端夥伴外,真的很感謝後端夥伴,在前一天幫忙測試版面問題,提出了很多自己沒想過的功能需求,也很可靠的做出很穩定的 API 資料庫!!

挑戰階段:即時聊天功能

這是為期兩天半的黑客松挑戰功能,這次在專案上我們使用了最近很紅的Gather Town,我真心超級推薦,因為在這次挑戰功能上,會需要更多的前後端溝通及測試,透過 Gather Town 可以更隨時的找到人通話討論功能,也能分享螢幕溝通,也能在自己不方便說話的時候顯示狀態,會有種真的在辦公室的感覺!

大家都把自己位置佈置的很誇張

但這階段會有點可惜的是我們以完成全部功能為目標,但發現其實會有點來不及,導致最後每一項功能都差一點點。

但我覺得這次做得很好的是即時溝通,在每次完成部分功能後,就會與後端夥伴討論資料接收和傳遞格式的正確性,確保雙方能接收到對的資料,也能夠及時修改執行方向,也因為使用 Gather Town,讓溝通變得更方便了!

雖然交作業的時候不盡完美,但完成後的隔一天,我們四個組員都一樣又開會優化程式碼及功能了,真的深深覺得很開心能跟這些組員同一組,為了同樣目標努力,同時透過更密切的溝通讓專案進行得更順利!

--

--