A Simple Twitter Clone

更新 發佈閱讀 3 分鐘
raw-image

為什麼有這篇文

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

專案資訊

raw-image

扮演角色

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

raw-image

我的貢獻

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

收穫與學習

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

結語、待優化部分

其實做到公開聊天室時,大家都差不多到極限所以火氣也大了些。我有時夾在其中也只能私訊眾同學們歸位解決問題。感謝各位同學,最終幾天在共同語言/資源/默契的累積下,順利完成專案。

但該面對的還是要記錄:

  • 介面再調整(e.g. 支援不同裝置、多國語系)
  • 可方便維護的資料夾結構
  • 歡迎讀到這裡的大家有其他建議
留言
avatar-img
TC Wang的沙龍
0會員
2內容數
你可能也想看
Thumbnail
在 vocus 與你一起探索內容、發掘靈感的路上,我們又將啟動新的冒險——vocus App 正式推出! 現在起,你可以在 iOS App Store 下載全新上架的 vocus App。 無論是在通勤路上、日常空檔,或一天結束後的放鬆時刻,都能自在沈浸在內容宇宙中。
Thumbnail
在 vocus 與你一起探索內容、發掘靈感的路上,我們又將啟動新的冒險——vocus App 正式推出! 現在起,你可以在 iOS App Store 下載全新上架的 vocus App。 無論是在通勤路上、日常空檔,或一天結束後的放鬆時刻,都能自在沈浸在內容宇宙中。
Thumbnail
vocus 慶祝推出 App,舉辦 2026 全站慶。推出精選內容與數位商品折扣,訂單免費與紅包抽獎、新註冊會員專屬活動、Boba Boost 贊助抽紅包,以及全站徵文,並邀請你一起來回顧過去的一年, vocus 與創作者共同留下了哪些精彩創作。
Thumbnail
vocus 慶祝推出 App,舉辦 2026 全站慶。推出精選內容與數位商品折扣,訂單免費與紅包抽獎、新註冊會員專屬活動、Boba Boost 贊助抽紅包,以及全站徵文,並邀請你一起來回顧過去的一年, vocus 與創作者共同留下了哪些精彩創作。
Thumbnail
開始接觸網頁開發後,發現自己缺乏實作經驗, 於是老師推了 Frontend Mentor challenge , 免費的通常是獨立頁面,花錢則是可以挑戰多頁式網站, 初學還沒學到 javascript 或 API 也沒關係, 新手也有提供 HTML/CSS 的練習。 很適合用來增加自己寫網頁的經驗,
Thumbnail
開始接觸網頁開發後,發現自己缺乏實作經驗, 於是老師推了 Frontend Mentor challenge , 免費的通常是獨立頁面,花錢則是可以挑戰多頁式網站, 初學還沒學到 javascript 或 API 也沒關係, 新手也有提供 HTML/CSS 的練習。 很適合用來增加自己寫網頁的經驗,
Thumbnail
這是一篇初次與團隊協作完成 Simple Twitter 專案的心得文~
Thumbnail
這是一篇初次與團隊協作完成 Simple Twitter 專案的心得文~
Thumbnail
還在苦惱怎麼樣把你的檔案上傳到Github嗎?這裡教大家簡單上傳你的檔案可以沿用到如何上傳整體專案到Github並展示你的作品集
Thumbnail
還在苦惱怎麼樣把你的檔案上傳到Github嗎?這裡教大家簡單上傳你的檔案可以沿用到如何上傳整體專案到Github並展示你的作品集
Thumbnail
相信有在開發Web應用的朋友應該對於Postman這套工具相當熟悉, 這套工具可以協助我們在產品尚未完成之前可以先進行一些基本的介接測試,甚至我們可以使用Postman去呼叫雲端的API,像是Google的語音辨識、文字翻譯、字典查詢…,這類大廠相信也都開放許多標準API(Application P
Thumbnail
相信有在開發Web應用的朋友應該對於Postman這套工具相當熟悉, 這套工具可以協助我們在產品尚未完成之前可以先進行一些基本的介接測試,甚至我們可以使用Postman去呼叫雲端的API,像是Google的語音辨識、文字翻譯、字典查詢…,這類大廠相信也都開放許多標準API(Application P
Thumbnail
其實要為專案建立操作介面的方式很多,除了網頁之外,還能另外寫個專門的手機 APP 連線,或是乾脆升級算法,讓我們能隨口喊一聲「嘿OO!」就搞定,不過⋯
Thumbnail
其實要為專案建立操作介面的方式很多,除了網頁之外,還能另外寫個專門的手機 APP 連線,或是乾脆升級算法,讓我們能隨口喊一聲「嘿OO!」就搞定,不過⋯
Thumbnail
Step1: 打開github登入 https://github.com/ 創立一個Repositories把網頁檔案丟上去 之後點我圈起來的地方 把你的網頁檔案放上去 要注意把檔案都正確上傳(通常會有29個檔案) 並點擊下面確認按鈕 Step2: 打開netlify登入 https://app.n
Thumbnail
Step1: 打開github登入 https://github.com/ 創立一個Repositories把網頁檔案丟上去 之後點我圈起來的地方 把你的網頁檔案放上去 要注意把檔案都正確上傳(通常會有29個檔案) 並點擊下面確認按鈕 Step2: 打開netlify登入 https://app.n
Thumbnail
第一個實戰,我們就先從如何連接自己的網站開始,當我們輸入「部落格」時,機器人就會輸出一個表格,只要點選「馬上觀看」,我們就可以直接連接到自己的部落格,此功能其實也可以運用在連接粉專或是其他想要觀看的網站唷!! Flex Message 實際製作教學 選擇模板 更改圖片 修改內容物 修改底部box
Thumbnail
第一個實戰,我們就先從如何連接自己的網站開始,當我們輸入「部落格」時,機器人就會輸出一個表格,只要點選「馬上觀看」,我們就可以直接連接到自己的部落格,此功能其實也可以運用在連接粉專或是其他想要觀看的網站唷!! Flex Message 實際製作教學 選擇模板 更改圖片 修改內容物 修改底部box
Thumbnail
此版本的目標畫面成果是: *金色名字。 *金色社交按鈕圖示,點擊按鈕另開對應的網頁或著顯示comming soon。 *名字和按鈕在網頁中央,如果網頁寬度不夠會換行,夠就不換行。
Thumbnail
此版本的目標畫面成果是: *金色名字。 *金色社交按鈕圖示,點擊按鈕另開對應的網頁或著顯示comming soon。 *名字和按鈕在網頁中央,如果網頁寬度不夠會換行,夠就不換行。
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News