學期3 畢業考核 Simple Twitter 前後分離協作專案

Simple Twitter 專案首頁

專案介紹（ Simple Twitter網站入口連結 ）：
模擬 Twitter進行簡化設計的社群媒體服務平台，
如：發佈推文、點讚、追隨 ..等功能。

前台帳密： 可自行創建
後台帳密： root / 12345678

開發時間：
兩週 ( 2/21–3/4 )

開發工具＆框架：
前端： Vue.js、Bootstrap、Axios
後端： Express.js、Sequelize、MySQL

前後分離協作資訊：
前端 Github Repo 連結
後端 Github Repo 連結

組員夥伴介紹：
前端： Egg(本人)、 罐子 Kuan、 Christine
後端：靜易、Richie

本次專案分配到的角色：
Coordinator

負責的項目：
建立 Vue初始專案＆ 開啟 git repo 多人合作＆ router初始設定、
前台部分在登入後，整體頁面切版規劃、導覽列、Popular列表、
首頁推文＆推文列表、個人資料推文回覆＆喜歡列表等元件、
後台部分在登入後，所有的頁面＆功能＆API串接

專案開始前的第一步：找到神隊友組團解任務

課程從學期一開始到學期三的最後畢業考核前，一路以來都是要靠自己單打獨鬥去完成每次的作業任務，每當完成一項的作業，也意味著自己的能力又往上邁進了一步，因此在參加畢業考核前，每位同學都要完成屬於個人的每項作業指標，才能組隊擁有 Simple Twitter 專案參賽的資格。

通過個人考核，就代表你擁有現階段能獨立產出產品且解決問題的能力！

團隊合作！！ 在人生中不論哪個階段都是相當重要的課題之一 …
在大家都不認識的情況下，要如何在社群中發揮自己的社交能力、影響力，找到屬於自己的神隊友是非常不容易且很重要的事情！！！

1 - 有勇氣且快速的邁出第一步
2 - 創造印象、尋找記憶點
3 - 果斷快速做出決定
4 - 相信自己的直覺

以上四點～(^v^)～是本次專案順利遇到神隊友的小小小心得

第二步：團隊協作開始的時間管理

當合作的人數超過你跟我他兩個人時，時間掌握和安排就顯得非常重要！

感謝神隊友 靜易 很主動地整理出大家的共同討論時間，非常快速地迎來團隊第一次開會

第三步：團隊協作分工的工具應用＆溝通管道

感謝神隊友 Richie 很主動地開創 Trrllo 看板工具，讓夥伴們對專案的任務分配進度可以一覽無遺

感謝神隊友 罐子Kuan、Christine 在Figma高效互動的討論下，首次開會路由＆元件規劃就已達成共識

我在 Notion 裡將討論好的元件分析做分類，讓彼此在領取任務時可以盡量避開重工&衝突發生

第四步：成功關鍵，達成共識，互相協助幫忙

在Slack群組內大家都會隨時溝通與討論，在各自的任務進度上或其他狀況都會主動讓夥伴們了解

第五步：負責任、堅持努力到最後一刻

整體來說，前端組在這次的協作中幾乎沒什麼衝突的地方，大家有什麼問題都會在Slack群組直接討論甚至有默契的到Skype視訊共同進行開發作業，尤其是我們前端組員之間的開發時間彼此超特別，即便在大不相同的情況下，依然可以將彼此的任務完成，在傳遞交接時也都很順利，詭異的超有默契，搞得很像24h不打烊的開發模式，白天與黑夜的輪班制～(。v。)～

與優秀夥伴跨時區合作，互相協助交接的過程

每當開發遇到邏輯打架或疑惑時，都會主動找夥伴聊聊，神奇的就是在溝通的過程中，會無形間幫助到彼此突破盲點，成長幅度大提升，兩週的開發雖辛苦卻也過得很開心～(^^)～

與優秀夥伴合作，互相交流排除各種疑難雜症的過程

當前端組完成畫面切版後，接下來就是要與後端組溝通，串接API辣～

強大的後端組員有兩位：靜易、Richie，根本就是有求必應，前後端的合作交流過程，非常愉快

在前端都還沒開工切版時，我們強大的後端組就已經先把初版的API文件給我們前端參考，而我當時根本看不懂，舉手提問後，夥伴很有耐心的講解可以如何操作與閱讀，大大的幫助我對API文件的理解，所以在後期串接API時我反而沒有遇到多大的困難，這也讓我學到了一課，就是在雙方合作前期的前後端溝通與共識是非常重要的環節，可以避免掉後續在開發時可能會遇到的一些困境，這是一個很寶貴的交流經驗。

順利結案的秘訣？

團隊開會時針對各項指定規格逐一進行討論，共同完成驗收表，作為未來驗收標準。

