下班後的團隊專案-Simple Twitter

經歷了半年的課程,終於也來到了最後一哩路。也是在所有課程中以來,花費了最多心力的一個專案作業,此次的任務是製作一個功能類似 Twitter 的社群網站,名為「Simple Twitter」。

這次我們選擇的開發模式為前後分離,由兩位前端搭配兩位後端人員,從拿到 UI/UX 設計稿後開始著手進行畫面資料分析、核對每個組件所需要的資料、切版分配、串接API …等事項。

專案分組名單如以下分配

前端人員:許丹、Ashley

後端人員:查理、仲崴

使用的協作軟體是Slack TrelloGoogle試算表,來進行任務追蹤,及團隊之間的溝通、聊天。

Git 版本控制系統

療癒的分支

專案開始前,我們討論專案的 Git 分支該如何運用,所以先開了一個練習專案來練習,練習是很值得的,在過程中發現對Git 有些觀念模糊的地方,理解了真正的版本控制系統的原理。雖然在每一次合併(merge)的衝突還是有些緊張,但和許丹在推(git push)分支及要拉專案(git pull) 下來前都會和對方說一聲這次的分支新增或修改了哪些項目,所以在這方面的操作沒有什麼問題!

UI / UX 設計稿分析

從註冊頁開始、登入頁面、主畫面、個人資料到後台管理,共17頁的畫面,其中包括了Modal的樣式,在我與許丹各自完成資料的設計稿後我們花了一些時間逐一核對資料名稱、每頁所需組件、重複組件等細部的討論。討論完成後,決定以頁面(Views)及組件(Components)來分配每個人負責的項目。

頁面切版

在開始切版前,我們討論到了CSS預處理器統一使用SCSS、是否該統一使用CSS的命名規則、是否使用Bootstrap、Modal部分該如何實作、RWD的部分要使用什麼方法等問題。

CSS預處理器:Sass/SCSS (可使用共用的變數超方便!)

CSS的命名規則:決定以各自習慣的方式(這在後期造成的一些問題,像是彼此的命名不同導致需要花一點時間讀懂程式碼)

Bootstrap及 Modal 部分:決定使用純手刻的方式,這種半強迫自己刻的方式意外讓自己對於 HTML 的結構跟 CSS 又更熟悉了一點(但我的肝….)

經過幾天沒日沒夜的切版,生活只剩上班跟切版,彷彿來到了無我的境界。每次回過神來就已經半夜了,而Slack的大家們竟然都還在通話中。就這樣我們花了四天的時間將畫面完成基礎切版,就可以開始加上功能了!

功能及API串接

接下來是將每個頁面的目標功能完成以及串接API。

在串接API這方面因為後端很早的就將所有API完成並且整理好給我們,接下來只有在資料上的溝通,也很順利的串接完畢。

花了比較多一點的時間在做功能上的設置,像是在 Vue 裡面有分很多個元件,其中在追蹤按鈕在不同組件中要相互呼應,與許丹討論很久,決定採用emit 的方式傳遞至共同父層元件後再傳遞(prop)到要接收子元件。(稱之為串來串去)

反省

在這次專案中,一開始覺得能共用的組件就共用,這導致了在實作過程中,因為共用組件的因素,所以要加入很多判斷式去分辨目前使用者的組件的是哪一個頁面,而這樣又造成了程式碼的高耦合現象,在後續在互相要維護或是修改對方程式碼時,會有要花時間或是看不懂的情況發生。這也是在實作過程中發現最大的收穫,學會之後程式碼要寫乾淨惹~

而在CSS部分亦然,減少重複的宣告及整齊度也是要再加強的部分,很慶幸在專案實作過程中能夠從中更清楚明白自己的不足,更能夠對症下藥的去決定下一步的學習方向。

學習心得

經歷連續兩週專案下來,覺得很幸運能和一群可愛的組員們一起完成專案。團隊之間的溝通上非常順利,從還在上班的時間就看到Slack的通話竟然就開著了,到了下班後直接加入繼續到半夜,真是太佩服大家的體力了還有聊天的能力。

謝謝組員們- 查理、仲崴、許丹,這段期間可以說是隨時有任何問題都能很即時的一起查詢原因、解決問題、互相討論~

特別要感謝,我的前端夥伴 - 許丹,因為在學期二課程中認識後,默默地一起學習的時間過六個月了,也是一路互相鼓勵到了學期三,因為在職的關係,也很謝謝許丹能夠體諒及配合我的時間來討論,及進度的追蹤~記得我們在專案中,完成第一個完整功能時,我們都很激動的說很感動XD 這跟自己在做作業時的感覺不太一樣,也許是因為大家都很努力的完成同一件事情。

專案連結

--

--