A Simple Twitter Clone
更新於 發佈於 閱讀時間約 2 分鐘
為什麼有這篇文
- 首先要看到專案樣子
- 描述我在專案的角色
- 簡介我在專案的貢獻
- 過程中的收穫與學習
- 最後記錄待優化部分
專案資訊
- 這不是要完全復刻推特的專案
- 主要功能 (登入/註冊/推文等) 約花費 10 天
- 公開聊天室另外花費 3 天
- 專案 (前端) 網址
- 使用者故事/測試
扮演角色
前後端各有 2 位同學負責。身為其中 1 位前端，我除了負責串接所有頁面的 API 資料外，也負責主持每日早上 0800 的敏捷立會。雖然沒有練習到切版有點可惜，不過對有工作的我來說可能是較適合的 (白天另位前端同學切完的頁面，我晚上就可以接手資料串接)。
我的貢獻
- 把頁面的假資料換成 API 取得的資料
- 優化使用者體驗 (e.g. 加入載入中的動畫, 避免使用者重複點按鈕)
- 發送 (登入) 錯誤的提示
- 實現公開聊天室的功能 (使用 socket.io 套件)
- 部署到 GitHub Pages
收穫與學習
- 串接 API / 使用 socket.io 中重複遇到 CORS 的錯誤，後來後端同學幫忙在伺服器設定順利解決
- 部署到 GitHub Pages 發現原本會顯示的圖示都無法顯示了！後來把圖示的絕對路徑全部改成相對路徑解決危機
- 前後端資料格式要來回耐！心！地確認，不囉唆直接上圖：
結語、待優化部分
其實做到公開聊天室時，大家都差不多到極限所以火氣也大了些。我有時夾在其中也只能私訊眾同學們歸位解決問題。感謝各位同學，最終幾天在共同語言/資源/默契的累積下，順利完成專案。
但該面對的還是要記錄：
- 介面再調整（e.g. 支援不同裝置、多國語系）
- 可方便維護的資料夾結構
- 歡迎讀到這裡的大家有其他建議
0會員
2內容數
留言0
查看全部
你可能也想看
Google News 追蹤
嘿，大家新年快樂~ 新年大家都在做什麼呢？
跨年夜的我趕工製作某個外包設計案，在工作告一段落時趕上倒數。
然後和兩個小孩過了一個忙亂的元旦。在深夜時刻，看到朋友傳來的解籤網站，興致勃勃熬夜體驗了一下，覺得非常好玩，或許有人玩過了，但還是想寫上來分享紀錄一下~
一開始你先把你的專案push上去後，修改vite.config.ts ，要在裡面新增
base: "/Cart/" (/放自己的專案名稱/)
build: {outDir: "docs"},
接下來你要去你的github setting 裡面 -> Page ->選Deploy fro
# 簡介
身為一位專注於 Vue.js 的前端開發者，這是我第一次嘗試構建 Flutter 網頁應用。讓我們開始吧！
## 第一次嘗試
### 第一步：創建一個 Flutter 應用
首先，通過運行以下命令來創建一個新的 Flutter 項目：
```sh
flutter
可能包含敏感內容
先說一下我的背景，非本科系從 2022/3 開始接觸到前端領域，在摸索過程中遇到六角學院，買了 ＨTML 和 CSS 課程從基礎學起。
※ 關於Git (二)
請寫下從 Github 上複製一個專案下來，做一次遞交，然後推上去會用到的所有 git 指令。
複製專案（Clone） markdown-here：
git clone https://github.com/adam-p/markdown-here.git
如果在訊息
可能包含敏感內容
首先跟大家報告，為何選擇DISCORD當作主要討論區
其實在大約 2019年的時候一開始是使用LINE當作討論區，但是LINE很麻煩，有些惡劣店家跟師父就是會故意檢舉跟翻群，所以第二階段換到微信。
換到微信之後，他的閱讀介面沒有想像中的好，很多同志朋友對於微信也是比較反感，在諸多探詢與討論後
Vue 是尤雨溪所開發的一個前端框架，Vue 提供了響應式數據綁定和組件化的開發模式，能方便開發者構建出具有良好交互性的前端應用。而 Vite 則是一個前端構建工具，用途是提供更快的開發體驗。然後，本文將介紹如何使用 Vite 建立一個 Vue 專案的開發環境，這是你學習 Vue 的第一步。
Websocket是一種網路傳輸的協定，讓建立一次handshake的過程就可以相互傳遞資料，而非同步的過程能夠讓處理事情更有效率，這篇文章將帶你深入瞭解Websocket如何運作、以及其特點與優勢。
#職場故事 #網頁設計 #前端工程師 #轉職 #跨領域
八、軟體公司的前端工程師之路
新公司不是做網頁專案的，而是自己研發資安軟體的公司，主要只有一個大專案，跟很多客製化的需求。
我在這次轉職時有考慮到，我其實不太喜歡一個案子做完就結束的感覺，因為那會讓我覺得這些作品做完好像也不是我的東西..
#職場故事 #網頁設計 #前端工程師 #轉職 #跨領域
五、網頁設計師要做什麼？
說實話，每間公司不一樣。
我不是只面試一間而已，光是網頁設計我應該至少投了十間以上，我問到的職務內容跟範圍不全然相同。依照公司規模和用的框架，會有滿大的差別。
網頁設計主要分成以下工作：
嘿，大家新年快樂~ 新年大家都在做什麼呢？
跨年夜的我趕工製作某個外包設計案，在工作告一段落時趕上倒數。
然後和兩個小孩過了一個忙亂的元旦。在深夜時刻，看到朋友傳來的解籤網站，興致勃勃熬夜體驗了一下，覺得非常好玩，或許有人玩過了，但還是想寫上來分享紀錄一下~
一開始你先把你的專案push上去後，修改vite.config.ts ，要在裡面新增
base: "/Cart/" (/放自己的專案名稱/)
build: {outDir: "docs"},
接下來你要去你的github setting 裡面 -> Page ->選Deploy fro
# 簡介
身為一位專注於 Vue.js 的前端開發者，這是我第一次嘗試構建 Flutter 網頁應用。讓我們開始吧！
## 第一次嘗試
### 第一步：創建一個 Flutter 應用
首先，通過運行以下命令來創建一個新的 Flutter 項目：
```sh
flutter
可能包含敏感內容
先說一下我的背景，非本科系從 2022/3 開始接觸到前端領域，在摸索過程中遇到六角學院，買了 ＨTML 和 CSS 課程從基礎學起。
※ 關於Git (二)
請寫下從 Github 上複製一個專案下來，做一次遞交，然後推上去會用到的所有 git 指令。
複製專案（Clone） markdown-here：
git clone https://github.com/adam-p/markdown-here.git
如果在訊息
可能包含敏感內容
首先跟大家報告，為何選擇DISCORD當作主要討論區
其實在大約 2019年的時候一開始是使用LINE當作討論區，但是LINE很麻煩，有些惡劣店家跟師父就是會故意檢舉跟翻群，所以第二階段換到微信。
換到微信之後，他的閱讀介面沒有想像中的好，很多同志朋友對於微信也是比較反感，在諸多探詢與討論後
Vue 是尤雨溪所開發的一個前端框架，Vue 提供了響應式數據綁定和組件化的開發模式，能方便開發者構建出具有良好交互性的前端應用。而 Vite 則是一個前端構建工具，用途是提供更快的開發體驗。然後，本文將介紹如何使用 Vite 建立一個 Vue 專案的開發環境，這是你學習 Vue 的第一步。
Websocket是一種網路傳輸的協定，讓建立一次handshake的過程就可以相互傳遞資料，而非同步的過程能夠讓處理事情更有效率，這篇文章將帶你深入瞭解Websocket如何運作、以及其特點與優勢。
#職場故事 #網頁設計 #前端工程師 #轉職 #跨領域
八、軟體公司的前端工程師之路
新公司不是做網頁專案的，而是自己研發資安軟體的公司，主要只有一個大專案，跟很多客製化的需求。
我在這次轉職時有考慮到，我其實不太喜歡一個案子做完就結束的感覺，因為那會讓我覺得這些作品做完好像也不是我的東西..
#職場故事 #網頁設計 #前端工程師 #轉職 #跨領域
五、網頁設計師要做什麼？
說實話，每間公司不一樣。
我不是只面試一間而已，光是網頁設計我應該至少投了十間以上，我問到的職務內容跟範圍不全然相同。依照公司規模和用的框架，會有滿大的差別。
網頁設計主要分成以下工作：