Simple Twitter 的旅程

PINPIN
Oct 2, 2021

--

上一週順利結束了學期 3兩個禮拜(9/10-9/26)的團隊專案製作,遇到了很好的夥伴們,收穫了很多。這邊簡單的紀錄一下這段特別的旅程。

Photo by Matt Duncan on Unsplash

專案說明

首先先放上我們組這次的Simple Twitter專案:
1. 成果 Github Page
2. 前端專案 repo
3. 後端專案 repo
我們組是採用前後分離的開發方式,由前端兩個人(Hugh)、後端兩個人(WilliamTsouAvery)組成。

※AC提供的設計稿(基本規格Link、挑戰規格Link)

我負責的部分主要是:
◆基本規格:
1. 登入、登出、註冊使用者帳號流程&UI
2. 使用者首頁推文列表顯示、推文、按讚、回覆相關功能&UI
3. 使用者設定帳戶頁面功能&UI
4. Toast 提示功能&UI (相關文章可看此)

◆挑戰規格(即時聊天室):
1. vue-socket.io 的基本設定、event串接、Vuex整合資料
2. 公開、私人聊天室的API流程、功能

專案初始

在一開始自行分組的時候,很感謝我們的兩位後端夥伴很主動的先詢問了我跟另一位前端夥伴的組隊意願,所以我們很快速的就組好了隊伍並確定了第一次的開會時間(9/10 晚上)。

第一次開會的時候主要是大家互相認識並且確認對於開發Simple Twitter專案的部分有沒有甚麼問題,以及同步一些前後端的協作、Git操作相關的資訊等等,而我們主要都是透過Discord來進行討論。

開發的部分則是根據學長姊的一些經驗,所以我們決定先從比較簡單的後台的功能部分開始進行製作,希望能盡早的進行前後端的API串接測試,如果有任何的問題就能更早的發現。之後就由前後端的夥伴各自開會來確認開發的分工及流程。

而剛好在開會的前一天我剛剛打完疫苗,正在副作用的過程中,而另一位夥伴則是過幾天也要去打疫苗(>.<),所以我們就討論了由他先來進行基礎的專案建置及後台UI製作,我則是在9/11的時候開始進行登入功能相關的功能撰寫及跟後端夥伴測試API串接

開發協作過程

在開發的過程中,我們前端主要是用介面的API功能以及共用的component來進行分工(可以參考這份文件),並且盡量避開對方正在修改的介面相關的部分,這邊我們也都很有默契地在製作新功能之前,會先詢問對方目前正在製作中的功能。所以過程中也幾乎沒有遇到過太大的檔案衝突。

針對對方發出的PR也都會很認真檢視,發現自己不懂或是覺得需要修正的地方也都會很快速地提出,大家也都會很快的進行修改調整,整個合作溝通的過程中都很順利。

而我們後端的夥伴也提供了我們很多幫助,首先使用了Apiary撰寫API 文件來幫助前端預先進行假資料的串接。串接的過程中,後端也幫忙製作了Issue Template,方便大家在Github提出有需要修改調整的部分。

所以我們組在整個合作的過程中可以說是比較順利的,溝通上大家也都很合拍,也因為大家都很重視這個專案,所以每天大家都是挑燈夜戰,希望能提早地完成進度

剛好在專案製作的中間遇到了中秋假期(9/18-9/21),為了讓大家可以好好的休假,所以我們有預計在9/17的時候完成所有的 UI 畫面及大部分 API 的串接,可以Deploy第一版的Github Page,讓大家在假期中預先進行QA測試的部分,這樣假期過後就可以馬上進行調整修改。
(雖然是放假中,但是大家還是很認真地看到問題馬上就進行了修正~~)

也因為我們很早的就進行了測試,所以在最後的調整期時我們的時間也比較充足,最後也是提早的完成了基本規格的製作,有多餘的一些時間先進行挑戰規格的研究。

黑客松挑戰功能

挑戰功能共有三個:挑戰一:公開聊天室,Lv1:無法保存歷史訊息、Lv2:可以保存歷史訊息。挑戰二:私人訊息,Lv1:發送私人訊息、Lv2:私人訊息通知、Lv3:計算目前未讀通知。挑戰三:通知,Lv1 訂閱其他使用者的最新推文、Lv2 即時掌握別人和自己的互動。

挑戰的時間是在完成基本規格後的9/24下午到9/26,兩天半的時間,一開始我們組就是預計完成挑戰一跟二的部分,因為大家也是第一次接觸 socket.io ,所以選擇比較能力範圍內的目標。

這次我們前端是使用Vue-Socket.io 的套件搭配Vuex,而在分工的部分,這次因為我已經預先看過了相關的官方文件以及後端夥伴整理的一些相關資訊所以跟另一位前端夥伴討論過後,這次就由我先進行Socket的基本設定以及跟後端的連接測試

而在挑戰過程中因為時間比較緊急,所以大家也都更加的緊張,也是每天都在趕進度,對於第一次接觸的功能也是透過一直查看官方文件來進行實作。這邊也特別感謝我的另一位前端夥伴Hugh,在我還在思考、撰寫聊天室的相關流程時,他就把聊天室的相關UI版面切好了,瞬間讓我們的進度往前一大步,也讓我在串接相關的資料時可以很順利的直接替換掉假資料。

最後我們組也成功的在時限內完成了我們預計的挑戰,完成的瞬間感覺非常的開心,挑戰三的部分組員也預計在之後有時間時大家可以把它完成。

心得

這次的專案協作過程中,我遇到了很好的組員,大家都是很認真負責而且很願意溝通、配合大家時間的人,所以整個過程我覺得都算是很順利。偶爾遇到的一些問題大家也都會互相幫忙查詢資料,想辦法解決。

我覺得這也是一次很好的經驗,除了讓我們更熟練工具的使用之外,也讓我們更熟悉接觸新的東西、新的人時,如何開始開發。過程中每一次熬夜到三四點的時候也讓我想起以前大學製作畢業專案的感覺。

最後聽到助教們對我們這組評價也不錯,成就感就更大了。助教也提出了很多建議,讓我們收穫很多,這部分我們也會繼續加油的!

其他組員心得:
William / Avery / Hugh

--

--