A Simple Twitter Clone

為什麼有這篇文

• 首先要看到專案樣子
• 描述我在專案的角色
• 簡介我在專案的貢獻
• 過程中的收穫與學習
• 最後記錄待優化部分

專案資訊

• 這不是要完全復刻推特的專案
• 主要功能 (登入/註冊/推文等) 約花費 10 天
• 公開聊天室另外花費 3 天

扮演角色

前後端各有 2 位同學負責。身為其中 1 位前端，我除了負責串接所有頁面的 API 資料外，也負責主持每日早上 0800 的敏捷立會。雖然沒有練習到切版有點可惜，不過對有工作的我來說可能是較適合的 (白天另位前端同學切完的頁面，我晚上就可以接手資料串接)。

我的貢獻

• 把頁面的假資料換成 API 取得的資料
• 優化使用者體驗 (e.g. 加入載入中的動畫, 避免使用者重複點按鈕)
• 發送 (登入) 錯誤的提示
• 實現公開聊天室的功能 (使用 socket.io 套件)
• 部署到 GitHub Pages

收穫與學習

串接 API / 使用 socket.io 中重複遇到 CORS 的錯誤，後來後端同學幫忙在伺服器設定順利解決 部署到 GitHub Pages 發現原本會顯示的圖示都無法顯示了！後來把圖示的絕對路徑全部改成相對路徑解決危機 前後端資料格式要來回耐！心！地確認，不囉唆直接上圖：

我在測試 socket.io 時寫的測試功能頁面。其中 sendMessage 會把 message, userId 送給後端，但後端都沒收到。後來後端同學才發現收的欄位是 userId, text

結語、待優化部分 其實做到公開聊天室時，大家都差不多到極限所以火氣也大了些。我有時夾在其中也只能私訊眾同學們歸位解決問題。感謝各位同學，最終幾天在共同語言/資源/默契的累積下，順利完成專案。 但該面對的還是要記錄： 介面再調整（e.g. 支援不同裝置、多國語系） 可方便維護的資料夾結構 歡迎讀到這裡的大家有其他建議