iT邦幫忙

2025 iThome 鐵人賽
DAY 14
0
Modern Web

FlowNest系列 第 14 篇

Day14_社群圈與聊天模組開發進度

17th鐵人賽
109 瀏覽

  • 分享至 

  • xImage
    •  

社群圈頁面擴充

  • 新增「全部貼文／我的圈子」切換功能
  • 讀取目前追蹤名單，在前端動態篩選，只顯示關注對象的貼文
  • 切換追蹤狀態時，會同步維護追蹤清單並顯示空狀態提示
    https://ithelp.ithome.com.tw/upload/images/20250925/20168406SWuOj07Wet.png

私人聊天介面

  • 左側列出追蹤夥伴或最近對話
  • 右側顯示訊息歷史與輸入區
  • 使用 chatThreads 與 messages 集合串接 Firestore 即時監聽
  • 實現訊息同步更新、未讀計數與登入導引
    https://ithelp.ithome.com.tw/upload/images/20250925/20168406GiZvHrmQLq.png

Firebase 設定更新

  • 新增聊天資料的存取規則
  • 補上必要的複合索引
  • 調整導覽列與下拉選單，加入聊天入口

驗證編譯

  • 執行 npm run build 驗證
  • 確保現有元件仍能正常編譯與運行

上一篇
Day13_進度整理
下一篇
Day15_踩雷日記/chat報錯排查
系列文
FlowNest 共 30 篇
  1. 26
    Day26_滿版播放器與介面改版
  2. 27
    Day27_3D模組延遲載入與建置修正
  3. 28
    Day28_生成頭像功能+登入動畫
  4. 29
    Day29_整體架構與資料流總覽
  5. 30
    Day30_最後一天收尾
完整目錄
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言
iThome鐵人賽
參賽組數
902 組
團體組數
37 組
累計文章數
19855 篇
完賽人數
528 人
iT+看影片追技術 看影片追技術 看更多
熱門tag
15th鐵人賽 16th鐵人賽 13th鐵人賽 14th鐵人賽 17th鐵人賽 12th鐵人賽 11th鐵人賽 鐵人賽 2019鐵人賽 javascript 2018鐵人賽 python 2017鐵人賽 windows php c# linux windows server css react
熱門問題
熱門回答
熱門文章
IT邦幫忙