# Simple Twitter (團隊) #### [Figma Link](https://www.figma.com/file/WfushzZVXyVwQK0SafjTmB/ACCapstone%3A-Twitter-Wireframe?node-id=0%3A1) ## 全域component - **SideNavbar** - **TopNavbar** - **TopUsersList** ## 共用資料 (尚未完成) - 所有環境 - currentUser (id, name, image, account, isAdmin) - 編號１、２、３ - currentUser (id, name, image, account, isAdmin, password) - 編號４、５、６ - currentUser (id, name, image, account, isAdmin) - followingList (name, account, image, following) --- --- ## Page ### 1.註冊頁(Register) ![](https://i.imgur.com/dSNbD2x.png) <table> <thead> <th></th> <th style="text-align: center">內容</th> <th style="text-align: center">命名方式</th> </thead> <tbody> <tr> <th>頁面名稱</th> <td>Register</td> <td></td> </tr> <tr> <th>路由</th> <td>/register</td> <td></td> </tr> <tr> <th>component</th> <td>RegisterForm</td> <td style="color:salmon"></td> </tr> <tr> <th></th> <td></td> <td style="color:green">Marco：對耶，兩個form的欄位都相同</td> </tr> <tr> <th>資料</th> <td style="color:blue">註冊資料</td> <td style="color:blue">account, name, email, password, isAdmin</td> </tr> </tbody> </table> > 預計API > * [POST] /api/users 註冊帳號 --- --- ### 2.個人資料設定頁(Setting) ![](https://i.imgur.com/fBK3zi1.png) <table> <thead> <th></th> <th style="text-align: center">內容</th> <th style="text-align: center">命名方式</th> </thead> <tbody> <tr> <th>頁面名稱</th> <td>Setting</td> <td></td> </tr> <tr> <th>路由</th> <td>/setting</td> <td></td> </tr> <tr> <th>component</th> <td>SideNavbar, TopNavbar, SettingForm</td> <td style="color:salmon">Tina：這個form感覺可以跟register form合併</td> </tr> <tr> <th></th> <td></td> <td style="color:green">Marco：同意！！</td> </tr> <tr> <th>資料</th> <td style="color:blue">currentUser資料</td> <td style="color:blue">account, name, email, password</td> </tr> </tbody> </table> > 預計API > * [PUT] /api/users/:id ==/settings== 編輯自己所有的資料 --- --- ### 3.前台登入頁(Login) ![](https://i.imgur.com/LjYH55b.png) <table> <thead> <th></th> <th style="text-align: center">內容</th> <th style="text-align: center">命名方式</th> </thead> <tbody> <tr> <th>頁面名稱</th> <td>Login</td> <td></td> </tr> <tr> <th>路由</th> <td>/login</td> <td></td> </tr> <tr> <th>component</th> <td>LoginForm</td> <td></td> </tr> <tr> <th>資料</th> <td style="color:blue">使用者資料</td> <td style="color:blue">account, password, isAdmin</td> </tr> </tbody> </table> > 預計API > [POST] /api/users/login 登入帳號 > ==翊廷：isAdmin在後段unit test中被命名為role，另外測試條件要求這個role的型別會是string，不知道可否改用?== ### 4.Twitter首頁(MainPage) ![](https://i.imgur.com/nHp46lU.png) <table> <thead> <th></th> <th style="text-align: center">內容</th> <th style="text-align: center">命名方式</th> </thead> <tbody> <tr> <th>頁面名稱</th> <td>MainPage</td> <td></td> </tr> <tr> <th>路由</th> <td>/mainpage</td> <td></td> </tr> <tr> <th>component</th> <td width="250px">SideNavbar, TopNavbar, FollowingNavbar, TweetForm, Posting</td> <td style="color:salmon"></td> </tr> <tr> <th></th> <td></td> <td style="color:green">Marco：同意，這樣也比較符合user stories </td> </tr> <tr> <th rowspan="3">資料</th> <td style="color:blue">currentUser資料</td> <td style="color:blue">currentUser (id, name, account, image, isAdmin)</td> </tr> <tr> <td>推文清單</td> <td>Tweets (id, user, image, account, name, createdTime, repliesList, likesList)</td> </tr> <tr> <td>追蹤清單</td> <td>FollowingList (name, account, image, following)</td> </tr> </tbody> </table> > 預計API： > * [GET] /api/users/:id 使用者資料 > * [POST] /api/tweets 新增推文 > * [GET] /api/tweets 所有推文，包括推文作者 > * [POST] /api/users/top 跟隨者(followers)數量前limit的使用者 > * [POST] /api/tweets/:id/like 喜歡一則推文 > * [POST] /api/tweets/:id/unlike 取消喜歡 > * [POST] /api/followships 新增followships > * [DELETE] /api/followships/:followingId’ 移除followship --- --- ### 5.單一tweet詳情頁(DetailTweet) ![](https://i.imgur.com/m3DsP8G.png) <table> <thead> <th></th> <th style="text-align: center">內容</th> <th style="text-align: center">命名方式</th> </thead> <tbody> <tr> <th>頁面名稱</th> <td>DetailTweet</td> <td></td> </tr> <tr> <th>路由</th> <td>/detail/:id</td> <td></td> </tr> <tr> <th>component</th> <td width="250px">SideNavbar, TopNavbar, FollowingNavbar, TweetInfo, Messages</td> <td></td> </tr> <tr> <th rowspan="3">資料</th> <td style="color:blue">currentUser資料</td> <td style="color:blue">currentUser (id, name, account, image, password, repliedList, LikesList)</td> </tr> <tr> <td>回覆訊息清單</td> <td>Messages (id, user, image, account, name, createdTime, replyText)</td> </tr> <tr> <td>追蹤清單</td> <td>FollowingList (name, account, image, following)</td> </tr> </tbody> </table> > 預計API： > * [GET] /api/tweets/:tweet_id/replies 瀏覽特定tweet下的所有replies > * [[POST] /api/users/top 跟隨者(followers)數量前limit的使用者](https://hackmd.io/IPnsQErpR0iV3dm_rEV7wQ?view#POST-apiuserstop-%E8%B7%9F%E9%9A%A8%E8%80%85followers%E6%95%B8%E9%87%8F%E5%89%8D-10-%E7%9A%84%E4%BD%BF%E7%94%A8%E8%80%85) > * [POST] /api/tweets/:id/like 喜歡一則推文 > * [POST] /api/tweets/:id/unlike 取消喜歡 --- --- ### 6.新增tweet(NewPost) ![](https://i.imgur.com/hOCFsvW.png) <table> <thead> <th></th> <th style="text-align: center">內容</th> <th style="text-align: center">命名方式</th> </thead> <tbody> <tr> <th>頁面名稱</th> <td>NewPost</td> <td></td> </tr> <tr> <th>路由</th> <td>/new</td> <td></td> </tr> <tr> <th>component</th> <td width="250px" style="text-decoration:line-through;">NewPostModal</td> <td style="color:salmon">Tina：感覺這邊可以不用再有Component?但還不確定這邊要如何運作</td> </tr> <tr> <th></th> <td></td> <td style="color:green">Marco：我預想是可以擷取bootstrap的modal來使用，就像電影清單一樣</td> </tr> <tr> <th rowspan="3">資料</th> <td style="color:blue">currentUser資料</td> <td style="color:blue">currentUser (id, name, account, image, isAdmin)</td> </tr> </tbody> </table> > 預計API： > * [[GET] /api/users/:id 使用者資料](https://hackmd.io/IPnsQErpR0iV3dm_rEV7wQ?view#GET-apiusersid-%E4%BD%BF%E7%94%A8%E8%80%85%E8%B3%87%E6%96%99) > * [[POST] /api/tweets 新增推文](https://hackmd.io/IPnsQErpR0iV3dm_rEV7wQ?view#POST-apitweets-%E6%96%B0%E5%A2%9E%E6%8E%A8%E6%96%87) --- --- ### 7.回覆tweet(ReplyPost) ![](https://i.imgur.com/BYW83og.png) <table> <thead> <th></th> <th style="text-align: center">內容</th> <th style="text-align: center">命名方式</th> </thead> <tbody> <tr> <th>頁面名稱</th> <td>ReplyPost</td> <td></td> </tr> <tr> <th>路由</th> <td>/replied/:id</td> <td></td> </tr> <tr> <th>component</th> <td width="250px">RepliedPosrModal</td> <td></td> </tr> <tr> <th rowspan="3">資料</th> <td style="color:blue">currentUser資料</td> <td style="color:blue">currentUser (id, name, account, image)</td> </tr> <tr> <td>回覆推文</td> <td>Tweet (id, user, image, account, name, createdTime, text)</td> </tr> </tbody> </table> > 預計API： > * [[GET] /api/tweets/:tweet_id 一筆推文](https://hackmd.io/IPnsQErpR0iV3dm_rEV7wQ?view#GET-apitweetstweet_id-%E4%B8%80%E7%AD%86%E6%8E%A8%E6%96%87%E8%88%87%E5%9B%9E%E8%A6%86) > * [[POST] /api/tweets/:tweet_id/replies 新增回覆](https://hackmd.io/IPnsQErpR0iV3dm_rEV7wQ?view#POST-apitweetstweet_idreplies-%E6%96%B0%E5%A2%9E%E5%9B%9E%E8%A6%86) --- --- ### 8.使用者貼文清單(UserTweets) ![](https://i.imgur.com/AFGhHfs.png) <table> <thead> <th></th> <th style="text-align: center">內容</th> <th style="text-align: center">命名方式</th> </thead> <tbody> <tr> <th>頁面名稱</th> <td>UserTweets</td> <td></td> </tr> <tr> <th>路由</th> <td>/user/:id/tweets</td> <td></td> </tr> <tr> <th>component</th> <td width="250px">SideNavbar, TopNavbar, FollowingNavbar, UserProfile, UserPosts</td> <td style="color:salmon">Tina：我在想推文/推文與回覆/喜歡的內容要放在UserProfile 還是放在 UserPosts</td> </tr> <tr> <th></th> <td></td> <td style="color:green">Marco：我覺得放在UserPosts比較符合各component要有的資料 <span style="color:salmon">Tina：好!!!這樣真的比較符合資料組成</span></td> </tr> <tr> <th rowspan="3">資料</th> <td style="color:blue">currentUser資料</td> <td style="color:blue">currentUser (id, name, account, image, password, intro, followingsList, followersList, profileBackgroundImage)</td> </tr> <tr> <td>使用者推文清單</td> <td>Tweets (id, image, account, name, createdTime, replies, likes)</td> </tr> <tr> <td>追蹤清單</td> <td>FollowingList (name, account, image, following)</td> </tr> </tbody> </table> > 預計API > * [GET] /api/users/:id 使用者資料 > * [GET] /api/users/:id/tweets 看見某使用者發過的推文 > * [POST] /api/users/top 跟隨者(followers)數量前 10 的使用者 > * [POST] /api/tweets/:id/like 喜歡一則推文 > * [POST] /api/tweets/:id/unlike 取消喜歡 > * [POST] /api/followships 新增followships > * [DELETE] /api/followships/:followingId’ 移除followship --- --- ### 9.使用者喜歡的內容(UserLikes) ![](https://i.imgur.com/JzaKJ0q.png) <table> <thead> <th></th> <th style="text-align: center">內容</th> <th style="text-align: center">命名方式</th> </thead> <tbody> <tr> <th>頁面名稱</th> <td>UserLikes</td> <td></td> </tr> <tr> <th>路由</th> <td>/user/:id/likes</td> <td></td> </tr> <tr> <th>component</th> <td width="250px">SideNavbar, TopNavbar, FollowingNavbar, UserProfile, UserLikesPosts</td> <td style="color:salmon">Tina: UserLikesPosts/UserPosts 感覺也能共用～ </td> </tr> <tr> <th rowspan="3">資料</th> <td style="color:blue">currentUser資料</td> <td style="color:blue">currentUser (id, name, account, image, password, intro, followingsList, followersList, profileBackgroundImage)</td> </tr> <tr> <td>使用者喜歡推文清單</td> <td>Likes (id, image, account, name, createdTime, replies, likes)</td> </tr> <tr> <td>追蹤清單</td> <td>FollowingList (name, account, image, following)</td> </tr> </tbody> </table> > 預計API > * [GET] /api/users/:id 使用者資料 > * [GET] /api/users/:id/likes 看見某使用者點過的 Like > * [POST] /api/users/top 跟隨者(followers)數量前 10 的使用者 > * [POST] /api/tweets/:id/like 喜歡一則推文 > * [POST] /api/tweets/:id/unlike 取消喜歡 --- --- ### 10.使用者編輯profile (UserProfileSetting) ![](https://i.imgur.com/KXqJhIR.png) <table> <thead> <th></th> <th style="text-align: center">內容</th> <th style="text-align: center">命名方式</th> </thead> <tbody> <tr> <th>頁面名稱</th> <td>UserProfileEdit</td> <td>若不用Component要不要改為 UserProfileEditModal（有點怕太長）</td> </tr> <tr> <th>路由</th> <td>/user/:id/edit</td> <td></td> </tr> <tr> <th>component</th> <td width="250px">UserEditModal</td> <td style="color:salmon">Tina:這邊是不是也不用另外Component~</td> </tr> <tr> <th rowspan="3">資料</th> <td style="color:blue">currentUser資料</td> <td style="color:blue">currentUser (id, name, account, image, profileBackgroundImage)</td> </tr> </tbody> </table> > 預計API > * [GET] /api/users/:id 使用者資料 > * [PUT] /api/users/:id 編輯自己所有的資料 --- --- ### 11.使用者的跟隨者清單(UserFollowers) ![](https://i.imgur.com/1299fWV.png) <table> <thead> <th></th> <th style="text-align: center">內容</th> <th style="text-align: center">命名方式</th> </thead> <tbody> <tr> <th>頁面名稱</th> <td>UserFollowers</td> <td></td> </tr> <tr> <th>路由</th> <td>/user/:id/followers</td> <td></td> </tr> <tr> <th>component</th> <td width="250px">SideNavbar, TopNavbar, FollowingNavbar, UserFollowers</td> <td style="color:salmon">Tina: UserFollowers和下面的UserFollowings感覺可以共用成 UsersList</td> </tr> <tr> <th rowspan="3">資料</th> <td style="color:blue">currentUser資料</td> <td style="color:blue">currentUser (id, name, account)</td> </tr> <tr> <td>使用者追蹤者清單</td> <td>Followers (id, image, account, name, text, isFollowing)</td> </tr> <tr> <td>追蹤清單</td> <td>FollowingList (name, account, image, following)</td> </tr> </tbody> </table> > 預計API > * [GET] /api/users/:id 使用者資料 > * [POST] /api/users/top 跟隨者(followers)數量前 limit 的使用者 > * [GET] /api/users/:id/followers 看見某使用者的跟隨者 > * [POST] /api/followships 新增followships > * [DELETE] /api/followships/:followingId’ 移除followship --- --- ### 12.使用者正在跟隨清單(UserFollowing) ![](https://i.imgur.com/XjAzjeh.png) <table> <thead> <th></th> <th style="text-align: center">內容</th> <th style="text-align: center">命名方式</th> </thead> <tbody> <tr> <th>頁面名稱</th> <td>UserFollowings</td> <td></td> </tr> <tr> <th>路由</th> <td>/user/:id/followings</td> <td></td> </tr> <tr> <th>component</th> <td width="250px">SideNavbar, TopNavbar, FollowingNavbar, UserFollowings</td> <td></td> </tr> <tr> <th rowspan="3">資料</th> <td style="color:blue">currentUser資料</td> <td style="color:blue">currentUser (id, name, account)</td> </tr> <tr> <td>使用者追蹤清單</td> <td>Followings (id, image, account, name, text, isFollowing)</td> </tr> <tr> <td>追蹤清單</td> <td>FollowingList (name, account, image, following)</td> </tr> </tbody> </table> > 預計API > * [GET] /api/users/:id 使用者資料 > * [POST] /api/users/top 跟隨者(followers)數量前 limit 的使用者 > * [GET] /api/users/:id/followings 看見某使用者跟隨中的人 > * [POST] /api/followships 新增followships > * [DELETE] /api/followships/:followingId’ 移除followship --- --- ### 13.其他使用者的profile(UserProfile) ![](https://i.imgur.com/1l5wOCy.png) <table> <thead> <th></th> <th style="text-align: center">內容</th> <th style="text-align: center">命名方式</th> </thead> <tbody> <tr> <th>頁面名稱</th> <td>UserTweets</td> <td></td> </tr> <tr> <th>路由</th> <td>/user/:id/tweets</td> <td></td> </tr> <tr> <th>component</th> <td width="250px">SideNavbar, TopNavbar, FollowingNavbar, UserProfile, UserPosts</td> <td></td> </tr> <tr> <th rowspan="4">資料</th> <td>otherUser資料</td> <td>otherUsers (id, name, account, image, password, intro, followingsList, followersList, profileBackgroundImage)</td> </tr> <tr> <td style="color:blue">currentUser資料</td> <td style="color:blue">currentUser (id, image, account, name, isFollowing, isSubscribe)</td> </tr> <tr> <td>otherUser推文清單</td> <td>Tweets (id, image, account, name, createdTime, replies, likes)</td> </tr> <tr> <td>追蹤清單</td> <td>FollowingList (name, account, image, following)</td> </tr> </tbody> </table> > 預計API > * [GET] /api/users/:id 使用者資料 > * [GET] /api/users/:id/tweets 看見某使用者發過的推文 > * [POST] /api/users/top 跟隨者(followers)數量前 10 的使用者 > * [POST] /api/tweets/:id/like 喜歡一則推文 > * [POST] /api/tweets/:id/unlike 取消喜歡 > * [POST] /api/followships 新增followships > * [DELETE] /api/followships/:followingId’ 移除followship --- --- ### 14.其他使用者的profile(已訂閱) (UserProfile) ![](https://i.imgur.com/U42eRvM.png) <table> <thead> <th></th> <th style="text-align: center">內容</th> <th style="text-align: center">命名方式</th> </thead> <tbody> <tr> <th>頁面名稱</th> <td>UserTweets</td> <td></td> </tr> <tr> <th>路由</th> <td>/user/:id/tweets</td> <td></td> </tr> <tr> <th>component</th> <td width="250px">SideNavbar, TopNavbar, FollowingNavbar, UserProfile, UserPosts</td> <td></td> </tr> <tr> <th rowspan="4">資料</th> <td>otherUser資料</td> <td>otherUsers (id, name, account, image, password, intro, followingsList, followersList, profileBackgroundImage)</td> </tr> <tr> <td style="color:blue">currentUser資料</td> <td style="color:blue">currentUser (id, image, account, name, isFollowing, isSubscribe)</td> </tr> <tr> <td>otherUser推文清單</td> <td>Tweets (id, image, account, name, createdTime, replies, likes)</td> </tr> <tr> <td>追蹤清單</td> <td>FollowingList (name, account, image, following)</td> </tr> </tbody> </table> ### 15.後台登入頁(AdminLogin) ![](https://i.imgur.com/Sw1fEXy.png) <table> <thead> <th></th> <th style="text-align: center">內容</th> <th style="text-align: center">命名方式</th> </thead> <tbody> <tr> <th>頁面名稱</th> <td>AdminLogin</td> <td></td> </tr> <tr> <th>路由</th> <td>/admin/login</td> <td></td> </tr> <tr> <th>component</th> <td>AdminLoginForm</td> <td style="color:salmon">Tina:是不是能跟前台的loginForm共用</td> </tr> <tr> <th>資料</th> <td style="color:blue">currentUser資料</td> <td style="color:blue">account, password, isAdmin</td> </tr> </tbody> </table> --- --- ### 16.後台推文清單(AdminTweets) ![](https://i.imgur.com/sqtf2oC.png) <table> <thead> <th></th> <th style="text-align: center">內容</th> <th style="text-align: center">命名方式</th> </thead> <tbody> <tr> <th>頁面名稱</th> <td>AdminTweets</td> <td></td> </tr> <tr> <th>路由</th> <td>/admin/tweets</td> <td></td> </tr> <tr> <th>component</th> <td width="250px">AdminSideNavbar, AdminTweetsList</td> <td style="color:salmon">Tina: 好像還要個TopNavbar， 然後我在想SideNavbar是否能共用？ 另外AdminTweetsList跟其他也是超像，但感覺共用 起來也有點麻煩？所以我當初也是另外創一個 component，想問問你的想法～</td> </tr> <tr> <th rowspan="4">資料</th> <td style="color:blue">currentUser資料</td> <td style="color:blue">currentUser (id, account, name, isAdmin)</td> </tr> <tr> <td>推文清單</td> <td>Tweets (id, image, account, name, createdTime)</td> </tr> </tbody> </table> > 預計API： > * [DELETE] /api/admin/tweets/:id 刪除推文 > * [GET] /api/tweets 取得所有推文包含作者資料 --- --- ### 17.後台使用者清單(AdminUsersList) ![](https://i.imgur.com/SIrhUt6.png) <table> <thead> <th></th> <th style="text-align: center">內容</th> <th style="text-align: center">命名方式</th> </thead> <tbody> <tr> <th>頁面名稱</th> <td>AdminUsers</td> <td></td> </tr> <tr> <th>路由</th> <td>/admin/users</td> <td></td> </tr> <tr> <th>component</th> <td width="250px">AdminSideNavbar, AdminUsersList, AdminUserCard</td> <td style="color:salmon">Tina:我當初做的時候 這邊是分成TopNavbar、SideNavbar 、AdminUserCard，組成會跟AdminTweets比較像</td> </tr> <tr> <th rowspan="4">資料</th> <td style="color:blue">currentUser資料</td> <td style="color:blue">currentUser (id, account, name, isAdmin)</td> </tr> <tr> <td>otherUsers清單</td> <td>otherUsers (id, image, name, account, backgroundImage, followingsList, followersList, repliedList, likesList)</td> </tr> </tbody> </table> >預計API：[GET] /api/admin/users >==翊廷：應該會給你一個路由直接拿所有user的資料，目前統計資料預計只是數字，而不用給你資料讓你在前端去count，所以會直接給你類似likeCount(number)、followerCount(number)...之類的attribute==