在 Alpha Camp 學習程式，學著學著也終於走到了這最後的協作專案作業。這個專案是要和其他同學合作，一起在兩週內完成這個類似Twitter 的社群網站，「 Simple Twitter」 專案。
這次開發模式是採前後分離，兩位前端我和DoubleC及兩位後端Rita和ChiaHui。
前端 Repo：https://github.com/chris1085/SimpleTwitter-vue
開發前準備
在正式進入開發前，先討論團隊溝通的工具及方式，以及如何分工。
因為大家過去都沒有協作開發的經驗，並且在有時間限制以及完全遠端的情況下，有效的溝通及分工會大大影響協作進度，我們採取一些方法和工具來實現。
團隊溝通工具
溝通工具有：Trello、Slack、google 文件
在每次四個人開會前組長Rita 都會先建立討論內容的大綱及會議紀錄，避免花太多時間成本在開會上，也方便大家會後查找。 使用Trello 卡片來做專案進度追蹤，隨時知道隊友到哪個階段或是在哪邊卡住了。
不過大家基本上 Slack 都會開著，遇到些小問題需要溝通，只要在上面留言很快都找得到人，隨即就開語音進行討論。
前端協作
分工
對於第一次協作，我們用設計稿先把頁面(views)、組件(components)，以及頁面資料整理出來，再把這17個頁面做分配
協作
因為是第一次和別人協作，第一個痛點就是Git！
過去都是自己一個人，對於只會把專案 push 上去就完事的我來說，等於是完全不會操作… 以及不知道為什麼第一次發PR一直發不出去，就這樣白白浪費一天都在搞這個，最後決定是把我的專案刪除，重新再Fork一次專案，也感謝隊友耐心指導我。
前端部分先完成靜態切版，讓後端先製作 API 資料，完成切版之後，再來進行串接 API 及撰寫頁面功能。
串接 API
由於前端我和 DoubleC 平時都還有正職工作需要上班，而兩位後端夥伴是全職學習，前端在各自完成初步切版之後，後端 API 已經準備好等著我們串接了，照著切版時分工的頁面，分別串接各自負責頁面的 API 及撰寫功能。
開始串接 API 之後才比較有和後端夥伴溝通，後端夥伴非常厲害，如果有資料需要修改，短時間內都可以解決，並且進行優化，神隊友ChiaHui還製作了簡報版本讓前端可以看著頁面來做串接。
黑客松挑戰
在交出指定功能後，最後有兩天半的時間挑戰黑客松進階功能。
內容有：公開聊天室、私人聊天室、訂閱與通知
由於時間緊迫，我們決定以完成公開聊天室為目標，對於課程之外的技術socket.io，大家相對陌生，查看許多資料，也觀看了一些示範影片，不過示範大多都是從後端建立 serve 一路做到前端發送事件及監聽，老實說一時之間我還真不知道該怎麼把它應用在專案上，前端部分感謝神隊友 DoubleC 的帶領。
開發過程中四個人都一起待在線上討論，遇到問題就即時地提出並一起想辦法解決，彼此互相學習，合力把這個功能實現在專案上。
學習心得
過去都是自己一個人在寫 code ，所謂沒有比較沒有傷害，與他人協作時也感受到自己許多技術能力上的不足：
- HTML標籤的應用可以多增加些有語意的標籤
- CSS排版規劃得不夠完善，後續微調一個坑就會再跑出一個坑
- 閱讀技術文件的能力真的需要多加強，尤其是英文文件看之前都會先給他按翻譯，或是片段的貼到翻譯上
- 設計元件上，單看設計稿有許多地方可以共用，不過當你做好要給別人使用時卻又不是那麼一回事，無法達到對方想要的畫面效果，應該要花更多心力在溝通上，了解對方想要如何運用你的元件
對於這次可以和其他同學協作，真的很期待同時又很怕拖累到隊友，感謝組長 Rita 邀請我加入團隊，建立文件及維持團隊氣氛，也感謝同為前端的 DoubleC 有耐心地指導我解決許多問題， ChiaHui 幾乎都在線上，有問題要討論都能在短時間回覆，幫忙解決問題，慶幸第一次協作就能遇到這麼可靠的隊友。