遇到無法解決或不確定的情況時，除了埋頭查詢資料外，主動詢問夥伴並告知目前情況也是很重要的課題之一，還記得在某次會議上，剛好我們前端組正在討論如何處理多人協作的git分支操作，發現大家都是第一次，沒有這方面的經驗，後來後端組夥伴加入會議時，於是向後端夥伴求助，非常感謝夥伴的熱情教學，在當下立馬模擬了 Github 協作情境，順利提前解救了前端組本來在開發時可能會遇到的困境，因此在實際的開發過程中，我們在git的分支操作上都進行得很順利。

最重要的是在整個專案正式開發前，團隊在前置的溝通作業上準備的很足夠，大家都會把自己的觀點想法主動提出，將想法分化成每個能執行的小步驟，有系統的紀錄，在良好的溝通下達成團隊共識，而每位夥伴都在各自擅長的區塊盡情發揮，互相補足彼此可能遺落的部分，才讓我們如此順利地完成任務～

黑客松功能挑戰賽 ( 限時兩天 )

挑戰一：公開聊天室 Lv2 可以保存歷史訊息( 左 ) ＆ 挑戰二：私人訊息 Lv1 可以發送私人訊息( 中 )＆挑戰三：通知開啟小鈴鐺 ( 右 )

在專案結束後，與夥伴們達成共識會共同參與挑戰進階功能(聊天室)，並且要指定使用 socket.io，是我們從未接觸過的技術，於是我們前後端先各自分工進行可處理的部分，我首先處理新增導覽列的選項功能設定＆通知、公開、私人聊天室的頁面基本的切版配置，聊天對話區塊則是交接給罐子協助處理，當前端順利完成切版後，接下來所要面臨的課題 …

挑戰前的分析討論 ( 左 ) ＆前後端串接討論 ( 中 ) ＆公開聊天室串接功能測試 ( 右 )

第一步：
如何在 Vue裡引入 socket 設定連線成功，且能取得後端回傳的資料

在 socket.io 官方文件 尋找安裝＆使用方法，
第一階段測試 ～
下載套件： npm install socket.io-client、
頁面引入： const { io } = require(“socket.io-client”)、
設定連線： const socket = io(/* … */)、
接收監聽： socket.on(/* … */)、
通知後端： socket.emit( /* … */ )

挑戰一：公開聊天室 Lv2 可以保存歷史訊息，功能測試成功，前往挑戰二：可以發送私人訊息

第二步：
如何將 socket 設定全域管理，方便在各個需要的頁面引入使用

在查詢各種關鍵字後，
找到 這篇支援 Vue套件的寫法，
第二階段測試 ～
新增 下載套件： npm install vue-socket.io-extended、

將第一階段的引入 socket.io 的設定改寫搬移至 src/main.js 全域管理

調整第一階段的所有設定，更換為 vue-socket.io-extended 套件寫法，

原本寫法：socket.emit( /* … */ )，調整後：this.$socket.client.emit(/* … */)

順利轉換寫法，可成功在不同頁面裡直接使用 socket！！！ 接下來要～ 前往挑戰二：私人訊息

附上當時後端夥伴所提供的設計稿

寫法幾乎與公開聊天室相似，細節部分先跳過 . . .

由於時間因素，挑戰二的私人聊天室功能算是半成品，
在這個階段我們發現了最核心的問題，
在每次登入新的使用者時，並沒有刷新 socket，
導致在一對一訊息時，傳出的訊息對方沒辦法即時收到，
或者是自己收不到對方訊息，需要重新整理才能夠正常運作，
目前這個漏洞暫時沒有解決。

挑戰二：私人訊息 Lv1 可以發送私人訊息

整體過程反思：下次會更好，可持續優化 . . .

本次專案只符合最低程度的 user stories，在使用者體驗上不夠完整，
無法讓使用者知道目前處於什麼樣的階段，是在等資料、還是操作錯誤。

＊在畫面上的切版完整程度：
成果畫面雖然與設計稿相似，因時間關係只有針對桌機的尺寸進行設定，卻也忽略桌機要有適當的彈性排版，因此 RWD 的設定需要重新規劃

＊關於功能性：
1- 這次專案使用 Vue的框架來進行開發，由於對 Vue、Vuex 還不夠熟悉，
使用過多的暴力重整網頁的方式，導致使用者體驗不佳，
因該要透過 vuex 或組件父子層的溝通機制去帶動資料的變化。
2- 在串接 API 要取得資料的過程中，因該要新增 loading 畫面，
進一步增加使用者體驗。
3- 在可點按的區塊，CSS 可運用 cursor: pointer 來增加可點按的提示性
4- 私人聊天室的 歷史訊息 API串接 (目前未完成)
5- 通知的 API串接 (目前未完成)

＊程式碼可讀性：
1- 程式碼有很多不必要的 console.log 沒有刪乾淨，造成商業資料外露
2- 變數命名要與資料表象具有關聯性
3- 重複性使用到的程式碼，可打包管理，提升較好的維護性

最後～ 感謝一起努力奮鬥的夥伴們～

祝福各位未來順利～ 畢業快樂～～～