Apakah Anda ingin membawa keterampilan pengembang Anda ke tingkat berikutnya atau apakah Anda ingin mengesankan calon majikan Anda? Kemudian buat Klon LinkedIn ini !

Bagian 4

Di bagian 3 seri ini, kami membuat komponen Feed & Widgets, dan kami menghubungkan komponen feed ke Firestore.

Pada artikel terakhir ini, kita akan menyiapkan Redux untuk mengelola status pengguna, membuat halaman login, dan akhirnya menerapkan ke Firebase!

1. — Menyiapkan Redux

Redux adalah pustaka JavaScript untuk mengelola status aplikasi. Di episode pertama, kami membuat starter aplikasi React dengan Redux Toolkit . Ini membuat template untuk menggunakan Redux dengan React. Sebelum melanjutkan, kita harus menata ulang folder yang dibuat oleh template.

• Hapus Counter.module.cssdan Counter.jsfile dari counterfolder.
• Pindahkan counterSlice.jsfile ke featuresfolder.
• Hapus counterfolder dan ganti nama counterSlice.jsfile menjadi userSlice.js.

• Ganti kode userSlice.jstersebut dengan yang berikut ini:
• Ganti konten dalam store.jsfile dengan yang berikut ini:

Saat pengguna logout, status pengguna akan sama dengan null, sedangkan saat pengguna masuk, status akan sama dengan action.payload, objek yang berisi informasi pengguna.

• Sekarang pergi ke App.jsdan tambahkan kode berikut:

const user = useSelector(selectUser)

• Di App.js, gunakan operator ternary untuk menampilkan aplikasi utama jika pengguna login, atau, jika pengguna logout atau tidak memiliki profil, itu akan menampilkan halaman login.

Sekarang kita harus membuat halaman Login.

2. — Buat halaman login

• Di dalam folder, buat file bernama . Login Login.js
• Setelah Anda berada di file, ketik rfce untuk menggunakan snippet dari ES7 Snippets .
• Masih dalam Login folder, buat Login.cssfile dan impor ke Login.jskomponen Anda.
• Komponen terakhir Login akan terlihat seperti ini:

Pendaftaran dikelola dengan fungsi panah registerdengan menggunakan Firebase Authentication dan createUserWithEmailAndPassword.

Otentikasi dikelola dengan fungsi panah loginToAppdengan menggunakan Firebase Authentication dan signInWithEmailAndPassword.

Informasi yang dikumpulkan dari pengguna didorong di toko redux dengan UseDispatch()kait.

• Untuk memberikan beberapa gaya pada Login.jskomponen kita, buka Login.cssdan tambahkan kode berikut:

Untuk melengkapi aplikasi kita, sekarang kita harus menambahkan fungsionalitas logout, membuat pengguna tetap login setelah login, dan menampilkan data dalam komponen Feed dari database Firestore.

• Kembali ke App.jskomponen, tambahkan kode berikut:

• Sekarang buka HeaderOption.jsdan tambahkan onClickacara ke HeaderOptionfungsi.
• Pergi ke Header.jsdan tambahkan kode berikut:

• Sekarang buka Sidebar.jsfile dan ubah isinya menjadi berikut:
• Buka Feed.jsfile dan ubah isinya menjadi berikut:

Selamat! Anda baru saja membuat klon LinkedIn!!

3. — Terapkan ke Firebase

Sebelum penerapan, pastikan untuk menginstal alat Firebase.

• Untuk menyebarkan proyek kami, buka konsol dan ketik perintah "firebase init"

• Pilih untuk menggunakan proyek yang ada

• Ketik di direktori publik menjadi “ build ”

• Konfigurasikan sebagai aplikasi satu halaman
• Sekarang jalankan di konsol perintah " npm run build "

Setelah build selesai, ketik di konsol " firebase deploy ".

Setelah menyelesaikan ini, Anda akan mendapatkan URL tempat aplikasi Anda dihosting secara online. Lihat milik saya di sini:https://linkedin-clone-5ebs.web.app/.

Selamat!!! Anda baru saja menerapkan Klon Google di Firebase Hosting!!

Kesimpulan

Luar biasa! Anda baru saja menyadari Klon LinkedIn! Saya harap Anda bersenang-senang membangun proyek ini dan Anda mencapai hasil akhir!

Jika Anda tersesat di sepanjang jalan, ini tautan ke bagian 1 , bagian 2 , & bagian 3 dan, seperti yang dijanjikan, kode sumber lengkap di GitHub saya!