---
# System prepended metadata

title: Twitter 專案回饋

---

# Twitter 專案回饋

### 翊廷、Tina、Marco、YJ 組(前後分離)

- **前端**
    - **切版完整度**
        - 左欄有實作 RWD 的變化，不過整體頁面的體驗還是可以多加油！讓適性更完善。
        - 更新個人資料的 modal 中，圖片的置中、Avatar 上的相機 icon 的置中都有問題！需要多注意切版細節的到位！
    - **功能性**
        - 密碼長度 1 也可以過唷！會有安全性問題，對於資料的驗證處理上是開發平台服務很重要的一環，一定要好好在優化！
        - 跟隨按鈕在右欄給隨清單中的狀態沒有跟/user/:id/tweets 中的狀態同步！對於前端資料狀態在不同組件的狀態同步是很重要的實作議題，需要這部分需多加油，可以從 Vuex 或是 emit 的方式來觸發組件之間的溝通同步運作。
        - 左欄「通知」、「公開聊天室」、「私人訊息按鈕」沒有作用，建議在功能尚未完成時，可以呈現 disabled 的狀態會比較好，才不會有誤導性的使用體驗。
        - 在推文之下留言的回覆數有即時更新，不過回覆的推文訊息沒有顯示，有些可惜！
        - 更新資料時，例如在更新個人資料上，更新時有適當的 loading 避免不優的非同步的體驗！很好唷！
        - Veux 其實有很多使用面向：資料在不同組件間的同步、共用商業邏輯等等，未來可以多加著墨！目前看來對於他的使用相對不足！
    - **功能想像**
        - 有實作撰寫推文時當前剩餘字數顯示，很好！不過在推文 modal 上就沒有... 可以多考量組件能否夠用到這裡，這樣整體功能會更完整。
        - 有自己實作 Loading Spinner ，蠻有新意的！
- 後端
    - **功能完整度**
        - 指定功能都有完成，反應速度也ok
        - 各 model 的關係定義清楚
        - 有完成挑戰題，但我在repo的master branch找不到實作，應該是放在其它branch
    - **程式碼品質**
        - 以 userService 來說，有幾個地方需要改進
            - signUp 的輸入參數用 body 會讓人沒頭緒，改用 userObj 也許會好一點
            - signUp 太多巢狀判斷會影響閱讀，前半部在偵測錯誤可分開來，最後再判斷 errors 有沒有值即可。如果任一判斷最後要 throw error，則以下不用再寫 else  會減少巢狀
            - getUser 可以簡化 attributesOption 的賦值
        - 有切開 controller 和 service，但 adminController import 了 userService卻沒用到，這會讓以後的維護成本增加。
    - **測試通過率**
        - 不確定 /api/admin/users 為何跑第一次會失敗，而再跑一次就成功了，測試需要再檢查
        - 其它測項都有跑過，表示出現bug的機會比較小
- 總結
    - **前端：**
        - 在功能想像上的實作蠻好的！但是可以更多，以及共用性的可能也可以考量！
        - 切版技巧算穩定的！不過 RWD 的實作的涵蓋可以再更多會更好。
        - 對於狀態同步控制，會是目前的最大問題！要好好面對它唷！資料在更新之後，並非一切結束，而是要考量是否後續會也其他系列的關聯資料與組件需要同步到這些更新的資料（如：點擊追蹤）。
        - **挑戰題：**
            - 有實作基本的公開、私人聊天功能，很好！
            - 對於聊天室中人的離開、進入的狀態顯示做得蠻完整的，很好！
            - 私人聊天在離開又進入後不會將歷史流言帶入聊天流中，未來可以優化！
    - 後端
        - 針對 db migration, seeder的操作應該加入 package.json 或 [README.MD](http://readme.MD) 裡，讓其它人能比較快上手
        - 架構切分不夠明確，程式碼還有優化的空間
        - 測試通過率蠻好，這會讓佈署的信心高一些
    
- 筆記
    - 前端(Tina筆記)
      - RWD功能要完整
      - 登入focus效果，直接讓使用者能輸入帳密
      - Brady組可以參考整體介面設計及使用者體驗(https://fogjogger1992.github.io/simple-twitter/#/tweets)<br>帳號：user1@example.com /12345678
      - Console.log 一定要清掉
      - Vuex 有更多的使用方式，可以研究一下
      - 錯誤處理，簡單的error handle，統一管控問題用Vuex架構管理
      - 可以用頁數來管控或是lazy load，可再研究virtual-scroll
      - 可以推文時可以加入插入emoji的功能
      - 狀態同步狀況，點擊追蹤的時候要同步
      - 滑鼠顯示的圖騰要是正確，不能點擊的時候不要有手指

    - 前端(Marco補充, junior前端著重點)
        - 畫面完整度 (有RWD, 不會破版, 順應使用者操作過程畫面不會壞掉)
        - 功能性正常運作，需要符合一定效能表現
        - 功能想像，根據靜態畫面自行思考並設計出高應用程式易用性的動態功能(ex: 表單驗證提示, 自動focus)，增加功能貼心度
        - 知道自己會什麽，不會什麼
        - 符合前述後，進入職場可再加強design pattern或其他實作技巧
        
    - 後端(翊廷筆記) :notebook: 
      - 優良值得參考之程式碼：
        - carlos組：currentUserController的拆分
        - Kou組：socketController
        - Charlie組：程式碼品質的整體觀摩
      - 提供reviewer足夠資訊：.env.example或readme(使用seede或migration的部分)
      - 隨時注意大量資料的情境，避免DB被打爆
      - 思考架構中資料夾的功能區分
      - 拆分service層可以定義service層為使用資料庫的專門資料夾，意思是有用到service就代表有對資料庫的溝通。