畢業專案: simple twitter 實作感想

使用Vue前端框架打造simple twitter

Dennis CC
6 min readMay 22, 2021

1.前言

Simple Twitter是課程中最後的重頭戲,不僅可以驗收學習的成果,更重要的是加入了前後端分離協作,這跟獨立寫程式有很大的差別,因此,我抱著既期待又怕受傷害的心情希望自己能完成挑戰!

2.目標

Simple Twitter顧名思義就是打造出簡易版的Twitter功能

指定功能: 4/19~4/29 完成

涉及以下 17 張頁面:

  1. 註冊頁 — /regist
  2. 個人資料設定 — /setting
  3. 前台登入頁 — /login
  4. 首頁 tweets 總表- /main
  5. 單一 tweet 詳情頁 — /reply_list
  6. 新增 tweet — /tweet
  7. 回覆 — /replied
  8. 自己的 user profile (推文清單) — /user/self
  9. 自己的 user profile (喜歡的內容) — /user/self/like
  10. 自己的 user profile — 編輯資料 — /user/self/edit
  11. user 的跟隨者清單 — /user/self/follower
  12. user 的正在跟隨清單 — /user/self/following
  13. 別人的 user profile — /user/other
  14. 別人的 user profile (已訂閱/開啟小鈴鐺) — /user/other/noti
  15. 後台登入頁 — /admin
  16. 後台推文清單 — /admin_main
  17. 後台使用者列表 — /admin_users

挑戰功能: 4/30~5/2 完成

這部分是最刺激的部分,因為必須要在三天內使用從未接觸過的工具socket.io打造以下3個功能,著實的考驗著我們的學習能力,幸好我們在沒日沒夜下完成所有功能

  1. 公開聊天室
  2. 私人聊天室
  3. 小鈴鐺通知

3.分工

此次專案開發採取前後端分離,前端兩位,後端兩位,這邊我(前端)負責的部分為

  1. user 的跟隨者清單 — /user/self/follower
  2. user 的正在跟隨清單 — /user/self/following
  3. 後台登入頁 — /admin
  4. 後台推文清單 — /admin_main
  5. 後台使用者列表 — /admin_users
  6. 挑戰功能的小鈴鐺通知

4.使用工具

#Trello: 將工作階段分為

  1. Todo
  2. Pending Unit Tests
  3. Blocked by
  4. Developing
  5. Passed Unit Test (Done)
  6. To revise (PR)
  7. Merged
  8. Deployed
  9. Optimize

並且將所需的Resources也一併放在上面

藉由卡片的拖拉可清楚的知道夥伴的進度與狀況

#Basecamp

  1. 類似line的功能,但取向for 團隊協作
  2. 每天10點設定mention功能填寫以下3個問題,讓組員了解彼此狀況

a. What have you done yesterday?

b. What do you plan on doing today?

c. Any blockers?

#Zoom

  1. 視訊會議軟體
  2. 可分享桌面討論程式碼增加效率

#Excel

  1. 建立一組共用Excel,讓前後端建立不同分頁傳達目前進度與資料建立,這份文件是此專案最重要的部分,包含了API的建立/Socket前後端所需傳送與接收的資料/前後端進度/前端功能檢查表......等等

5.實作

  1. 此次實作前端使用的是Vue框架,一開始進行的是各頁面的切版
  2. 切版完成後建立一組假資料測試功能
  3. 測試功能OK後進行後端API請求
  4. 優化使用者體驗,例如加入loading動畫,避免使用者重複按取按鈕……等等
  5. 優化使用者權限驗證
  6. 建立GitHub Pages

6.協作

協作的部分之前沒有接觸過,所以花了些時間在研究這部分,步驟如下

  1. 建立分支並開發功能
  2. 分支開發完功能後git add. => git commit -m “註解”
  3. git pull origin master
  4. 解決合併衝突 git add. => git commit
  5. git push origin <branch>
  6. 待夥伴review完程式碼後merge到master

7.遭遇問題的解決方法

  1. 上網google關鍵字:下對關鍵字才能有效率的找到解決方法,且面對系統發出的錯誤訊息,很多都是在國外論壇才能找到解法
  2. 與夥伴們討論:團隊的力量遠勝於一個人單打獨鬥,在之後的職場也是如此,與同儕間的互相討教更能使自己成長快速,但切莫當伸手牌,一定要自己先想過嘗試過且有系統的問問題,才能事半功倍
  3. 求助於助教:若上述2種方法無法解決問題,就必須求助於經驗豐富的前輩,也許你走過的路許多人都已走過,所以前輩們可一針見血的給予建議

8.自我檢討

1.切版效率:常常會為了要與指定畫面同步,而重複的去try各項參數的設定, 對於參數設定的精準度須再提升

2.打造功能:對於語法/方法的使用還須更熟悉,避免常常google降低開發效率

3.開發效率:卡關的時候會想靠自己解決,光google問題就耗費許多時間,在有時間限制的專案下,應設好停損點,轉而求助其他夥伴或助教

9.結語

經過了14天的程式馬拉松,雖然過程很辛苦也有遇到挫折,但感受到自己的成長,看到做出來的專案也很有成就感,這個專案有點像是職場前的模擬協作,確確實實的感受到時間壓力與團隊協作的氛圍,同時也更知道自身不足需加強的地方,很可貴的一次經驗!

10.致謝

這次專案的協作由2位後端Ivy,Sherry和前端Clement一起完成,過程中我們沒有吵架,代替的是互相加油與鼓勵!我能感受到為了這次的專案協作,團隊成員都屏除了一切外務,投注了100%的精力在專案的完成,也由於大家的團結,最後我們完成了專案的所有功能,感謝所有團員的幫助與努力,讓我擁有了一次難忘的協作經驗!

--

--