Farcebook — это полнофункциональное веб-приложение, вдохновленное Facebook, построенное на платформе Rails. Farcebook использует базу данных PostgreSQL и React для рендеринга компонентов внешнего интерфейса, а Redux используется для управления состоянием.
фарсбук в прямом эфире
Как только пользователь регистрирует учетную запись, для него создается страница профиля. Каждый профиль включает заголовок, в котором хранится изображение профиля и обложка, раздел «Введение», в котором отображается вся информация о текущих пользователях, раздел «Друзья», в котором показаны первые 9 друзей пользователя, и лента, в которой показаны все сообщения, опубликованные пользователем. пользователя и опубликовано на стене пользователя.
Фотографии размещаются с использованием корзины AWS S3, а затем загружаются и сохраняются в базе данных с помощью драгоценного камня paperclip
.
Пользователи делятся информацией с другими через компоненты 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
}
...