A Simple Twitter Clone

更新於 發佈於 閱讀時間約 3 分鐘

為什麼有這篇文

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

專案資訊

專案網站畫面

專案網站畫面

扮演角色

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

敏捷立會的看板

敏捷立會的看板

我的貢獻

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

收穫與學習

  • 串接 API / 使用 socket.io 中重複遇到 CORS 的錯誤,後來後端同學幫忙在伺服器設定順利解決
  • 部署到 GitHub Pages 發現原本會顯示的圖示都無法顯示了!後來把圖示的絕對路徑全部改成相對路徑解決危機
  • 前後端資料格式要來回耐!心!地確認,不囉唆直接上圖:
raw-image
我在測試 socket.io 時寫的測試功能頁面。其中 sendMessage 會把 message, userId 送給後端,但後端都沒收到。後來後端同學才發現收的欄位是 userId, text

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

結語、待優化部分

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

但該面對的還是要記錄:

  • 介面再調整(e.g. 支援不同裝置、多國語系)
  • 可方便維護的資料夾結構
  • 歡迎讀到這裡的大家有其他建議
留言
avatar-img
留言分享你的想法!
avatar-img
TC Wang的沙龍
0會員
2內容數
你可能也想看
Thumbnail
「欸!這是在哪裡買的?求連結 🥺」 誰叫你太有品味,一發就讓大家跟著剁手手? 讓你回購再回購的生活好物,是時候該介紹出場了吧! 「開箱你的美好生活」現正召喚各路好物的開箱使者 🤩
Thumbnail
「欸!這是在哪裡買的?求連結 🥺」 誰叫你太有品味,一發就讓大家跟著剁手手? 讓你回購再回購的生活好物,是時候該介紹出場了吧! 「開箱你的美好生活」現正召喚各路好物的開箱使者 🤩
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
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News