farcebook เป็นเว็บแอปพลิเคชันแบบฟูลสแตกที่ได้รับแรงบันดาลใจจาก Facebook ซึ่งสร้างขึ้นบนเฟรมเวิร์ก Rails farcebook ใช้ฐานข้อมูล PostgreSQL และ React สำหรับการเรนเดอร์ส่วนประกอบส่วนหน้า โดยมี Redux ใช้สำหรับการจัดการสถานะ
ฟาร์ซบุ๊ค LIVE
เมื่อผู้ใช้ลงทะเบียนบัญชี หน้าโปรไฟล์จะถูกสร้างขึ้นสำหรับพวกเขา แต่ละโปรไฟล์จะมีส่วนหัวที่เก็บรูปโปรไฟล์และรูปหน้าปก ส่วนแนะนำซึ่งแสดงข้อมูลผู้ใช้ปัจจุบันทั้งหมด ส่วนเพื่อนซึ่งแสดงเพื่อน 9 คนแรกของผู้ใช้ และฟีดที่แสดงโพสต์ทั้งหมดที่โพสต์โดย ผู้ใช้และโพสต์ไปที่วอลล์ผู้ใช้
รูปภาพถูกโฮสต์โดยใช้บัคเก็ต AWS S3 และอัปโหลดและจัดเก็บไว้ในฐานข้อมูลโดยใช้ paperclip
Gem
ผู้ใช้แบ่งปันข้อมูลกับผู้อื่นผ่านองค์ประกอบ Post
และ Comment
โพสต์สามารถโพสต์ได้โดยตรงบนวอลล์ของผู้ใช้รายอื่นหรือโพสต์บนวอลล์ของตนเอง (โดยที่โพสต์ receiver_id
เท่ากับ id
ของพวกเขาเอง) ผู้ใช้ยังสามารถอัพโหลดรูปภาพเพื่อแชร์พร้อมกับแต่ละโพสต์ได้
เมื่อสร้างแล้ว โพสต์สามารถแก้ไขและลบได้ ผู้เขียนสามารถแก้ไขและลบโพสต์ทั้งหมดได้ ในขณะที่ผู้รับโพสต์สามารถลบได้เพียงโพสต์เท่านั้น
หากต้องการแสดงการอนุมัติ ผู้ใช้สามารถเลือกที่จะ Like
โพสต์ได้ โพสต์ไม่เพียงแสดงจำนวนไลค์ที่ได้รับเท่านั้น แต่ยังแสดงรายชื่อผู้ใช้ที่ชอบด้วย
ผู้ใช้ยังสามารถแสดงความคิดเห็นในโพสต์ได้ ความคิดเห็นจะแสดงตามลำดับตามเวลาที่ถูกสร้างขึ้น ความคิดเห็นยังสามารถตอบกลับพร้อมกับความคิดเห็นอื่นๆ ได้ โดยแต่ละความคิดเห็นจะแสดงความคิดเห็นที่ซ้อนกันทั้งหมด ความคิดเห็นเชื่อมโยงกับความคิดเห็นอื่นๆ ผ่านทาง parent_comment_id
ที่เป็นตัวเลือก
ผู้ใช้ยังสามารถเลือกที่จะ Like
ความคิดเห็นในลักษณะเดียวกับโพสต์ได้ ซึ่งทำได้โดยใช้ตารางเดียวโดยใช้การเชื่อมโยงแบบ polymorphic ซึ่งใช้ likable_type
เพื่อจัดเก็บรายการประเภทที่ชอบ
Notification
จะถูกสร้างขึ้นและส่งไปยังผู้ใช้รายอื่นเมื่อผู้ใช้โพสต์บนวอลล์ของตนหรือโพสต์/ความคิดเห็นใด ๆ ของพวกเขาถูกไลค์/แสดงความคิดเห็น นี่เป็นความสำเร็จอีกครั้งโดยใช้ polymorphic ที่เกี่ยวข้องซึ่งติดตามว่ารายการใดได้รับการแจ้งเตือน
ผู้ใช้จะมีตัวบ่งชี้แบบภาพบนแถบนำทางซึ่งจะแสดงเมื่อใดก็ตามที่มีการแจ้งเตือนใหม่ๆ ที่มองไม่เห็น และเมนูแบบเลื่อนลงที่แสดงรายการการแจ้งเตือนล่าสุดทั้งหมด 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
}
...