Catatan Materi Aplikasi Login Register Sederhana

Pendahuluan

• Dosen: Fadli dari Jevali Programming Bootcamp
• Materi: Pembuatan aplikasi login dan register sederhana menggunakan React dan Firebase
• Fitur: Login menggunakan email/password dan Google

Desain Aplikasi

1. Login Screen

   • Sederhana, terdapat tombol Login dan Register
   • Tombol Google Login untuk autentikasi menggunakan akun Google

2. Register Screen

   • Mirip dengan tampilan login, ada tombol Register dan Login

3. Dashboard

   • Menampilkan avatar dari Google dan email pengguna
   • Email tampil untuk pengguna yang login menggunakan email/password

Persiapan

1. Node.js

   • Pastikan Node.js terinstal

2. Visual Studio Code

   • Digunakan sebagai kode editor dengan banyak ekstensi

3. Tutorial React

   • Disarankan menonton tutorial dasar React sebelum memulai

Firebase Setup

• Daftar Firebase:
  • Buka konsol Firebase dan buat project baru
  • Aktifkan Authentication dengan email/password dan Google

Langkah-langkah Setup Firebase

1. Buat Project di Firebase
2. Aktifkan metode Sign-in:
   • Email/Password
   • Google
3. Konfigurasi aplikasi web pada Firebase

Instalasi Project

1. Buat Project React
   • Jalankan npm create react-app <nama-project>
2. Install Packages
   • Install Firebase: npm install firebase
   • Install React Router: npm install react-router-dom

Pengembangan Aplikasi

Membuat Komponen

• Struktur folder untuk komponen: src/pages
  • Login.jsx, Register.jsx, Dashboard.jsx

Routing

• Gunakan React Router untuk mengatur routing antar halaman

Login dan Register

• Implementasi fungsi login dan register dengan Firebase
• Validasi inputan pengguna

Penggunaan Local Storage

• Menyimpan data pengguna setelah login

Logika Logout

• Implementasi logika logout untuk menghapus data di local storage

Kesimpulan

• Aplikasi sederhana ini mengajarkan cara menangani autentikasi pengguna
• Pentingnya memahami logika login menggunakan provider Google dan email/password

Pertanyaan

• Menghubungi Fadli jika ada pertanyaan terkait materi

---

Referensi:

• Link YouTube, desain, dan kontak akan disertakan di komentar

Penutup:

• Terima kasih telah menyaksikan, jangan lupa subscribe dan komen.