踏上學習前端技術的道路後第一個多人協作的專案，社群Web App ”Simple Twitter”，在此記錄一些開發過程的心路歷程，以作往後回顧。
專案說明
這次的專案開發是採取前後分離，前端後端各兩位開發人員的方式進行為期兩週的開發，Simple Twitter的主要功能規格如下介紹：
兩種角色權限
- 使用者：可以登入App前台頁面，使用前台功能(如下詳述)，無法登入後台管理頁面
- 管理者：可以登入App後台頁面，使用後台管理功能(如下詳述)，無法登入前台頁面
使用者功能
- 使用者與管理者須透過各自的專用登入頁面登入以使用App
- 使用者可以發文也可以對別人的發文做回覆
- 使用者可以對發文按like
- 使用者可以追蹤其他使用者
- 使用者可以編輯個人大頭照、封面照片、描述
- 使用者可以編輯個人名稱、帳號、email、密碼
- 使用者可以觀看自己發過的推文、回覆與like的推文
- 使用者可以觀看追蹤自己與自己追蹤的其他使用者
管理者功能
- 管理者可以觀看所有使用者的推文且可以刪除任一推文
- 管理者可以觀看所有使用者的基本資料如大頭貼、推文數與追蹤數等
個人分工
我在專案中是擔任前端開發的角色，負責開發UI與優化UX的部分以及後端API與即時聊天功能的socket io串接，前端框架是使用vue做開發，在專案初期的分工，我們是決定先前端專心開發UI頁面、後端開發所需的API，在第一週的後期再開始串接與測試API。
而前端部分我與另一位同伴是使用google 試算表來規劃各頁面與相關component的分工，透過表格的方式可以清楚知道彼此應該負責的部分，可以有效避免重工發生，且可透過完成欄位來有效知道彼此的進度以適時提供支援
後期需要與後端同伴討論API使用方式與調整內容時就很需要非常有效的即時溝通與進度追蹤工具，我們是使用了basecamp、trello兩個工具來進行整個團隊的溝通，basecamp的群體聊天功能相當方便，可以快速與同伴溝通，trello則是列出前後端的代辦項目與相關細節
開發心路歷程
在第一週的前端協作算是相當順利與愉快，很幸運的另一位前端同伴風格與想法跟我相當類似，都是非常要求細節的人，我們都希望頁面上的所有細節都要與figma相同，在搭配萬用的dummy data下很快的所有頁面都有了一個漂亮的雛形，不過有些頁面的架構與component分工算是下去做之後才發現不是這麼簡單(像是modal的部分)或是其實不用這麼複雜(發現可以共用component)，所以過程中有一直討論與重新規劃，腦中的想法透過討論一直重組的感覺蠻有趣的
這一週是第一次在短短幾天內就狂切這麼多版，flex、grid與position一直交錯使用，還有深深體會到CSS selector priority的重要，有效使用不同priority的CSS selector就可以避免想要的CSS樣式出不來，整個覺得自己的切版功力提升了不少，在這個階段可以說是信心滿滿XD
而到了第二週正式開始串接API後才發現事情沒有這麼簡單，最需要解決的問題主要有以下兩種：
- API的資料內容設計與前端頁面的架構設計不同，或是不同API間的格式可能有所不同，因為時間緊迫又有許多API要串接的關係，沒有辦法所有API都請後端同伴再修改，所以需要調整前端處理資料的流程來有效使用API所提供的資料，例如有些API會提供created time以及”距離created time多久”的from now資料，而有些API可能只有提供created time等等
- 為了串接API重新設計了一個component，要讓多個頁面共用以簡化流程時因為每個頁面的作者可能不同，所以其頁面中的資料設計與處理方式也不同，需要調整成相同的方式才可以共用component
上述兩種狀況都是要想辦法整理資料讓格式一致，這時與同伴的溝通就很重要，對前端的部分因為與前端同伴都對畫面很熟悉，所以討論起來不會有什麼問題，後端API部分的討論就很需要提供會使用此API的畫面讓後端同伴理解為何需要此資料與會如何使用此資料，不然沒有畫面對後端同伴來說真的會很抽象，討論也會較沒有效率。
黑客松挑戰
在Simple Twitter專案最後兩天又六小時，我們開始進行挑戰功能的開發，即時聊天功能，前端分工的部分是由我負責研究前端串接socket.io的emit發送事件資訊與on監聽事件功能，另一位同伴是負責聊天室畫面的切版。
最有挑戰的部分就是面對未知的時候，因為完全沒有接觸過socket.io，所以一開始是完全不知道如何下手，扣除睡眠時間的前十二個小時左右，我大量的survey socket.io官方文件與科技論壇(stack overflow, IT邦幫忙等)對於socket.io的相關討論，大概理解了socket.io可以將通訊協定從HTTP轉換成websocket並開啟client端與sever端的通道，還有emit發送事件與on監聽事件等等的概念，因為前端開發的部分我們是使用vue框架，所以也選擇使用vue的socket.io整合套件Vue-Socket.io來嘗試與後端同伴的sever端建立連線，經過幾番努力，在成功收到server端傳來的onlineUser事件時整個超嗨超開心的！！
成功建立連線後，emit發送事件與on監聽事件的設定其實與API的串接原理相當類似，較需要花時間處理的依舊是在如何讓收到的資料配合畫面讓功能動起來，我們順利完成了公開聊天室的功能，因為時間的關係後續挑戰的部分來不及完成，不過看到公開聊天室可以開始亂聊天與顯示自己講幹話的歷史訊息就已經超有成就感XD
心得總結
整個專案回顧下來，整體來說覺得收獲最多的部分就是切版功力的更進步、了解socket.io的相關知識以及做好溝通的重要性，覺得下次可以做得更好的就是同伴溝通的部分，尤其是前後端的溝通介面: API與socket 事件設定，有不少時間是花在拿到API與socket事件規格並嘗試串接後才再討論再修改，如果一開始可以先一起規劃一起討論好可能需要用到的資料與使用方式，清楚開出規格後再開始開發，相信一定可以省下更多時間也更增加開發的效率。
因為本身平日白天還有工作的關係，只有晚上與假日有時間做開發，可以一起將simple twitter專案做到這個程度真的很感謝所有夥伴的支援與努力，可以感受到大家都很努力也很拼命在為專案努力，常常到半夜都還在討論專案內容，也覺得自己很幸運，遇到的每個同伴能力都很強，討論問題的反應都很快速，很開心有這次的合作，祝福大家未來都有很好的發展！！
