farcebook adalah aplikasi web full-stack yang terinspirasi dari Facebook yang dibangun di atas kerangka Rails. farcebook menggunakan database PostgreSQL dan React untuk rendering komponen frontend, dengan Redux digunakan untuk manajemen status.
buku lelucon LANGSUNG
Setelah pengguna mendaftar akun, halaman profil dibuat untuk mereka. Setiap profil mencakup header yang menyimpan gambar profil dan foto sampul, bagian Intro, yang menampilkan semua informasi pengguna saat ini, bagian Teman, yang menampilkan 9 teman pertama pengguna, dan feed yang menampilkan semua postingan yang diposting oleh pengguna dan diposting ke dinding pengguna.
Foto dihosting menggunakan bucket AWS S3 dan diunggah serta disimpan ke dalam database menggunakan permata paperclip
.
Pengguna berbagi informasi dengan orang lain melalui komponen Post
dan Comment
. Postingan dapat diposting langsung ke dinding pengguna lain atau diposting di dinding mereka sendiri (dengan receiver_id
postingan sama dengan id
mereka sendiri). Pengguna juga dapat mengunggah gambar untuk dibagikan bersama dengan setiap postingan.
Setelah dibuat, postingan dapat diedit dan dihapus. Seorang penulis dapat mengedit dan menghapus semua postingannya, sedangkan penerima postingan hanya dapat menghapusnya.
Untuk menunjukkan persetujuan, pengguna dapat memilih untuk Like
postingan. Postingan tidak hanya menunjukkan jumlah suka yang diterima, tetapi juga daftar pengguna yang menyukainya.
Pengguna juga dapat meninggalkan komentar pada postingan. Komentar ditampilkan secara berurutan berdasarkan waktu pembuatannya. Komentar juga dapat dibalas dengan komentar lain, dengan setiap komentar menampilkan semua komentar yang disarangkan. Komentar dikaitkan dengan komentar lain melalui parent_comment_id
opsional.
Pengguna juga dapat memilih untuk Like
komentar dengan cara yang sama seperti postingan. Hal ini dilakukan dengan menggunakan satu tabel melalui penggunaan asosiasi polimorfik, yang menggunakan likable_type
untuk menyimpan jenis item yang disukai.
Notification
dibuat dan dikirim ke pengguna lain ketika ada pengguna yang memposting di dinding mereka atau postingan/komentar mereka disukai/dikomentari. Hal ini sekali lagi dicapai dengan menggunakan polimorfik terkait yang melacak item mana yang diberi tahu.
Pengguna memiliki indikator visual di bilah navigasi mereka yang muncul setiap kali mereka memiliki notifikasi baru yang belum terlihat dan dropdown yang menampilkan daftar semua notifikasi terbaru mereka. Setiap NotificationListItem
menunjukkan nama pengguna lain dan tindakan yang terjadi, serta tautan ke item yang dimaksud ketika diklik.
Saya memanfaatkan pemuatan cepat menggunakan ActiveRecord untuk mengoptimalkan kueri basis data saya dan meningkatkan kinerja. Saat mengambil feed untuk pengguna, semua informasi relevan juga ditanyakan bersama dengan setiap postingan untuk digunakan nanti.
#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
...
Untuk melindungi pengguna, banyak fungsi untuk berkomentar dan memposting di dinding dilindungi dengan menjalin persahabatan antar pengguna. Hal ini dilakukan melalui penggunaan render bersyarat di React, memeriksa apakah pengguna saat ini adalah teman penulis postingan atau pemilik profil, atau apakah pengguna saat ini mencoba berinteraksi dengan postingan/profil mereka sendiri.
// 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
}
...