farcebook 是一款受 Facebook 啟發、基於 Rails 框架構建的全端 Web 應用程式。 farcebook 使用 PostgreSQL 資料庫和 React 來渲染前端元件,並使用 Redux 進行狀態管理。
鬧劇現場
用戶註冊帳戶後,就會為他們建立一個個人資料頁面。每個個人資料都包含一個標題,用於存儲個人資料圖片和封面照片,一個介紹部分,其中顯示所有當前用戶信息,一個朋友部分,其中顯示用戶的前9 個朋友,以及一個提要,顯示用戶發布的所有貼文用戶並發佈到用戶牆上。
照片使用 AWS S3 儲存桶託管,並使用paperclip
gem 上傳並儲存到資料庫中。
用戶透過Post
和Comment
組件與他人分享資訊。貼文可以直接發佈到另一個使用者的牆上或發佈到他們自己的牆上(貼文的receiver_id
等於他們自己的id
)。用戶還可以上傳圖像以與每個帖子一起共享。
創建後,帖子可以編輯和刪除。作者可以編輯和刪除其所有帖子,而帖子的接收者只能刪除它們。
為了表示認可,用戶可以選擇對貼文Like
。貼文不僅顯示收到的讚數,還顯示按讚的用戶清單。
用戶也可以對帖子發表評論。評論根據建立時間按順序顯示。評論還可以與其他評論一起回复,每個評論都會顯示其所有嵌套評論。評論透過可選的parent_comment_id
與其他評論相關聯。
用戶也可以選擇以與貼文相同的方式按讚Like
。這是透過使用多態關聯使用一個表格來完成的,該關聯使用likable_type
來儲存喜歡的項目類型。
當任何用戶在其牆上發布貼文或他們的任何貼文/留言被點讚/留言時,就會建立Notification
並將其發送給其他用戶。這再次透過使用多態關聯來實現,該多態性關聯追蹤正在通知哪個項目。
使用者的導覽列上有一個視覺指示器,每當有任何新的、未見過的通知時都會顯示,並且下拉式選單會顯示所有最近的通知清單。每個NotificationListItem
都會顯示其他使用者的名稱和發生的操作,以及點擊時指向相關項目的連結。
我利用 ActiveRecord 進行預先載入來優化資料庫查詢並提高效能。當獲取用戶的提要時,所有相關資訊也會與每個帖子一起查詢以供以後使用。
#posts_controller.rb
...
def feed
...
author_ids = @current_user . friend_ids + [ @current_user . id ]
@posts = Post . includes ( comments : [ { likes : :liker } , :child_comments ] , likes : :liker )
. where ( 'author_id IN (?) OR receiver_id = ?' , author_ids , @current_user . id )
. limit ( 10 )
. order ( updated_at : :desc )
. distinct
...
為了保護用戶,在牆上發表評論和發布的許多功能都受到用戶之間友誼的保護。這是透過在 React 中使用條件渲染來完成的,檢查當前用戶是否是帖子作者或個人資料所有者的朋友,或者當前用戶是否正在嘗試與他們自己的帖子/個人資料進行互動。
// post_show.jsx
// Showing comment form on Posts
...
{ ( areFriends || isCurrentUser ) &&
< CommentForm postId = { id } / >
}
...
// post_form.jsx
// Showing Post form on user profiles
...
render ( ) {
if ( ! currentProfileFriends . includes ( currentUserId ) ) {
return null
}
...