限時挑戰 Simple Twitter 專案

作品網址：點我

第一次與團隊合作復刻 Twitter 專案，並挑戰了公開聊天室的功能

專案的開始

團隊是由四人為一組的前後端分離模式，分別為兩人後端、兩人前端組成，而我是擔任前端的角色，為期兩週的開發與挑戰。

專案開始前，大家先約好各自時間進行一次小組會議，探討合作模式，而我們的小組溝通與時程規劃都在 Slack 與 Trello 進行。

Trello 工作分配與進度時程

工作的分配與進度

專案開始後，我與前端組員 Teddy 又進行了一次討論，我們這次使用的是 Vue 開發專案，先後討論了 Views 與 Component 的共識、因為彼此都有先整理一份關於此次 Simple Twitter 設計稿資料與元件組成，所以很快地在這方面達成共識

前端確定共識後，就與後端組員再次進行一次會議與討論，前端提供了詳細規格給予後端，而後端也給予了我們在 JSON 的一些資料格式參考，避免我們在串接時因為命名或規格不一產生問題

前端提供之規格參考

後端提供的資料回應格式

我與 Teddy 各自分配好頁面的進度，就開始著手參與製作，此時此刻後端也正在進行著它們的路由設計，彼此搭配很有默契的在我們結束刻好畫面後，給了我們 API 路由去串接與測試

串接 API

在串接之前都是得心應手，串接後就開始面對不同的考驗，與解決各式各樣的 Bug！

照理說，我們如果資料格式都一致的話，串接不會出現太多問題，但碰巧就是有問題發生了，此時此刻翻遍了所有 Alpha Camp 教過的串接課程，沒有發現錯誤的時候，問組員就是最快的方式！

記得最深刻的問題是，為什麼我照著應該是這樣的 API 路由寫法，結果還是出現了錯誤呢？

與組員討論問題原因，與查找資料後，發現了原來是後端與前端的資料寫法不同而產生的原因，在寫法上如果改掉某些原以為後端已經給了的參數部分，就能串接成功，順利解除 Bug 真的是值得開心的事情！

限時 3 天挑戰公開聊天室功能

在 AC 週五的中午開放挑戰功能後，我們立刻進入狀態，大家都著手完成著自己份內的事，而我們這次使用的是 Socket.io 來開發

而我在此次開發過程，負責前端的頁面呈現，把畫面都刻出來，雖然在串接過程中遇到的種種問題都迎刃而解，多的是靠強大的組員，但還是慶幸大家能在截止 12 點時準時繳交作業，並且一起熬夜把想修改的小細節繼續補足，

在 Socket.io 裡，遇到的問題

無法在登入聊天室時，即時正確顯示上線人數

後來發現這個問題許多人都有發生過，因為 Vue 的 SPA (Single Page Application) ，造成只能重新整理畫面才會獲得 token，否則回傳的是 null，而我們的解決辦法是，後端在登入後，再次傳送上線使用者資訊給前端用於渲染畫面，我們這裡也把資料改寫在同一個 Views 裡，這才解決問題。

專案的結束與心得

第一次與團體合作開發一個網站！從原本的擔心自己做不到甚至做不好，到完成了所有的種種，都是有一步一腳印的痕跡，雖然稱不上完美，但是這個經驗十分寶貴，這兩個禮拜非常非常地專心在這件事情上，而我也想像不到自己每天花了非常多時間在這上面，學習到了更多知識，切版有更多面向的考量，對於 Vue 也是更加熟悉了，串接這部分也更加掌握了一些，當然很多都是要謝謝組員們的幫忙，他們的可靠才有這個作品產生！