Skip to main content

Posts

Showing posts with the label ReactJS

Netflix Clone Menggunakan NextJs dan Tailwind | Part 8

Halo temen-temen, untuk implementasi dari custom hook yang sudah dibuat pada part 7 akan dibahas pada part ini, sudah siap untuk tempur ngoding lagi? Langkah pertama, ubah file pages/_app.js agar bisa akses useAuth hooks. Ini memakai konsep HOC yang merupakan singkatan dari High Order Component. Tentunya konsep ini tidak akan dibahas disini, jika ingin dibahas boleh comment yaa.. Buka file pages/login.tsx lalu import useAuth dan seperti yang kita lihat, sekarang bisa akses semua function dari useAuth hooks Lalu ubah seperti dibawah ini Pastikan sudah jalankan npm run dev di console, dan akses login page, lalu login. Tentunya akan muncul alert error auth/configuration-not-found karena belum turn on authentication di firebase  Masuk ke halaman Authentication di console.firebase dan klik Get Started Klik email & password untuk metode login yang kita gunakan Enable toggle email/password dan klik save Pastikan status nya enable Refresh login page, isi email dan password dan klik but

Netflix Clone Menggunakan NextJs dan Tailwind | Part 7

Sekarang kita akan lanjutkan membuat custom hooks. Sebagai bahan pemahaman, bisa baca tentang react custom hooks pada link ini yaa  https://id.reactjs.org/docs/hooks-custom.html .Gimana paham? langsung mulai ke langkah pertama.. Buat folder hooks di project kita, lalu buat file baru di folder tersebut dengan nama useAuth.tsx , setelah itu import beberapa function dari firebase/auth, next/router, react dan firebase yang akan digunakan nanti Ada beberapa langkah untuk membaut  asynchronous signUp  function. Function Ini akan menerima email dan password sebagai parameter bertipe data string Buat state loading, yang akan digunakan sebagai loading indicator Di dalam function signUp hal pertama yang dilakukan adalah set loading state menjadi true , untuk menandakan bahwa prosess dimulai Gunakan function createUserWithEmailAndPassword yang di import dari firebase/auth. Function ini menerima parameter  Auth (no.2, di import dari file firebase.ts)  Email Password Lalu setUser , state ini bert

Netflix Clone Menggunakan NextJs dan Tailwind | Part 6

Di part sebelumnya, tampilan halaman login sudah selesai, saatnya membuat fungsi login. Ada satu library bagus yang bisa dipakai untuk mempermudah membuat function form login, Namanya react-hook-form   bisa diakses langsung dan mencoba demo nya langsung di https://react-hook-form.com/ . Yukk langsung coba install ke project netflix kita. Copy code npm install react-hook-form ke cmd dan tunggu sampai proses nya selesai Jika sudah selesai, buka buka file pages/login.tsx , kita akan gunakan useform dan SubmitHandler dari react-hook-form Pada tag form tambahkan onSubmit Dibawah ini muncul suggestion “email” dan “password” , kenapa? Karena kita sudah mendefinisikan type di   interface Inputs Karena keduanya harus di isi, tambahkan required true Hapus watch karena tidak dibutuhkan, saat klik button Sign In seharusnya function  onSubmit di jalankan dan akan menampilkan data yang di ketik pada console browser Yukk kita coba ketikkan email dan password lalu klik Sign in, jangan lupa buka conso

Netflix Clone Menggunakan NextJs dan Tailwind | Part 5

  Di part ini 5 ini kita akan membuat tampilan halaman login, untuk metode login nya akan menggunakan Firebase Authentication, sudah tau caranya? jika belum ikuti langkah langkah berikut ini yuk!😉 Buka website  https://firebase.google.com/ Sign In menggunakan akun google masing-masing, lalu buka console dengan klik bagian ujung kanan atas ( https://console.firebase.google.com/ ) dan Add Project Isi nama project, centang tanda checklist untuk mengonfirmasi bahwa akan menggunakan Firebase secara eksklusif untuk tujuan yang berkaitan dengan perdagangan, bisnis, kerajinan, atau profesi saya. Dan klik continue Disable Google Analytic untuk project ini, dan klik Create Project Tunggu proses selesai, lalu klik continue button Klik icon yang ditunjuk tanda panah merah untuk memulai Ketikan nama project kita, lalu klik Register app Sesesuai petunjuk, kita akan menjalankan perintah npm install firebase pada console di lokasi project kita, setelah itu tambahkan code konfigurasinya Jalankan peri